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

feat(gui-v2): add menu item styling 

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/2819/head
Pranav C 2 years ago
parent
2858720637
commit
9faaf849db
4 changed files with 42 additions and 148 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. 5
      packages/nc-gui-v2/assets/style-v2.scss
  2. 59
      packages/nc-gui-v2/components/smartsheet-toolbar/LockMenu.vue
  3. 120
      packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
  4. 6
      packages/nc-gui-v2/components/smartsheet-toolbar/SearchData.vue

5
packages/nc-gui-v2/assets/style-v2.scss
Unescape View File

@ -64,3 +64,8 @@ h1, h2, h3, h4, h5, h6, p, label, button, textarea, select {
html { html {
overflow-y: auto !important; overflow-y: auto !important;
} }
.nc-menu-item {
@apply cursor-pointer text-xs flex align-center gap-2 p-4 relative after:(content-[''] absolute top-0 left-0 w-full h-full right 0 bg-current opacity-0 transition transition-opactity duration-100) hover:(after:(opacity-5));
}

59
packages/nc-gui-v2/components/smartsheet-toolbar/LockMenu.vue
Unescape View File

@ -63,7 +63,7 @@ export default {
<template #overlay> <template #overlay>
<div class="min-w-[350px] max-w-[500px] shadow bg-white"> <div class="min-w-[350px] max-w-[500px] shadow bg-white">
<div> <div>
<div class="nc-menu-option"> <div class="nc-menu-item">
<MdiCheckIcon v-if="!vModel || vModel === LockType.Collaborative" /> <MdiCheckIcon v-if="!vModel || vModel === LockType.Collaborative" />
<span v-else /> <span v-else />
@ -73,7 +73,7 @@ export default {
<div class="nc-subtitle">Collaborators with edit permissions or higher can change the view configuration.</div> <div class="nc-subtitle">Collaborators with edit permissions or higher can change the view configuration.</div>
</div> </div>
</div> </div>
<div class="nc-menu-option"> <div class="nc-menu-item">
<MdiCheckIcon v-if="vModel === LockType.Locked" /> <MdiCheckIcon v-if="vModel === LockType.Locked" />
<span v-else /> <span v-else />
<div> <div>
@ -82,7 +82,7 @@ export default {
<div class="nc-subtitle">No one can edit the view configuration until it is unlocked.</div> <div class="nc-subtitle">No one can edit the view configuration until it is unlocked.</div>
</div> </div>
</div> </div>
<div class="nc-menu-option"> <div class="nc-menu-item">
<MdiCheckIcon v-if="vModel === LockType.Personal" /> <MdiCheckIcon v-if="vModel === LockType.Personal" />
<span v-else /> <span v-else />
<div> <div>
@ -97,62 +97,11 @@ export default {
</div> </div>
</template> </template>
<!-- <v-list maxc-width="350">
<v-list-item two-line class="pb-4" @click="changeLockType(LockType.Collaborative)">
<v-list-item-icon class="mr-1 align-self-center">
<v-icon v-if="!vModel || vModel === LockType.Collaborative" small> mdi-check-bold </v-icon>
</v-list-item-icon>
<v-list-item-content class="pb-1">
<v-list-item-title>
<v-icon small class="mt-n1" color="primary"> mdi-account-group </v-icon>
Collaborative view
</v-list-item-title>
<v-list-item-subtitle class="pt-2 pl- font-weight-light" style="white-space: normal">
Collaborators with edit permissions or higher can change the view configuration.
</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
<v-list-item two-line class="pb-4" @click="changeLockType(LockType.Locked)">
<v-list-item-icon class="mr-1 align-self-center">
<v-icon v-if="vModel === LockType.Locked" small> mdi-check-bold </v-icon>
</v-list-item-icon>
<v-list-item-content class="pb-1">
<v-list-item-title>
<v-icon small class="mt-n1" color="primary"> mdi-lock </v-icon>
Locked View
</v-list-item-title>
<v-list-item-subtitle class="pt-2 pl- font-weight-light" style="white-space: normal">
No one can edit the view configuration until it is unlocked.
</v-list-item-subtitle>
<span class="caption mt-3"><v-icon class="mr-1 mt-n1" x-small color="#fcb401"> mdi-star</v-icon>Locked view.</span>
</v-list-item-content>
</v-list-item>
<v-list-item three-line @click="changeLockType(LockType.Personal)">
<v-list-item-icon class="mr-1 align-self-center">
<v-icon v-if="vModel === LockType.Personal" small> mdi-check-bold </v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>
<v-icon small class="mt-n1" color="primary"> mdi-account </v-icon>
Personal view
</v-list-item-title>
<v-list-item-subtitle class="pt-2 pl- font-weight-light" style="white-space: normal">
Only you can edit the view configuration. Other collaborators’ personal views are hidden by default.
</v-list-item-subtitle>
<span class="caption mt-3"><v-icon class="mr-1 mt-n1" x-small color="#fcb401"> mdi-star</v-icon>Coming soon.</span>
</v-list-item-content>
</v-list-item>
</v-list> -->
</a-dropdown> </a-dropdown>
</template> </template>
<style scoped> <style scoped>
.nc-menu-option { .nc-menu-item {
@apply grid grid-cols-[30px,auto] gap-2 p-4; @apply grid grid-cols-[30px,auto] gap-2 p-4;
} }

120
packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
Unescape View File

@ -1,7 +1,10 @@
<script lang="ts" setup> <script lang="ts" setup>
import MdiFlashIcon from '~icons/mdi/flash-outline' import MdiFlashIcon from "~icons/mdi/flash-outline";
import MdiMenuDownIcon from '~icons/mdi/menu-down' import MdiMenuDownIcon from "~icons/mdi/menu-down";
import MdiDownloadIcon from '~icons/mdi/download-outline' import MdiDownloadIcon from "~icons/mdi/download-outline";
import MdiUploadIcon from "~icons/mdi/upload-outline";
import MdiHookIcon from "~icons/mdi/hook";
import MdiViewListIcon from "~icons/mdi/view-list-outline";
</script> </script>
<template> <template>
@ -10,98 +13,35 @@ import MdiDownloadIcon from '~icons/mdi/download-outline'
<div class="flex gap-1 align-center"> <div class="flex gap-1 align-center">
<MdiFlashIcon class="text-grey" /> <MdiFlashIcon class="text-grey" />
<!-- More --> <!-- More -->
{{ $t('general.more') }} {{ $t("general.more") }}
<MdiMenuDownIcon class="text-grey" /> <MdiMenuDownIcon class="text-grey" />
</div> </div>
</a-button> </a-button>
<template #overlay> <template #overlay>
<div class="p-2 bg-white"> <div class=" bg-white shadow">
<a-menu> <div>
<a-menu-item> <div class="nc-menu-item" @click.stop>
<div class="text-xs flex align-center gap-2"> <MdiDownloadIcon />
<MdiDownloadIcon /> <!-- Download as CSV -->
<!-- Download as CSV --> {{ $t("activity.downloadCSV") }}
{{ $t('activity.downloadCSV') }} </div>
</div> <div class="nc-menu-item" @click.stop>
</a-menu-item> <MdiUploadIcon />
</a-menu> <!-- Upload CSV -->
{{ $t("activity.uploadCSV") }}
</div>
<div class="nc-menu-item" @click.stop>
<MdiViewListIcon />
<!-- Shared View List -->
{{ $t("activity.listSharedView") }}
</div>
<div class="nc-menu-item" @click.stop>
<MdiHookIcon />
<!-- todo: i18n -->
Webhook
</div>
</div>
</div> </div>
</template> </template>
</a-dropdown> </a-dropdown>
<!-- <div>
<v-menu open-on-hover bottom offset-y transition="slide-y-transition">
<template #activator="{ on }">
<v-btn
v-t="['c:actions']"
outlined
class="nc-actions-menu-btn caption px-2 nc-remove-border font-weight-medium"
small
text
v-on="on"
>
<v-icon small color="#777"> mdi-flash-outline </v-icon>
&lt;!&ndash; More &ndash;&gt;
{{ $t('general.more') }}
<v-icon small color="#777"> mdi-menu-down </v-icon>
</v-btn>
</template>
<v-list dense>
<v-list-item v-t="['a:actions:download-csv']" dense @click="exportCsv">
<v-list-item-title>
<v-icon small class="mr-1"> mdi-download-outline </v-icon>
<span class="caption">
&lt;!&ndash; Download as CSV &ndash;&gt;
{{ $t('activity.downloadCSV') }}
</span>
</v-list-item-title>
</v-list-item>
<v-list-item v-if="_isUIAllowed('csvImport') && !isView" v-t="['a:actions:upload-csv']" dense @click="importModal = true">
<v-list-item-title>
<v-icon small class="mr-1" color=""> mdi-upload-outline </v-icon>
<span class="caption">
&lt;!&ndash; Upload CSV &ndash;&gt;
{{ $t('activity.uploadCSV') }}
</span>
<span class="caption grey&#45;&#45;text">(<x-icon small color="grey lighten-2"> mdi-alpha </x-icon> version)</span>
</v-list-item-title>
</v-list-item>
<v-list-item
v-if="_isUIAllowed('SharedViewList') && !isView"
v-t="['a:actions:shared-view-list']"
dense
@click="$emit('showAdditionalFeatOverlay', 'shared-views')"
>
<v-list-item-title>
<v-icon small class="mr-1" color=""> mdi-view-list-outline </v-icon>
<span class="caption">
&lt;!&ndash; Shared View List &ndash;&gt;
{{ $t('activity.listSharedView') }}
</span>
</v-list-item-title>
</v-list-item>
<v-list-item v-if="_isUIAllowed('webhook') && !isView" v-t="['c:actions:webhook']" dense @click="webhookModal = true">
<v-list-item-title>
<v-icon small class="mr-1" color=""> mdi-hook </v-icon>
<span class="caption"> Webhooks </span>
</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
<DropOrSelectFileModal v-model="importModal" accept=".csv" text="CSV" @file="onCsvFileSelection" />
<ColumnMappingModal
v-if="columnMappingModal && meta"
v-model="columnMappingModal"
:meta="meta"
:import-data-columns="parsedCsv.columns"
:parsed-csv="parsedCsv"
@import="importData"
/>
&lt;!&ndash; <webhook-modal v-if="webhookModal" v-model="webhookModal" :meta="meta" /> &ndash;&gt;
<WebhookSlider v-model="webhookModal" :meta="meta" />
</div> -->
</template> </template>
<style scoped></style>

6
packages/nc-gui-v2/components/smartsheet-toolbar/SearchData.vue
Unescape View File

@ -27,11 +27,11 @@ const columns = computed(() =>
</script> </script>
<template> <template>
<a-input-search v-model:value="localValue" size="small" class="max-w-[250px]"> <a-input v-model:value="localValue" size="small" class="max-w-[250px]" placeholder="Filter query">
<template #addonBefore> <template #addonBefore>
<a-select v-model:value="localField" :options="columns" style="width: 100px" class="!text-xs" size="small" /> <a-select v-model:value="localField" :options="columns" style="width: 80px" class="!text-xs" size="small" />
</template> </template>
</a-input-search> </a-input>
</template> </template>
<style scoped></style> <style scoped></style>

Write Preview
Loading…
Cancel
Save