feat(ui): redesign forms (2nd cleaning)

fix gravitee-io/issues#1481
gravitee-io · Oct 15, 2018 · 267a321 · 267a321
1 parent 0681080
commit 267a321
Show file tree

Hide file tree

Showing 22 changed files with 344 additions and 364 deletions.
diff --git a/src/management/_forms.scss b/src/management/_forms.scss
@@ -67,4 +67,5 @@
 }
 .gv-forms.gv-forms-fluid {
   width: 100%;
+  min-width: 960px;
 }
diff --git a/src/management/api/_api.scss b/src/management/api/_api.scss
@@ -425,7 +425,9 @@ md-switch.md-default-theme .md-bar, md-switch .md-bar {
   padding-top: 14px;
 }
 .gravitee-qm-metrics-passed {
-  display: none;
+  font-style: italic ;
+  color: #cccccc;
+  text-decoration: line-through;
 }
 .gravitee-qm-metrics-failed {
 }
diff --git a/src/management/api/apis.html b/src/management/api/apis.html
@@ -16,17 +16,17 @@
 
 -->
 <div class="gv-sub-content">
-<div class="gv-forms gv-forms-fluid" layout="column">
-  <div class="gv-form" ng-show="$ctrl.apisProvider.length > 0 || $ctrl.isSearchResult()">
-    <div class="apis-header-filter">
-      <form flex layout="row" layout-align="center start" name="formSearch" autocomplete="off" ng-submit="$ctrl.search()">
-        <input class="form-control apis-filter" type="text" style="max-width: 960px"
-               ng-model="$ctrl.query" placeholder="Search APIs"
-                      autofocus/>
-      </form>
-    </div>
-    <div class="gv-form-content"  id="apis-container" ng-if="!hideApis"
-         style="height: calc(100vh - 200px); overflow-y: auto">
+  <div class="gv-forms gv-forms-fluid" layout="column">
+    <div class="gv-form" ng-show="$ctrl.apisProvider.length > 0 || $ctrl.isSearchResult()">
+      <div class="apis-header-filter">
+        <form flex layout="row" layout-align="center start" name="formSearch" autocomplete="off"
+              ng-submit="$ctrl.search()">
+          <input class="form-control apis-filter" type="text" style="max-width: 960px"
+                 ng-model="$ctrl.query" placeholder="Search APIs" autofocus/>
+        </form>
+      </div>
+      <div class="gv-form-content" id="apis-container" ng-if="!hideApis"
+           style="height: calc(100vh - 200px); overflow-y: auto">
         <div layout="row" layout-wrap class="inset" infinite-scroll="$ctrl.loadMore(query.order, searchAPIs, true)"
              infinite-scroll-distance="1" infinite-scroll-container="'#apis-container'">
           <md-table-container style="width: 100%">
@@ -88,25 +88,25 @@
             </table>
           </md-table-container>
         </div>
-  </div>
-  </div>
-  <gravitee-empty-state ng-if="$ctrl.apisProvider.length == 0 && !$ctrl.isSearchResult()"
-                        icon="dashboard"
-                        model="API"
-                        message="Hmmm, there is no API for you here :("
-                        sub-message="{{$ctrl.getSubMessage()}}"
-                        create-mode="$ctrl.createMode"></gravitee-empty-state>
+      </div>
+    </div>
+    <gravitee-empty-state ng-if="$ctrl.apisProvider.length == 0 && !$ctrl.isSearchResult()"
+                          icon="dashboard"
+                          model="API"
+                          message="Hmmm, there is no API for you here :("
+                          sub-message="{{$ctrl.getSubMessage()}}"
+                          create-mode="$ctrl.createMode"></gravitee-empty-state>
 
-  <div ng-if="$ctrl.apisProvider.length == 0 && !$ctrl.isSearchResult()" style="text-align: center;">
-    <md-button ng-if="!$ctrl.graviteeUser.username" class="md-raised" ui-sref="login" aria-label="login">Login</md-button>
-  </div>
+    <div ng-if="$ctrl.apisProvider.length == 0 && !$ctrl.isSearchResult()" style="text-align: center;">
+      <md-button ng-if="!$ctrl.graviteeUser.username" class="md-raised" ui-sref="login" aria-label="login">Login</md-button>
+    </div>
 
