[frontend] Add drop arrow icon components

cloudera · Mar 30, 2021 · e2bbc41 · e2bbc41
1 parent e89652d
commit e2bbc41
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 0 deletions.
diff --git a/desktop/core/src/desktop/js/components/icons/DropDownIcon.ts b/desktop/core/src/desktop/js/components/icons/DropDownIcon.ts
@@ -0,0 +1,6 @@
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'DropDownIcon',
+  template: '<svg class="hi hi-fw"><use xlink:href="#hueDropDownSymbol" /></svg>'
+});
diff --git a/desktop/core/src/desktop/js/components/icons/DropLeftIcon.ts b/desktop/core/src/desktop/js/components/icons/DropLeftIcon.ts
@@ -0,0 +1,6 @@
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'DropLeftIcon',
+  template: '<svg class="hi hi-fw"><use xlink:href="#hueDropLeftSymbol" /></svg>'
+});
diff --git a/desktop/core/src/desktop/js/components/icons/DropRightIcon.ts b/desktop/core/src/desktop/js/components/icons/DropRightIcon.ts
@@ -0,0 +1,6 @@
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'DropRightIcon',
+  template: '<svg class="hi hi-fw"><use xlink:href="#hueDropRightSymbol" /></svg>'
+});
diff --git a/desktop/core/src/desktop/js/components/icons/DropUpIcon.ts b/desktop/core/src/desktop/js/components/icons/DropUpIcon.ts
@@ -0,0 +1,6 @@
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'DropUpIcon',
+  template: '<svg class="hi hi-fw"><use xlink:href="#hueDropUpSymbol" /></svg>'
+});
diff --git a/desktop/core/src/desktop/js/components/icons/HueIcons.vue b/desktop/core/src/desktop/js/components/icons/HueIcons.vue
@@ -62,6 +62,22 @@
             </g>
           </symbol>
 
+          <symbol id="hueDropDownSymbol" viewBox="0 0 24 24">
+            <polygon points="6 9 12 15 18 9" />
+          </symbol>
+
+          <symbol id="hueDropLeftSymbol" viewBox="0 0 24 24">
+            <polygon points="15 6 9 11.9988 15 18" />
+          </symbol>
+
+          <symbol id="hueDropRightSymbol" viewBox="0 0 24 24">
+            <polygon points="9 6 9 18 15 11.9988" />
+          </symbol>
+
+          <symbol id="hueDropUpSymbol" viewBox="0 0 24 24">
+            <polygon points="12.0001 9 6 15.0001 17.999 15.0001" />
+          </symbol>
+
           <symbol id="hueSpinnerLargeSymbol" viewBox="0 0 64 64">
             <path
               stroke-width="4"