Merge remote-tracking branch 'upstream/master'
This commit is contained in:
ThinaticSystem
@ -10,9 +10,9 @@
|
||||
</template>
|
||||
<div class="dpvffvvy _monolithic_">
|
||||
<div class="_section">
|
||||
<MkTextarea v-model:value="comment">
|
||||
<span>{{ $ts.details }}</span>
|
||||
<template #desc>{{ $ts.fillAbuseReportDescription }}</template>
|
||||
<MkTextarea v-model="comment">
|
||||
<template #label>{{ $ts.details }}</template>
|
||||
<template #caption>{{ $ts.fillAbuseReportDescription }}</template>
|
||||
</MkTextarea>
|
||||
</div>
|
||||
<div class="_section">
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -14,8 +14,8 @@
|
||||
</div>
|
||||
<header v-if="title"><Mfm :text="title"/></header>
|
||||
<div class="body" v-if="text"><Mfm :text="text"/></div>
|
||||
<MkInput v-if="input" v-model:value="inputValue" autofocus :type="input.type || 'text'" :placeholder="input.placeholder" @keydown="onInputKeydown"></MkInput>
|
||||
<MkSelect v-if="select" v-model:value="selectedValue" autofocus>
|
||||
<MkInput v-if="input" v-model="inputValue" autofocus :type="input.type || 'text'" :placeholder="input.placeholder" @keydown="onInputKeydown"></MkInput>
|
||||
<MkSelect v-if="select" v-model="selectedValue" autofocus>
|
||||
<template v-if="select.items">
|
||||
<option v-for="item in select.items" :value="item.value">{{ item.text }}</option>
|
||||
</template>
|
||||
|
||||
@ -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);
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@ -10,6 +10,7 @@
|
||||
<span class="separator" v-if="folder != null"><i class="fas fa-angle-right"></i></span>
|
||||
<span class="folder current" v-if="folder != null">{{ folder.name }}</span>
|
||||
</div>
|
||||
<button @click="showMenu" class="menu _button"><i class="fas fa-ellipsis-h"></i></button>
|
||||
</nav>
|
||||
<div class="main" :class="{ uploading: uploadings.length > 0, fetching }"
|
||||
ref="main"
|
||||
@ -627,8 +628,12 @@ export default defineComponent({
|
||||
}];
|
||||
},
|
||||
|
||||
onContextmenu(e) {
|
||||
os.contextMenu(this.getMenu(), e);
|
||||
showMenu(ev) {
|
||||
os.popupMenu(this.getMenu(), ev.currentTarget || ev.target);
|
||||
},
|
||||
|
||||
onContextmenu(ev) {
|
||||
os.contextMenu(this.getMenu(), ev);
|
||||
},
|
||||
}
|
||||
});
|
||||
@ -641,7 +646,7 @@ export default defineComponent({
|
||||
height: 100%;
|
||||
|
||||
> nav {
|
||||
display: block;
|
||||
display: flex;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
padding: 0 8px;
|
||||
@ -696,6 +701,10 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .menu {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
> .main {
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -9,14 +9,14 @@
|
||||
|
||||
<form class="_monolithic_" @submit.prevent="onSubmit" v-if="$instance.enableEmail">
|
||||
<div class="_section">
|
||||
<MkInput v-model:value="username" type="text" pattern="^[a-zA-Z0-9_]+$" spellcheck="false" autofocus required>
|
||||
<span>{{ $ts.username }}</span>
|
||||
<MkInput v-model="username" type="text" pattern="^[a-zA-Z0-9_]+$" spellcheck="false" autofocus required>
|
||||
<template #label>{{ $ts.username }}</template>
|
||||
<template #prefix>@</template>
|
||||
</MkInput>
|
||||
|
||||
<MkInput v-model:value="email" type="email" spellcheck="false" required>
|
||||
<span>{{ $ts.emailAddress }}</span>
|
||||
<template #desc>{{ $ts._forgotPassword.enterEmail }}</template>
|
||||
<MkInput v-model="email" type="email" spellcheck="false" required>
|
||||
<template #label>{{ $ts.emailAddress }}</template>
|
||||
<template #caption>{{ $ts._forgotPassword.enterEmail }}</template>
|
||||
</MkInput>
|
||||
|
||||
<MkButton type="submit" :disabled="processing" primary style="margin: 0 auto;">{{ $ts.send }}</MkButton>
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -117,6 +117,11 @@ export default defineComponent({
|
||||
75% { transform: scale3d(1.05, 0.95, 1); }
|
||||
to { transform: scale3d(1, 1, 1); }
|
||||
}
|
||||
|
||||
@keyframes mfm-rainbow {
|
||||
0% { filter: hue-rotate(0deg) contrast(150%) saturate(150%); }
|
||||
100% { filter: hue-rotate(360deg) contrast(150%) saturate(150%); }
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="zbcjwnqg" style="margin-top: -8px;">
|
||||
<div class="selects" style="display: flex;">
|
||||
<MkSelect v-model:value="chartSrc" style="margin: 0; flex: 1;">
|
||||
<MkSelect v-model="chartSrc" style="margin: 0; flex: 1;">
|
||||
<optgroup :label="$ts.federation">
|
||||
<option value="federation-instances">{{ $ts._charts.federationInstancesIncDec }}</option>
|
||||
<option value="federation-instances-total">{{ $ts._charts.federationInstancesTotal }}</option>
|
||||
@ -24,7 +24,7 @@
|
||||
<option value="drive-total">{{ $ts._charts.storageUsageTotal }}</option>
|
||||
</optgroup>
|
||||
</MkSelect>
|
||||
<MkSelect v-model:value="chartSpan" style="margin: 0;">
|
||||
<MkSelect v-model="chartSpan" style="margin: 0;">
|
||||
<option value="hour">{{ $ts.perHour }}</option>
|
||||
<option value="day">{{ $ts.perDay }}</option>
|
||||
</MkSelect>
|
||||
|
||||
@ -165,6 +165,10 @@ export default defineComponent({
|
||||
class: '_mfm_blur_',
|
||||
}, genEl(token.children));
|
||||
}
|
||||
case 'rainbow': {
|
||||
style = this.$store.state.animatedMfm ? 'animation: mfm-rainbow 1s linear infinite;' : '';
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (style == null) {
|
||||
return h('span', {}, ['[', token.props.name, ...genEl(token.children), ']']);
|
||||
|
||||
@ -1,13 +1,10 @@
|
||||
<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">
|
||||
<button class="_button" @click="back()" v-if="history.length > 0"><i class="fas fa-chevron-left"></i></button>
|
||||
<button class="_button" style="pointer-events: none;" v-else><!-- マージンのバランスを取るためのダミー --></button>
|
||||
<span class="title">
|
||||
<XHeader :info="pageInfo" :with-back="false"/>
|
||||
<XHeader :info="pageInfo" :back-button="history.length > 0" @back="back()" :close-button="true" @close="$refs.modal.close()"/>
|
||||
</span>
|
||||
<button class="_button" @click="$refs.modal.close()"><i class="fas fa-times"></i></button>
|
||||
</div>
|
||||
<div class="body _flat_">
|
||||
<keep-alive>
|
||||
@ -177,35 +174,19 @@ export default defineComponent({
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0px 1px var(--divider);
|
||||
|
||||
> button {
|
||||
height: $height;
|
||||
width: $height;
|
||||
|
||||
@media (max-width: 500px) {
|
||||
height: $height-narrow;
|
||||
width: $height-narrow;
|
||||
}
|
||||
}
|
||||
|
||||
> .title {
|
||||
flex: 1;
|
||||
line-height: $height;
|
||||
padding-left: 32px;
|
||||
height: $height;
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
pointer-events: none;
|
||||
|
||||
@media (max-width: 500px) {
|
||||
line-height: $height-narrow;
|
||||
height: $height-narrow;
|
||||
padding-left: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
> button + .title {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
> .body {
|
||||
|
||||
@ -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 () => {
|
||||
|
||||
@ -24,8 +24,8 @@
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import notePage from '../filters/note';
|
||||
import { userPage } from '../filters/user';
|
||||
import notePage from '@client/filters/note';
|
||||
import { userPage } from '@client/filters/user';
|
||||
import * as os from '@client/os';
|
||||
|
||||
export default defineComponent({
|
||||
|
||||
@ -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 () => {
|
||||
|
||||
@ -11,16 +11,16 @@
|
||||
<template #header>{{ $ts.notificationSetting }}</template>
|
||||
<div class="_monolithic_">
|
||||
<div v-if="showGlobalToggle" class="_section">
|
||||
<MkSwitch v-model:value="useGlobalSetting">
|
||||
<MkSwitch v-model="useGlobalSetting">
|
||||
{{ $ts.useGlobalSetting }}
|
||||
<template #desc>{{ $ts.useGlobalSettingDesc }}</template>
|
||||
<template #caption>{{ $ts.useGlobalSettingDesc }}</template>
|
||||
</MkSwitch>
|
||||
</div>
|
||||
<div v-if="!useGlobalSetting" class="_section">
|
||||
<MkInfo>{{ $ts.notificationSettingDesc }}</MkInfo>
|
||||
<MkButton inline @click="disableAll">{{ $ts.disableAll }}</MkButton>
|
||||
<MkButton inline @click="enableAll">{{ $ts.enableAll }}</MkButton>
|
||||
<MkSwitch v-for="type in notificationTypes" :key="type" v-model:value="typesMap[type]">{{ $t(`_notification._types.${type}`) }}</MkSwitch>
|
||||
<MkSwitch v-for="type in notificationTypes" :key="type" v-model="typesMap[type]">{{ $t(`_notification._types.${type}`) }}</MkSwitch>
|
||||
</div>
|
||||
</div>
|
||||
</XModalWindow>
|
||||
|
||||
@ -62,8 +62,8 @@ import { defineComponent, markRaw } from 'vue';
|
||||
import { getNoteSummary } from '@/misc/get-note-summary';
|
||||
import XReactionIcon from './reaction-icon.vue';
|
||||
import MkFollowButton from './follow-button.vue';
|
||||
import notePage from '../filters/note';
|
||||
import { userPage } from '../filters/user';
|
||||
import notePage from '@client/filters/note';
|
||||
import { userPage } from '@client/filters/user';
|
||||
import { i18n } from '@client/i18n';
|
||||
import * as os from '@client/os';
|
||||
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import { userName } from '../filters/user';
|
||||
import { userName } from '@client/filters/user';
|
||||
import * as os from '@client/os';
|
||||
|
||||
export default defineComponent({
|
||||
|
||||
@ -3,16 +3,12 @@
|
||||
:initial-width="500"
|
||||
:initial-height="500"
|
||||
:can-resize="true"
|
||||
:close-right="true"
|
||||
:close-button="false"
|
||||
:contextmenu="contextmenu"
|
||||
@closed="$emit('closed')"
|
||||
>
|
||||
<template #header>
|
||||
<XHeader :info="pageInfo" :with-back="false"/>
|
||||
</template>
|
||||
<template #buttons>
|
||||
<button class="_button" @click="back()" v-if="history.length > 0"><i class="fas fa-chevron-left"></i></button>
|
||||
<button class="_button" style="pointer-events: none;" v-else><!-- マージンのバランスを取るためのダミー --></button>
|
||||
<XHeader :info="pageInfo" :back-button="history.length > 0" @back="back()" :close-button="true" @close="close()"/>
|
||||
</template>
|
||||
<div class="yrolvcoq _flat_">
|
||||
<component :is="component" v-bind="props" :ref="changePage"/>
|
||||
@ -139,6 +135,10 @@ export default defineComponent({
|
||||
this.navigate(this.history.pop(), false);
|
||||
},
|
||||
|
||||
close() {
|
||||
this.$refs.window.close();
|
||||
},
|
||||
|
||||
expand() {
|
||||
this.$router.push(this.path);
|
||||
this.$refs.window.close();
|
||||
@ -155,6 +155,5 @@ export default defineComponent({
|
||||
<style lang="scss" scoped>
|
||||
.yrolvcoq {
|
||||
min-height: 100%;
|
||||
background: var(--bg);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
<template>
|
||||
<div>
|
||||
<MkInput class="kudkigyw" :value="value" @update:value="updateValue($event)" type="number">{{ hpml.interpolate(block.text) }}</MkInput>
|
||||
<MkInput class="kudkigyw" :model-value="value" @update:modelValue="updateValue($event)" type="number">
|
||||
<template #label>{{ hpml.interpolate(block.text) }}</template>
|
||||
</MkInput>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="ngbfujlo">
|
||||
<MkTextarea :value="text" readonly style="margin: 0;"></MkTextarea>
|
||||
<MkTextarea :model-value="text" readonly style="margin: 0;"></MkTextarea>
|
||||
<MkButton class="button" primary @click="post()" :disabled="posting || posted">
|
||||
<i v-if="posted" class="fas fa-check"></i>
|
||||
<i v-else class="fas fa-paper-plane"></i>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="hkcxmtwj">
|
||||
<MkSwitch :value="value" @update:value="updateValue($event)">{{ hpml.interpolate(block.text) }}</MkSwitch>
|
||||
<MkSwitch :model-value="value" @update:modelValue="updateValue($event)">{{ hpml.interpolate(block.text) }}</MkSwitch>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
<template>
|
||||
<div>
|
||||
<MkInput class="kudkigyw" :value="value" @update:value="updateValue($event)" type="text">{{ hpml.interpolate(block.text) }}</MkInput>
|
||||
<MkInput class="kudkigyw" :model-value="value" @update:modelValue="updateValue($event)" type="text">
|
||||
<template #label>{{ hpml.interpolate(block.text) }}</template>
|
||||
</MkInput>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
<template>
|
||||
<div>
|
||||
<MkTextarea :value="value" @update:value="updateValue($event)">{{ hpml.interpolate(block.text) }}</MkTextarea>
|
||||
<MkTextarea :model-value="value" @update:modelValue="updateValue($event)">
|
||||
<template #label>{{ hpml.interpolate(block.text) }}</template>
|
||||
</MkTextarea>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<MkTextarea :value="text" readonly></MkTextarea>
|
||||
<MkTextarea :model-value="text" readonly></MkTextarea>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
||||
@ -5,8 +5,7 @@
|
||||
</p>
|
||||
<ul ref="choices">
|
||||
<li v-for="(choice, i) in choices" :key="i">
|
||||
<MkInput class="input" :value="choice" @update:value="onInput(i, $event)">
|
||||
<span>{{ $t('_poll.choiceN', { n: i + 1 }) }}</span>
|
||||
<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>
|
||||
@ -16,27 +15,27 @@
|
||||
<MkButton class="add" v-if="choices.length < 10" @click="add">{{ $ts.add }}</MkButton>
|
||||
<MkButton class="add" v-else disabled>{{ $ts._poll.noMore }}</MkButton>
|
||||
<section>
|
||||
<MkSwitch v-model:value="multiple">{{ $ts._poll.canMultipleVote }}</MkSwitch>
|
||||
<MkSwitch v-model="multiple">{{ $ts._poll.canMultipleVote }}</MkSwitch>
|
||||
<div>
|
||||
<MkSelect v-model:value="expiration">
|
||||
<MkSelect v-model="expiration">
|
||||
<template #label>{{ $ts._poll.expiration }}</template>
|
||||
<option value="infinite">{{ $ts._poll.infinite }}</option>
|
||||
<option value="at">{{ $ts._poll.at }}</option>
|
||||
<option value="after">{{ $ts._poll.after }}</option>
|
||||
</MkSelect>
|
||||
<section v-if="expiration === 'at'">
|
||||
<MkInput v-model:value="atDate" type="date" class="input">
|
||||
<span>{{ $ts._poll.deadlineDate }}</span>
|
||||
<MkInput v-model="atDate" type="date" class="input">
|
||||
<template #label>{{ $ts._poll.deadlineDate }}</template>
|
||||
</MkInput>
|
||||
<MkInput v-model:value="atTime" type="time" class="input">
|
||||
<span>{{ $ts._poll.deadlineTime }}</span>
|
||||
<MkInput v-model="atTime" type="time" class="input">
|
||||
<template #label>{{ $ts._poll.deadlineTime }}</template>
|
||||
</MkInput>
|
||||
</section>
|
||||
<section v-if="expiration === 'after'">
|
||||
<MkInput v-model:value="after" type="number" class="input">
|
||||
<span>{{ $ts._poll.duration }}</span>
|
||||
<MkInput v-model="after" type="number" class="input">
|
||||
<template #label>{{ $ts._poll.duration }}</template>
|
||||
</MkInput>
|
||||
<MkSelect v-model:value="unit">
|
||||
<MkSelect v-model="unit">
|
||||
<option value="second">{{ $ts._time.second }}</option>
|
||||
<option value="minute">{{ $ts._time.minute }}</option>
|
||||
<option value="hour">{{ $ts._time.hour }}</option>
|
||||
|
||||
@ -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) }
|
||||
|
||||
@ -37,6 +37,7 @@
|
||||
<MkInfo warn v-if="hasNotSpecifiedMentions" class="hasNotSpecifiedMentions">{{ $ts.notSpecifiedMentionWarning }} - <button class="_textButton" @click="addMissingMention()">{{ $ts.add }}</button></MkInfo>
|
||||
<input v-show="useCw" ref="cw" class="cw" v-model="cw" :placeholder="$ts.annotation" @keydown="onKeydown">
|
||||
<textarea v-model="text" class="text" :class="{ withCw: useCw }" ref="text" :disabled="posting" :placeholder="placeholder" @keydown="onKeydown" @paste="onPaste" @compositionupdate="onCompositionUpdate" @compositionend="onCompositionEnd" />
|
||||
<input v-show="withHashtags" ref="hashtags" class="hashtags" v-model="hashtags" :placeholder="$ts.hashtags" list="hashtags">
|
||||
<XPostFormAttaches class="attaches" :files="files" @updated="updateFiles" @detach="detachFile" @changeSensitive="updateFileSensitive" @changeName="updateFileName"/>
|
||||
<XPollEditor v-if="poll" :poll="poll" @destroyed="poll = null" @updated="onPollUpdate"/>
|
||||
<footer>
|
||||
@ -44,9 +45,13 @@
|
||||
<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" :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>
|
||||
<datalist id="hashtags">
|
||||
<option v-for="hashtag in recentHashtags" :value="hashtag" :key="hashtag"/>
|
||||
</datalist>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -67,10 +72,11 @@ import { Autocomplete } from '@client/scripts/autocomplete';
|
||||
import { noteVisibilities } from '../../types';
|
||||
import * as os from '@client/os';
|
||||
import { selectFile } from '@client/scripts/select-file';
|
||||
import { notePostInterruptors, postFormActions } from '@client/store';
|
||||
import { defaultStore, notePostInterruptors, postFormActions } from '@client/store';
|
||||
import { isMobile } from '@client/scripts/is-mobile';
|
||||
import { throttle } from 'throttle-debounce';
|
||||
import MkInfo from '@client/components/ui/info.vue';
|
||||
import { defaultStore } from '@client/store';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
@ -212,7 +218,10 @@ export default defineComponent({
|
||||
|
||||
max(): number {
|
||||
return this.$instance ? this.$instance.maxNoteTextLength : 1000;
|
||||
}
|
||||
},
|
||||
|
||||
withHashtags: defaultStore.makeGetterSetter('postFormWithHashtags'),
|
||||
hashtags: defaultStore.makeGetterSetter('postFormHashtags'),
|
||||
},
|
||||
|
||||
watch: {
|
||||
@ -303,6 +312,7 @@ export default defineComponent({
|
||||
// TODO: detach when unmount
|
||||
new Autocomplete(this.$refs.text, this, { model: 'text' });
|
||||
new Autocomplete(this.$refs.cw, this, { model: 'cw' });
|
||||
new Autocomplete(this.$refs.hashtags, this, { model: 'hashtags' });
|
||||
|
||||
this.$nextTick(() => {
|
||||
// 書きかけの投稿を復元
|
||||
@ -605,6 +615,11 @@ export default defineComponent({
|
||||
viaMobile: isMobile
|
||||
};
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
// plugin
|
||||
if (notePostInterruptors.length > 0) {
|
||||
for (const interruptor of notePostInterruptors) {
|
||||
@ -618,8 +633,8 @@ export default defineComponent({
|
||||
this.$nextTick(() => {
|
||||
this.deleteDraft();
|
||||
this.$emit('posted');
|
||||
if (this.text && this.text != '') {
|
||||
const hashtags = mfm.parse(this.text).filter(x => x.type === 'hashtag').map(x => x.props.hashtag);
|
||||
if (data.text && data.text != '') {
|
||||
const hashtags = mfm.parse(data.text).filter(x => x.type === 'hashtag').map(x => x.props.hashtag);
|
||||
const history = JSON.parse(localStorage.getItem('hashtags') || '[]') as string[];
|
||||
localStorage.setItem('hashtags', JSON.stringify(unique(hashtags.concat(history))));
|
||||
}
|
||||
@ -649,7 +664,7 @@ export default defineComponent({
|
||||
},
|
||||
|
||||
showActions(ev) {
|
||||
os.modalMenu(postFormActions.map(action => ({
|
||||
os.popupMenu(postFormActions.map(action => ({
|
||||
text: action.title,
|
||||
action: () => {
|
||||
action.handler({
|
||||
@ -785,6 +800,7 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
> .cw,
|
||||
> .hashtags,
|
||||
> .text {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
@ -813,6 +829,13 @@ export default defineComponent({
|
||||
border-bottom: solid 0.5px var(--divider);
|
||||
}
|
||||
|
||||
> .hashtags {
|
||||
z-index: 1;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
border-top: solid 0.5px var(--divider);
|
||||
}
|
||||
|
||||
> .text {
|
||||
max-width: 100%;
|
||||
min-width: 100%;
|
||||
@ -872,6 +895,7 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
> .cw,
|
||||
> .hashtags,
|
||||
> .text {
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
@ -170,7 +170,7 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
> span {
|
||||
color: #fff;
|
||||
color: var(--fgOnAccent);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<div class="_card">
|
||||
<div class="_content">
|
||||
<MkInput v-model:value="text">
|
||||
<span>Text</span>
|
||||
<MkInput v-model="text">
|
||||
<template #label>Text</template>
|
||||
</MkInput>
|
||||
<MkSwitch v-model:value="flag">
|
||||
<MkSwitch v-model="flag">
|
||||
<span>Switch is now {{ flag ? 'on' : 'off' }}</span>
|
||||
</MkSwitch>
|
||||
<div style="margin: 32px 0;">
|
||||
@ -93,7 +93,7 @@ export default defineComponent({
|
||||
},
|
||||
|
||||
async openMenu(ev) {
|
||||
os.modalMenu([{
|
||||
os.popupMenu([{
|
||||
type: 'label',
|
||||
text: 'Fruits'
|
||||
}, {
|
||||
|
||||
@ -3,15 +3,13 @@
|
||||
<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:value="username" type="text" pattern="^[a-zA-Z0-9_]+$" spellcheck="false" autofocus required @update:value="onUsernameChange">
|
||||
<span>{{ $ts.username }}</span>
|
||||
<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:value="password" type="password" :with-password-toggle="true" v-if="!user || user && !user.usePasswordLessLogin" required>
|
||||
<span>{{ $ts.password }}</span>
|
||||
<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 #desc><button class="_textButton" @click="resetPassword">{{ $ts.forgotPassword }}</button></template>
|
||||
<template #caption><button class="_textButton" @click="resetPassword" type="button">{{ $ts.forgotPassword }}</button></template>
|
||||
</MkInput>
|
||||
<MkButton type="submit" primary :disabled="signing" style="margin: 0 auto;">{{ signing ? $ts.loggingIn : $ts.login }}</MkButton>
|
||||
</div>
|
||||
@ -27,12 +25,12 @@
|
||||
</div>
|
||||
<div class="twofa-group totp-group">
|
||||
<p style="margin-bottom:0;">{{ $ts.twoStepAuthentication }}</p>
|
||||
<MkInput v-model:value="password" type="password" :with-password-toggle="true" v-if="user && user.usePasswordLessLogin" required>
|
||||
<span>{{ $ts.password }}</span>
|
||||
<MkInput v-model="password" type="password" :with-password-toggle="true" v-if="user && user.usePasswordLessLogin" required>
|
||||
<template #label>{{ $ts.password }}</template>
|
||||
<template #prefix><i class="fas fa-lock"></i></template>
|
||||
</MkInput>
|
||||
<MkInput v-model:value="token" type="text" pattern="^[0-9]{6}$" autocomplete="off" spellcheck="false" required>
|
||||
<span>{{ $ts.token }}</span>
|
||||
<MkInput v-model="token" type="text" pattern="^[0-9]{6}$" autocomplete="off" spellcheck="false" required>
|
||||
<template #label>{{ $ts.token }}</template>
|
||||
<template #prefix><i class="fas fa-gavel"></i></template>
|
||||
</MkInput>
|
||||
<MkButton type="submit" :disabled="signing" primary style="margin: 0 auto;">{{ signing ? $ts.loggingIn : $ts.login }}</MkButton>
|
||||
|
||||
@ -1,39 +1,39 @@
|
||||
<template>
|
||||
<form class="mk-signup" @submit.prevent="onSubmit" :autocomplete="Math.random()">
|
||||
<template v-if="meta">
|
||||
<MkInput v-if="meta.disableRegistration" v-model:value="invitationCode" type="text" :autocomplete="Math.random()" spellcheck="false" required>
|
||||
<span>{{ $ts.invitationCode }}</span>
|
||||
<MkInput v-if="meta.disableRegistration" v-model="invitationCode" type="text" :autocomplete="Math.random()" spellcheck="false" required>
|
||||
<template #label>{{ $ts.invitationCode }}</template>
|
||||
<template #prefix><i class="fas fa-key"></i></template>
|
||||
</MkInput>
|
||||
<MkInput v-model:value="username" type="text" pattern="^[a-zA-Z0-9_]{1,20}$" :autocomplete="Math.random()" spellcheck="false" required @update:value="onChangeUsername">
|
||||
<span>{{ $ts.username }}</span>
|
||||
<MkInput v-model="username" type="text" pattern="^[a-zA-Z0-9_]{1,20}$" :autocomplete="Math.random()" spellcheck="false" required @update:modelValue="onChangeUsername">
|
||||
<template #label>{{ $ts.username }}</template>
|
||||
<template #prefix>@</template>
|
||||
<template #suffix>@{{ host }}</template>
|
||||
<template #desc>
|
||||
<template #caption>
|
||||
<span v-if="usernameState == 'wait'" style="color:#999"><i class="fas fa-spinner fa-pulse fa-fw"></i> {{ $ts.checking }}</span>
|
||||
<span v-if="usernameState == 'ok'" style="color:#3CB7B5"><i class="fas fa-check fa-fw"></i> {{ $ts.available }}</span>
|
||||
<span v-if="usernameState == 'unavailable'" style="color:#FF1161"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.unavailable }}</span>
|
||||
<span v-if="usernameState == 'error'" style="color:#FF1161"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.error }}</span>
|
||||
<span v-if="usernameState == 'invalid-format'" style="color:#FF1161"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.usernameInvalidFormat }}</span>
|
||||
<span v-if="usernameState == 'min-range'" style="color:#FF1161"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.tooShort }}</span>
|
||||
<span v-if="usernameState == 'max-range'" style="color:#FF1161"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.tooLong }}</span>
|
||||
<span v-if="usernameState == 'ok'" style="color: var(--success)"><i class="fas fa-check fa-fw"></i> {{ $ts.available }}</span>
|
||||
<span v-if="usernameState == 'unavailable'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.unavailable }}</span>
|
||||
<span v-if="usernameState == 'error'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.error }}</span>
|
||||
<span v-if="usernameState == 'invalid-format'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.usernameInvalidFormat }}</span>
|
||||
<span v-if="usernameState == 'min-range'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.tooShort }}</span>
|
||||
<span v-if="usernameState == 'max-range'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.tooLong }}</span>
|
||||
</template>
|
||||
</MkInput>
|
||||
<MkInput v-model:value="password" type="password" :autocomplete="Math.random()" required @update:value="onChangePassword">
|
||||
<span>{{ $ts.password }}</span>
|
||||
<MkInput v-model="password" type="password" :autocomplete="Math.random()" required @update:modelValue="onChangePassword">
|
||||
<template #label>{{ $ts.password }}</template>
|
||||
<template #prefix><i class="fas fa-lock"></i></template>
|
||||
<template #desc>
|
||||
<p v-if="passwordStrength == 'low'" style="color:#FF1161"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.weakPassword }}</p>
|
||||
<p v-if="passwordStrength == 'medium'" style="color:#3CB7B5"><i class="fas fa-check fa-fw"></i> {{ $ts.normalPassword }}</p>
|
||||
<p v-if="passwordStrength == 'high'" style="color:#3CB7B5"><i class="fas fa-check fa-fw"></i> {{ $ts.strongPassword }}</p>
|
||||
<template #caption>
|
||||
<span v-if="passwordStrength == 'low'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.weakPassword }}</span>
|
||||
<span v-if="passwordStrength == 'medium'" style="color: var(--warn)"><i class="fas fa-check fa-fw"></i> {{ $ts.normalPassword }}</span>
|
||||
<span v-if="passwordStrength == 'high'" style="color: var(--success)"><i class="fas fa-check fa-fw"></i> {{ $ts.strongPassword }}</span>
|
||||
</template>
|
||||
</MkInput>
|
||||
<MkInput v-model:value="retypedPassword" type="password" :autocomplete="Math.random()" required @update:value="onChangePasswordRetype">
|
||||
<span>{{ $ts.password }} ({{ $ts.retype }})</span>
|
||||
<MkInput v-model="retypedPassword" type="password" :autocomplete="Math.random()" required @update:modelValue="onChangePasswordRetype">
|
||||
<template #label>{{ $ts.password }} ({{ $ts.retype }})</template>
|
||||
<template #prefix><i class="fas fa-lock"></i></template>
|
||||
<template #desc>
|
||||
<p v-if="passwordRetypeState == 'match'" style="color:#3CB7B5"><i class="fas fa-check fa-fw"></i> {{ $ts.passwordMatched }}</p>
|
||||
<p v-if="passwordRetypeState == 'not-match'" style="color:#FF1161"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.passwordNotMatched }}</p>
|
||||
<template #caption>
|
||||
<span v-if="passwordRetypeState == 'match'" style="color: var(--success)"><i class="fas fa-check fa-fw"></i> {{ $ts.passwordMatched }}</span>
|
||||
<span v-if="passwordRetypeState == 'not-match'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.passwordNotMatched }}</span>
|
||||
</template>
|
||||
</MkInput>
|
||||
<label v-if="meta.tosUrl" class="tou">
|
||||
|
||||
@ -14,13 +14,15 @@
|
||||
<MkInfo warn>{{ information }}</MkInfo>
|
||||
</div>
|
||||
<div class="_section">
|
||||
<MkInput v-model:value="name">{{ $ts.name }}</MkInput>
|
||||
<MkInput v-model="name">
|
||||
<template #label>{{ $ts.name }}</template>
|
||||
</MkInput>
|
||||
</div>
|
||||
<div class="_section">
|
||||
<div style="margin-bottom: 16px;"><b>{{ $ts.permission }}</b></div>
|
||||
<MkButton inline @click="disableAll">{{ $ts.disableAll }}</MkButton>
|
||||
<MkButton inline @click="enableAll">{{ $ts.enableAll }}</MkButton>
|
||||
<MkSwitch v-for="kind in (initialPermissions || kinds)" :key="kind" v-model:value="permissions[kind]">{{ $t(`_permissions.${kind}`) }}</MkSwitch>
|
||||
<MkSwitch v-for="kind in (initialPermissions || kinds)" :key="kind" v-model="permissions[kind]">{{ $t(`_permissions.${kind}`) }}</MkSwitch>
|
||||
</div>
|
||||
</XModalWindow>
|
||||
</template>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<component class="bghgjjyj _button"
|
||||
:is="link ? 'a' : 'button'"
|
||||
:is="link ? 'MkA' : 'button'"
|
||||
:class="{ inline, primary, danger, full }"
|
||||
:type="type"
|
||||
@click="$emit('click', $event)"
|
||||
@ -115,6 +115,7 @@ export default defineComponent({
|
||||
z-index: 1; // 他コンポーネントのbox-shadowに隠されないようにするため
|
||||
display: block;
|
||||
min-width: 100px;
|
||||
width: max-content;
|
||||
padding: 8px 14px;
|
||||
text-align: center;
|
||||
font-weight: normal;
|
||||
@ -125,6 +126,8 @@ export default defineComponent({
|
||||
background: var(--buttonBg);
|
||||
border-radius: 999px;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
transition: background 0.1s ease;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: var(--buttonHoverBg);
|
||||
@ -140,7 +143,7 @@ export default defineComponent({
|
||||
|
||||
&.primary {
|
||||
font-weight: bold;
|
||||
color: #fff !important;
|
||||
color: var(--fgOnAccent) !important;
|
||||
background: var(--accent);
|
||||
|
||||
&:not(:disabled):hover {
|
||||
@ -174,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 {
|
||||
|
||||
@ -99,9 +99,12 @@ export default defineComponent({
|
||||
z-index: 10;
|
||||
position: sticky;
|
||||
top: var(--stickyTop, 0px);
|
||||
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 {
|
||||
margin: 0;
|
||||
|
||||
@ -1,32 +1,9 @@
|
||||
<template>
|
||||
<div class="juejbjww" :class="{ focused, filled, inline, disabled }">
|
||||
<div class="icon" ref="icon"><slot name="icon"></slot></div>
|
||||
<div class="input">
|
||||
<span class="label" ref="labelEl"><slot></slot></span>
|
||||
<span class="title" ref="title">
|
||||
<slot name="title"></slot>
|
||||
<span class="warning" v-if="invalid"><i class="fas fa-exclamation-circle"></i>{{ $refs.input.validationMessage }}</span>
|
||||
</span>
|
||||
<div class="matxzzsk">
|
||||
<div class="label" @click="focus"><slot name="label"></slot></div>
|
||||
<div class="input" :class="{ inline, disabled, focused }">
|
||||
<div class="prefix" ref="prefixEl"><slot name="prefix"></slot></div>
|
||||
<input v-if="debounce" ref="inputEl"
|
||||
v-debounce="500"
|
||||
:type="type"
|
||||
v-model.lazy="v"
|
||||
:disabled="disabled"
|
||||
:required="required"
|
||||
:readonly="readonly"
|
||||
:placeholder="placeholder"
|
||||
:pattern="pattern"
|
||||
:autocomplete="autocomplete"
|
||||
:spellcheck="spellcheck"
|
||||
:step="step"
|
||||
@focus="focused = true"
|
||||
@blur="focused = false"
|
||||
@keydown="onKeydown($event)"
|
||||
@input="onInput"
|
||||
:list="id"
|
||||
>
|
||||
<input v-else ref="inputEl"
|
||||
<input ref="inputEl"
|
||||
:type="type"
|
||||
v-model="v"
|
||||
:disabled="disabled"
|
||||
@ -48,23 +25,25 @@
|
||||
</datalist>
|
||||
<div class="suffix" ref="suffixEl"><slot name="suffix"></slot></div>
|
||||
</div>
|
||||
<button class="save _textButton" v-if="save && changed" @click="() => { changed = false; save(); }">{{ $ts.save }}</button>
|
||||
<div class="desc _caption"><slot name="desc"></slot></div>
|
||||
<div class="caption"><slot name="caption"></slot></div>
|
||||
|
||||
<MkButton v-if="manualSave && changed" @click="updated" primary><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, onMounted, onUnmounted, nextTick, ref, watch, computed, toRefs } from 'vue';
|
||||
import debounce from 'v-debounce';
|
||||
import * as os from '@client/os';
|
||||
import MkButton from './button.vue';
|
||||
import { debounce } from 'throttle-debounce';
|
||||
|
||||
export default defineComponent({
|
||||
directives: {
|
||||
debounce
|
||||
components: {
|
||||
MkButton,
|
||||
},
|
||||
|
||||
props: {
|
||||
value: {
|
||||
required: false
|
||||
modelValue: {
|
||||
required: true
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
@ -104,9 +83,6 @@ export default defineComponent({
|
||||
step: {
|
||||
required: false
|
||||
},
|
||||
debounce: {
|
||||
required: false
|
||||
},
|
||||
datalist: {
|
||||
type: Array,
|
||||
required: false,
|
||||
@ -116,15 +92,23 @@ export default defineComponent({
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
save: {
|
||||
type: Function,
|
||||
debounce: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
manualSave: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
},
|
||||
emits: ['change', 'keydown', 'enter'],
|
||||
|
||||
emits: ['change', 'keydown', 'enter', 'update:modelValue'],
|
||||
|
||||
setup(props, context) {
|
||||
const { value, type, autofocus } = toRefs(props);
|
||||
const v = ref(value.value);
|
||||
const { modelValue, type, autofocus } = toRefs(props);
|
||||
const v = ref(modelValue.value);
|
||||
const id = Math.random().toString(); // TODO: uuid?
|
||||
const focused = ref(false);
|
||||
const changed = ref(false);
|
||||
@ -133,7 +117,6 @@ export default defineComponent({
|
||||
const inputEl = ref(null);
|
||||
const prefixEl = ref(null);
|
||||
const suffixEl = ref(null);
|
||||
const labelEl = ref(null);
|
||||
|
||||
const focus = () => inputEl.value.focus();
|
||||
const onInput = (ev) => {
|
||||
@ -148,15 +131,28 @@ export default defineComponent({
|
||||
}
|
||||
};
|
||||
|
||||
watch(value, newValue => {
|
||||
const updated = () => {
|
||||
changed.value = false;
|
||||
if (type?.value === 'number') {
|
||||
context.emit('update:modelValue', parseFloat(v.value));
|
||||
} else {
|
||||
context.emit('update:modelValue', v.value);
|
||||
}
|
||||
};
|
||||
|
||||
const debouncedUpdated = debounce(1000, updated);
|
||||
|
||||
watch(modelValue, newValue => {
|
||||
v.value = newValue;
|
||||
});
|
||||
|
||||
watch(v, newValue => {
|
||||
if (type?.value === 'number') {
|
||||
context.emit('update:value', parseFloat(newValue));
|
||||
} else {
|
||||
context.emit('update:value', newValue);
|
||||
if (!props.manualSave) {
|
||||
if (props.debounce) {
|
||||
debouncedUpdated();
|
||||
} else {
|
||||
updated();
|
||||
}
|
||||
}
|
||||
|
||||
invalid.value = inputEl.value.validity.badInput;
|
||||
@ -172,7 +168,6 @@ export default defineComponent({
|
||||
// 非表示状態だと要素の幅などは0になってしまうので、定期的に計算する
|
||||
const clock = setInterval(() => {
|
||||
if (prefixEl.value) {
|
||||
labelEl.value.style.left = (prefixEl.value.offsetLeft + prefixEl.value.offsetWidth) + 'px';
|
||||
if (prefixEl.value.offsetWidth) {
|
||||
inputEl.value.style.paddingLeft = prefixEl.value.offsetWidth + 'px';
|
||||
}
|
||||
@ -200,148 +195,78 @@ export default defineComponent({
|
||||
inputEl,
|
||||
prefixEl,
|
||||
suffixEl,
|
||||
labelEl,
|
||||
focus,
|
||||
onInput,
|
||||
onKeydown,
|
||||
updated,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.juejbjww {
|
||||
position: relative;
|
||||
margin: 32px 0;
|
||||
.matxzzsk {
|
||||
margin: 1.5em 0;
|
||||
|
||||
&:not(.inline):first-child {
|
||||
margin-top: 8px;
|
||||
> .label {
|
||||
font-size: 0.85em;
|
||||
padding: 0 0 8px 12px;
|
||||
user-select: none;
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.inline):last-child {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
> .caption {
|
||||
font-size: 0.8em;
|
||||
padding: 8px 0 0 12px;
|
||||
color: var(--fgTransparentWeak);
|
||||
|
||||
> .icon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 24px;
|
||||
text-align: center;
|
||||
line-height: 32px;
|
||||
|
||||
&:not(:empty) + .input {
|
||||
margin-left: 28px;
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
> .input {
|
||||
$height: 42px;
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
background: var(--inputBorder);
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 2px;
|
||||
background: var(--accent);
|
||||
opacity: 0;
|
||||
transform: scaleX(0.12);
|
||||
transition: border 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
will-change: border opacity transform;
|
||||
}
|
||||
|
||||
> .label {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
transition: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||
transition-duration: 0.3s;
|
||||
font-size: 1em;
|
||||
line-height: 32px;
|
||||
color: var(--inputLabel);
|
||||
pointer-events: none;
|
||||
//will-change transform
|
||||
transform-origin: top left;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
> .title {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: -17px;
|
||||
left: 0 !important;
|
||||
pointer-events: none;
|
||||
font-size: 1em;
|
||||
line-height: 32px;
|
||||
color: var(--inputLabel);
|
||||
pointer-events: none;
|
||||
//will-change transform
|
||||
transform-origin: top left;
|
||||
transform: scale(.75);
|
||||
white-space: nowrap;
|
||||
width: 133%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
> .warning {
|
||||
margin-left: 0.5em;
|
||||
color: var(--infoWarnFg);
|
||||
|
||||
> svg {
|
||||
margin-right: 0.1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> input {
|
||||
$height: 32px;
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
display: block;
|
||||
height: $height;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
padding: 0 12px;
|
||||
font: inherit;
|
||||
font-weight: normal;
|
||||
font-size: 1em;
|
||||
line-height: $height;
|
||||
color: var(--inputText);
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
color: var(--fg);
|
||||
background: var(--panel);
|
||||
border: solid 1px var(--inputBorder);
|
||||
border-radius: 6px;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
box-sizing: border-box;
|
||||
transition: border-color 0.1s ease-out;
|
||||
|
||||
&[type='file'] {
|
||||
display: none;
|
||||
&:hover {
|
||||
border-color: var(--inputBorderHover);
|
||||
}
|
||||
}
|
||||
|
||||
> .prefix,
|
||||
> .suffix {
|
||||
display: block;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
padding: 0 12px;
|
||||
font-size: 1em;
|
||||
line-height: 32px;
|
||||
color: var(--inputLabel);
|
||||
height: $height;
|
||||
pointer-events: none;
|
||||
|
||||
&:empty {
|
||||
@ -360,67 +285,33 @@ export default defineComponent({
|
||||
|
||||
> .prefix {
|
||||
left: 0;
|
||||
padding-right: 4px;
|
||||
padding-right: 6px;
|
||||
}
|
||||
|
||||
> .suffix {
|
||||
right: 0;
|
||||
padding-left: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
> .save {
|
||||
margin: 6px 0 0 0;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
> .desc {
|
||||
margin: 6px 0 0 0;
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
padding-left: 6px;
|
||||
}
|
||||
|
||||
* {
|
||||
&.inline {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.focused {
|
||||
> .input {
|
||||
&:after {
|
||||
opacity: 1;
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
> .label {
|
||||
color: var(--accent);
|
||||
&.focused {
|
||||
> input {
|
||||
border-color: var(--accent);
|
||||
//box-shadow: 0 0 0 4px var(--focus);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.focused,
|
||||
&.filled {
|
||||
> .input {
|
||||
> .label {
|
||||
top: -17px;
|
||||
left: 0 !important;
|
||||
transform: scale(0.75);
|
||||
&.disabled {
|
||||
opacity: 0.7;
|
||||
|
||||
&, * {
|
||||
cursor: not-allowed !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.inline {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
opacity: 0.7;
|
||||
|
||||
&, * {
|
||||
cursor: not-allowed !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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
216
src/client/components/ui/popup.vue
Normal 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>
|
||||
@ -1,185 +1,218 @@
|
||||
<template>
|
||||
<div class="eiipwacr" :class="{ focused, disabled, filled, inline }">
|
||||
<div class="icon" ref="icon"><slot name="icon"></slot></div>
|
||||
<div class="input" @click="focus">
|
||||
<span class="label" ref="label"><slot name="label"></slot></span>
|
||||
<div class="prefix" ref="prefix"><slot name="prefix"></slot></div>
|
||||
<select ref="input"
|
||||
<div class="vblkjoeq">
|
||||
<div class="label" @click="focus"><slot name="label"></slot></div>
|
||||
<div class="input" :class="{ inline, disabled, focused }">
|
||||
<div class="prefix" ref="prefixEl"><slot name="prefix"></slot></div>
|
||||
<select ref="inputEl"
|
||||
v-model="v"
|
||||
:required="required"
|
||||
:disabled="disabled"
|
||||
:required="required"
|
||||
:readonly="readonly"
|
||||
:placeholder="placeholder"
|
||||
@focus="focused = true"
|
||||
@blur="focused = false"
|
||||
@input="onInput"
|
||||
>
|
||||
<slot></slot>
|
||||
</select>
|
||||
<div class="suffix">
|
||||
<slot name="suffix">
|
||||
<i class="fas fa-chevron-down"></i>
|
||||
</slot>
|
||||
</div>
|
||||
<div class="suffix" ref="suffixEl"><i class="fas fa-chevron-down"></i></div>
|
||||
</div>
|
||||
<div class="text"><slot name="text"></slot></div>
|
||||
<div class="caption"><slot name="caption"></slot></div>
|
||||
|
||||
<MkButton v-if="manualSave && changed" @click="updated" primary><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import { defineComponent, onMounted, onUnmounted, nextTick, ref, watch, computed, toRefs } from 'vue';
|
||||
import MkButton from './button.vue';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
MkButton,
|
||||
},
|
||||
|
||||
props: {
|
||||
value: {
|
||||
required: false
|
||||
modelValue: {
|
||||
required: true
|
||||
},
|
||||
required: {
|
||||
type: Boolean,
|
||||
required: false
|
||||
},
|
||||
readonly: {
|
||||
type: Boolean,
|
||||
required: false
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
required: false
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
required: false
|
||||
},
|
||||
autofocus: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
inline: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
manualSave: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
},
|
||||
data() {
|
||||
|
||||
emits: ['change', 'update:modelValue'],
|
||||
|
||||
setup(props, context) {
|
||||
const { modelValue, autofocus } = toRefs(props);
|
||||
const v = ref(modelValue.value);
|
||||
const focused = ref(false);
|
||||
const changed = ref(false);
|
||||
const invalid = ref(false);
|
||||
const filled = computed(() => v.value !== '' && v.value != null);
|
||||
const inputEl = ref(null);
|
||||
const prefixEl = ref(null);
|
||||
const suffixEl = ref(null);
|
||||
|
||||
const focus = () => inputEl.value.focus();
|
||||
const onInput = (ev) => {
|
||||
changed.value = true;
|
||||
context.emit('change', ev);
|
||||
};
|
||||
|
||||
const updated = () => {
|
||||
changed.value = false;
|
||||
context.emit('update:modelValue', v.value);
|
||||
};
|
||||
|
||||
watch(modelValue, newValue => {
|
||||
v.value = newValue;
|
||||
});
|
||||
|
||||
watch(v, newValue => {
|
||||
if (!props.manualSave) {
|
||||
updated();
|
||||
}
|
||||
|
||||
invalid.value = inputEl.value.validity.badInput;
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
if (autofocus.value) {
|
||||
focus();
|
||||
}
|
||||
|
||||
// このコンポーネントが作成された時、非表示状態である場合がある
|
||||
// 非表示状態だと要素の幅などは0になってしまうので、定期的に計算する
|
||||
const clock = setInterval(() => {
|
||||
if (prefixEl.value) {
|
||||
if (prefixEl.value.offsetWidth) {
|
||||
inputEl.value.style.paddingLeft = prefixEl.value.offsetWidth + 'px';
|
||||
}
|
||||
}
|
||||
if (suffixEl.value) {
|
||||
if (suffixEl.value.offsetWidth) {
|
||||
inputEl.value.style.paddingRight = suffixEl.value.offsetWidth + 'px';
|
||||
}
|
||||
}
|
||||
}, 100);
|
||||
|
||||
onUnmounted(() => {
|
||||
clearInterval(clock);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
return {
|
||||
focused: false,
|
||||
v,
|
||||
focused,
|
||||
invalid,
|
||||
changed,
|
||||
filled,
|
||||
inputEl,
|
||||
prefixEl,
|
||||
suffixEl,
|
||||
focus,
|
||||
onInput,
|
||||
updated,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
v: {
|
||||
get() {
|
||||
return this.value;
|
||||
},
|
||||
set(v) {
|
||||
this.$emit('update:value', v);
|
||||
}
|
||||
},
|
||||
filled(): boolean {
|
||||
return true;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (this.$refs.prefix) {
|
||||
this.$refs.label.style.left = (this.$refs.prefix.offsetLeft + this.$refs.prefix.offsetWidth) + 'px';
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
focus() {
|
||||
this.$refs.input.focus();
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.eiipwacr {
|
||||
position: relative;
|
||||
margin: 32px 0;
|
||||
.vblkjoeq {
|
||||
margin: 1.5em 0;
|
||||
|
||||
&:not(.inline):first-child {
|
||||
margin-top: 8px;
|
||||
> .label {
|
||||
font-size: 0.85em;
|
||||
padding: 0 0 8px 12px;
|
||||
user-select: none;
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.inline):last-child {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
> .caption {
|
||||
font-size: 0.8em;
|
||||
padding: 8px 0 0 12px;
|
||||
color: var(--fgTransparentWeak);
|
||||
|
||||
> .icon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 24px;
|
||||
text-align: center;
|
||||
line-height: 32px;
|
||||
|
||||
&:not(:empty) + .input {
|
||||
margin-left: 28px;
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
> .input {
|
||||
display: flex;
|
||||
$height: 42px;
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
background: var(--inputBorder);
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 2px;
|
||||
background: var(--accent);
|
||||
opacity: 0;
|
||||
transform: scaleX(0.12);
|
||||
transition: border 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
will-change: border opacity transform;
|
||||
}
|
||||
|
||||
> .label {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
transition: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||
transition-duration: 0.3s;
|
||||
font-size: 1em;
|
||||
line-height: 32px;
|
||||
pointer-events: none;
|
||||
//will-change transform
|
||||
transform-origin: top left;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
> select {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
display: block;
|
||||
flex: 1;
|
||||
height: $height;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
padding: 0 12px;
|
||||
font: inherit;
|
||||
font-weight: normal;
|
||||
font-size: 1em;
|
||||
height: 32px;
|
||||
background: none;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
color: var(--fg);
|
||||
background: var(--panel);
|
||||
border: solid 1px var(--inputBorder);
|
||||
border-radius: 6px;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
color: var(--fg);
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.1s ease-out;
|
||||
|
||||
option,
|
||||
optgroup {
|
||||
color: var(--fg);
|
||||
background: var(--bg);
|
||||
&:hover {
|
||||
border-color: var(--inputBorderHover);
|
||||
}
|
||||
}
|
||||
|
||||
> .prefix,
|
||||
> .suffix {
|
||||
display: block;
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
padding: 0 12px;
|
||||
font-size: 1em;
|
||||
line-height: 32px;
|
||||
color: var(--inputLabel);
|
||||
height: $height;
|
||||
pointer-events: none;
|
||||
|
||||
&:empty {
|
||||
@ -187,53 +220,41 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
> * {
|
||||
display: block;
|
||||
display: inline-block;
|
||||
min-width: 16px;
|
||||
max-width: 150px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
> .prefix {
|
||||
padding-right: 4px;
|
||||
left: 0;
|
||||
padding-right: 6px;
|
||||
}
|
||||
|
||||
> .suffix {
|
||||
padding-left: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
> .text {
|
||||
margin: 6px 0;
|
||||
font-size: 0.8em;
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
right: 0;
|
||||
padding-left: 6px;
|
||||
}
|
||||
|
||||
* {
|
||||
&.inline {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.focused {
|
||||
> .input {
|
||||
&:after {
|
||||
opacity: 1;
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
> .label {
|
||||
color: var(--accent);
|
||||
&.focused {
|
||||
> select {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.focused,
|
||||
&.filled {
|
||||
> .input {
|
||||
> .label {
|
||||
top: -17px;
|
||||
left: 0 !important;
|
||||
transform: scale(0.75);
|
||||
&.disabled {
|
||||
opacity: 0.7;
|
||||
|
||||
&, * {
|
||||
cursor: not-allowed !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
</span>
|
||||
<span class="label">
|
||||
<span><slot></slot></span>
|
||||
<p><slot name="desc"></slot></p>
|
||||
<p><slot name="caption"></slot></p>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
@ -28,7 +28,7 @@ import { defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
value: {
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
@ -39,13 +39,13 @@ export default defineComponent({
|
||||
},
|
||||
computed: {
|
||||
checked(): boolean {
|
||||
return this.value;
|
||||
return this.modelValue;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggle() {
|
||||
if (this.disabled) return;
|
||||
this.$emit('update:value', !this.checked);
|
||||
this.$emit('update:modelValue', !this.checked);
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -136,7 +136,7 @@ export default defineComponent({
|
||||
|
||||
> p {
|
||||
margin: 0;
|
||||
opacity: 0.7;
|
||||
color: var(--fgTransparentWeak);
|
||||
font-size: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,30 +1,45 @@
|
||||
<template>
|
||||
<div class="adhpbeos" :class="{ focused, filled, tall, pre }">
|
||||
<div class="input">
|
||||
<span class="label" ref="label"><slot></slot></span>
|
||||
<textarea ref="input" :class="{ code, _monospace: code }"
|
||||
:value="value"
|
||||
<div class="adhpbeos">
|
||||
<div class="label" @click="focus"><slot name="label"></slot></div>
|
||||
<div class="input" :class="{ disabled, focused, tall, pre }">
|
||||
<textarea ref="inputEl"
|
||||
:class="{ code, _monospace: code }"
|
||||
v-model="v"
|
||||
:disabled="disabled"
|
||||
:required="required"
|
||||
:readonly="readonly"
|
||||
:placeholder="placeholder"
|
||||
:pattern="pattern"
|
||||
:autocomplete="autocomplete"
|
||||
:spellcheck="!code"
|
||||
@input="onInput"
|
||||
:spellcheck="spellcheck"
|
||||
@focus="focused = true"
|
||||
@blur="focused = false"
|
||||
@keydown="onKeydown($event)"
|
||||
@input="onInput"
|
||||
></textarea>
|
||||
</div>
|
||||
<button class="save _textButton" v-if="save && changed" @click="() => { changed = false; save(); }">{{ $ts.save }}</button>
|
||||
<div class="desc _caption"><slot name="desc"></slot></div>
|
||||
<div class="caption"><slot name="caption"></slot></div>
|
||||
|
||||
<MkButton v-if="manualSave && changed" @click="updated" primary><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import { defineComponent, onMounted, onUnmounted, nextTick, ref, watch, computed, toRefs } from 'vue';
|
||||
import MkButton from './button.vue';
|
||||
import { debounce } from 'throttle-debounce';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
MkButton,
|
||||
},
|
||||
|
||||
props: {
|
||||
value: {
|
||||
modelValue: {
|
||||
required: true
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
required: false
|
||||
},
|
||||
required: {
|
||||
@ -35,14 +50,29 @@ export default defineComponent({
|
||||
type: Boolean,
|
||||
required: false
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
required: false
|
||||
},
|
||||
pattern: {
|
||||
type: String,
|
||||
required: false
|
||||
},
|
||||
autocomplete: {
|
||||
placeholder: {
|
||||
type: String,
|
||||
required: false
|
||||
},
|
||||
autofocus: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
autocomplete: {
|
||||
required: false
|
||||
},
|
||||
spellcheck: {
|
||||
required: false
|
||||
},
|
||||
code: {
|
||||
type: Boolean,
|
||||
required: false
|
||||
@ -57,169 +87,164 @@ export default defineComponent({
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
save: {
|
||||
type: Function,
|
||||
debounce: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
manualSave: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
},
|
||||
data() {
|
||||
|
||||
emits: ['change', 'keydown', 'enter', 'update:modelValue'],
|
||||
|
||||
setup(props, context) {
|
||||
const { modelValue, autofocus } = toRefs(props);
|
||||
const v = ref(modelValue.value);
|
||||
const focused = ref(false);
|
||||
const changed = ref(false);
|
||||
const invalid = ref(false);
|
||||
const filled = computed(() => v.value !== '' && v.value != null);
|
||||
const inputEl = ref(null);
|
||||
|
||||
const focus = () => inputEl.value.focus();
|
||||
const onInput = (ev) => {
|
||||
changed.value = true;
|
||||
context.emit('change', ev);
|
||||
};
|
||||
const onKeydown = (ev: KeyboardEvent) => {
|
||||
context.emit('keydown', ev);
|
||||
|
||||
if (ev.code === 'Enter') {
|
||||
context.emit('enter');
|
||||
}
|
||||
};
|
||||
|
||||
const updated = () => {
|
||||
changed.value = false;
|
||||
context.emit('update:modelValue', v.value);
|
||||
};
|
||||
|
||||
const debouncedUpdated = debounce(1000, updated);
|
||||
|
||||
watch(modelValue, newValue => {
|
||||
v.value = newValue;
|
||||
});
|
||||
|
||||
watch(v, newValue => {
|
||||
if (!props.manualSave) {
|
||||
if (props.debounce) {
|
||||
debouncedUpdated();
|
||||
} else {
|
||||
updated();
|
||||
}
|
||||
}
|
||||
|
||||
invalid.value = inputEl.value.validity.badInput;
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
if (autofocus.value) {
|
||||
focus();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
return {
|
||||
focused: false,
|
||||
changed: false,
|
||||
}
|
||||
v,
|
||||
focused,
|
||||
invalid,
|
||||
changed,
|
||||
filled,
|
||||
inputEl,
|
||||
focus,
|
||||
onInput,
|
||||
onKeydown,
|
||||
updated,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
filled(): boolean {
|
||||
return this.value != '' && this.value != null;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
focus() {
|
||||
this.$refs.input.focus();
|
||||
},
|
||||
onInput(ev) {
|
||||
this.changed = true;
|
||||
this.$emit('update:value', ev.target.value);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.adhpbeos {
|
||||
margin: 42px 0 32px 0;
|
||||
position: relative;
|
||||
margin: 1.5em 0;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 16px;
|
||||
> .label {
|
||||
font-size: 0.85em;
|
||||
padding: 0 0 8px 12px;
|
||||
user-select: none;
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
> .caption {
|
||||
font-size: 0.8em;
|
||||
padding: 8px 0 0 12px;
|
||||
color: var(--fgTransparentWeak);
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
> .input {
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: none;
|
||||
border: solid 1px var(--inputBorder);
|
||||
border-radius: 3px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: none;
|
||||
border: solid 2px var(--accent);
|
||||
border-radius: 3px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
> .label {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
left: 12px;
|
||||
pointer-events: none;
|
||||
transition: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||
transition-duration: 0.3s;
|
||||
font-size: 1em;
|
||||
line-height: 32px;
|
||||
pointer-events: none;
|
||||
//will-change transform
|
||||
transform-origin: top left;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
> textarea {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
max-width: 100%;
|
||||
min-height: 130px;
|
||||
margin: 0;
|
||||
padding: 12px;
|
||||
box-sizing: border-box;
|
||||
font: inherit;
|
||||
font-weight: normal;
|
||||
font-size: 1em;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
color: var(--fg);
|
||||
background: var(--panel);
|
||||
border: solid 1px var(--inputBorder);
|
||||
border-radius: 6px;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
color: var(--fg);
|
||||
box-sizing: border-box;
|
||||
transition: border-color 0.1s ease-out;
|
||||
|
||||
&.code {
|
||||
tab-size: 2;
|
||||
&:hover {
|
||||
border-color: var(--inputBorderHover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .save {
|
||||
margin: 6px 0 0 0;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
> .desc {
|
||||
margin: 6px 0 0 0;
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.focused {
|
||||
> .input {
|
||||
&:after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
> .label {
|
||||
color: var(--accent);
|
||||
&.focused {
|
||||
> textarea {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.focused,
|
||||
&.filled {
|
||||
> .input {
|
||||
> .label {
|
||||
top: -24px;
|
||||
left: 0 !important;
|
||||
transform: scale(0.75);
|
||||
&.disabled {
|
||||
opacity: 0.7;
|
||||
|
||||
&, * {
|
||||
cursor: not-allowed !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.tall {
|
||||
> .input {
|
||||
&.tall {
|
||||
> textarea {
|
||||
min-height: 200px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.pre {
|
||||
> .input {
|
||||
&.pre {
|
||||
> textarea {
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
@ -1,17 +1,13 @@
|
||||
<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">
|
||||
<slot v-if="closeRight" name="buttons"><button class="_button" style="pointer-events: none;"></button></slot>
|
||||
<button v-else class="_button" @click="close()"><i class="fas fa-times"></i></button>
|
||||
<button v-if="closeButton" class="_button" @click="close()"><i class="fas fa-times"></i></button>
|
||||
|
||||
<span class="title" @mousedown.prevent="onHeaderMousedown" @touchstart.prevent="onHeaderMousedown">
|
||||
<slot name="header"></slot>
|
||||
</span>
|
||||
|
||||
<button v-if="closeRight" class="_button" @click="close()"><i class="fas fa-times"></i></button>
|
||||
<slot v-else name="buttons"><button class="_button" style="pointer-events: none;"></button></slot>
|
||||
</div>
|
||||
<div class="body" v-if="padding">
|
||||
<div class="_section">
|
||||
@ -86,10 +82,10 @@ export default defineComponent({
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
closeRight: {
|
||||
closeButton: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
default: true,
|
||||
},
|
||||
mini: {
|
||||
type: Boolean,
|
||||
@ -420,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);
|
||||
|
||||
@ -31,7 +31,7 @@
|
||||
import { defineComponent } from 'vue';
|
||||
import { parseAcct } from '@/misc/acct';
|
||||
import MkFollowButton from './follow-button.vue';
|
||||
import { userPage } from '../filters/user';
|
||||
import { userPage } from '@client/filters/user';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
import { defineComponent } from 'vue';
|
||||
import paging from '@client/scripts/paging';
|
||||
import MkUserInfo from './user-info.vue';
|
||||
import { userPage } from '../filters/user';
|
||||
import { userPage } from '@client/filters/user';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
|
||||
@ -35,7 +35,7 @@
|
||||
import { defineComponent } from 'vue';
|
||||
import { parseAcct } from '@/misc/acct';
|
||||
import MkFollowButton from './follow-button.vue';
|
||||
import { userPage } from '../filters/user';
|
||||
import { userPage } from '@client/filters/user';
|
||||
import * as os from '@client/os';
|
||||
|
||||
export default defineComponent({
|
||||
|
||||
@ -10,9 +10,15 @@
|
||||
<template #header>{{ $ts.selectUser }}</template>
|
||||
<div class="tbhwbxda _monolithic_">
|
||||
<div class="_section">
|
||||
<div class="inputs">
|
||||
<MkInput v-model:value="username" class="input" @update:value="search" ref="username"><span>{{ $ts.username }}</span><template #prefix>@</template></MkInput>
|
||||
<MkInput v-model:value="host" class="input" @update:value="search"><span>{{ $ts.host }}</span><template #prefix>@</template></MkInput>
|
||||
<div class="_inputSplit _inputNoTopMargin _inputNoBottomMargin">
|
||||
<MkInput v-model="username" class="input" @update:modelValue="search" ref="username">
|
||||
<template #label>{{ $ts.username }}</template>
|
||||
<template #prefix>@</template>
|
||||
</MkInput>
|
||||
<MkInput v-model="host" class="input" @update:modelValue="search">
|
||||
<template #label>{{ $ts.host }}</template>
|
||||
<template #prefix>@</template>
|
||||
</MkInput>
|
||||
</div>
|
||||
</div>
|
||||
<div class="_section result" v-if="username != '' || host != ''" :class="{ hit: users.length > 0 }">
|
||||
@ -138,14 +144,6 @@ export default defineComponent({
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
> .inputs {
|
||||
> .input {
|
||||
display: inline-block;
|
||||
width: 50%;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
> .users {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
|
||||
@ -28,7 +28,7 @@
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import paging from '@client/scripts/paging';
|
||||
import { userPage } from '../filters/user';
|
||||
import { userPage } from '@client/filters/user';
|
||||
|
||||
export default defineComponent({
|
||||
mixins: [
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<div class="vjoppmmu">
|
||||
<template v-if="edit">
|
||||
<header>
|
||||
<MkSelect v-model:value="widgetAdderSelected" style="margin-bottom: var(--margin)">
|
||||
<MkSelect v-model="widgetAdderSelected" style="margin-bottom: var(--margin)">
|
||||
<template #label>{{ $ts.selectWidget }}</template>
|
||||
<option v-for="widget in widgetDefs" :value="widget" :key="widget">{{ $t(`_widgets.${widget}`) }}</option>
|
||||
</MkSelect>
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -243,6 +243,14 @@ watch(defaultStore.reactiveState.useBlurEffectForModal, v => {
|
||||
document.documentElement.style.setProperty('--modalBgFilter', v ? 'blur(4px)' : 'none');
|
||||
}, { immediate: true });
|
||||
|
||||
watch(defaultStore.reactiveState.useBlurEffect, v => {
|
||||
if (v) {
|
||||
document.documentElement.style.removeProperty('--blur');
|
||||
} else {
|
||||
document.documentElement.style.setProperty('--blur', 'none');
|
||||
}
|
||||
}, { immediate: true });
|
||||
|
||||
let reloadDialogShowing = false;
|
||||
stream.on('_disconnected_', async () => {
|
||||
if (defaultStore.state.serverDisconnectedBehavior === 'reload') {
|
||||
|
||||
@ -113,6 +113,16 @@ export const menuDef = {
|
||||
icon: 'fas fa-satellite-dish',
|
||||
to: '/channels',
|
||||
},
|
||||
federation: {
|
||||
title: 'federation',
|
||||
icon: 'fas fa-globe',
|
||||
to: '/federation',
|
||||
},
|
||||
emojis: {
|
||||
title: 'emojis',
|
||||
icon: 'fas fa-laugh',
|
||||
to: '/emojis',
|
||||
},
|
||||
games: {
|
||||
title: 'games',
|
||||
icon: 'fas fa-gamepad',
|
||||
@ -133,7 +143,7 @@ export const menuDef = {
|
||||
title: 'switchUi',
|
||||
icon: 'fas fa-columns',
|
||||
action: (ev) => {
|
||||
os.modalMenu([{
|
||||
os.popupMenu([{
|
||||
text: i18n.locale.default,
|
||||
action: () => {
|
||||
localStorage.setItem('ui', 'default');
|
||||
|
||||
@ -368,10 +368,10 @@ export async function openEmojiPicker(src?: HTMLElement, opts, initialTextarea:
|
||||
});
|
||||
}
|
||||
|
||||
export function modalMenu(items: any[], src?: HTMLElement, options?: { align?: string; viaKeyboard?: boolean }) {
|
||||
export function popupMenu(items: any[], src?: HTMLElement, options?: { align?: string; viaKeyboard?: boolean }) {
|
||||
return new Promise((resolve, reject) => {
|
||||
let dispose;
|
||||
popup(import('@client/components/ui/modal-menu.vue'), {
|
||||
popup(import('@client/components/ui/popup-menu.vue'), {
|
||||
items,
|
||||
src,
|
||||
align: options?.align,
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<transition :name="$store.state.animation ? 'zoom' : ''" appear>
|
||||
<div class="_section">
|
||||
<div class="mjndxjch _content">
|
||||
<img src="https://xn--931a.moe/assets/error.jpg" class="_ghost"/>
|
||||
<p><i class="fas fa-exclamation-triangle"></i> {{ $ts.pageLoadError }}</p>
|
||||
<p>{{ $ts.pageLoadErrorDescription }}</p>
|
||||
</div>
|
||||
<div class="mjndxjch">
|
||||
<img src="https://xn--931a.moe/assets/error.jpg" class="_ghost"/>
|
||||
<p><b><i class="fas fa-exclamation-triangle"></i> {{ $ts.pageLoadError }}</b></p>
|
||||
<p>{{ $ts.pageLoadErrorDescription }}</p>
|
||||
<p><MkA to="/docs/general/troubleshooting" class="_link">{{ $ts.troubleshooting }}</MkA></p>
|
||||
<p v-if="error" class="error">ERROR: {{ error }}</p>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
@ -19,6 +19,11 @@ export default defineComponent({
|
||||
components: {
|
||||
MkButton,
|
||||
},
|
||||
props: {
|
||||
error: {
|
||||
required: false,
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
[symbols.PAGE_INFO]: {
|
||||
@ -32,10 +37,11 @@ export default defineComponent({
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mjndxjch {
|
||||
padding: 32px;
|
||||
text-align: center;
|
||||
|
||||
> p {
|
||||
margin: 0 0 8px 0;
|
||||
margin: 0 0 12px 0;
|
||||
}
|
||||
|
||||
> .button {
|
||||
@ -45,8 +51,12 @@ export default defineComponent({
|
||||
> img {
|
||||
vertical-align: bottom;
|
||||
height: 128px;
|
||||
margin-bottom: 16px;
|
||||
margin-bottom: 24px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
> .error {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -68,40 +68,58 @@ import * as symbols from '@client/symbols';
|
||||
const patrons = [
|
||||
'Satsuki Yanagi',
|
||||
'noellabo',
|
||||
'Gargron',
|
||||
'Atsuko Tominaga',
|
||||
'mametsuko',
|
||||
'AureoleArk',
|
||||
'Gargron',
|
||||
'Nokotaro Takeda',
|
||||
'Suji Yan',
|
||||
'Hekovic',
|
||||
'Gitmo Life Services',
|
||||
'nenohi',
|
||||
'naga_rus',
|
||||
'Melilot',
|
||||
'Hekovic',
|
||||
'Nokotaro Takeda',
|
||||
'dansup',
|
||||
'nenohi',
|
||||
'motcha',
|
||||
'nanami kan',
|
||||
'Eduardo Quiros',
|
||||
'Peter G.',
|
||||
'YUKIMOCHI',
|
||||
'Efertone',
|
||||
'makokunsan',
|
||||
'oi_yekssim',
|
||||
'nanami kan',
|
||||
'motcha',
|
||||
'dansup',
|
||||
'Quinton Macejkovic',
|
||||
'YUKIMOCHI',
|
||||
'mewl hayabusa',
|
||||
'makokunsan',
|
||||
'Peter G.',
|
||||
'Nesakko',
|
||||
'regtan',
|
||||
'見当かなみ',
|
||||
'natalie',
|
||||
'Jerry',
|
||||
'takimura',
|
||||
'sikyosyounin',
|
||||
'weepjp',
|
||||
'mydarkstar',
|
||||
'Nesakko',
|
||||
'YuzuRyo61',
|
||||
'sheeta.s',
|
||||
'osapon',
|
||||
'YuzuRyo61',
|
||||
'wara',
|
||||
'mkatze',
|
||||
'kiritan',
|
||||
'CG',
|
||||
'nafuchoco',
|
||||
'Takumi Sugita',
|
||||
'chidori ninokura',
|
||||
'mydarkstar',
|
||||
'kiritan',
|
||||
'kabo2468y',
|
||||
'weepjp',
|
||||
'Liaizon Wakest',
|
||||
'Steffen K9',
|
||||
'Roujo',
|
||||
'uroco @99',
|
||||
'totokoro',
|
||||
'public_yusuke',
|
||||
'wara',
|
||||
'S Y',
|
||||
'Denshi',
|
||||
'Osushimaru',
|
||||
'Liaizon Wakest',
|
||||
'吴浥',
|
||||
'DignifiedSilence',
|
||||
't_w',
|
||||
];
|
||||
|
||||
export default defineComponent({
|
||||
|
||||
@ -272,7 +272,7 @@ export default defineComponent({
|
||||
|
||||
showTypeMenu(e: MouseEvent) {
|
||||
return new Promise<ThemeValue>((resolve) => {
|
||||
os.modalMenu([{
|
||||
os.popupMenu([{
|
||||
text: this.$ts._theme.defaultValue,
|
||||
action: () => resolve(null),
|
||||
}, {
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
<template>
|
||||
<div class="_root">
|
||||
<div class="_block" style="padding: 24px;">
|
||||
<MkInput v-model:value="endpoint" :datalist="endpoints" @update:value="onEndpointChange()">
|
||||
<span>Endpoint</span>
|
||||
<MkInput v-model="endpoint" :datalist="endpoints" @update:modelValue="onEndpointChange()">
|
||||
<template #label>Endpoint</template>
|
||||
</MkInput>
|
||||
<MkTextarea v-model:value="body" code>
|
||||
<span>Params (JSON or JSON5)</span>
|
||||
<MkTextarea v-model="body" code>
|
||||
<template #label>Params (JSON or JSON5)</template>
|
||||
</MkTextarea>
|
||||
<MkSwitch v-model:value="withCredential">
|
||||
<MkSwitch v-model="withCredential">
|
||||
With credential
|
||||
</MkSwitch>
|
||||
<MkButton primary full @click="send" :disabled="sending">
|
||||
@ -16,8 +16,8 @@
|
||||
</MkButton>
|
||||
</div>
|
||||
<div v-if="res" class="_block" style="padding: 24px;">
|
||||
<MkTextarea v-model:value="res" code readonly tall>
|
||||
<span>Response</span>
|
||||
<MkTextarea v-model="res" code readonly tall>
|
||||
<template #label>Response</template>
|
||||
</MkTextarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -2,9 +2,13 @@
|
||||
<div>
|
||||
<div class="_section">
|
||||
<div class="_content">
|
||||
<MkInput v-model:value="name">{{ $ts.name }}</MkInput>
|
||||
<MkInput v-model="name">
|
||||
<template #label>{{ $ts.name }}</template>
|
||||
</MkInput>
|
||||
|
||||
<MkTextarea v-model:value="description">{{ $ts.description }}</MkTextarea>
|
||||
<MkTextarea v-model="description">
|
||||
<template #label>{{ $ts.description }}</template>
|
||||
</MkTextarea>
|
||||
|
||||
<div class="banner">
|
||||
<MkButton v-if="bannerId == null" @click="setBannerImage"><i class="fas fa-plus"></i> {{ $ts._channel.setBanner }}</MkButton>
|
||||
|
||||
@ -152,8 +152,8 @@ export default defineComponent({
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: var(--blur, blur(16px));
|
||||
backdrop-filter: var(--blur, blur(16px));
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
|
||||
@ -79,7 +79,7 @@ export default defineComponent({
|
||||
|
||||
methods: {
|
||||
menu(ev) {
|
||||
os.modalMenu([this.isOwned ? {
|
||||
os.popupMenu([this.isOwned ? {
|
||||
icon: 'fas fa-pencil-alt',
|
||||
text: this.$ts.edit,
|
||||
action: async () => {
|
||||
|
||||
@ -1,9 +1,12 @@
|
||||
<template>
|
||||
<div class="qyqbqfal" v-size="{ max: [500] }">
|
||||
<div class="title">{{ title }}</div>
|
||||
<div class="body" v-html="body"></div>
|
||||
<div class="footer">
|
||||
<MkLink :url="`https://github.com/misskey-dev/misskey/blob/master/src/docs/${lang}/${doc}.md`" class="at">{{ $ts.docSource }}</MkLink>
|
||||
<div class="main">
|
||||
<div class="title">{{ title }}</div>
|
||||
<div class="body" v-html="body"></div>
|
||||
<div class="footer">
|
||||
<MkLink :url="`https://github.com/misskey-dev/misskey/blob/master/src/docs/${lang}/${doc}.md`" class="at">{{ $ts.docSource }}</MkLink>
|
||||
<p v-if="lang !== 'ja-JP'">{{ $ts.translateWarn }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -62,6 +65,10 @@ export default defineComponent({
|
||||
fetchDoc() {
|
||||
fetch(`${url}/doc-assets/${lang}/${this.doc}.md`).then(res => res.text()).then(md => {
|
||||
this.parse(md);
|
||||
}).catch(() => {
|
||||
fetch(`${url}/doc-assets/ja-JP/${this.doc}.md`).then(res => res.text()).then(md => {
|
||||
this.parse(md);
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
@ -105,102 +112,129 @@ export default defineComponent({
|
||||
<style lang="scss" scoped>
|
||||
.qyqbqfal {
|
||||
padding: 32px;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
background: var(--panel);
|
||||
line-height: 1.5;
|
||||
|
||||
&.max-width_500px {
|
||||
padding: 16px;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
> .title {
|
||||
font-size: 1.5em;
|
||||
font-weight: bold;
|
||||
padding: 0 0 0.75em 0;
|
||||
margin: 0 0 1em 0;
|
||||
border-bottom: solid 2px var(--divider);
|
||||
}
|
||||
> .main {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
|
||||
> .body {
|
||||
> *:first-child {
|
||||
margin-top: 0;
|
||||
> .title {
|
||||
font-size: 1.5em;
|
||||
font-weight: bold;
|
||||
padding: 0 0 0.75em 0;
|
||||
margin: 0 0 1em 0;
|
||||
border-bottom: solid 2px var(--divider);
|
||||
}
|
||||
|
||||
> *:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
> .body {
|
||||
> *:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
::v-deep(a) {
|
||||
color: var(--link);
|
||||
}
|
||||
> *:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
::v-deep(blockquote) {
|
||||
display: block;
|
||||
margin: 8px;
|
||||
padding: 6px 0 6px 12px;
|
||||
color: var(--fg);
|
||||
border-left: solid 3px var(--fg);
|
||||
opacity: 0.7;
|
||||
::v-deep(a) {
|
||||
color: var(--link);
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
::v-deep(blockquote) {
|
||||
display: block;
|
||||
margin: 8px;
|
||||
padding: 6px 0 6px 12px;
|
||||
color: var(--fg);
|
||||
border-left: solid 3px var(--fg);
|
||||
opacity: 0.7;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep(h2) {
|
||||
font-size: 1.25em;
|
||||
padding: 0 0 0.5em 0;
|
||||
margin: 1.5em 0 1em 0;
|
||||
border-bottom: solid 0.5px var(--divider);
|
||||
}
|
||||
|
||||
::v-deep(h3) {
|
||||
margin: 1.25em 0 0.5em 0;
|
||||
}
|
||||
|
||||
::v-deep(table) {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
::v-deep(kbd.group) {
|
||||
display: inline-block;
|
||||
padding: 2px;
|
||||
border: 1px solid var(--divider);
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
::v-deep(kbd.key) {
|
||||
display: inline-block;
|
||||
padding: 6px 8px;
|
||||
border: solid 0.5px var(--divider);
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
::v-deep(code) {
|
||||
display: inline-block;
|
||||
font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
|
||||
tab-size: 2;
|
||||
background: #272822;
|
||||
color: #f8f8f2;
|
||||
border-radius: 6px;
|
||||
padding: 4px 6px;
|
||||
}
|
||||
|
||||
::v-deep(pre) {
|
||||
background: #272822;
|
||||
color: #f8f8f2;
|
||||
border-radius: 6px;
|
||||
padding: 12px 16px;
|
||||
|
||||
> code {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep(.info) {
|
||||
font-size: 90%;
|
||||
background: var(--infoBg);
|
||||
color: var(--infoFg);
|
||||
padding: 1em;
|
||||
margin: 0.75em 0;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
::v-deep(.warn) {
|
||||
font-size: 90%;
|
||||
background: var(--infoWarnBg);
|
||||
color: var(--infoWarnFg);
|
||||
padding: 1em;
|
||||
margin: 0.75em 0;
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep(h2) {
|
||||
font-size: 1.25em;
|
||||
padding: 0 0 0.5em 0;
|
||||
margin: 1.5em 0 1em 0;
|
||||
border-bottom: solid 0.5px var(--divider);
|
||||
> .footer {
|
||||
padding: 1.5em 0 0 0;
|
||||
margin: 1.5em 0 0 0;
|
||||
border-top: solid 2px var(--divider);
|
||||
}
|
||||
|
||||
::v-deep(table) {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
::v-deep(kbd.group) {
|
||||
display: inline-block;
|
||||
padding: 2px;
|
||||
border: 1px solid var(--divider);
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
::v-deep(kbd.key) {
|
||||
display: inline-block;
|
||||
padding: 6px 8px;
|
||||
border: solid 0.5px var(--divider);
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
::v-deep(code) {
|
||||
display: inline-block;
|
||||
font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
|
||||
tab-size: 2;
|
||||
background: #272822;
|
||||
color: #f8f8f2;
|
||||
border-radius: 6px;
|
||||
padding: 4px 6px;
|
||||
}
|
||||
|
||||
::v-deep(pre) {
|
||||
background: #272822;
|
||||
color: #f8f8f2;
|
||||
border-radius: 6px;
|
||||
padding: 12px 16px;
|
||||
|
||||
> code {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .footer {
|
||||
padding: 1.5em 0 0 0;
|
||||
margin: 1.5em 0 0 0;
|
||||
border-top: solid 2px var(--divider);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,14 +1,50 @@
|
||||
<template>
|
||||
<div>
|
||||
<main class="_section">
|
||||
<div class="_content">
|
||||
<ul>
|
||||
<li v-for="doc in docs" :key="doc.path">
|
||||
<MkA :to="`/docs/${doc.path}`">{{ doc.title }}</MkA>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="vtaihdtm">
|
||||
<div class="search">
|
||||
<MkInput v-model="query" :debounce="true" type="search" class="_inputNoTopMargin _inputNoBottomMargin" :placeholder="$ts.search">
|
||||
<template #prefix><i class="fas fa-search"></i></template>
|
||||
</MkInput>
|
||||
</div>
|
||||
<MkFolder>
|
||||
<template #header>{{ $ts._docs.generalTopics }}</template>
|
||||
<div class="docs">
|
||||
<MkA v-for="doc in docs.filter(doc => doc.path.startsWith('general/'))" :key="doc.path" :to="`/docs/${doc.path}`" class="doc">
|
||||
<div class="title">{{ doc.title }}</div>
|
||||
<div class="summary">{{ doc.summary }}</div>
|
||||
<div class="read">{{ $ts._docs.continueReading }}</div>
|
||||
</MkA>
|
||||
</div>
|
||||
</main>
|
||||
</MkFolder>
|
||||
<MkFolder>
|
||||
<template #header>{{ $ts._docs.features }}</template>
|
||||
<div class="docs">
|
||||
<MkA v-for="doc in docs.filter(doc => doc.path.startsWith('features/'))" :key="doc.path" :to="`/docs/${doc.path}`" class="doc">
|
||||
<div class="title">{{ doc.title }}</div>
|
||||
<div class="summary">{{ doc.summary }}</div>
|
||||
<div class="read">{{ $ts._docs.continueReading }}</div>
|
||||
</MkA>
|
||||
</div>
|
||||
</MkFolder>
|
||||
<MkFolder>
|
||||
<template #header>{{ $ts._docs.advancedTopics }}</template>
|
||||
<div class="docs">
|
||||
<MkA v-for="doc in docs.filter(doc => doc.path.startsWith('advanced/'))" :key="doc.path" :to="`/docs/${doc.path}`" class="doc">
|
||||
<div class="title">{{ doc.title }}</div>
|
||||
<div class="summary">{{ doc.summary }}</div>
|
||||
<div class="read">{{ $ts._docs.continueReading }}</div>
|
||||
</MkA>
|
||||
</div>
|
||||
</MkFolder>
|
||||
<MkFolder>
|
||||
<template #header>{{ $ts._docs.admin }}</template>
|
||||
<div class="docs">
|
||||
<MkA v-for="doc in docs.filter(doc => doc.path.startsWith('admin/'))" :key="doc.path" :to="`/docs/${doc.path}`" class="doc">
|
||||
<div class="title">{{ doc.title }}</div>
|
||||
<div class="summary">{{ doc.summary }}</div>
|
||||
<div class="read">{{ $ts._docs.continueReading }}</div>
|
||||
</MkA>
|
||||
</div>
|
||||
</MkFolder>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -16,8 +52,15 @@
|
||||
import { defineComponent } from 'vue';
|
||||
import { url, lang } from '@client/config';
|
||||
import * as symbols from '@client/symbols';
|
||||
import MkFolder from '@client/components/ui/folder.vue';
|
||||
import MkInput from '@client/components/ui/input.vue';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
MkFolder,
|
||||
MkInput,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
[symbols.PAGE_INFO]: {
|
||||
@ -25,13 +68,72 @@ export default defineComponent({
|
||||
icon: 'fas fa-question-circle'
|
||||
},
|
||||
docs: [],
|
||||
query: null,
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
query() {
|
||||
fetch(`${url}/docs.json?lang=${lang}&q=${this.query}`).then(res => res.json()).then(docs => {
|
||||
this.docs = docs;
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
fetch(`${url}/docs.json?lang=${lang}`).then(res => res.json()).then(docs => {
|
||||
this.docs = docs;
|
||||
fetch(`${url}/docs.json?lang=ja-JP`).then(res => res.json()).then(jaDocs => {
|
||||
fetch(`${url}/docs.json?lang=${lang}`).then(res => res.json()).then(docs => {
|
||||
this.docs = jaDocs.map(doc => {
|
||||
const exist = docs.find(d => d.path === doc.path);
|
||||
return exist || doc;
|
||||
});
|
||||
});
|
||||
});
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.vtaihdtm {
|
||||
background: var(--panel);
|
||||
|
||||
> .search {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.docs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
|
||||
grid-gap: 12px;
|
||||
margin: 0 16px 16px 16px;
|
||||
|
||||
> .doc {
|
||||
display: inline-block;
|
||||
padding: 16px;
|
||||
border: solid 1px var(--divider);
|
||||
border-radius: 6px;
|
||||
|
||||
&:hover {
|
||||
border: solid 1px var(--accent);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
> .title {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
> .summary {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
> .read {
|
||||
color: var(--link);
|
||||
font-size: 0.9em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -20,7 +20,6 @@ export default defineComponent({
|
||||
[symbols.PAGE_INFO]: {
|
||||
title: computed(() => this.folder ? this.folder.name : this.$ts.drive),
|
||||
icon: 'fas fa-cloud',
|
||||
menu: () => this.$refs.drive.getMenu()
|
||||
},
|
||||
folder: null,
|
||||
};
|
||||
|
||||
151
src/client/pages/emojis.vue
Normal file
151
src/client/pages/emojis.vue
Normal file
@ -0,0 +1,151 @@
|
||||
<template>
|
||||
<div class="driuhtrh">
|
||||
<div class="query">
|
||||
<MkInput v-model="q" class="_inputNoTopMargin _inputNoBottomMargin" :placeholder="$ts.search">
|
||||
<template #prefix><i class="fas fa-search"></i></template>
|
||||
</MkInput>
|
||||
</div>
|
||||
|
||||
<div class="emojis">
|
||||
<MkFolder v-if="searchEmojis">
|
||||
<template #header>{{ $ts.searchResult }}</template>
|
||||
<div class="zuvgdzyt">
|
||||
<button v-for="emoji in searchEmojis" :key="emoji.name" class="emoji _button" @click="menu(emoji, $event)">
|
||||
<img :src="emoji.url" class="img" :alt="emoji.name"/>
|
||||
<div class="body">
|
||||
<div class="name _monospace">{{ emoji.name }}</div>
|
||||
<div class="info">{{ emoji.aliases.join(' ') }}</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</MkFolder>
|
||||
<MkFolder v-for="category in customEmojiCategories" :key="category">
|
||||
<template #header>{{ category || $ts.other }}</template>
|
||||
<div class="zuvgdzyt">
|
||||
<button v-for="emoji in customEmojis.filter(e => e.category === category)" :key="emoji.name" class="emoji _button" @click="menu(emoji, $event)">
|
||||
<img :src="emoji.url" class="img" :alt="emoji.name"/>
|
||||
<div class="body">
|
||||
<div class="name _monospace">{{ emoji.name }}</div>
|
||||
<div class="info">{{ emoji.aliases.join(' ') }}</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</MkFolder>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import MkButton from '@client/components/ui/button.vue';
|
||||
import MkInput from '@client/components/ui/input.vue';
|
||||
import MkSelect from '@client/components/ui/select.vue';
|
||||
import MkFolder from '@client/components/ui/folder.vue';
|
||||
import * as os from '@client/os';
|
||||
import * as symbols from '@client/symbols';
|
||||
import { emojiCategories } from '@client/instance';
|
||||
import copyToClipboard from '@client/scripts/copy-to-clipboard';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
MkButton,
|
||||
MkInput,
|
||||
MkSelect,
|
||||
MkFolder,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
[symbols.PAGE_INFO]: {
|
||||
title: this.$ts.customEmojis,
|
||||
icon: 'fas fa-laugh'
|
||||
},
|
||||
q: '',
|
||||
customEmojiCategories: emojiCategories,
|
||||
customEmojis: this.$instance.emojis,
|
||||
searchEmojis: null,
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
q() {
|
||||
if (this.q === '' || this.q == null) {
|
||||
this.searchEmojis = null;
|
||||
return;
|
||||
}
|
||||
|
||||
this.searchEmojis = this.customEmojis.filter(e => e.name.includes(this.q) || e.aliases.includes(this.q));
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
menu(emoji, ev) {
|
||||
os.popupMenu([{
|
||||
type: 'label',
|
||||
text: ':' + emoji.name + ':',
|
||||
}, {
|
||||
text: this.$ts.copy,
|
||||
icon: 'fas fa-copy',
|
||||
action: () => {
|
||||
copyToClipboard(`:${emoji.name}:`);
|
||||
os.success();
|
||||
}
|
||||
}], ev.currentTarget || ev.target);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.driuhtrh {
|
||||
> .query {
|
||||
background: var(--bg);
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
> .emojis {
|
||||
.zuvgdzyt {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
|
||||
grid-gap: 12px;
|
||||
margin: 0 var(--margin) var(--margin) var(--margin);
|
||||
|
||||
> .emoji {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px;
|
||||
text-align: left;
|
||||
border: solid 1px var(--divider);
|
||||
border-radius: 8px;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
> .img {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
}
|
||||
|
||||
> .body {
|
||||
padding: 0 0 0 8px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
||||
> .name {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
> .info {
|
||||
opacity: 0.5;
|
||||
font-size: 0.9em;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -2,7 +2,10 @@
|
||||
<div class="lznhrdub _root">
|
||||
<div>
|
||||
<div class="_isolated">
|
||||
<MkInput v-model:value="query" :debounce="true" type="search"><template #icon><i class="fas fa-search"></i></template><span>{{ $ts.searchUser }}</span></MkInput>
|
||||
<MkInput v-model="query" :debounce="true" type="search">
|
||||
<template #prefix><i class="fas fa-search"></i></template>
|
||||
<template #label>{{ $ts.searchUser }}</template>
|
||||
</MkInput>
|
||||
</div>
|
||||
|
||||
<XUserList v-if="query" class="_gap" :pagination="searchPagination" ref="search"/>
|
||||
|
||||
@ -1,9 +1,12 @@
|
||||
<template>
|
||||
<div class="enuoauvw">
|
||||
<div class="taeiyria">
|
||||
<div class="query">
|
||||
<MkInput v-model:value="host" :debounce="true"><span>{{ $ts.host }}</span></MkInput>
|
||||
<div class="inputs" style="display: flex;">
|
||||
<MkSelect v-model:value="state" style="margin: 0; flex: 1;">
|
||||
<MkInput v-model="host" :debounce="true" class="_inputNoTopMargin">
|
||||
<template #prefix><i class="fas fa-search"></i></template>
|
||||
<template #label>{{ $ts.host }}</template>
|
||||
</MkInput>
|
||||
<div class="_inputSplit _inputNoBottomMargin">
|
||||
<MkSelect v-model="state">
|
||||
<template #label>{{ $ts.state }}</template>
|
||||
<option value="all">{{ $ts.all }}</option>
|
||||
<option value="federating">{{ $ts.federating }}</option>
|
||||
@ -13,7 +16,7 @@
|
||||
<option value="blocked">{{ $ts.blocked }}</option>
|
||||
<option value="notResponding">{{ $ts.notResponding }}</option>
|
||||
</MkSelect>
|
||||
<MkSelect v-model:value="sort" style="margin: 0; flex: 1;">
|
||||
<MkSelect v-model="sort">
|
||||
<template #label>{{ $ts.sort }}</template>
|
||||
<option value="+pubSub">{{ $ts.pubSub }} ({{ $ts.descendingOrder }})</option>
|
||||
<option value="-pubSub">{{ $ts.pubSub }} ({{ $ts.ascendingOrder }})</option>
|
||||
@ -38,16 +41,53 @@
|
||||
</div>
|
||||
|
||||
<MkPagination :pagination="pagination" #default="{items}" ref="instances" :key="host + state">
|
||||
<div class="ppgwaixt _block" v-for="instance in items" :key="instance.id" @click="info(instance)">
|
||||
<div class="host"><i class="fas fa-circle indicator" :class="getStatus(instance)"></i><b>{{ instance.host }}</b></div>
|
||||
<div class="status">
|
||||
<span class="sub" v-if="instance.followersCount > 0"><i class="fas fa-caret-down icon"></i>Sub</span>
|
||||
<span class="sub" v-else><i class="fas fa-caret-down icon"></i>-</span>
|
||||
<span class="pub" v-if="instance.followingCount > 0"><i class="fas fa-caret-up icon"></i>Pub</span>
|
||||
<span class="pub" v-else><i class="fas fa-caret-up icon"></i>-</span>
|
||||
<span class="lastCommunicatedAt"><i class="fas fa-exchange-alt icon"></i><MkTime :time="instance.lastCommunicatedAt"/></span>
|
||||
<span class="latestStatus"><i class="fas fa-traffic-light icon"></i>{{ instance.latestStatus || '-' }}</span>
|
||||
</div>
|
||||
<div class="dqokceoi">
|
||||
<MkA class="instance" v-for="instance in items" :key="instance.id" :to="`/instance-info/${instance.host}`">
|
||||
<div class="host"><img :src="instance.faviconUrl">{{ instance.host }}</div>
|
||||
<div class="table">
|
||||
<div class="cell">
|
||||
<div class="key">{{ $ts.registeredAt }}</div>
|
||||
<div class="value"><MkTime :time="instance.caughtAt"/></div>
|
||||
</div>
|
||||
<div class="cell">
|
||||
<div class="key">{{ $ts.software }}</div>
|
||||
<div class="value">{{ instance.softwareName || `(${$ts.unknown})` }}</div>
|
||||
</div>
|
||||
<div class="cell">
|
||||
<div class="key">{{ $ts.version }}</div>
|
||||
<div class="value">{{ instance.softwareVersion || `(${$ts.unknown})` }}</div>
|
||||
</div>
|
||||
<div class="cell">
|
||||
<div class="key">{{ $ts.users }}</div>
|
||||
<div class="value">{{ instance.usersCount }}</div>
|
||||
</div>
|
||||
<div class="cell">
|
||||
<div class="key">{{ $ts.notes }}</div>
|
||||
<div class="value">{{ instance.notesCount }}</div>
|
||||
</div>
|
||||
<div class="cell">
|
||||
<div class="key">{{ $ts.sent }}</div>
|
||||
<div class="value"><MkTime v-if="instance.latestRequestSentAt" :time="instance.latestRequestSentAt"/><span v-else>N/A</span></div>
|
||||
</div>
|
||||
<div class="cell">
|
||||
<div class="key">{{ $ts.received }}</div>
|
||||
<div class="value"><MkTime v-if="instance.latestRequestReceivedAt" :time="instance.latestRequestReceivedAt"/><span v-else>N/A</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<span class="status" :class="getStatus(instance)">{{ getStatus(instance) }}</span>
|
||||
<span class="pubSub">
|
||||
<span class="sub" v-if="instance.followersCount > 0"><i class="fas fa-caret-down icon"></i>Sub</span>
|
||||
<span class="sub" v-else><i class="fas fa-caret-down icon"></i>-</span>
|
||||
<span class="pub" v-if="instance.followingCount > 0"><i class="fas fa-caret-up icon"></i>Pub</span>
|
||||
<span class="pub" v-else><i class="fas fa-caret-up icon"></i>-</span>
|
||||
</span>
|
||||
<span class="right">
|
||||
<span class="latestStatus">{{ instance.latestStatus || '-' }}</span>
|
||||
<span class="lastCommunicatedAt"><MkTime :time="instance.lastCommunicatedAt"/></span>
|
||||
</span>
|
||||
</div>
|
||||
</MkA>
|
||||
</div>
|
||||
</MkPagination>
|
||||
</div>
|
||||
@ -59,7 +99,6 @@ import MkButton from '@client/components/ui/button.vue';
|
||||
import MkInput from '@client/components/ui/input.vue';
|
||||
import MkSelect from '@client/components/ui/select.vue';
|
||||
import MkPagination from '@client/components/ui/pagination.vue';
|
||||
import MkInstanceInfo from './instance.vue';
|
||||
import * as os from '@client/os';
|
||||
import * as symbols from '@client/symbols';
|
||||
|
||||
@ -117,69 +156,107 @@ export default defineComponent({
|
||||
|
||||
methods: {
|
||||
getStatus(instance) {
|
||||
if (instance.isSuspended) return 'off';
|
||||
if (instance.isNotResponding) return 'red';
|
||||
return 'green';
|
||||
if (instance.isSuspended) return 'suspended';
|
||||
if (instance.isNotResponding) return 'error';
|
||||
return 'alive';
|
||||
},
|
||||
|
||||
info(instance) {
|
||||
os.popup(MkInstanceInfo, {
|
||||
instance: instance
|
||||
}, {}, 'closed');
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.enuoauvw {
|
||||
.taeiyria {
|
||||
> .query {
|
||||
margin: var(--margin);
|
||||
background: var(--bg);
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.ppgwaixt {
|
||||
cursor: pointer;
|
||||
.dqokceoi {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
|
||||
grid-gap: 12px;
|
||||
padding: 16px;
|
||||
|
||||
&:hover {
|
||||
color: var(--accent);
|
||||
}
|
||||
> .instance {
|
||||
padding: 16px;
|
||||
border: solid 1px var(--divider);
|
||||
border-radius: 6px;
|
||||
|
||||
> .host {
|
||||
> .indicator {
|
||||
font-size: 70%;
|
||||
vertical-align: baseline;
|
||||
margin-right: 4px;
|
||||
&:hover {
|
||||
border: solid 1px var(--accent);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&.green {
|
||||
color: #49c5ba;
|
||||
}
|
||||
> .host {
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
&.yellow {
|
||||
color: #c5a549;
|
||||
}
|
||||
|
||||
&.red {
|
||||
color: #c54949;
|
||||
}
|
||||
|
||||
&.off {
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
> img {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-right: 6px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 90%;
|
||||
> .table {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
|
||||
grid-gap: 6px;
|
||||
margin: 6px 0;
|
||||
font-size: 70%;
|
||||
|
||||
> span {
|
||||
flex: 1;
|
||||
|
||||
> .icon {
|
||||
margin-right: 6px;
|
||||
> .cell {
|
||||
> .key, > .value {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
> .key {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
> .value {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 0.9em;
|
||||
|
||||
> .status {
|
||||
&.suspended {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&.error {
|
||||
color: var(--error);
|
||||
}
|
||||
|
||||
&.alive {
|
||||
color: var(--success);
|
||||
}
|
||||
}
|
||||
|
||||
> .pubSub {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
> .right {
|
||||
margin-left: auto;
|
||||
|
||||
> .latestStatus {
|
||||
border: solid 1px var(--divider);
|
||||
border-radius: 4px;
|
||||
margin: 0 8px;
|
||||
padding: 0 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -32,7 +32,7 @@
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import MkPagination from '@client/components/ui/pagination.vue';
|
||||
import { userPage, acct } from '../filters/user';
|
||||
import { userPage, acct } from '@client/filters/user';
|
||||
import * as os from '@client/os';
|
||||
import * as symbols from '@client/symbols';
|
||||
|
||||
|
||||
@ -14,6 +14,8 @@
|
||||
</FormKeyValueView>
|
||||
</FormGroup>
|
||||
|
||||
<FormButton v-if="$i.isAdmin || $i.isModerator" @click="info" primary>{{ $ts.settings }}</FormButton>
|
||||
|
||||
<FormTextarea readonly :value="instance.description">
|
||||
<span>{{ $ts.description }}</span>
|
||||
</FormTextarea>
|
||||
@ -62,7 +64,7 @@
|
||||
<div class="_formLabel">{{ $ts.statistics }}</div>
|
||||
<div class="_formPanel cmhjzshl">
|
||||
<div class="selects">
|
||||
<MkSelect v-model:value="chartSrc" style="margin: 0; flex: 1;">
|
||||
<MkSelect v-model="chartSrc" style="margin: 0; flex: 1;">
|
||||
<option value="requests">{{ $ts._instanceCharts.requests }}</option>
|
||||
<option value="users">{{ $ts._instanceCharts.users }}</option>
|
||||
<option value="users-total">{{ $ts._instanceCharts.usersTotal }}</option>
|
||||
@ -75,7 +77,7 @@
|
||||
<option value="drive-files">{{ $ts._instanceCharts.files }}</option>
|
||||
<option value="drive-files-total">{{ $ts._instanceCharts.filesTotal }}</option>
|
||||
</MkSelect>
|
||||
<MkSelect v-model:value="chartSpan" style="margin: 0;">
|
||||
<MkSelect v-model="chartSpan" style="margin: 0;">
|
||||
<option value="hour">{{ $ts.perHour }}</option>
|
||||
<option value="day">{{ $ts.perDay }}</option>
|
||||
</MkSelect>
|
||||
@ -147,6 +149,7 @@ import * as os from '@client/os';
|
||||
import number from '@client/filters/number';
|
||||
import bytes from '@client/filters/bytes';
|
||||
import * as symbols from '@client/symbols';
|
||||
import MkInstanceInfo from '@client/pages/instance/instance.vue';
|
||||
|
||||
const chartLimit = 90;
|
||||
const sum = (...arr) => arr.reduce((r, a) => r.map((b, i) => a[i] + b));
|
||||
@ -440,6 +443,12 @@ export default defineComponent({
|
||||
}]
|
||||
};
|
||||
},
|
||||
|
||||
info() {
|
||||
os.popup(MkInstanceInfo, {
|
||||
instance: this.instance
|
||||
}, {}, 'closed');
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -3,19 +3,19 @@
|
||||
<div class="_section reports">
|
||||
<div class="_content">
|
||||
<div class="inputs" style="display: flex;">
|
||||
<MkSelect v-model:value="state" style="margin: 0; flex: 1;">
|
||||
<MkSelect v-model="state" style="margin: 0; flex: 1;">
|
||||
<template #label>{{ $ts.state }}</template>
|
||||
<option value="all">{{ $ts.all }}</option>
|
||||
<option value="unresolved">{{ $ts.unresolved }}</option>
|
||||
<option value="resolved">{{ $ts.resolved }}</option>
|
||||
</MkSelect>
|
||||
<MkSelect v-model:value="targetUserOrigin" style="margin: 0; flex: 1;">
|
||||
<MkSelect v-model="targetUserOrigin" style="margin: 0; flex: 1;">
|
||||
<template #label>{{ $ts.targetUserOrigin }}</template>
|
||||
<option value="combined">{{ $ts.all }}</option>
|
||||
<option value="local">{{ $ts.local }}</option>
|
||||
<option value="remote">{{ $ts.remote }}</option>
|
||||
</MkSelect>
|
||||
<MkSelect v-model:value="reporterOrigin" style="margin: 0; flex: 1;">
|
||||
<MkSelect v-model="reporterOrigin" style="margin: 0; flex: 1;">
|
||||
<template #label>{{ $ts.reporterOrigin }}</template>
|
||||
<option value="combined">{{ $ts.all }}</option>
|
||||
<option value="local">{{ $ts.local }}</option>
|
||||
@ -68,7 +68,7 @@ import MkButton from '@client/components/ui/button.vue';
|
||||
import MkInput from '@client/components/ui/input.vue';
|
||||
import MkSelect from '@client/components/ui/select.vue';
|
||||
import MkPagination from '@client/components/ui/pagination.vue';
|
||||
import { acct } from '../../filters/user';
|
||||
import { acct } from '@client/filters/user';
|
||||
import * as os from '@client/os';
|
||||
import * as symbols from '@client/symbols';
|
||||
|
||||
|
||||
@ -4,11 +4,11 @@
|
||||
<section class="_card _gap ads" v-for="ad in ads">
|
||||
<div class="_content ad">
|
||||
<MkAd v-if="ad.url" :specify="ad"/>
|
||||
<MkInput v-model:value="ad.url" type="url">
|
||||
<span>URL</span>
|
||||
<MkInput v-model="ad.url" type="url">
|
||||
<template #label>URL</template>
|
||||
</MkInput>
|
||||
<MkInput v-model:value="ad.imageUrl">
|
||||
<span>{{ $ts.imageUrl }}</span>
|
||||
<MkInput v-model="ad.imageUrl">
|
||||
<template #label>{{ $ts.imageUrl }}</template>
|
||||
</MkInput>
|
||||
<div style="margin: 32px 0;">
|
||||
<MkRadio v-model="ad.place" value="square">square</MkRadio>
|
||||
@ -23,14 +23,14 @@
|
||||
<MkRadio v-model="ad.priority" value="low">{{ $ts.low }}</MkRadio>
|
||||
</div>
|
||||
-->
|
||||
<MkInput v-model:value="ad.ratio" type="number">
|
||||
<span>{{ $ts.ratio }}</span>
|
||||
<MkInput v-model="ad.ratio" type="number">
|
||||
<template #label>{{ $ts.ratio }}</template>
|
||||
</MkInput>
|
||||
<MkInput v-model:value="ad.expiresAt" type="date">
|
||||
<span>{{ $ts.expiration }}</span>
|
||||
<MkInput v-model="ad.expiresAt" type="date">
|
||||
<template #label>{{ $ts.expiration }}</template>
|
||||
</MkInput>
|
||||
<MkTextarea v-model:value="ad.memo">
|
||||
<span>{{ $ts.memo }}</span>
|
||||
<MkTextarea v-model="ad.memo">
|
||||
<template #label>{{ $ts.memo }}</template>
|
||||
</MkTextarea>
|
||||
<div class="buttons">
|
||||
<MkButton class="button" inline @click="save(ad)" primary><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
|
||||
|
||||
@ -3,14 +3,14 @@
|
||||
<MkButton @click="add()" primary style="margin: 0 auto 16px auto;"><i class="fas fa-plus"></i> {{ $ts.add }}</MkButton>
|
||||
<section class="_card _gap announcements" v-for="announcement in announcements">
|
||||
<div class="_content announcement">
|
||||
<MkInput v-model:value="announcement.title">
|
||||
<span>{{ $ts.title }}</span>
|
||||
<MkInput v-model="announcement.title">
|
||||
<template #label>{{ $ts.title }}</template>
|
||||
</MkInput>
|
||||
<MkTextarea v-model:value="announcement.text">
|
||||
<span>{{ $ts.text }}</span>
|
||||
<MkTextarea v-model="announcement.text">
|
||||
<template #label>{{ $ts.text }}</template>
|
||||
</MkTextarea>
|
||||
<MkInput v-model:value="announcement.imageUrl">
|
||||
<span>{{ $ts.imageUrl }}</span>
|
||||
<MkInput v-model="announcement.imageUrl">
|
||||
<template #label>{{ $ts.imageUrl }}</template>
|
||||
</MkInput>
|
||||
<p v-if="announcement.reads">{{ $t('nUsersRead', { n: announcement.reads }) }}</p>
|
||||
<div class="buttons">
|
||||
|
||||
@ -11,11 +11,15 @@
|
||||
<div class="_monolithic_">
|
||||
<div class="yigymqpb _section">
|
||||
<img :src="emoji.url" class="img"/>
|
||||
<MkInput v-model:value="name"><span>{{ $ts.name }}</span></MkInput>
|
||||
<MkInput v-model:value="category" :datalist="categories"><span>{{ $ts.category }}</span></MkInput>
|
||||
<MkInput v-model:value="aliases">
|
||||
<span>{{ $ts.tags }}</span>
|
||||
<template #desc>{{ $ts.setMultipleBySeparatingWithSpace }}</template>
|
||||
<MkInput v-model="name">
|
||||
<template #label>{{ $ts.name }}</template>
|
||||
</MkInput>
|
||||
<MkInput v-model="category" :datalist="categories">
|
||||
<template #label>{{ $ts.category }}</template>
|
||||
</MkInput>
|
||||
<MkInput v-model="aliases">
|
||||
<template #label>{{ $ts.tags }}</template>
|
||||
<template #caption>{{ $ts.setMultipleBySeparatingWithSpace }}</template>
|
||||
</MkInput>
|
||||
<MkButton danger @click="del()"><i class="fas fa-trash-alt"></i> {{ $ts.delete }}</MkButton>
|
||||
</div>
|
||||
|
||||
@ -7,7 +7,10 @@
|
||||
|
||||
<div class="local" v-if="tab === 'local'">
|
||||
<MkButton primary @click="add" style="margin: var(--margin) auto;"><i class="fas fa-plus"></i> {{ $ts.addEmoji }}</MkButton>
|
||||
<MkInput v-model:value="query" :debounce="true" type="search" style="margin: var(--margin);"><template #icon><i class="fas fa-search"></i></template><span>{{ $ts.search }}</span></MkInput>
|
||||
<MkInput v-model="query" :debounce="true" type="search" style="margin: var(--margin);">
|
||||
<template #prefix><i class="fas fa-search"></i></template>
|
||||
<template #label>{{ $ts.search }}</template>
|
||||
</MkInput>
|
||||
<MkPagination :pagination="pagination" ref="emojis">
|
||||
<template #empty><span>{{ $ts.noCustomEmojis }}</span></template>
|
||||
<template #default="{items}">
|
||||
@ -25,8 +28,13 @@
|
||||
</div>
|
||||
|
||||
<div class="remote" v-else-if="tab === 'remote'">
|
||||
<MkInput v-model:value="queryRemote" :debounce="true" type="search" style="margin: var(--margin);"><template #icon><i class="fas fa-search"></i></template><span>{{ $ts.search }}</span></MkInput>
|
||||
<MkInput v-model:value="host" :debounce="true" style="margin: var(--margin);"><span>{{ $ts.host }}</span></MkInput>
|
||||
<MkInput v-model="queryRemote" :debounce="true" type="search" style="margin: var(--margin);">
|
||||
<template #prefix><i class="fas fa-search"></i></template>
|
||||
<template #label>{{ $ts.search }}</template>
|
||||
</MkInput>
|
||||
<MkInput v-model="host" :debounce="true" style="margin: var(--margin);">
|
||||
<template #label>{{ $ts.host }}</template>
|
||||
</MkInput>
|
||||
<MkPagination :pagination="remotePagination" ref="remoteEmojis">
|
||||
<template #empty><span>{{ $ts.noCustomEmojis }}</span></template>
|
||||
<template #default="{items}">
|
||||
@ -138,7 +146,7 @@ export default defineComponent({
|
||||
},
|
||||
|
||||
remoteMenu(emoji, ev) {
|
||||
os.modalMenu([{
|
||||
os.popupMenu([{
|
||||
type: 'label',
|
||||
text: ':' + emoji.name + ':',
|
||||
}, {
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
</div>
|
||||
<div class="_section">
|
||||
<div class="_content">
|
||||
<MkSwitch @update:value="toggleIsSensitive" v-model:value="isSensitive">NSFW</MkSwitch>
|
||||
<MkSwitch @update:modelValue="toggleIsSensitive" v-model="isSensitive">NSFW</MkSwitch>
|
||||
</div>
|
||||
</div>
|
||||
<div class="_section">
|
||||
|
||||
@ -9,8 +9,8 @@
|
||||
<div class="_section lookup">
|
||||
<div class="_title"><i class="fas fa-search"></i> {{ $ts.lookup }}</div>
|
||||
<div class="_content">
|
||||
<MkInput class="target" v-model:value="q" type="text" @enter="find()">
|
||||
<span>{{ $ts.fileIdOrUrl }}</span>
|
||||
<MkInput class="target" v-model="q" type="text" @enter="find()">
|
||||
<template #label>{{ $ts.fileIdOrUrl }}</template>
|
||||
</MkInput>
|
||||
<MkButton @click="find()" primary><i class="fas fa-search"></i> {{ $ts.lookup }}</MkButton>
|
||||
</div>
|
||||
@ -19,19 +19,19 @@
|
||||
<div class="_section">
|
||||
<div class="_content">
|
||||
<div class="inputs" style="display: flex;">
|
||||
<MkSelect v-model:value="origin" style="margin: 0; flex: 1;">
|
||||
<MkSelect v-model="origin" style="margin: 0; flex: 1;">
|
||||
<template #label>{{ $ts.instance }}</template>
|
||||
<option value="combined">{{ $ts.all }}</option>
|
||||
<option value="local">{{ $ts.local }}</option>
|
||||
<option value="remote">{{ $ts.remote }}</option>
|
||||
</MkSelect>
|
||||
<MkInput v-model:value="searchHost" :debounce="true" type="search" style="margin: 0; flex: 1;" :disabled="pagination.params().origin === 'local'">
|
||||
<span>{{ $ts.host }}</span>
|
||||
<MkInput v-model="searchHost" :debounce="true" type="search" style="margin: 0; flex: 1;" :disabled="pagination.params().origin === 'local'">
|
||||
<template #label>{{ $ts.host }}</template>
|
||||
</MkInput>
|
||||
</div>
|
||||
<div class="inputs" style="display: flex; padding-top: 1.2em;">
|
||||
<MkInput v-model:value="type" :debounce="true" type="search" style="margin: 0; flex: 1;">
|
||||
<span>{{ $ts.type }}</span>
|
||||
<MkInput v-model="type" :debounce="true" type="search" style="margin: 0; flex: 1;">
|
||||
<template #label>{{ $ts.type }}</template>
|
||||
</MkInput>
|
||||
</div>
|
||||
<MkPagination :pagination="pagination" #default="{items}" class="urempief" ref="files">
|
||||
|
||||
@ -100,7 +100,7 @@ export default defineComponent({
|
||||
case 'overview': return defineAsyncComponent(() => import('./overview.vue'));
|
||||
case 'users': return defineAsyncComponent(() => import('./users.vue'));
|
||||
case 'emojis': return defineAsyncComponent(() => import('./emojis.vue'));
|
||||
case 'federation': return defineAsyncComponent(() => import('./federation.vue'));
|
||||
case 'federation': return defineAsyncComponent(() => import('../federation.vue'));
|
||||
case 'queue': return defineAsyncComponent(() => import('./queue.vue'));
|
||||
case 'files': return defineAsyncComponent(() => import('./files.vue'));
|
||||
case 'announcements': return defineAsyncComponent(() => import('./announcements.vue'));
|
||||
@ -167,7 +167,7 @@ export default defineComponent({
|
||||
};
|
||||
|
||||
const lookup = (ev) => {
|
||||
os.modalMenu([{
|
||||
os.popupMenu([{
|
||||
text: i18n.locale.user,
|
||||
icon: 'fas fa-user',
|
||||
action: () => {
|
||||
|
||||
@ -77,7 +77,7 @@
|
||||
<div class="header">
|
||||
<span class="label">{{ $ts.charts }}</span>
|
||||
<div class="selects">
|
||||
<MkSelect v-model:value="chartSrc" style="margin: 0; flex: 1;">
|
||||
<MkSelect v-model="chartSrc" style="margin: 0; flex: 1;">
|
||||
<option value="requests">{{ $ts._instanceCharts.requests }}</option>
|
||||
<option value="users">{{ $ts._instanceCharts.users }}</option>
|
||||
<option value="users-total">{{ $ts._instanceCharts.usersTotal }}</option>
|
||||
@ -90,7 +90,7 @@
|
||||
<option value="drive-files">{{ $ts._instanceCharts.files }}</option>
|
||||
<option value="drive-files-total">{{ $ts._instanceCharts.filesTotal }}</option>
|
||||
</MkSelect>
|
||||
<MkSelect v-model:value="chartSpan" style="margin: 0;">
|
||||
<MkSelect v-model="chartSpan" style="margin: 0;">
|
||||
<option value="hour">{{ $ts.perHour }}</option>
|
||||
<option value="day">{{ $ts.perDay }}</option>
|
||||
</MkSelect>
|
||||
@ -102,8 +102,8 @@
|
||||
</div>
|
||||
<div class="operations section">
|
||||
<span class="label">{{ $ts.operations }}</span>
|
||||
<MkSwitch v-model:value="isSuspended" class="switch">{{ $ts.stopActivityDelivery }}</MkSwitch>
|
||||
<MkSwitch :value="isBlocked" class="switch" @update:value="changeBlock">{{ $ts.blockThisInstance }}</MkSwitch>
|
||||
<MkSwitch v-model="isSuspended" class="switch">{{ $ts.stopActivityDelivery }}</MkSwitch>
|
||||
<MkSwitch :model-value="isBlocked" class="switch" @update:modelValue="changeBlock">{{ $ts.blockThisInstance }}</MkSwitch>
|
||||
<details>
|
||||
<summary>{{ $ts.deleteAllFiles }}</summary>
|
||||
<MkButton @click="deleteAllFiles()" style="margin: 0.5em 0 0.5em 0;"><i class="fas fa-trash-alt"></i> {{ $ts.deleteAllFiles }}</MkButton>
|
||||
@ -131,8 +131,8 @@ import MkSelect from '@client/components/ui/select.vue';
|
||||
import MkButton from '@client/components/ui/button.vue';
|
||||
import MkSwitch from '@client/components/ui/switch.vue';
|
||||
import MkInfo from '@client/components/ui/info.vue';
|
||||
import bytes from '../../filters/bytes';
|
||||
import number from '../../filters/number';
|
||||
import bytes from '@client/filters/bytes';
|
||||
import number from '@client/filters/number';
|
||||
import * as os from '@client/os';
|
||||
|
||||
const chartLimit = 90;
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<div class="_section">
|
||||
<div class="_inputs">
|
||||
<MkInput v-model:value="logDomain" :debounce="true">
|
||||
<span>{{ $ts.domain }}</span>
|
||||
<MkInput v-model="logDomain" :debounce="true">
|
||||
<template #label>{{ $ts.domain }}</template>
|
||||
</MkInput>
|
||||
<MkSelect v-model:value="logLevel">
|
||||
<MkSelect v-model="logLevel">
|
||||
<template #label>Level</template>
|
||||
<option value="all">All</option>
|
||||
<option value="info">Info</option>
|
||||
|
||||
@ -60,8 +60,8 @@ import MkContainer from '@client/components/ui/container.vue';
|
||||
import MkFolder from '@client/components/ui/folder.vue';
|
||||
import MkwFederation from '../../widgets/federation.vue';
|
||||
import { version, url } from '@client/config';
|
||||
import bytes from '../../filters/bytes';
|
||||
import number from '../../filters/number';
|
||||
import bytes from '@client/filters/bytes';
|
||||
import number from '@client/filters/number';
|
||||
import MkInstanceInfo from './instance.vue';
|
||||
|
||||
const alpha = (hex, a) => {
|
||||
|
||||
@ -62,8 +62,8 @@ import MkInput from '@client/components/ui/input.vue';
|
||||
import MkContainer from '@client/components/ui/container.vue';
|
||||
import MkFolder from '@client/components/ui/folder.vue';
|
||||
import { version, url } from '@client/config';
|
||||
import bytes from '../../filters/bytes';
|
||||
import number from '../../filters/number';
|
||||
import bytes from '@client/filters/bytes';
|
||||
import number from '@client/filters/number';
|
||||
import MkInstanceInfo from './instance.vue';
|
||||
import XMetrics from './metrics.vue';
|
||||
import * as os from '@client/os';
|
||||
|
||||
@ -29,7 +29,7 @@
|
||||
<script lang="ts">
|
||||
import { defineComponent, markRaw } from 'vue';
|
||||
import Chart from 'chart.js';
|
||||
import number from '../../filters/number';
|
||||
import number from '@client/filters/number';
|
||||
|
||||
const alpha = (hex, a) => {
|
||||
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)!;
|
||||
|
||||
@ -7,14 +7,14 @@
|
||||
|
||||
<div class="users">
|
||||
<div class="inputs" style="display: flex;">
|
||||
<MkSelect v-model:value="sort" style="margin: 0; flex: 1;">
|
||||
<MkSelect v-model="sort" style="margin: 0; flex: 1;">
|
||||
<template #label>{{ $ts.sort }}</template>
|
||||
<option value="-createdAt">{{ $ts.registeredDate }} ({{ $ts.ascendingOrder }})</option>
|
||||
<option value="+createdAt">{{ $ts.registeredDate }} ({{ $ts.descendingOrder }})</option>
|
||||
<option value="-updatedAt">{{ $ts.lastUsed }} ({{ $ts.ascendingOrder }})</option>
|
||||
<option value="+updatedAt">{{ $ts.lastUsed }} ({{ $ts.descendingOrder }})</option>
|
||||
</MkSelect>
|
||||
<MkSelect v-model:value="state" style="margin: 0; flex: 1;">
|
||||
<MkSelect v-model="state" style="margin: 0; flex: 1;">
|
||||
<template #label>{{ $ts.state }}</template>
|
||||
<option value="all">{{ $ts.all }}</option>
|
||||
<option value="available">{{ $ts.normal }}</option>
|
||||
@ -23,7 +23,7 @@
|
||||
<option value="silenced">{{ $ts.silence }}</option>
|
||||
<option value="suspended">{{ $ts.suspend }}</option>
|
||||
</MkSelect>
|
||||
<MkSelect v-model:value="origin" style="margin: 0; flex: 1;">
|
||||
<MkSelect v-model="origin" style="margin: 0; flex: 1;">
|
||||
<template #label>{{ $ts.instance }}</template>
|
||||
<option value="combined">{{ $ts.all }}</option>
|
||||
<option value="local">{{ $ts.local }}</option>
|
||||
@ -31,11 +31,11 @@
|
||||
</MkSelect>
|
||||
</div>
|
||||
<div class="inputs" style="display: flex; padding-top: 1.2em;">
|
||||
<MkInput v-model:value="searchUsername" style="margin: 0; flex: 1;" type="text" spellcheck="false" @update:value="$refs.users.reload()">
|
||||
<span>{{ $ts.username }}</span>
|
||||
<MkInput v-model="searchUsername" style="margin: 0; flex: 1;" type="text" spellcheck="false" @update:modelValue="$refs.users.reload()">
|
||||
<template #label>{{ $ts.username }}</template>
|
||||
</MkInput>
|
||||
<MkInput v-model:value="searchHost" style="margin: 0; flex: 1;" type="text" spellcheck="false" @update:value="$refs.users.reload()" :disabled="pagination.params().origin === 'local'">
|
||||
<span>{{ $ts.host }}</span>
|
||||
<MkInput v-model="searchHost" style="margin: 0; flex: 1;" type="text" spellcheck="false" @update:modelValue="$refs.users.reload()" :disabled="pagination.params().origin === 'local'">
|
||||
<template #label>{{ $ts.host }}</template>
|
||||
</MkInput>
|
||||
</div>
|
||||
|
||||
@ -70,7 +70,7 @@ import MkButton from '@client/components/ui/button.vue';
|
||||
import MkInput from '@client/components/ui/input.vue';
|
||||
import MkSelect from '@client/components/ui/select.vue';
|
||||
import MkPagination from '@client/components/ui/pagination.vue';
|
||||
import { acct } from '../../filters/user';
|
||||
import { acct } from '@client/filters/user';
|
||||
import * as os from '@client/os';
|
||||
import * as symbols from '@client/symbols';
|
||||
import { lookupUser } from '@client/scripts/lookup-user';
|
||||
|
||||
@ -40,7 +40,7 @@
|
||||
import { defineAsyncComponent, defineComponent, markRaw } from 'vue';
|
||||
import { getAcct } from '@/misc/acct';
|
||||
import MkButton from '@client/components/ui/button.vue';
|
||||
import { acct } from '../../filters/user';
|
||||
import { acct } from '@client/filters/user';
|
||||
import * as os from '@client/os';
|
||||
import * as symbols from '@client/symbols';
|
||||
|
||||
@ -116,7 +116,7 @@ export default defineComponent({
|
||||
},
|
||||
|
||||
start(ev) {
|
||||
os.modalMenu([{
|
||||
os.popupMenu([{
|
||||
text: this.$ts.messagingWithUser,
|
||||
icon: 'fas fa-user',
|
||||
action: () => { this.startUser() }
|
||||
|
||||
@ -29,7 +29,7 @@
|
||||
<button class="_buttonPrimary" @click="onIndicatorClick"><i class="fas fa-arrow-circle-down"></i>{{ $ts.newMessageExists }}</button>
|
||||
</div>
|
||||
</transition>
|
||||
<XForm v-if="!fetching" :user="user" :group="group" ref="form"/>
|
||||
<XForm v-if="!fetching" :user="user" :group="group" ref="form" class="form"/>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
@ -320,7 +320,7 @@ const Component = defineComponent({
|
||||
menu(ev) {
|
||||
const path = this.groupId ? `/my/messaging/group/${this.groupId}` : `/my/messaging/${this.userAcct}`;
|
||||
|
||||
os.modalMenu([this.inWindow ? undefined : {
|
||||
os.popupMenu([this.inWindow ? undefined : {
|
||||
text: this.$ts.openInWindow,
|
||||
icon: 'fas fa-window-maximize',
|
||||
action: () => {
|
||||
@ -452,6 +452,10 @@ export default Component;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .form {
|
||||
border-top: solid 0.5px var(--divider);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
<p>{{ $ts._mfm.mentionDescription }}</p>
|
||||
<div class="preview">
|
||||
<Mfm :text="preview_mention"/>
|
||||
<MkTextarea v-model:value="preview_mention"><span>MFM</span></MkTextarea>
|
||||
<MkTextarea v-model="preview_mention"><template #label>MFM</template></MkTextarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -17,7 +17,7 @@
|
||||
<p>{{ $ts._mfm.hashtagDescription }}</p>
|
||||
<div class="preview">
|
||||
<Mfm :text="preview_hashtag"/>
|
||||
<MkTextarea v-model:value="preview_hashtag"><span>MFM</span></MkTextarea>
|
||||
<MkTextarea v-model="preview_hashtag"><template #label>MFM</template></MkTextarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -27,7 +27,7 @@
|
||||
<p>{{ $ts._mfm.urlDescription }}</p>
|
||||
<div class="preview">
|
||||
<Mfm :text="preview_url"/>
|
||||
<MkTextarea v-model:value="preview_url"><span>MFM</span></MkTextarea>
|
||||
<MkTextarea v-model="preview_url"><template #label>MFM</template></MkTextarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -37,7 +37,7 @@
|
||||
<p>{{ $ts._mfm.linkDescription }}</p>
|
||||
<div class="preview">
|
||||
<Mfm :text="preview_link"/>
|
||||
<MkTextarea v-model:value="preview_link"><span>MFM</span></MkTextarea>
|
||||
<MkTextarea v-model="preview_link"><template #label>MFM</template></MkTextarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -47,7 +47,7 @@
|
||||
<p>{{ $ts._mfm.emojiDescription }}</p>
|
||||
<div class="preview">
|
||||
<Mfm :text="preview_emoji"/>
|
||||
<MkTextarea v-model:value="preview_emoji"><span>MFM</span></MkTextarea>
|
||||
<MkTextarea v-model="preview_emoji"><template #label>MFM</template></MkTextarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -57,7 +57,7 @@
|
||||
<p>{{ $ts._mfm.boldDescription }}</p>
|
||||
<div class="preview">
|
||||
<Mfm :text="preview_bold"/>
|
||||
<MkTextarea v-model:value="preview_bold"><span>MFM</span></MkTextarea>
|
||||
<MkTextarea v-model="preview_bold"><template #label>MFM</template></MkTextarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -67,7 +67,7 @@
|
||||
<p>{{ $ts._mfm.smallDescription }}</p>
|
||||
<div class="preview">
|
||||
<Mfm :text="preview_small"/>
|
||||
<MkTextarea v-model:value="preview_small"><span>MFM</span></MkTextarea>
|
||||
<MkTextarea v-model="preview_small"><template #label>MFM</template></MkTextarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -77,7 +77,7 @@
|
||||
<p>{{ $ts._mfm.quoteDescription }}</p>
|
||||
<div class="preview">
|
||||
<Mfm :text="preview_quote"/>
|
||||
<MkTextarea v-model:value="preview_quote"><span>MFM</span></MkTextarea>
|
||||
<MkTextarea v-model="preview_quote"><template #label>MFM</template></MkTextarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -87,7 +87,7 @@
|
||||
<p>{{ $ts._mfm.centerDescription }}</p>
|
||||
<div class="preview">
|
||||
<Mfm :text="preview_center"/>
|
||||
<MkTextarea v-model:value="preview_center"><span>MFM</span></MkTextarea>
|
||||
<MkTextarea v-model="preview_center"><template #label>MFM</template></MkTextarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -97,7 +97,7 @@
|
||||
<p>{{ $ts._mfm.inlineCodeDescription }}</p>
|
||||
<div class="preview">
|
||||
<Mfm :text="preview_inlineCode"/>
|
||||
<MkTextarea v-model:value="preview_inlineCode"><span>MFM</span></MkTextarea>
|
||||
<MkTextarea v-model="preview_inlineCode"><template #label>MFM</template></MkTextarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -107,7 +107,7 @@
|
||||
<p>{{ $ts._mfm.blockCodeDescription }}</p>
|
||||
<div class="preview">
|
||||
<Mfm :text="preview_blockCode"/>
|
||||
<MkTextarea v-model:value="preview_blockCode"><span>MFM</span></MkTextarea>
|
||||
<MkTextarea v-model="preview_blockCode"><template #label>MFM</template></MkTextarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -117,7 +117,7 @@
|
||||
<p>{{ $ts._mfm.inlineMathDescription }}</p>
|
||||
<div class="preview">
|
||||
<Mfm :text="preview_inlineMath"/>
|
||||
<MkTextarea v-model:value="preview_inlineMath"><span>MFM</span></MkTextarea>
|
||||
<MkTextarea v-model="preview_inlineMath"><template #label>MFM</template></MkTextarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -127,7 +127,7 @@
|
||||
<p>{{ $ts._mfm.searchDescription }}</p>
|
||||
<div class="preview">
|
||||
<Mfm :text="preview_search"/>
|
||||
<MkTextarea v-model:value="preview_search"><span>MFM</span></MkTextarea>
|
||||
<MkTextarea v-model="preview_search"><template #label>MFM</template></MkTextarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -137,7 +137,7 @@
|
||||
<p>{{ $ts._mfm.flipDescription }}</p>
|
||||
<div class="preview">
|
||||
<Mfm :text="preview_flip"/>
|
||||
<MkTextarea v-model:value="preview_flip"><span>MFM</span></MkTextarea>
|
||||
<MkTextarea v-model="preview_flip"><template #label>MFM</template></MkTextarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -147,7 +147,7 @@
|
||||
<p>{{ $ts._mfm.fontDescription }}</p>
|
||||
<div class="preview">
|
||||
<Mfm :text="preview_font"/>
|
||||
<MkTextarea v-model:value="preview_font"><span>MFM</span></MkTextarea>
|
||||
<MkTextarea v-model="preview_font"><template #label>MFM</template></MkTextarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -157,7 +157,7 @@
|
||||
<p>{{ $ts._mfm.x2Description }}</p>
|
||||
<div class="preview">
|
||||
<Mfm :text="preview_x2"/>
|
||||
<MkTextarea v-model:value="preview_x2"><span>MFM</span></MkTextarea>
|
||||
<MkTextarea v-model="preview_x2"><template #label>MFM</template></MkTextarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -167,7 +167,7 @@
|
||||
<p>{{ $ts._mfm.x3Description }}</p>
|
||||
<div class="preview">
|
||||
<Mfm :text="preview_x3"/>
|
||||
<MkTextarea v-model:value="preview_x3"><span>MFM</span></MkTextarea>
|
||||
<MkTextarea v-model="preview_x3"><template #label>MFM</template></MkTextarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -177,7 +177,7 @@
|
||||
<p>{{ $ts._mfm.x4Description }}</p>
|
||||
<div class="preview">
|
||||
<Mfm :text="preview_x4"/>
|
||||
<MkTextarea v-model:value="preview_x4"><span>MFM</span></MkTextarea>
|
||||
<MkTextarea v-model="preview_x4"><template #label>MFM</template></MkTextarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -187,7 +187,7 @@
|
||||
<p>{{ $ts._mfm.blurDescription }}</p>
|
||||
<div class="preview">
|
||||
<Mfm :text="preview_blur"/>
|
||||
<MkTextarea v-model:value="preview_blur"><span>MFM</span></MkTextarea>
|
||||
<MkTextarea v-model="preview_blur"><template #label>MFM</template></MkTextarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -197,7 +197,7 @@
|
||||
<p>{{ $ts._mfm.jellyDescription }}</p>
|
||||
<div class="preview">
|
||||
<Mfm :text="preview_jelly"/>
|
||||
<MkTextarea v-model:value="preview_jelly"><span>MFM</span></MkTextarea>
|
||||
<MkTextarea v-model="preview_jelly"><template #label>MFM</template></MkTextarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -207,7 +207,7 @@
|
||||
<p>{{ $ts._mfm.tadaDescription }}</p>
|
||||
<div class="preview">
|
||||
<Mfm :text="preview_tada"/>
|
||||
<MkTextarea v-model:value="preview_tada"><span>MFM</span></MkTextarea>
|
||||
<MkTextarea v-model="preview_tada"><template #label>MFM</template></MkTextarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -217,7 +217,7 @@
|
||||
<p>{{ $ts._mfm.jumpDescription }}</p>
|
||||
<div class="preview">
|
||||
<Mfm :text="preview_jump"/>
|
||||
<MkTextarea v-model:value="preview_jump"><span>MFM</span></MkTextarea>
|
||||
<MkTextarea v-model="preview_jump"><template #label>MFM</template></MkTextarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -227,7 +227,7 @@
|
||||
<p>{{ $ts._mfm.bounceDescription }}</p>
|
||||
<div class="preview">
|
||||
<Mfm :text="preview_bounce"/>
|
||||
<MkTextarea v-model:value="preview_bounce"><span>MFM</span></MkTextarea>
|
||||
<MkTextarea v-model="preview_bounce"><template #label>MFM</template></MkTextarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -237,7 +237,7 @@
|
||||
<p>{{ $ts._mfm.spinDescription }}</p>
|
||||
<div class="preview">
|
||||
<Mfm :text="preview_spin"/>
|
||||
<MkTextarea v-model:value="preview_spin"><span>MFM</span></MkTextarea>
|
||||
<MkTextarea v-model="preview_spin"><template #label>MFM</template></MkTextarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -247,7 +247,7 @@
|
||||
<p>{{ $ts._mfm.shakeDescription }}</p>
|
||||
<div class="preview">
|
||||
<Mfm :text="preview_shake"/>
|
||||
<MkTextarea v-model:value="preview_shake"><span>MFM</span></MkTextarea>
|
||||
<MkTextarea v-model="preview_shake"><template #label>MFM</template></MkTextarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -257,7 +257,17 @@
|
||||
<p>{{ $ts._mfm.twitchDescription }}</p>
|
||||
<div class="preview">
|
||||
<Mfm :text="preview_twitch"/>
|
||||
<MkTextarea v-model:value="preview_twitch"><span>MFM</span></MkTextarea>
|
||||
<MkTextarea v-model="preview_twitch"><template #label>MFM</template></MkTextarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section _block">
|
||||
<div class="title">{{ $ts._mfm.rainbow }}</div>
|
||||
<div class="content">
|
||||
<p>{{ $ts._mfm.rainbowDescription }}</p>
|
||||
<div class="preview">
|
||||
<Mfm :text="preview_rainbow"/>
|
||||
<MkTextarea v-model="preview_rainbow"><template #label>MFM</template></MkTextarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -306,6 +316,7 @@ export default defineComponent({
|
||||
preview_x3: `$[x3 🍮]`,
|
||||
preview_x4: `$[x4 🍮]`,
|
||||
preview_blur: `$[blur ${this.$ts._mfm.dummy}]`,
|
||||
preview_rainbow: `$[rainbow 🍮]`,
|
||||
}
|
||||
},
|
||||
});
|
||||
@ -313,6 +324,8 @@ export default defineComponent({
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mwysmxbg {
|
||||
background: var(--bg);
|
||||
|
||||
> .section {
|
||||
> .title {
|
||||
position: sticky;
|
||||
@ -320,8 +333,8 @@ export default defineComponent({
|
||||
top: var(--stickyTop, 0px);
|
||||
padding: 16px;
|
||||
font-weight: bold;
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: var(--blur, blur(10px));
|
||||
backdrop-filter: var(--blur, blur(10px));
|
||||
background-color: var(--X16);
|
||||
}
|
||||
|
||||
|
||||
51
src/client/pages/my-antennas/create.vue
Normal file
51
src/client/pages/my-antennas/create.vue
Normal file
@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<div class="geegznzt">
|
||||
<XAntenna :antenna="draft" @created="onAntennaCreated"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import MkButton from '@client/components/ui/button.vue';
|
||||
import XAntenna from './editor.vue';
|
||||
import * as symbols from '@client/symbols';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
MkButton,
|
||||
XAntenna,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
[symbols.PAGE_INFO]: {
|
||||
title: this.$ts.manageAntennas,
|
||||
icon: 'fas fa-satellite',
|
||||
},
|
||||
draft: {
|
||||
name: '',
|
||||
src: 'all',
|
||||
userListId: null,
|
||||
userGroupId: null,
|
||||
users: [],
|
||||
keywords: [],
|
||||
excludeKeywords: [],
|
||||
withReplies: false,
|
||||
caseSensitive: false,
|
||||
withFile: false,
|
||||
notify: false
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onAntennaCreated() {
|
||||
this.$router.push('/my/antennas');
|
||||
},
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
56
src/client/pages/my-antennas/edit.vue
Normal file
56
src/client/pages/my-antennas/edit.vue
Normal file
@ -0,0 +1,56 @@
|
||||
<template>
|
||||
<div class="">
|
||||
<XAntenna v-if="antenna" :antenna="antenna" @updated="onAntennaUpdated"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import MkButton from '@client/components/ui/button.vue';
|
||||
import XAntenna from './editor.vue';
|
||||
import * as symbols from '@client/symbols';
|
||||
import * as os from '@client/os';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
MkButton,
|
||||
XAntenna,
|
||||
},
|
||||
|
||||
props: {
|
||||
antennaId: {
|
||||
type: String,
|
||||
required: true,
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
[symbols.PAGE_INFO]: {
|
||||
title: this.$ts.manageAntennas,
|
||||
icon: 'fas fa-satellite',
|
||||
},
|
||||
antenna: null,
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
antennaId: {
|
||||
async handler() {
|
||||
this.antenna = await os.api('antennas/show', { antennaId: this.antennaId });
|
||||
},
|
||||
immediate: true,
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onAntennaUpdated() {
|
||||
this.$router.push('/my/antennas');
|
||||
},
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@ -1,11 +1,10 @@
|
||||
<template>
|
||||
<div class="shaynizk _card">
|
||||
<div class="_title" v-if="antenna.name">{{ antenna.name }}</div>
|
||||
<div class="_content body">
|
||||
<MkInput v-model:value="name">
|
||||
<span>{{ $ts.name }}</span>
|
||||
<div class="shaynizk">
|
||||
<div class="form">
|
||||
<MkInput v-model="name" class="_inputNoTopMargin">
|
||||
<template #label>{{ $ts.name }}</template>
|
||||
</MkInput>
|
||||
<MkSelect v-model:value="src">
|
||||
<MkSelect v-model="src">
|
||||
<template #label>{{ $ts.antennaSource }}</template>
|
||||
<option value="all">{{ $ts._antennaSources.all }}</option>
|
||||
<option value="home">{{ $ts._antennaSources.homeTimeline }}</option>
|
||||
@ -13,34 +12,34 @@
|
||||
<option value="list">{{ $ts._antennaSources.userList }}</option>
|
||||
<option value="group">{{ $ts._antennaSources.userGroup }}</option>
|
||||
</MkSelect>
|
||||
<MkSelect v-model:value="userListId" v-if="src === 'list'">
|
||||
<MkSelect v-model="userListId" v-if="src === 'list'">
|
||||
<template #label>{{ $ts.userList }}</template>
|
||||
<option v-for="list in userLists" :value="list.id" :key="list.id">{{ list.name }}</option>
|
||||
</MkSelect>
|
||||
<MkSelect v-model:value="userGroupId" v-else-if="src === 'group'">
|
||||
<MkSelect v-model="userGroupId" v-else-if="src === 'group'">
|
||||
<template #label>{{ $ts.userGroup }}</template>
|
||||
<option v-for="group in userGroups" :value="group.id" :key="group.id">{{ group.name }}</option>
|
||||
</MkSelect>
|
||||
<MkTextarea v-model:value="users" v-else-if="src === 'users'">
|
||||
<span>{{ $ts.users }}</span>
|
||||
<template #desc>{{ $ts.antennaUsersDescription }} <button class="_textButton" @click="addUser">{{ $ts.addUser }}</button></template>
|
||||
<MkTextarea v-model="users" v-else-if="src === 'users'">
|
||||
<template #label>{{ $ts.users }}</template>
|
||||
<template #caption>{{ $ts.antennaUsersDescription }} <button class="_textButton" @click="addUser">{{ $ts.addUser }}</button></template>
|
||||
</MkTextarea>
|
||||
<MkSwitch v-model:value="withReplies">{{ $ts.withReplies }}</MkSwitch>
|
||||
<MkTextarea v-model:value="keywords">
|
||||
<span>{{ $ts.antennaKeywords }}</span>
|
||||
<template #desc>{{ $ts.antennaKeywordsDescription }}</template>
|
||||
<MkSwitch v-model="withReplies">{{ $ts.withReplies }}</MkSwitch>
|
||||
<MkTextarea v-model="keywords">
|
||||
<template #label>{{ $ts.antennaKeywords }}</template>
|
||||
<template #caption>{{ $ts.antennaKeywordsDescription }}</template>
|
||||
</MkTextarea>
|
||||
<MkTextarea v-model:value="excludeKeywords">
|
||||
<span>{{ $ts.antennaExcludeKeywords }}</span>
|
||||
<template #desc>{{ $ts.antennaKeywordsDescription }}</template>
|
||||
<MkTextarea v-model="excludeKeywords">
|
||||
<template #label>{{ $ts.antennaExcludeKeywords }}</template>
|
||||
<template #caption>{{ $ts.antennaKeywordsDescription }}</template>
|
||||
</MkTextarea>
|
||||
<MkSwitch v-model:value="caseSensitive">{{ $ts.caseSensitive }}</MkSwitch>
|
||||
<MkSwitch v-model:value="withFile">{{ $ts.withFileAntenna }}</MkSwitch>
|
||||
<MkSwitch v-model:value="notify">{{ $ts.notifyAntenna }}</MkSwitch>
|
||||
<MkSwitch v-model="caseSensitive">{{ $ts.caseSensitive }}</MkSwitch>
|
||||
<MkSwitch v-model="withFile">{{ $ts.withFileAntenna }}</MkSwitch>
|
||||
<MkSwitch v-model="notify">{{ $ts.notifyAntenna }}</MkSwitch>
|
||||
</div>
|
||||
<div class="_footer">
|
||||
<div class="actions">
|
||||
<MkButton inline @click="saveAntenna()" primary><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
|
||||
<MkButton inline @click="deleteAntenna()" v-if="antenna.id != null"><i class="fas fa-trash"></i> {{ $ts.delete }}</MkButton>
|
||||
<MkButton inline @click="deleteAntenna()" v-if="antenna.id != null" danger><i class="fas fa-trash"></i> {{ $ts.delete }}</MkButton>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -117,7 +116,7 @@ export default defineComponent({
|
||||
methods: {
|
||||
async saveAntenna() {
|
||||
if (this.antenna.id == null) {
|
||||
await os.api('antennas/create', {
|
||||
await os.apiWithDialog('antennas/create', {
|
||||
name: this.name,
|
||||
src: this.src,
|
||||
userListId: this.userListId,
|
||||
@ -132,7 +131,7 @@ export default defineComponent({
|
||||
});
|
||||
this.$emit('created');
|
||||
} else {
|
||||
await os.api('antennas/update', {
|
||||
await os.apiWithDialog('antennas/update', {
|
||||
antennaId: this.antenna.id,
|
||||
name: this.name,
|
||||
src: this.src,
|
||||
@ -146,9 +145,8 @@ export default defineComponent({
|
||||
keywords: this.keywords.trim().split('\n').map(x => x.trim().split(' ')),
|
||||
excludeKeywords: this.excludeKeywords.trim().split('\n').map(x => x.trim().split(' ')),
|
||||
});
|
||||
this.$emit('updated');
|
||||
}
|
||||
|
||||
os.success();
|
||||
},
|
||||
|
||||
async deleteAntenna() {
|
||||
@ -180,9 +178,13 @@ export default defineComponent({
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.shaynizk {
|
||||
> .body {
|
||||
max-height: 250px;
|
||||
overflow: auto;
|
||||
> .form {
|
||||
padding: 32px;
|
||||
}
|
||||
|
||||
> .actions {
|
||||
padding: 24px 32px;
|
||||
border-top: solid 0.5px var(--divider);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,12 +1,12 @@
|
||||
<template>
|
||||
<div class="ieepwinx _section">
|
||||
<MkButton @click="create" primary class="add"><i class="fas fa-plus"></i> {{ $ts.add }}</MkButton>
|
||||
<MkButton :link="true" to="/my/antennas/create" primary class="add"><i class="fas fa-plus"></i> {{ $ts.add }}</MkButton>
|
||||
|
||||
<div class="_content">
|
||||
<XAntenna v-if="draft" :antenna="draft" @created="onAntennaCreated" style="margin-bottom: var(--margin);"/>
|
||||
|
||||
<MkPagination :pagination="pagination" #default="{items}" class="antennas" ref="list">
|
||||
<XAntenna v-for="(antenna, i) in items" :key="antenna.id" :antenna="antenna" @deleted="onAntennaDeleted"/>
|
||||
<MkPagination :pagination="pagination" #default="{items}" ref="list">
|
||||
<MkA class="ljoevbzj" v-for="antenna in items" :key="antenna.id" :to="`/my/antennas/${antenna.id}`">
|
||||
<div class="name">{{ antenna.name }}</div>
|
||||
</MkA>
|
||||
</MkPagination>
|
||||
</div>
|
||||
</div>
|
||||
@ -16,14 +16,12 @@
|
||||
import { defineComponent } from 'vue';
|
||||
import MkPagination from '@client/components/ui/pagination.vue';
|
||||
import MkButton from '@client/components/ui/button.vue';
|
||||
import XAntenna from './index.antenna.vue';
|
||||
import * as symbols from '@client/symbols';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
MkPagination,
|
||||
MkButton,
|
||||
XAntenna,
|
||||
},
|
||||
|
||||
data() {
|
||||
@ -40,43 +38,34 @@ export default defineComponent({
|
||||
endpoint: 'antennas/list',
|
||||
limit: 10,
|
||||
},
|
||||
draft: null,
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
create() {
|
||||
this.draft = {
|
||||
name: '',
|
||||
src: 'all',
|
||||
userListId: null,
|
||||
userGroupId: null,
|
||||
users: [],
|
||||
keywords: [],
|
||||
excludeKeywords: [],
|
||||
withReplies: false,
|
||||
caseSensitive: false,
|
||||
withFile: false,
|
||||
notify: false
|
||||
};
|
||||
},
|
||||
|
||||
onAntennaCreated() {
|
||||
this.$refs.list.reload();
|
||||
this.draft = null;
|
||||
},
|
||||
|
||||
onAntennaDeleted() {
|
||||
this.$refs.list.reload();
|
||||
},
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.ieepwinx {
|
||||
padding: 16px;
|
||||
|
||||
> .add {
|
||||
margin: 0 auto 16px auto;
|
||||
}
|
||||
|
||||
.ljoevbzj {
|
||||
display: block;
|
||||
padding: 16px;
|
||||
margin-bottom: 8px;
|
||||
border: solid 1px var(--divider);
|
||||
border-radius: 6px;
|
||||
|
||||
&:hover {
|
||||
border: solid 1px var(--accent);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
> .name {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,11 +1,12 @@
|
||||
<template>
|
||||
<div class="qkcjvfiv _section">
|
||||
<div class="qkcjvfiv">
|
||||
<MkButton @click="create" primary class="add"><i class="fas fa-plus"></i> {{ $ts.createList }}</MkButton>
|
||||
|
||||
<MkPagination :pagination="pagination" #default="{items}" class="lists _content" ref="list">
|
||||
<div class="list _panel" v-for="(list, i) in items" :key="list.id">
|
||||
<MkA :to="`/my/lists/${ list.id }`">{{ list.name }}</MkA>
|
||||
</div>
|
||||
<MkA v-for="list in items" :key="list.id" class="list _panel" :to="`/my/lists/${ list.id }`">
|
||||
<div class="name">{{ list.name }}</div>
|
||||
<MkAvatars :user-ids="list.userIds"/>
|
||||
</MkA>
|
||||
</MkPagination>
|
||||
</div>
|
||||
</template>
|
||||
@ -14,6 +15,7 @@
|
||||
import { defineComponent } from 'vue';
|
||||
import MkPagination from '@client/components/ui/pagination.vue';
|
||||
import MkButton from '@client/components/ui/button.vue';
|
||||
import MkAvatars from '@client/components/avatars.vue';
|
||||
import * as os from '@client/os';
|
||||
import * as symbols from '@client/symbols';
|
||||
|
||||
@ -21,6 +23,7 @@ export default defineComponent({
|
||||
components: {
|
||||
MkPagination,
|
||||
MkButton,
|
||||
MkAvatars,
|
||||
},
|
||||
|
||||
data() {
|
||||
@ -57,14 +60,27 @@ export default defineComponent({
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.qkcjvfiv {
|
||||
padding: 16px;
|
||||
|
||||
> .add {
|
||||
margin: 0 auto var(--margin) auto;
|
||||
}
|
||||
|
||||
> .lists {
|
||||
> .list {
|
||||
display: flex;
|
||||
display: block;
|
||||
padding: 16px;
|
||||
border: solid 1px var(--divider);
|
||||
border-radius: 6px;
|
||||
|
||||
&:hover {
|
||||
border: solid 1px var(--accent);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
> .name {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,9 +3,9 @@
|
||||
<template #header><i class="fas fa-bolt"></i> {{ $ts._pages.blocks.button }}</template>
|
||||
|
||||
<section class="xfhsjczc">
|
||||
<MkInput v-model:value="value.text"><span>{{ $ts._pages.blocks._button.text }}</span></MkInput>
|
||||
<MkSwitch v-model:value="value.primary"><span>{{ $ts._pages.blocks._button.colored }}</span></MkSwitch>
|
||||
<MkSelect v-model:value="value.action">
|
||||
<MkInput v-model="value.text"><template #label>{{ $ts._pages.blocks._button.text }}</template></MkInput>
|
||||
<MkSwitch v-model="value.primary"><span>{{ $ts._pages.blocks._button.colored }}</span></MkSwitch>
|
||||
<MkSelect v-model="value.action">
|
||||
<template #label>{{ $ts._pages.blocks._button.action }}</template>
|
||||
<option value="dialog">{{ $ts._pages.blocks._button._action.dialog }}</option>
|
||||
<option value="resetRandom">{{ $ts._pages.blocks._button._action.resetRandom }}</option>
|
||||
@ -13,12 +13,12 @@
|
||||
<option value="callAiScript">{{ $ts._pages.blocks._button._action.callAiScript }}</option>
|
||||
</MkSelect>
|
||||
<template v-if="value.action === 'dialog'">
|
||||
<MkInput v-model:value="value.content"><span>{{ $ts._pages.blocks._button._action._dialog.content }}</span></MkInput>
|
||||
<MkInput v-model="value.content"><template #label>{{ $ts._pages.blocks._button._action._dialog.content }}</template></MkInput>
|
||||
</template>
|
||||
<template v-else-if="value.action === 'pushEvent'">
|
||||
<MkInput v-model:value="value.event"><span>{{ $ts._pages.blocks._button._action._pushEvent.event }}</span></MkInput>
|
||||
<MkInput v-model:value="value.message"><span>{{ $ts._pages.blocks._button._action._pushEvent.message }}</span></MkInput>
|
||||
<MkSelect v-model:value="value.var">
|
||||
<MkInput v-model="value.event"><template #label>{{ $ts._pages.blocks._button._action._pushEvent.event }}</template></MkInput>
|
||||
<MkInput v-model="value.message"><template #label>{{ $ts._pages.blocks._button._action._pushEvent.message }}</template></MkInput>
|
||||
<MkSelect v-model="value.var">
|
||||
<template #label>{{ $ts._pages.blocks._button._action._pushEvent.variable }}</template>
|
||||
<option :value="null">{{ $t('_pages.blocks._button._action._pushEvent.no-variable') }}</option>
|
||||
<option v-for="v in hpml.getVarsByType()" :value="v.name">{{ v.name }}</option>
|
||||
@ -31,7 +31,7 @@
|
||||
</MkSelect>
|
||||
</template>
|
||||
<template v-else-if="value.action === 'callAiScript'">
|
||||
<MkInput v-model:value="value.fn"><span>{{ $ts._pages.blocks._button._action._callAiScript.functionName }}</span></MkInput>
|
||||
<MkInput v-model="value.fn"><template #label>{{ $ts._pages.blocks._button._action._callAiScript.functionName }}</template></MkInput>
|
||||
</template>
|
||||
</section>
|
||||
</XContainer>
|
||||
|
||||
@ -3,9 +3,18 @@
|
||||
<template #header><i class="fas fa-paint-brush"></i> {{ $ts._pages.blocks.canvas }}</template>
|
||||
|
||||
<section style="padding: 0 16px 0 16px;">
|
||||
<MkInput v-model:value="value.name"><template #prefix><i class="fas fa-magic"></i></template><span>{{ $ts._pages.blocks._canvas.id }}</span></MkInput>
|
||||
<MkInput v-model:value="value.width" type="number"><span>{{ $ts._pages.blocks._canvas.width }}</span><template #suffix>px</template></MkInput>
|
||||
<MkInput v-model:value="value.height" type="number"><span>{{ $ts._pages.blocks._canvas.height }}</span><template #suffix>px</template></MkInput>
|
||||
<MkInput v-model="value.name">
|
||||
<template #prefix><i class="fas fa-magic"></i></template>
|
||||
<template #label>{{ $ts._pages.blocks._canvas.id }}</template>
|
||||
</MkInput>
|
||||
<MkInput v-model="value.width" type="number">
|
||||
<template #label>{{ $ts._pages.blocks._canvas.width }}</template>
|
||||
<template #suffix>px</template>
|
||||
</MkInput>
|
||||
<MkInput v-model="value.height" type="number">
|
||||
<template #label>{{ $ts._pages.blocks._canvas.height }}</template>
|
||||
<template #suffix>px</template>
|
||||
</MkInput>
|
||||
</section>
|
||||
</XContainer>
|
||||
</template>
|
||||
|
||||
@ -3,9 +3,16 @@
|
||||
<template #header><i class="fas fa-bolt"></i> {{ $ts._pages.blocks.counter }}</template>
|
||||
|
||||
<section style="padding: 0 16px 0 16px;">
|
||||
<MkInput v-model:value="value.name"><template #prefix><i class="fas fa-magic"></i></template><span>{{ $ts._pages.blocks._counter.name }}</span></MkInput>
|
||||
<MkInput v-model:value="value.text"><span>{{ $ts._pages.blocks._counter.text }}</span></MkInput>
|
||||
<MkInput v-model:value="value.inc" type="number"><span>{{ $ts._pages.blocks._counter.inc }}</span></MkInput>
|
||||
<MkInput v-model="value.name">
|
||||
<template #prefix><i class="fas fa-magic"></i></template>
|
||||
<template #label>{{ $ts._pages.blocks._counter.name }}</template>
|
||||
</MkInput>
|
||||
<MkInput v-model="value.text">
|
||||
<template #label>{{ $ts._pages.blocks._counter.text }}</template>
|
||||
</MkInput>
|
||||
<MkInput v-model="value.inc" type="number">
|
||||
<template #label>{{ $ts._pages.blocks._counter.inc }}</template>
|
||||
</MkInput>
|
||||
</section>
|
||||
</XContainer>
|
||||
</template>
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
</template>
|
||||
|
||||
<section class="romcojzs">
|
||||
<MkSelect v-model:value="value.var">
|
||||
<MkSelect v-model="value.var">
|
||||
<template #label>{{ $ts._pages.blocks._if.variable }}</template>
|
||||
<option v-for="v in hpml.getVarsByType('boolean')" :value="v.name">{{ v.name }}</option>
|
||||
<optgroup :label="$ts._pages.script.pageVariables">
|
||||
|
||||
@ -3,11 +3,11 @@
|
||||
<template #header><i class="fas fa-sticky-note"></i> {{ $ts._pages.blocks.note }}</template>
|
||||
|
||||
<section style="padding: 0 16px 0 16px;">
|
||||
<MkInput v-model:value="id">
|
||||
<span>{{ $ts._pages.blocks._note.id }}</span>
|
||||
<template #desc>{{ $ts._pages.blocks._note.idDescription }}</template>
|
||||
<MkInput v-model="id">
|
||||
<template #label>{{ $ts._pages.blocks._note.id }}</template>
|
||||
<template #caption>{{ $ts._pages.blocks._note.idDescription }}</template>
|
||||
</MkInput>
|
||||
<MkSwitch v-model:value="value.detailed"><span>{{ $ts._pages.blocks._note.detailed }}</span></MkSwitch>
|
||||
<MkSwitch v-model="value.detailed"><span>{{ $ts._pages.blocks._note.detailed }}</span></MkSwitch>
|
||||
|
||||
<XNote v-if="note && !value.detailed" v-model:note="note" :key="note.id + ':normal'" style="margin-bottom: 16px;"/>
|
||||
<XNoteDetailed v-if="note && value.detailed" v-model:note="note" :key="note.id + ':detail'" style="margin-bottom: 16px;"/>
|
||||
|
||||
@ -3,9 +3,16 @@
|
||||
<template #header><i class="fas fa-bolt"></i> {{ $ts._pages.blocks.numberInput }}</template>
|
||||
|
||||
<section style="padding: 0 16px 0 16px;">
|
||||
<MkInput v-model:value="value.name"><template #prefix><i class="fas fa-magic"></i></template><span>{{ $ts._pages.blocks._numberInput.name }}</span></MkInput>
|
||||
<MkInput v-model:value="value.text"><span>{{ $ts._pages.blocks._numberInput.text }}</span></MkInput>
|
||||
<MkInput v-model:value="value.default" type="number"><span>{{ $ts._pages.blocks._numberInput.default }}</span></MkInput>
|
||||
<MkInput v-model="value.name">
|
||||
<template #prefix><i class="fas fa-magic"></i></template>
|
||||
<template #label>{{ $ts._pages.blocks._numberInput.name }}</template>
|
||||
</MkInput>
|
||||
<MkInput v-model="value.text">
|
||||
<template #label>{{ $ts._pages.blocks._numberInput.text }}</template>
|
||||
</MkInput>
|
||||
<MkInput v-model="value.default" type="number">
|
||||
<template #label>{{ $ts._pages.blocks._numberInput.default }}</template>
|
||||
</MkInput>
|
||||
</section>
|
||||
</XContainer>
|
||||
</template>
|
||||
|
||||
@ -3,9 +3,9 @@
|
||||
<template #header><i class="fas fa-paper-plane"></i> {{ $ts._pages.blocks.post }}</template>
|
||||
|
||||
<section style="padding: 16px;">
|
||||
<MkTextarea v-model:value="value.text">{{ $ts._pages.blocks._post.text }}</MkTextarea>
|
||||
<MkSwitch v-model:value="value.attachCanvasImage"><span>{{ $ts._pages.blocks._post.attachCanvasImage }}</span></MkSwitch>
|
||||
<MkInput v-if="value.attachCanvasImage" v-model:value="value.canvasId"><span>{{ $ts._pages.blocks._post.canvasId }}</span></MkInput>
|
||||
<MkTextarea v-model="value.text"><template #label>{{ $ts._pages.blocks._post.text }}</template></MkTextarea>
|
||||
<MkSwitch v-model="value.attachCanvasImage"><span>{{ $ts._pages.blocks._post.attachCanvasImage }}</span></MkSwitch>
|
||||
<MkInput v-if="value.attachCanvasImage" v-model="value.canvasId"><template #label>{{ $ts._pages.blocks._post.canvasId }}</template></MkInput>
|
||||
</section>
|
||||
</XContainer>
|
||||
</template>
|
||||
|
||||
@ -3,10 +3,10 @@
|
||||
<template #header><i class="fas fa-bolt"></i> {{ $ts._pages.blocks.radioButton }}</template>
|
||||
|
||||
<section style="padding: 0 16px 16px 16px;">
|
||||
<MkInput v-model:value="value.name"><template #prefix><i class="fas fa-magic"></i></template><span>{{ $ts._pages.blocks._radioButton.name }}</span></MkInput>
|
||||
<MkInput v-model:value="value.title"><span>{{ $ts._pages.blocks._radioButton.title }}</span></MkInput>
|
||||
<MkTextarea v-model:value="values"><span>{{ $ts._pages.blocks._radioButton.values }}</span></MkTextarea>
|
||||
<MkInput v-model:value="value.default"><span>{{ $ts._pages.blocks._radioButton.default }}</span></MkInput>
|
||||
<MkInput v-model="value.name"><template #prefix><i class="fas fa-magic"></i></template><template #label>{{ $ts._pages.blocks._radioButton.name }}</template></MkInput>
|
||||
<MkInput v-model="value.title"><template #label>{{ $ts._pages.blocks._radioButton.title }}</template></MkInput>
|
||||
<MkTextarea v-model="values"><template #label>{{ $ts._pages.blocks._radioButton.values }}</template></MkTextarea>
|
||||
<MkInput v-model="value.default"><template #label>{{ $ts._pages.blocks._radioButton.default }}</template></MkInput>
|
||||
</section>
|
||||
</XContainer>
|
||||
</template>
|
||||
|
||||
@ -3,9 +3,9 @@
|
||||
<template #header><i class="fas fa-bolt"></i> {{ $ts._pages.blocks.switch }}</template>
|
||||
|
||||
<section class="kjuadyyj">
|
||||
<MkInput v-model:value="value.name"><template #prefix><i class="fas fa-magic"></i></template><span>{{ $ts._pages.blocks._switch.name }}</span></MkInput>
|
||||
<MkInput v-model:value="value.text"><span>{{ $ts._pages.blocks._switch.text }}</span></MkInput>
|
||||
<MkSwitch v-model:value="value.default"><span>{{ $ts._pages.blocks._switch.default }}</span></MkSwitch>
|
||||
<MkInput v-model="value.name"><template #prefix><i class="fas fa-magic"></i></template><template #label>{{ $ts._pages.blocks._switch.name }}</template></MkInput>
|
||||
<MkInput v-model="value.text"><template #label>{{ $ts._pages.blocks._switch.text }}</template></MkInput>
|
||||
<MkSwitch v-model="value.default"><span>{{ $ts._pages.blocks._switch.default }}</span></MkSwitch>
|
||||
</section>
|
||||
</XContainer>
|
||||
</template>
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user