sim1222/test1
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

enhance(client): tweak ui

Browse Source
This commit is contained in:
syuilo
2022-07-17 23:18:05 +09:00
parent d7222dd56a
commit 8f3ca867d2
8 changed files with 50 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/client/src/components/ui/button.vue
View File

@ -46,7 +46,7 @@ export default defineComponent({
rounded: {
type: Boolean,
required: false,
default: false,
default: true,
},
inline: {
type: Boolean,

4
packages/client/src/components/ui/context-menu.vue
View File

@ -1,16 +1,16 @@
<template>
<transition :name="$store.state.animation ? 'fade' : ''" appear>
<div ref="rootEl" class="nvlagfpb" :style="{ zIndex }" @contextmenu.prevent.stop="() => {}">
<MkMenu :items="items" class="_popup _shadow" :align="'left'" @close="$emit('closed')"/>
<MkMenu :items="items" :align="'left'" @close="$emit('closed')"/>
</div>
</transition>
</template>
<script lang="ts" setup>
import { onMounted, onBeforeUnmount } from 'vue';
import contains from '@/scripts/contains';
import MkMenu from './menu.vue';
import { MenuItem } from './types/menu.vue';
import contains from '@/scripts/contains';
import * as os from '@/os';
const props = defineProps<{

8
packages/client/src/components/ui/child-menu.vue → packages/client/src/components/ui/menu.child.vue
View File

@ -14,6 +14,7 @@ import * as os from '@/os';
const props = defineProps<{
items: MenuItem[];
targetElement: HTMLElement;
rootElement: HTMLElement;
width?: number;
viaKeyboard?: boolean;
}>();
@ -27,9 +28,10 @@ const el = ref<HTMLElement>();
const align = 'left';
function setPosition() {
const rootRect = props.rootElement.getBoundingClientRect();
const rect = props.targetElement.getBoundingClientRect();
const left = rect.left + props.targetElement.offsetWidth;
const top = rect.top - 8;
const left = props.targetElement.offsetWidth;
const top = (rect.top - rootRect.top) - 8;
el.value.style.left = left + 'px';
el.value.style.top = top + 'px';
}
@ -58,6 +60,6 @@ defineExpose({
<style lang="scss" scoped>
.sfhdhdhr {
position: fixed;
position: absolute;
}
</style>

4
packages/client/src/components/ui/menu.vue
View File

@ -50,7 +50,7 @@
</span>
</div>
<div v-if="childMenu" class="child">
<XChild ref="child" :items="childMenu" :target-element="childTarget" showing @actioned="childActioned"/>
<XChild ref="child" :items="childMenu" :target-element="childTarget" :root-element="itemsEl" showing @actioned="childActioned"/>
</div>
</div>
</template>
@ -61,7 +61,7 @@ import { focusPrev, focusNext } from '@/scripts/focus';
import FormSwitch from '@/components/form/switch.vue';
import { MenuItem, InnerMenuItem, MenuPending, MenuAction } from '@/types/menu';
import * as os from '@/os';
const XChild = defineAsyncComponent(() => import('./child-menu.vue'));
const XChild = defineAsyncComponent(() => import('./menu.child.vue'));
const props = defineProps<{
items: MenuItem[];