-  <div ng-style="{'text-align': $ctrl.apisProvider.length == 0 && !$ctrl.isSearchResult() ? 'center' : 'none' }">
-    <md-button ng-if="!devMode" permission permission-only="'management-api-c'"
-               ng-class="{'md-fab-bottom-right gravitee-add-button': $ctrl.apisProvider.length > 0 || $ctrl.isSearchResult()}" class="md-fab"
-               aria-label="create-api" ui-sref="management.apis.new">
-      <ng-md-icon icon="add" style="fill: #fff;"></ng-md-icon>
-    </md-button>
+    <div ng-style="{'text-align': $ctrl.apisProvider.length == 0 && !$ctrl.isSearchResult() ? 'center' : 'none' }">
+      <md-button ng-if="!devMode" permission permission-only="'management-api-c'"
+                 ng-class="{'md-fab-bottom-right gravitee-add-button': $ctrl.apisProvider.length > 0 || $ctrl.isSearchResult()}" class="md-fab"
+                 aria-label="create-api" ui-sref="management.apis.new">
+        <ng-md-icon icon="add" style="fill: #fff;"></ng-md-icon>
+      </md-button>
+    </div>
   </div>
 </div>
-</div>
diff --git a/src/management/api/creation/steps/api-creation-step1.html b/src/management/api/creation/steps/api-creation-step1.html
@@ -74,7 +74,7 @@
         </div>
       <md-step-actions>
         <div layout="row" flex layout-align="end top">
-          <md-button ng-disabled="apiGeneralForm.$invalid" ng-click="$ctrl.parent.validFirstStep($ctrl.parent.vm.stepData[0].data)" class="md-primary md-raised">NEXT</md-button>
+          <md-button ng-disabled="apiGeneralForm.$invalid" ng-click="$ctrl.parent.validFirstStep($ctrl.parent.vm.stepData[0].data)">NEXT</md-button>
         </div>
       </md-step-actions>
       </form>

diff --git a/src/management/api/creation/steps/api-creation-step2.html b/src/management/api/creation/steps/api-creation-step2.html
@@ -36,7 +36,7 @@
           <md-button ng-click="$ctrl.parent.moveToPreviousStep()">PREVIOUS</md-button>
         </div>
         <div flex layout="row" layout-align="end top">
-          <md-button type="submit" ng-click="$ctrl.parent.selectEndpoint(); $ctrl.parent.submitCurrentStep($ctrl.parent.vm.stepData[1].data)" ng-disabled="apiGatewayForm.$invalid" class="md-primary md-raised">NEXT</md-button>
+          <md-button type="submit" ng-click="$ctrl.parent.selectEndpoint(); $ctrl.parent.submitCurrentStep($ctrl.parent.vm.stepData[1].data)" ng-disabled="apiGatewayForm.$invalid">NEXT</md-button>
         </div>
       </md-step-actions>
     </md-content>

diff --git a/src/management/api/creation/steps/api-creation-step3.html b/src/management/api/creation/steps/api-creation-step3.html
@@ -150,12 +150,12 @@ <h4>Path authorization</h4>
       </div>
       <div flex layout="row" layout-align="end top">
         <md-button ng-if="$ctrl.parent.vm.stepData[2].optional" ng-click="$ctrl.parent.skipAddPlan($ctrl.parent.vm.stepData[2].data); $ctrl.parent.submitCurrentStep($ctrl.parent.vm.stepData[2].data); apiPlanForm.$setPristine();"
-                   class="md-primary md-raised">SKIP
+                   >SKIP
         </md-button>
 
         <md-button ng-disabled="apiPlanForm.$invalid"
                    ng-click="$ctrl.parent.selectPlan(); $ctrl.parent.submitCurrentStep($ctrl.parent.vm.stepData[2].data)"
-                   class="md-primary md-raised">NEXT
+                   >NEXT
         </md-button>
       </div>
     </md-step-actions>

diff --git a/src/management/api/creation/steps/api-creation-step4.html b/src/management/api/creation/steps/api-creation-step4.html
@@ -58,11 +58,11 @@
       </div>
       <div flex layout="row" layout-align="end top">
         <md-button ng-if="$ctrl.parent.vm.stepData[3].optional" ng-click="$ctrl.parent.skipDocumentation(); $ctrl.parent.submitCurrentStep($ctrl.parent.vm.stepData[3].data)"
-                   class="md-primary md-raised">SKIP
+                   >SKIP
         </md-button>
         <md-button ng-disabled="!$ctrl.parent.hasPage()"
                    ng-click="$ctrl.parent.selectDocumentation(); $ctrl.parent.submitCurrentStep($ctrl.parent.vm.stepData[3].data)"
