! Fixing message box to look decent

- Moving Initialization code into src/init.js
This commit is contained in:
shockrah 2021-03-11 17:18:26 -08:00
parent b5822cd3f1
commit e4f6e71ac8
4 changed files with 47 additions and 53 deletions

View File

@ -44,15 +44,15 @@
<ul class="scrollarea list-unstyled components" id="messages-list"></ul>
<div class="container" id="send-container">
<form class="form-inline">
<div class="form-group">
<input type="text" class="form-control" id="message-box" placehold="Message">
<button class="btn btn-primary" type="button">Send</button>
</div>
</form>
<div class="input-group" id="message-area">
<textarea rows="1" class="form-control" placeholder="Message" aria-describedby="message-btn" id="message-box"></textarea>
<div class="input-group-append">
<button class="btn btn-outline-secondary btn-nav-settings" type="button" id="message-btn">Send</button>
</div>
</div>
</div>
</div>
<!-- Message box -->
</div>
<div id="joinform" class="modal fade" tabindex="-1">
@ -88,20 +88,6 @@
</div>
</div>
<!-- Warning Toast -->
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<!-- <img src="..." class="rounded mr-2" alt="..."> -->
<strong class="mr-auto">Warning</strong>
<small class="text-muted">just now</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="toast-body" id="warning-toast"></div>
</div>
</body>
<!-- JQuery doesn't load so our squishy boi of the the collapsable menu literally doesn't work-->
<script type="text/javascript" src="../node_modules/jquery/dist/jquery.min.js"></script>
@ -110,21 +96,6 @@
<script type="text/javascript" src="../node_modules/popper.js/dist/umd/popper.js"></script>
<script type="text/javascript" src="../node_modules/popper.js/dist/umd/popper-utils.js"></script>
<script type="text/javascript" src="../node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
<script>
(async () => {
const { ipcRenderer } = require('electron')
const auth = require('../src/auth.js')
const { add_server_to_config } = require ('../src/settings.js')
$('#add-admin-json').click(async () => await add_server_to_config() )
try {
await auth.init()
} catch(err) {
console.log('Failure in IPC call')
console.log(err)
}
})()
</script>
<script type="text/javascript" src="../src/init.js"></script>
</html>

View File

@ -0,0 +1,14 @@
// Now the message box which must be pinned at the bottom
#send-container {
position: absolute;
bottom: 0;
height: 60px;
}
#message-box {
margin-top: auto;
}
#message-area {
width: 50vw;
}

View File

@ -3,6 +3,7 @@
@import 'join-modal';
@import 'channels';
@import 'settings-modal';
@import 'message-box';
body {
color: $text;
@ -113,20 +114,4 @@ ul ul a {
max-height: 1005px; // 1080 - $send-container-height
}
// Now the message box which must be pinned at the bottom
#send-container {
position: absolute;
bottom: 0;
height: 50px;
width: 100vw;
}
#message-box {
padding-right: 25px;
}
#message-submit {
padding-left: 25px;
width: 25px;
}

View File

@ -0,0 +1,24 @@
const { ipcRenderer } = require('electron')
const $ = require('jquery')
// Path is from pages/index.html
const auth = require('../src/auth.js')
const { add_to_server_config } = require('../src/settings.js')
const message = require('../src/messages.js')
$('#add-admin-json').click(async () => { await add_server_to_config() } )
$('#message-box').on('keypress', async (event) => {
if(event.keyCode == 13 && !event.shiftKey ) {
await message.send()
}
})
$('#message-btn').on('click', () => console.log('submitting'))
auth.init()
.then(
value => console.log('Got config', value),
reason => console.log('Failure in IPC call', reason)
)