Merge pull request #317 from thevoiceofzeke/buckyMakeover

Materialize error pages and announcement modal
uPortal-Attic · Sep 26, 2016 · fa8e379 · fa8e379
2 parents ac731fb + 3db3bd3
commit fa8e379
Show file tree

Hide file tree

Showing 8 changed files with 97 additions and 104 deletions.
diff --git a/uw-frame-components/css/buckyless/features.less b/uw-frame-components/css/buckyless/features.less
@@ -48,7 +48,9 @@
     margin:15px 0;
   }
   button {
-    margin-top:10px;
+    margin-top: 16px;
+    color: @white;
+    background-color: @color1;
   }
 }
 portal-header md-toolbar .md-toolbar-tools bucky-announcement {
@@ -93,37 +95,6 @@ portal-header md-toolbar .md-toolbar-tools bucky-announcement {
   }
 }
 
-bucky-announcement .popover {
-  padding: 0;
-  position: absolute;
-  top: 10px !important;
-  width: 210px !important;
-  &.left {
-    margin-left: 0;
-  }
-  .arrow {
-    top: 10% !important;
-    right: -11px !important;
-  }
-  .popover-content {
-    padding: 9px 12px;
-    a {
-      color: @link-color;
-      &:hover {
-        color: darken(@link-color, 15%);
-      }
-    }
-    li, p, span {
-      color: @black;
-    }
-    li div a {
-      font-size: smaller;
-      margin-bottom: 8px;
-      &:not(.md-button):not(.btn):not(.launch-app-button) {
-        &:hover {
-          text-decoration: underline;
-        }
-      }
-    }
-  }
+.md-dialog-container {
+  z-index: 101;
 }
diff --git a/uw-frame-components/portal/features/controllers.js b/uw-frame-components/portal/features/controllers.js
@@ -5,8 +5,8 @@ define(['angular','require'], function(angular, require) {
 
 
   app.controller('PortalFeaturesController', ['miscService', '$localStorage', '$sessionStorage', '$scope', '$document', 'FEATURES',
-    '$modal', 'portalFeaturesService', '$sanitize', 'MISC_URLS',
-    function(miscService, $localStorage, $sessionStorage, $scope, $document, FEATURES, $modal, portalFeaturesService, $sanitize, MISC_URLS) {
+    '$mdDialog', 'portalFeaturesService', '$sanitize', 'MISC_URLS',
+    function(miscService, $localStorage, $sessionStorage, $scope, $document, FEATURES, $mdDialog, portalFeaturesService, $sanitize, MISC_URLS) {
       $scope.features = [];
       $scope.MISC_URLS = MISC_URLS;
       if (FEATURES.enabled) {
@@ -20,8 +20,8 @@ define(['angular','require'], function(angular, require) {
   }]);
 
   app.controller('PortalPopupController', ['$localStorage', '$sessionStorage', '$rootScope', '$scope', '$document', 'FEATURES',
-    'filterFilter', '$filter', '$modal', 'portalFeaturesService', 'miscService', '$sanitize',
-    function($localStorage, $sessionStorage, $rootScope, $scope, $document, FEATURES, filterFilter, $filter, $modal, portalFeaturesService, miscService, $sanitize) {
+    'filterFilter', '$filter', '$mdDialog', 'portalFeaturesService', 'miscService', '$sanitize',
+    function($localStorage, $sessionStorage, $rootScope, $scope, $document, FEATURES, filterFilter, $filter, $mdDialog, portalFeaturesService, miscService, $sanitize) {
       //scope functions ---------------------------------------------------------
 
       //need this due to isolated scope
@@ -74,21 +74,27 @@ define(['angular','require'], function(angular, require) {
               $scope.latestFeature = orderedPopups[0];
 
               var displayPopup = function() {
-                var modalInstance = $modal.open({
-                  animation: $scope.animationsEnabled,
-                  templateUrl: require.toUrl('./partials/features-modal-template.html'),
-                  size: 'lg',
-                  scope: $scope
-                });
-
-                modalInstance.result.then(function(data){
-                  //resolves upon closing of modal
-                  miscService.pushGAEvent('popup','closed', orderedPopups[0].id);
+                $mdDialog.show({
+                  templateUrl: require.toUrl('./partials/features-dialog-template.html'),
+                  parent: angular.element(document).find('div.my-uw')[0],
+                  clickOutsideToClose: true,
+                  openFrom: 'left',
+                  closeTo: 'right',
+                  scope: $scope,
+                  controller: function DialogController($scope, $mdDialog) {
+                    $scope.closeDialog = function(action) {
+                      $mdDialog.hide(action);
+                    };
+                  }
+                })
+                .then(function(action) {
+                  // if dialog is closed by clicking "continue" button
+                  miscService.pushGAEvent('popup', action, orderedPopups[0].id);
                   portalFeaturesService.markPopupSeen(orderedPopups[0].id);
                   getPopups();
-                }, function(data){
-                  // rejects upon dismissing of modal
-                  miscService.pushGAEvent('popup','dismissed', orderedPopups[0].id);
+                }, function() {
+                  // if popup is closed by clicking outside or pressing escape key
+                  miscService.pushGAEvent('popup', 'dismissed', orderedPopups[0].id);
                   portalFeaturesService.markPopupSeen(orderedPopups[0].id);
                   getPopups();
                 });
@@ -99,20 +105,18 @@ define(['angular','require'], function(angular, require) {
         }
       };
 
-     var setMascot = function(){
-       if($rootScope.portal && $rootScope.portal.theme) {
-         $scope.buckyImg = $rootScope.portal.theme.mascotImg || 'img/robot-taco.gif';
-       } else {
-         $scope.buckyImg = 'img/robot-taco.gif';
-       }
-       $rootScope.$watch('portal.theme', function(newVal, oldVal) {
-         if(newVal === oldVal) {
-           return;
-         } else {
-           $scope.buckyImg = newVal.mascotImg || 'img/robot-taco.gif';
-         }
-       });
-     };
+      var setMascot = function() {
+        if($rootScope.portal && $rootScope.portal.theme) {
+          $scope.buckyImg = $rootScope.portal.theme.mascotImg || 'img/robot-taco.gif';
+        } else {
+          $scope.buckyImg = 'img/robot-taco.gif';
+        }
+        $rootScope.$watch('portal.theme', function(newVal, oldVal) {
+          if (newVal !== oldVal) {
+            $scope.buckyImg = newVal.mascotImg || 'img/robot-taco.gif';
+          }
+        });
+      };
 
 
 

diff --git a/uw-frame-components/portal/features/partials/features-dialog-template.html b/uw-frame-components/portal/features/partials/features-dialog-template.html
@@ -0,0 +1,27 @@
+<md-dialog aria-label="new features">
+  <md-toolbar class="md-accent">
+    <div class="md-toolbar-tools">
+      <h1>{{ latestFeature.title }}</h1>
+      <span flex></span>
+      <md-button class="md-icon-button" ng-click="closeDialog('dismissed')" aria-label="close features dialog">
+        <md-icon>close</md-icon>
+      </md-button>
+    </div>
+  </md-toolbar>
+    <md-dialog-content>
+      <div class="md-dialog-content features-popup" layout="column" layout-align="center center">
+        <img ng-src="{{ latestFeature.img }}" aria-describedby="featureContent" hide-xs>
+        <p id="featureContent" class="sr-only" hide-xs>{{ latestFeature.description }}</p>
+        <p hide-gt-xs>{{ latestFeature.description }}</p>
+      </div>
+    </md-dialog-content>
+    <md-dialog-actions>
+      <md-button class="md-default"
+                 ng-if="latestFeature.learnMoreURL"
+                 ng-click="closeDialog('closed')"
+                 ng-href="{{ latestFeature.learnMoreURL }}">
+        Learn more
+      </md-button>
+      <md-button class="md-primary" ng-click="closeDialog('closed')">{{ latestFeature.popup.buttonText }}</md-button>
+    </md-dialog-actions>
+</md-dialog>
diff --git a/uw-frame-components/portal/features/partials/features-modal-template.html b/uw-frame-components/portal/features/partials/features-modal-template.html
diff --git a/uw-frame-components/portal/main/directives.js b/uw-frame-components/portal/main/directives.js
@@ -49,7 +49,7 @@ define(['angular', 'require'], function(angular, require) {
   app.directive('featuresModalTemplate', function() {
       return {
           restrict : 'E',
-          templateUrl : require.toUrl('./partials/features-modal-template.html')
+          templateUrl : require.toUrl('./partials/features-dialog-template.html')
       }
   });
 

diff --git a/uw-frame-components/portal/main/partials/access-denied.html b/uw-frame-components/portal/main/partials/access-denied.html
@@ -1,11 +1,13 @@
 <frame-page app-title='{{NAMES.title}} - Access denied' white-background='true'>
-  <h2 class='center'>Sorry, you're not authorized to access this.</h2>
-  <p class='center'>
-    <i class='fa fa-exclamation-triangle fa-3x warning-color'></i>
+  <md-content layout-padding layout="column" layout-align="center center">
+    <h2 class="md-display-1">You are not allowed to access this content</h2>
+    <p>
+      <i class='fa fa-exclamation-triangle fa-3x warning-color'></i>
+      <br/>
+    <h4 class="md-subhead"><a href='{{MISC_URLS.myuwHome}}'>Back to the MyUW homepage</a></h4>
+    <h4 class="md-subhead">If you continue to see this error, contact the <a href='{{MISC_URLS.helpdeskURL}}' target='_blank'>DoIT Help Desk</a></h4>
     <br/>
-    <h4 class='center'>If you're here by accident, head back to MyUW <a href='{{MISC_URLS.myuwHome}}'>homepage</a>.</h4>
-    <h4 class='center'>For help with authorization, contact the <a href='{{MISC_URLS.helpdeskURL}}' target='_blank'>DoIT Help Desk</a>.</h4>
-    <br/>
-  </p>
+    </p>
+  </md-content>
 </frame-page>
 
diff --git a/uw-frame-components/portal/main/partials/file-not-found.html b/uw-frame-components/portal/main/partials/file-not-found.html
@@ -1,10 +1,12 @@
 <frame-page app-title='{{NAMES.title}} - File Not Found' white-background='true'>
-  <h2 class='center'>We're sorry, the path you are looking for does not exist.</h2>
-  <p class='center'>
-    <i class='fa fa-exclamation-triangle fa-3x warning-color'></i>
-    <br/>
-    <h4 class='center'>You can try to head back to the MyUW <a href='{{MISC_URLS.myuwHome}}'>homepage</a>.</h4>
-    <h4 class='center'>If you continue to see this error, contact the <a href='{{MISC_URLS.helpdeskURL}}' target='_blank'>DoIT Help Desk</a>.</h4>
-    <br/>
-  </p>
+  <md-content layout-padding layout="column" layout-align="center center">
+    <h2 class="md-display-1">The path you are looking for does not exist</h2>
+    <p>
+      <i class='fa fa-exclamation-triangle fa-3x warning-color'></i>
+      <br/>
+      <h4 class="md-subhead"><a href='{{MISC_URLS.myuwHome}}'>Back to the MyUW homepage</a></h4>
+      <h4 class="md-subhead">If you continue to see this error, contact the <a href='{{MISC_URLS.helpdeskURL}}' target='_blank'>DoIT Help Desk</a></h4>
+      <br/>
+    </p>
+  </md-content>
 </frame-page>
diff --git a/uw-frame-components/portal/main/partials/server-error.html b/uw-frame-components/portal/main/partials/server-error.html
@@ -1,11 +1,13 @@
 <frame-page app-title='{{NAMES.title}} - Service Unavailable' white-background='true'>
-  <h2 class='center'>We're sorry, but there was a problem with your request.</h2>
-  <p class='center'>
-    <i class='fa fa-exclamation-triangle fa-3x warning-color'></i>
-    <br/>
-    <h4 class='center'>You can try to head back to the MyUW <a href='{{MISC_URLS.myuwHome}}'>homepage</a>.</h4>
-    <h4 class='center'>If you continue to see this error, contact the <a href='{{MISC_URLS.helpdeskURL}}' target='_blank'>DoIT Help Desk</a>.</h4>
-    <br/>
-  </p>
+  <md-content layout-padding layout="column" layout-align="center center">
+    <h2 class="md-display-1">There was a problem with your request</h2>
+    <p>
+      <i class='fa fa-exclamation-triangle fa-3x warning-color'></i>
+      <br/>
+      <h4 class="md-subhead"><a href='{{MISC_URLS.myuwHome}}'>Back to the MyUW homepage</a></h4>
+      <h4 class="md-subhead">If you continue to see this error, contact the <a href='{{MISC_URLS.helpdeskURL}}' target='_blank'>DoIT Help Desk</a></h4>
+      <br/>
+    </p>
+  </md-content>
 </frame-page>