Fix thread menus / Replace "modalMode" with "appMode".

ForstaLabs · Sep 6, 2017 · 38c2794 · 38c2794
1 parent e9eacc6
commit 38c2794
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 60 deletions.
diff --git a/app/main.js b/app/main.js
@@ -31,7 +31,8 @@
         console.log('%cStarting Forsta Messenger',
                     'font-size: 120%; font-weight: bold;');
 
-        F.modalMode = !!location.search.match(/modalMode/);
+        F.appMode = !!location.search.match(/appMode/i);
+        F.autoInstall = !!location.search.match(/autoInstall/i);
 
         F.emoji = new EmojiConvertor();
         F.emoji.include_title = true;

diff --git a/app/views/main.js b/app/views/main.js
@@ -76,23 +76,21 @@
         render: async function() {
             initNotifications();
             let headerRender;
-            if (!F.modalMode) {
-                this.headerView = new F.HeaderView({
-                    el: '#f-header-menu-view',
-                    model: F.currentUser
-                });
-                headerRender = this.headerView.render();
-            } else {
-                $('#f-header-menu-view').hide();
-                $('body').css('zoom', '0.9');
+            this.headerView = new F.HeaderView({
+                el: '#f-header-menu-view',
+                model: F.currentUser
+            });
+            headerRender = this.headerView.render();
+            if (F.appMode) {
+                $('body').css('zoom', '1.2');
             }
             this.threadStack = new F.ThreadStack({el: '#f-thread-stack'});
             this.navView = new F.NavView({
                 el: '#f-nav-view',
                 collection: this.threads
             });
             (new F.NewThreadView({el: 'nav'})).render();
-            if (!(await F.state.get('navCollapsed')) && !F.modalMode) {
+            if (!(await F.state.get('navCollapsed'))) {
                 await this.toggleNavBar();
             }
             await Promise.all([

diff --git a/app/views/thread.js b/app/views/thread.js
@@ -40,7 +40,6 @@
             'click .f-clear-messages': 'onClearMessages',
             'click .f-leave-thread': 'onLeaveThread',
             'click .f-reset-session': 'onResetSession',
-            'click .f-go-modal': 'onGoModal',
             'click video': 'initiateVidEvents',
             'dblclick video.targeted' : 'vidFullscreen',
             'loadMore': 'fetchMessages',
@@ -92,7 +91,7 @@
         render_attributes: async function() {
             return Object.assign({
                 notificationsMuted: this.model.notificationsMuted(),
-                modalMode: F.modalMode,
+                appMode: F.appMode,
                 avatarProps: await this.model.getAvatar(),
                 titleNormalized: this.model.get('title') || this.model.get('distributionPretty')
             }, F.ThreadViewBase.prototype.render_attributes.apply(this, arguments));
@@ -396,12 +395,6 @@
             await this.model.endSession();
         },
 
-        onGoModal: function() {
-            window.open('?modalMode', 'ForstaWebModal',
-                        'height=400,width=300,location=no,menubar=no,status=no,titlebar=no,toolbar=no');
-            location.assign('/console'); // We aren't allowed to close the existing window but must leave.
-        },
-
         onLeaveThread: async function() {
             const confirm = await F.util.confirmModal({
                 icon: 'eject',
@@ -498,7 +491,7 @@
             }
             return Object.assign({
                 notificationsMuted: this.model.notificationsMuted(),
-                modalMode: F.modalMode,
+                appMode: F.appMode,
                 members,
                 avatarProps: await this.model.getAvatar(),
                 titleNormalized: this.model.get('title') || this.model.get('distributionPretty')

diff --git a/html/install.html b/html/install.html
@@ -51,7 +51,7 @@ <h1 class="ui header">
                 <div class="content">
                     Forsta Messenger Install
                     <div class="sub header">
-                        To authenticate your identity Forsta Web Messenger must first be verified using your mobile device.
+                        To authenticate your identity Forsta Messenger must first be verified using your mobile device.
                     </div>
                   </div>
                 </div>
@@ -68,7 +68,7 @@ <h1 class="ui header">
 
                     <div class="ui grid stackable">
                         <div class="column ten wide ui segment apps basic">
-                            To use the Forsta Web Messenger you first need to install one of the mobile Apps.
+                            To use the Forsta Messenger you first need to install one of the mobile Apps.
                             This is to certify your identity on both platforms.
                             <div class="ui grid two column">
                                 <div class="column centered">

diff --git a/manifest.json b/manifest.json
@@ -5,7 +5,7 @@
     "background_color": "black",
     "theme_color": "black",
     "description": "Forsta secure messaging application",
-    "start_url": "/@",
+    "start_url": "/@?appMode",
     "display": "standalone",
     "orientation": "any",
     "gcm_sender_id": "103953800507",

diff --git a/stylesheets/main.scss b/stylesheets/main.scss
@@ -258,17 +258,10 @@ nav > .ui.inverted.segment {
     .f-header.ui.menu {
         border: 0 none transparent;
         border-radius: 0;
-        background: #ececec;
-        margin-bottom: 0;
-        font-size: 1.1em;
 
-        .item {
-            padding-top: .1em;
-            padding-bottom: .1em;
-        }
-
-        .f-actions > .icon {
-            padding-left: 0.4em;
+        .item.icon {
+            padding-left: 1em;
+            padding-right: 1em;
         }
 
         @include avatar(2.8rem);
@@ -588,14 +581,27 @@ nav > .ui.inverted.segment {
             display: flex;
         }
 
-        .f-toggle {
-            padding: 0;
+        .f-toggle.item {
+            padding: 0.5em;
+
+            &:first-child {
+                padding-left: 0;
+            }
+
+            &:last-child {
+                padding-right: 0;
+            }
 
             button.attached {
                 padding: 0.4em 0.8em;
             }
         }
 
+        .f-title.item {
+            padding-left: 1ch;
+            padding-right: 1ch;
+        }
+
         .menu.left {
             flex: 1;
 

diff --git a/templates/util/thread-menu.html b/templates/util/thread-menu.html
@@ -6,7 +6,7 @@
                 <i class="icon double angle right"></i>
             </button>
         </div>
-        <div class="item">
+        <div class="f-title item">
             {{#if left}}
                 <i class="icon ban red big"
                     data-content="You left this {{threadName}}"></i>
@@ -18,10 +18,8 @@
     </div>
 
     <div class="menu right">
-        <div class="f-actions item">
-
-            <div class="f-notifications ui dropdown icon labeled pointing top right"
-                 data-content="Notifications">
+        <div class="f-notifications item ui dropdown icon"
+             data-content="Notifications">
             <i class="icon alarm outline grey"></i>
             <div class="menu">
                 <div class="header">{{threadName}} Notifications</div>
@@ -36,9 +34,7 @@
                 <div class="item" data-value="604800">A Week</div>
             </div>
         </div>
-
-        <div class="f-expire ui dropdown icon labeled pointing top right"
-             data-content="Disappearing Messages">
+        <div class="f-expire item ui dropdown icon" data-content="Disappearing Messages">
             <i class="icon hourglass grey"></i>
             <div class="menu">
                 <div class="header">Message Expiration</div>
@@ -57,24 +53,15 @@
                 <div class="item" data-value="604800">A week</div>
             </div>
         </div>
-
-    <div class="f-settings ui dropdown icon labeled pointing top right"
-        data-content="{{threadName}} Settings">
-        <i class="icon link options vertical grey"></i>
-        <div class="menu">
-            <div class="item f-clear-messages"><i class="icon recycle"></i>Clear Messages</div>
-            <div class="item f-close-thread"><i class="icon window close"></i>Close {{threadName}}</div>
-            <div class="divider"></div>
-            <div class="item f-leave-thread"><i class="icon eject"></i>Leave {{threadName}}</div>
+        <div class="f-settings item ui dropdown icon" data-content="{{threadName}} Settings">
+            <i class="icon link options vertical grey"></i>
+            <div class="menu">
+                <div class="item f-clear-messages"><i class="icon recycle"></i>Clear Messages</div>
+                <div class="item f-close-thread"><i class="icon window close"></i>Close {{threadName}}</div>
+                <!--NOT WORKING <div class="divider"></div>
+                <div class="item f-leave-thread"><i class="icon eject"></i>Leave {{threadName}}</div>-->
+            </div>
         </div>
-    </div>
-
-    {{#unless modalMode}}
-    <i class="f-go-modal icon link external share grey"
-    data-content="Use small mode"></i>
-    {{/unless}}
-    </div>
-
         <div class="f-toggle item">
             <button class="f-toggle-aside ui button icon grey left attached"
                     data-content="Toggle information panel">