attempt (and fail) to put message div before the textobx
This commit is contained in:
parent
94d3af7b7e
commit
9d1adfe748
2 changed files with 34 additions and 5 deletions
32
app/app.html
32
app/app.html
|
@ -25,11 +25,28 @@
|
||||||
.cursor {
|
.cursor {
|
||||||
cursor: pointer;
|
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>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app">
|
<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 id="create-category-dialog" :md-active.sync="dialog.show.createCategory">
|
||||||
<md-dialog-title>Create category</md-dialog-title>
|
<md-dialog-title>Create category</md-dialog-title>
|
||||||
|
|
||||||
|
@ -78,7 +95,7 @@
|
||||||
</md-dialog-actions>
|
</md-dialog-actions>
|
||||||
</md-dialog-content>
|
</md-dialog-content>
|
||||||
</md-dialog>
|
</md-dialog>
|
||||||
|
|
||||||
<md-toolbar class="md-accent" md-elevation="5">
|
<md-toolbar class="md-accent" md-elevation="5">
|
||||||
<h3 class="md-title" style="flex: 1">Brainlet</h3>
|
<h3 class="md-title" style="flex: 1">Brainlet</h3>
|
||||||
<md-menu md-size="small">
|
<md-menu md-size="small">
|
||||||
|
@ -96,7 +113,7 @@
|
||||||
<md-button @click="refresh()" v-if="!selection.category.isChatContext">Refresh</md-button>
|
<md-button @click="refresh()" v-if="!selection.category.isChatContext">Refresh</md-button>
|
||||||
</md-toolbar>
|
</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 v-for="post in selection.posts" v-bind:key="post._id" v-if="!selection.category.isChatContext">
|
||||||
<md-card-header>
|
<md-card-header>
|
||||||
<div class="md-title" v-html="post.title"></div>
|
<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>
|
<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-header>
|
||||||
|
|
||||||
<md-card-content v-html="post.content"></md-card-content>
|
<md-card-content>{{ post.content }}</md-card-content>
|
||||||
</md-card>
|
</md-card>
|
||||||
<br>
|
<br>
|
||||||
</div>
|
</div>
|
||||||
</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-speed-dial-target>
|
||||||
<md-icon class="md-morph-initial">add</md-icon>
|
<md-icon class="md-morph-initial">add</md-icon>
|
||||||
<md-icon class="md-morph-final">edit</md-icon>
|
<md-icon class="md-morph-final">edit</md-icon>
|
||||||
|
@ -139,6 +156,11 @@
|
||||||
</md-button>
|
</md-button>
|
||||||
</md-speed-dial-content>
|
</md-speed-dial-content>
|
||||||
</md-speed-dial>
|
</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>
|
</div>
|
||||||
<md-snackbar md-position="center" :md-duration="snackbarNotificationDuration" :md-active.sync="showSnackbarNotification" md-persistent>
|
<md-snackbar md-position="center" :md-duration="snackbarNotificationDuration" :md-active.sync="showSnackbarNotification" md-persistent>
|
||||||
<span>{{ snackbarNotification }}</span>
|
<span>{{ snackbarNotification }}</span>
|
||||||
|
|
|
@ -171,6 +171,9 @@ const app = new Vue({
|
||||||
gateway: new GatewayConnection(),
|
gateway: new GatewayConnection(),
|
||||||
messages: {
|
messages: {
|
||||||
'X': [ { username: 'NONEXISTENT_TEST_ACCOUNT', content: 'TEST MSG' } ]
|
'X': [ { username: 'NONEXISTENT_TEST_ACCOUNT', content: 'TEST MSG' } ]
|
||||||
|
},
|
||||||
|
message: {
|
||||||
|
typed: ''
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted: async function() {
|
mounted: async function() {
|
||||||
|
@ -234,6 +237,10 @@ const app = new Vue({
|
||||||
this.selection.category.title = 'Chat';
|
this.selection.category.title = 'Chat';
|
||||||
this.selection.category._id = categoryId;
|
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
|
// Category and post browsing
|
||||||
browseCategories: async function() {
|
browseCategories: async function() {
|
||||||
|
|
Reference in a new issue