fix : fixed dropdown ui in invite-user

12 months ago · 23fdfbbc72
10 changed files with 88 additions and 27 deletions
--- a/packages/nc-gui/assets/style.scss
+++ b/packages/nc-gui/assets/style.scss
@ -207,7 +207,7 @@ main {
 }

 a {
-  @apply !text-primary !underline hover:!text-accent;
+  @apply !text-primary !underline hover: !text-accent;
 }

 .nc-icon {
@ -429,6 +429,7 @@ a {
  &.ant-dropdown-menu-submenu-popup {
    @apply border-1 border-gray-200;
  }
+
  .ant-dropdown-menu,
  .ant-menu {
    @apply m-0 p-0;
@ -481,6 +482,7 @@ a {
 .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;
 }
+
 .nc-toolbar-btn[disabled] {
  @apply !text-gray-400 !cursor-not-allowed !hover:ring-0;
 }
@ -505,8 +507,8 @@ a {
  @apply bg-gray-300 bg-opacity-20;
 }

-/* Hide the element with id selected-item-icon inside NcSelect */
-.ant-select-selection-item #selected-item-icon {
+/* Hide the element with id nc-selected-item-icon */
+.ant-select-selection-item #nc-selected-item-icon {
  display: none;
 }

@ -553,9 +555,11 @@ a {
  0% {
    opacity: 0.2;
  }
+
  50% {
    opacity: 1;
  }
+
  100% {
    opacity: 0.2;
  }
@ -638,7 +642,7 @@ input[type='number'] {
 }

 .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 {
--- a/packages/nc-gui/components/account/UserList.vue
+++ b/packages/nc-gui/components/account/UserList.vue
@ -215,6 +215,7 @@ const openDeleteModal = (user: UserType) => {
                v-model:value="el.roles"
                class="w-55 nc-user-roles"
                :dropdown-match-select-width="false"
+                dropdown-class-name="max-w-64"
                @change="updateRole(el.id, el.roles as string)"
              >
                <a-select-option
@ -222,7 +223,15 @@ const openDeleteModal = (user: UserType) => {
                  :value="OrgUserRoles.CREATOR"
                  :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">
                    {{ $t('msg.info.roles.orgCreator') }}
                  </span>
@ -233,7 +242,15 @@ const openDeleteModal = (user: UserType) => {
                  :value="OrgUserRoles.VIEWER"
                  :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">
                    {{ $t('msg.info.roles.orgViewer') }}
                  </span>
--- a/packages/nc-gui/components/account/UsersModal.vue
+++ b/packages/nc-gui/components/account/UsersModal.vue
@ -193,13 +193,22 @@ const emailInput: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
                  <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>

-                    <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
                        class="nc-role-option"
                        :value="OrgUserRoles.CREATOR"
                        :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">
                          {{ $t('msg.info.roles.orgCreator') }}
                        </span>
@ -210,7 +219,15 @@ const emailInput: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
                        :value="OrgUserRoles.VIEWER"
                        :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">
                          {{ $t('msg.info.roles.orgViewer') }}
                        </span>
--- a/packages/nc-gui/components/nc/SelectOption.vue
+++ b/packages/nc-gui/components/nc/SelectOption.vue
@ -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>
+
+
--- a/packages/nc-gui/components/smartsheet/grid/Table.vue
+++ b/packages/nc-gui/components/smartsheet/grid/Table.vue
@ -1247,10 +1247,10 @@ onKeyStroke('ArrowDown', onDown)
      <div
        v-if="draggedCol"
        :style="{
-                'min-width': gridViewCols[draggedCol.id!]?.width || '200px',
-                'max-width': gridViewCols[draggedCol.id!]?.width || '200px',
-                'width': gridViewCols[draggedCol.id!]?.width || '200px',
-              }"
+        'min-width': gridViewCols[draggedCol.id!]?.width || '200px',
+        'max-width': gridViewCols[draggedCol.id!]?.width || '200px',
+        'width': gridViewCols[draggedCol.id!]?.width || '200px',
+      }"
        class="border-r-1 border-l-1 border-gray-200 h-full"
      ></div>
    </div>
@ -1821,9 +1821,8 @@ onKeyStroke('ArrowDown', onDown)
                        <component :is="viewIcons[ViewTypes.GRID]?.icon" class="nc-view-icon text-inherit" />
                        {{ $t('activity.newRecord') }} - {{ $t('objects.viewType.grid') }}
                      </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" />
-                      </div>
+
+                      <GeneralIcon v-if="isAddNewRecordGridMode" icon="check" class="w-4 h-4 text-primary" />
                    </div>
                    <div class="flex flex-row text-xs text-gray-400 ml-7.25">{{ $t('labels.addRowGrid') }}</div>
                  </div>
@ -1837,9 +1836,8 @@ onKeyStroke('ArrowDown', onDown)
                        <GeneralIcon class="h-4.5 w-4.5" icon="article" />
                        {{ $t('activity.newRecord') }} - {{ $t('objects.viewType.form') }}
                      </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" />
-                      </div>
+
+                      <GeneralIcon v-if="!isAddNewRecordGridMode" icon="check" class="w-4 h-4 text-primary" />
                    </div>
                    <div class="flex flex-row text-xs text-gray-400 ml-7.05">{{ $t('labels.addRowForm') }}</div>
                  </div>
@ -1879,6 +1877,7 @@ onKeyStroke('ArrowDown', onDown)
  .nc-grid-add-edit-column {
    @apply bg-gray-50;
  }
+
  .nc-grid-add-new-cell:hover td {
    @apply text-black !bg-gray-50;
  }
@ -1999,6 +1998,7 @@ onKeyStroke('ArrowDown', onDown)
    thead th:nth-child(2) {
      @apply border-r-1 !border-r-gray-50;
    }
+
    tbody td:nth-child(2) {
      @apply border-r-1 !border-r-gray-50;
    }
--- a/packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue
@ -357,7 +357,7 @@ onBeforeUnmount(() => {
                        <component
                          :is="iconMap.check"
                          v-if="filter.logical_op === op.value"
-                          id="selected-item-icon"
+                          id="nc-selected-item-icon"
                          class="text-primary w-4 h-4"
                        />
                      </div>
@ -411,7 +411,7 @@ onBeforeUnmount(() => {
                  <component
                    :is="iconMap.check"
                    v-if="filter.logical_op === op.value"
-                    id="selected-item-icon"
+                    id="nc-selected-item-icon"
                    class="text-primary w-4 h-4"
                  />
                </div>
@ -446,7 +446,7 @@ onBeforeUnmount(() => {
                    <component
                      :is="iconMap.check"
                      v-if="filter.comparison_op === compOp.value"
-                      id="selected-item-icon"
+                      id="nc-selected-item-icon"
                      class="text-primary w-4 h-4"
                    />
                  </div>
@ -480,7 +480,7 @@ onBeforeUnmount(() => {
                    <component
                      :is="iconMap.check"
                      v-if="filter.comparison_sub_op === compSubOp.value"
-                      id="selected-item-icon"
+                      id="nc-selected-item-icon"
                      class="text-primary w-4 h-4"
                    />
                  </div>
--- a/packages/nc-gui/components/smartsheet/toolbar/FieldListAutoCompleteDropdown.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/FieldListAutoCompleteDropdown.vue
@ -94,7 +94,7 @@ if (!localValue.value && allowEmpty !== true) {
            </span>
          </NcTooltip>
        </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>
    </a-select-option>
  </NcSelect>
--- a/packages/nc-gui/components/smartsheet/toolbar/GroupByMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/GroupByMenu.vue
@ -253,7 +253,7 @@ watch(meta, async () => {
                  <component
                    :is="iconMap.check"
                    v-if="group.sort === option.value"
-                    id="selected-item-icon"
+                    id="nc-selected-item-icon"
                    class="text-primary w-4 h-4"
                  />
                </div>
--- a/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue
@ -121,7 +121,7 @@ watch(columns, () => {
            <component
              :is="iconMap.check"
              v-if="search.field === op.value"
-              id="selected-item-icon"
+              id="nc-selected-item-icon"
              class="text-primary w-4 h-4"
            />
          </div>
--- a/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
@ -164,7 +164,7 @@ onMounted(() => {
                  <component
                    :is="iconMap.check"
                    v-if="sort.direction === option.value"
-                    id="selected-item-icon"
+                    id="nc-selected-item-icon"
                    class="text-primary w-4 h-4"
                  />
                </div>