Refactor typography, add user settings area, add zooming feature

- Refactors the typography to be more consistent across browsers. Base font is now 'Open Sans Light', with the bold font being 'Open Sans'. This results in better readability. - Adds user settings area to contain all the various settings that users now have. This includes Theme (zoom for now, colors in the future), Alerts (persistance, expiration), Map (layers). The user settings area is in a slideout. Alerts and Map preferences have been removed from the view menu, which now only contains the visualization switching. - Adds user ability to control zoom. It operates in much the same way as the browser controlled zoom. It will even affect media queries, although I had to update how media queries work (and roll our own) in order to overcome the limitations of media queries (they don't quite work with rem units, in order to avoid infinite loops). In order to allow zooming, I've replaced almost all references to px units with rem units. I've also added some new less variables to use, such as @minimumFontSize, @largeFontSize, @minimumSpacing, @largeSpacing, etc. - In order to play nicely with the zoom, I've replaced the existing badging. Instead of displaying a number, the icons have slightly decreased opacity. If they have items, they gain full opacity.
codice · Dec 9, 2016 · 1e7aec6 · 1e7aec6
1 parent 525701e
commit 1e7aec6
Show file tree

Hide file tree

Showing 163 changed files with 4,229 additions and 528 deletions.
diff --git a/catalog/ui/catalog-ui-search/src/main/webapp/component/alert-item/alert-item.less b/catalog/ui/catalog-ui-search/src/main/webapp/component/alert-item/alert-item.less
@@ -1,7 +1,7 @@
 @{customElementNamespace}alert-item {
   display: block;
   white-space: nowrap;
-  padding: 0px 40px;
+  padding: 0rem 2.5rem;
   position: relative;
   cursor: pointer;
 
@@ -18,20 +18,20 @@
     width: @minimumButtonSize;
     height: 100%;
     position: absolute;
-    right: 0px;
-    top: 0px;
+    right: 0rem;
+    top: 0rem;
   }
 
   .details-detail {
-    line-height: 30px;
-    height: 30px;
+    line-height: @minimumLineSize;
+    height: @minimumLineSize;
   }
 }
 
 @{customElementNamespace}alert-item-collection {
 
   @{customElementNamespace}alert-item + @{customElementNamespace}alert-item {
-    margin-top: 10px;
+    margin-top: @minimumSpacing;
   }
 
   .alert-empty {

diff --git a/catalog/ui/catalog-ui-search/src/main/webapp/component/alert-item/alert-item.view.js b/catalog/ui/catalog-ui-search/src/main/webapp/component/alert-item/alert-item.view.js
@@ -74,7 +74,7 @@ define([
             return {
                 amount: modelJSON.metacardIds.length,
                 when: Common.getMomentDate(modelJSON.when),
-                queryName: query ? query.get('title') : 'Unknown Query',
+                queryName: query ? query.get('title') : 'Unknown Search',
                 workspaceName: workspace ? workspace.get('title') : 'Unknown Workspace'
             }
         }

diff --git a/catalog/ui/catalog-ui-search/src/main/webapp/component/alert-menu/alert-menu.hbs b/catalog/ui/catalog-ui-search/src/main/webapp/component/alert-menu/alert-menu.hbs
@@ -27,13 +27,13 @@
 </span>
 {{#if this.query}}
     <span class="menu-title query-title" data-workspaceid="{{this.query.id}}" data-help="This the
-    name of the query that this alert was generated from.">
+    name of the search that this alert was generated from.">
         {{this.query.title}}
     </span>
 {{else}}
-    <span class="menu-title" data-help="The query this alert belongs to has either been deleted
+    <span class="menu-title" data-help="The search this alert belongs to has either been deleted
     or you no longer have access to the workspace it was part of.">
-        Unknown Query
+        Unknown Search
     </span>
 {{/if}}
 <span class="menu-title title-seperator fa fa-caret-right">

diff --git a/catalog/ui/catalog-ui-search/src/main/webapp/component/alert-menu/alert-menu.less b/catalog/ui/catalog-ui-search/src/main/webapp/component/alert-menu/alert-menu.less
@@ -8,13 +8,14 @@
   > .menu-title {
     display: inline-block;
     vertical-align: top;
-    line-height: 60px;
-    font-size: 2rem;
+    line-height: 2*@minimumLineSize;
+    font-size: @largeFontSize;
     white-space: nowrap;
-    font-weight: 500;
+    .is-bold();
   }
 
   > .title-seperator {
-    padding: 0px 10px;
+    padding: 0rem @minimumSpacing;
+    font-family: 'FontAwesome';
   }
 }
diff --git a/catalog/ui/catalog-ui-search/src/main/webapp/component/alert-settings/alert-settings.hbs b/catalog/ui/catalog-ui-search/src/main/webapp/component/alert-settings/alert-settings.hbs
@@ -28,28 +28,4 @@
 
         </div>
     </div>
-</div>
-<div class="editor-footer">
-    <button class="editor-edit is-primary">
-        <span class="fa fa-pencil">
-
-        </span>
-        <span>
-            Edit
-        </span>
-    </button>
-    <button class="editor-cancel is-negative">
-         <span class="fa fa-times">
-         </span>
-        <span>
-            Cancel
-        </span>
-    </button>
-    <button class="editor-save is-positive">
-         <span class="fa fa-floppy-o">
-         </span>
-        <span>
-            Save
-        </span>
-    </button>
 </div>
diff --git a/catalog/ui/catalog-ui-search/src/main/webapp/component/alert-settings/alert-settings.less b/catalog/ui/catalog-ui-search/src/main/webapp/component/alert-settings/alert-settings.less
@@ -2,12 +2,12 @@
   .customElement;
 
   overflow: auto;
-  padding: 10px 10px;
-  font-size: 2rem;
+  padding: @minimumSpacing @minimumSpacing;
+  font-size: @largeFontSize;
 
   .editor-properties {
     overflow: auto;
-    max-height: ~"calc(100% - 88px)";
+    max-height: ~"calc(100% - @{minimumButtonSize} - 2*@{minimumSpacing})";
     text-align: center;
 
     .property-label {
@@ -24,13 +24,13 @@
       height: @minimumButtonSize;
       line-height: @minimumButtonSize;
       color: grey;
-      font-weight: 700;
+      .is-bold();
     }
   }
 
   .editor-footer {
-    margin-top: 20px;
-    height: 44px;
+    margin-top: @minimumSpacing;
+    height: @minimumButtonSize;
     white-space: nowrap;
     .inlineFix;
 

diff --git a/catalog/ui/catalog-ui-search/src/main/webapp/component/alert-settings/alert-settings.view.js b/catalog/ui/catalog-ui-search/src/main/webapp/component/alert-settings/alert-settings.view.js
@@ -44,12 +44,14 @@ define([
         onBeforeShow: function () {
             this.setupPersistance();
             this.setupExpiration();
-            this.turnOffEditing();
             this.handlePeristance();
             this.startListeningToRegions();
+            this.turnOnEditing();
         },
         startListeningToRegions: function(){
             this.listenTo(this.propertyPersistance.currentView.model, 'change:value', this.handlePeristance);
+            this.listenTo(this.propertyExpiration.currentView.model, 'change:value', this.save);
+            this.listenTo(this.propertyPersistance.currentView.model, 'change:value', this.save);
         },
         stopListeningToRegions: function(){
             this.stopListening(this.propertyPersistance.currentView.model);
@@ -121,27 +123,13 @@ define([
                 }
             });
         },
-        turnOffEditing: function () {
-            this.$el.removeClass('is-editing');
-            this.regionManager.forEach(function (region) {
-                if (region.currentView) {
-                    region.currentView.turnOffEditing();
-                }
-            });
-        },
-        cancel: function () {
-            this.stopListeningToRegions();
-            this.onBeforeShow();
-        },
         save: function () {
-            this.$el.removeClass('is-editing');
             var preferences = user.get('user').get('preferences');
             preferences.set({
                 alertPersistance: this.propertyPersistance.currentView.model.get('value'),
                 alertExpiration: this.propertyExpiration.currentView.model.get('value')[0]
             });
             preferences.savePreferences();
-            this.$el.trigger(CustomElements.getNamespace() + 'close-lightbox');
         }
     });
 });
diff --git a/catalog/ui/catalog-ui-search/src/main/webapp/component/alert/alert.less b/catalog/ui/catalog-ui-search/src/main/webapp/component/alert/alert.less
@@ -7,11 +7,11 @@
   }
 
   > .alert-menu {
-    height: 60px;
+    height: 2*@minimumLineSize;
   }
 
   > .alert-details {
-    height: ~'calc(100% - 60px)';
+    height: ~'calc(100% - 2*@{minimumLineSize})';
     white-space: nowrap;
   }
 
@@ -35,7 +35,7 @@
 
 }
 
