style(core/amazon/oracle): Updated spinners to use new designs (#4190)

* first pass at moving to new spinners * Fixed sizes for spinners * removed header tags for spinners
spinnaker · Sep 30, 2017 · 8574f53 · 8574f53
1 parent 9d7ccb4
commit 8574f53
Show file tree

Hide file tree

Showing 19 changed files with 43 additions and 35 deletions.
diff --git a/app/scripts/modules/amazon/src/instance/details/instanceDetails.html b/app/scripts/modules/amazon/src/instance/details/instanceDetails.html
@@ -10,9 +10,9 @@ <h3>Could not find instance {{instanceIdNotFound}}.</h3>
         <span class="glyphicon glyphicon-remove"></span>
       </a>
     </div>
-    <h4 class="text-center">
-      <span us-spinner="{radius:20, width:6, length: 12}"></span>
-    </h4>
+    <div class="horizontal center spinner-container">
+      <loading-spinner size="'small'"></loading-spinner>
+    </div>
   </div>
 
   <div class="header" ng-if="!state.loading">

diff --git a/app/scripts/modules/amazon/src/loadBalancer/configure/common/createLoadBalancerLocation.html b/app/scripts/modules/amazon/src/loadBalancer/configure/common/createLoadBalancerLocation.html
@@ -1,6 +1,6 @@
 <div class="container-fluid form-horizontal">
   <div ng-if="!ctrl.viewState.accountsLoaded" style="height: 200px">
-    <h3 us-spinner="{radius:30, width:8, length: 16}"></h3>
+    <loading-spinner size="'medium'"></loading-spinner>
   </div>
   <div class="modal-body" ng-if="ctrl.viewState.accountsLoaded">
     <div class="form-group">

diff --git a/app/scripts/modules/amazon/src/loadBalancer/details/loadBalancerDetails.html b/app/scripts/modules/amazon/src/loadBalancer/details/loadBalancerDetails.html
@@ -7,9 +7,9 @@
         <span class="glyphicon glyphicon-remove"></span>
       </a>
     </div>
-    <h4 class="text-center">
-      <span us-spinner="{radius:20, width:6, length: 12}"></span>
-    </h4>
+    <div class="horizontal center middle spinner-container">
+      <loading-spinner size="'small'"></loading-spinner>
+    </div>
   </div>
 
   <div ng-if="!ctrl.state.loading" class="header">

diff --git a/app/scripts/modules/core/src/application/modal/newapplication.html b/app/scripts/modules/core/src/application/modal/newapplication.html
@@ -4,7 +4,7 @@
     <h3 data-purpose="modal-header">New Application</h3>
   </div>
   <div ng-if="newAppModal.state.initializing" style="height: 200px">
-    <h3 us-spinner="{radius:30, width:8, length: 16}"></h3>
+    <loading-spinner size="'medium'"></loading-spinner>
   </div>
   <form role="form" class="container-fluid" novalidate name="newApplicationForm" ng-if="!newAppModal.state.initializing">
     <div class="modal-body">

diff --git a/app/scripts/modules/core/src/bootstrap/spinnaker.component.ts b/app/scripts/modules/core/src/bootstrap/spinnaker.component.ts
@@ -10,7 +10,7 @@ import { SpinnakerHeader } from 'core/header/SpinnakerHeader';
 const template = `
   <div class="spinnaker-container">
     <div class="transition-overlay" ng-if="!authenticating && routing">
-      <h1 us-spinner="{radius:30, width:8, length: 16}"></h1>
+      <loading-spinner size="'medium'"></loading-spinner>
     </div>
     <div class="navbar-inverse">
       <div ng-include="$ctrl.spinnakerHeaderTemplate"></div>

diff --git a/app/scripts/modules/core/src/delivery/executions/executions.html b/app/scripts/modules/core/src/delivery/executions/executions.html
@@ -99,8 +99,8 @@ <h3>Pipelines</h3>
       </form>
       <filter-tags tags="$ctrl.tags" tag-cleared="$ctrl.forceUpdateExecutionGroups" clear-filters="$ctrl.clearFilters"></filter-tags>
     </div>
-    <div class="text-center" ng-if="$ctrl.viewState.loading">
-      <h3 us-spinner="{radius:30, width:8, length: 16}"></h3>
+    <div class="horizontal center middle spinner-container" ng-if="$ctrl.viewState.loading">
+      <loading-spinner size="'medium'"></loading-spinner>
     </div>
     <div class="text-center transition-overlay" ng-if="$ctrl.application.executions.reloadingForFilters" style="margin-left: -25px">
     </div>

diff --git a/app/scripts/modules/core/src/instance/details/console/consoleOutput.modal.html b/app/scripts/modules/core/src/instance/details/console/consoleOutput.modal.html
@@ -6,9 +6,9 @@ <h3>Console Output: {{vm.instanceId}}</h3>
   <div class="modal-body">
     <div class="row">
       <div class="col-md-12">
-        <h4 class="text-center" style="margin-top:100px" ng-if="vm.loading">
-          <span us-spinner="{radius:12, width:4, length: 8}"></span>
-        </h4>
+        <div class="horizontal center middle spinner-container" ng-if="vm.loading">
+          <loading-spinner size="'small'"></loading-spinner>
+        </div>
         <pre style="font-size:75%" ng-if="vm.consoleOutput">{{vm.consoleOutput}}</pre>
         <div ng-if="vm.exception">
           <p>An error occurred trying to load console output. Please try again later.</p>

diff --git a/app/scripts/modules/core/src/notification/modal/editNotification.html b/app/scripts/modules/core/src/notification/modal/editNotification.html
@@ -33,7 +33,9 @@ <h3 data-purpose="modal-header">Edit Notification</h3>
       </div>
     </div>
     <div class="modal-footer">
-      <span ng-show="editApp.submitting" us-spinner="{radius:20, width:6, length: 12}"></span>
+      <div ng-show="editApp.submitting">
+        <loading-spinner size="'small'"></loading-spinner>
+      </div>
       <a href class="btn btn-default" ng-click="$dismiss()">Cancel</a>
       <button type="submit"
               class="btn btn-primary"

diff --git a/app/scripts/modules/core/src/pipeline/config/copyStage/copyStage.modal.html b/app/scripts/modules/core/src/pipeline/config/copyStage/copyStage.modal.html
@@ -41,7 +41,7 @@ <h3>Copy Stage</h3>
           </ui-select>
         </div>
         <div class="col-md-7" ng-if="copyStageModalCtrl.viewState.loading" style="margin-top: 5px;">
-          <h3 us-spinner="{radius:4, width:2, length: 2}"></h3>
+          <loading-spinner size="'small'"></loading-spinner>
         </div>
         <div class="col-md-7 no-stages-message" ng-if="copyStageModalCtrl.stages.length === 0">
           <p>This application has no {{ copyStageModalCtrl.forStrategyConfig ? 'strategy' : 'pipeline' }} stages.</p>

diff --git a/app/scripts/modules/core/src/pipeline/config/pipelineConfig.html b/app/scripts/modules/core/src/pipeline/config/pipelineConfig.html
@@ -14,9 +14,9 @@
   </div>
 </div>
 <div class="row" ng-if="!vm.application.notFound && !vm.state.pipelinesLoaded" style="min-height: 300px">
-  <h4 class="text-center">
-    <span us-spinner="{radius:20, width:6, length: 12}"></span>
-  </h4>
+  <div class="horizontal center middle spinner-container">
+    <loading-spinner size="'small'"></loading-spinner>
+  </div>
 </div>
 <div class="row" ng-if="vm.state.notFound" style="min-height: 300px">
   <h4 class="text-center">

diff --git a/app/scripts/modules/core/src/pipeline/config/preconditions/modal/editPrecondition.html b/app/scripts/modules/core/src/pipeline/config/preconditions/modal/editPrecondition.html
@@ -9,7 +9,9 @@ <h3 data-purpose="modal-header">Edit Precondition</h3>
       <precondition-selector precondition="editPrecondition.precondition" strategy="editPrecondition.strategy" application="editPrecondition.application"></precondition-selector>
     </div>
     <div class="modal-footer">
-      <span ng-show="editApp.submitting" us-spinner="{radius:20, width:6, length: 12}"></span>
+      <div ng-show="editApp.submitting">
+        <loading-spinner size="'small'"></loading-spinner>
+      </div>
       <a href class="btn btn-default" ng-click="$dismiss()">Cancel</a>
       <button type="submit"
               class="btn btn-primary"

diff --git a/app/scripts/modules/core/src/pipeline/config/stages/script/scriptStage.html b/app/scripts/modules/core/src/pipeline/config/stages/script/scriptStage.html
@@ -1,7 +1,7 @@
 <div ng-if="viewState.loading">
-  <h4 ng-if="viewState.loading" class="text-center">
-    <span us-spinner="{radius:20, width:6, length: 12}"></span>
-  </h4>
+  <div ng-if="viewState.loading" class="horizontal center">
+    <loading-spinner size="'small'"></loading-spinner>
+  </div>
 </div>
 <div class="form-horizontal" ng-if="!viewState.loading">
   <stage-config-field label="Repository Url" help-key="pipeline.config.script.repoUrl">

diff --git a/app/scripts/modules/core/src/pipeline/config/templates/configurePipelineTemplateModal.html b/app/scripts/modules/core/src/pipeline/config/templates/configurePipelineTemplateModal.html
@@ -1,5 +1,5 @@
 <div ng-if="ctrl.state.loading" style="height: 300px;">
-  <span us-spinner="{radius:20, width:6, length: 12}"></span>
+  <loading-spinner size="'small'"></loading-spinner>
 </div>
 <v2-modal-wizard heading="Define template parameters: {{::ctrl.pipelineName}}"
                  dismiss="$dismiss()"

diff --git a/app/scripts/modules/core/src/presentation/main.less b/app/scripts/modules/core/src/presentation/main.less
@@ -1443,3 +1443,7 @@ div.modal-header.has-sticky-headers {
     margin-bottom: 2px;
   }
 }
+
+.spinner-container {
+  height: 100px;
+}
diff --git a/app/scripts/modules/core/src/securityGroup/groupings.html b/app/scripts/modules/core/src/securityGroup/groupings.html
@@ -9,6 +9,6 @@
     <h4 class="text-center">No security groups match the filters you've selected.</h4>
   </div>
 </div>
-<div ng-if="!ctrl.initialized">
-  <h3 us-spinner="{radius:30, width:8, length: 16}"></h3>
+<div ng-if="!ctrl.initialized" class="horizontal center spinner-container">
+  <loading-spinner size="'medium'"></loading-spinner>
 </div>
diff --git a/app/scripts/modules/core/src/serverGroup/details/scalingActivities/scalingActivities.html b/app/scripts/modules/core/src/serverGroup/details/scalingActivities/scalingActivities.html
@@ -5,7 +5,7 @@ <h3>Scaling Activities for {{$ctrl.serverGroup.name}}</h3>
   </div>
   <div class="modal-body">
     <div class="loading" ng-if="$ctrl.viewState.loading">
-      <span us-spinner="{radius:5, width:2, length: 3}"></span>
+      <loading-spinner size="'nano'"></loading-spinner>
     </div>
     <div ng-if="$ctrl.viewState.error" class="text-center">
       <p>There was an error loading scaling activities for {{$ctrl.serverGroup.name}}. Please try again later.</p>

diff --git a/app/scripts/modules/core/src/task/tasks.html b/app/scripts/modules/core/src/task/tasks.html
@@ -1,6 +1,6 @@
 <div class="row tasks-wrapper">
-  <div class="text-center" ng-if="viewState.loading">
-    <h3 us-spinner="{radius:30, width:8, length: 16}"></h3>
+  <div class="horizontal center spinner-container" ng-if="viewState.loading">
+    <loading-spinner size="'medium'"></loading-spinner>
   </div>
   <div class="col-md-12" ng-if="viewState.loadError">
     <h4 class="text-center">There was an error loading tasks. Please try again later.</h4>

diff --git a/app/scripts/modules/oracle/instance/details/instanceDetails.html b/app/scripts/modules/oracle/instance/details/instanceDetails.html
@@ -6,9 +6,9 @@
         <span class="glyphicon glyphicon-remove"></span>
       </a>
     </div>
-    <h4 class="text-center">
-      <span us-spinner="{radius:20, width:6, length: 12}"></span>
-    </h4>
+    <div class="horizontal center spinner-container">
+      <loading-spinner size="'small'"></loading-spinner>
+    </div>
   </div>
   <div class="header" ng-if="!state.loading">
     <div class="close-button" ng-if="!state.standalone">

diff --git a/app/scripts/modules/oracle/serverGroup/details/serverGroupDetails.html b/app/scripts/modules/oracle/serverGroup/details/serverGroupDetails.html
@@ -7,9 +7,9 @@
         <span class="glyphicon glyphicon-remove"></span>
       </a>
     </div>
-    <h4 class="text-center">
-      <span us-spinner="{radius:20, width:6, length: 12}"></span>
-    </h4>
+    <div class="horizontal center spinner-container">
+      <loading-spinner size="'small'"></loading-spinner>
+    </div>
   </div>
   <div class="header" ng-if="!ctrl.state.loading">
     <div class="close-button">