Browse Source

refactor(gui-v2): ui updates

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/2860/head
Pranav C 2 years ago
parent
commit
18a869c93f
  1. 12
      packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
  2. 4
      packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
  3. 1
      packages/nc-gui-v2/components/smartsheet-toolbar/FieldListAutoCompleteDropdown.vue
  4. 8
      packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
  5. 13
      packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue
  6. 17
      packages/nc-gui-v2/components/smartsheet/Toolbar.vue

12
packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue

@ -96,23 +96,23 @@ watch(
<template> <template>
<div <div
class=" pa-2 menu-filter-dropdown bg-gray-50" class="pa-2 menu-filter-dropdown bg-gray-50"
:class="{ 'shadow-xl min-w-[430px] max-w-[630px] max-h-[max(80vh,500px)] overflow-auto': !nested, 'border-1 w-full': nested }" :class="{ 'shadow-xl min-w-[430px] max-w-[630px] max-h-[max(80vh,500px)] overflow-auto': !nested, 'border-1 w-full': nested }"
> >
<div v-if="filters && filters.length" class="nc-filter-grid mb-2" @click.stop> <div v-if="filters && filters.length" class="nc-filter-grid mb-2" @click.stop>
<template v-for="(filter, i) in filters" :key="filter.id || i"> <template v-for="(filter, i) in filters" :key="filter.id || i">
<template v-if="filter.status !== 'delete'"> <template v-if="filter.status !== 'delete'">
<template v-if="filter.is_group" > <template v-if="filter.is_group">
<MdiDeleteIcon <MdiDeleteIcon
:key="i"
v-if="!filter.readOnly" v-if="!filter.readOnly"
:key="i"
small small
class="nc-filter-item-remove-btn text-grey" class="nc-filter-item-remove-btn text-grey"
@click.stop="deleteFilter(filter, i)" @click.stop="deleteFilter(filter, i)"
/> />
<span v-else :key="i + 'dummy'"/> <span v-else :key="`${i}dummy`" />
<div class="d-flex" :key="i + 'nested'"> <div :key="`${i}nested`" class="d-flex">
<a-select <a-select
v-model:value="filter.logical_op" v-model:value="filter.logical_op"
size="small" size="small"
@ -224,7 +224,7 @@ watch(
</div> </div>
<div class="flex gap-2"> <div class="flex gap-2">
<a-button size="small" class="elevation-0 text-capitalize text-grey" @click.stop="addFilter"> <a-button size="small" class="elevation-0 text-capitalize text-grey" @click.stop="addFilter">
<div class="flex align-center gap-1"> <div class="flex align-center gap-1">
<!-- <v-icon small color="grey"> mdi-plus </v-icon> --> <!-- <v-icon small color="grey"> mdi-plus </v-icon> -->
<MdiAddIcon /> <MdiAddIcon />

4
packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue

@ -18,7 +18,7 @@ const applyChanges = () => {}
<template> <template>
<a-dropdown :trigger="['click']"> <a-dropdown :trigger="['click']">
<div :class="{ 'nc-badge nc-active-btn': filtersLength }"> <div :class="{ 'nc-badge nc-active-btn': filtersLength }">
<a-button v-t="['c:filter']" class="nc-filter-menu-btn nc-toolbar-btn" :disabled="isLocked" size="small"> <a-button v-t="['c:filter']" class="text-xs nc-filter-menu-btn nc-toolbar-btn" :disabled="isLocked" size="small">
<div class="flex align-center gap-1"> <div class="flex align-center gap-1">
<MdiFilterIcon class="text-grey" /> <MdiFilterIcon class="text-grey" />
<!-- Filter --> <!-- Filter -->
@ -28,7 +28,7 @@ const applyChanges = () => {}
</a-button> </a-button>
</div> </div>
<template #overlay> <template #overlay>
<SmartsheetToolbarColumnFilter @update:filters-length="filtersLength = $event" /> <SmartsheetToolbarColumnFilter class="nc-table-toolbar-menu" @update:filters-length="filtersLength = $event" />
</template> </template>
</a-dropdown> </a-dropdown>
</template> </template>

1
packages/nc-gui-v2/components/smartsheet-toolbar/FieldListAutoCompleteDropdown.vue

@ -96,4 +96,3 @@ const filterOption = (input: string, option: any) => {
</v-autocomplete> --> </v-autocomplete> -->
</template> </template>
<style scoped></style>

8
packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue

@ -78,7 +78,7 @@ const onMove = (event: { moved: { newIndex: number } }) => {
<template> <template>
<a-dropdown :trigger="['click']"> <a-dropdown :trigger="['click']">
<div :class="{ 'nc-badge nc-active-btn': isAnyFieldHidden }"> <div :class="{ 'nc-badge nc-active-btn': isAnyFieldHidden }">
<a-button v-t="['c:fields']" class="nc-fields-menu-btn nc-toolbar-btn text-xs" :disabled="isLocked" size="small"> <a-button v-t="['c:fields']" class="nc-fields-menu-btn nc-toolbar-btn" :disabled="isLocked" size="small">
<div class="flex align-center gap-1"> <div class="flex align-center gap-1">
<!-- <v-icon small class="mr-1" color="#777"> mdi-eye-off-outline </v-icon> --> <!-- <v-icon small class="mr-1" color="#777"> mdi-eye-off-outline </v-icon> -->
<MdiEyeIcon class="text-grey"></MdiEyeIcon> <MdiEyeIcon class="text-grey"></MdiEyeIcon>
@ -89,7 +89,7 @@ const onMove = (event: { moved: { newIndex: number } }) => {
</a-button> </a-button>
</div> </div>
<template #overlay> <template #overlay>
<div class="pt-0 min-w-[280px] bg-white shadow" @click.stop> <div class="pt-0 min-w-[280px] bg-gray-50 shadow nc-table-toolbar-menu" @click.stop>
<div class="p-1" @click.stop> <div class="p-1" @click.stop>
<a-input v-model:value="filterQuery" size="small" :placeholder="$t('placeholder.searchFields')" /> <a-input v-model:value="filterQuery" size="small" :placeholder="$t('placeholder.searchFields')" />
</div> </div>
@ -114,11 +114,11 @@ const onMove = (event: { moved: { newIndex: number } }) => {
</a-checkbox> </a-checkbox>
</div> </div>
<div class="p-2 flex gap-2" @click.stop> <div class="p-2 flex gap-2" @click.stop>
<a-button size="small" class="text-gray-500 text-xs text-capitalize" @click.stop="showAll"> <a-button size="small" class="text-xs text-gray-500 text-capitalize" @click.stop="showAll">
<!-- Show All --> <!-- Show All -->
{{ $t('general.showAll') }} {{ $t('general.showAll') }}
</a-button> </a-button>
<a-button size="small" class="text-gray-500 text-xs text-capitalize" @click.stop="hideAll"> <a-button size="small" class="text-xs text-gray-500 text-capitalize" @click.stop="hideAll">
<!-- Hide All --> <!-- Hide All -->
{{ $t('general.hideAll') }} {{ $t('general.hideAll') }}
</a-button> </a-button>

13
packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue

@ -39,7 +39,7 @@ watch(
</div> </div>
<template #overlay> <template #overlay>
<div class="bg-gray-50 shadow p-2 menu-filter-dropdown min-w-[400px]"> <div class="bg-gray-50 shadow p-2 menu-filter-dropdown min-w-[400px]">
<div class="sort-grid" @click.stop> <div v-if="sorts?.length" class="sort-grid mb-2" @click.stop>
<template v-for="(sort, i) in sorts || []" :key="i"> <template v-for="(sort, i) in sorts || []" :key="i">
<!-- <v-icon :key="`${i}icon`" class="nc-sort-item-remove-btn" small @click.stop="deleteSort(sort)"> mdi-close-box </v-icon> --> <!-- <v-icon :key="`${i}icon`" class="nc-sort-item-remove-btn" small @click.stop="deleteSort(sort)"> mdi-close-box </v-icon> -->
<MdiDeleteIcon <MdiDeleteIcon
@ -55,17 +55,14 @@ watch(
@update:model-value="saveOrUpdate(sort, i)" @update:model-value="saveOrUpdate(sort, i)"
/> />
<a-select <a-select
size="small"
v-model:value="sort.direction" v-model:value="sort.direction"
size="small"
class="flex-shrink-1 flex-grow-0 caption nc-sort-dir-select" class="flex-shrink-1 flex-grow-0 caption nc-sort-dir-select"
:items="[ :items="[
{ text: 'asc', value: 'asc' }, { text: 'asc', value: 'asc' },
{ text: 'desc', value: 'desc' }, { text: 'desc', value: 'desc' },
]" ]"
:label="$t('labels.operation')" :label="$t('labels.operation')"
density="compact"
variant="solo"
hide-details
@click.stop @click.stop
@update:model-value="saveOrUpdate(sort, i)" @update:model-value="saveOrUpdate(sort, i)"
/> />
@ -75,7 +72,7 @@ watch(
<!-- </v-select> --> <!-- </v-select> -->
</template> </template>
</div> </div>
<a-button size="small" class="text-grey text-capitalize text-sm my-3" @click.stop="addSort"> <a-button size="small" class="text-xs text-grey text-capitalize " @click.stop="addSort">
<div class="flex gap-1 align-center"> <div class="flex gap-1 align-center">
<MdiAddIcon /> <MdiAddIcon />
<!-- Add Sort Option --> <!-- Add Sort Option -->
@ -94,4 +91,8 @@ watch(
column-gap: 6px; column-gap: 6px;
row-gap: 6px; row-gap: 6px;
} }
:deep(.ant-btn, .ant-select, .ant-input, ::placeholder) {
@apply "!text-xs";
}
</style> </style>

17
packages/nc-gui-v2/components/smartsheet/Toolbar.vue

@ -13,11 +13,26 @@
<SmartsheetToolbarMoreActions /> <SmartsheetToolbarMoreActions />
<div class="flex-1" /> <div class="flex-1" />
<!-- <SmartsheetToolbarLockMenu />
<div class="dot" />
<SmartsheetToolbarReload />
<div class="dot" />
<SmartsheetToolbarAddRow />
<div class="dot" />
<SmartsheetToolbarDeleteTable />
<div class="dot" />
<SmartsheetToolbarToggleDrawer class="mr-2" />
-->
</div> </div>
</template> </template>
<style scoped> <style scoped>
:deep(.nc-toolbar-btn) { :deep(.nc-toolbar-btn) {
@apply border-0 !text-xs font-semibold px-2; @apply border-0 !text-xs font-semibold px-2;
} }/*
.dot {
@apply w-[3px] h-[3px] bg-gray-300 mx-1 rounded-full;
}*/
</style> </style>

Loading…
Cancel
Save