Merge pull request #572 from thevoiceofzeke/bell-fix

fix: Obscure notifications bell when on full view
uPortal-Attic · Oct 11, 2017 · ff37e1f · ff37e1f
2 parents 0e0bec0 + c6e9a64
commit ff37e1f
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 5 deletions.
diff --git a/components/css/buckyless/search.less b/components/css/buckyless/search.less
@@ -97,12 +97,15 @@ search {
     &.myuw-search__mobile {
       height: 56px;
       max-width: 100%;
-      width: 100%;
+      width: 0;
+      //opacity: 0;
       position: absolute;
       right: 0;
       top: 0;
       padding: 6px 4px;
       z-index: 80;
+      overflow: hidden;
+      transition: @transition-width;
 
       .md-button {
         min-height: 44px;
@@ -126,9 +129,11 @@ search {
       md-input-container {
         margin: 0;
         padding: 0;
+        opacity: 0;
         height: 100%;
         background-color: @white;
         border-radius: 5px;
+        transition: @transition-opacity-fast;
 
         input.md-input {
           margin: 0 40px;
@@ -141,6 +146,15 @@ search {
           }
         }
       }
+
+      &.search-expanded {
+        opacity: 1;
+        width: 100%;
+
+        md-input-container {
+          opacity: 1;
+        }
+      }
     }
   }
 }
diff --git a/components/css/themes/common-variables.less b/components/css/themes/common-variables.less
@@ -60,7 +60,9 @@
 */
 @background-transition: background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
 @transition-height: height 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
+@transition-width: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
 @transition-opacity: opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
+@transition-opacity-fast: opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
 @transition-all: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
 @transition-color: color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
 

diff --git a/components/portal/messages/controllers.js b/components/portal/messages/controllers.js
@@ -153,6 +153,8 @@ define(['angular'], function(angular) {
         vm.notificationsUrl = MESSAGES.notificationsPageURL;
         vm.status = 'View notifications';
         vm.isLoading = true;
+        vm.isNotificationsPage =
+          ($location.path() == MESSAGES.notificationsPageURL);
 
         // //////////////////
         // Event listeners //

diff --git a/components/portal/messages/partials/notifications-bell.html b/components/portal/messages/partials/notifications-bell.html
@@ -21,7 +21,7 @@
 <div class="notifications">
   <!-- MOBILE BELL -->
   <div class="notification-badge notification-badge-mobile" aria-label="{{ status }}"
-       ng-show="directiveMode === 'mobile-bell' && vm.notifications.length !== 0">
+       ng-show="directiveMode === 'mobile-bell' && vm.notifications.length !== 0 && !vm.isNotificationsPage">
     <md-icon>notifications</md-icon>
   </div>
 
@@ -33,13 +33,14 @@
                ng-click="vm.pushGAEvent('Mobile Menu', 'Click Link', 'Notifications');"
                layout="row" layout-align="start center">
       <span><md-icon>notifications</md-icon></span>
-      <span>Notifications ({{ vm.notifications.length }})</span>
+      <span>Notifications </span>
+      <span ng-show="!vm.isNotificationsPage">({{ vm.notifications.length }})</span>
     </md-button>
   </md-menu-item>
 
   <!-- DESKTOP NOTIFICATION BELL -->
   <md-menu class="notifications-menu"
-           ng-show="directiveMode === 'bell'"
+           ng-show="directiveMode === 'bell' && !vm.isNotificationsPage"
            md-offset="-200 0"
            md-position-mode="target bottom">
     <md-button ng-click="$mdOpenMenu($event);vm.pushGAEvent('Top Bar', 'Click Link', 'Notification Bell')"

diff --git a/components/portal/search/partials/search.html b/components/portal/search/partials/search.html
@@ -19,7 +19,7 @@
 
 -->
 <!-- Mobile search -->
-<form name="searchForm" class="myuw-search__mobile" ng-submit="vm.submit()" ng-if="directiveMode === 'mobile-search' && vm.searchExpanded">
+<form name="searchForm" class="myuw-search__mobile" ng-class="{ 'search-expanded' : vm.searchExpanded }" ng-submit="vm.submit()" ng-if="directiveMode === 'mobile-search'">
   <md-input-container class="md-block" md-no-float layout="row" layout-align="start center">
     <!-- submit xs-only-->
     <md-button class="md-icon-button search-submit-xs" ng-click="vm.submit()" aria-label="submit search" flex="10">