From 3814f122ab0136acf55c2d6b88435ea84e36b9c4 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Sun, 22 Jan 2023 19:35:05 +0300
Subject: [PATCH] feat: custom icons for row height options

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../assets/nc-icons/row-height-extra-tall.svg |  4 +++
 .../assets/nc-icons/row-height-medium.svg     |  4 +++
 .../assets/nc-icons/row-height-short.svg      |  4 +++
 .../assets/nc-icons/row-height-tall.svg       |  4 +++
 packages/nc-gui/components.d.ts               |  4 +++
 .../smartsheet/toolbar/RowHeight.vue          | 26 +++++++++++++++----
 packages/nc-gui/nuxt.config.ts                |  5 ++++
 7 files changed, 46 insertions(+), 5 deletions(-)
 create mode 100644 packages/nc-gui/assets/nc-icons/row-height-extra-tall.svg
 create mode 100644 packages/nc-gui/assets/nc-icons/row-height-medium.svg
 create mode 100644 packages/nc-gui/assets/nc-icons/row-height-short.svg
 create mode 100644 packages/nc-gui/assets/nc-icons/row-height-tall.svg

diff --git a/packages/nc-gui/assets/nc-icons/row-height-extra-tall.svg b/packages/nc-gui/assets/nc-icons/row-height-extra-tall.svg
new file mode 100644
index 0000000000..4258e90bbb
--- /dev/null
+++ b/packages/nc-gui/assets/nc-icons/row-height-extra-tall.svg
@@ -0,0 +1,4 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 6H12.75M3 6V5H12.75V6M3 6V7M12.75 6V7M3 10.5H12.75M3 10.5V9.625M3 10.5V11.625M12.75 10.5V9.625M12.75 10.5V11.625M3 15H12.75M3 15V14M3 15V16.125M12.75 15V13.875M12.75 15V16.125M3 7H12.75M3 7V7.875M12.75 7V7.875M12.75 8.75H3M12.75 8.75V7.875M12.75 8.75V9.625M3 8.75V7.875M3 8.75V9.625M3 7.875H12.75M12.75 9.625H3M12.75 12.75H3M12.75 12.75V11.625M12.75 12.75V13.875M3 12.75V11.625M3 12.75V14M3 11.625H12.75M12.75 13.875L3 14M12.75 17.25H3M12.75 17.25V16.125M12.75 17.25V18.375M3 17.25V16.125M3 17.25V18.375M3 16.125H12.75M12.75 18.375V19.5H3V18.375M12.75 18.375H3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18.5 5V19.5M18.5 5L15.5 8M18.5 5L21.5 8M18.5 19.5L15.5 16.5M18.5 19.5L21.5 16.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/packages/nc-gui/assets/nc-icons/row-height-medium.svg b/packages/nc-gui/assets/nc-icons/row-height-medium.svg
new file mode 100644
index 0000000000..46b7e6943c
--- /dev/null
+++ b/packages/nc-gui/assets/nc-icons/row-height-medium.svg
@@ -0,0 +1,4 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 6H12.75M3 6V5H12.75V6M3 6V7M12.75 6V7M3 15H12.75M3 19.5H12.75M3 7H12.75M3 7V7.875M12.75 7V7.875M12.75 8.75H3M12.75 8.75V7.875M12.75 8.75V9.625M3 8.75V7.875M3 8.75V9.625M3 7.875H12.75M12.75 9.625V10.5H3V9.625M12.75 9.625H3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18.5 5V19.5M18.5 5L15.5 8M18.5 5L21.5 8M18.5 19.5L15.5 16.5M18.5 19.5L21.5 16.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/packages/nc-gui/assets/nc-icons/row-height-short.svg b/packages/nc-gui/assets/nc-icons/row-height-short.svg
new file mode 100644
index 0000000000..4a30a7f271
--- /dev/null
+++ b/packages/nc-gui/assets/nc-icons/row-height-short.svg
@@ -0,0 +1,4 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 6H12.75M3 6V5H12.75V6M3 6V7H12.75V6M3 10.5H12.75M3 15H12.75M3 19.5H12.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18.5 5V19.5M18.5 5L15.5 8M18.5 5L21.5 8M18.5 19.5L15.5 16.5M18.5 19.5L21.5 16.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/packages/nc-gui/assets/nc-icons/row-height-tall.svg b/packages/nc-gui/assets/nc-icons/row-height-tall.svg
new file mode 100644
index 0000000000..f6bf9ba37d
--- /dev/null
+++ b/packages/nc-gui/assets/nc-icons/row-height-tall.svg
@@ -0,0 +1,4 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 6H12.75M3 6V5H12.75V6M3 6V7M12.75 6V7M3 10.5H12.75M3 10.5V9.625M3 10.5V11.625M12.75 10.5V9.625M12.75 10.5V11.625M3 19.5H12.75M3 7H12.75M3 7V7.875M12.75 7V7.875M12.75 8.75H3M12.75 8.75V7.875M12.75 8.75V9.625M3 8.75V7.875M3 8.75V9.625M3 7.875H12.75M12.75 9.625H3M12.75 12.75H3M12.75 12.75V11.625M12.75 12.75V13.875M3 12.75V11.625M3 12.75V14M3 11.625H12.75M12.75 13.875V15H3V14M12.75 13.875L3 14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18.5 5V19.5M18.5 5L15.5 8M18.5 5L21.5 8M18.5 19.5L15.5 16.5M18.5 19.5L21.5 16.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/packages/nc-gui/components.d.ts b/packages/nc-gui/components.d.ts
index 8724909df9..7809d0a39b 100644
--- a/packages/nc-gui/components.d.ts
+++ b/packages/nc-gui/components.d.ts
@@ -244,6 +244,10 @@ declare module '@vue/runtime-core' {
     MdiWhatsapp: typeof import('~icons/mdi/whatsapp')['default']
     MdiXml: typeof import('~icons/mdi/xml')['default']
     MiCircleWarning: typeof import('~icons/mi/circle-warning')['default']
+    NcIconsRowHeightExtraTall: typeof import('~icons/nc-icons/row-height-extra-tall')['default']
+    NcIconsRowHeightMedium: typeof import('~icons/nc-icons/row-height-medium')['default']
+    NcIconsRowHeightShort: typeof import('~icons/nc-icons/row-height-short')['default']
+    NcIconsRowHeightTall: typeof import('~icons/nc-icons/row-height-tall')['default']
     PhCloudLightningDuotone: typeof import('~icons/ph/cloud-lightning-duotone')['default']
     PhFileCsv: typeof import('~icons/ph/file-csv')['default']
     RiLineHeight: typeof import('~icons/ri/line-height')['default']
diff --git a/packages/nc-gui/components/smartsheet/toolbar/RowHeight.vue b/packages/nc-gui/components/smartsheet/toolbar/RowHeight.vue
index e080dc2966..292893f397 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/RowHeight.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/RowHeight.vue
@@ -54,10 +54,22 @@ useMenuCloseOnEsc(open)
       <div class="w-full bg-gray-50 shadow-lg menu-filter-dropdown !border" data-testid="nc-height-menu">
         <div class="text-gray-500 !text-xs px-4 py-2">Select a row height</div>
         <div class="flex flex-col w-full text-sm" @click.stop>
-          <div class="nc-row-height-option" @click="updateRowHeight(0)">Short</div>
-          <div class="nc-row-height-option" @click="updateRowHeight(1)">Medium</div>
-          <div class="nc-row-height-option" @click="updateRowHeight(2)">Tall</div>
-          <div class="nc-row-height-option" @click="updateRowHeight(3)">Extra</div>
+          <div class="nc-row-height-option" @click="updateRowHeight(0)">
+            <NcIconsRowHeightShort class="nc-row-height-icon" />
+            Short
+          </div>
+          <div class="nc-row-height-option" @click="updateRowHeight(1)">
+            <NcIconsRowHeightMedium class="nc-row-height-icon" />
+            Medium
+          </div>
+          <div class="nc-row-height-option" @click="updateRowHeight(2)">
+            <NcIconsRowHeightTall class="nc-row-height-icon" />
+            Tall
+          </div>
+          <div class="nc-row-height-option" @click="updateRowHeight(3)">
+            <NcIconsRowHeightExtraTall class="nc-row-height-icon" />
+            Extra
+          </div>
         </div>
       </div>
     </template>
@@ -66,6 +78,10 @@ useMenuCloseOnEsc(open)
 
 <style scoped>
 .nc-row-height-option {
-  @apply flex items-center py-1 px-2 justify-center hover:bg-gray-200 cursor-pointer;
+  @apply flex items-center py-1 px-2 justify-start hover:bg-gray-200 cursor-pointer;
+}
+
+.nc-row-height-icon {
+  @apply text-gray-600 mx-4 text-base;
 }
 </style>
diff --git a/packages/nc-gui/nuxt.config.ts b/packages/nc-gui/nuxt.config.ts
index e8ee592be4..447fa8be3c 100644
--- a/packages/nc-gui/nuxt.config.ts
+++ b/packages/nc-gui/nuxt.config.ts
@@ -6,6 +6,7 @@ import Components from 'unplugin-vue-components/vite'
 import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
 import monacoEditorPlugin from 'vite-plugin-monaco-editor'
 import { NodeModulesPolyfillPlugin } from '@esbuild-plugins/node-modules-polyfill'
+import { FileSystemIconLoader } from 'unplugin-icons/loaders'
 
 import PurgeIcons from 'vite-plugin-purge-icons'
 
@@ -107,6 +108,9 @@ export default defineNuxtConfig({
         autoInstall: false,
         compiler: 'vue3',
         defaultClass: 'nc-icon',
+        customCollections: {
+          'nc-icons': FileSystemIconLoader('./assets/nc-icons', (svg) => svg.replace(/^<svg /, '<svg fill="currentColor" ')),
+        },
       }),
       Components({
         resolvers: [
@@ -133,6 +137,7 @@ export default defineNuxtConfig({
               'system-uicons',
               'vscode-icons',
               'simple-icons',
+              'nc-icons',
             ],
           }),
         ],