Browse Source

fix: acces dropdown issues

pull/6441/head
sreehari jayaraj 1 year ago
parent
commit
9f1a4d334f
  1. 2
      packages/nc-gui/components/nc/Badge.vue
  2. 9
      packages/nc-gui/components/roles/Badge.vue
  3. 8
      packages/nc-gui/components/roles/Selector.vue
  4. 16
      packages/nc-gui/components/workspace/CollaboratorsList.vue
  5. 17
      packages/nc-gui/components/workspace/InviteSection.vue

2
packages/nc-gui/components/nc/Badge.vue

@ -12,7 +12,7 @@ const props = withDefaults(
<template>
<div
class="h-6 rounded-md px-1"
class="rounded-md px-1"
:class="{
'border-purple-500 bg-purple-100': props.color === 'purple',
'border-blue-500 bg-blue-100': props.color === 'blue',

9
packages/nc-gui/components/roles/Badge.vue

@ -18,8 +18,6 @@ const props = withDefaults(
const roleRef = toRef(props, 'role')
const clickableRef = toRef(props, 'clickable')
// const inheritRef = toRef(props, 'inherit')
const borderRef = toRef(props, 'border')
const roleProperties = computed(() => {
const role = roleRef.value
@ -38,15 +36,14 @@ const roleProperties = computed(() => {
<template>
<div
class="flex items-center !border-0"
class="flex items-center"
:class="{
'cursor-pointer': clickableRef,
}"
style="width: fit-content"
>
<NcBadge class="!h-auto !px-[8px]" :color="roleProperties.color" :border="borderRef">
<NcBadge class="!px-2" :color="roleProperties.color" :border="borderRef">
<div
class="badge-text flex items-center gap-[4px]"
class="badge-text flex items-center gap-2 !h-7"
:class="{
'text-purple-500': roleProperties.color === 'purple',
'text-blue-500': roleProperties.color === 'blue',

8
packages/nc-gui/components/roles/Selector.vue

@ -23,13 +23,13 @@ const descriptionRef = toRef(props, 'description')
<template>
<NcDropdown>
<RolesBadge class="border-1" data-testid="roles" :role="roleRef" :inherit="inheritRef === role" clickable />
<RolesBadge data-testid="roles" :role="roleRef" :inherit="inheritRef === role" clickable />
<template #overlay>
<div class="nc-role-select-dropdown flex flex-col gap-[4px] p-1">
<div class="flex flex-col gap-[4px]">
<div class="nc-role-select-dropdown flex flex-col gap-1 p-2">
<div class="flex flex-col gap-1">
<div v-for="rl in props.roles" :key="rl" :value="rl" :selected="rl === roleRef" @click="props.onRoleChange(rl)">
<div
class="flex flex-col py-[3px] px-[8px] gap-[4px] bg-transparent cursor-pointer"
class="flex flex-col py-1.5 rounded-lg px-2 gap-1 bg-transparent cursor-pointer hover:bg-gray-100"
:class="{
'w-[350px]': descriptionRef,
'w-[200px]': !descriptionRef,

16
packages/nc-gui/components/workspace/CollaboratorsList.vue

@ -98,21 +98,19 @@ onMounted(async () => {
</td>
<td class="w-1/5">
<div class="-left-2.5 top-5">
<a-dropdown v-if="collab.roles !== WorkspaceUserRoles.OWNER" :trigger="['click']">
<NcDropdown v-if="collab.roles !== WorkspaceUserRoles.OWNER" :trigger="['click']">
<MdiDotsVertical
class="h-5.5 w-5.5 rounded outline-0 p-0.5 nc-workspace-menu transform transition-transform !text-gray-400 cursor-pointer hover:(!text-gray-500 bg-gray-100)"
class="border-1 !text-gray-600 h-5.5 w-5.5 rounded outline-0 p-0.5 nc-workspace-menu transform transition-transform !text-gray-400 cursor-pointer hover:(!text-gray-500 bg-gray-100)"
/>
<template #overlay>
<a-menu>
<a-menu-item @click="removeCollaborator(collab.id)">
<div class="flex flex-row items-center py-2 text-s gap-1.5 text-red-500 cursor-pointer">
<NcMenu>
<NcMenuItem class="!text-red-500 !hover:bg-red-50" @click="removeCollaborator(collab.id)">
<MaterialSymbolsDeleteOutlineRounded />
Remove user
</div>
</a-menu-item>
</a-menu>
</NcMenuItem>
</NcMenu>
</template>
</a-dropdown>
</NcDropdown>
</div>
</td>
<td class="w-1/5 padding"></td>

17
packages/nc-gui/components/workspace/InviteSection.vue

@ -212,20 +212,19 @@ const onPaste = (e: ClipboardEvent) => {
</div>
<span v-if="emailValidation.isError" class="ml-2 text-red-500 text-[10px] mt-1.5">{{ emailValidation.message }}</span>
</div>
<NcSelect v-model:value="inviteData.roles" class="min-w-30 !rounded px-1" data-testid="roles">
<template v-for="role of allowedRoles" :key="`role-option-${role}`">
<a-select-option v-if="role" :value="role">
<NcBadge :color="RoleColors[role]">
<p class="badge-text">{{ RoleLabels[role] }}</p>
</NcBadge>
</a-select-option>
</template>
</NcSelect>
<RolesSelector
class="px-1"
:role="inviteData.roles"
:roles="allowedRoles"
:on-role-change="(role: WorkspaceUserRoles) => (inviteData.roles = role)"
:description="true"
/>
<NcButton
type="primary"
:disabled="!emailBadges.length || isInvitingCollaborators || emailValidation.isError"
size="small"
class="mt-0.5"
:loading="isInvitingCollaborators"
@click="inviteCollaborator"
>

Loading…
Cancel
Save