attempt (and fail) to put message div before the textobx

This commit is contained in:
hippoz 2020-11-20 11:59:48 +02:00
parent 94d3af7b7e
commit 9d1adfe748
2 changed files with 34 additions and 5 deletions

View file

@ -25,11 +25,28 @@
.cursor {
cursor: pointer;
}
.chat-bar {
position: fixed !important;
left: 0 !important;
bottom: 0 !important;
width: 98% !important;
margin-left: 1% !important;
}
.as-console-wrapper {
display: none !important;
}
.posts-container {
overflow-y: auto;
height: calc(90vh - 100px);
}
</style>
</head>
<body>
<div id="app">
<div v-if="showApp">
<div id="appContainer" v-if="showApp">
<md-dialog id="create-category-dialog" :md-active.sync="dialog.show.createCategory">
<md-dialog-title>Create category</md-dialog-title>
@ -96,7 +113,7 @@
<md-button @click="refresh()" v-if="!selection.category.isChatContext">Refresh</md-button>
</md-toolbar>
<div id="posts-container" v-if="selection.category.browsing">
<div id="posts-container" class="posts-container" v-if="selection.category.browsing">
<md-card v-for="post in selection.posts" v-bind:key="post._id" v-if="!selection.category.isChatContext">
<md-card-header>
<div class="md-title" v-html="post.title"></div>
@ -115,13 +132,13 @@
<a class="md-dense cursor md-title" v-on:click="viewProfile(post.author._id)"><span>{{ post.author.username }}</span></a>
</md-card-header>
<md-card-content v-html="post.content"></md-card-content>
<md-card-content>{{ post.content }}</md-card-content>
</md-card>
<br>
</div>
</div>
<md-speed-dial class="md-fixed md-bottom-right" md-direction="top" md-elevation="5" style="z-index: 4000;">
<md-speed-dial class="md-fixed md-bottom-right" md-direction="top" md-elevation="5" style="z-index: 4000;" v-show="!selection.category.isChatContext">
<md-speed-dial-target>
<md-icon class="md-morph-initial">add</md-icon>
<md-icon class="md-morph-final">edit</md-icon>
@ -139,6 +156,11 @@
</md-button>
</md-speed-dial-content>
</md-speed-dial>
<md-field md-inline class="chat-bar" v-show="selection.category.isChatContext">
<label>Send message</label>
<md-input v-model="message.typed" v-on:keyup.enter="sendCurrentMessage()"></md-input>
</md-field>
</div>
<md-snackbar md-position="center" :md-duration="snackbarNotificationDuration" :md-active.sync="showSnackbarNotification" md-persistent>
<span>{{ snackbarNotification }}</span>

View file

@ -171,6 +171,9 @@ const app = new Vue({
gateway: new GatewayConnection(),
messages: {
'X': [ { username: 'NONEXISTENT_TEST_ACCOUNT', content: 'TEST MSG' } ]
},
message: {
typed: ''
}
},
mounted: async function() {
@ -234,6 +237,10 @@ const app = new Vue({
this.selection.category.title = 'Chat';
this.selection.category._id = categoryId;
},
sendCurrentMessage: async function() {
this.gateway.sendMessage(this.selection.category._id, this.message.typed);
this.message.typed = '';
},
// Category and post browsing
browseCategories: async function() {