mirror of https://github.com/nocodb/nocodb
Pranav C
2 years ago
committed by
GitHub
7 changed files with 130 additions and 11 deletions
@ -0,0 +1,114 @@ |
|||||||
|
<script lang="ts" setup> |
||||||
|
import { onUnmounted, useEventListener, useGlobal, watch } from '#imports' |
||||||
|
import { useState } from '#app' |
||||||
|
import MdiAccountStar from '~icons/mdi/account-star' |
||||||
|
import MdiAccountHardHat from '~icons/mdi/account-hard-hat' |
||||||
|
import MdiAccountEdit from '~icons/mdi/account-edit' |
||||||
|
import MdiEyeOutline from '~icons/mdi/eye-outline' |
||||||
|
import MdiCommentAccountOutline from '~icons/mdi/comment-account-outline' |
||||||
|
|
||||||
|
const { float } = defineProps<{ float?: boolean }>() |
||||||
|
const position = useState('preview-as-position', () => ({ |
||||||
|
y: `${window.innerHeight - 100}px`, |
||||||
|
x: `${window.innerWidth / 2 - 250}px`, |
||||||
|
})) |
||||||
|
|
||||||
|
const roleList = [{ title: 'editor' }, { title: 'commenter' }, { title: 'viewer' }] |
||||||
|
|
||||||
|
const { previewAs } = useGlobal() |
||||||
|
|
||||||
|
const roleIcon = { |
||||||
|
owner: MdiAccountStar, |
||||||
|
creator: MdiAccountHardHat, |
||||||
|
editor: MdiAccountEdit, |
||||||
|
viewer: MdiEyeOutline, |
||||||
|
commenter: MdiCommentAccountOutline, |
||||||
|
} |
||||||
|
|
||||||
|
const divMove = (e: MouseEvent) => { |
||||||
|
position.value = { y: `${e.clientY - 10}px`, x: `${e.clientX - 18}px` } |
||||||
|
} |
||||||
|
const mouseUp = () => { |
||||||
|
window.removeEventListener('mousemove', divMove, true) |
||||||
|
} |
||||||
|
|
||||||
|
useEventListener(window, 'mouseup', mouseUp, false) |
||||||
|
|
||||||
|
const mouseDown = () => { |
||||||
|
window.addEventListener('mousemove', divMove, true) |
||||||
|
} |
||||||
|
|
||||||
|
onUnmounted(() => { |
||||||
|
window.removeEventListener('mousemove', divMove, true) |
||||||
|
}) |
||||||
|
|
||||||
|
/** reload page on previewas change */ |
||||||
|
watch(previewAs, () => window.location.reload()) |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<div |
||||||
|
v-if="float" |
||||||
|
v-show="previewAs" |
||||||
|
class="floating-reset-btn nc-floating-preview-btn p-4" |
||||||
|
:style="{ top: position.y, left: position.x }" |
||||||
|
> |
||||||
|
<MdiDrag style="cursor: move" class="text-white" @mousedown="mouseDown" /> |
||||||
|
<div class="divider" /> |
||||||
|
|
||||||
|
<div class="pointer flex items-center gap-4"> |
||||||
|
<span>Preview as :</span> |
||||||
|
|
||||||
|
<a-radio-group v-model:value="previewAs" name="radioGroup"> |
||||||
|
<a-radio v-for="role in roleList" :key="role.title" class="capitalize !text-white" :value="role.title" |
||||||
|
>{{ role.title }} |
||||||
|
</a-radio> |
||||||
|
</a-radio-group> |
||||||
|
|
||||||
|
<div class="divider -ml-4" /> |
||||||
|
|
||||||
|
<div class="flex items-center gap-2 cursor-pointer" @click="previewAs = null"> |
||||||
|
<MdiExitToApp /> |
||||||
|
Exit |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<template v-else> |
||||||
|
<template v-for="role of roleList" :key="role.title"> |
||||||
|
<a-menu-item :class="`pointer nc-preview-${role.title}`" @click="previewAs = role.title"> |
||||||
|
<div class="p-1 flex gap-2 items-center"> |
||||||
|
<component :is="roleIcon[role.title]" /> |
||||||
|
|
||||||
|
<span class="capitalize" :class="{ 'x-active--text': role.title === previewAs }">{{ role.title }}</span> |
||||||
|
</div> |
||||||
|
</a-menu-item> |
||||||
|
</template> |
||||||
|
|
||||||
|
<template v-if="previewAs"> |
||||||
|
<a-menu-item @click="previewAs = null"> |
||||||
|
<div class="p-1 flex gap-2 items-center"> |
||||||
|
<mdi-close /> |
||||||
|
<!-- Reset Preview --> |
||||||
|
<span class="text-capitalize text-xs whitespace-nowrap">{{ $t('activity.resetReview') }}</span> |
||||||
|
</div> |
||||||
|
</a-menu-item> |
||||||
|
</template> |
||||||
|
</template> |
||||||
|
</template> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.floating-reset-btn { |
||||||
|
@apply z-1000 index-100 fixed text-white |
||||||
|
@apply flex items-center overflow-hidden whitespace-nowrap gap-4 rounded shadow-md; |
||||||
|
background-color: #4351e7; |
||||||
|
} |
||||||
|
|
||||||
|
:deep(.ant-radio) { |
||||||
|
@apply transform scale-80; |
||||||
|
} |
||||||
|
|
||||||
|
.divider { |
||||||
|
@apply h-5 w-2px bg-white/50; |
||||||
|
} |
||||||
|
</style> |
Loading…
Reference in new issue