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

fix : fixed dropdown ui in invite-user

pull/7181/head
musharaf-nocodb 12 months ago
parent
d20faca86d
commit
23fdfbbc72
10 changed files with 88 additions and 27 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. 12
      packages/nc-gui/assets/style.scss
  2. 21
      packages/nc-gui/components/account/UserList.vue
  3. 23
      packages/nc-gui/components/account/UsersModal.vue
  4. 23
      packages/nc-gui/components/nc/SelectOption.vue
  5. 20
      packages/nc-gui/components/smartsheet/grid/Table.vue
  6. 8
      packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue
  7. 2
      packages/nc-gui/components/smartsheet/toolbar/FieldListAutoCompleteDropdown.vue
  8. 2
      packages/nc-gui/components/smartsheet/toolbar/GroupByMenu.vue
  9. 2
      packages/nc-gui/components/smartsheet/toolbar/SearchData.vue
  10. 2
      packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue

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

@ -207,7 +207,7 @@ main {
} }
a { a {
@apply !text-primary !underline hover:!text-accent; @apply !text-primary !underline hover: !text-accent;
} }
.nc-icon { .nc-icon {
@ -429,6 +429,7 @@ a {
&.ant-dropdown-menu-submenu-popup { &.ant-dropdown-menu-submenu-popup {
@apply border-1 border-gray-200; @apply border-1 border-gray-200;
} }
.ant-dropdown-menu, .ant-dropdown-menu,
.ant-menu { .ant-menu {
@apply m-0 p-0; @apply m-0 p-0;
@ -481,6 +482,7 @@ a {
.nc-toolbar-btn { .nc-toolbar-btn {
@apply !shadow-none rounded hover:(ring-1 ring-gray-200 ring-opacity-100 bg-gray-100 !text-gray-800) focus:(ring-1 ring-gray-300 ring-opacity-100 !text-gray-800 bg-gray-100) text-gray-600 text-xs font-medium px-2 border-0; @apply !shadow-none rounded hover:(ring-1 ring-gray-200 ring-opacity-100 bg-gray-100 !text-gray-800) focus:(ring-1 ring-gray-300 ring-opacity-100 !text-gray-800 bg-gray-100) text-gray-600 text-xs font-medium px-2 border-0;
} }
.nc-toolbar-btn[disabled] { .nc-toolbar-btn[disabled] {
@apply !text-gray-400 !cursor-not-allowed !hover:ring-0; @apply !text-gray-400 !cursor-not-allowed !hover:ring-0;
} }
@ -505,8 +507,8 @@ a {
@apply bg-gray-300 bg-opacity-20; @apply bg-gray-300 bg-opacity-20;
} }
/* Hide the element with id selected-item-icon inside NcSelect */ /* Hide the element with id nc-selected-item-icon */
.ant-select-selection-item #selected-item-icon { .ant-select-selection-item #nc-selected-item-icon {
display: none; display: none;
} }
@ -553,9 +555,11 @@ a {
0% { 0% {
opacity: 0.2; opacity: 0.2;
} }
50% { 50% {
opacity: 1; opacity: 1;
} }
100% { 100% {
opacity: 0.2; opacity: 0.2;
} }
@ -638,7 +642,7 @@ input[type='number'] {
} }
.ant-pagination .ant-pagination-next { .ant-pagination .ant-pagination-next {
@apply !border-1 !rounded-md !border-gray-200 scale-95; @apply !border-1 !rounded-md !border-gray-200 scale-95;
} }
.ant-pagination .ant-pagination-item-active { .ant-pagination .ant-pagination-item-active {

21
packages/nc-gui/components/account/UserList.vue
Unescape View File

@ -215,6 +215,7 @@ const openDeleteModal = (user: UserType) => {
v-model:value="el.roles" v-model:value="el.roles"
class="w-55 nc-user-roles" class="w-55 nc-user-roles"
:dropdown-match-select-width="false" :dropdown-match-select-width="false"
dropdown-class-name="max-w-64"
@change="updateRole(el.id, el.roles as string)" @change="updateRole(el.id, el.roles as string)"
> >
<a-select-option <a-select-option
@ -222,7 +223,15 @@ const openDeleteModal = (user: UserType) => {
:value="OrgUserRoles.CREATOR" :value="OrgUserRoles.CREATOR"
:label="$t(`objects.roleType.orgLevelCreator`)" :label="$t(`objects.roleType.orgLevelCreator`)"
> >
<div data-rec="true">{{ $t(`objects.roleType.orgLevelCreator`) }}</div> <div class="flex items-center gap-1 justify-between">
<div data-rec="true">{{ $t(`objects.roleType.orgLevelCreator`) }}</div>
<GeneralIcon
v-if="el?.roles === OrgUserRoles.CREATOR"
icon="check"
class="w-4 h-4 text-primary"
id="nc-selected-item-icon"
/>
</div>
<span class="text-gray-500 text-xs whitespace-normal" data-rec="true"> <span class="text-gray-500 text-xs whitespace-normal" data-rec="true">
{{ $t('msg.info.roles.orgCreator') }} {{ $t('msg.info.roles.orgCreator') }}
</span> </span>
@ -233,7 +242,15 @@ const openDeleteModal = (user: UserType) => {
:value="OrgUserRoles.VIEWER" :value="OrgUserRoles.VIEWER"
:label="$t(`objects.roleType.orgLevelViewer`)" :label="$t(`objects.roleType.orgLevelViewer`)"
> >
<div data-rec="true">{{ $t(`objects.roleType.orgLevelViewer`) }}</div> <div class="flex items-center gap-1 justify-between">
<div data-rec="true">{{ $t(`objects.roleType.orgLevelViewer`) }}</div>
<GeneralIcon
v-if="el.roles === OrgUserRoles.VIEWER"
icon="check"
class="w-4 h-4 text-primary"
id="nc-selected-item-icon"
/>
</div>
<span class="text-gray-500 text-xs whitespace-normal" data-rec="true"> <span class="text-gray-500 text-xs whitespace-normal" data-rec="true">
{{ $t('msg.info.roles.orgViewer') }} {{ $t('msg.info.roles.orgViewer') }}
</span> </span>

23
packages/nc-gui/components/account/UsersModal.vue
Unescape View File

@ -193,13 +193,22 @@ const emailInput: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
<a-form-item name="role" :rules="[{ required: true, message: $t('msg.roleRequired') }]"> <a-form-item name="role" :rules="[{ required: true, message: $t('msg.roleRequired') }]">
<div class="ml-1 mb-1 text-xs text-gray-500">{{ $t('labels.selectUserRole') }}</div> <div class="ml-1 mb-1 text-xs text-gray-500">{{ $t('labels.selectUserRole') }}</div>
<a-select v-model:value="usersData.role" class="nc-user-roles" dropdown-class-name="nc-dropdown-user-role"> <a-select v-model:value="usersData.role" class="nc-user-roles" dropdown-class-name="nc-dropdown-user-role !px-2">
<a-select-option <a-select-option
class="nc-role-option" class="nc-role-option"
:value="OrgUserRoles.CREATOR" :value="OrgUserRoles.CREATOR"
:label="$t(`objects.roleType.orgLevelCreator`)" :label="$t(`objects.roleType.orgLevelCreator`)"
> >
<div data-rec="true">{{ $t(`objects.roleType.orgLevelCreator`) }}</div> <div class="flex items-center gap-1 justify-between">
<div data-rec="true">{{ $t(`objects.roleType.orgLevelCreator`) }}</div>
<GeneralIcon
v-if="usersData.role === OrgUserRoles.CREATOR"
icon="check"
class="w-4 h-4 text-primary"
id="nc-selected-item-icon"
/>
</div>
<span class="text-gray-500 text-xs whitespace-normal" data-rec="true"> <span class="text-gray-500 text-xs whitespace-normal" data-rec="true">
{{ $t('msg.info.roles.orgCreator') }} {{ $t('msg.info.roles.orgCreator') }}
</span> </span>
@ -210,7 +219,15 @@ const emailInput: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
:value="OrgUserRoles.VIEWER" :value="OrgUserRoles.VIEWER"
:label="$t(`objects.roleType.orgLevelViewer`)" :label="$t(`objects.roleType.orgLevelViewer`)"
> >
<div data-rec="true">{{ $t(`objects.roleType.orgLevelViewer`) }}</div> <div class="flex items-center gap-1 justify-between">
<div data-rec="true">{{ $t(`objects.roleType.orgLevelViewer`) }}</div>
<GeneralIcon
v-if="usersData.role === OrgUserRoles.VIEWER"
icon="check"
class="w-4 h-4 text-primary"
id="nc-selected-item-icon"
/>
</div>
<span class="text-gray-500 text-xs whitespace-normal" data-rec="true"> <span class="text-gray-500 text-xs whitespace-normal" data-rec="true">
{{ $t('msg.info.roles.orgViewer') }} {{ $t('msg.info.roles.orgViewer') }}
</span> </span>

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

@ -0,0 +1,23 @@
<template>
<a-select-option :value="value">
<div class="flex items-center w-full justify-between w-full gap-2">
<div class="truncate flex-1">
<slot />
</div>
<component v-if="isSelected" id="nc-selected-item-icon" class="text-primary w-6 h-6" :is="iconMap.check" />
</div>
</a-select-option>
</template>
<script lang="ts" setup>
interface Props {
isSelected?: boolean
value?: string
}
const props = defineProps<Props>()
const isSelected = computed(() => props.isSelected)
const value = computed(() => props.value)
console.log(props.isSelected, isSelected)
</script>

20
packages/nc-gui/components/smartsheet/grid/Table.vue
Unescape View File

@ -1247,10 +1247,10 @@ onKeyStroke('ArrowDown', onDown)
<div <div
v-if="draggedCol" v-if="draggedCol"
:style="{ :style="{
'min-width': gridViewCols[draggedCol.id!]?.width || '200px', 'min-width': gridViewCols[draggedCol.id!]?.width || '200px',
'max-width': gridViewCols[draggedCol.id!]?.width || '200px', 'max-width': gridViewCols[draggedCol.id!]?.width || '200px',
'width': gridViewCols[draggedCol.id!]?.width || '200px', 'width': gridViewCols[draggedCol.id!]?.width || '200px',
}" }"
class="border-r-1 border-l-1 border-gray-200 h-full" class="border-r-1 border-l-1 border-gray-200 h-full"
></div> ></div>
</div> </div>
@ -1821,9 +1821,8 @@ onKeyStroke('ArrowDown', onDown)
<component :is="viewIcons[ViewTypes.GRID]?.icon" class="nc-view-icon text-inherit" /> <component :is="viewIcons[ViewTypes.GRID]?.icon" class="nc-view-icon text-inherit" />
{{ $t('activity.newRecord') }} - {{ $t('objects.viewType.grid') }} {{ $t('activity.newRecord') }} - {{ $t('objects.viewType.grid') }}
</div> </div>
<div class="h-4 w-4 flex flex-row items-center justify-center">
<GeneralIcon v-if="isAddNewRecordGridMode" icon="check" class="w-4 h-4 text-primary" /> <GeneralIcon v-if="isAddNewRecordGridMode" icon="check" class="w-4 h-4 text-primary" />
</div>
</div> </div>
<div class="flex flex-row text-xs text-gray-400 ml-7.25">{{ $t('labels.addRowGrid') }}</div> <div class="flex flex-row text-xs text-gray-400 ml-7.25">{{ $t('labels.addRowGrid') }}</div>
</div> </div>
@ -1837,9 +1836,8 @@ onKeyStroke('ArrowDown', onDown)
<GeneralIcon class="h-4.5 w-4.5" icon="article" /> <GeneralIcon class="h-4.5 w-4.5" icon="article" />
{{ $t('activity.newRecord') }} - {{ $t('objects.viewType.form') }} {{ $t('activity.newRecord') }} - {{ $t('objects.viewType.form') }}
</div> </div>
<div class="h-4 w-4 flex flex-row items-center justify-center">
<GeneralIcon v-if="!isAddNewRecordGridMode" icon="check" class="w-4 h-4 text-primary" /> <GeneralIcon v-if="!isAddNewRecordGridMode" icon="check" class="w-4 h-4 text-primary" />
</div>
</div> </div>
<div class="flex flex-row text-xs text-gray-400 ml-7.05">{{ $t('labels.addRowForm') }}</div> <div class="flex flex-row text-xs text-gray-400 ml-7.05">{{ $t('labels.addRowForm') }}</div>
</div> </div>
@ -1879,6 +1877,7 @@ onKeyStroke('ArrowDown', onDown)
.nc-grid-add-edit-column { .nc-grid-add-edit-column {
@apply bg-gray-50; @apply bg-gray-50;
} }
.nc-grid-add-new-cell:hover td { .nc-grid-add-new-cell:hover td {
@apply text-black !bg-gray-50; @apply text-black !bg-gray-50;
} }
@ -1999,6 +1998,7 @@ onKeyStroke('ArrowDown', onDown)
thead th:nth-child(2) { thead th:nth-child(2) {
@apply border-r-1 !border-r-gray-50; @apply border-r-1 !border-r-gray-50;
} }
tbody td:nth-child(2) { tbody td:nth-child(2) {
@apply border-r-1 !border-r-gray-50; @apply border-r-1 !border-r-gray-50;
} }

8
packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue
Unescape View File

@ -357,7 +357,7 @@ onBeforeUnmount(() => {
<component <component
:is="iconMap.check" :is="iconMap.check"
v-if="filter.logical_op === op.value" v-if="filter.logical_op === op.value"
id="selected-item-icon" id="nc-selected-item-icon"
class="text-primary w-4 h-4" class="text-primary w-4 h-4"
/> />
</div> </div>
@ -411,7 +411,7 @@ onBeforeUnmount(() => {
<component <component
:is="iconMap.check" :is="iconMap.check"
v-if="filter.logical_op === op.value" v-if="filter.logical_op === op.value"
id="selected-item-icon" id="nc-selected-item-icon"
class="text-primary w-4 h-4" class="text-primary w-4 h-4"
/> />
</div> </div>
@ -446,7 +446,7 @@ onBeforeUnmount(() => {
<component <component
:is="iconMap.check" :is="iconMap.check"
v-if="filter.comparison_op === compOp.value" v-if="filter.comparison_op === compOp.value"
id="selected-item-icon" id="nc-selected-item-icon"
class="text-primary w-4 h-4" class="text-primary w-4 h-4"
/> />
</div> </div>
@ -480,7 +480,7 @@ onBeforeUnmount(() => {
<component <component
:is="iconMap.check" :is="iconMap.check"
v-if="filter.comparison_sub_op === compSubOp.value" v-if="filter.comparison_sub_op === compSubOp.value"
id="selected-item-icon" id="nc-selected-item-icon"
class="text-primary w-4 h-4" class="text-primary w-4 h-4"
/> />
</div> </div>

2
packages/nc-gui/components/smartsheet/toolbar/FieldListAutoCompleteDropdown.vue
Unescape View File

@ -94,7 +94,7 @@ if (!localValue.value && allowEmpty !== true) {
</span> </span>
</NcTooltip> </NcTooltip>
</div> </div>
<component :is="iconMap.check" v-if="localValue === option.value" id="selected-item-icon" class="text-primary w-4 h-4" /> <component :is="iconMap.check" v-if="localValue === option.value" id="nc-selected-item-icon" class="text-primary w-4 h-4" />
</div> </div>
</a-select-option> </a-select-option>
</NcSelect> </NcSelect>

2
packages/nc-gui/components/smartsheet/toolbar/GroupByMenu.vue
Unescape View File

@ -253,7 +253,7 @@ watch(meta, async () => {
<component <component
:is="iconMap.check" :is="iconMap.check"
v-if="group.sort === option.value" v-if="group.sort === option.value"
id="selected-item-icon" id="nc-selected-item-icon"
class="text-primary w-4 h-4" class="text-primary w-4 h-4"
/> />
</div> </div>

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

@ -121,7 +121,7 @@ watch(columns, () => {
<component <component
:is="iconMap.check" :is="iconMap.check"
v-if="search.field === op.value" v-if="search.field === op.value"
id="selected-item-icon" id="nc-selected-item-icon"
class="text-primary w-4 h-4" class="text-primary w-4 h-4"
/> />
</div> </div>

2
packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
Unescape View File

@ -164,7 +164,7 @@ onMounted(() => {
<component <component
:is="iconMap.check" :is="iconMap.check"
v-if="sort.direction === option.value" v-if="sort.direction === option.value"
id="selected-item-icon" id="nc-selected-item-icon"
class="text-primary w-4 h-4" class="text-primary w-4 h-4"
/> />
</div> </div>

Write Preview
Loading…
Cancel
Save