Madeorsk/rudeshark.net
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

🎨

Browse Source
This commit is contained in:
syuilo 2021-10-03 15:39:39 +09:00
parent f0b2eaf70d
commit 9a33495694
4 changed files with 37 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/client/components/debobigego/switch.vue
View File

@ -96,6 +96,7 @@ export default defineComponent({
width: 16px; width: 16px;
height: 16px; height: 16px;
background-color: #fff; background-color: #fff;
pointer-events: none;
} }
} }

63
src/client/components/ui/menu.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="rrevdjwt" :class="{ left: align === 'left', pointer: point === 'top' }" <div class="rrevdjwt" :class="{ center: align === 'center' }"
ref="items" ref="items"
@contextmenu.self="e => e.preventDefault()" @contextmenu.self="e => e.preventDefault()"
v-hotkey="keymap" v-hotkey="keymap"
@ -59,10 +59,6 @@ export default defineComponent({
type: String, type: String,
requried: false requried: false
}, },
point: {
type: String,
requried: false
},
}, },
emits: ['close'], emits: ['close'],
data() { data() {
@ -145,26 +141,11 @@ export default defineComponent({
<style lang="scss" scoped> <style lang="scss" scoped>
.rrevdjwt { .rrevdjwt {
padding: 8px 0; padding: 8px 0;
min-width: 200px;
&.pointer { &.center {
&:before {
--size: 8px;
content: '';
display: block;
position: absolute;
top: calc(0px - (var(--size) * 2));
left: 0;
right: 0;
width: 0;
margin: auto;
border: solid var(--size) transparent;
border-bottom-color: var(--popup);
}
}
&.left {
> .item { > .item {
text-align: left; text-align: center;
} }
} }
@ -177,33 +158,55 @@ export default defineComponent({
white-space: nowrap; white-space: nowrap;
font-size: 0.9em; font-size: 0.9em;
line-height: 20px; line-height: 20px;
text-align: center; text-align: left;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
&:before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto;
width: calc(100% - 16px);
height: 100%;
border-radius: 6px;
}
&.danger { &.danger {
color: #ff2a2a; color: #ff2a2a;
&:hover { &:hover {
color: #fff; color: #fff;
background: #ff4242;
&:before {
background: #ff4242;
}
} }
&:active { &:active {
color: #fff; color: #fff;
background: #d42e2e;
&:before {
background: #d42e2e;
}
} }
} }
&:hover { &:hover {
color: var(--fgOnAccent); color: var(--accent);
background: var(--accent);
text-decoration: none; text-decoration: none;
&:before {
background: var(--accentedBg);
}
} }
&:active { &:active {
color: var(--fgOnAccent); //color: var(--fgOnAccent);
background: var(--accentDarken); //background: var(--accentDarken);
} }
&:not(:active):focus-visible { &:not(:active):focus-visible {

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

@ -1,6 +1,6 @@
<template> <template>
<MkPopup ref="popup" :src="src" @closed="$emit('closed')" #default="{point}"> <MkPopup ref="popup" :src="src" @closed="$emit('closed')">
<MkMenu :items="items" :align="align" :point="point" @close="$refs.popup.close()" class="_popup _shadow"/> <MkMenu :items="items" :align="align" @close="$refs.popup.close()" class="_popup _shadow"/>
</MkPopup> </MkPopup>
</template> </template>

5
src/client/components/ui/popup.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<transition :name="$store.state.animation ? 'popup-menu' : ''" appear @after-leave="onClosed" @enter="$emit('opening')" @after-enter="childRendered"> <transition :name="$store.state.animation ? 'popup-menu' : ''" appear @after-leave="onClosed" @enter="$emit('opening')" @after-enter="childRendered">
<div v-show="manualShowing != null ? manualShowing : showing" class="ccczpooj" :class="{ front, fixed, top: position === 'top' }" ref="content" :style="{ pointerEvents: (manualShowing != null ? manualShowing : showing) ? 'auto' : 'none', '--transformOrigin': transformOrigin }"> <div v-show="manualShowing != null ? manualShowing : showing" class="ccczpooj" :class="{ front, fixed, top: position === 'top' }" ref="content" :style="{ pointerEvents: (manualShowing != null ? manualShowing : showing) ? 'auto' : 'none', '--transformOrigin': transformOrigin }">
<slot :point="point"></slot> <slot></slot>
</div> </div>
</transition> </transition>
</template> </template>
@ -52,7 +52,6 @@ export default defineComponent({
fixed: false, fixed: false,
transformOrigin: 'center', transformOrigin: 'center',
contentClicking: false, contentClicking: false,
point: null,
}; };
}, },
@ -136,10 +135,8 @@ export default defineComponent({
} }
if (top > rect.top + (this.fixed ? 0 : window.pageYOffset)) { if (top > rect.top + (this.fixed ? 0 : window.pageYOffset)) {
this.point = 'top';
this.transformOrigin = 'center top'; this.transformOrigin = 'center top';
} else { } else {
this.point = null;
this.transformOrigin = 'center'; this.transformOrigin = 'center';
} }