Address SGCI Phase 2 Feedback (#324)

* Hide purple boxes on landing, consistent naming for signUp * Move "See Also" from Landing to the "Help" dropdown on the navbar * Adjust hint text, make list / card buttons slightly more obvious * Highlight "Add" button, show popup when copying to clipboard, hide source when not needed * Hide "Add Application" button on Dashboard view * Increase size of Loading/Refresh icon
nds-org · Aug 5, 2020 · bf38205 · bf38205
1 parent 2e60fed
commit bf38205
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 44 deletions.
diff --git a/gui/dashboard/catalog/CatalogController.js b/gui/dashboard/catalog/CatalogController.js
@@ -22,9 +22,9 @@ angular
  * @author lambert8
  * @see https://opensource.ncsa.illinois.edu/confluence/display/~lambert8/3.%29+Controllers%2C+Scopes%2C+and+Partial+Views
  */
-.controller('CatalogController', [ '$scope', '$filter', '$interval', '$uibModal', '$location', '$log', '_', 'Analytics', 'NdsLabsApi', 'Project', 'Stack', 'Stacks', 
+.controller('CatalogController', [ '$scope', '$filter', '$interval', '$timeout', '$uibModal', '$location', '$log', '_', 'Analytics', 'NdsLabsApi', 'Project', 'Stack', 'Stacks', 
     'StackService', 'Specs', 'clipboard', 'Vocabulary', 'RandomPassword', 'AuthInfo', 'ProductName', 'ApiUri', 'DashboardAppPath', 'HomePathSuffix', 'AdvancedFeatures',
-    function($scope, $filter, $interval, $uibModal, $location, $log, _, Analytics, NdsLabsApi, Project, Stack, Stacks, StackService, Specs, clipboard, Vocabulary, RandomPassword, AuthInfo, ProductName, ApiUri, DashboardAppPath, HomePathSuffix, AdvancedFeatures) {
+    function($scope, $filter, $interval, $timeout, $uibModal, $location, $log, _, Analytics, NdsLabsApi, Project, Stack, Stacks, StackService, Specs, clipboard, Vocabulary, RandomPassword, AuthInfo, ProductName, ApiUri, DashboardAppPath, HomePathSuffix, AdvancedFeatures) {
   "use strict";
 
   $scope.showCreateSpec = AdvancedFeatures.showCreateSpec;
@@ -97,6 +97,12 @@ angular
   $scope.$watch(function () { return Project.project; }, function(newValue, oldValue) { projectId = newValue.namespace; });
   $scope.$watch('tags.selected', function(newValue, oldValue) { refilter($scope.specs, newValue); }, true);
 
+  $scope.showCopySuccess = false;
+  $scope.displayCopySuccessAlert = function() {
+    $scope.showCopySuccess = true;
+    $timeout(function() { $scope.showCopySuccess = false; }, 3000);
+  }
+
   $scope.copyToClipboard = function(spec) {
     if (!clipboard.supported) {
       alert('Sorry, copy to clipboard is not supported');
@@ -131,6 +137,7 @@ angular
     })(specCopy); // jshint ignore:line
 
     clipboard.copyText(JSON.stringify(specCopy, null, 4));
+    $scope.displayCopySuccessAlert();
   };
 
   var getQuickStartUrl = function(spec) { 
@@ -148,6 +155,7 @@ angular
     console.log("Copying to clipboard:", quickstartUrl);
     clipboard.copyText(quickstartUrl);
     Analytics.trackEvent('application', 'share-url', spec.key, 1, true);
+    $scope.displayCopySuccessAlert ();
   };
 
   $scope.shareEmbed = function(spec) {
@@ -161,6 +169,7 @@ angular
     console.log("Copying to clipboard:", htmlString);
     clipboard.copyText(htmlString);
     Analytics.trackEvent('application', 'share-embed', spec.key, 1, true);
+    $scope.displayCopySuccessAlert();
   };
 
   $scope.cloneSpec = function(spec) {

diff --git a/gui/dashboard/catalog/catalog.html b/gui/dashboard/catalog/catalog.html
@@ -28,8 +28,11 @@ <h3>Applications</h3>
           </tags-input>
 
         <div class="input-group-btn">
-          <button id="toggleCardsBtn" type="button" class="btn btn-default" style="border-radius:0 !important;" ng-click="showCards = !showCards">
-            <i id="viewAsIcon" class="fa fa-fw" ng-class="{ 'fa-table': showCards, 'fa-list': !showCards }"></i>
+          <button id="toggleCardsBtnCards" type="button" class="btn" style="border-radius:0 !important;" ng-click="showCards = true" ng-class="{ 'btn-primary': showCards, 'btn-default': !showCards }">
+            <i id="viewAsIcon" class="fa fa-fw fa-table"></i>
+          </button>
+          <button id="toggleCardsBtn" type="button" class="btn" style="border-radius:0 !important;" ng-click="showCards = false" ng-class="{ 'btn-default': showCards, 'btn-primary': !showCards }">
+            <i id="viewAsIcon" class="fa fa-fw fa-list"></i>
           </button>
         </div>
         <div class="input-group-btn">
@@ -62,18 +65,22 @@ <h3>Applications</h3>
         No applications matched your search
       </p>
       <p class="text-center text-success" ng-show="(specs | display | showTags:tags.selected).length !== 0">
-        Choose an application below to configure
+        Choose an application below
       </p>
+
+      <div class="alert alert-success" role="alert" ng-if="showCopySuccess" style="position:fixed;z-index:2;top:10%;right:10%;width:35%">
+        Text has been copied to your clipboard
+      </div>
 
       <!-- Table -->
       <table ng-if="!showCards" class="table table-hover table-striped" ng-hide="(specs | display | showTags:tags.selected).length === 0">
         <thead>
           <tr>
             <th width="20%"><label>Name</label></th>
-            <th width="5%"><label>Source</label></th>
-            <th width="40%"><label>Description</label></th>
-            <th width="30%"></th>
-            <th width="5%"></th>
+            <th width="15%" ng-if="showCreateSpec || showImportSpec"><label>Source</label></th>
+            <th><label>Description</label></th>
+            <th></th>
+            <th></th>
           </tr>
         </thead>
         <tbody>
@@ -82,8 +89,8 @@ <h3>Applications</h3>
               {{ spec.label }}
             </th>
 
-            <td>
-              <i class="fa fa-fw" tooptip-placement="top-right" uib-tooltip="Source: {{ spec.catalog | capitalize }}" ng-class="{ 'fa-user': spec.catalog === 'user', 'fa-server': spec.catalog === 'system' }"></i>
+            <td ng-if="showCreateSpec || showImportSpec">
+              <i class="fa fa-fw" tooptip-placement="top-right" uib-tooltip="Source: {{ spec.catalog | capitalize }}" ng-class="{ 'fa-user': spec.catalog === 'user', 'fa-server': spec.catalog === 'system' }"></i> {{ spec.key }}
             </td>
 
             <td>
@@ -164,7 +171,7 @@ <h4 class="media-heading">{{ spec.label }}</h4>
 
               <!-- Tags -->
               <div class="row" style="margin:0;padding:0;">
-                <small class="pull-right" uib-tooltip="Source: {{ spec.catalog | capitalize }}" tooltip-placement="left"><small><i class="fa fa-fw" ng-class="{ 'fa-user': spec.catalog === 'user', 'fa-server': spec.catalog === 'system' }"></i> {{ spec.key }}</small></small>
+                <small ng-if="showCreateSpec || showImportSpec" class="pull-right" uib-tooltip="Source: {{ spec.catalog | capitalize }}" tooltip-placement="left"><small><i class="fa fa-fw" ng-class="{ 'fa-user': spec.catalog === 'user', 'fa-server': spec.catalog === 'system' }"></i> {{ spec.key }}</small></small>
                 <div class="pull-left">
                   <div class="text-center" style="padding:0;">
                     <button id="tag{{ $index }}" style="padding:0 4px 0 4px;margin:0 4px 0 4px;" class="btn btn-xs btn-default" 
@@ -200,8 +207,8 @@ <h4 class="media-heading">{{ spec.label }}</h4>
 
                   <!-- Install button -->
                   <button id="addBtn" ng-disabled="installs[spec.key].progress > 0" ng-if="installs[spec.key].count === 0 && installs[spec.key].progress === 0" style="margin:7px;"
-                      class="btn btn-xs btn-link" ng-click="install(spec)">
-                    Add
+                      class="btn btn-xs btn-default" ng-click="install(spec)">
+                    <i class="fa fa-fw fa-plus"></i> Add
                   </button>
                 </div>
 

diff --git a/gui/dashboard/dashboard/dashboard.html b/gui/dashboard/dashboard/dashboard.html
@@ -1,35 +1,29 @@
 <!-- The Dashboard View -->
 <section>
   <div class="row">
-    <div class="col-xs-8">
+    <div class="col-xs-12">
       <h3>{{ project.name }} Dashboard</h3>
     </div>
+  </div>
 
-    <div class="col-xs-4">
-      <div class="pull-right">
-        <a id="addApplicationBtn" class="btn btn-xs btn-primary" href="/dashboard/store"
-           ng-mouseenter="iconBounce = true" ng-mouseleave="iconBounce = false"
-           uib-tooltip="Add an Application Instance" tooltip-placement="left">
-          <i class="fa fa-fw fa-plus"  ng-class="{ 'faa-bounce animated':iconBounce }"></i>
-        </a>
-
-        <button id="refreshBtn" class="btn btn-default btn-xs" ng-click="autoRefresh.toggle()"
+  <ol class="breadcrumb">
+    <li><a href="/landing/">{{ productName }}</a></li>
+    <li class="active">Dashboard</li>
+  </ol>
+
+  <div class="row">
+    <div class="col-sm-10">
+      <p>This view shows the status of any applications that you have already added. To start an application, expand one below and then choose Launch.</p>
+    </div>
+    <div class="col-sm-2">
+        <button id="refreshBtn" class="btn btn-default btn-sm pull-right" style="margin-top:-5px" ng-click="autoRefresh.toggle()"
              ng-class="{ 'btn-info':autoRefresh.interval !== null }"
              ng-mouseenter="iconSpin = true" ng-mouseleave="iconSpin = false"
              uib-tooltip="Refresh" tooltip-placement="left">
           <i class="fa fa-refresh fa-fw" ng-class="{ 'fa-spin':iconSpin || autoRefresh.interval !== null }"></i>
         </button>
-      </div>
     </div>
   </div>
-
-  <ol class="breadcrumb">
-    <li><a href="/landing/">{{ productName }}</a></li>
-    <li class="active">Dashboard</li>
-  </ol>
-
-  <p>This view shows the status of any applications that you have already added. To start an application, expand one below and then choose Launch.</p>
-
   <!-- Applications Area -->
   <div class="row">
     <div class="col-sm-12 fill-height">

diff --git a/gui/landing/landing.html b/gui/landing/landing.html
@@ -23,21 +23,21 @@ <h1>Welcome to the {{ productName }}!</h1>
   </div>
 
   <div class="row">
-    <!-- Request Access Panel -->
-    <div class="col-sm-5" ng-if="!auth.token">
+    <!-- Sign Up Panel -->
+    <!--div class="col-sm-5" ng-if="!auth.token">
       <div class="panel panel-primary" ng-if="!enableOAuth">
         <div class="panel-heading">
-          <h3 class="panel-title">Request Access to {{ productName }}</h3>
+          <h3 class="panel-title">Sign Up for {{ productName }}</h3>
         </div>
         <div class="panel-body">
-          <p>For more about requesting access to {{ productName }}, click <a ng-href="{{ productUrl }}" target="_blank">here</a>!</p>
-          <a id="signUpBtn" ng-href="/login/register{{ rd ? '?rd=' + rd : '' }}" class="btn btn-default">Request Access <i class="fa fa-fw fa-caret-right"></i></a>
+          <p>For more about signing up for {{ productName }}, click <a ng-href="{{ productUrl }}" target="_blank">here</a>!</p>
+          <a id="signUpBtn" ng-href="/login/register{{ rd ? '?rd=' + rd : '' }}" class="btn btn-default">Sign Up <i class="fa fa-fw fa-caret-right"></i></a>
         </div>
       </div>
-    </div>
+    </div-->
 
     <!-- Sign In Panel -->
-    <div class="col-sm-5" ng-if="!auth.token">
+    <!--div class="col-sm-5" ng-if="!auth.token">
       <div class="panel panel-primary">
         <div class="panel-heading">
           <h3 class="panel-title">Already have an account?</h3>
@@ -47,7 +47,7 @@ <h3 class="panel-title">Already have an account?</h3>
           <a id="signInBtn" class="btn btn-default" ng-href="{{ signinLink }}">Sign in here <i class="fa fa-fw fa-caret-right"></i></a>
         </div>
       </div>
-    </div>
+    </div-->
 
     <!-- Getting Started (walkthrough?) -->
     <div class="col-sm-10" ng-if="auth.token">
@@ -61,7 +61,7 @@ <h3 class="panel-title">Already have an account?</h3>
     </div>
 
     <!-- Help Links -->
-    <div class="col-sm-2">
+    <!--div class="col-sm-2" ng-class="{ 'col-sm-offset-10': !auth.token }">
       <p>See Also:
         <ul class="fa-ul">
           <li ng-repeat="link in helpLinks"><i class="fa-li fa {{ link.icon }}"></i> <a ng-href="{{ link.url }}" id="helpLink{{$index}}" target="_blank">{{ link.name }}</a></li>
@@ -76,6 +76,6 @@ <h3 class="panel-title">Already have an account?</h3>
           <li><i class="fa-li fa fa-support"></i> <a href="/landing/contact" id="contactUsLink"> Contact Us</a></li>
         </ul>
       </p>
-    </div>
+    </div-->
   </div>
 </section>
diff --git a/gui/shared/navbar/navbar.html b/gui/shared/navbar/navbar.html
@@ -42,7 +42,7 @@
           <!-- First, always draw our help links -->
           <li>
   	        <a id="helpDropdown" class="dropdown-toggle" data-toggle="dropdown">
-              <i class="fa fa-fw fa-question-circle-o"></i> <span class="caret"></span>
+              Help <span class="caret"></span>
             </a>
 
             <ul class="dropdown-menu dropdown-menu-right" role="menu">