refactor: load material font and use GeneralIcon component

Signed-off-by: Pranav C <pranavxc@gmail.com>
1 year ago · 274161dcf6
10 changed files with 64 additions and 41 deletions
--- a/packages/nc-gui/assets/style/fonts.css
+++ b/packages/nc-gui/assets/style/fonts.css
@ -1,5 +1,3 @@
-@import 'material-symbols/outlined.css';
-
 /* inter-100 - vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
@ -152,12 +150,44 @@
  font-display: swap;
 }

+
+/* material-symbols-outlined-200 - latin */
+@font-face {
+  font-family: 'Material Symbols Outlined';
+  font-style: normal;
+  font-weight: 200;
+  src: url('./material-symbols/material-symbols-outlined-v92-latin-200.eot'); /* IE9 Compat Modes */
+  src: url('./material-symbols/material-symbols-outlined-v92-latin-200.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('./material-symbols/material-symbols-outlined-v92-latin-200.woff2') format('woff2'), /* Super Modern Browsers */
+  url('./material-symbols/material-symbols-outlined-v92-latin-200.woff') format('woff'), /* Modern Browsers */
+  url('./material-symbols/material-symbols-outlined-v92-latin-200.ttf') format('truetype'), /* Safari, Android, iOS */
+  url('./material-symbols/material-symbols-outlined-v92-latin-200.svg#MaterialSymbolsOutlined') format('svg'); /* Legacy iOS */
+}
+
+/*      //   href: 'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20,200,0,-25',
+*/
+
+/* fallback */
+@font-face {
+  font-family: 'Material Symbols Outlined';
+  font-style: normal;
+  font-weight: 200;
+  src: url(./material.woff2) format('woff2');
+}
+
 .material-symbols-outlined {
-  font-size: 1.3rem;
+  font-family: 'Material Symbols Outlined';
+  font-weight: normal;
+  font-style: normal;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+  font-size: 20px  !important;

-    font-variation-settings:
-           'FILL' 0,
-           'wght' 200,
-           'GRAD' 0,
-           'opsz' 20
 }
--- a/packages/nc-gui/assets/style/material.woff2
+++ b/packages/nc-gui/assets/style/material.woff2
--- a/packages/nc-gui/components/general/Icon.vue
+++ b/packages/nc-gui/components/general/Icon.vue
@ -7,5 +7,5 @@ const props = defineProps<{
 </script>

 <template>
-  <component :is="iconMap[props.icon]" class="mr-2" />
+  <component :is="iconMap[props.icon]"/>
 </template>
--- a/packages/nc-gui/components/virtual-cell/BelongsTo.vue
+++ b/packages/nc-gui/components/virtual-cell/BelongsTo.vue
@ -52,7 +52,7 @@ const { loadRelatedTableMeta, relatedTableDisplayValueProp, unlink } = useProvid

 await loadRelatedTableMeta()

-const addIcon = computed(() => (cellValue?.value ? iconMap.expand : iconMap.plus))
+const addIcon = computed(() => (cellValue?.value ?'expand' : 'plus'))

 const value = computed(() => {
  if (cellValue?.value) {
@ -93,8 +93,8 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
      v-if="!readOnly && !isLocked && (isUIAllowed('xcDatatableEditable') || isForm)"
      class="flex justify-end gap-1 min-h-[30px] items-center"
    >
-      <component
-        :is="addIcon"
+      <GeneralIcon
+        :icon="addIcon"
        class="text-sm nc-action-icon text-gray-500/50 hover:text-gray-500 select-none group-hover:(text-gray-500) nc-plus"
        @click.stop="listItemsDlg = true"
      />
--- a/packages/nc-gui/components/virtual-cell/HasMany.vue
+++ b/packages/nc-gui/components/virtual-cell/HasMany.vue
@ -18,6 +18,7 @@ import {
  useSmartsheetRowStoreOrThrow,
  useUIPermission,
 } from '#imports'
+import General from '~/layouts/general.vue'

 const column = inject(ColumnInj)!

@ -114,14 +115,14 @@ useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEven
      </div>

      <div v-if="!isLocked" class="flex justify-end gap-1 min-h-[30px] items-center">
-        <component
-          :is="iconMap.expand"
+        <GeneralIcon
+          icon="expand"
          class="select-none transform text-sm nc-action-icon text-gray-500/50 hover:text-gray-500 nc-arrow-expand"
          @click.stop="childListDlg = true"
        />

-        <component
-          :is="iconMap.plus"
+        <GeneralIcon
+          icon="plus"
          v-if="!readOnly && isUIAllowed('xcDatatableEditable')"
          class="select-none text-sm nc-action-icon text-gray-500/50 hover:text-gray-500 nc-plus"
          @click.stop="listItemsDlg = true"
--- a/packages/nc-gui/components/virtual-cell/ManyToMany.vue
+++ b/packages/nc-gui/components/virtual-cell/ManyToMany.vue
@ -116,14 +116,14 @@ useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEven
      </div>

      <div v-if="!isLocked" class="flex justify-end gap-1 min-h-[30px] items-center">
-        <component
-          :is="iconMap.expand"
+        <GeneralIcon
+          icon="expand"
          class="text-sm nc-action-icon text-gray-500/50 hover:text-gray-500 nc-arrow-expand"
          @click.stop="childListDlg = true"
        />

-        <component
-          :is="iconMap.plus"
+        <GeneralIcon
+          icon="plus"
          v-if="!readOnly && isUIAllowed('xcDatatableEditable')"
          class="text-sm nc-action-icon text-gray-500/50 hover:text-gray-500 nc-plus"
          @click.stop="listItemsDlg = true"
--- a/packages/nc-gui/nuxt.config.ts
+++ b/packages/nc-gui/nuxt.config.ts
@ -54,7 +54,7 @@ export default defineNuxtConfig({
        rel: 'icon',
        type: 'image/x-icon',
        href: './favicon.ico',
-      },
+      }
    ],
    meta: [
      { charset: 'utf-8' },
--- a/packages/nc-gui/package-lock.json
+++ b/packages/nc-gui/package-lock.json
@ -30,7 +30,6 @@
        "leaflet": "^1.9.2",
        "leaflet.markercluster": "^1.5.3",
        "locale-codes": "^1.3.1",
-        "material-symbols": "^0.5.1",
        "monaco-editor": "^0.33.0",
        "nocodb-sdk": "file:../nocodb-sdk",
        "papaparse": "^5.3.2",
@ -11383,11 +11382,6 @@
      "resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz",
      "integrity": "sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg=="
    },
-    "node_modules/material-symbols": {
-      "version": "0.5.1",
-      "resolved": "https://registry.npmjs.org/material-symbols/-/material-symbols-0.5.1.tgz",
-      "integrity": "sha512-o2R47ZQnzyudeos86/aaDt2NVQyOTmIJdXrud8uCJOKYTGGTi13WE8T4CMLM8Dt+Te2rJpK9sj290lQfdusJHQ=="
-    },
    "node_modules/mdast-util-from-markdown": {
      "version": "0.8.5",
      "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-0.8.5.tgz",
@ -26726,11 +26720,6 @@
      "resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz",
      "integrity": "sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg=="
    },
-    "material-symbols": {
-      "version": "0.5.1",
-      "resolved": "https://registry.npmjs.org/material-symbols/-/material-symbols-0.5.1.tgz",
-      "integrity": "sha512-o2R47ZQnzyudeos86/aaDt2NVQyOTmIJdXrud8uCJOKYTGGTi13WE8T4CMLM8Dt+Te2rJpK9sj290lQfdusJHQ=="
-    },
    "mdast-util-from-markdown": {
      "version": "0.8.5",
      "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-0.8.5.tgz",
--- a/packages/nc-gui/package.json
+++ b/packages/nc-gui/package.json
@ -54,7 +54,6 @@
    "leaflet": "^1.9.2",
    "leaflet.markercluster": "^1.5.3",
    "locale-codes": "^1.3.1",
-    "material-symbols": "^0.5.1",
    "monaco-editor": "^0.33.0",
    "nocodb-sdk": "file:../nocodb-sdk",
    "papaparse": "^5.3.2",
--- a/packages/nc-gui/utils/iconUtils.ts
+++ b/packages/nc-gui/utils/iconUtils.ts
@ -329,10 +329,10 @@ export const iconMap = {
  keyboard: h('span', { class: 'material-symbols-outlined' }, 'keyboard'),
  accountPlus: h('span', { class: 'material-symbols-outlined' }, 'person_add'),
  database: h('span', { class: 'material-symbols-outlined' }, 'storage'),
-  discord: h('span', { class: 'material-symbols-outlined' }, 'discord'),
-  reddit: h('span', { class: 'material-symbols-outlined' }, 'reddit'),
-  github: h('span', { class: 'material-symbols-outlined' }, 'github'),
-  twitter: h('span', { class: 'material-symbols-outlined' }, 'twitter'),
+  discord: PhDiscordLogoLight,
+  reddit: PhRedditLogoLight,
+  github: PhGithubLogoLight,
+  twitter: PhTwitterLogoLight,
  at: h('span', { class: 'material-symbols-outlined' }, 'alternate_email'),
  plusCircle: h('span', { class: 'material-symbols-outlined' }, 'add_circle'),
  minusCircle: h('span', { class: 'material-symbols-outlined' }, 'remove_circle'),
@ -359,8 +359,11 @@ export const iconMap = {
  arrowDown: h('span', { class: 'material-symbols-outlined', style: { fontSize: '.8rem' } }, 'keyboard_arrow_down'),
  arrowRight: h('span', { class: 'material-symbols-outlined' }, 'keyboard_arrow_right'),
  arrowDoubleLeft: h('span', { class: 'material-symbols-outlined' }, 'first_page'),
-  threeDotVertical: h('span', { class: 'material-symbols-outlined' }, 'more_vert'),
-  threeDotHorizontal: h('span', { class: 'material-symbols-outlined' }, 'more_horiz'),
+  // threeDotVertical: h('span', { class: 'material-symbols-outlined' }, 'more_vert'),
+  // threeDotHorizontal: h('span', { class: 'material-symbols-outlined' }, 'more_horiz'),
+
+  threeDotVertical: PhDotsThreeOutlineVerticalThin,
+  threeDotHorizontal: PhDotsThreeOutlineThin,
  table: h('span', { class: 'material-symbols-outlined' }, 'table_chart'),
  excel: PhExcelThin, // h('span', { class: 'material-symbols-outlined' }, 'grid_on'),
  csv: PhCsvThin, // h('span', { class: 'material-symbols-outlined' }, 'grid_on'),
@ -406,7 +409,7 @@ export const iconMap = {
  sync: h('span', { class: 'material-symbols-outlined' }, 'sync'),
  warning: h('span', { class: 'material-symbols-outlined' }, 'warning'),
  share: h('span', { class: 'material-symbols-outlined' }, 'share'),
-  reload: h('span', { class: 'material-symbols-outlined ' }, 'refresh'),
+  reload: h('span', { class: 'material-symbols-outlined' }, 'refresh'),
  xml: h('span', { class: 'material-symbols-outlined' }, 'code'),
  airtable: h('span', { class: 'material-symbols-outlined' }, 'grid_on'),
  grid: h('span', { class: 'material-symbols-outlined' }, 'grid_on'),
@ -415,7 +418,8 @@ export const iconMap = {
  map: h('span', { class: 'material-symbols-outlined' }, 'map'),
  kanban: h('span', { class: 'material-symbols-outlined' }, 'view_column'),
  view: h('span', { class: 'material-symbols-outlined' }, 'view_list'),
-  rowHeight: h('span', { class: 'material-symbols-outlined' }, 'height'),
+  // rowHeight: h('span', { class: 'material-symbols-outlined' }, 'height'),
+  rowHeight: h(PhSplitVerticalThin, { style: { fontSize: '14px' } }),
  filter: h('span', { class: 'material-symbols-outlined' }, 'filter_list'),
  closeCircle: h('span', { class: 'material-symbols-outlined' }, 'cancel'),
  closeBox: h('span', { class: 'material-symbols-outlined' }, 'close'),