pushChat

Author: Kavelin

index.html

@@ -40,7 +40,7 @@
                                 <span class="mdc-list-item__text">Settings</span>
                             </li>
 
-                            <li class="mdc-list-item" role="menuitem">
+                            <li class="mdc-list-item" role="menuitem" v-on:click="logOut">
                                 <span class="mdc-list-item__graphic material-icons">exit_to_app</span>
                                 <span class="mdc-list-item__text">Log out</span>
                             </li>
@@ -93,7 +93,7 @@ <h1>Blitzchat</h1>
 
     <template id="contactItemTemplate">
 
-        <div class="contact-item" v-on:click="open">
+        <div class="contact-item" v-on:click="open($event)">
             <img v-if="contact.photoURL" v-bind:src="contact.photoURL" v-bind:alt="contact.name" width="50" height="50"
                 class="picture">
             <div v-else class="noimage picture">{{contact.people.length}}</div>
@@ -109,7 +109,7 @@ <h3>{{computedName}}</h3>
 
     <template id="chatWindowTemplate">
 
-        <div class="chat-window mdc-elevation--z1" v-on:focus="focusHandler" tabindex="-1">
+        <div class="window mdc-elevation--z1" v-on:focus="focusHandler" tabindex="-1">
             <div class="header mdc-elevation--z2">
                 <div class="actions">
                     <button class="button" v-on:click="fullscreenHandler">
@@ -161,7 +161,7 @@ <h3>{{computedName}}</h3>
     </template>
 
     <template id="newConversationFormTemplate">
-        <div class="new-conversation-form chat-window mdc-elevation--z1" tabindex="-1" v-on:focus="focusHandler">
+        <div class="new-conversation-form window mdc-elevation--z1" tabindex="-1" v-on:focus="focusHandler">
             <button class="mdc-icon-button material-icons" v-on:click="previousPhase"
                 v-bind:class="{disabled: form.phase == 0}">
                 arrow_back

scripts/ui.js

@@ -21,7 +21,7 @@ class UI {
                 FLOATING: 1
             };
             var loadedUsers = {};
-            
+
             var moreMenu = new MDCMenu(document.querySelector('#more-menu'));
             var keyListener = new window.keypress.Listener();
             this.vue = new Vue({
@@ -153,7 +153,11 @@ class UI {
                             });
                             moreMenu = new MDCMenu(document.querySelector('#more-menu'));
                         }, 0);
-                        
+
+                    },
+                    logOut() {
+                        auth.signOut();
+                        location.reload();
                     }
 
                 },
@@ -177,7 +181,10 @@ class UI {
                 props: { 'contact': Object, 'openChat': Function },
                 template: '#contactItemTemplate',
                 methods: {
-                    open() {
+                    open(e) {
+                        if (e.shiftKey) { 
+                            this.$root.pushChat(this.contact) 
+                        };
                         this.$root.openChat(this.contact);
                     }
                 },
@@ -266,7 +273,7 @@ class UI {
                         this.messageText = ''; // clear
 
                         that.vue.dbref.ref('blitzchat/conversations/' + this.chat.key).child('messages').push(message);
-                        
+
 
                     },
                     getMessages() {
@@ -430,7 +437,7 @@ class UI {
                 template: '#messageTemplate',
                 props: { 'message': Object },
                 data: () => ({
-                    
+
                 }),
                 methods: {
                     urlify(text) {

styles/index.css

@@ -262,7 +262,7 @@ body {
     top: 52px;
 }
 
-.chat-window {
+.window {
     height: 100%;
     border-radius: 10px;
     transition: left 100ms ease, width 100ms ease, height 100ms ease, box-shadow 100ms ease, background 100ms ease;
@@ -272,12 +272,12 @@ body {
     position:relative;
 }
 
-#chat-grid:not(.single) .chat-window:focus, #chat-grid:not(.single) .chat-window:focus-within {
+#chat-grid:not(.single) .window:focus, #chat-grid:not(.single) .window:focus-within {
     box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, .12);
     background: rgba(255, 255, 255, 0.09);
 }
 
-.chat-window .header, .send-message {
+.window .header, .send-message {
     width: calc(100% - 34px);
     height: 24px;
     z-index: 1;
@@ -437,7 +437,7 @@ body {
     color: #2288ff;
 }
 
-.chat-window .header .title {
+.window .header .title {
     font-size: 18px;
     margin-left: 4px;
     display: inline-block;
@@ -447,32 +447,32 @@ body {
     width: calc(100% - 84px);
 }
 
-.chat-window .header .actions.right {
+.window .header .actions.right {
     float: right;
     margin-right: -2px;
 }
 
-.chat-window .header .actions .button {
+.window .header .actions .button {
     backdrop-filter: none;
     background: transparent;
     margin-left: 4px;
     padding: 0;
     color: #ffffff77;
 }
 
-.chat-window .header .actions .button:hover {
+.window .header .actions .button:hover {
     color: #2288ff;
 }
 
-.chat-window .header .actions .close:hover {
+.window .header .actions .close:hover {
     color: #ff2222;
 }
 
-.chat-window .header .actions.right .button {
+.window .header .actions.right .button {
     float: right;
 }
 
-.chat-window .header .actions {
+.window .header .actions {
     display: inline-block;
     margin-left: -4px;
 }