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>
<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 }"
>
<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-if="filter.status !== 'delete'">
<template v-if="filter.is_group" >
<template v-if="filter.is_group">
<MdiDeleteIcon
:key="i"
v-if="!filter.readOnly"
:key="i"
small
class="nc-filter-item-remove-btn text-grey"
@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
v-model:value="filter.logical_op"
size="small"
@ -224,7 +224,7 @@ watch(
</div>
<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">
<!-- <v-icon small color="grey"> mdi-plus </v-icon> -->
<MdiAddIcon />

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

@ -18,7 +18,7 @@ const applyChanges = () => {}
<template>
<a-dropdown :trigger="['click']">
<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">
<MdiFilterIcon class="text-grey" />
<!-- Filter -->
@ -28,7 +28,7 @@ const applyChanges = () => {}
</a-button>
</div>
<template #overlay>
<SmartsheetToolbarColumnFilter @update:filters-length="filtersLength = $event" />
<SmartsheetToolbarColumnFilter class="nc-table-toolbar-menu" @update:filters-length="filtersLength = $event" />
</template>
</a-dropdown>
</template>

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

@ -96,4 +96,3 @@ const filterOption = (input: string, option: any) => {
</v-autocomplete> -->
</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>
<a-dropdown :trigger="['click']">
<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">
<!-- <v-icon small class="mr-1" color="#777"> mdi-eye-off-outline </v-icon> -->
<MdiEyeIcon class="text-grey"></MdiEyeIcon>
@ -89,7 +89,7 @@ const onMove = (event: { moved: { newIndex: number } }) => {
</a-button>
</div>
<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>
<a-input v-model:value="filterQuery" size="small" :placeholder="$t('placeholder.searchFields')" />
</div>
@ -114,11 +114,11 @@ const onMove = (event: { moved: { newIndex: number } }) => {
</a-checkbox>
</div>
<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 -->
{{ $t('general.showAll') }}
</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 -->
{{ $t('general.hideAll') }}
</a-button>

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

@ -39,7 +39,7 @@ watch(
</div>
<template #overlay>
<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">
<!-- <v-icon :key="`${i}icon`" class="nc-sort-item-remove-btn" small @click.stop="deleteSort(sort)"> mdi-close-box </v-icon> -->
<MdiDeleteIcon
@ -55,17 +55,14 @@ watch(
@update:model-value="saveOrUpdate(sort, i)"
/>
<a-select
size="small"
v-model:value="sort.direction"
size="small"
class="flex-shrink-1 flex-grow-0 caption nc-sort-dir-select"
:items="[
{ text: 'asc', value: 'asc' },
{ text: 'desc', value: 'desc' },
]"
:label="$t('labels.operation')"
density="compact"
variant="solo"
hide-details
@click.stop
@update:model-value="saveOrUpdate(sort, i)"
/>
@ -75,7 +72,7 @@ watch(
<!-- </v-select> -->
</template>
</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">
<MdiAddIcon />
<!-- Add Sort Option -->
@ -94,4 +91,8 @@ watch(
column-gap: 6px;
row-gap: 6px;
}
:deep(.ant-btn, .ant-select, .ant-input, ::placeholder) {
@apply "!text-xs";
}
</style>

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

@ -13,11 +13,26 @@
<SmartsheetToolbarMoreActions />
<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>
</template>
<style scoped>
:deep(.nc-toolbar-btn) {
@apply border-0 !text-xs font-semibold px-2;
}
}/*
.dot {
@apply w-[3px] h-[3px] bg-gray-300 mx-1 rounded-full;
}*/
</style>

Loading…
Cancel
Save