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

fix(gui): toggle icon on change 

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/4630/head
Pranav C 2 years ago
parent
1a975db018
commit
d858ab4e98
5 changed files with 111 additions and 38 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. 75
      packages/nc-gui/components/dashboard/TreeView.vue
  2. 23
      packages/nc-gui/components/general/EmojiIcons.vue
  3. 7
      packages/nc-gui/components/general/IconifyIcon.vue
  4. 40
      packages/nc-gui/package-lock.json
  5. 4
      packages/nc-gui/package.json

75
packages/nc-gui/components/dashboard/TreeView.vue
Unescape View File

@ -300,18 +300,30 @@ watch(
{ immediate: true }, { immediate: true },
) )
const setIcon = (icon: string, table: TableType) => { const setIcon = (icon: string, table: TableType) => {
table.meta = { table.meta = {
// ...table.meta || {}, ...(table.meta || {}),
icon, icon,
} }
tables.value.splice(tables.value.indexOf(table), 1, { ...table })
$api.dbTable.update(table.id as string, { $api.dbTable.update(table.id as string, {
meta: { meta: table.meta,
icon,
},
}) })
} }
// const getTableIcon = (table: TableType) => {
// if (table.meta?.icon) {
// return h(
// 'span',
// {
// 'key': table.meta?.icon,
// 'class': 'iconify !cursor-pointer !text-2xl',
// 'data-icon': table.meta?.icon,
// },)
// }
// return icon(table)
// }
</script> </script>
<template> <template>
@ -546,14 +558,14 @@ const setIcon = (icon: string, table: TableType) => {
:nc-base="bases[0].id" :nc-base="bases[0].id"
> >
<div <div
v-for="table of tables.filter((table) => table.base_id === bases[0].id)" v-for="(table, i) of tables.filter((table) => table.base_id === bases[0].id)"
:key="table.id" :key="table.id"
v-e="['a:table:open']" v-e="['a:table:open']"
:class="[ :class="[
{ hidden: !filteredTables?.includes(table), active: activeTable === table.id }, { hidden: !filteredTables?.includes(table), active: activeTable === table.id },
`nc-project-tree-tbl nc-project-tree-tbl-${table.title}`, `nc-project-tree-tbl nc-project-tree-tbl-${table.title}`,
]" ]"
class="nc-tree-item text-sm cursor-pointer group" class="nc-tree-item text-sm cursor-pointer group1"
:data-order="table.order" :data-order="table.order"
:data-id="table.id" :data-id="table.id"
:data-testid="`tree-view-table-${table.title}`" :data-testid="`tree-view-table-${table.title}`"
@ -563,8 +575,7 @@ const setIcon = (icon: string, table: TableType) => {
<template #title>{{ table.table_name }}</template> <template #title>{{ table.table_name }}</template>
<div class="flex items-center gap-2 h-full" @contextmenu="setMenuContext('table', table)"> <div class="flex items-center gap-2 h-full" @contextmenu="setMenuContext('table', table)">
<div class="flex w-auto" :data-testid="`tree-view-table-draggable-handle-${table.title}`"> <div class="flex w-auto" :data-testid="`tree-view-table-draggable-handle-${table.title}`">
<a-popover trigger="click" @click.stop>
<a-popover trigger="hover" @click.stop>
<div @click.stop> <div @click.stop>
<MdiDrag <MdiDrag
v-if="isUIAllowed('treeview-drag-n-drop')" v-if="isUIAllowed('treeview-drag-n-drop')"
@ -573,32 +584,38 @@ const setIcon = (icon: string, table: TableType) => {
@click.stop.prevent @click.stop.prevent
/> />
<span v-if="table.meta?.icon" class="iconify cursor-pointer" :data-icon="table.meta?.icon"></span> <a-tooltip>
<span v-if="table.meta?.icon" :key="table.meta?.icon">
<component <GeneralIconifyIcon class="text-2xl" :key="table.meta?.icon" :icon="table.meta?.icon"></GeneralIconifyIcon>
v-else </span>
:is="icon(table)" <component
class="nc-view-icon text-xs" :is="icon(table)"
:class="{ 'group-hover:hidden group-hover:text-gray-500': isUIAllowed('treeview-drag-n-drop') }" v-else
/> class="nc-view-icon text-xs"
:class="{ 'group-hover:hidden group-hover:text-gray-500': isUIAllowed('treeview-drag-n-drop') }"
/>
<template #title>Change icon</template>
</a-tooltip>
</div> </div>
<template #content> <template #content>
<LazyGeneralEmojiIcons @selectIcon="setIcon($event, table)" /> <LazyGeneralEmojiIcons @selectIcon="setIcon($event, table)" />
</template> </template>
</a-popover> </a-popover>
<MdiDragVertical <!--
v-if="isUIAllowed('treeview-drag-n-drop')" <MdiDragVertical
:class="`nc-child-draggable-icon-${table.title}`" v-if="isUIAllowed('treeview-drag-n-drop')"
class="nc-drag-icon text-xs hidden group-hover:block transition-opacity opacity-0 group-hover:opacity-100 text-gray-500 cursor-move" :class="`nc-child-draggable-icon-${table.title}`"
@click.stop.prevent class="nc-drag-icon text-xs hidden group-hover:block transition-opacity opacity-0 group-hover:opacity-100 text-gray-500 cursor-move"
/> @click.stop.prevent
/>
<component
:is="icon(table)" <component
class="nc-view-icon text-xs" :is="icon(table)"
:class="{ 'group-hover:hidden group-hover:text-gray-500': isUIAllowed('treeview-drag-n-drop') }" class="nc-view-icon text-xs"
/> :class="{ 'group-hover:hidden group-hover:text-gray-500': isUIAllowed('treeview-drag-n-drop') }"
/> -->
</div> </div>
<div class="nc-tbl-title flex-1"> <div class="nc-tbl-title flex-1">

23
packages/nc-gui/components/general/EmojiIcons.vue
Unescape View File

@ -1,4 +1,6 @@
<script lang="ts" setup> <script lang="ts" setup>
import { Icon } from '@iconify/vue';
const emit = defineEmits(['selectIcon']) const emit = defineEmits(['selectIcon'])
const search = $ref('') const search = $ref('')
@ -1843,15 +1845,26 @@ const icons = [
const filteredIcons = computed(() => { const filteredIcons = computed(() => {
return icons.filter((icon) => !search || icon.toLowerCase().includes(search.toLowerCase())) return icons.filter((icon) => !search || icon.toLowerCase().includes(search.toLowerCase()))
}) })
</script> </script>
<template> <template>
<a-card class="overflow-y-auto"> <div class="p-1 w-85 h-80 flex flex-col gap-1 justify-start">
<a-input-search v-model:value="search" class="w-full overflow-y-auto !m-4" placeholder="Search"></a-input-search> <div>
<div class="flex gap-4 flex-wrap w-full m-4 max-w-80 max-h-40"> <input v-model="search" class="p-1 border-1 w-full overflow-y-auto" placeholder="Search" />
</div>
<div class="flex gap-4 flex-wrap w-full flex-shrink overflow-y-auto scrollbar-thin-dull">
<div v-for="icon of filteredIcons" :key="icon" @click="emit('selectIcon', `emojione:${icon}`)"> <div v-for="icon of filteredIcons" :key="icon" @click="emit('selectIcon', `emojione:${icon}`)">
<span class="iconify cursor-pointer active:ring" :data-icon="`emojione:${icon}`"></span> <span class="cursor-pointer nc-emoji-item">
<Icon class="text-2xl iconify"
:icon="`emojione:${icon}`"></Icon>
</span>
</div> </div>
</div> </div>
</a-card> </div>
</template> </template>
<style scoped>
.nc-emoji-item {
@apply hover:(bg-primary bg-opacity-10) active:(bg-primary !bg-opacity-20) rounded-md w-[38px] h-[38px] block flex items-center justify-center;
}
</style>

7
packages/nc-gui/components/general/IconifyIcon.vue
Unescape View File

@ -0,0 +1,7 @@
<template>
<Icon :icon="icon"/>
</template>
<script lang="ts" setup>
import { Icon } from '@iconify/vue';
</script>

40
packages/nc-gui/package-lock.json generated
Unescape View File

@ -9,7 +9,7 @@
"license": "AGPL-3.0-or-later", "license": "AGPL-3.0-or-later",
"dependencies": { "dependencies": {
"@ckpack/vue-color": "^1.2.0", "@ckpack/vue-color": "^1.2.0",
"@iconify/iconify": "^2.2.1", "@iconify/vue": "^4.0.1",
"@types/file-saver": "^2.0.5", "@types/file-saver": "^2.0.5",
"@vue-flow/additional-components": "^1.2.0", "@vue-flow/additional-components": "^1.2.0",
"@vue-flow/core": "^1.3.0", "@vue-flow/core": "^1.3.0",
@ -1210,6 +1210,7 @@
"version": "2.2.1", "version": "2.2.1",
"resolved": "https://registry.npmjs.org/@iconify/iconify/-/iconify-2.2.1.tgz", "resolved": "https://registry.npmjs.org/@iconify/iconify/-/iconify-2.2.1.tgz",
"integrity": "sha512-WJzw+3iicrF/tbjbxxRinSgy5FHdJoz/egTqwi3xCDkNRJPq482RX1iyaWrjNuY2vMNSPkQMuqHvZDXgA+WnwQ==", "integrity": "sha512-WJzw+3iicrF/tbjbxxRinSgy5FHdJoz/egTqwi3xCDkNRJPq482RX1iyaWrjNuY2vMNSPkQMuqHvZDXgA+WnwQ==",
"dev": true,
"funding": { "funding": {
"url": "http://github.com/sponsors/cyberalien" "url": "http://github.com/sponsors/cyberalien"
} }
@ -1234,6 +1235,25 @@
"local-pkg": "^0.4.1" "local-pkg": "^0.4.1"
} }
}, },
"node_modules/@iconify/vue": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/@iconify/vue/-/vue-4.0.1.tgz",
"integrity": "sha512-k4VwcSQpGqJpoyqENRRviFuXlVcquLvQ6BKLNJ6o2amZo7u+3HyALSO79Xyz7Sg68szQGstOk6weaKUF0DJbog==",
"dependencies": {
"@iconify/types": "^2.0.0"
},
"funding": {
"url": "https://github.com/sponsors/cyberalien"
},
"peerDependencies": {
"vue": ">=3"
}
},
"node_modules/@iconify/vue/node_modules/@iconify/types": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
"integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg=="
},
"node_modules/@intlify/bundle-utils": { "node_modules/@intlify/bundle-utils": {
"version": "2.2.2", "version": "2.2.2",
"resolved": "https://registry.npmjs.org/@intlify/bundle-utils/-/bundle-utils-2.2.2.tgz", "resolved": "https://registry.npmjs.org/@intlify/bundle-utils/-/bundle-utils-2.2.2.tgz",
@ -18576,7 +18596,8 @@
"@iconify/iconify": { "@iconify/iconify": {
"version": "2.2.1", "version": "2.2.1",
"resolved": "https://registry.npmjs.org/@iconify/iconify/-/iconify-2.2.1.tgz", "resolved": "https://registry.npmjs.org/@iconify/iconify/-/iconify-2.2.1.tgz",
"integrity": "sha512-WJzw+3iicrF/tbjbxxRinSgy5FHdJoz/egTqwi3xCDkNRJPq482RX1iyaWrjNuY2vMNSPkQMuqHvZDXgA+WnwQ==" "integrity": "sha512-WJzw+3iicrF/tbjbxxRinSgy5FHdJoz/egTqwi3xCDkNRJPq482RX1iyaWrjNuY2vMNSPkQMuqHvZDXgA+WnwQ==",
"dev": true
}, },
"@iconify/types": { "@iconify/types": {
"version": "1.1.0", "version": "1.1.0",
@ -18598,6 +18619,21 @@
"local-pkg": "^0.4.1" "local-pkg": "^0.4.1"
} }
}, },
"@iconify/vue": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/@iconify/vue/-/vue-4.0.1.tgz",
"integrity": "sha512-k4VwcSQpGqJpoyqENRRviFuXlVcquLvQ6BKLNJ6o2amZo7u+3HyALSO79Xyz7Sg68szQGstOk6weaKUF0DJbog==",
"requires": {
"@iconify/types": "^2.0.0"
},
"dependencies": {
"@iconify/types": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
"integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg=="
}
}
},
"@intlify/bundle-utils": { "@intlify/bundle-utils": {
"version": "2.2.2", "version": "2.2.2",
"resolved": "https://registry.npmjs.org/@intlify/bundle-utils/-/bundle-utils-2.2.2.tgz", "resolved": "https://registry.npmjs.org/@intlify/bundle-utils/-/bundle-utils-2.2.2.tgz",

4
packages/nc-gui/package.json
Unescape View File

@ -32,7 +32,8 @@
}, },
"dependencies": { "dependencies": {
"@ckpack/vue-color": "^1.2.0", "@ckpack/vue-color": "^1.2.0",
"@iconify/iconify": "^2.2.1", "@iconify/vue": "^4.0.1",
"@types/file-saver": "^2.0.5",
"@vue-flow/additional-components": "^1.2.0", "@vue-flow/additional-components": "^1.2.0",
"@vue-flow/core": "^1.3.0", "@vue-flow/core": "^1.3.0",
"@vuelidate/core": "^2.0.0-alpha.44", "@vuelidate/core": "^2.0.0-alpha.44",
@ -42,7 +43,6 @@
"ant-design-vue": "^3.2.11", "ant-design-vue": "^3.2.11",
"d3-scale": "^4.0.2", "d3-scale": "^4.0.2",
"dagre": "^0.8.5", "dagre": "^0.8.5",
"@types/file-saver": "^2.0.5",
"dayjs": "^1.11.3", "dayjs": "^1.11.3",
"file-saver": "^2.0.5", "file-saver": "^2.0.5",
"httpsnippet": "^2.0.0", "httpsnippet": "^2.0.0",

Write Preview
Loading…
Cancel
Save