sendnrw/misskey
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'develop' into sw-notification-action

Browse Source
This commit is contained in:
tamaina
2021-08-11 22:53:07 +09:00
parent 10e04a4bbe 9d138aa282
commit 90b735f588
938 changed files with 33452 additions and 464 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/client/components/date-separated-list.vue
View File

@@ -48,15 +48,7 @@ export default defineComponent({
render() {
if (this.items.length === 0) return;
return h(this.$store.state.animation ? TransitionGroup : 'div', this.$store.state.animation ? {
class: 'sqadhkmv' + (this.noGap ? ' noGap _block' : ''),
name: 'list',
tag: 'div',
'data-direction': this.direction,
'data-reversed': this.reversed ? 'true' : 'false',
} : {
class: 'sqadhkmv' + (this.noGap ? ' noGap _block' : ''),
}, this.items.map((item, i) => {
const renderChildren = () => this.items.map((item, i) => {
const el = this.$slots.default({
item: item
})[0];
@@ -98,7 +90,19 @@ export default defineComponent({
return el;
}
}
}));
});
return h(this.$store.state.animation ? TransitionGroup : 'div', this.$store.state.animation ? {
class: 'sqadhkmv' + (this.noGap ? ' noGap _block' : ''),
name: 'list',
tag: 'div',
'data-direction': this.direction,
'data-reversed': this.reversed ? 'true' : 'false',
} : {
class: 'sqadhkmv' + (this.noGap ? ' noGap _block' : ''),
}, {
default: renderChildren
});
},
});
</script>

2
src/client/components/drive.file.vue
View File

