Browse Source

refactor(gui-v2): ui updates

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/3091/head
Pranav C 2 years ago
parent
commit
c3badd4dcb
  1. 15
      packages/nc-gui-v2/components/general/PreviewAs.vue

15
packages/nc-gui-v2/components/general/PreviewAs.vue

@ -51,22 +51,22 @@ watch(previewAs, () => window.location.reload())
<div <div
v-if="float" v-if="float"
v-show="previewAs" v-show="previewAs"
class="floating-reset-btn nc-floating-preview-btn px-2" class="floating-reset-btn nc-floating-preview-btn p-4"
:style="{ top: position.y, left: position.x }" :style="{ top: position.y, left: position.x }"
> >
<MdiDrag style="cursor: move" class="text-white" @mousedown="mouseDown" /> <MdiDrag style="cursor: move" class="text-white" @mousedown="mouseDown" />
<div class="divider" /> <div class="divider" />
<div class="pointer flex items-center gap-2"> <div class="pointer flex items-center gap-4">
<span>Preview as :</span> <span>Preview as :</span>
<a-radio-group v-model:value="previewAs" name="radioGroup"> <a-radio-group v-model:value="previewAs" name="radioGroup">
<a-radio v-for="role in roleList" :key="role.title" class="!text-xs !text-white" :value="role.title" <a-radio v-for="role in roleList" :key="role.title" class="capitalize !text-white" :value="role.title"
>{{ role.title }} >{{ role.title }}
</a-radio> </a-radio>
</a-radio-group> </a-radio-group>
<div class="divider" /> <div class="divider -ml-4" />
<div class="flex items-center gap-2 cursor-pointer" @click="previewAs = null"> <div class="flex items-center gap-2 cursor-pointer" @click="previewAs = null">
<MdiExitToApp /> <MdiExitToApp />
@ -81,7 +81,7 @@ watch(previewAs, () => window.location.reload())
<div class="p-1 flex gap-2 items-center"> <div class="p-1 flex gap-2 items-center">
<component :is="roleIcon[role.title]" /> <component :is="roleIcon[role.title]" />
<span class="text-capitalize text-xs" :class="{ 'x-active--text': role.title === previewAs }">{{ role.title }}</span> <span class="capitalize" :class="{ 'x-active--text': role.title === previewAs }">{{ role.title }}</span>
</div> </div>
</a-menu-item> </a-menu-item>
</template> </template>
@ -100,8 +100,9 @@ watch(previewAs, () => window.location.reload())
<style scoped> <style scoped>
.floating-reset-btn { .floating-reset-btn {
@apply bg-primary/90 z-1000 index-100 fixed text-white py-1 pr-3 text-xs font-weight-bold @apply z-1000 index-100 fixed text-white
@apply flex items-center overflow-hidden whitespace-nowrap gap-2 rounded shadow-md; @apply flex items-center overflow-hidden whitespace-nowrap gap-4 rounded shadow-md;
background-color: #4351e7;
} }
:deep(.ant-radio) { :deep(.ant-radio) {

Loading…
Cancel
Save