Skip to content

Commit

Permalink
Merge 42951fb into 701ab0d
Browse files Browse the repository at this point in the history
  • Loading branch information
@super3
super3 committed Nov 26, 2018
2 parents 701ab0d + 42951fb commit 9be8cb6
Show file tree
Hide file tree
Showing 3 changed files with 58 additions and 14 deletions.
25 changes: 21 additions & 4 deletions src/components/Channel.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,19 @@
<!-- Top bar -->
<div class="border-b flex px-6 py-2 items-center flex-none">
<div class="flex flex-col">
<h3 class="text-grey-darkest mb-1 font-extrabold">#{{channel.name}}</h3>
<div class="text-grey-dark text-sm truncate">
<h3 class="text-grey-darkest mb-1 font-extrabold hidden md:block">#{{channel.name}}</h3>
<div class="inline-block relative w-64 block md:hidden">
<select v-model="selected" v-on:change="updateSelected" class="block appearance-none w-full bg-white border border-grey-light hover:border-grey px-4 py-2 pr-8 rounded leading-tight focus:outline-none">
<option class="font-bold text-black" disabled>Channels</option>
<option v-for="channel in channels" v-bind:value="JSON.stringify([ 'channel', channel.id ])"><span style="margin-left: 50px;">&nbsp;&nbsp;&nbsp;#{{channel.name}}</span></option>
<option class="font-bold text-black" disabled>Direct Messages</option>
<option class="pr-5 mr-5" v-for="direct in directs" v-bind:value="JSON.stringify([ 'direct', direct.user.id ])">&nbsp;&nbsp;&nbsp;{{direct.user.name}}</option>
</select>
<div class="pointer-events-none absolute pin-y pin-r flex items-center px-2 text-grey-darker">
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
</div>
</div>
<div class="text-grey-dark text-sm truncate hidden md:block">
Channel
</div>
</div>
Expand Down Expand Up @@ -42,11 +53,14 @@ const Message = require('./Message.vue');
module.exports = {
props: [
"channel"
"channel",
"channels",
"directs"
],
data: () => ({
message: "",
docked: true
docked: true,
selected: ''
}),
methods: {
handleMessage() {
Expand All @@ -60,6 +74,9 @@ module.exports = {
if(this.docked === true) {
this.$refs.chat.scrollTop = this.$refs.chat.scrollHeight;
}
},
updateSelected() {
this.$emit('selected', ...JSON.parse(this.selected));
}
},
mounted() {
Expand Down
20 changes: 18 additions & 2 deletions src/components/Dash.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,8 +96,20 @@
</div>
</div>
<!-- Chat content -->
<Channel v-if="selectedType === 'channel'" v-bind:channel="channels.find(channel => channel.id === selected)" v-on:message="createMessage"></Channel>
<Direct v-if="selectedType === 'direct'" v-bind:direct="directs.find(direct => direct.user.id === selected)" v-on:message="createDirectMessage"></Direct>
<Channel v-if="selectedType === 'channel'"
v-bind:channel="channels.find(channel => channel.id === selected)"
v-bind:channels="channels"
v-bind:directs="directs"
v-on:message="createMessage"
v-on:selected="handleSelected"
></Channel>
<Direct v-if="selectedType === 'direct'"
v-bind:direct="directs.find(direct => direct.user.id === selected)"
v-bind:channels="channels"
v-bind:directs="directs"
v-on:message="createDirectMessage"
v-on:selected="handleSelected"
></Direct>
</div>

</div>
Expand Down Expand Up @@ -150,6 +162,10 @@ module.exports = {
},
createDirectMessage(user, text) {
socket.emit('direct-message', user.id, text);
},
handleSelected(type, id) {
this.selectedType = type;
this.selected = id;
}
},
created() {
Expand Down
27 changes: 19 additions & 8 deletions src/components/Direct.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,23 @@
<div class="flex-1 flex flex-col bg-white overflow-hidden">
<!-- Top bar -->
<div class="border-b flex px-6 py-2 items-center flex-none">
<div class="flex flex-col">
<div class="text-grey-dark text-sm truncate">
<h3 class="text-grey-darkest mb-1 font-extrabold">{{direct.user.name}}</h3>
<div class="text-grey-dark text-sm truncate">
Direct Message
</div>
</div>
</div>
<div class="flex flex-col">
<h3 class="text-grey-darkest mb-1 font-extrabold hidden md:block">{{direct.user.name}}</h3>
<div class="inline-block relative w-64 block md:hidden">
<select v-model="selected" v-on:change="updateSelected" class="block appearance-none w-full bg-white border border-grey-light hover:border-grey px-4 py-2 pr-8 rounded leading-tight focus:outline-none">
<option class="font-bold text-black" disabled>Channels</option>
<option v-for="channel in channels" v-bind:value="JSON.stringify([ 'channel', channel.id ])"><span style="margin-left: 50px;">&nbsp;&nbsp;&nbsp;#{{channel.name}}</span></option>
<option class="font-bold text-black" disabled>Direct Messages</option>
<option class="pr-5 mr-5" v-for="direct in directs" v-bind:value="JSON.stringify([ 'direct', direct.user.id ])">&nbsp;&nbsp;&nbsp;{{direct.user.name}}</option>
</select>
<div class="pointer-events-none absolute pin-y pin-r flex items-center px-2 text-grey-darker">
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
</div>
</div>
<div class="text-grey-dark text-sm truncate hidden md:block">
Direct Message
</div>
</div>
<div class="ml-auto hidden md:block">
<div class="relative">
<input type="search" placeholder="Search" class="appearance-none border border-grey rounded-lg pl-8 pr-4 py-2">
Expand Down Expand Up @@ -44,6 +53,8 @@ const Message = require('./Message.vue');
module.exports = {
props: [
"channels",
"directs",
"direct"
],
data: () => ({
Expand Down

0 comments on commit 9be8cb6

Please sign in to comment.