github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

feat: custom icons for row height options 

Signed-off-by: mertmit <mertmit99@gmail.com>
pull/4840/head
mertmit 2 years ago
parent
2ec329fa8b
commit
3814f122ab
7 changed files with 46 additions and 5 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      packages/nc-gui/assets/nc-icons/row-height-extra-tall.svg
  2. 4
      packages/nc-gui/assets/nc-icons/row-height-medium.svg
  3. 4
      packages/nc-gui/assets/nc-icons/row-height-short.svg
  4. 4
      packages/nc-gui/assets/nc-icons/row-height-tall.svg
  5. 4
      packages/nc-gui/components.d.ts
  6. 26
      packages/nc-gui/components/smartsheet/toolbar/RowHeight.vue
  7. 5
      packages/nc-gui/nuxt.config.ts

4
packages/nc-gui/assets/nc-icons/row-height-extra-tall.svg
Unescape View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 925 B

4
packages/nc-gui/assets/nc-icons/row-height-medium.svg
Unescape View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 586 B

4
packages/nc-gui/assets/nc-icons/row-height-short.svg
Unescape View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 437 B

4
packages/nc-gui/assets/nc-icons/row-height-tall.svg
Unescape View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 757 B

4
packages/nc-gui/components.d.ts vendored
Unescape View File

@ -244,6 +244,10 @@ declare module '@vue/runtime-core' {
MdiWhatsapp: typeof import('~icons/mdi/whatsapp')['default'] MdiWhatsapp: typeof import('~icons/mdi/whatsapp')['default']
MdiXml: typeof import('~icons/mdi/xml')['default'] MdiXml: typeof import('~icons/mdi/xml')['default']
MiCircleWarning: typeof import('~icons/mi/circle-warning')['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'] PhCloudLightningDuotone: typeof import('~icons/ph/cloud-lightning-duotone')['default']
PhFileCsv: typeof import('~icons/ph/file-csv')['default'] PhFileCsv: typeof import('~icons/ph/file-csv')['default']
RiLineHeight: typeof import('~icons/ri/line-height')['default'] RiLineHeight: typeof import('~icons/ri/line-height')['default']

26
packages/nc-gui/components/smartsheet/toolbar/RowHeight.vue
Unescape View File

@ -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="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="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="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(0)">
<div class="nc-row-height-option" @click="updateRowHeight(1)">Medium</div> <NcIconsRowHeightShort class="nc-row-height-icon" />
<div class="nc-row-height-option" @click="updateRowHeight(2)">Tall</div> Short
<div class="nc-row-height-option" @click="updateRowHeight(3)">Extra</div> </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>
</div> </div>
</template> </template>
@ -66,6 +78,10 @@ useMenuCloseOnEsc(open)
<style scoped> <style scoped>
.nc-row-height-option { .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> </style>

5
packages/nc-gui/nuxt.config.ts
Unescape View File

@ -6,6 +6,7 @@ import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers' import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
import monacoEditorPlugin from 'vite-plugin-monaco-editor' import monacoEditorPlugin from 'vite-plugin-monaco-editor'
import { NodeModulesPolyfillPlugin } from '@esbuild-plugins/node-modules-polyfill' import { NodeModulesPolyfillPlugin } from '@esbuild-plugins/node-modules-polyfill'
import { FileSystemIconLoader } from 'unplugin-icons/loaders'
import PurgeIcons from 'vite-plugin-purge-icons' import PurgeIcons from 'vite-plugin-purge-icons'
@ -107,6 +108,9 @@ export default defineNuxtConfig({
autoInstall: false, autoInstall: false,
compiler: 'vue3', compiler: 'vue3',
defaultClass: 'nc-icon', defaultClass: 'nc-icon',
customCollections: {
'nc-icons': FileSystemIconLoader('./assets/nc-icons', (svg) => svg.replace(/^<svg /, '<svg fill="currentColor" ')),
},
}), }),
Components({ Components({
resolvers: [ resolvers: [
@ -133,6 +137,7 @@ export default defineNuxtConfig({
'system-uicons', 'system-uicons',
'vscode-icons', 'vscode-icons',
'simple-icons', 'simple-icons',
'nc-icons',
], ],
}), }),
], ],

Write Preview
Loading…
Cancel
Save