-                   class="md-primary md-raised">NEXT
+                   >NEXT
         </md-button>
       </div>
     </md-step-actions>

diff --git a/src/management/api/creation/steps/api-creation.html b/src/management/api/creation/steps/api-creation.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section layout="column" flex style="background: rgb(245,245,245);">
+<section layout="column" flex>
 
   <div layout="row">
     <div class="api-creation-steppers" flex="{{$ctrl.vm.selectedStep !== 4 ? 60: 100}}">

diff --git a/src/management/api/portal/documentation/pages/page/apiPage.html b/src/management/api/portal/documentation/pages/page/apiPage.html
@@ -154,7 +154,7 @@ <h2>
     </div>
   </md-toolbar>
   <md-content layout-padding>
-    <md-subheader class="md-primary" ng-if="pageCtrl.page.type=='SWAGGER'">Configure your page</md-subheader>
+    <md-subheader ng-if="pageCtrl.page.type=='SWAGGER'">Configure your page</md-subheader>
     <div ng-if="pageCtrl.page.type=='SWAGGER'">
       <md-checkbox ng-model="pageCtrl.page.configuration.tryIt" ng-true-value="'true'" ng-false-value="'false'">
         Enable "Try it!" mode
@@ -194,7 +194,7 @@ <h2>
       </md-input-container>
     </div>
     <div ng-if="pageCtrl.page.type!=='FOLDER'"></div>
-    <md-subheader class="md-primary">Configure page's source</md-subheader>
+    <md-subheader>Configure page's source</md-subheader>
     <div>
       <md-checkbox ng-model="pageCtrl.useFetcher" ng-change="pageCtrl.toggleUseFetcher()">
         Fetch content from an external resource
@@ -214,7 +214,7 @@ <h2>
       </div>
     </div>
   </div>
-    <md-subheader class="md-primary">Groups Authorizations</md-subheader>
+    <md-subheader>Groups Authorizations</md-subheader>
     <div>
       <md-input-container class="md-block" flex="100">
         <label>Groups allowed to access to this page</label>

diff --git a/src/management/api/portal/general/apiPortal.controller.ts b/src/management/api/portal/general/apiPortal.controller.ts
@@ -349,11 +349,6 @@ class ApiPortalController {
     };
   }
 
-  toggleMetricsVisibility() {
-    let visibility = (<HTMLElement>document.getElementsByClassName("gravitee-qm-metrics-list")[0]).style["visibility"];
-    (<HTMLElement>document.getElementsByClassName("gravitee-qm-metrics-list")[0]).style["visibility"] = "hidden" === visibility ? "visible" : "hidden";
-  }
-
   getQualityMetricCssClass() {
     return this.ApiService.getQualityMetricCssClass(this.qualityMetrics.score * 100);
   }

diff --git a/src/management/api/portal/general/apiPortal.html b/src/management/api/portal/general/apiPortal.html
@@ -119,16 +119,16 @@ <h2>Quality</h2>
           </div>
           <div ng-if="portalCtrl.qualityMetrics !== undefined"
                id="qualityMetrics"
-               layout="row">
-            <div layout="column">
+               layout="row" layout-align="start center">
+            <div layout="column" layout-padding>
               <div class="gravitee-qm-score-large"
                    ng-class="portalCtrl.getQualityMetricCssClass()"
                    ng-mouseover="portalCtrl.toggleMetricsVisibility()"
                    ng-mouseleave="portalCtrl.toggleMetricsVisibility()">
                 {{ portalCtrl.qualityMetrics.score * 100 | number:0 }}%
               </div>
             </div>
-            <div layout="column" layout-align="start start" class="gravitee-qm-metrics-list" style="visibility: hidden;">
+            <div layout="column" layout-align="start start" class="gravitee-qm-metrics-list" style="padding-left: 20px">
               <div ng-repeat="(k,v) in portalCtrl.qualityMetrics.metrics_passed"
                    class="gravitee-qm-metrics"
                    ng-class="{'gravitee-qm-metrics-passed': v, 'gravitee-qm-metrics-failed': !v }">

diff --git a/src/management/api/portal/plans/plan/plan-wizard-general.html b/src/management/api/portal/plans/plan/plan-wizard-general.html
@@ -20,7 +20,7 @@
     <md-content layout-padding class="api-creation-general-content api-creation-content">
       <form name="$ctrl.planGeneralForm">
         <section>
