From 9a3349569460c672c5622c66317d8fe1612aa426 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sun, 3 Oct 2021 15:39:39 +0900
Subject: [PATCH] :art:
---
src/client/components/debobigego/switch.vue | 1 +
src/client/components/ui/menu.vue | 63 +++++++++++----------
src/client/components/ui/popup-menu.vue | 4 +-
src/client/components/ui/popup.vue | 5 +-
4 files changed, 37 insertions(+), 36 deletions(-)
diff --git a/src/client/components/debobigego/switch.vue b/src/client/components/debobigego/switch.vue
index abc380374d..9a69e18302 100644
--- a/src/client/components/debobigego/switch.vue
+++ b/src/client/components/debobigego/switch.vue
@@ -96,6 +96,7 @@ export default defineComponent({
width: 16px;
height: 16px;
background-color: #fff;
+ pointer-events: none;
}
}
diff --git a/src/client/components/ui/menu.vue b/src/client/components/ui/menu.vue
index d1cf4f2db8..a55dccdd71 100644
--- a/src/client/components/ui/menu.vue
+++ b/src/client/components/ui/menu.vue
@@ -1,5 +1,5 @@
<template>
-<div class="rrevdjwt" :class="{ left: align === 'left', pointer: point === 'top' }"
+<div class="rrevdjwt" :class="{ center: align === 'center' }"
ref="items"
@contextmenu.self="e => e.preventDefault()"
v-hotkey="keymap"
@@ -59,10 +59,6 @@ export default defineComponent({
type: String,
requried: false
},
- point: {
- type: String,
- requried: false
- },
},
emits: ['close'],
data() {
@@ -145,26 +141,11 @@ export default defineComponent({
<style lang="scss" scoped>
.rrevdjwt {
padding: 8px 0;
+ min-width: 200px;
- &.pointer {
- &: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 {
+ &.center {
> .item {
- text-align: left;
+ text-align: center;
}
}
@@ -177,33 +158,55 @@ export default defineComponent({
white-space: nowrap;
font-size: 0.9em;
line-height: 20px;
- text-align: center;
+ text-align: left;
overflow: hidden;
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 {
color: #ff2a2a;
&:hover {
color: #fff;
- background: #ff4242;
+
+ &:before {
+ background: #ff4242;
+ }
}
&:active {
color: #fff;
- background: #d42e2e;
+
+ &:before {
+ background: #d42e2e;
+ }
}
}
&:hover {
- color: var(--fgOnAccent);
- background: var(--accent);
+ color: var(--accent);
text-decoration: none;
+
+ &:before {
+ background: var(--accentedBg);
+ }
}
&:active {
- color: var(--fgOnAccent);
- background: var(--accentDarken);
+ //color: var(--fgOnAccent);
+ //background: var(--accentDarken);
}
&:not(:active):focus-visible {
diff --git a/src/client/components/ui/popup-menu.vue b/src/client/components/ui/popup-menu.vue
index 3590426172..23f7c89f3b 100644
--- a/src/client/components/ui/popup-menu.vue
+++ b/src/client/components/ui/popup-menu.vue
@@ -1,6 +1,6 @@
<template>
-<MkPopup ref="popup" :src="src" @closed="$emit('closed')" #default="{point}">
- <MkMenu :items="items" :align="align" :point="point" @close="$refs.popup.close()" class="_popup _shadow"/>
+<MkPopup ref="popup" :src="src" @closed="$emit('closed')">
+ <MkMenu :items="items" :align="align" @close="$refs.popup.close()" class="_popup _shadow"/>
</MkPopup>
</template>
diff --git a/src/client/components/ui/popup.vue b/src/client/components/ui/popup.vue
index 8497eedecb..0fb1780cc5 100644
--- a/src/client/components/ui/popup.vue
+++ b/src/client/components/ui/popup.vue
@@ -1,7 +1,7 @@
<template>
<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 }">
- <slot :point="point"></slot>
+ <slot></slot>
</div>
</transition>
</template>
@@ -52,7 +52,6 @@ export default defineComponent({
fixed: false,
transformOrigin: 'center',
contentClicking: false,
- point: null,
};
},
@@ -136,10 +135,8 @@ export default defineComponent({
}
if (top > rect.top + (this.fixed ? 0 : window.pageYOffset)) {
- this.point = 'top';
this.transformOrigin = 'center top';
} else {
- this.point = null;
this.transformOrigin = 'center';
}