-@media (max-width: @mediumScreenSize) {
+.is-medium-screen, .is-small-screen, .is-mobile-screen {
   @{customElementNamespace}alert {
     > .metacard-menu,
     > .metacard-details {

diff --git a/catalog/ui/catalog-ui-search/src/main/webapp/component/announcement/announcement.less b/catalog/ui/catalog-ui-search/src/main/webapp/component/announcement/announcement.less
@@ -39,8 +39,8 @@
 
     .announcement-title {
         text-align: center;
-        font-weight: bold;
-        font-size: 2rem;
+        .is-bold();
+        font-size: @largeFontSize;
         height: @minimumButtonSize;
         line-height: @minimumButtonSize;
         margin: 0 @minimumButtonSize;
@@ -61,7 +61,7 @@
         right: 0;
         top: 0;
         text-align: center;
-        font-size: 3rem;
+        font-size: @largeFontSize;
         height: @minimumButtonSize;
         line-height: @minimumButtonSize;
         width: @minimumButtonSize;

diff --git a/catalog/ui/catalog-ui-search/src/main/webapp/component/association/association.less b/catalog/ui/catalog-ui-search/src/main/webapp/component/association/association.less
@@ -30,7 +30,7 @@
 
     .association-parent-link,
     .association-child-link {
-        line-height: 44px;
+        line-height: @minimumButtonSize;
     }
 }
 

diff --git a/catalog/ui/catalog-ui-search/src/main/webapp/component/component.less b/catalog/ui/catalog-ui-search/src/main/webapp/component/component.less
@@ -101,6 +101,8 @@
 @import 'alert-settings/alert-settings';
 @import 'dropdown/alerts/dropdown.alerts.less';
 @import 'dropdown/uploads/dropdown.uploads.less';
+@import 'user-settings/user-settings';
+@import 'theme-settings/theme-settings';
 @import 'uploads/uploads';
 @import 'alerts/alerts';
 @import 'alert-item/alert-item';
@@ -143,4 +145,5 @@
 @import 'upload-summary/upload-summary';
 @import 'upload-batch-item/upload-batch-item';
 @import 'upload-menu/upload-menu';
-@import 'upload/upload';
+@import 'upload/upload';
+@import 'slideout/slideout';
diff --git a/catalog/ui/catalog-ui-search/src/main/webapp/component/confirmation/confirmation.less b/catalog/ui/catalog-ui-search/src/main/webapp/component/confirmation/confirmation.less
@@ -28,6 +28,12 @@
 
   .confirmation-choices {
     .inlineBlockDisplay(div);
+
+    button {
+      vertical-align: top;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
   }
 
   .confirmation-no {
@@ -44,7 +50,7 @@
 
 }
 
-@media (max-width: @smallScreenSize) {
+ .is-small-screen, .is-mobile-screen {
   @{customElementNamespace}confirmation {
 
   }

diff --git a/catalog/ui/catalog-ui-search/src/main/webapp/component/content-title/content-title.less b/catalog/ui/catalog-ui-search/src/main/webapp/component/content-title/content-title.less
@@ -1,7 +1,6 @@
 @{customElementNamespace}content-title{
   .customElement;
   position: relative;
-  line-height: 24px;
 
   input,
   button {
@@ -15,7 +14,7 @@
     min-width: 1px;
     background: @navigation-background-color;
     border: none;
-    font-size: 18px;
+    font-size: @minimumFontSize;
     padding-top: 4px;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -31,7 +30,7 @@
   }
 
   button {
-    font-size: 16px;
+    font-size: @minimumFontSize;
     color: grey;
   }
   button:hover {

diff --git a/catalog/ui/catalog-ui-search/src/main/webapp/component/content-toolbar/content-toolbar.less b/catalog/ui/catalog-ui-search/src/main/webapp/component/content-toolbar/content-toolbar.less
@@ -1,18 +1,18 @@
 @{customElementNamespace}content-toolbar {
   .customElement;
-  line-height: 30px;
+  line-height: @minimumLineSize;
   font-size: 0px;
 
   .toolbar-menu {
     display: inline-block;
     padding: 0px 10px;
     cursor: pointer;
-    height: 30px;
+    height: @minimumLineSize;
     vertical-align: top;
   }
 
   .toolbar-menu > span {
-    font-size: 14px;
+    font-size: @minimumFontSize;
   }
 
   .toolbar-menu:hover {

diff --git a/catalog/ui/catalog-ui-search/src/main/webapp/component/content/content.less b/catalog/ui/catalog-ui-search/src/main/webapp/component/content/content.less
@@ -1,8 +1,6 @@
 @{customElementNamespace}content {
-  @titleBarFontSize: 3rem;
-  @contentMenuHeight: 60px;
   @panelTwoSpacing: 20px;
-  @panelOneWidth: 420px;
+  @panelOneWidth: 26.25rem;
   @panelTwoWidth: 40%;
 
   .customElement;
@@ -13,11 +11,11 @@
 
   > .content-menu {
     width: 100%;
-    height: 60px;
+    height: 2*@minimumLineSize;
   }
 
   .content-content{
-    height: ~'calc(100% - @{contentMenuHeight})';
+    height: ~'calc(100% - 2*@{minimumLineSize})';
     .inlineBlockDisplay(div);
     .whiteSpaceFix;
     position: relative
@@ -75,7 +73,7 @@
         padding: 0px 10px;
         position: relative;
         left: @minimumButtonSize;
-        font-size: 2rem;
+        font-size: @largeFontSize;
       }
 
       > button {
@@ -84,7 +82,7 @@
         top: 0px;
         width: @minimumButtonSize;
         height: 100%;
-        font-size: @titleBarFontSize;
+        font-size: @largeFontSize;
       }
     }
 
@@ -95,9 +93,9 @@
   }
 }
 
-@media (max-width: @mediumScreenSize) {
+.is-medium-screen, .is-small-screen, .is-mobile-screen {
   @{customElementNamespace}content {
-    @panelOneWidth: 350px;
+    @panelOneWidth: 21.875rem;
 
     .content-panelOne {
       width: @panelOneWidth;
@@ -132,4 +130,4 @@
     }
 
   }
-}
+}
diff --git a/catalog/ui/catalog-ui-search/src/main/webapp/component/details-buttons/details-buttons.less b/catalog/ui/catalog-ui-search/src/main/webapp/component/details-buttons/details-buttons.less
@@ -3,8 +3,8 @@
   text-align: center;
 
   > button.is-neutral {
-    height: 30px;
-    line-height: 30px;
+    height: @minimumLineSize;
+    line-height: @minimumLineSize;
     width: auto;
     padding: 0px 10px;
     display: inline-block;