@@ -114,7 +114,7 @@ export default defineComponent({
if (this.selectMode) {
this.$emit('chosen', this.file);
} else {
os.modalMenu(this.getMenu(), ev.currentTarget || ev.target);
os.popupMenu(this.getMenu(), ev.currentTarget || ev.target);
}
},

2
src/client/components/drive.vue
View File

@@ -629,7 +629,7 @@ export default defineComponent({
},
showMenu(ev) {
os.modalMenu(this.getMenu(), ev.currentTarget || ev.target);
os.popupMenu(this.getMenu(), ev.currentTarget || ev.target);
},
onContextmenu(ev) {

167
src/client/components/emoji-picker-dialog.vue
View File

@@ -1,17 +1,17 @@
<template>
<MkModal ref="modal" :manual-showing="manualShowing" :src="src" :front="true" @click="$refs.modal.close()" @opening="opening" @close="$emit('close')" @closed="$emit('closed')">
<MkEmojiPicker :show-pinned="showPinned" :as-reaction-picker="asReactionPicker" @chosen="chosen" ref="picker"/>
</MkModal>
<MkPopup ref="popup" :manual-showing="manualShowing" :src="src" :front="true" @click="$refs.popup.close()" @opening="opening" @close="$emit('close')" @closed="$emit('closed')" #default="{point}">
<MkEmojiPicker class="ryghynhb _popup _shadow" :class="{ pointer: point === 'top' }" :show-pinned="showPinned" :as-reaction-picker="asReactionPicker" @chosen="chosen" ref="picker"/>
</MkPopup>
</template>
<script lang="ts">
import { defineComponent, markRaw } from 'vue';
import MkModal from '@client/components/ui/modal.vue';
import MkPopup from '@client/components/ui/popup.vue';
import MkEmojiPicker from '@client/components/emoji-picker.vue';
export default defineComponent({
components: {
MkModal,
MkPopup,
MkEmojiPicker,
},
@@ -33,7 +33,7 @@ export default defineComponent({
},
},
emits: ['done', 'closed'],
emits: ['done', 'close', 'closed'],
data() {
return {
@@ -44,7 +44,7 @@ export default defineComponent({
methods: {
chosen(emoji: any) {
this.$emit('done', emoji);
this.$refs.modal.close();
this.$refs.popup.close();
},
opening() {
@@ -56,145 +56,20 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
.omfetrab {
$pad: 8px;
--eachSize: 40px;
display: flex;
flex-direction: column;
contain: content;
&.big {
--eachSize: 44px;
}
&.w1 {
width: calc((var(--eachSize) * 5) + (#{$pad} * 2));
}
&.w2 {
width: calc((var(--eachSize) * 6) + (#{$pad} * 2));
}
&.w3 {
width: calc((var(--eachSize) * 7) + (#{$pad} * 2));
}
&.h1 {
--height: calc((var(--eachSize) * 4) + (#{$pad} * 2));
}
&.h2 {
--height: calc((var(--eachSize) * 6) + (#{$pad} * 2));
}
&.h3 {
--height: calc((var(--eachSize) * 8) + (#{$pad} * 2));
}
> .search {
width: 100%;
padding: 12px;
box-sizing: border-box;
font-size: 1em;
outline: none;
border: none;
background: transparent;
color: var(--fg);
&:not(.filled) {
order: 1;
z-index: 2;
box-shadow: 0px -1px 0 0px var(--divider);
}
}
> .emojis {
height: var(--height);
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
> .index {
min-height: var(--height);
position: relative;
border-bottom: solid 0.5px var(--divider);
> .arrow {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 16px 0;
text-align: center;
opacity: 0.5;
pointer-events: none;
}
}
section {
> header {
position: sticky;
top: 0;
left: 0;
z-index: 1;
padding: 8px;
font-size: 12px;
}
> div {
padding: $pad;
> button {
position: relative;
padding: 0;
width: var(--eachSize);
height: var(--eachSize);
border-radius: 4px;
&:focus {
outline: solid 2px var(--focus);
z-index: 1;
}
&:hover {
background: rgba(0, 0, 0, 0.05);
}
&:active {
background: var(--accent);
box-shadow: inset 0 0.15em 0.3em rgba(27, 31, 35, 0.15);
}
> * {
font-size: 24px;
height: 1.25em;
vertical-align: -.25em;
pointer-events: none;
}
}
}
&.result {
border-bottom: solid 0.5px var(--divider);
&:empty {
display: none;
}
}
&.unicode {
min-height: 384px;
}
&.custom {
min-height: 64px;
}
.ryghynhb {
&.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);
}
}
}

3
src/client/components/emoji-picker.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="omfetrab _popup" :class="['w' + width, 'h' + height, { big }]">
<div class="omfetrab" :class="['w' + width, 'h' + height, { big }]">
<input ref="search" class="search" data-prevent-emoji-insert :class="{ filled: q != null && q != '' }" v-model.trim="q" :placeholder="$ts.search" @paste.stop="paste" @keyup.enter="done()">
<div class="emojis" ref="emojis">
<section class="result">
@@ -346,7 +346,6 @@ export default defineComponent({
display: flex;
flex-direction: column;
contain: content;
&.big {
--eachSize: 44px;

4
src/client/components/form/form.scss
View File

@@ -32,8 +32,8 @@
margin: -8px calc(var(--formXPadding) * -1) 0 calc(var(--formXPadding) * -1);
padding: 8px calc(var(--formContentHMargin) + var(--formXPadding)) 8px calc(var(--formContentHMargin) + var(--formXPadding));
background: var(--X17);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: var(--blur, blur(10px));
backdrop-filter: var(--blur, blur(10px));
}
._themeChanging_ ._formLabel {

2
src/client/components/modal-page-window.vue
View File

@@ -1,6 +1,6 @@
<template>
<MkModal ref="modal" @click="$emit('click')" @closed="$emit('closed')">
<div class="hrmcaedk _popup _narrow_" :style="{ width: `${width}px`, height: (height ? `min(${height}px, 100%)` : '100%') }">
<div class="hrmcaedk _window _narrow_" :style="{ width: `${width}px`, height: (height ? `min(${height}px, 100%)` : '100%') }">
<div class="header" @contextmenu="onContextmenu">
<span class="title">
<XHeader :info="pageInfo" :back-button="history.length > 0" @back="back()" :close-button="true" @close="$refs.modal.close()"/>

8
src/client/components/note-detailed.vue
View File

@@ -454,7 +454,7 @@ export default defineComponent({
renote(viaKeyboard = false) {
pleaseLogin();
this.blur();
os.modalMenu([{
os.popupMenu([{
text: this.$ts.renote,
icon: 'fas fa-retweet',
action: () => {
@@ -743,14 +743,14 @@ export default defineComponent({
},
menu(viaKeyboard = false) {
os.modalMenu(this.getMenu(), this.$refs.menuButton, {
os.popupMenu(this.getMenu(), this.$refs.menuButton, {
viaKeyboard
}).then(this.focus);
},
showRenoteMenu(viaKeyboard = false) {
if (!this.isMyRenote) return;
os.modalMenu([{
os.popupMenu([{
text: this.$ts.unrenote,
icon: 'fas fa-trash-alt',
danger: true,
@@ -794,7 +794,7 @@ export default defineComponent({
async clip() {
const clips = await os.api('clips/list');
os.modalMenu([{
os.popupMenu([{
icon: 'fas fa-plus',
text: this.$ts.createNew,
action: async () => {

8
src/client/components/note.vue
View File

@@ -429,7 +429,7 @@ export default defineComponent({
renote(viaKeyboard = false) {
pleaseLogin();
this.blur();
os.modalMenu([{
os.popupMenu([{
text: this.$ts.renote,
icon: 'fas fa-retweet',
action: () => {
@@ -718,14 +718,14 @@ export default defineComponent({
},
menu(viaKeyboard = false) {
os.modalMenu(this.getMenu(), this.$refs.menuButton, {
os.popupMenu(this.getMenu(), this.$refs.menuButton, {
viaKeyboard
}).then(this.focus);
},
showRenoteMenu(viaKeyboard = false) {
if (!this.isMyRenote) return;
os.modalMenu([{
os.popupMenu([{
text: this.$ts.unrenote,
icon: 'fas fa-trash-alt',
danger: true,
@@ -769,7 +769,7 @@ export default defineComponent({
async clip() {
const clips = await os.api('clips/list');
os.modalMenu([{
os.popupMenu([{
icon: 'fas fa-plus',
text: this.$ts.createNew,
action: async () => {

3
src/client/components/poll-editor.vue
View File

@@ -5,8 +5,7 @@
</p>
<ul ref="choices">
<li v-for="(choice, i) in choices" :key="i">
<MkInput class="input" :model-value="choice" @update:modelValue="onInput(i, $event)">
<template #label>{{ $t('_poll.choiceN', { n: i + 1 }) }}</template>
<MkInput class="input" :model-value="choice" @update:modelValue="onInput(i, $event)" :placeholder="$t('_poll.choiceN', { n: i + 1 })">
</MkInput>
<button @click="remove(i)" class="_button">
<i class="fas fa-times"></i>

2
src/client/components/post-form-attaches.vue
View File

@@ -112,7 +112,7 @@ export default defineComponent({
showFileMenu(file, ev: MouseEvent) {
if (this.menu) return;
this.menu = os.modalMenu([{
this.menu = os.popupMenu([{
text: this.$ts.renameFile,
icon: 'fas fa-i-cursor',
action: () => { this.rename(file) }

6
src/client/components/post-form.vue
View File

@@ -45,7 +45,7 @@
<button class="_button" @click="togglePoll" :class="{ active: poll }" v-tooltip="$ts.poll"><i class="fas fa-poll-h"></i></button>
<button class="_button" @click="useCw = !useCw" :class="{ active: useCw }" v-tooltip="$ts.useCw"><i class="fas fa-eye-slash"></i></button>
<button class="_button" @click="insertMention" v-tooltip="$ts.mention"><i class="fas fa-at"></i></button>
<button class="_button" @click="withHashtags = !withHashtags" v-tooltip="$ts.hashtags"><i class="fas fa-hashtag"></i></button>
<button class="_button" @click="withHashtags = !withHashtags" :class="{ active: withHashtags }" v-tooltip="$ts.hashtags"><i class="fas fa-hashtag"></i></button>
<button class="_button" @click="insertEmoji" v-tooltip="$ts.emoji"><i class="fas fa-laugh-squint"></i></button>
<button class="_button" @click="showActions" v-tooltip="$ts.plugin" v-if="postFormActions.length > 0"><i class="fas fa-plug"></i></button>
</footer>
@@ -641,7 +641,7 @@ export default defineComponent({
viaMobile: isMobile
};
if (this.withHashtags) {
if (this.withHashtags && this.hashtags && this.hashtags.trim() !== '') {
const hashtags = this.hashtags.trim().split(' ').map(x => x.startsWith('#') ? x : '#' + x).join(' ');
data.text = data.text ? `${data.text} ${hashtags}` : hashtags;
}
@@ -690,7 +690,7 @@ export default defineComponent({
},
showActions(ev) {
os.modalMenu(postFormActions.map(action => ({
os.popupMenu(postFormActions.map(action => ({
text: action.title,
action: () => {
action.handler({

2
src/client/components/reactions-viewer.reaction.vue
View File

@@ -170,7 +170,7 @@ export default defineComponent({
}
> span {
color: #fff;
color: var(--fgOnAccent);
}
}

2
src/client/components/sample.vue
View File

@@ -93,7 +93,7 @@ export default defineComponent({
},
async openMenu(ev) {
os.modalMenu([{
os.popupMenu([{
type: 'label',
text: 'Fruits'
}, {

6
src/client/components/signin.vue
View File

@@ -3,13 +3,11 @@
<div class="auth _section">
<div class="avatar" :style="{ backgroundImage: user ? `url('${ user.avatarUrl }')` : null }" v-show="withAvatar"></div>
<div class="normal-signin" v-if="!totpLogin">
<MkInput v-model="username" type="text" pattern="^[a-zA-Z0-9_]+$" spellcheck="false" autofocus required @update:modelValue="onUsernameChange">
<template #label>{{ $ts.username }}</template>
<MkInput v-model="username" :placeholder="$ts.username" type="text" pattern="^[a-zA-Z0-9_]+$" spellcheck="false" autofocus required @update:modelValue="onUsernameChange">
<template #prefix>@</template>
<template #suffix>@{{ host }}</template>
</MkInput>
<MkInput v-model="password" type="password" :with-password-toggle="true" v-if="!user || user && !user.usePasswordLessLogin" required>
<template #label>{{ $ts.password }}</template>
<MkInput v-model="password" :placeholder="$ts.password" type="password" :with-password-toggle="true" v-if="!user || user && !user.usePasswordLessLogin" required>
<template #prefix><i class="fas fa-lock"></i></template>
<template #caption><button class="_textButton" @click="resetPassword" type="button">{{ $ts.forgotPassword }}</button></template>
</MkInput>

18
src/client/components/ui/button.vue
View File

@@ -115,7 +115,7 @@ export default defineComponent({
z-index: 1; // 他コンポーネントのbox-shadowに隠されないようにするため
display: block;
min-width: 100px;
width: min-content;
width: max-content;
padding: 8px 14px;
text-align: center;
font-weight: normal;
@@ -127,6 +127,7 @@ export default defineComponent({
border-radius: 999px;
overflow: hidden;
box-sizing: border-box;
transition: background 0.1s ease;
&:not(:disabled):hover {
background: var(--buttonHoverBg);
@@ -142,7 +143,7 @@ export default defineComponent({
&.primary {
font-weight: bold;
color: #fff !important;
color: var(--fgOnAccent) !important;
background: var(--accent);
&:not(:disabled):hover {
@@ -176,17 +177,8 @@ export default defineComponent({
}
&:focus {
&:after {
content: "";
pointer-events: none;
position: absolute;
top: -5px;
right: -5px;
bottom: -5px;
left: -5px;
border: 2px solid var(--accentAlpha03);
border-radius: 10px;
}
outline: solid 2px var(--focus);
outline-offset: 2px;
}
&.inline + .bghgjjyj {

4
src/client/components/ui/folder.vue
View File

@@ -102,8 +102,8 @@ export default defineComponent({
background: var(--panel);
/* TODO panelの半透明バージョンをプログラマティックに作りたい
background: var(--X17);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: var(--blur, blur(8px));
backdrop-filter: var(--blur, blur(20px));
*/
> .title {

6
src/client/components/ui/input.vue
View File

@@ -210,8 +210,7 @@ export default defineComponent({
> .label {
font-size: 0.85em;
padding: 0 0 6px 6px;
font-weight: bold;
padding: 0 0 8px 12px;
user-select: none;
&:empty {
@@ -221,7 +220,7 @@ export default defineComponent({
> .caption {
font-size: 0.8em;
padding: 6px 0 0 6px;
padding: 8px 0 0 12px;
color: var(--fgTransparentWeak);
&:empty {
@@ -251,6 +250,7 @@ export default defineComponent({
outline: none;
box-shadow: none;
box-sizing: border-box;
transition: border-color 0.1s ease-out;
&:hover {
border-color: var(--inputBorderHover);

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

@@ -1,5 +1,5 @@
<template>
<div class="rrevdjwt" :class="{ left: align === 'left' }"
<div class="rrevdjwt" :class="{ left: align === 'left', pointer: point === 'top' }"
ref="items"
@contextmenu.self="e => e.preventDefault()"
v-hotkey="keymap"
@@ -58,7 +58,11 @@ export default defineComponent({
align: {
type: String,
requried: false
}
},
point: {
type: String,
requried: false
},
},
emits: ['close'],
data() {
@@ -137,6 +141,22 @@ export default defineComponent({
.rrevdjwt {
padding: 8px 0;
&.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 {
> .item {
text-align: left;
@@ -171,13 +191,13 @@ export default defineComponent({
}
&:hover {
color: #fff;
color: var(--fgOnAccent);
background: var(--accent);
text-decoration: none;
}
&:active {
color: #fff;
color: var(--fgOnAccent);
background: var(--accentDarken);
}

2
src/client/components/ui/modal-window.vue
View File

@@ -1,6 +1,6 @@
<template>
<MkModal ref="modal" @click="$emit('click')" @closed="$emit('closed')">
<div class="ebkgoccj _popup _narrow_" @keydown="onKeydown" :style="{ width: `${width}px`, height: scroll ? (height ? `${height}px` : null) : (height ? `min(${height}px, 100%)` : '100%') }">
<div class="ebkgoccj _window _narrow_" @keydown="onKeydown" :style="{ width: `${width}px`, height: scroll ? (height ? `${height}px` : null) : (height ? `min(${height}px, 100%)` : '100%') }">
<div class="header">
<button class="_button" v-if="withOkButton" @click="$emit('close')"><i class="fas fa-times"></i></button>
<span class="title">

25
src/client/components/ui/modal-menu.vue → src/client/components/ui/popup-menu.vue
View File

@@ -1,19 +1,20 @@
<template>
<MkModal ref="modal" :src="src" @click="$refs.modal.close()" @closed="$emit('closed')">
<MkMenu :items="items" :align="align" @close="$refs.modal.close()" class="_popup"/>
</MkModal>
<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>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import MkModal from './modal.vue';
import MkPopup from './popup.vue';
import MkMenu from './menu.vue';
export default defineComponent({
components: {
MkModal,
MkPopup,
MkMenu,
},
props: {
items: {
type: Array,
@@ -31,17 +32,7 @@ export default defineComponent({
required: false
},
},
emits: ['closed'],
computed: {
keymap(): any {
return {
'esc': () => this.$refs.modal.close(),
};
},
},
emits: ['close', 'closed'],
});
</script>
<style lang="scss" scoped>
</style>

216
src/client/components/ui/popup.vue Normal file
View File

@@ -0,0 +1,216 @@
<template>
<transition :name="$store.state.animation ? 'popup-menu' : ''" :duration="$store.state.animation ? 300 : 0" 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>
</div>
</transition>
</template>
<script lang="ts">
import { defineComponent, PropType } from 'vue';
function getFixedContainer(el: Element | null): Element | null {
if (el == null || el.tagName === 'BODY') return null;
const position = window.getComputedStyle(el).getPropertyValue('position');
if (position === 'fixed') {
return el;
} else {
return getFixedContainer(el.parentElement);
}
}
export default defineComponent({
props: {
manualShowing: {
type: Boolean,
required: false,
default: null,
},
srcCenter: {
type: Boolean,
required: false
},
src: {
type: Object as PropType<HTMLElement>,
required: false,
},
position: {
required: false
},
front: {
type: Boolean,
required: false,
default: false,
}
},
emits: ['opening', 'click', 'esc', 'close', 'closed'],
data() {
return {
showing: true,
fixed: false,
transformOrigin: 'center',
contentClicking: false,
point: null,
};
},
mounted() {
this.$watch('src', () => {
if (this.src) {
this.src.style.pointerEvents = 'none';
}
this.fixed = getFixedContainer(this.src) != null;
this.$nextTick(() => {
this.align();
});
}, { immediate: true });
this.$nextTick(() => {
const popover = this.$refs.content as any;
new ResizeObserver((entries, observer) => {
this.align();
}).observe(popover);
});
document.addEventListener('mousedown', this.onDocumentClick, { passive: true });
},
beforeUnmount() {
document.removeEventListener('mousedown', this.onDocumentClick);
},
methods: {
align() {
if (this.src == null) return;
const popover = this.$refs.content as any;
if (popover == null) return;
const rect = this.src.getBoundingClientRect();
const width = popover.offsetWidth;
const height = popover.offsetHeight;
let left;
let top;
if (this.srcCenter) {
const x = rect.left + (this.fixed ? 0 : window.pageXOffset) + (this.src.offsetWidth / 2);
const y = rect.top + (this.fixed ? 0 : window.pageYOffset) + (this.src.offsetHeight / 2);
left = (x - (width / 2));
top = (y - (height / 2));
} else {
const x = rect.left + (this.fixed ? 0 : window.pageXOffset) + (this.src.offsetWidth / 2);
const y = rect.top + (this.fixed ? 0 : window.pageYOffset) + this.src.offsetHeight;
left = (x - (width / 2));
top = y;
}
if (this.fixed) {
if (left + width > window.innerWidth) {
left = window.innerWidth - width;
}
if (top + height > window.innerHeight) {
top = window.innerHeight - height;
}
} else {
if (left + width - window.pageXOffset > window.innerWidth) {
left = window.innerWidth - width + window.pageXOffset - 1;
}
if (top + height - window.pageYOffset > window.innerHeight) {
top = window.innerHeight - height + window.pageYOffset - 1;
}
}
if (top < 0) {
top = 0;
}
if (left < 0) {
left = 0;
}
if (top > rect.top + (this.fixed ? 0 : window.pageYOffset)) {
this.point = 'top';
this.transformOrigin = 'center top';
} else {
this.point = null;
this.transformOrigin = 'center';
}
popover.style.left = left + 'px';
popover.style.top = top + 'px';
},
childRendered() {
// モーダルコンテンツにマウスボタンが押され、コンテンツ外でマウスボタンが離されたときにモーダルバックグラウンドクリックと判定させないためにマウスイベントを監視しフラグ管理する
const content = this.$refs.content.children[0];
content.addEventListener('mousedown', e => {
this.contentClicking = true;
window.addEventListener('mouseup', e => {
// click イベントより先に mouseup イベントが発生するかもしれないのでちょっと待つ
setTimeout(() => {
this.contentClicking = false;
}, 100);
}, { passive: true, once: true });
}, { passive: true });
},
close() {
if (this.src) this.src.style.pointerEvents = 'auto';
this.showing = false;
this.$emit('close');
},
onClosed() {
this.$emit('closed');
},
onDocumentClick(ev) {
const flyoutElement = this.$refs.content;
let targetElement = ev.target;
do {
if (targetElement === flyoutElement) {
return;
}
targetElement = targetElement.parentNode;
} while (targetElement);
this.close();
}
}
});
</script>
<style lang="scss" scoped>
.popup-menu-enter-active {
transform-origin: var(--transformOrigin);
transition: opacity 0.2s cubic-bezier(0, 0, 0.2, 1), transform 0.2s cubic-bezier(0, 0, 0.2, 1) !important;
}
.popup-menu-leave-active {
transform-origin: var(--transformOrigin);
transition: opacity 0.2s cubic-bezier(0.4, 0, 1, 1), transform 0.2s cubic-bezier(0.4, 0, 1, 1) !important;
}
.popup-menu-enter-from, .popup-menu-leave-to {
pointer-events: none;
opacity: 0;
transform: scale(0.9);
}
.ccczpooj {
position: absolute;
z-index: 10000;
&.fixed {
position: fixed;
}
&.front {
z-index: 20000;
}
}
</style>

6
src/client/components/ui/select.vue
View File

@@ -155,8 +155,7 @@ export default defineComponent({
> .label {
font-size: 0.85em;
padding: 0 0 6px 6px;
font-weight: bold;
padding: 0 0 8px 12px;
user-select: none;
&:empty {
@@ -166,7 +165,7 @@ export default defineComponent({
> .caption {
font-size: 0.8em;
padding: 6px 0 0 6px;
padding: 8px 0 0 12px;
color: var(--fgTransparentWeak);
&:empty {
@@ -197,6 +196,7 @@ export default defineComponent({
box-shadow: none;
box-sizing: border-box;
cursor: pointer;
transition: border-color 0.1s ease-out;
&:hover {
border-color: var(--inputBorderHover);

6
src/client/components/ui/textarea.vue
View File

@@ -176,8 +176,7 @@ export default defineComponent({
> .label {
font-size: 0.85em;
padding: 0 0 6px 6px;
font-weight: bold;
padding: 0 0 8px 12px;
user-select: none;
&:empty {
@@ -187,7 +186,7 @@ export default defineComponent({
> .caption {
font-size: 0.8em;
padding: 6px 0 0 6px;
padding: 8px 0 0 12px;
color: var(--fgTransparentWeak);
&:empty {
@@ -218,6 +217,7 @@ export default defineComponent({
outline: none;
box-shadow: none;
box-sizing: border-box;
transition: border-color 0.1s ease-out;
&:hover {
border-color: var(--inputBorderHover);

3
src/client/components/ui/window.vue
View File

@@ -1,7 +1,7 @@
<template>
<transition :name="$store.state.animation ? 'window' : ''" appear @after-leave="$emit('closed')">
<div class="ebkgocck" :class="{ front }" v-if="showing">
<div class="body _popup _shadow _narrow_" @mousedown="onBodyMousedown" @keydown="onKeydown">
<div class="body _window _shadow _narrow_" @mousedown="onBodyMousedown" @keydown="onKeydown">
<div class="header" :class="{ mini }" @contextmenu.prevent.stop="onContextmenu">
<button v-if="closeButton" class="_button" @click="close()"><i class="fas fa-times"></i></button>
@@ -416,6 +416,7 @@ export default defineComponent({
flex-shrink: 0;
user-select: none;
height: var(--height);
border-bottom: solid 1px var(--divider);
> ::v-deep(button) {
height: var(--height);

4
src/client/components/widgets.vue
View File

@@ -18,12 +18,12 @@
<div class="customize-container">
<button class="config _button" @click.prevent.stop="configWidget(element.id)"><i class="fas fa-cog"></i></button>
<button class="remove _button" @click.prevent.stop="removeWidget(element)"><i class="fas fa-times"></i></button>
<component :is="`mkw-${element.name}`" :widget="element" :setting-callback="setting => settings[element.id] = setting" :column="column" @updateProps="updateWidget(element.id, $event)"/>
<component :is="`mkw-${element.name}`" :widget="element" :setting-callback="setting => settings[element.id] = setting" @updateProps="updateWidget(element.id, $event)"/>
</div>
</template>
</XDraggable>
</template>
<component v-else class="widget" v-for="widget in widgets" :is="`mkw-${widget.name}`" :key="widget.id" :widget="widget" :column="column" @updateProps="updateWidget(widget.id, $event)"/>
<component v-else class="widget" v-for="widget in widgets" :is="`mkw-${widget.name}`" :key="widget.id" :widget="widget" @updateProps="updateWidget(widget.id, $event)"/>
</div>
</template>