Browse Source

[frontend] Add base icon Vue components and adjust the spinner

Johan Åhlén 4 years ago
parent
commit
8882ab5164

+ 1 - 7
desktop/core/src/desktop/js/apps/editor/components/QueryHistoryTable.vue

@@ -50,13 +50,7 @@
       </div>
       </div>
     </div>
     </div>
     <div class="query-history-table-container">
     <div class="query-history-table-container">
-      <Spinner
-        :spin="loadingHistory"
-        :center="true"
-        :size="'large'"
-        :overlay="true"
-        :label="I18n('Loading...')"
-      />
+      <Spinner :spin="loadingHistory" :center="true" :size="'xlarge'" :overlay="true" />
       <div class="query-history-table-scrollable">
       <div class="query-history-table-scrollable">
         <HueTable
         <HueTable
           :clickable-rows="true"
           :clickable-rows="true"

+ 18 - 0
desktop/core/src/desktop/js/components/ComboBox.vue

@@ -1,3 +1,21 @@
+<!--
+  Licensed to Cloudera, Inc. under one
+  or more contributor license agreements.  See the NOTICE file
+  distributed with this work for additional information
+  regarding copyright ownership.  Cloudera, Inc. licenses this file
+  to you under the Apache License, Version 2.0 (the
+  "License"); you may not use this file except in compliance
+  with the License.  You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+-->
+
 <template>
 <template>
   <div class="combo-box" v-bind="$attrs">
   <div class="combo-box" v-bind="$attrs">
     <TypeaheadInput
     <TypeaheadInput

+ 60 - 19
desktop/core/src/desktop/js/components/Spinner.scss

@@ -19,8 +19,13 @@
 @import './styles/mixins';
 @import './styles/mixins';
 @import './styles/colors';
 @import './styles/colors';
 
 
+$spinner-label-ratio: 2 / 3;
+$spinner-large-size: 25px;
+$spinner-xlarge-size: 50px;
+
 .spinner-container {
 .spinner-container {
   @include fade-in;
   @include fade-in;
+
   position: relative;
   position: relative;
   z-index: 10000;
   z-index: 10000;
 
 
@@ -49,28 +54,64 @@
     background-color: $fluid-white;
     background-color: $fluid-white;
   }
   }
 
 
-  .spinner-center {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
+  .spinner-inner {
+    white-space: nowrap;
 
 
-  .spinner-large {
-    font-size: 26px !important;
-  }
+    .hi {
+      margin-bottom: 0;
+    }
 
 
-  .spinner-xlarge {
-    font-size: 60px !important;
-  }
+    .spinner-spin {
+      @include keyframes(spin-frames) {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(359deg); }
+      }
 
 
-  span,
-  i {
-    font-size: 16px;
-    color: $fluid-gray-500;
-  }
+      @include animation('spin-frames 0.8s linear infinite');
+
+      color: $hue-primary-color-dark;
+    }
+
+    span {
+      margin-left: 5px;
+      color: $fluid-gray-500;
+    }
+
+    &.spinner-center {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+
+    &.spinner-large {
+      font-size: $spinner-large-size;
+
+      .spinner-spin {
+        font-size: $spinner-large-size;
+      }
+
+      span {
+        line-height: $spinner-large-size;
+      }
+    }
+
+    &.spinner-xlarge {
+      font-size: $spinner-xlarge-size;
+
+      .spinner-spin {
+        font-size: $spinner-xlarge-size;
+      }
+
+      span {
+        line-height: $spinner-xlarge-size;
+      }
+    }
 
 
-  span {
-    margin-left: 5px;
+    &.spinner-large span,
+    &.spinner-xlarge span {
+      font-size: $spinner-label-ratio * 1em;
+      vertical-align: top;
+    }
   }
   }
 }
 }

+ 15 - 15
desktop/core/src/desktop/js/components/Spinner.vue

@@ -27,21 +27,18 @@
       'spinner-blackout': blackout
       'spinner-blackout': blackout
     }"
     }"
   >
   >