-          <md-subheader class="md-primary" style="background-color: #fafafa">General</md-subheader>
+          <md-subheader>General</md-subheader>
 
           <div layout-gt-sm="row">
             <md-input-container class="md-block" flex-gt-sm>
@@ -61,7 +61,7 @@
         <br />
 
         <section>
-          <md-subheader class="md-primary" style="background-color: #fafafa">Subscriptions</md-subheader>
+          <md-subheader>Subscriptions</md-subheader>
 
           <div layout-gt-sm="row">
             <md-input-container class="md-block" flex>
@@ -76,7 +76,7 @@
         <br />
 
         <section>
-          <md-subheader class="md-primary" style="background-color: #fafafa">Access-Control</md-subheader>
+          <md-subheader>Access-Control</md-subheader>
 
           <div layout-gt-sm="row">
             <md-input-container class="md-block" flex="100">
@@ -95,7 +95,7 @@
 
       <md-step-actions>
         <div layout="row" flex layout-align="end top">
-          <md-button ng-disabled="$ctrl.planGeneralForm.$invalid" ng-click="$ctrl.gotoNextStep()" class="md-primary md-raised">NEXT</md-button>
+          <md-button ng-disabled="$ctrl.planGeneralForm.$invalid" ng-click="$ctrl.gotoNextStep()">NEXT</md-button>
         </div>
       </md-step-actions>
     </md-content>

diff --git a/src/management/api/portal/plans/plan/plan-wizard-policies.html b/src/management/api/portal/plans/plan/plan-wizard-policies.html
@@ -20,7 +20,7 @@
 
     <md-content layout-padding class="api-creation-general-content api-creation-content">
       <section ng-repeat="policy in $ctrl.policies">
-        <md-subheader class="md-primary" style="background-color: #fafafa">
+        <md-subheader>
 
           <md-checkbox
             ng-model="policy.enable"
@@ -46,9 +46,8 @@
       <md-step-actions layout="row">
         <div flex>
           <md-button ng-click="$ctrl.parent.moveToPreviousStep()">PREVIOUS</md-button>
-          <md-button class="md-raised" ui-sref="management.apis.detail.portal.plans.list">
-            <span style="color: rgba(0, 0, 0, 0.54);">CANCEL</span>
-          </md-button>
+          <md-button class="md-raised md-warn"
+                     ui-sref="management.apis.detail.portal.plans.list">CANCEL</md-button>
         </div>
         <div flex layout="row" layout-align="end top">
           <md-button

diff --git a/src/management/api/portal/plans/plan/plan-wizard-security.html b/src/management/api/portal/plans/plan/plan-wizard-security.html
@@ -19,7 +19,7 @@
   <md-step-body>
     <md-content layout-padding class="api-creation-general-content api-creation-content">
       <section>
-        <md-subheader class="md-primary" style="background-color: #fafafa">Authentication</md-subheader>
+        <md-subheader>Authentication</md-subheader>
         <form name="$ctrl.planGeneralForm">
           <div layout-gt-sm="row">
             <md-input-container class="md-block" flex-gt-sm>
@@ -37,7 +37,7 @@
       <br />
 
       <section ng-if="$ctrl.securitySchema">
-        <md-subheader class="md-primary" style="background-color: #fafafa">Configuration</md-subheader>
+        <md-subheader>Configuration</md-subheader>
         <form name="$ctrl.securityConfigurationForm" sf-schema="$ctrl.securitySchema" sf-form="['*']"
               sf-model="$ctrl.parent.plan.securityDefinition"
               sf-options="{ validateOnRender: true, formDefaults: { startEmpty: true } }">
@@ -49,14 +49,11 @@
       <md-step-actions layout="row">
         <div flex>
           <md-button ng-click="$ctrl.parent.moveToPreviousStep()">PREVIOUS</md-button>
-          <md-button class="md-raised" ui-sref="management.apis.detail.portal.plans.list">
-            <span style="color: rgba(0, 0, 0, 0.54);">CANCEL</span>
-          </md-button>
+          <md-button class="md-raised md-warn" ui-sref="management.apis.detail.portal.plans.list">CANCEL</md-button>
         </div>
         <div flex layout="row" layout-align="end top">
           <md-button ng-disabled="$ctrl.planGeneralForm.$invalid || $ctrl.securityConfigurationForm.$invalid"
-                     ng-click="$ctrl.gotoNextStep()"
-                     class="md-primary md-raised">NEXT</md-button>
+                     ng-click="$ctrl.gotoNextStep()">NEXT</md-button>
         </div>
       </md-step-actions>
     </md-content>