Browse Source

fix: badge and selector design

pull/6378/head
mertmit 1 year ago
parent
commit
bd5bcb0b48
  1. 15
      packages/nc-gui/components/nc/Badge.vue
  2. 1
      packages/nc-gui/components/project/AccessSettings.vue
  3. 2
      packages/nc-gui/components/project/InviteProjectCollabSection.vue
  4. 63
      packages/nc-gui/components/roles/Badge.vue
  5. 38
      packages/nc-gui/components/roles/Selector.vue
  6. 1
      packages/nc-gui/components/workspace/CollaboratorsList.vue
  7. 2
      packages/nc-gui/components/workspace/InviteSection.vue

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

@ -1,12 +1,18 @@
<script lang="ts" setup> <script lang="ts" setup>
const props = defineProps<{ const props = withDefaults(
color: string defineProps<{
}>() color: string
border?: boolean
}>(),
{
border: true,
},
)
</script> </script>
<template> <template>
<div <div
class="border-1 h-6 rounded-md px-1" class="h-6 rounded-md px-1"
:class="{ :class="{
'border-purple-500 bg-purple-100': props.color === 'purple', 'border-purple-500 bg-purple-100': props.color === 'purple',
'border-blue-500 bg-blue-100': props.color === 'blue', 'border-blue-500 bg-blue-100': props.color === 'blue',
@ -15,6 +21,7 @@ const props = defineProps<{
'border-yellow-500 bg-yellow-100': props.color === 'yellow', 'border-yellow-500 bg-yellow-100': props.color === 'yellow',
'border-red-500 bg-red-100': props.color === 'red', 'border-red-500 bg-red-100': props.color === 'red',
'border-gray-300': !props.color, 'border-gray-300': !props.color,
'border-1': props.border,
}" }"
> >
<slot /> <slot />

1
packages/nc-gui/components/project/AccessSettings.vue

@ -213,6 +213,7 @@ onMounted(async () => {
? WorkspaceRolesToProjectRoles[collab.workspace_roles] ? WorkspaceRolesToProjectRoles[collab.workspace_roles]
: null : null
" "
:description="false"
:on-role-change="(role: ProjectRoles) => updateCollaborator(collab, role)" :on-role-change="(role: ProjectRoles) => updateCollaborator(collab, role)"
/> />
</template> </template>

2
packages/nc-gui/components/project/InviteProjectCollabSection.vue

@ -122,7 +122,7 @@ const copyUrl = async () => {
:role="inviteData.roles" :role="inviteData.roles"
:roles="ProjectRoles" :roles="ProjectRoles"
:on-role-change="(role: ProjectRoles) => (inviteData.roles = role)" :on-role-change="(role: ProjectRoles) => (inviteData.roles = role)"
:description="false" :description="true"
/> />
<a-button <a-button

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

@ -1,25 +1,25 @@
<script lang="ts" setup> <script lang="ts" setup>
import { RoleColors, RoleDescriptions, RoleIcons, RoleLabels } from 'nocodb-sdk' import { RoleColors, RoleIcons, RoleLabels } from 'nocodb-sdk'
import { toRef } from '#imports' import { toRef } from '#imports'
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{
role: keyof typeof RoleLabels role: keyof typeof RoleLabels
description?: boolean
clickable?: boolean clickable?: boolean
inherit?: boolean inherit?: boolean
border?: boolean
}>(), }>(),
{ {
description: true,
clickable: false, clickable: false,
inherit: false, inherit: false,
border: true,
}, },
) )
const roleRef = toRef(props, 'role') const roleRef = toRef(props, 'role')
const descriptionRef = toRef(props, 'description')
const clickableRef = toRef(props, 'clickable') const clickableRef = toRef(props, 'clickable')
const inheritRef = toRef(props, 'inherit') const inheritRef = toRef(props, 'inherit')
const borderRef = toRef(props, 'border')
const roleProperties = computed(() => { const roleProperties = computed(() => {
const role = roleRef.value const role = roleRef.value
@ -27,13 +27,11 @@ const roleProperties = computed(() => {
const color = RoleColors[role] const color = RoleColors[role]
const icon = RoleIcons[role] const icon = RoleIcons[role]
const label = RoleLabels[role] const label = RoleLabels[role]
const descriptionText = RoleDescriptions[role]
return { return {
color, color,
icon, icon,
label, label,
descriptionText,
} }
}) })
@ -42,37 +40,34 @@ console.log('dummy')
<template> <template>
<div <div
class="flex flex-col py-[3px] px-[8px] gap-[4px] rounded-md bg-gray-50" class="flex items-center !border-0"
:class="{ :class="{
'cursor-pointer hover:bg-gray-100': clickableRef, 'cursor-pointer': clickableRef,
'w-[350px]': descriptionRef,
'w-[140px] items-center': !descriptionRef,
}" }"
style="width: fit-content"
> >
<div class="flex items-center"> <NcBadge class="!h-auto !px-[8px]" :color="roleProperties.color" :border="borderRef">
<NcBadge class="!h-auto !px-[8px]" :color="roleProperties.color"> <div
<div class="badge-text flex items-center gap-[4px]"
class="badge-text flex items-center gap-[4px]" :class="{
:class="{ 'text-purple-500': roleProperties.color === 'purple',
'text-purple-500': roleProperties.color === 'purple', 'text-blue-500': roleProperties.color === 'blue',
'text-blue-500': roleProperties.color === 'blue', 'text-green-500': roleProperties.color === 'green',
'text-green-500': roleProperties.color === 'green', 'text-orange-500': roleProperties.color === 'orange',
'text-orange-500': roleProperties.color === 'orange', 'text-yellow-500': roleProperties.color === 'yellow',
'text-yellow-500': roleProperties.color === 'yellow', 'text-red-500': roleProperties.color === 'red',
'text-red-500': roleProperties.color === 'red', 'text-gray-300': !roleProperties.color,
'text-gray-300': !roleProperties.color, }"
}" >
> <GeneralIcon :icon="roleProperties.icon" />
<GeneralIcon :icon="roleProperties.icon" /> {{ roleProperties.label }}
{{ roleProperties.label }} <GeneralIcon v-if="clickableRef" icon="arrowDown" />
</div> </div>
</NcBadge> </NcBadge>
<div class="flex-1"></div> <div class="flex-1"></div>
<a-tooltip v-if="inheritRef" placement="bottom"> <a-tooltip v-if="inheritRef" placement="bottom">
<div class="text-gray-400 text-xs p-1 rounded-md">Current Workspace Role</div> <div class="text-gray-400 text-xs p-1 rounded-md">Current Workspace Role</div>
</a-tooltip> </a-tooltip>
</div>
<div v-if="descriptionRef" class="text-gray-500">{{ roleProperties.descriptionText }}</div>
</div> </div>
</template> </template>

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

@ -1,4 +1,5 @@
<script lang="ts" setup> <script lang="ts" setup>
import { RoleDescriptions } from 'nocodb-sdk'
import type { RoleLabels } from 'nocodb-sdk' import type { RoleLabels } from 'nocodb-sdk'
import { toRef } from '#imports' import { toRef } from '#imports'
@ -22,25 +23,30 @@ const descriptionRef = toRef(props, 'description')
<template> <template>
<NcDropdown> <NcDropdown>
<RolesBadge class="border-1" :role="roleRef" clickable :inherit="inheritRef === role" :description="descriptionRef" /> <RolesBadge class="border-1" :role="roleRef" :inherit="inheritRef === role" clickable />
<template #overlay> <template #overlay>
<div class="nc-role-select-dropdown flex flex-col gap-[4px] p-1"> <div class="nc-role-select-dropdown flex flex-col gap-[4px] p-1">
<div class="flex flex-col gap-[4px]"> <div class="flex flex-col gap-[4px]">
<div <div v-for="rl in props.roles" :key="rl" :value="rl" :selected="rl === roleRef" @click="props.onRoleChange(rl)">
v-for="rl in props.roles" <div
:key="rl" class="flex flex-col py-[3px] px-[8px] gap-[4px] bg-transparent cursor-pointer"
class="cursor-pointer" :class="{
:value="rl" 'w-[350px]': descriptionRef,
:selected="rl === roleRef" 'w-[200px]': !descriptionRef,
@click="props.onRoleChange(rl)" }"
> >
<RolesBadge <div class="flex items-center justify-between">
class="!bg-white hover:!bg-gray-100" <RolesBadge
:class="`nc-role-select-${rl}`" class="!bg-white hover:!bg-gray-100"
:role="rl" :class="`nc-role-select-${rl}`"
:inherit="inheritRef === rl" :role="rl"
:description="descriptionRef" :inherit="inheritRef === rl"
/> :border="false"
/>
<GeneralIcon v-if="rl === roleRef" icon="check" />
</div>
<div v-if="descriptionRef" class="text-gray-500">{{ RoleDescriptions[rl] }}</div>
</div>
</div> </div>
</div> </div>
</div> </div>

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

@ -87,6 +87,7 @@ onMounted(async () => {
<RolesSelector <RolesSelector
:role="collab.roles" :role="collab.roles"
:roles="accessibleRoles" :roles="accessibleRoles"
:description="false"
:on-role-change="(role: WorkspaceUserRoles) => updateCollaborator(collab, role)" :on-role-change="(role: WorkspaceUserRoles) => updateCollaborator(collab, role)"
/> />
</template> </template>

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

@ -57,7 +57,7 @@ onMounted(async () => {
:role="inviteData.roles" :role="inviteData.roles"
:roles="allowedRoles" :roles="allowedRoles"
:on-role-change="(role: WorkspaceUserRoles) => (inviteData.roles = role)" :on-role-change="(role: WorkspaceUserRoles) => (inviteData.roles = role)"
:description="false" :description="true"
/> />
<a-button <a-button

Loading…
Cancel
Save