-    <div :style="{ width: center && inline ? '100%' : null }" :class="{ 'spinner-center': center }">
-      <i
-        class="fa fa-spinner fa-spin"
-        :class="{
-          'spinner-large': size === 'large',
-          'spinner-xlarge': size === 'xlarge'
-        }"
-      />
-      <span
-        v-if="label"
-        :class="{
-          'spinner-large': size === 'large',
-          'spinner-xlarge': size === 'xlarge'
-        }"
-      >
+    <div
+      class="spinner-inner"
+      :style="{ width: center && inline ? '100%' : null }"
+      :class="{
+        'spinner-center': center,
+        'spinner-large': size === 'large',
+        'spinner-xlarge': size === 'xlarge'
+      }"
+    >
+      <SpinnerLargeIcon v-if="size === 'large' || size === 'xlarge'" class="spinner-spin" />
+      <SpinnerSmallIcon v-else class="spinner-spin" />
+      <span v-if="label">
         {{ label }}
         {{ label }}
       </span>
       </span>
     </div>
     </div>
@@ -52,9 +49,12 @@
   import { defineComponent } from 'vue';
   import { defineComponent } from 'vue';
 
 
   import './Spinner.scss';
   import './Spinner.scss';
+  import SpinnerLargeIcon from './icons/SpinnerLargeIcon';
+  import SpinnerSmallIcon from './icons/SpinnerSmallIcon';
 
 
   export default defineComponent({
   export default defineComponent({
     name: 'Spinner',
     name: 'Spinner',
+    components: { SpinnerSmallIcon, SpinnerLargeIcon },
     props: {
     props: {
       spin: {
       spin: {
         type: Boolean,
         type: Boolean,

+ 6 - 0
desktop/core/src/desktop/js/components/icons/DatabaseIcon.ts

@@ -0,0 +1,6 @@
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'DatabaseIcon',
+  template: '<svg class="hi hi-fw"><use xlink:href="#hueDatabaseSymbol" /></svg>'
+});

+ 34 - 0
desktop/core/src/desktop/js/components/icons/HueIcons.scss

@@ -0,0 +1,34 @@
+/*
+ Licensed to Cloudera, Inc. under one
+ or more contributor license agreements.  See the NOTICE file
+ distributed with this work for additional information
+ regarding copyright ownership.  Cloudera, Inc. licenses this file
+ to you under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance
+ with the License.  You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+*/
+
+.hi {
+  vertical-align: middle;
+  display: inline-block !important; //d3 conflict
+  width: 1em !important; //d3 conflict
+  height: 1em !important; //d3 conflict
+  fill: currentColor;
+  margin-bottom: 0.2em;
+
+  &.hi-fw {
+    width: 1.28571429em !important;
+  }
+
+  &.hi-bigger {
+    height: 1.1em !important;
+  }
+}

+ 72 - 0
desktop/core/src/desktop/js/components/icons/HueIcons.vue

@@ -0,0 +1,72 @@
+<!--
+  Licensed to Cloudera, Inc. under one
+  or more contributor license agreements.  See the NOTICE file
+  distributed with this work for additional information
+  regarding copyright ownership.  Cloudera, Inc. licenses this file
+  to you under the Apache License, Version 2.0 (the
+  "License"); you may not use this file except in compliance
+  with the License.  You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+-->
+
+<template>
+  <teleport v-if="!alreadyPresentInDom" to="body">
+    <div id="hueIconSprites">
+      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" style="display: none;">
+        <defs>
+          <symbol id="hueDatabaseSymbol" viewBox="0 0 24 24">
+            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+              <g id="system-icons/database" fill="#000000">
+                <path
+                  id="database"
+                  d="M18.2129,9.4307 C15.2589,10.8937 8.7409,10.8937 5.7869,9.4307 L5.7869,6.3377 C7.4619,6.9907 9.7359,7.3067 11.9999,7.3067 C14.2639,7.3067 16.5379,6.9907 18.2129,6.3377 L18.2129,9.4307 Z M18.2129,14.3707 C15.2589,15.8337 8.7409,15.8337 5.7869,14.3707 L5.7869,11.0407 C7.4619,11.6837 9.7359,11.9997 11.9999,11.9997 C14.2639,11.9997 16.5379,11.6837 18.2129,11.0407 L18.2129,14.3707 Z M18.2129,18.9167 C18.2129,19.3227 16.1019,20.2807 11.9999,20.2807 C7.8989,20.2807 5.7869,19.3227 5.7869,18.9167 L5.7869,15.9827 C7.4619,16.6237 9.7359,16.9407 11.9999,16.9407 C14.2639,16.9407 16.5379,16.6237 18.2129,15.9827 L18.2129,18.9167 Z M11.9999,3.7197 C14.4439,3.7197 17.0759,4.0947 17.9999,4.8357 C15.0249,6.1697 8.9539,6.1697 5.9899,4.8267 C6.9239,4.0947 8.6399,3.7197 11.9999,3.7197 L11.9999,3.7197 Z M11.9999,1.9997 C10.6599,1.9997 3.9999,2.1487 3.9999,5.0827 L3.9999,18.9167 C3.9999,19.6977 4.4969,20.7547 6.8729,21.4167 C8.2339,21.7917 10.0609,21.9997 11.9999,21.9997 C13.3399,21.9997 19.9999,21.8517 19.9999,18.9167 L19.9999,5.0827 C19.9999,2.1487 13.3399,1.9997 11.9999,1.9997 L11.9999,1.9997 Z"
+                />
+              </g>
+            </g>
+          </symbol>
+
+          <symbol id="hueSpinnerLarge" viewBox="0 0 64 64">
+            <path
+              stroke-width="4"
+              fill="none"
+              stroke="currentColor"
+              fill-rule="evenodd"
+              d="M56,32 C56,45.256 45.256,56 32,56 C18.744,56 8,45.256 8,32 C8,18.744 18.744,8 32,8"
+            />
+          </symbol>
+
+          <symbol id="hueSpinnerSmall" viewBox="0 0 24 24">
+            <path
+              stroke-width="1"
+              fill="none"
+              stroke="currentColor"
+              fill-rule="evenodd"
+              d="M21,12 C21,16.971 16.971,21 12,21 C7.029,21 3,16.971 3,12 C3,7.029 7.029,3 12,3"
+            />
+          </symbol>
+        </defs>
+      </svg>
+    </div>
+  </teleport>
+</template>
+
+<script lang="ts">
+  import { defineComponent } from 'vue';
+
+  import './HueIcons.scss';
+
+  export default defineComponent({
+    name: 'HueIcons',
+    setup() {
+      const alreadyPresentInDom = !!document.getElementById('hueIconSprites');
+      return { alreadyPresentInDom };
+    }
+  });
+</script>

+ 20 - 0
desktop/core/src/desktop/js/components/icons/HueIconsWebComponent.ts

@@ -0,0 +1,20 @@
+// Licensed to Cloudera, Inc. under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  Cloudera, Inc. licenses this file
+// to you under the Apache License, Version 2.0 (the
+// 'License'); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an 'AS IS' BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { wrap } from 'vue/webComponentWrap';
+import HueIcons from './HueIcons.vue';
+
+wrap('hue-icons-web-component', HueIcons);

+ 6 - 0
desktop/core/src/desktop/js/components/icons/SpinnerLargeIcon.ts

@@ -0,0 +1,6 @@
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'SpinnerLargeIcon',
+  template: '<svg class="hi hi-fw"><use xlink:href="#hueSpinnerLarge" /></svg>'
+});

+ 6 - 0
desktop/core/src/desktop/js/components/icons/SpinnerSmallIcon.ts

@@ -0,0 +1,6 @@
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'SpinnerSmallIcon',
+  template: '<svg class="hi hi-fw"><use xlink:href="#hueSpinnerSmall" /></svg>'
+});

+ 1 - 0
desktop/core/src/desktop/js/hue.js

@@ -57,6 +57,7 @@ import MultiLineEllipsisHandler from 'utils/multiLineEllipsisHandler';
 import sqlUtils from 'sql/sqlUtils';
 import sqlUtils from 'sql/sqlUtils';
 import sqlWorkerHandler from 'sql/sqlWorkerHandler';
 import sqlWorkerHandler from 'sql/sqlWorkerHandler';
 
 
+import 'components/icons/HueIconsWebComponent';
 import 'components/sidebar/HueSidebarWebComponent';
 import 'components/sidebar/HueSidebarWebComponent';
 import 'components/assist/AssistPanelWebComponent';
 import 'components/assist/AssistPanelWebComponent';
 
 

+ 2 - 0
desktop/core/src/desktop/templates/hue.mako

@@ -89,6 +89,8 @@
 
 
 <body>
 <body>
 
 
+<hue-icons-web-component></hue-icons-web-component>
+
 % if is_demo:
 % if is_demo:
   <ul class="side-labels unstyled">
   <ul class="side-labels unstyled">
     <li class="feedback"><a href="javascript:showClassicWidget()"><i class="fa fa-envelope-o"></i> ${_('Feedback')}</a></li>
     <li class="feedback"><a href="javascript:showClassicWidget()"><i class="fa fa-envelope-o"></i> ${_('Feedback')}</a></li>