diff options
Diffstat (limited to 'src/client')
147 files changed, 2697 insertions, 1794 deletions
diff --git a/src/client/components/abuse-report-window.vue b/src/client/components/abuse-report-window.vue index d9e1c3966b..266c0d566f 100644 --- a/src/client/components/abuse-report-window.vue +++ b/src/client/components/abuse-report-window.vue @@ -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"> diff --git a/src/client/components/dialog.vue b/src/client/components/dialog.vue index a673e827d6..f3611f050e 100644 --- a/src/client/components/dialog.vue +++ b/src/client/components/dialog.vue @@ -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> diff --git a/src/client/components/drive.file.vue b/src/client/components/drive.file.vue index 3d20de23e9..b1be3d0cab 100644 --- a/src/client/components/drive.file.vue +++ b/src/client/components/drive.file.vue @@ -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); } }, diff --git a/src/client/components/drive.vue b/src/client/components/drive.vue index 16aa9dc1a8..5dadf9a11f 100644 --- a/src/client/components/drive.vue +++ b/src/client/components/drive.vue @@ -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 { diff --git a/src/client/components/emoji-picker-dialog.vue b/src/client/components/emoji-picker-dialog.vue index 9400819a1f..9aca47f547 100644 --- a/src/client/components/emoji-picker-dialog.vue +++ b/src/client/components/emoji-picker-dialog.vue @@ -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')"> + <MkEmojiPicker class="_shadow" :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() { diff --git a/src/client/components/forgot-password.vue b/src/client/components/forgot-password.vue index 1f530d7ca2..3b5ad6d6ba 100644 --- a/src/client/components/forgot-password.vue +++ b/src/client/components/forgot-password.vue @@ -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> diff --git a/src/client/components/global/misskey-flavored-markdown.vue b/src/client/components/global/misskey-flavored-markdown.vue index 988cf9cf47..c4f75bee93 100644 --- a/src/client/components/global/misskey-flavored-markdown.vue +++ b/src/client/components/global/misskey-flavored-markdown.vue @@ -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> diff --git a/src/client/components/instance-stats.vue b/src/client/components/instance-stats.vue index 432c9a1bb9..78044f0b16 100644 --- a/src/client/components/instance-stats.vue +++ b/src/client/components/instance-stats.vue @@ -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> diff --git a/src/client/components/mfm.ts b/src/client/components/mfm.ts index 3b08c83c7f..c248f934df 100644 --- a/src/client/components/mfm.ts +++ b/src/client/components/mfm.ts @@ -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), ']']); diff --git a/src/client/components/modal-page-window.vue b/src/client/components/modal-page-window.vue index 7be4045a84..ddf8ac446e 100644 --- a/src/client/components/modal-page-window.vue +++ b/src/client/components/modal-page-window.vue @@ -2,12 +2,9 @@ <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="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 { diff --git a/src/client/components/note-detailed.vue b/src/client/components/note-detailed.vue index 6040ad378f..d601052927 100644 --- a/src/client/components/note-detailed.vue +++ b/src/client/components/note-detailed.vue @@ -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 () => { diff --git a/src/client/components/note-header.vue b/src/client/components/note-header.vue index 1cd6463f9b..7758dea3ae 100644 --- a/src/client/components/note-header.vue +++ b/src/client/components/note-header.vue @@ -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({ diff --git a/src/client/components/note.vue b/src/client/components/note.vue index 504d07c0eb..873b96030a 100644 --- a/src/client/components/note.vue +++ b/src/client/components/note.vue @@ -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 () => { diff --git a/src/client/components/notification-setting-window.vue b/src/client/components/notification-setting-window.vue index 5f16c042bf..c33106ae15 100644 --- a/src/client/components/notification-setting-window.vue +++ b/src/client/components/notification-setting-window.vue @@ -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> diff --git a/src/client/components/notification.vue b/src/client/components/notification.vue index d4e6b65c70..bce6333d98 100644 --- a/src/client/components/notification.vue +++ b/src/client/components/notification.vue @@ -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'; diff --git a/src/client/components/page-preview.vue b/src/client/components/page-preview.vue index cd896445a7..090c4a6a6c 100644 --- a/src/client/components/page-preview.vue +++ b/src/client/components/page-preview.vue @@ -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({ diff --git a/src/client/components/page-window.vue b/src/client/components/page-window.vue index 26499f7054..c83b040dd8 100644 --- a/src/client/components/page-window.vue +++ b/src/client/components/page-window.vue @@ -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> diff --git a/src/client/components/page/page.number-input.vue b/src/client/components/page/page.number-input.vue index 1970ee62a9..9c4a537e15 100644 --- a/src/client/components/page/page.number-input.vue +++ b/src/client/components/page/page.number-input.vue @@ -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> diff --git a/src/client/components/page/page.post.vue b/src/client/components/page/page.post.vue index 1dfb506d5f..7b061d8cda 100644 --- a/src/client/components/page/page.post.vue +++ b/src/client/components/page/page.post.vue @@ -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> diff --git a/src/client/components/page/page.switch.vue b/src/client/components/page/page.switch.vue index a928c22bee..8818e6cbcf 100644 --- a/src/client/components/page/page.switch.vue +++ b/src/client/components/page/page.switch.vue @@ -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> diff --git a/src/client/components/page/page.text-input.vue b/src/client/components/page/page.text-input.vue index 8bf3e1c88e..752d3d7257 100644 --- a/src/client/components/page/page.text-input.vue +++ b/src/client/components/page/page.text-input.vue @@ -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> diff --git a/src/client/components/page/page.textarea-input.vue b/src/client/components/page/page.textarea-input.vue index 9951cef2de..e6cf5117f9 100644 --- a/src/client/components/page/page.textarea-input.vue +++ b/src/client/components/page/page.textarea-input.vue @@ -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> diff --git a/src/client/components/page/page.textarea.vue b/src/client/components/page/page.textarea.vue index 612bbe41b9..974c7f2c57 100644 --- a/src/client/components/page/page.textarea.vue +++ b/src/client/components/page/page.textarea.vue @@ -1,5 +1,5 @@ <template> -<MkTextarea :value="text" readonly></MkTextarea> +<MkTextarea :model-value="text" readonly></MkTextarea> </template> <script lang="ts"> diff --git a/src/client/components/poll-editor.vue b/src/client/components/poll-editor.vue index 0ade2c3ba0..dfc198fc1e 100644 --- a/src/client/components/poll-editor.vue +++ b/src/client/components/poll-editor.vue @@ -5,8 +5,8 @@ </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)"> + <template #label>{{ $t('_poll.choiceN', { n: i + 1 }) }}</template> </MkInput> <button @click="remove(i)" class="_button"> <i class="fas fa-times"></i> @@ -16,27 +16,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> diff --git a/src/client/components/post-form-attaches.vue b/src/client/components/post-form-attaches.vue index 27e20fdfa8..9365365653 100644 --- a/src/client/components/post-form-attaches.vue +++ b/src/client/components/post-form-attaches.vue @@ -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) } diff --git a/src/client/components/post-form.vue b/src/client/components/post-form.vue index 13bbb3f9e5..969f8563a4 100644 --- a/src/client/components/post-form.vue +++ b/src/client/components/post-form.vue @@ -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" 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) { + 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; } diff --git a/src/client/components/sample.vue b/src/client/components/sample.vue index 70949ea357..bce02466f6 100644 --- a/src/client/components/sample.vue +++ b/src/client/components/sample.vue @@ -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' }, { diff --git a/src/client/components/signin.vue b/src/client/components/signin.vue index f8249ffcd6..f1e5d6afe5 100755 --- a/src/client/components/signin.vue +++ b/src/client/components/signin.vue @@ -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> diff --git a/src/client/components/signup.vue b/src/client/components/signup.vue index 671642b291..0cdeb633d8 100644 --- a/src/client/components/signup.vue +++ b/src/client/components/signup.vue @@ -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"> diff --git a/src/client/components/token-generate-window.vue b/src/client/components/token-generate-window.vue index 87a76931e4..fe61f61efa 100644 --- a/src/client/components/token-generate-window.vue +++ b/src/client/components/token-generate-window.vue @@ -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> diff --git a/src/client/components/ui/button.vue b/src/client/components/ui/button.vue index c92f30db97..4c5d617d76 100644 --- a/src/client/components/ui/button.vue +++ b/src/client/components/ui/button.vue @@ -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,7 @@ export default defineComponent({ background: var(--buttonBg); border-radius: 999px; overflow: hidden; + box-sizing: border-box; &:not(:disabled):hover { background: var(--buttonHoverBg); @@ -140,7 +142,7 @@ export default defineComponent({ &.primary { font-weight: bold; - color: #fff !important; + color: var(--fgOnAccent) !important; background: var(--accent); &:not(:disabled):hover { diff --git a/src/client/components/ui/folder.vue b/src/client/components/ui/folder.vue index 4281ec7778..e6af40e36d 100644 --- a/src/client/components/ui/folder.vue +++ b/src/client/components/ui/folder.vue @@ -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); + */ > .title { margin: 0; diff --git a/src/client/components/ui/input.vue b/src/client/components/ui/input.vue index 7415d9896b..05ce5d3e15 100644 --- a/src/client/components/ui/input.vue +++ b/src/client/components/ui/input.vue @@ -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; - &:not(.inline):last-child { - margin-bottom: 8px; + &:empty { + display: none; + } } - > .icon { - position: absolute; - top: 0; - left: 0; - width: 24px; - text-align: center; - line-height: 32px; + > .caption { + font-size: 0.8em; + padding: 8px 0 0 12px; + color: var(--fgTransparentWeak); - &: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,66 +285,32 @@ export default defineComponent({ > .prefix { left: 0; - padding-right: 4px; + padding-right: 6px; } > .suffix { right: 0; - padding-left: 4px; + padding-left: 6px; } - } - > .save { - margin: 6px 0 0 0; - font-size: 0.8em; - } - - > .desc { - margin: 6px 0 0 0; - - &:empty { - display: none; - } - - * { + &.inline { + display: inline-block; margin: 0; } - } - - &.focused { - > .input { - &:after { - opacity: 1; - transform: scaleX(1); - } - - > .label { - color: var(--accent); - } - } - } - &.focused, - &.filled { - > .input { - > .label { - top: -17px; - left: 0 !important; - transform: scale(0.75); + &.focused { + > input { + border-color: var(--accent); + //box-shadow: 0 0 0 4px var(--focus); } } - } - &.inline { - display: inline-block; - margin: 0; - } - - &.disabled { - opacity: 0.7; + &.disabled { + opacity: 0.7; - &, * { - cursor: not-allowed !important; + &, * { + cursor: not-allowed !important; + } } } } diff --git a/src/client/components/ui/menu.vue b/src/client/components/ui/menu.vue index eb96450774..8a1871e256 100644 --- a/src/client/components/ui/menu.vue +++ b/src/client/components/ui/menu.vue @@ -171,13 +171,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); } diff --git a/src/client/components/ui/modal-menu.vue b/src/client/components/ui/popup-menu.vue index aac4be9c3b..23f7c89f3b 100644 --- a/src/client/components/ui/modal-menu.vue +++ b/src/client/components/ui/popup-menu.vue @@ -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')"> + <MkMenu :items="items" :align="align" @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> diff --git a/src/client/components/ui/popup.vue b/src/client/components/ui/popup.vue new file mode 100644 index 0000000000..c98e17fa25 --- /dev/null +++ b/src/client/components/ui/popup.vue @@ -0,0 +1,213 @@ +<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></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, + }; + }, + + 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.transformOrigin = 'center top'; + } else { + 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> diff --git a/src/client/components/ui/select.vue b/src/client/components/ui/select.vue index e78c44fe0d..e9d43d8a64 100644 --- a/src/client/components/ui/select.vue +++ b/src/client/components/ui/select.vue @@ -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() { - return { - focused: false, + + 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); }; - }, - computed: { - v: { - get() { - return this.value; - }, - set(v) { - this.$emit('update:value', v); + + const updated = () => { + changed.value = false; + context.emit('update:modelValue', v.value); + }; + + watch(modelValue, newValue => { + v.value = newValue; + }); + + watch(v, newValue => { + if (!props.manualSave) { + updated(); } - }, - filled(): boolean { - return true; - } - }, - mounted() { - if (this.$refs.prefix) { - this.$refs.label.style.left = (this.$refs.prefix.offsetLeft + this.$refs.prefix.offsetWidth) + 'px'; - } + + 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 { + v, + focused, + invalid, + changed, + filled, + inputEl, + prefixEl, + suffixEl, + focus, + onInput, + updated, + }; }, - 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; - &:not(.inline):last-child { - margin-bottom: 8px; + &:empty { + display: none; + } } - > .icon { - position: absolute; - top: 0; - left: 0; - width: 24px; - text-align: center; - line-height: 32px; + > .caption { + font-size: 0.8em; + padding: 8px 0 0 12px; + color: var(--fgTransparentWeak); - &: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; } } } diff --git a/src/client/components/ui/switch.vue b/src/client/components/ui/switch.vue index 762fba6d99..7aa9c0619d 100644 --- a/src/client/components/ui/switch.vue +++ b/src/client/components/ui/switch.vue @@ -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%; } } diff --git a/src/client/components/ui/textarea.vue b/src/client/components/ui/textarea.vue index 1032c10d14..53a141f011 100644 --- a/src/client/components/ui/textarea.vue +++ b/src/client/components/ui/textarea.vue @@ -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; - &:last-child { - margin-bottom: 0; + &: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; - } + > .caption { + font-size: 0.8em; + padding: 8px 0 0 12px; + color: var(--fgTransparentWeak); - &: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; + &:empty { + display: 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); - } + > .input { + position: relative; > 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; } diff --git a/src/client/components/ui/window.vue b/src/client/components/ui/window.vue index ce621ac6fd..f8b7d82d4a 100644 --- a/src/client/components/ui/window.vue +++ b/src/client/components/ui/window.vue @@ -3,15 +3,11 @@ <div class="ebkgocck" :class="{ front }" v-if="showing"> <div class="body _popup _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, diff --git a/src/client/components/user-info.vue b/src/client/components/user-info.vue index 402aa0d07c..e76f2ecaa6 100644 --- a/src/client/components/user-info.vue +++ b/src/client/components/user-info.vue @@ -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: { diff --git a/src/client/components/user-list.vue b/src/client/components/user-list.vue index a7162ddcc2..9c91183971 100644 --- a/src/client/components/user-list.vue +++ b/src/client/components/user-list.vue @@ -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: { diff --git a/src/client/components/user-preview.vue b/src/client/components/user-preview.vue index a495266894..1249f205aa 100644 --- a/src/client/components/user-preview.vue +++ b/src/client/components/user-preview.vue @@ -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({ diff --git a/src/client/components/user-select-dialog.vue b/src/client/components/user-select-dialog.vue index 74081753b7..87c32dab25 100644 --- a/src/client/components/user-select-dialog.vue +++ b/src/client/components/user-select-dialog.vue @@ -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; diff --git a/src/client/components/users-dialog.vue b/src/client/components/users-dialog.vue index 90cd926f0c..5199f34c14 100644 --- a/src/client/components/users-dialog.vue +++ b/src/client/components/users-dialog.vue @@ -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: [ diff --git a/src/client/components/widgets.vue b/src/client/components/widgets.vue index 0baef86565..6e5c2d5ade 100644 --- a/src/client/components/widgets.vue +++ b/src/client/components/widgets.vue @@ -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> diff --git a/src/client/menu.ts b/src/client/menu.ts index 8a9f4d4ac6..8e65496cf3 100644 --- a/src/client/menu.ts +++ b/src/client/menu.ts @@ -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'); diff --git a/src/client/os.ts b/src/client/os.ts index 987844b2d2..284f982f06 100644 --- a/src/client/os.ts +++ b/src/client/os.ts @@ -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, diff --git a/src/client/pages/_error_.vue b/src/client/pages/_error_.vue index 6caecd6eaf..1d67d9b14d 100644 --- a/src/client/pages/_error_.vue +++ b/src/client/pages/_error_.vue @@ -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> diff --git a/src/client/pages/advanced-theme-editor.vue b/src/client/pages/advanced-theme-editor.vue index b40d9808ca..c03d88b82d 100644 --- a/src/client/pages/advanced-theme-editor.vue +++ b/src/client/pages/advanced-theme-editor.vue @@ -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), }, { diff --git a/src/client/pages/api-console.vue b/src/client/pages/api-console.vue index b153d10396..adae17658c 100644 --- a/src/client/pages/api-console.vue +++ b/src/client/pages/api-console.vue @@ -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> diff --git a/src/client/pages/channel-editor.vue b/src/client/pages/channel-editor.vue index bc772d34fa..eeea0b70aa 100644 --- a/src/client/pages/channel-editor.vue +++ b/src/client/pages/channel-editor.vue @@ -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> diff --git a/src/client/pages/clip.vue b/src/client/pages/clip.vue index 8777975557..e4b00d5e28 100644 --- a/src/client/pages/clip.vue +++ b/src/client/pages/clip.vue @@ -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 () => { diff --git a/src/client/pages/doc.vue b/src/client/pages/doc.vue index a4cf25033e..753dd8013d 100644 --- a/src/client/pages/doc.vue +++ b/src/client/pages/doc.vue @@ -1,9 +1,11 @@ <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> + </div> </div> </div> </template> @@ -62,6 +64,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 +111,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; } - > .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(a) { + color: var(--link); + } - ::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(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; + 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(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(table) { - width: 100%; - max-width: 100%; - overflow: auto; - } + ::v-deep(h3) { + margin: 1.25em 0 0.5em 0; + } - ::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(table) { + width: 100%; + max-width: 100%; + overflow: auto; + } - ::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(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(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(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; + ::v-deep(pre) { + background: #272822; + color: #f8f8f2; + border-radius: 6px; + padding: 12px 16px; - > code { - padding: 0; + > 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; } } - } - > .footer { - padding: 1.5em 0 0 0; - margin: 1.5em 0 0 0; - border-top: solid 2px var(--divider); + > .footer { + padding: 1.5em 0 0 0; + margin: 1.5em 0 0 0; + border-top: solid 2px var(--divider); + } } } </style> diff --git a/src/client/pages/docs.vue b/src/client/pages/docs.vue index e51528f83d..6dc5eb1ae8 100644 --- a/src/client/pages/docs.vue +++ b/src/client/pages/docs.vue @@ -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> diff --git a/src/client/pages/drive.vue b/src/client/pages/drive.vue index 753114f725..9ee1ea8859 100644 --- a/src/client/pages/drive.vue +++ b/src/client/pages/drive.vue @@ -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, }; diff --git a/src/client/pages/emojis.vue b/src/client/pages/emojis.vue new file mode 100644 index 0000000000..391aff8297 --- /dev/null +++ b/src/client/pages/emojis.vue @@ -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> diff --git a/src/client/pages/explore.vue b/src/client/pages/explore.vue index 7bcb09d8c5..7054940a1a 100644 --- a/src/client/pages/explore.vue +++ b/src/client/pages/explore.vue @@ -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"/> diff --git a/src/client/pages/instance/federation.vue b/src/client/pages/federation.vue index 96f72fed44..4a861ac911 100644 --- a/src/client/pages/instance/federation.vue +++ b/src/client/pages/federation.vue @@ -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; + + > img { + width: 18px; + height: 18px; + margin-right: 6px; + vertical-align: middle; } + } + + > .table { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); + grid-gap: 6px; + margin: 6px 0; + font-size: 70%; - &.yellow { - color: #c5a549; + > .cell { + > .key, > .value { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + > .key { + opacity: 0.7; + } + + > .value { + } } + } + + > .footer { + display: flex; + align-items: center; + + > .status { + &.suspended { + opacity: 0.5; + } - &.red { - color: #c54949; + &.error { + color: var(--error); + } + + &.alive { + color: var(--success); + } } - &.off { - color: rgba(0, 0, 0, 0.5); + > .pubSub { + margin-left: 8px; } - } - } - > .status { - display: flex; - align-items: center; - font-size: 90%; + > .right { + margin-left: auto; + font-size: 0.9em; - > span { - flex: 1; - - > .icon { - margin-right: 6px; + > .latestStatus { + border: solid 1px var(--divider); + border-radius: 4px; + margin: 0 8px; + padding: 0 4px; + } } } } diff --git a/src/client/pages/follow-requests.vue b/src/client/pages/follow-requests.vue index 9f27a6baa8..6115dda454 100644 --- a/src/client/pages/follow-requests.vue +++ b/src/client/pages/follow-requests.vue @@ -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'; diff --git a/src/client/pages/instance-info.vue b/src/client/pages/instance-info.vue index c66ad50f6d..4165f73734 100644 --- a/src/client/pages/instance-info.vue +++ b/src/client/pages/instance-info.vue @@ -62,7 +62,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 +75,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> diff --git a/src/client/pages/instance/abuses.vue b/src/client/pages/instance/abuses.vue index 900c9f8333..ac20ebabe5 100644 --- a/src/client/pages/instance/abuses.vue +++ b/src/client/pages/instance/abuses.vue @@ -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'; diff --git a/src/client/pages/instance/ads.vue b/src/client/pages/instance/ads.vue index 6b536793b7..50c8c29cbf 100644 --- a/src/client/pages/instance/ads.vue +++ b/src/client/pages/instance/ads.vue @@ -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> diff --git a/src/client/pages/instance/announcements.vue b/src/client/pages/instance/announcements.vue index ac0e9d5135..d48e3737ad 100644 --- a/src/client/pages/instance/announcements.vue +++ b/src/client/pages/instance/announcements.vue @@ -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"> diff --git a/src/client/pages/instance/emoji-edit-dialog.vue b/src/client/pages/instance/emoji-edit-dialog.vue index f7a3671584..7e9bdc80dd 100644 --- a/src/client/pages/instance/emoji-edit-dialog.vue +++ b/src/client/pages/instance/emoji-edit-dialog.vue @@ -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> diff --git a/src/client/pages/instance/emojis.vue b/src/client/pages/instance/emojis.vue index fd641703cb..7badc9da02 100644 --- a/src/client/pages/instance/emojis.vue +++ b/src/client/pages/instance/emojis.vue @@ -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 + ':', }, { diff --git a/src/client/pages/instance/file-dialog.vue b/src/client/pages/instance/file-dialog.vue index 74a755fa15..be6bf6cbf2 100644 --- a/src/client/pages/instance/file-dialog.vue +++ b/src/client/pages/instance/file-dialog.vue @@ -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"> diff --git a/src/client/pages/instance/files.vue b/src/client/pages/instance/files.vue index 427c5b411a..b7f472b7c8 100644 --- a/src/client/pages/instance/files.vue +++ b/src/client/pages/instance/files.vue @@ -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"> diff --git a/src/client/pages/instance/index.vue b/src/client/pages/instance/index.vue index acd46518f5..612bfa762a 100644 --- a/src/client/pages/instance/index.vue +++ b/src/client/pages/instance/index.vue @@ -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: () => { diff --git a/src/client/pages/instance/instance.vue b/src/client/pages/instance/instance.vue index 75a24bcb80..c39f0d1ecb 100644 --- a/src/client/pages/instance/instance.vue +++ b/src/client/pages/instance/instance.vue @@ -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; diff --git a/src/client/pages/instance/logs.vue b/src/client/pages/instance/logs.vue index 112b0f66d0..4eee816f96 100644 --- a/src/client/pages/instance/logs.vue +++ b/src/client/pages/instance/logs.vue @@ -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> diff --git a/src/client/pages/instance/metrics.vue b/src/client/pages/instance/metrics.vue index 131af37c7f..283b5939f0 100644 --- a/src/client/pages/instance/metrics.vue +++ b/src/client/pages/instance/metrics.vue @@ -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) => { diff --git a/src/client/pages/instance/overview.vue b/src/client/pages/instance/overview.vue index cb9cff9fc5..0d7a5d1501 100644 --- a/src/client/pages/instance/overview.vue +++ b/src/client/pages/instance/overview.vue @@ -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'; diff --git a/src/client/pages/instance/queue.chart.vue b/src/client/pages/instance/queue.chart.vue index 0cd983127f..53d790598a 100644 --- a/src/client/pages/instance/queue.chart.vue +++ b/src/client/pages/instance/queue.chart.vue @@ -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)!; diff --git a/src/client/pages/instance/users.vue b/src/client/pages/instance/users.vue index 2808b70fba..8db62683ba 100644 --- a/src/client/pages/instance/users.vue +++ b/src/client/pages/instance/users.vue @@ -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'; diff --git a/src/client/pages/messaging/index.vue b/src/client/pages/messaging/index.vue index b9c29492c6..1e0d4dc64c 100644 --- a/src/client/pages/messaging/index.vue +++ b/src/client/pages/messaging/index.vue @@ -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() } diff --git a/src/client/pages/messaging/messaging-room.vue b/src/client/pages/messaging/messaging-room.vue index 396f5f56fd..b6a2fbd3d4 100644 --- a/src/client/pages/messaging/messaging-room.vue +++ b/src/client/pages/messaging/messaging-room.vue @@ -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); + } } } diff --git a/src/client/pages/mfm-cheat-sheet.vue b/src/client/pages/mfm-cheat-sheet.vue index 5227855236..751dccd7a1 100644 --- a/src/client/pages/mfm-cheat-sheet.vue +++ b/src/client/pages/mfm-cheat-sheet.vue @@ -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; diff --git a/src/client/pages/my-antennas/create.vue b/src/client/pages/my-antennas/create.vue new file mode 100644 index 0000000000..d4762411e7 --- /dev/null +++ b/src/client/pages/my-antennas/create.vue @@ -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> diff --git a/src/client/pages/my-antennas/edit.vue b/src/client/pages/my-antennas/edit.vue new file mode 100644 index 0000000000..9deafb4235 --- /dev/null +++ b/src/client/pages/my-antennas/edit.vue @@ -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> diff --git a/src/client/pages/my-antennas/index.antenna.vue b/src/client/pages/my-antennas/editor.vue index fcb7559a98..882d48e643 100644 --- a/src/client/pages/my-antennas/index.antenna.vue +++ b/src/client/pages/my-antennas/editor.vue @@ -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> diff --git a/src/client/pages/my-antennas/index.vue b/src/client/pages/my-antennas/index.vue index 57c55cefdd..c27bb2c15e 100644 --- a/src/client/pages/my-antennas/index.vue +++ b/src/client/pages/my-antennas/index.vue @@ -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> diff --git a/src/client/pages/page-editor/els/page-editor.el.button.vue b/src/client/pages/page-editor/els/page-editor.el.button.vue index 6e9036faac..3a43817cf6 100644 --- a/src/client/pages/page-editor/els/page-editor.el.button.vue +++ b/src/client/pages/page-editor/els/page-editor.el.button.vue @@ -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> diff --git a/src/client/pages/page-editor/els/page-editor.el.canvas.vue b/src/client/pages/page-editor/els/page-editor.el.canvas.vue index 59d29b9b71..d8d5b990ca 100644 --- a/src/client/pages/page-editor/els/page-editor.el.canvas.vue +++ b/src/client/pages/page-editor/els/page-editor.el.canvas.vue @@ -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> diff --git a/src/client/pages/page-editor/els/page-editor.el.counter.vue b/src/client/pages/page-editor/els/page-editor.el.counter.vue index 3394817b53..973de50fc2 100644 --- a/src/client/pages/page-editor/els/page-editor.el.counter.vue +++ b/src/client/pages/page-editor/els/page-editor.el.counter.vue @@ -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> diff --git a/src/client/pages/page-editor/els/page-editor.el.if.vue b/src/client/pages/page-editor/els/page-editor.el.if.vue index 7f4ed458aa..6eb0c7709f 100644 --- a/src/client/pages/page-editor/els/page-editor.el.if.vue +++ b/src/client/pages/page-editor/els/page-editor.el.if.vue @@ -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"> diff --git a/src/client/pages/page-editor/els/page-editor.el.note.vue b/src/client/pages/page-editor/els/page-editor.el.note.vue index d4801f3059..5766564c1a 100644 --- a/src/client/pages/page-editor/els/page-editor.el.note.vue +++ b/src/client/pages/page-editor/els/page-editor.el.note.vue @@ -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;"/> diff --git a/src/client/pages/page-editor/els/page-editor.el.number-input.vue b/src/client/pages/page-editor/els/page-editor.el.number-input.vue index 8058d941c1..892e7e1caa 100644 --- a/src/client/pages/page-editor/els/page-editor.el.number-input.vue +++ b/src/client/pages/page-editor/els/page-editor.el.number-input.vue @@ -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> diff --git a/src/client/pages/page-editor/els/page-editor.el.post.vue b/src/client/pages/page-editor/els/page-editor.el.post.vue index 1ed7f860c8..4215b159d3 100644 --- a/src/client/pages/page-editor/els/page-editor.el.post.vue +++ b/src/client/pages/page-editor/els/page-editor.el.post.vue @@ -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> diff --git a/src/client/pages/page-editor/els/page-editor.el.radio-button.vue b/src/client/pages/page-editor/els/page-editor.el.radio-button.vue index 97715ed69c..88be96f35d 100644 --- a/src/client/pages/page-editor/els/page-editor.el.radio-button.vue +++ b/src/client/pages/page-editor/els/page-editor.el.radio-button.vue @@ -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> diff --git a/src/client/pages/page-editor/els/page-editor.el.switch.vue b/src/client/pages/page-editor/els/page-editor.el.switch.vue index 564d5e22c3..ade1291410 100644 --- a/src/client/pages/page-editor/els/page-editor.el.switch.vue +++ b/src/client/pages/page-editor/els/page-editor.el.switch.vue @@ -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> diff --git a/src/client/pages/page-editor/els/page-editor.el.text-input.vue b/src/client/pages/page-editor/els/page-editor.el.text-input.vue index 4435d9b841..3c8fcc04af 100644 --- a/src/client/pages/page-editor/els/page-editor.el.text-input.vue +++ b/src/client/pages/page-editor/els/page-editor.el.text-input.vue @@ -3,9 +3,9 @@ <template #header><i class="fas fa-bolt"></i> {{ $ts._pages.blocks.textInput }}</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._textInput.name }}</span></MkInput> - <MkInput v-model:value="value.text"><span>{{ $ts._pages.blocks._textInput.text }}</span></MkInput> - <MkInput v-model:value="value.default" type="text"><span>{{ $ts._pages.blocks._textInput.default }}</span></MkInput> + <MkInput v-model="value.name"><template #prefix><i class="fas fa-magic"></i></template><template #label>{{ $ts._pages.blocks._textInput.name }}</template></MkInput> + <MkInput v-model="value.text"><template #label>{{ $ts._pages.blocks._textInput.text }}</template></MkInput> + <MkInput v-model="value.default" type="text"><template #label>{{ $ts._pages.blocks._textInput.default }}</template></MkInput> </section> </XContainer> </template> diff --git a/src/client/pages/page-editor/els/page-editor.el.textarea-input.vue b/src/client/pages/page-editor/els/page-editor.el.textarea-input.vue index cf3b9f93f4..a4fbb08ffe 100644 --- a/src/client/pages/page-editor/els/page-editor.el.textarea-input.vue +++ b/src/client/pages/page-editor/els/page-editor.el.textarea-input.vue @@ -3,9 +3,9 @@ <template #header><i class="fas fa-bolt"></i> {{ $ts._pages.blocks.textareaInput }}</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._textareaInput.name }}</span></MkInput> - <MkInput v-model:value="value.text"><span>{{ $ts._pages.blocks._textareaInput.text }}</span></MkInput> - <MkTextarea v-model:value="value.default"><span>{{ $ts._pages.blocks._textareaInput.default }}</span></MkTextarea> + <MkInput v-model="value.name"><template #prefix><i class="fas fa-magic"></i></template><template #label>{{ $ts._pages.blocks._textareaInput.name }}</template></MkInput> + <MkInput v-model="value.text"><template #label>{{ $ts._pages.blocks._textareaInput.text }}</template></MkInput> + <MkTextarea v-model="value.default"><template #label>{{ $ts._pages.blocks._textareaInput.default }}</template></MkTextarea> </section> </XContainer> </template> diff --git a/src/client/pages/page-editor/page-editor.script-block.vue b/src/client/pages/page-editor/page-editor.script-block.vue index 65ac731e47..fedcd7b317 100644 --- a/src/client/pages/page-editor/page-editor.script-block.vue +++ b/src/client/pages/page-editor/page-editor.script-block.vue @@ -40,9 +40,9 @@ <input v-model="value.value"/> </section> <section v-else-if="value.type === 'fn'" class="" style="padding:0 16px 16px 16px;"> - <MkTextarea v-model:value="slots"> - <span>{{ $ts._pages.script.blocks._fn.slots }}</span> - <template #desc>{{ $t('_pages.script.blocks._fn.slots-info') }}</template> + <MkTextarea v-model="slots"> + <template #label>{{ $ts._pages.script.blocks._fn.slots }}</template> + <template #caption>{{ $t('_pages.script.blocks._fn.slots-info') }}</template> </MkTextarea> <XV v-if="value.value.expression" v-model:value="value.value.expression" :title="$t(`_pages.script.blocks._fn.arg1`)" :get-expected-type="() => null" :hpml="hpml" :fn-slots="value.value.slots" :name="name"/> </section> diff --git a/src/client/pages/page-editor/page-editor.vue b/src/client/pages/page-editor/page-editor.vue index e96e1faaf2..dc6896ba12 100644 --- a/src/client/pages/page-editor/page-editor.vue +++ b/src/client/pages/page-editor/page-editor.vue @@ -11,28 +11,28 @@ <MkContainer :foldable="true" :expanded="true" class="_gap"> <template #header><i class="fas fa-cog"></i> {{ $ts._pages.pageSetting }}</template> <div style="padding: 16px;"> - <MkInput v-model:value="title"> - <span>{{ $ts._pages.title }}</span> + <MkInput v-model="title"> + <template #label>{{ $ts._pages.title }}</template> </MkInput> - <MkInput v-model:value="summary"> - <span>{{ $ts._pages.summary }}</span> + <MkInput v-model="summary"> + <template #label>{{ $ts._pages.summary }}</template> </MkInput> - <MkInput v-model:value="name"> + <MkInput v-model="name"> <template #prefix>{{ url }}/@{{ author.username }}/pages/</template> - <span>{{ $ts._pages.url }}</span> + <template #label>{{ $ts._pages.url }}</template> </MkInput> - <MkSwitch v-model:value="alignCenter">{{ $ts._pages.alignCenter }}</MkSwitch> + <MkSwitch v-model="alignCenter">{{ $ts._pages.alignCenter }}</MkSwitch> - <MkSelect v-model:value="font"> + <MkSelect v-model="font"> <template #label>{{ $ts._pages.font }}</template> <option value="serif">{{ $ts._pages.fontSerif }}</option> <option value="sans-serif">{{ $ts._pages.fontSansSerif }}</option> </MkSelect> - <MkSwitch v-model:value="hideTitleWhenPinned">{{ $ts._pages.hideTitleWhenPinned }}</MkSwitch> + <MkSwitch v-model="hideTitleWhenPinned">{{ $ts._pages.hideTitleWhenPinned }}</MkSwitch> <div class="eyeCatch"> <MkButton v-if="eyeCatchingImageId == null && !readonly" @click="setEyeCatchingImage"><i class="fas fa-plus"></i> {{ $ts._pages.eyeCatchingImageSet }}</MkButton> @@ -77,7 +77,7 @@ <MkContainer :foldable="true" :expanded="true" class="_gap"> <template #header><i class="fas fa-code"></i> {{ $ts.script }}</template> <div> - <MkTextarea class="_code" v-model:value="script"/> + <MkTextarea class="_code" v-model="script"/> </div> </MkContainer> </div> diff --git a/src/client/pages/reversi/game.setting.vue b/src/client/pages/reversi/game.setting.vue index 341aa7d658..1cc623b790 100644 --- a/src/client/pages/reversi/game.setting.vue +++ b/src/client/pages/reversi/game.setting.vue @@ -57,9 +57,9 @@ </header> <div> - <MkSwitch v-model:value="game.isLlotheo" @update:value="updateSettings('isLlotheo')">{{ $ts._reversi.isLlotheo }}</MkSwitch> - <MkSwitch v-model:value="game.loopedBoard" @update:value="updateSettings('loopedBoard')">{{ $ts._reversi.loopedMap }}</MkSwitch> - <MkSwitch v-model:value="game.canPutEverywhere" @update:value="updateSettings('canPutEverywhere')">{{ $ts._reversi.canPutEverywhere }}</MkSwitch> + <MkSwitch v-model="game.isLlotheo" @update:modelValue="updateSettings('isLlotheo')">{{ $ts._reversi.isLlotheo }}</MkSwitch> + <MkSwitch v-model="game.loopedBoard" @update:modelValue="updateSettings('loopedBoard')">{{ $ts._reversi.loopedMap }}</MkSwitch> + <MkSwitch v-model="game.canPutEverywhere" @update:modelValue="updateSettings('canPutEverywhere')">{{ $ts._reversi.canPutEverywhere }}</MkSwitch> </div> </div> @@ -70,7 +70,7 @@ <div> <template v-for="item in form"> - <MkSwitch v-if="item.type == 'switch'" v-model:value="item.value" :key="item.id" @change="onChangeForm(item)">{{ item.label || item.desc || '' }}</MkSwitch> + <MkSwitch v-if="item.type == 'switch'" v-model="item.value" :key="item.id" @change="onChangeForm(item)">{{ item.label || item.desc || '' }}</MkSwitch> <div class="card" v-if="item.type == 'radio'" :key="item.id"> <header> diff --git a/src/client/pages/room/room.vue b/src/client/pages/room/room.vue index 61650e067f..365ed5b803 100644 --- a/src/client/pages/room/room.vue +++ b/src/client/pages/room/room.vue @@ -31,7 +31,7 @@ <MkButton @click="add()"><i class="fas fa-box-open"></i> {{ $ts._rooms.addFurniture }}</MkButton> </div> <div class="_content"> - <MkSelect :value="roomType" @update:value="updateRoomType($event)"> + <MkSelect :model-value="roomType" @update:modelValue="updateRoomType($event)"> <template #label>{{ $ts._rooms.roomType }}</template> <option value="default">{{ $ts._rooms._roomType.default }}</option> <option value="washitsu">{{ $ts._rooms._roomType.washitsu }}</option> diff --git a/src/client/pages/settings/2fa.vue b/src/client/pages/settings/2fa.vue index aa14f91d71..48b06eaa24 100644 --- a/src/client/pages/settings/2fa.vue +++ b/src/client/pages/settings/2fa.vue @@ -20,7 +20,7 @@ </div> </div> - <MkSwitch v-model:value="usePasswordLessLogin" @update:value="updatePasswordLessLogin" v-if="$i.securityKeysList.length > 0">{{ $ts.passwordLessLogin }}</MkSwitch> + <MkSwitch v-model="usePasswordLessLogin" @update:modelValue="updatePasswordLessLogin" v-if="$i.securityKeysList.length > 0">{{ $ts.passwordLessLogin }}</MkSwitch> <MkInfo warn v-if="registration && registration.error">{{ $ts.error }} {{ registration.error }}</MkInfo> <MkButton v-if="!registration || registration.error" @click="addSecurityKey">{{ $ts._2fa.registerKey }}</MkButton> @@ -32,8 +32,8 @@ </li> <li v-if="registration.stage >= 1"> <MkForm :disabled="registration.stage != 1 || registration.saving"> - <MkInput v-model:value="keyName" :max="30"> - <span>{{ $ts.securityKeyName }}</span> + <MkInput v-model="keyName" :max="30"> + <template #label>{{ $ts.securityKeyName }}</template> </MkInput> <MkButton @click="registerKey" :disabled="keyName.length == 0">{{ $ts.registerSecurityKey }}</MkButton> <i v-if="registration.saving && registration.stage == 1" class="fas fa-spinner fa-pulse fa-fw"></i> @@ -56,7 +56,7 @@ </li> <li>{{ $ts._2fa.step2 }}<br><img :src="data.qr"></li> <li>{{ $ts._2fa.step3 }}<br> - <MkInput v-model:value="token" type="text" pattern="^[0-9]{6}$" autocomplete="off" spellcheck="false">{{ $ts.token }}</MkInput> + <MkInput v-model="token" type="text" pattern="^[0-9]{6}$" autocomplete="off" spellcheck="false"><template #label>{{ $ts.token }}</template></MkInput> <MkButton primary @click="submit">{{ $ts.done }}</MkButton> </li> </ol> diff --git a/src/client/pages/settings/accounts.vue b/src/client/pages/settings/accounts.vue index a3fa0d4eb0..53e28bdf6f 100644 --- a/src/client/pages/settings/accounts.vue +++ b/src/client/pages/settings/accounts.vue @@ -64,7 +64,7 @@ export default defineComponent({ methods: { menu(account, ev) { - os.modalMenu([{ + os.popupMenu([{ text: this.$ts.switch, icon: 'fas fa-exchange-alt', action: () => this.switchAccount(account), @@ -77,7 +77,7 @@ export default defineComponent({ }, addAccount(ev) { - os.modalMenu([{ + os.popupMenu([{ text: this.$ts.existingAccount, action: () => { this.addExistingAccount(); }, }, { diff --git a/src/client/pages/settings/reaction.vue b/src/client/pages/settings/reaction.vue index 9bffd5f903..a0024234e4 100644 --- a/src/client/pages/settings/reaction.vue +++ b/src/client/pages/settings/reaction.vue @@ -94,7 +94,7 @@ export default defineComponent({ }, remove(reaction, ev) { - os.modalMenu([{ + os.popupMenu([{ text: this.$ts.remove, action: () => { this.reactions = this.reactions.filter(x => x !== reaction) diff --git a/src/client/pages/test.vue b/src/client/pages/test.vue index 9a06d31090..131571e9dd 100644 --- a/src/client/pages/test.vue +++ b/src/client/pages/test.vue @@ -4,23 +4,23 @@ <div class="_card _gap"> <div class="_title">Dialog</div> <div class="_content"> - <MkInput v-model:value="dialogTitle"> - <span>Title</span> + <MkInput v-model="dialogTitle"> + <template #label>Title</template> </MkInput> - <MkInput v-model:value="dialogBody"> - <span>Body</span> + <MkInput v-model="dialogBody"> + <template #label>Body</template> </MkInput> <MkRadio v-model="dialogType" value="info">Info</MkRadio> <MkRadio v-model="dialogType" value="success">Success</MkRadio> <MkRadio v-model="dialogType" value="warning">Warn</MkRadio> <MkRadio v-model="dialogType" value="error">Error</MkRadio> - <MkSwitch v-model:value="dialogCancel"> + <MkSwitch v-model="dialogCancel"> <span>With cancel button</span> </MkSwitch> - <MkSwitch v-model:value="dialogCancelByBgClick"> + <MkSwitch v-model="dialogCancelByBgClick"> <span>Can cancel by modal bg click</span> </MkSwitch> - <MkSwitch v-model:value="dialogInput"> + <MkSwitch v-model="dialogInput"> <span>With input field</span> </MkSwitch> <MkButton @click="showDialog()">Show</MkButton> @@ -33,11 +33,11 @@ <div class="_card _gap"> <div class="_title">Form</div> <div class="_content"> - <MkInput v-model:value="formTitle"> - <span>Title</span> + <MkInput v-model="formTitle"> + <template #label>Title</template> </MkInput> - <MkTextarea v-model:value="formForm"> - <span>Form</span> + <MkTextarea v-model="formForm"> + <template #label>Form</template> </MkTextarea> <MkButton @click="form()">Show</MkButton> </div> @@ -49,8 +49,8 @@ <div class="_card _gap"> <div class="_title">MFM</div> <div class="_content"> - <MkTextarea v-model:value="mfm"> - <span>MFM</span> + <MkTextarea v-model="mfm"> + <template #label>MFM</template> </MkTextarea> </div> <div class="_content"> @@ -61,7 +61,7 @@ <div class="_card _gap"> <div class="_title">selectDriveFile</div> <div class="_content"> - <MkSwitch v-model:value="selectDriveFileMultiple"> + <MkSwitch v-model="selectDriveFileMultiple"> <span>Multiple</span> </MkSwitch> <MkButton @click="selectDriveFile()">selectDriveFile</MkButton> @@ -74,7 +74,7 @@ <div class="_card _gap"> <div class="_title">selectDriveFolder</div> <div class="_content"> - <MkSwitch v-model:value="selectDriveFolderMultiple"> + <MkSwitch v-model="selectDriveFolderMultiple"> <span>Multiple</span> </MkSwitch> <MkButton @click="selectDriveFolder()">selectDriveFolder</MkButton> @@ -97,14 +97,14 @@ <div class="_card _gap"> <div class="_title">Notification</div> <div class="_content"> - <MkInput v-model:value="notificationIconUrl"> - <span>Icon URL</span> + <MkInput v-model="notificationIconUrl"> + <template #label>Icon URL</template> </MkInput> - <MkInput v-model:value="notificationHeader"> - <span>Header</span> + <MkInput v-model="notificationHeader"> + <template #label>Header</template> </MkInput> - <MkTextarea v-model:value="notificationBody"> - <span>Body</span> + <MkTextarea v-model="notificationBody"> + <template #label>Body</template> </MkTextarea> <MkButton @click="createNotification()">createNotification</MkButton> </div> diff --git a/src/client/pages/timeline.vue b/src/client/pages/timeline.vue index 966146d92b..a6a0e6987f 100644 --- a/src/client/pages/timeline.vue +++ b/src/client/pages/timeline.vue @@ -1,8 +1,8 @@ <template> <div class="cmuxhskf _root" v-hotkey.global="keymap"> - <XTutorial v-if="$store.reactiveState.tutorial.value != -1" class="tutorial _block"/> - <XPostForm v-if="$store.reactiveState.showFixedPostForm.value" class="post-form _block" fixed/> - <div class="tabs _block"> + <XTutorial v-if="$store.reactiveState.tutorial.value != -1" class="tutorial _block _isolated"/> + <XPostForm v-if="$store.reactiveState.showFixedPostForm.value" class="post-form _block _isolated" fixed/> + <div class="tabs"> <div class="left"> <button class="_button tab" @click="() => { src = 'home'; saveSrc(); }" :class="{ active: src === 'home' }" v-tooltip="$ts._timelines.home"><i class="fas fa-home"></i></button> <button class="_button tab" @click="() => { src = 'local'; saveSrc(); }" :class="{ active: src === 'local' }" v-tooltip="$ts._timelines.local" v-if="isLocalTimelineAvailable"><i class="fas fa-comments"></i></button> @@ -20,7 +20,6 @@ </div> <div class="new" v-if="queue > 0"><button class="_buttonPrimary" @click="top()">{{ $ts.newNoteRecived }}</button></div> <XTimeline ref="tl" - class="_gap" :key="src === 'list' ? `list:${list.id}` : src === 'antenna' ? `antenna:${antenna.id}` : src === 'channel' ? `channel:${channel.id}` : src" :src="src" :list="list ? list.id : null" @@ -62,6 +61,7 @@ export default defineComponent({ queue: 0, [symbols.PAGE_INFO]: computed(() => ({ title: this.$ts.timeline, + subtitle: this.src === 'local' ? this.$ts._timelines.local : this.src === 'social' ? this.$ts._timelines.social : this.src === 'global' ? this.$ts._timelines.global : this.$ts._timelines.home, icon: this.src === 'local' ? 'fas fa-comments' : this.src === 'social' ? 'fas fa-share-alt' : this.src === 'global' ? 'fas fa-globe' : 'fas fa-home', actions: [{ icon: 'fas fa-calendar-alt', @@ -147,7 +147,7 @@ export default defineComponent({ this.saveSrc(); } })); - os.modalMenu(items, ev.currentTarget || ev.target); + os.popupMenu(items, ev.currentTarget || ev.target); }, async chooseAntenna(ev) { @@ -161,7 +161,7 @@ export default defineComponent({ this.saveSrc(); } })); - os.modalMenu(items, ev.currentTarget || ev.target); + os.popupMenu(items, ev.currentTarget || ev.target); }, async chooseChannel(ev) { @@ -177,7 +177,7 @@ export default defineComponent({ this.$router.push(`/channels/${channel.id}`); } })); - os.modalMenu(items, ev.currentTarget || ev.target); + os.popupMenu(items, ev.currentTarget || ev.target); }, saveSrc() { @@ -211,6 +211,8 @@ export default defineComponent({ <style lang="scss" scoped> .cmuxhskf { + background: var(--bg); + > .new { position: sticky; top: calc(var(--stickyTop, 0px) + 16px); diff --git a/src/client/pages/user-info.vue b/src/client/pages/user-info.vue index 51bd5016bb..503982652b 100644 --- a/src/client/pages/user-info.vue +++ b/src/client/pages/user-info.vue @@ -167,13 +167,13 @@ export default defineComponent({ }, async resetPassword() { - os.apiWithDialog('admin/reset-password', { + const { password } = await os.api('admin/reset-password', { userId: this.user.id, - }, undefined, ({ password }) => { - os.dialog({ - type: 'success', - text: this.$t('newPasswordIs', { password }) - }); + }); + + os.dialog({ + type: 'success', + text: this.$t('newPasswordIs', { password }) }); }, diff --git a/src/client/pages/user/clips.vue b/src/client/pages/user/clips.vue index 9c77bbad47..fc40d583c6 100644 --- a/src/client/pages/user/clips.vue +++ b/src/client/pages/user/clips.vue @@ -12,7 +12,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'; export default defineComponent({ components: { diff --git a/src/client/pages/user/follow-list.vue b/src/client/pages/user/follow-list.vue index 1fce74ec17..f6df28309f 100644 --- a/src/client/pages/user/follow-list.vue +++ b/src/client/pages/user/follow-list.vue @@ -12,7 +12,7 @@ import { defineComponent } from 'vue'; import MkUserInfo from '@client/components/user-info.vue'; import MkPagination from '@client/components/ui/pagination.vue'; -import { userPage, acct } from '../../filters/user'; +import { userPage, acct } from '@client/filters/user'; export default defineComponent({ components: { diff --git a/src/client/pages/user/gallery.vue b/src/client/pages/user/gallery.vue index 2a4c4e03f4..67a5fac109 100644 --- a/src/client/pages/user/gallery.vue +++ b/src/client/pages/user/gallery.vue @@ -12,7 +12,7 @@ import { defineComponent } from 'vue'; import MkGalleryPostPreview from '@client/components/gallery-post-preview.vue'; import MkPagination from '@client/components/ui/pagination.vue'; -import { userPage, acct } from '../../filters/user'; +import { userPage, acct } from '@client/filters/user'; export default defineComponent({ components: { diff --git a/src/client/pages/user/index.photos.vue b/src/client/pages/user/index.photos.vue index a899b116e5..5029c3feec 100644 --- a/src/client/pages/user/index.photos.vue +++ b/src/client/pages/user/index.photos.vue @@ -20,7 +20,7 @@ <script lang="ts"> import { defineComponent } from 'vue'; import { getStaticImageUrl } from '@client/scripts/get-static-image-url'; -import notePage from '../../filters/note'; +import notePage from '@client/filters/note'; import * as os from '@client/os'; import MkContainer from '@client/components/ui/container.vue'; import ImgWithBlurhash from '@client/components/img-with-blurhash.vue'; diff --git a/src/client/pages/user/index.vue b/src/client/pages/user/index.vue index f5c5a0694c..9cf424b127 100644 --- a/src/client/pages/user/index.vue +++ b/src/client/pages/user/index.vue @@ -1,9 +1,9 @@ <template> <transition name="fade" mode="out-in"> <div class="ftskorzw wide" v-if="user && narrow === false"> - <MkRemoteCaution v-if="user.host != null" :href="user.url" class="_gap"/> + <MkRemoteCaution v-if="user.host != null" :href="user.url"/> - <div class="banner-container _gap" :style="style"> + <div class="banner-container" :style="style"> <div class="banner" ref="banner" :style="style"></div> </div> <div class="contents"> @@ -237,8 +237,8 @@ import Progress from '@client/scripts/loading'; import { parseAcct } from '@/misc/acct'; import { getScrollPosition } from '@client/scripts/scroll'; import { getUserMenu } from '@client/scripts/get-user-menu'; -import number from '../../filters/number'; -import { userPage, acct as getAcct } from '../../filters/user'; +import number from '@client/filters/number'; +import { userPage, acct as getAcct } from '@client/filters/user'; import * as os from '@client/os'; import * as symbols from '@client/symbols'; @@ -276,13 +276,13 @@ export default defineComponent({ return { [symbols.PAGE_INFO]: computed(() => this.user ? { title: this.user.name ? `${this.user.name} (@${this.user.username})` : `@${this.user.username}`, + subtitle: `@${getAcct(this.user)}`, userName: this.user, avatar: this.user, path: `/@${this.user.username}`, share: { title: this.user.name, }, - menu: () => getUserMenu(this.user), } : null), user: null, error: null, @@ -314,7 +314,7 @@ export default defineComponent({ mounted() { window.requestAnimationFrame(this.parallaxLoop); - this.narrow = true; //this.$el.clientWidth < 1000; + this.narrow = this.$el.clientWidth < 1000; }, beforeUnmount() { @@ -338,7 +338,7 @@ export default defineComponent({ }, menu(ev) { - os.modalMenu(getUserMenu(this.user), ev.currentTarget || ev.target); + os.popupMenu(getUserMenu(this.user), ev.currentTarget || ev.target); }, parallaxLoop() { @@ -382,13 +382,10 @@ export default defineComponent({ } .ftskorzw.wide { - max-width: 1150px; - margin: 0 auto; > .banner-container { position: relative; - height: 450px; - border-radius: 16px; + height: 300px; overflow: hidden; background-size: cover; background-position: center; @@ -405,6 +402,7 @@ export default defineComponent({ > .contents { display: flex; + padding: 16px; > .side { width: 360px; @@ -562,6 +560,7 @@ export default defineComponent({ .ftskorzw.narrow { box-sizing: border-box; overflow: clip; + background: var(--bg); > .punished { font-size: 0.8em; diff --git a/src/client/pages/user/pages.vue b/src/client/pages/user/pages.vue index 34ac9d1ba6..819bd9f2ef 100644 --- a/src/client/pages/user/pages.vue +++ b/src/client/pages/user/pages.vue @@ -10,7 +10,7 @@ import { defineComponent } from 'vue'; import MkPagePreview from '@client/components/page-preview.vue'; import MkPagination from '@client/components/ui/pagination.vue'; -import { userPage, acct } from '../../filters/user'; +import { userPage, acct } from '@client/filters/user'; export default defineComponent({ components: { diff --git a/src/client/pages/welcome.entrance.a.vue b/src/client/pages/welcome.entrance.a.vue index da3c694265..299271c347 100644 --- a/src/client/pages/welcome.entrance.a.vue +++ b/src/client/pages/welcome.entrance.a.vue @@ -117,7 +117,7 @@ export default defineComponent({ }, showMenu(ev) { - os.modalMenu([{ + os.popupMenu([{ text: this.$t('aboutX', { x: instanceName }), icon: 'fas fa-info-circle', action: () => { diff --git a/src/client/pages/welcome.entrance.b.vue b/src/client/pages/welcome.entrance.b.vue index d108eb7d94..a5c12f09e2 100644 --- a/src/client/pages/welcome.entrance.b.vue +++ b/src/client/pages/welcome.entrance.b.vue @@ -101,7 +101,7 @@ export default defineComponent({ }, showMenu(ev) { - os.modalMenu([{ + os.popupMenu([{ text: this.$t('aboutX', { x: instanceName }), icon: 'fas fa-info-circle', action: () => { diff --git a/src/client/pages/welcome.entrance.c.vue b/src/client/pages/welcome.entrance.c.vue index 93811e98fb..2c8db6e264 100644 --- a/src/client/pages/welcome.entrance.c.vue +++ b/src/client/pages/welcome.entrance.c.vue @@ -121,7 +121,7 @@ export default defineComponent({ }, showMenu(ev) { - os.modalMenu([{ + os.popupMenu([{ text: this.$t('aboutX', { x: instanceName }), icon: 'fas fa-info-circle', action: () => { diff --git a/src/client/pages/welcome.setup.vue b/src/client/pages/welcome.setup.vue index 79464b814a..5ed1ae49c4 100644 --- a/src/client/pages/welcome.setup.vue +++ b/src/client/pages/welcome.setup.vue @@ -3,13 +3,13 @@ <h1>Welcome to Misskey!</h1> <div> <p>{{ $ts.intro }}</p> - <MkInput v-model:value="username" pattern="^[a-zA-Z0-9_]{1,20}$" spellcheck="false" required> - <span>{{ $ts.username }}</span> + <MkInput v-model="username" pattern="^[a-zA-Z0-9_]{1,20}$" spellcheck="false" required> + <template #label>{{ $ts.username }}</template> <template #prefix>@</template> <template #suffix>@{{ host }}</template> </MkInput> - <MkInput v-model:value="password" type="password"> - <span>{{ $ts.password }}</span> + <MkInput v-model="password" type="password"> + <template #label>{{ $ts.password }}</template> <template #prefix><i class="fas fa-lock"></i></template> </MkInput> <footer> diff --git a/src/client/router.ts b/src/client/router.ts index 4c3aa765e6..225ee44e32 100644 --- a/src/client/router.ts +++ b/src/client/router.ts @@ -4,85 +4,114 @@ import MkLoading from '@client/pages/_loading_.vue'; import MkError from '@client/pages/_error_.vue'; import MkTimeline from '@client/pages/timeline.vue'; import { $i } from './account'; +import { ui } from '@client/config'; -const page = (path: string) => defineAsyncComponent({ - loader: () => import(`./pages/${path}.vue`), +const page = (path: string, ui?: string) => defineAsyncComponent({ + loader: ui ? () => import(`./ui/${ui}/pages/${path}.vue`) : () => import(`./pages/${path}.vue`), loadingComponent: MkLoading, errorComponent: MkError, }); let indexScrollPos = 0; +const defaultRoutes = [ + // NOTE: MkTimelineをdynamic importするとAsyncComponentWrapperが間に入るせいでkeep-aliveのコンポーネント指定が効かなくなる + { path: '/', name: 'index', component: $i ? MkTimeline : page('welcome') }, + { path: '/@:acct/:page?', name: 'user', component: page('user/index'), props: route => ({ acct: route.params.acct, page: route.params.page || 'index' }) }, + { path: '/@:user/pages/:page', component: page('page'), props: route => ({ pageName: route.params.page, username: route.params.user }) }, + { path: '/@:user/pages/:pageName/view-source', component: page('page-editor/page-editor'), props: route => ({ initUser: route.params.user, initPageName: route.params.pageName }) }, + { path: '/@:acct/room', props: true, component: page('room/room') }, + { path: '/settings/:page(.*)?', name: 'settings', component: page('settings/index'), props: route => ({ initialPage: route.params.page || null }) }, + { path: '/reset-password/:token?', component: page('reset-password'), props: route => ({ token: route.params.token }) }, + { path: '/announcements', component: page('announcements') }, + { path: '/about', component: page('about') }, + { path: '/about-misskey', component: page('about-misskey') }, + { path: '/featured', component: page('featured') }, + { path: '/docs', component: page('docs') }, + { path: '/theme-editor', component: page('theme-editor') }, + { path: '/advanced-theme-editor', component: page('advanced-theme-editor') }, + { path: '/docs/:doc(.*)', component: page('doc'), props: route => ({ doc: route.params.doc }) }, + { path: '/explore', component: page('explore') }, + { path: '/explore/tags/:tag', props: true, component: page('explore') }, + { path: '/federation', component: page('federation') }, + { path: '/emojis', component: page('emojis') }, + { path: '/search', component: page('search') }, + { path: '/pages', name: 'pages', component: page('pages') }, + { path: '/pages/new', component: page('page-editor/page-editor') }, + { path: '/pages/edit/:pageId', component: page('page-editor/page-editor'), props: route => ({ initPageId: route.params.pageId }) }, + { path: '/gallery', component: page('gallery/index') }, + { path: '/gallery/new', component: page('gallery/edit') }, + { path: '/gallery/:postId/edit', component: page('gallery/edit'), props: route => ({ postId: route.params.postId }) }, + { path: '/gallery/:postId', component: page('gallery/post'), props: route => ({ postId: route.params.postId }) }, + { path: '/channels', component: page('channels') }, + { path: '/channels/new', component: page('channel-editor') }, + { path: '/channels/:channelId/edit', component: page('channel-editor'), props: true }, + { path: '/channels/:channelId', component: page('channel'), props: route => ({ channelId: route.params.channelId }) }, + { path: '/clips/:clipId', component: page('clip'), props: route => ({ clipId: route.params.clipId }) }, + { path: '/my/notifications', component: page('notifications') }, + { path: '/my/favorites', component: page('favorites') }, + { path: '/my/messages', component: page('messages') }, + { path: '/my/mentions', component: page('mentions') }, + { path: '/my/messaging', name: 'messaging', component: page('messaging/index') }, + { path: '/my/messaging/:user', component: page('messaging/messaging-room'), props: route => ({ userAcct: route.params.user }) }, + { path: '/my/messaging/group/:group', component: page('messaging/messaging-room'), props: route => ({ groupId: route.params.group }) }, + { path: '/my/drive', name: 'drive', component: page('drive') }, + { path: '/my/drive/folder/:folder', component: page('drive') }, + { path: '/my/follow-requests', component: page('follow-requests') }, + { path: '/my/lists', component: page('my-lists/index') }, + { path: '/my/lists/:list', component: page('my-lists/list') }, + { path: '/my/groups', component: page('my-groups/index') }, + { path: '/my/groups/:group', component: page('my-groups/group'), props: route => ({ groupId: route.params.group }) }, + { path: '/my/antennas', component: page('my-antennas/index') }, + { path: '/my/antennas/create', component: page('my-antennas/create') }, + { path: '/my/antennas/:antennaId', component: page('my-antennas/edit'), props: true }, + { path: '/my/clips', component: page('my-clips/index') }, + { path: '/scratchpad', component: page('scratchpad') }, + { path: '/instance/:page(.*)?', component: page('instance/index'), props: route => ({ initialPage: route.params.page || null }) }, + { path: '/instance', component: page('instance/index') }, + { path: '/notes/:note', name: 'note', component: page('note'), props: route => ({ noteId: route.params.note }) }, + { path: '/tags/:tag', component: page('tag'), props: route => ({ tag: route.params.tag }) }, + { path: '/user-info/:user', component: page('user-info'), props: route => ({ userId: route.params.user }) }, + { path: '/user-ap-info/:user', component: page('user-ap-info'), props: route => ({ userId: route.params.user }) }, + { path: '/instance-info/:host', component: page('instance-info'), props: route => ({ host: route.params.host }) }, + { path: '/games/reversi', component: page('reversi/index') }, + { path: '/games/reversi/:gameId', component: page('reversi/game'), props: route => ({ gameId: route.params.gameId }) }, + { path: '/mfm-cheat-sheet', component: page('mfm-cheat-sheet') }, + { path: '/api-console', component: page('api-console') }, + { path: '/preview', component: page('preview') }, + { path: '/test', component: page('test') }, + { path: '/auth/:token', component: page('auth') }, + { path: '/miauth/:session', component: page('miauth') }, + { path: '/authorize-follow', component: page('follow') }, + { path: '/share', component: page('share') }, + { path: '/:catchAll(.*)', component: page('not-found') } +]; + +const chatRoutes = [ + { path: '/timeline', component: page('timeline', 'chat'), props: route => ({ src: 'home' }) }, + { path: '/timeline/home', component: page('timeline', 'chat'), props: route => ({ src: 'home' }) }, + { path: '/timeline/local', component: page('timeline', 'chat'), props: route => ({ src: 'local' }) }, + { path: '/timeline/social', component: page('timeline', 'chat'), props: route => ({ src: 'social' }) }, + { path: '/timeline/global', component: page('timeline', 'chat'), props: route => ({ src: 'global' }) }, + { path: '/channels/:channelId', component: page('channel', 'chat'), props: route => ({ channelId: route.params.channelId }) }, +]; + +function margeRoutes(routes: any[]) { + const result = defaultRoutes; + for (const route of routes) { + const found = result.findIndex(x => x.path === route.path); + if (found > -1) { + result[found] = route; + } else { + result.unshift(route); + } + } + return result; +} + export const router = createRouter({ history: createWebHistory(), - routes: [ - // NOTE: MkTimelineをdynamic importするとAsyncComponentWrapperが間に入るせいでkeep-aliveのコンポーネント指定が効かなくなる - { path: '/', name: 'index', component: $i ? MkTimeline : page('welcome') }, - { path: '/@:acct/:page?', name: 'user', component: page('user/index'), props: route => ({ acct: route.params.acct, page: route.params.page || 'index' }) }, - { path: '/@:user/pages/:page', component: page('page'), props: route => ({ pageName: route.params.page, username: route.params.user }) }, - { path: '/@:user/pages/:pageName/view-source', component: page('page-editor/page-editor'), props: route => ({ initUser: route.params.user, initPageName: route.params.pageName }) }, - { path: '/@:acct/room', props: true, component: page('room/room') }, - { path: '/settings/:page(.*)?', name: 'settings', component: page('settings/index'), props: route => ({ initialPage: route.params.page || null }) }, - { path: '/reset-password/:token?', component: page('reset-password'), props: route => ({ token: route.params.token }) }, - { path: '/announcements', component: page('announcements') }, - { path: '/about', component: page('about') }, - { path: '/about-misskey', component: page('about-misskey') }, - { path: '/featured', component: page('featured') }, - { path: '/docs', component: page('docs') }, - { path: '/theme-editor', component: page('theme-editor') }, - { path: '/advanced-theme-editor', component: page('advanced-theme-editor') }, - { path: '/docs/:doc', component: page('doc'), props: route => ({ doc: route.params.doc }) }, - { path: '/explore', component: page('explore') }, - { path: '/explore/tags/:tag', props: true, component: page('explore') }, - { path: '/search', component: page('search') }, - { path: '/pages', name: 'pages', component: page('pages') }, - { path: '/pages/new', component: page('page-editor/page-editor') }, - { path: '/pages/edit/:pageId', component: page('page-editor/page-editor'), props: route => ({ initPageId: route.params.pageId }) }, - { path: '/gallery', component: page('gallery/index') }, - { path: '/gallery/new', component: page('gallery/edit') }, - { path: '/gallery/:postId/edit', component: page('gallery/edit'), props: route => ({ postId: route.params.postId }) }, - { path: '/gallery/:postId', component: page('gallery/post'), props: route => ({ postId: route.params.postId }) }, - { path: '/channels', component: page('channels') }, - { path: '/channels/new', component: page('channel-editor') }, - { path: '/channels/:channelId/edit', component: page('channel-editor'), props: true }, - { path: '/channels/:channelId', component: page('channel'), props: route => ({ channelId: route.params.channelId }) }, - { path: '/clips/:clipId', component: page('clip'), props: route => ({ clipId: route.params.clipId }) }, - { path: '/my/notifications', component: page('notifications') }, - { path: '/my/favorites', component: page('favorites') }, - { path: '/my/messages', component: page('messages') }, - { path: '/my/mentions', component: page('mentions') }, - { path: '/my/messaging', name: 'messaging', component: page('messaging/index') }, - { path: '/my/messaging/:user', component: page('messaging/messaging-room'), props: route => ({ userAcct: route.params.user }) }, - { path: '/my/messaging/group/:group', component: page('messaging/messaging-room'), props: route => ({ groupId: route.params.group }) }, - { path: '/my/drive', name: 'drive', component: page('drive') }, - { path: '/my/drive/folder/:folder', component: page('drive') }, - { path: '/my/follow-requests', component: page('follow-requests') }, - { path: '/my/lists', component: page('my-lists/index') }, - { path: '/my/lists/:list', component: page('my-lists/list') }, - { path: '/my/groups', component: page('my-groups/index') }, - { path: '/my/groups/:group', component: page('my-groups/group'), props: route => ({ groupId: route.params.group }) }, - { path: '/my/antennas', component: page('my-antennas/index') }, - { path: '/my/clips', component: page('my-clips/index') }, - { path: '/scratchpad', component: page('scratchpad') }, - { path: '/instance/:page(.*)?', component: page('instance/index'), props: route => ({ initialPage: route.params.page || null }) }, - { path: '/instance', component: page('instance/index') }, - { path: '/notes/:note', name: 'note', component: page('note'), props: route => ({ noteId: route.params.note }) }, - { path: '/tags/:tag', component: page('tag'), props: route => ({ tag: route.params.tag }) }, - { path: '/user-info/:user', component: page('user-info'), props: route => ({ userId: route.params.user }) }, - { path: '/user-ap-info/:user', component: page('user-ap-info'), props: route => ({ userId: route.params.user }) }, - { path: '/instance-info/:host', component: page('instance-info'), props: route => ({ host: route.params.host }) }, - { path: '/games/reversi', component: page('reversi/index') }, - { path: '/games/reversi/:gameId', component: page('reversi/game'), props: route => ({ gameId: route.params.gameId }) }, - { path: '/mfm-cheat-sheet', component: page('mfm-cheat-sheet') }, - { path: '/api-console', component: page('api-console') }, - { path: '/preview', component: page('preview') }, - { path: '/test', component: page('test') }, - { path: '/auth/:token', component: page('auth') }, - { path: '/miauth/:session', component: page('miauth') }, - { path: '/authorize-follow', component: page('follow') }, - { path: '/share', component: page('share') }, - { path: '/:catchAll(.*)', component: page('not-found') } - ], + routes: margeRoutes(ui === 'chat' ? chatRoutes : []), // なんかHacky // 通常の使い方をすると scroll メソッドの behavior を設定できないため、自前で window.scroll するようにする scrollBehavior(to) { diff --git a/src/client/scripts/paging.ts b/src/client/scripts/paging.ts index bcb0d7f2b0..194c2e8003 100644 --- a/src/client/scripts/paging.ts +++ b/src/client/scripts/paging.ts @@ -94,7 +94,11 @@ export default (opts) => ({ for (let i = 0; i < items.length; i++) { const item = items[i]; markRaw(item); - if (i === 3) item._shouldInsertAd_ = true; + if (this.pagination.reversed) { + if (i === items.length - 2) item._shouldInsertAd_ = true; + } else { + if (i === 3) item._shouldInsertAd_ = true; + } } if (!this.pagination.noPaging && (items.length > (this.pagination.limit || 10))) { items.pop(); @@ -133,7 +137,11 @@ export default (opts) => ({ for (let i = 0; i < items.length; i++) { const item = items[i]; markRaw(item); - if (i === 10) item._shouldInsertAd_ = true; + if (this.pagination.reversed) { + if (i === items.length - 9) item._shouldInsertAd_ = true; + } else { + if (i === 10) item._shouldInsertAd_ = true; + } } if (items.length > SECOND_FETCH_LIMIT) { items.pop(); diff --git a/src/client/scripts/select-file.ts b/src/client/scripts/select-file.ts index 9d7146e215..f7b971e113 100644 --- a/src/client/scripts/select-file.ts +++ b/src/client/scripts/select-file.ts @@ -69,7 +69,7 @@ export function selectFile(src: any, label: string | null, multiple = false) { }); }; - os.modalMenu([label ? { + os.popupMenu([label ? { text: label, type: 'label' } : undefined, { diff --git a/src/client/scripts/theme.ts b/src/client/scripts/theme.ts index 09441c8a76..3fb5666a72 100644 --- a/src/client/scripts/theme.ts +++ b/src/client/scripts/theme.ts @@ -23,6 +23,7 @@ export const builtinThemes = [ require('@client/themes/d-dark.json5'), require('@client/themes/d-persimmon.json5'), require('@client/themes/d-astro.json5'), + require('@client/themes/d-future.json5'), require('@client/themes/d-black.json5'), ] as Theme[]; diff --git a/src/client/store.ts b/src/client/store.ts index 6ca431e059..364d8afd93 100644 --- a/src/client/store.ts +++ b/src/client/store.ts @@ -198,6 +198,14 @@ export const defaultStore = markRaw(new Storage('base', { where: 'device', default: false }, + postFormWithHashtags: { + where: 'device', + default: false + }, + postFormHashtags: { + where: 'device', + default: '' + }, })); // TODO: 他のタブと永続化されたstateを同期 diff --git a/src/client/style.scss b/src/client/style.scss index 578e7543c7..25a30a36ff 100644 --- a/src/client/style.scss +++ b/src/client/style.scss @@ -239,8 +239,7 @@ hr { ._panel { background: var(--panel); border-radius: var(--radius); - //border: var(--panelBorder); - box-shadow: var(--panelShadow); + border: var(--panelBorder); overflow: clip; } @@ -256,6 +255,7 @@ hr { margin: var(--margin) 0; } +// TODO: 廃止 ._card { @extend ._panel; @@ -319,7 +319,7 @@ hr { } ._popup { - background: var(--panel); + background: var(--popup); border-radius: var(--radius); contain: content; } @@ -357,7 +357,7 @@ hr { ._flat_ { --root-margin: 0px; --baseContentWidth: 100%; - --panelShadow: none; + --panelBorder: none; ._block { //border-top: solid 0.5px var(--divider); @@ -402,6 +402,25 @@ hr { backdrop-filter: blur(15px); } +._inputSplit { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); + grid-gap: 8px; + margin: 1em 0; + + > * { + margin: 0 !important; + } +} + +._inputNoTopMargin { + margin-top: 0 !important; +} + +._inputNoBottomMargin { + margin-bottom: 0 !important; +} + ._table { > ._row { display: flex; diff --git a/src/client/themes/_dark.json5 b/src/client/themes/_dark.json5 index 6414a7ad42..ca9994d5e9 100644 --- a/src/client/themes/_dark.json5 +++ b/src/client/themes/_dark.json5 @@ -19,6 +19,7 @@ fgTransparentWeak: ':alpha<0.75<@fg', fgTransparent: ':alpha<0.5<@fg', fgHighlighted: ':lighten<3<@fg', + fgOnAccent: '#fff', divider: 'rgba(255, 255, 255, 0.1)', indicator: '@accent', panel: ':lighten<3<@bg', @@ -26,9 +27,9 @@ panelHeaderBg: ':lighten<3<@panel', panelHeaderFg: '@fg', panelHeaderDivider: 'rgba(0, 0, 0, 0)', - panelBorder: 'rgba(0, 0, 0, 0)', - panelShadow: '" 0 8px 24px rgba(0, 0, 0, 0.12)', + panelBorder: '" solid 1px var(--divider)', acrylicPanel: ':alpha<0.5<@panel', + popup: ':lighten<3<@panel', shadow: 'rgba(0, 0, 0, 0.3)', header: ':alpha<0.7<@panel', navBg: '@panel', @@ -54,12 +55,13 @@ cwHoverBg: '#707b97', buttonBg: 'rgba(255, 255, 255, 0.05)', buttonHoverBg: 'rgba(255, 255, 255, 0.1)', - inputBorder: '#959da2', + inputBorder: 'rgba(255, 255, 255, 0.1)', + inputBorderHover: 'rgba(255, 255, 255, 0.2)', listItemHoverBg: 'rgba(255, 255, 255, 0.03)', driveFolderBg: ':alpha<0.3<@accent', wallpaperOverlay: 'rgba(0, 0, 0, 0.5)', badge: '#31b1ce', - messageBg: ':lighten<5<@bg', + messageBg: '@bg', success: '#86b300', error: '#ec4137', warn: '#ecb637', diff --git a/src/client/themes/_light.json5 b/src/client/themes/_light.json5 index 0438b54a49..973a6251f0 100644 --- a/src/client/themes/_light.json5 +++ b/src/client/themes/_light.json5 @@ -19,6 +19,7 @@ fgTransparentWeak: ':alpha<0.75<@fg', fgTransparent: ':alpha<0.5<@fg', fgHighlighted: ':darken<3<@fg', + fgOnAccent: '#fff', divider: 'rgba(0, 0, 0, 0.1)', indicator: '@accent', panel: ':lighten<3<@bg', @@ -26,9 +27,9 @@ panelHeaderBg: ':lighten<3<@panel', panelHeaderFg: '@fg', panelHeaderDivider: 'rgba(0, 0, 0, 0)', - panelBorder: 'rgba(0, 0, 0, 0)', - panelShadow: '" 0 8px 24px rgb(21 43 75 / 8%)', + panelBorder: '" solid 1px var(--divider)', acrylicPanel: ':alpha<0.5<@panel', + popup: ':lighten<3<@panel', shadow: 'rgba(0, 0, 0, 0.1)', header: ':alpha<0.7<@panel', navBg: '@panel', @@ -48,18 +49,19 @@ infoBg: '#e5f5ff', infoFg: '#72818a', infoWarnBg: '#fff0db', - infoWarnFg: '#573c08', + infoWarnFg: '#8f6e31', cwBg: '#b1b9c1', cwFg: '#fff', cwHoverBg: '#bbc4ce', buttonBg: 'rgba(0, 0, 0, 0.05)', buttonHoverBg: 'rgba(0, 0, 0, 0.1)', - inputBorder: '#dae0e4', + inputBorder: 'rgba(0, 0, 0, 0.1)', + inputBorderHover: 'rgba(0, 0, 0, 0.2)', listItemHoverBg: 'rgba(0, 0, 0, 0.03)', driveFolderBg: ':alpha<0.3<@accent', wallpaperOverlay: 'rgba(255, 255, 255, 0.5)', badge: '#31b1ce', - messageBg: '@panel', + messageBg: '@bg', success: '#86b300', error: '#ec4137', warn: '#ecb637', diff --git a/src/client/themes/d-astro.json5 b/src/client/themes/d-astro.json5 index a88e949c3c..08846dec20 100644 --- a/src/client/themes/d-astro.json5 +++ b/src/client/themes/d-astro.json5 @@ -32,15 +32,15 @@ cwHoverBg: '#707b97', indicator: '@accent', mentionMe: '#fb5d38', - messageBg: ':lighten<5<@bg', + messageBg: '@bg', navActive: '@accent', infoWarnBg: '#42321c', infoWarnFg: '#ffbd3e', navHoverFg: ':lighten<17<@fg', dateLabelFg: '@fg', - inputBorder: '#959da2', - panelBorder: 'rgba(0, 0, 0, 0)', - panelShadow: '" 0 8px 24px rgba(0, 0, 0, 0.12)', + inputBorder: 'rgba(255, 255, 255, 0.1)', + inputBorderHover: 'rgba(255, 255, 255, 0.2)', + panelBorder: '" solid 1px var(--divider)', accentDarken: ':darken<10<@accent', acrylicPanel: ':alpha<0.5<@panel', navIndicator: '@accent', diff --git a/src/client/themes/d-black.json5 b/src/client/themes/d-black.json5 index 2608891e73..3c18ebdaf1 100644 --- a/src/client/themes/d-black.json5 +++ b/src/client/themes/d-black.json5 @@ -11,9 +11,7 @@ panel: '#131313', panelHeaderBg: '@panel', panelHeaderDivider: '@divider', - panelShadow: '" 0 8px 24px rgb(0 0 0 / 25%)', shadow: 'rgba(255, 255, 255, 0.05)', modalBg: 'rgba(255, 255, 255, 0.1)', - messageBg: '#1d1d1d', }, } diff --git a/src/client/themes/d-dark.json5 b/src/client/themes/d-dark.json5 index fba7fe7582..d24ce4df69 100644 --- a/src/client/themes/d-dark.json5 +++ b/src/client/themes/d-dark.json5 @@ -13,7 +13,6 @@ fgHighlighted: '#fff', divider: 'rgba(255, 255, 255, 0.14)', panel: '#2d2d2d', - panelShadow: '" 0 8px 24px rgb(0 0 0 / 25%)', panelHeaderBg: '@panel', panelHeaderDivider: '@divider', header: ':alpha<0.7<@panel', diff --git a/src/client/themes/d-future.json5 b/src/client/themes/d-future.json5 new file mode 100644 index 0000000000..05ffe87bf0 --- /dev/null +++ b/src/client/themes/d-future.json5 @@ -0,0 +1,25 @@ +{ + id: '32a637ef-b47a-4775-bb7b-bacbb823f865', + + name: 'Mi Future', + author: 'syuilo', + + base: 'dark', + + props: { + accent: '#63e2b7', + bg: '#101014', + fg: '#D5D5D6', + fgHighlighted: '#fff', + fgOnAccent: '#000', + divider: 'rgba(255, 255, 255, 0.1)', + panel: '#18181c', + panelHeaderBg: '@panel', + panelHeaderDivider: '@divider', + renote: '@accent', + mention: '#f2c97d', + mentionMe: '@accent', + hashtag: '#70c0e8', + link: '#e88080', + }, +} diff --git a/src/client/themes/d-persimmon.json5 b/src/client/themes/d-persimmon.json5 index a1ebaf59eb..11e9994f5e 100644 --- a/src/client/themes/d-persimmon.json5 +++ b/src/client/themes/d-persimmon.json5 @@ -13,7 +13,6 @@ fgHighlighted: '#fff', divider: 'rgba(255, 255, 255, 0.14)', panel: 'rgb(41, 43, 41)', - panelShadow: '" 0 8px 24px rgb(0 0 0 / 25%)', infoFg: '@fg', infoBg: '#333c3b', navBg: '#141714', diff --git a/src/client/themes/l-apricot.json5 b/src/client/themes/l-apricot.json5 index 5e98d79492..74cb24d407 100644 --- a/src/client/themes/l-apricot.json5 +++ b/src/client/themes/l-apricot.json5 @@ -16,6 +16,7 @@ mention: '@accent', hashtag: '@accent', inputBorder: 'rgba(0, 0, 0, 0.1)', + inputBorderHover: 'rgba(0, 0, 0, 0.2)', infoBg: 'rgb(226, 235, 241)', }, } diff --git a/src/client/themes/l-light.json5 b/src/client/themes/l-light.json5 index 27a973c88a..79176cdd62 100644 --- a/src/client/themes/l-light.json5 +++ b/src/client/themes/l-light.json5 @@ -14,8 +14,6 @@ header: ':alpha<0.7<@panel', navBg: '#fff', panel: '#fff', - panelShadow: '" 0 8px 24px rgb(21 43 75 / 8%)', panelHeaderDivider: '@divider', - messageBg: '#dedede', }, } diff --git a/src/client/themes/l-vivid.json5 b/src/client/themes/l-vivid.json5 index a21e053b0a..0f4abe0a45 100644 --- a/src/client/themes/l-vivid.json5 +++ b/src/client/themes/l-vivid.json5 @@ -35,15 +35,15 @@ cwHoverBg: '#bbc4ce', indicator: '@accent', mentionMe: '@mention', - messageBg: '@panel', + messageBg: '@bg', navActive: '@accent', infoWarnBg: '#fff0db', - infoWarnFg: '#573c08', + infoWarnFg: '#8f6e31', navHoverFg: ':darken<17<@fg', dateLabelFg: '@fg', - inputBorder: '#dae0e4', - panelBorder: 'rgba(0, 0, 0, 0)', - panelShadow: '" 0 8px 24px rgb(21 43 75 / 8%)', + inputBorder: 'rgba(0, 0, 0, 0.1)', + inputBorderHover: 'rgba(0, 0, 0, 0.2)', + panelBorder: '" solid 1px var(--divider)', accentDarken: ':darken<10<@accent', acrylicPanel: ':alpha<0.5<@panel', navIndicator: '@accent', diff --git a/src/client/ui/_common_/header.vue b/src/client/ui/_common_/header.vue index 83aa669b44..67bb3abb93 100644 --- a/src/client/ui/_common_/header.vue +++ b/src/client/ui/_common_/header.vue @@ -1,22 +1,29 @@ <template> <div class="fdidabkb" :class="{ center }" :style="`--height:${height};`" :key="key"> <transition :name="$store.state.animation ? 'header' : ''" mode="out-in" appear> - <button class="_button back" v-if="withBack && canBack" @click.stop="back()" v-tooltip="$ts.goBack"><i class="fas fa-chevron-left"></i></button> + <div class="buttons left" v-if="backButton"> + <button class="_button button back" @click.stop="$emit('back')" v-tooltip="$ts.goBack"><i class="fas fa-chevron-left"></i></button> + </div> </transition> <template v-if="info"> <div class="titleContainer"> + <i v-if="info.icon" class="icon" :class="info.icon"></i> + <MkAvatar v-else-if="info.avatar" class="avatar" :user="info.avatar" :disable-preview="true" :show-indicator="true"/> + <div class="title"> - <i v-if="info.icon" class="icon" :class="info.icon"></i> - <MkAvatar v-else-if="info.avatar" class="avatar" :user="info.avatar" :disable-preview="true" :show-indicator="true"/> - <MkUserName v-if="info.userName" :user="info.userName" :nowrap="false" class="text"/> - <span v-else-if="info.title" class="text">{{ info.title }}</span> + <MkUserName v-if="info.userName" :user="info.userName" :nowrap="false" class="title"/> + <div v-else-if="info.title" class="title">{{ info.title }}</div> + <div class="subtitle" v-if="info.subtitle"> + {{ info.subtitle }} + </div> </div> </div> - <div class="buttons"> + <div class="buttons right"> <template v-if="info.actions && showActions"> - <button v-for="action in info.actions" class="_button button" @click.stop="action.handler" v-tooltip="action.text"><i :class="action.icon"></i></button> + <button v-for="action in info.actions" class="_button button" :class="{ highlighted: action.highlighted }" @click.stop="action.handler" v-tooltip="action.text"><i :class="action.icon"></i></button> </template> - <button v-if="showMenu" class="_button button" @click.stop="menu"><i class="fas fa-ellipsis-h"></i></button> + <button v-if="shouldShowMenu" class="_button button" @click.stop="showMenu" v-tooltip="$ts.menu"><i class="fas fa-ellipsis-h"></i></button> + <button v-if="closeButton" class="_button button" @click.stop="$emit('close')" v-tooltip="$ts.close"><i class="fas fa-times"></i></button> </div> </template> </div> @@ -24,7 +31,7 @@ <script lang="ts"> import { defineComponent } from 'vue'; -import { modalMenu } from '@client/os'; +import { popupMenu } from '@client/os'; import { url } from '@client/config'; export default defineComponent({ @@ -32,10 +39,18 @@ export default defineComponent({ info: { required: true }, - withBack: { + menu: { + required: false + }, + backButton: { type: Boolean, required: false, - default: true, + default: false, + }, + closeButton: { + type: Boolean, + required: false, + default: false, }, center: { type: Boolean, @@ -46,7 +61,6 @@ export default defineComponent({ data() { return { - canBack: false, showActions: false, height: 0, key: 0, @@ -54,10 +68,11 @@ export default defineComponent({ }, computed: { - showMenu() { + shouldShowMenu() { if (this.info.actions != null && !this.showActions) return true; if (this.info.menu != null) return true; if (this.info.share != null) return true; + if (this.menu != null) return true; return false; } }, @@ -66,13 +81,6 @@ export default defineComponent({ info() { this.key++; }, - - $route: { - handler(to, from) { - this.canBack = (window.history.length > 0 && !['index'].includes(to.name)); - }, - immediate: true - }, }, mounted() { @@ -85,10 +93,6 @@ export default defineComponent({ }, methods: { - back() { - if (this.canBack) this.$router.back(); - }, - share() { navigator.share({ url: url + this.info.path, @@ -96,7 +100,7 @@ export default defineComponent({ }); }, - menu(ev) { + showMenu(ev) { let menu = this.info.menu ? this.info.menu() : []; if (!this.showActions && this.info.actions) { menu = [...this.info.actions.map(x => ({ @@ -113,7 +117,11 @@ export default defineComponent({ action: this.share }); } - modalMenu(menu, ev.currentTarget || ev.target); + if (this.menu) { + if (menu.length > 0) menu.push(null); + menu = menu.concat(this.menu); + } + popupMenu(menu, ev.currentTarget || ev.target); } } }); @@ -121,62 +129,92 @@ export default defineComponent({ <style lang="scss" scoped> .fdidabkb { + display: flex; + &.center { text-align: center; > .titleContainer { margin: 0 auto; } - } - > .back { - position: absolute; - z-index: 1; - top: 0; - left: 0; - height: var(--height); - width: var(--height); + > .buttons { + &.right { + margin-left: 0; + } + } } > .buttons { - position: absolute; - z-index: 1; - top: 0; - right: 0; + --margin: 8px; + display: flex; + align-items: center; + height: var(--height); + margin: 0 var(--margin); - > .button { - height: var(--height); + &.right { + margin-left: auto; + } + + &:empty { width: var(--height); } + + > .button { + display: flex; + align-items: center; + justify-content: center; + height: calc(var(--height) - (var(--margin) * 2)); + width: calc(var(--height) - (var(--margin) * 2)); + box-sizing: border-box; + position: relative; + border-radius: 5px; + + &:hover { + background: rgba(0, 0, 0, 0.05); + } + + &.highlighted { + color: var(--accent); + } + } } > .titleContainer { + display: flex; + align-items: center; overflow: auto; white-space: nowrap; - width: calc(100% - (var(--height) * 2)); + text-align: left; - > .title { + > .avatar { + $size: 32px; display: inline-block; + width: $size; + height: $size; vertical-align: bottom; - white-space: nowrap; + margin: 0 8px; + pointer-events: none; + } + + > .icon { + margin-right: 8px; + } + + > .title { + min-width: 0; overflow: hidden; text-overflow: ellipsis; - padding: 0 16px; - position: relative; - height: var(--height); - - > .icon + .text { - margin-left: 8px; - } + white-space: nowrap; + line-height: 1.1; - > .avatar { - $size: 32px; - display: inline-block; - width: $size; - height: $size; - vertical-align: bottom; - margin: calc((var(--height) - #{$size}) / 2) 8px calc((var(--height) - #{$size}) / 2) 0; - pointer-events: none; + > .subtitle { + opacity: 0.6; + font-size: 0.8em; + font-weight: normal; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } } } diff --git a/src/client/ui/_common_/sidebar.vue b/src/client/ui/_common_/sidebar.vue index 073907cde9..ffa3a67b13 100644 --- a/src/client/ui/_common_/sidebar.vue +++ b/src/client/ui/_common_/sidebar.vue @@ -150,7 +150,7 @@ export default defineComponent({ }); })); - os.modalMenu([...[{ + os.popupMenu([...[{ type: 'link', text: this.$ts.profile, to: `/@${ this.$i.username }`, @@ -159,7 +159,7 @@ export default defineComponent({ icon: 'fas fa-plus', text: this.$ts.addAccount, action: () => { - os.modalMenu([{ + os.popupMenu([{ text: this.$ts.existingAccount, action: () => { this.addAccount(); }, }, { diff --git a/src/client/ui/chat/date-separated-list.vue b/src/client/ui/chat/date-separated-list.vue index bc7fc91d38..12638cd230 100644 --- a/src/client/ui/chat/date-separated-list.vue +++ b/src/client/ui/chat/date-separated-list.vue @@ -1,17 +1,23 @@ <script lang="ts"> -import { defineComponent, h, TransitionGroup } from 'vue'; +import { defineComponent, h, PropType, TransitionGroup } from 'vue'; +import MkAd from '@client/components/global/ad.vue'; export default defineComponent({ props: { items: { - type: Array, + type: Array as PropType<{ id: string; createdAt: string; _shouldInsertAd_: boolean; }[]>, required: true, }, reversed: { type: Boolean, required: false, default: false - } + }, + ad: { + type: Boolean, + required: false, + default: false + }, }, methods: { @@ -66,7 +72,15 @@ export default defineComponent({ return [el, separator]; } else { - return el; + if (this.ad && item._shouldInsertAd_) { + return [h(MkAd, { + class: 'a', // advertiseの意(ブロッカー対策) + key: item.id + ':ad', + prefer: ['horizontal', 'horizontal-big'], + }), el]; + } else { + return el; + } } })); }, diff --git a/src/client/ui/chat/index.vue b/src/client/ui/chat/index.vue index d45369e8b0..db663c4530 100644 --- a/src/client/ui/chat/index.vue +++ b/src/client/ui/chat/index.vue @@ -55,6 +55,7 @@ <MkA to="/my/favorites" class="item"><i class="fas fa-star icon"></i>{{ $ts.favorites }}</MkA> </div> </div> + <MkAd class="a" prefer="square"/> </div> <footer class="footer"> <div class="left"> @@ -64,7 +65,7 @@ </div> <div class="right"> <button class="_button item search" @click="search" v-tooltip="$ts.search"> - <i class="fas fa-search"></i> + <i class="fas fa-search icon"></i> </button> <MkA class="item" to="/settings" v-tooltip="$ts.settings"><i class="fas fa-cog icon"></i></MkA> </div> @@ -72,54 +73,16 @@ </div> <main class="main" @contextmenu.stop="onContextmenu"> - <header class="header" ref="header" @click="onHeaderClick"> - <div class="left"> - <template v-if="tl === 'home'"> - <i class="fas fa-home icon"></i> - <div class="title">{{ $ts._timelines.home }}</div> - </template> - <template v-else-if="tl === 'local'"> - <i class="fas fa-comments icon"></i> - <div class="title">{{ $ts._timelines.local }}</div> - </template> - <template v-else-if="tl === 'social'"> - <i class="fas fa-share-alt icon"></i> - <div class="title">{{ $ts._timelines.social }}</div> - </template> - <template v-else-if="tl === 'global'"> - <i class="fas fa-globe icon"></i> - <div class="title">{{ $ts._timelines.global }}</div> - </template> - <template v-else-if="tl.startsWith('channel:')"> - <i class="fas fa-satellite-dish icon"></i> - <div class="title" v-if="currentChannel">{{ currentChannel.name }}<div class="description">{{ currentChannel.description }}</div></div> - </template> - </div> - - <div class="right"> - <div class="instance">{{ instanceName }}</div> - <XHeaderClock class="clock"/> - <button class="_button button timetravel" @click="timetravel" v-tooltip="$ts.jumpToSpecifiedDate"> - <i class="fas fa-calendar-alt"></i> - </button> - <button class="_button button search" v-if="tl.startsWith('channel:') && currentChannel" @click="inChannelSearch" v-tooltip="$ts.inChannelSearch"> - <i class="fas fa-search"></i> - </button> - <button class="_button button search" v-else @click="search" v-tooltip="$ts.search"> - <i class="fas fa-search"></i> - </button> - <button class="_button button follow" v-if="tl.startsWith('channel:') && currentChannel" :class="{ followed: currentChannel.isFollowing }" @click="toggleChannelFollow" v-tooltip="currentChannel.isFollowing ? $ts.unfollow : $ts.follow"> - <i v-if="currentChannel.isFollowing" class="fas fa-star"></i> - <i v-else class="far fa-star"></i> - </button> - <button class="_button button menu" v-if="tl.startsWith('channel:') && currentChannel" @click="openChannelMenu"> - <i class="fas fa-ellipsis-h"></i> - </button> - </div> + <header class="header"> + <XHeader class="header" :info="pageInfo" :menu="menu" :center="false" :back-button="true" @back="back()" @click="onHeaderClick"/> </header> - - <XTimeline class="body" ref="tl" v-if="tl.startsWith('channel:')" src="channel" :key="tl" :channel="tl.replace('channel:', '')"/> - <XTimeline class="body" ref="tl" v-else :src="tl" :key="tl"/> + <router-view v-slot="{ Component }"> + <transition :name="$store.state.animation ? 'page' : ''" mode="out-in" @enter="onTransition"> + <keep-alive :include="['timeline']"> + <component :is="Component" :ref="changePage" class="body"/> + </keep-alive> + </transition> + </router-view> </main> <XSide class="side" ref="side" @open="sideViewOpening = true" @close="sideViewOpening = false"/> @@ -138,7 +101,7 @@ import XSidebar from '@client/ui/_common_/sidebar.vue'; import XWidgets from './widgets.vue'; import XCommon from '../_common_/common.vue'; import XSide from './side.vue'; -import XTimeline from './timeline.vue'; +import XHeader from '../_common_/header.vue'; import XHeaderClock from './header-clock.vue'; import * as os from '@client/os'; import { router } from '@client/router'; @@ -146,6 +109,7 @@ import { menuDef } from '@client/menu'; import { search } from '@client/scripts/search'; import copyToClipboard from '@client/scripts/copy-to-clipboard'; import { store } from './store'; +import * as symbols from '@client/symbols'; export default defineComponent({ components: { @@ -153,29 +117,12 @@ export default defineComponent({ XSidebar, XWidgets, XSide, // NOTE: dynamic importするとAsyncComponentWrapperが間に入るせいでref取得できなくて面倒になる - XTimeline, + XHeader, XHeaderClock, }, provide() { return { - navHook: (path) => { - switch (path) { - case '/timeline/home': this.tl = 'home'; return; - case '/timeline/local': this.tl = 'local'; return; - case '/timeline/social': this.tl = 'social'; return; - case '/timeline/global': this.tl = 'global'; return; - - default: - if (path.startsWith('/channels/')) { - this.tl = `channel:${ path.replace('/channels/', '') }`; - return; - } - //os.pageWindow(path); - this.$refs.side.navigate(path); - break; - } - }, sideViewHook: (path) => { this.$refs.side.navigate(path); } @@ -184,7 +131,7 @@ export default defineComponent({ data() { return { - tl: store.state.tl, + pageInfo: null, lists: null, antennas: null, followedChannels: null, @@ -196,18 +143,30 @@ export default defineComponent({ }; }, + computed: { + menu() { + return [{ + icon: 'fas fa-columns', + text: this.$ts.openInSideView, + action: () => { + this.$refs.side.navigate(this.$route.path); + } + }, { + icon: 'fas fa-window-maximize', + text: this.$ts.openInWindow, + action: () => { + os.pageWindow(this.$route.path); + } + }]; + } + }, + created() { if (window.innerWidth < 1024) { localStorage.setItem('ui', 'default'); location.reload(); } - router.beforeEach((to, from) => { - this.$refs.side.navigate(to.fullPath); - // search?q=foo のようなクエリを受け取れるようにするため、return falseはできない - //return false; - }); - os.api('users/lists/list').then(lists => { this.lists = lists; }); @@ -224,18 +183,22 @@ export default defineComponent({ os.api('channels/featured', { limit: 20 }).then(channels => { this.featuredChannels = channels; }); - - this.$watch('tl', () => { - if (this.tl.startsWith('channel:')) { - os.api('channels/show', { channelId: this.tl.replace('channel:', '') }).then(channel => { - this.currentChannel = channel; - }); - } - store.set('tl', this.tl); - }, { immediate: true }); }, methods: { + changePage(page) { + console.log(page); + if (page == null) return; + if (page[symbols.PAGE_INFO]) { + this.pageInfo = page[symbols.PAGE_INFO]; + document.title = `${this.pageInfo.title} | ${instanceName}`; + } + }, + + onTransition() { + if (window._scroll) window._scroll(); + }, + showMenu() { this.$refs.menu.show(); }, @@ -244,59 +207,18 @@ export default defineComponent({ os.post(); }, - async timetravel() { - const { canceled, result: date } = await os.dialog({ - title: this.$ts.date, - input: { - type: 'date' - } - }); - if (canceled) return; - - this.$refs.tl.timetravel(new Date(date)); - }, - search() { search(); }, - async inChannelSearch() { - const { canceled, result: query } = await os.dialog({ - title: this.$ts.inChannelSearch, - input: true - }); - if (canceled || query == null || query === '') return; - router.push(`/search?q=${encodeURIComponent(query)}&channel=${this.currentChannel.id}`); + back() { + history.back(); }, top() { window.scroll({ top: 0, behavior: 'smooth' }); }, - async toggleChannelFollow() { - if (this.currentChannel.isFollowing) { - await os.apiWithDialog('channels/unfollow', { - channelId: this.currentChannel.id - }); - this.currentChannel.isFollowing = false; - } else { - await os.apiWithDialog('channels/follow', { - channelId: this.currentChannel.id - }); - this.currentChannel.isFollowing = true; - } - }, - - openChannelMenu(ev) { - os.modalMenu([{ - text: this.$ts.copyUrl, - icon: 'fas fa-link', - action: () => { - copyToClipboard(`${url}/channels/${this.currentChannel.id}`); - } - }], ev.currentTarget || ev.target); - }, - onTransition() { if (window._scroll) window._scroll(); }, @@ -351,7 +273,7 @@ export default defineComponent({ flex-direction: column; width: 250px; height: 100vh; - border-right: solid 0.5px var(--divider); + border-right: solid 4px var(--divider); > .header, > .footer { $padding: 8px; @@ -373,7 +295,7 @@ export default defineComponent({ > .left, > .right { > .item, > .menu { - display: inline-block; + display: inline-flex; vertical-align: middle; height: ($header-height - ($padding * 2)); width: ($header-height - ($padding * 2)); @@ -387,11 +309,6 @@ export default defineComponent({ } > .icon { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; margin: auto; } @@ -503,6 +420,10 @@ export default defineComponent({ } } } + + > .a { + margin: 12px; + } } } @@ -516,87 +437,24 @@ export default defineComponent({ background: var(--panel); > .header { - $padding: 8px; - display: flex; z-index: 1000; height: $header-height; - padding: $padding; - box-sizing: border-box; background-color: var(--panel); border-bottom: solid 0.5px var(--divider); user-select: none; + } - > .left { - display: flex; - align-items: center; - flex: 1; - min-width: 0; - - > .icon { - height: ($header-height - ($padding * 2)); - width: ($header-height - ($padding * 2)); - padding: 10px; - box-sizing: border-box; - margin-right: 4px; - opacity: 0.6; - } - - > .title { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - min-width: 0; - font-weight: bold; - - > .description { - opacity: 0.6; - font-size: 0.8em; - font-weight: normal; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - } - } - - > .right { - display: flex; - align-items: center; - min-width: 0; - margin-left: auto; - padding-left: 8px; - - > .instance { - margin-right: 16px; - font-size: 0.9em; - } - - > .clock { - margin-right: 16px; - } - - > .button { - height: ($header-height - ($padding * 2)); - width: ($header-height - ($padding * 2)); - box-sizing: border-box; - position: relative; - border-radius: 5px; - - &:hover { - background: rgba(0, 0, 0, 0.05); - } - - &.follow.followed { - color: var(--accent); - } - } - } + > .body { + width: 100%; + box-sizing: border-box; + overflow: auto; } } > .side { width: 350px; - border-left: solid 0.5px var(--divider); + border-left: solid 4px var(--divider); + background: var(--panel); &.widgets.sideViewOpening { @media (max-width: 1400px) { diff --git a/src/client/ui/chat/note.vue b/src/client/ui/chat/note.vue index 7a525d9edb..6d2b9bbf54 100644 --- a/src/client/ui/chat/note.vue +++ b/src/client/ui/chat/note.vue @@ -432,7 +432,7 @@ export default defineComponent({ pleaseLogin(); this.operating = true; this.blur(); - os.modalMenu([{ + os.popupMenu([{ text: this.$ts.renote, icon: 'fas fa-retweet', action: () => { @@ -726,7 +726,7 @@ export default defineComponent({ menu(viaKeyboard = false) { this.operating = true; - os.modalMenu(this.getMenu(), this.$refs.menuButton, { + os.popupMenu(this.getMenu(), this.$refs.menuButton, { viaKeyboard }).then(() => { this.operating = false; @@ -736,7 +736,7 @@ export default defineComponent({ showRenoteMenu(viaKeyboard = false) { if (!this.isMyRenote) return; - os.modalMenu([{ + os.popupMenu([{ text: this.$ts.unrenote, icon: 'fas fa-trash-alt', danger: true, @@ -780,7 +780,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 () => { diff --git a/src/client/ui/chat/notes.vue b/src/client/ui/chat/notes.vue index 3ced6d8b3c..6690baf584 100644 --- a/src/client/ui/chat/notes.vue +++ b/src/client/ui/chat/notes.vue @@ -16,7 +16,7 @@ </MkButton> </div> - <XList ref="notes" :items="notes" v-slot="{ item: note }" :direction="reversed ? 'up' : 'down'" :reversed="reversed"> + <XList ref="notes" :items="notes" v-slot="{ item: note }" :direction="reversed ? 'up' : 'down'" :reversed="reversed" :ad="true"> <XNote :note="note" @update:note="updated(note, $event)" :key="note._featuredId_ || note._prId_ || note.id"/> </XList> diff --git a/src/client/ui/chat/pages/channel.vue b/src/client/ui/chat/pages/channel.vue new file mode 100644 index 0000000000..d11d40b210 --- /dev/null +++ b/src/client/ui/chat/pages/channel.vue @@ -0,0 +1,259 @@ +<template> +<div v-if="channel" class="hhizbblb"> + <div class="info" v-if="date"> + <MkInfo>{{ $ts.showingPastTimeline }} <button class="_textButton clear" @click="timetravel()">{{ $ts.clear }}</button></MkInfo> + </div> + <div class="tl" ref="body"> + <div class="new" v-if="queue > 0" :style="{ width: width + 'px', bottom: bottom + 'px' }"><button class="_buttonPrimary" @click="goTop()">{{ $ts.newNoteRecived }}</button></div> + <XNotes class="tl" ref="tl" :pagination="pagination" @queue="queueUpdated" v-follow="true"/> + </div> + <div class="bottom"> + <div class="typers" v-if="typers.length > 0"> + <I18n :src="$ts.typingUsers" text-tag="span" class="users"> + <template #users> + <b v-for="user in typers" :key="user.id" class="user">{{ user.username }}</b> + </template> + </I18n> + <MkEllipsis/> + </div> + <XPostForm :channel="channel"/> + </div> +</div> +</template> + +<script lang="ts"> +import { computed, defineComponent, markRaw } from 'vue'; +import * as Misskey from 'misskey-js'; +import XNotes from '../notes.vue'; +import * as os from '@client/os'; +import * as sound from '@client/scripts/sound'; +import { scrollToBottom, getScrollPosition, getScrollContainer } from '@client/scripts/scroll'; +import follow from '@client/directives/follow-append'; +import XPostForm from '../post-form.vue'; +import MkInfo from '@client/components/ui/info.vue'; +import * as symbols from '@client/symbols'; + +export default defineComponent({ + components: { + XNotes, + XPostForm, + MkInfo, + }, + + directives: { + follow + }, + + provide() { + return { + inChannel: true + }; + }, + + props: { + channelId: { + type: String, + required: true + }, + }, + + data() { + return { + channel: null as Misskey.entities.Channel | null, + connection: null, + pagination: null, + baseQuery: { + includeMyRenotes: this.$store.state.showMyRenotes, + includeRenotedMyNotes: this.$store.state.showRenotedMyNotes, + includeLocalRenotes: this.$store.state.showLocalRenotes + }, + queue: 0, + width: 0, + top: 0, + bottom: 0, + typers: [], + date: null, + [symbols.PAGE_INFO]: computed(() => ({ + title: this.channel ? this.channel.name : '-', + subtitle: this.channel ? this.channel.description : '-', + icon: 'fas fa-satellite-dish', + actions: [{ + icon: this.channel?.isFollowing ? 'fas fa-star' : 'far fa-star', + text: this.channel?.isFollowing ? this.$ts.unfollow : this.$ts.follow, + highlighted: this.channel?.isFollowing, + handler: this.toggleChannelFollow + }, { + icon: 'fas fa-search', + text: this.$ts.inChannelSearch, + handler: this.inChannelSearch + }, { + icon: 'fas fa-calendar-alt', + text: this.$ts.jumpToSpecifiedDate, + handler: this.timetravel + }] + })), + }; + }, + + async created() { + this.channel = await os.api('channels/show', { channelId: this.channelId }); + + const prepend = note => { + (this.$refs.tl as any).prepend(note); + + this.$emit('note'); + + sound.play(note.userId === this.$i.id ? 'noteMy' : 'note'); + }; + + this.connection = markRaw(os.stream.useChannel('channel', { + channelId: this.channelId + })); + this.connection.on('note', prepend); + this.connection.on('typers', typers => { + this.typers = this.$i ? typers.filter(u => u.id !== this.$i.id) : typers; + }); + + this.pagination = { + endpoint: 'channels/timeline', + reversed: true, + limit: 10, + params: init => ({ + channelId: this.channelId, + untilDate: this.date?.getTime(), + ...this.baseQuery + }) + }; + }, + + mounted() { + + }, + + beforeUnmount() { + this.connection.dispose(); + }, + + methods: { + focus() { + this.$refs.body.focus(); + }, + + goTop() { + const container = getScrollContainer(this.$refs.body); + container.scrollTop = 0; + }, + + queueUpdated(q) { + if (this.$refs.body.offsetWidth !== 0) { + const rect = this.$refs.body.getBoundingClientRect(); + this.width = this.$refs.body.offsetWidth; + this.top = rect.top; + this.bottom = this.$refs.body.offsetHeight; + } + this.queue = q; + }, + + async inChannelSearch() { + const { canceled, result: query } = await os.dialog({ + title: this.$ts.inChannelSearch, + input: true + }); + if (canceled || query == null || query === '') return; + router.push(`/search?q=${encodeURIComponent(query)}&channel=${this.channelId}`); + }, + + async toggleChannelFollow() { + if (this.channel.isFollowing) { + await os.apiWithDialog('channels/unfollow', { + channelId: this.channel.id + }); + this.channel.isFollowing = false; + } else { + await os.apiWithDialog('channels/follow', { + channelId: this.channel.id + }); + this.channel.isFollowing = true; + } + }, + + openChannelMenu(ev) { + os.popupMenu([{ + text: this.$ts.copyUrl, + icon: 'fas fa-link', + action: () => { + copyToClipboard(`${url}/channels/${this.currentChannel.id}`); + } + }], ev.currentTarget || ev.target); + }, + + timetravel(date?: Date) { + this.date = date; + this.$refs.tl.reload(); + } + } +}); +</script> + +<style lang="scss" scoped> +.hhizbblb { + display: flex; + flex-direction: column; + flex: 1; + overflow: auto; + + > .info { + padding: 16px 16px 0 16px; + } + + > .top { + padding: 16px 16px 0 16px; + } + + > .bottom { + padding: 0 16px 16px 16px; + position: relative; + + > .typers { + position: absolute; + bottom: 100%; + padding: 0 8px 0 8px; + font-size: 0.9em; + background: var(--panel); + border-radius: 0 8px 0 0; + color: var(--fgTransparentWeak); + + > .users { + > .user + .user:before { + content: ", "; + font-weight: normal; + } + + > .user:last-of-type:after { + content: " "; + } + } + } + } + + > .tl { + position: relative; + padding: 16px 0; + flex: 1; + min-width: 0; + overflow: auto; + + > .new { + position: fixed; + z-index: 1000; + + > button { + display: block; + margin: 16px auto; + padding: 8px 16px; + border-radius: 32px; + } + } + } +} +</style> diff --git a/src/client/ui/chat/pages/timeline.vue b/src/client/ui/chat/pages/timeline.vue new file mode 100644 index 0000000000..0f9cd7f11e --- /dev/null +++ b/src/client/ui/chat/pages/timeline.vue @@ -0,0 +1,221 @@ +<template> +<div class="dbiokgaf"> + <div class="info" v-if="date"> + <MkInfo>{{ $ts.showingPastTimeline }} <button class="_textButton clear" @click="timetravel()">{{ $ts.clear }}</button></MkInfo> + </div> + <div class="top"> + <XPostForm/> + </div> + <div class="tl" ref="body"> + <div class="new" v-if="queue > 0" :style="{ width: width + 'px', top: top + 'px' }"><button class="_buttonPrimary" @click="goTop()">{{ $ts.newNoteRecived }}</button></div> + <XNotes class="tl" ref="tl" :pagination="pagination" @queue="queueUpdated"/> + </div> +</div> +</template> + +<script lang="ts"> +import { computed, defineComponent, markRaw } from 'vue'; +import XNotes from '../notes.vue'; +import * as os from '@client/os'; +import * as sound from '@client/scripts/sound'; +import { scrollToBottom, getScrollPosition, getScrollContainer } from '@client/scripts/scroll'; +import follow from '@client/directives/follow-append'; +import XPostForm from '../post-form.vue'; +import MkInfo from '@client/components/ui/info.vue'; +import * as symbols from '@client/symbols'; + +export default defineComponent({ + components: { + XNotes, + XPostForm, + MkInfo, + }, + + directives: { + follow + }, + + props: { + src: { + type: String, + required: true + }, + }, + + data() { + return { + connection: null, + connection2: null, + pagination: null, + baseQuery: { + includeMyRenotes: this.$store.state.showMyRenotes, + includeRenotedMyNotes: this.$store.state.showRenotedMyNotes, + includeLocalRenotes: this.$store.state.showLocalRenotes + }, + query: {}, + queue: 0, + width: 0, + top: 0, + bottom: 0, + typers: [], + date: null, + [symbols.PAGE_INFO]: computed(() => ({ + title: this.$ts.timeline, + icon: 'fas fa-home', + actions: [{ + icon: 'fas fa-calendar-alt', + text: this.$ts.jumpToSpecifiedDate, + handler: this.timetravel + }] + })), + }; + }, + + created() { + const prepend = note => { + (this.$refs.tl as any).prepend(note); + + this.$emit('note'); + + sound.play(note.userId === this.$i.id ? 'noteMy' : 'note'); + }; + + const onChangeFollowing = () => { + if (!this.$refs.tl.backed) { + this.$refs.tl.reload(); + } + }; + + let endpoint; + + if (this.src == 'home') { + endpoint = 'notes/timeline'; + this.connection = markRaw(os.stream.useChannel('homeTimeline')); + this.connection.on('note', prepend); + + this.connection2 = markRaw(os.stream.useChannel('main')); + this.connection2.on('follow', onChangeFollowing); + this.connection2.on('unfollow', onChangeFollowing); + } else if (this.src == 'local') { + endpoint = 'notes/local-timeline'; + this.connection = markRaw(os.stream.useChannel('localTimeline')); + this.connection.on('note', prepend); + } else if (this.src == 'social') { + endpoint = 'notes/hybrid-timeline'; + this.connection = markRaw(os.stream.useChannel('hybridTimeline')); + this.connection.on('note', prepend); + } else if (this.src == 'global') { + endpoint = 'notes/global-timeline'; + this.connection = markRaw(os.stream.useChannel('globalTimeline')); + this.connection.on('note', prepend); + } + + this.pagination = { + endpoint: endpoint, + limit: 10, + params: init => ({ + untilDate: this.date?.getTime(), + ...this.baseQuery, ...this.query + }) + }; + }, + + mounted() { + + }, + + beforeUnmount() { + this.connection.dispose(); + if (this.connection2) this.connection2.dispose(); + }, + + methods: { + focus() { + this.$refs.body.focus(); + }, + + goTop() { + const container = getScrollContainer(this.$refs.body); + container.scrollTop = 0; + }, + + queueUpdated(q) { + if (this.$refs.body.offsetWidth !== 0) { + const rect = this.$refs.body.getBoundingClientRect(); + this.width = this.$refs.body.offsetWidth; + this.top = rect.top; + this.bottom = this.$refs.body.offsetHeight; + } + this.queue = q; + }, + + timetravel(date?: Date) { + this.date = date; + this.$refs.tl.reload(); + } + } +}); +</script> + +<style lang="scss" scoped> +.dbiokgaf { + display: flex; + flex-direction: column; + flex: 1; + overflow: auto; + + > .info { + padding: 16px 16px 0 16px; + } + + > .top { + padding: 16px 16px 0 16px; + } + + > .bottom { + padding: 0 16px 16px 16px; + position: relative; + + > .typers { + position: absolute; + bottom: 100%; + padding: 0 8px 0 8px; + font-size: 0.9em; + background: var(--panel); + border-radius: 0 8px 0 0; + color: var(--fgTransparentWeak); + + > .users { + > .user + .user:before { + content: ", "; + font-weight: normal; + } + + > .user:last-of-type:after { + content: " "; + } + } + } + } + + > .tl { + position: relative; + padding: 16px 0; + flex: 1; + min-width: 0; + overflow: auto; + + > .new { + position: fixed; + z-index: 1000; + + > button { + display: block; + margin: 16px auto; + padding: 8px 16px; + border-radius: 32px; + } + } + } +} +</style> diff --git a/src/client/ui/chat/post-form.vue b/src/client/ui/chat/post-form.vue index 6812eb31ba..0f9a206fab 100644 --- a/src/client/ui/chat/post-form.vue +++ b/src/client/ui/chat/post-form.vue @@ -594,7 +594,7 @@ export default defineComponent({ }, showActions(ev) { - os.modalMenu(postFormActions.map(action => ({ + os.popupMenu(postFormActions.map(action => ({ text: action.title, action: () => { action.handler({ diff --git a/src/client/ui/chat/side.vue b/src/client/ui/chat/side.vue index 8cc69fee8c..5ccfad1b75 100644 --- a/src/client/ui/chat/side.vue +++ b/src/client/ui/chat/side.vue @@ -1,11 +1,9 @@ <template> <div class="mrajymqm _narrow_" v-if="component"> <header class="header" @contextmenu.prevent.stop="onContextmenu"> - <button class="_button" @click="back()" v-if="history.length > 0"><i class="fas fa-chevron-left"></i></button> - <XHeader class="title" :info="pageInfo" :with-back="false" :center="false"/> - <button class="_button" @click="close()"><i class="fas fa-times"></i></button> + <XHeader class="title" :info="pageInfo" :center="false" :back-button="history.length > 0" @back="back()" :close-button="true" @close="close()"/> </header> - <component :is="component" v-bind="props" :ref="changePage"/> + <component :is="component" v-bind="props" :ref="changePage" class="body _flat_"/> </div> </template> @@ -130,7 +128,6 @@ export default defineComponent({ top: 0; height: $header-height; width: 100%; - line-height: $header-height; font-weight: bold; //background-color: var(--panel); -webkit-backdrop-filter: blur(32px); @@ -153,6 +150,10 @@ export default defineComponent({ position: relative; } } + + > .body { + + } } </style> diff --git a/src/client/ui/chat/timeline.vue b/src/client/ui/chat/timeline.vue deleted file mode 100644 index 0fbcbfb713..0000000000 --- a/src/client/ui/chat/timeline.vue +++ /dev/null @@ -1,292 +0,0 @@ -<template> -<div class="dbiokgaf info" v-if="date"> - <MkInfo>{{ $ts.showingPastTimeline }} <button class="_textButton clear" @click="timetravel()">{{ $ts.clear }}</button></MkInfo> -</div> -<div class="dbiokgaf top" v-if="['home', 'local', 'social', 'global'].includes(src)"> - <XPostForm/> -</div> -<div class="dbiokgaf tl" ref="body"> - <div class="new" v-if="queue > 0" :style="{ width: width + 'px', [pagination.reversed ? 'bottom' : 'top']: pagination.reversed ? bottom + 'px' : top + 'px' }"><button class="_buttonPrimary" @click="goTop()">{{ $ts.newNoteRecived }}</button></div> - <XNotes class="tl" ref="tl" :pagination="pagination" @queue="queueUpdated" v-follow="pagination.reversed"/> -</div> -<div class="dbiokgaf bottom" v-if="src === 'channel'"> - <div class="typers" v-if="typers.length > 0"> - <I18n :src="$ts.typingUsers" text-tag="span" class="users"> - <template #users> - <b v-for="user in typers" :key="user.id" class="user">{{ user.username }}</b> - </template> - </I18n> - <MkEllipsis/> - </div> - <XPostForm :channel="channel"/> -</div> -</template> - -<script lang="ts"> -import { defineComponent, markRaw } from 'vue'; -import XNotes from './notes.vue'; -import * as os from '@client/os'; -import * as sound from '@client/scripts/sound'; -import { scrollToBottom, getScrollPosition, getScrollContainer } from '@client/scripts/scroll'; -import follow from '@client/directives/follow-append'; -import XPostForm from './post-form.vue'; -import MkInfo from '@client/components/ui/info.vue'; - -export default defineComponent({ - components: { - XNotes, - XPostForm, - MkInfo, - }, - - directives: { - follow - }, - - provide() { - return { - inChannel: this.src === 'channel' - }; - }, - - props: { - src: { - type: String, - required: true - }, - list: { - type: String, - required: false - }, - antenna: { - type: String, - required: false - }, - channel: { - type: String, - required: false - }, - }, - - emits: ['note', 'queue', 'before', 'after'], - - data() { - return { - connection: null, - connection2: null, - pagination: null, - baseQuery: { - includeMyRenotes: this.$store.state.showMyRenotes, - includeRenotedMyNotes: this.$store.state.showRenotedMyNotes, - includeLocalRenotes: this.$store.state.showLocalRenotes - }, - query: {}, - queue: 0, - width: 0, - top: 0, - bottom: 0, - typers: [], - date: null - }; - }, - - created() { - const prepend = note => { - (this.$refs.tl as any).prepend(note); - - this.$emit('note'); - - sound.play(note.userId === this.$i.id ? 'noteMy' : 'note'); - }; - - const onUserAdded = () => { - (this.$refs.tl as any).reload(); - }; - - const onUserRemoved = () => { - (this.$refs.tl as any).reload(); - }; - - const onChangeFollowing = () => { - if (!this.$refs.tl.backed) { - this.$refs.tl.reload(); - } - }; - - let endpoint; - let reversed = false; - - if (this.src == 'antenna') { - endpoint = 'antennas/notes'; - this.query = { - antennaId: this.antenna - }; - this.connection = markRaw(os.stream.useChannel('antenna', { - antennaId: this.antenna - })); - this.connection.on('note', prepend); - } else if (this.src == 'home') { - endpoint = 'notes/timeline'; - this.connection = markRaw(os.stream.useChannel('homeTimeline')); - this.connection.on('note', prepend); - - this.connection2 = markRaw(os.stream.useChannel('main')); - this.connection2.on('follow', onChangeFollowing); - this.connection2.on('unfollow', onChangeFollowing); - } else if (this.src == 'local') { - endpoint = 'notes/local-timeline'; - this.connection = markRaw(os.stream.useChannel('localTimeline')); - this.connection.on('note', prepend); - } else if (this.src == 'social') { - endpoint = 'notes/hybrid-timeline'; - this.connection = markRaw(os.stream.useChannel('hybridTimeline')); - this.connection.on('note', prepend); - } else if (this.src == 'global') { - endpoint = 'notes/global-timeline'; - this.connection = markRaw(os.stream.useChannel('globalTimeline')); - this.connection.on('note', prepend); - } else if (this.src == 'mentions') { - endpoint = 'notes/mentions'; - this.connection = markRaw(os.stream.useChannel('main')); - this.connection.on('mention', prepend); - } else if (this.src == 'directs') { - endpoint = 'notes/mentions'; - this.query = { - visibility: 'specified' - }; - const onNote = note => { - if (note.visibility == 'specified') { - prepend(note); - } - }; - this.connection = markRaw(os.stream.useChannel('main')); - this.connection.on('mention', onNote); - } else if (this.src == 'list') { - endpoint = 'notes/user-list-timeline'; - this.query = { - listId: this.list - }; - this.connection = markRaw(os.stream.useChannel('userList', { - listId: this.list - })); - this.connection.on('note', prepend); - this.connection.on('userAdded', onUserAdded); - this.connection.on('userRemoved', onUserRemoved); - } else if (this.src == 'channel') { - endpoint = 'channels/timeline'; - reversed = true; - this.query = { - channelId: this.channel - }; - this.connection = markRaw(os.stream.useChannel('channel', { - channelId: this.channel - })); - this.connection.on('note', prepend); - this.connection.on('typers', typers => { - this.typers = this.$i ? typers.filter(u => u.id !== this.$i.id) : typers; - }); - } - - this.pagination = { - endpoint: endpoint, - reversed, - limit: 10, - params: init => ({ - untilDate: this.date?.getTime(), - ...this.baseQuery, ...this.query - }) - }; - }, - - mounted() { - - }, - - beforeUnmount() { - this.connection.dispose(); - if (this.connection2) this.connection2.dispose(); - }, - - methods: { - focus() { - this.$refs.body.focus(); - }, - - goTop() { - const container = getScrollContainer(this.$refs.body); - container.scrollTop = 0; - }, - - queueUpdated(q) { - if (this.$refs.body.offsetWidth !== 0) { - const rect = this.$refs.body.getBoundingClientRect(); - this.width = this.$refs.body.offsetWidth; - this.top = rect.top; - this.bottom = this.$refs.body.offsetHeight; - } - this.queue = q; - }, - - timetravel(date?: Date) { - this.date = date; - this.$refs.tl.reload(); - } - } -}); -</script> - -<style lang="scss" scoped> -.dbiokgaf.info{ - padding: 16px 16px 0 16px; -} - -.dbiokgaf.top { - padding: 16px 16px 0 16px; -} - -.dbiokgaf.bottom { - padding: 0 16px 16px 16px; - position: relative; - - > .typers { - position: absolute; - bottom: 100%; - padding: 0 8px 0 8px; - font-size: 0.9em; - background: var(--panel); - border-radius: 0 8px 0 0; - color: var(--fgTransparentWeak); - - > .users { - > .user + .user:before { - content: ", "; - font-weight: normal; - } - - > .user:last-of-type:after { - content: " "; - } - } - } -} - -.dbiokgaf.tl { - position: relative; - padding: 16px 0; - flex: 1; - min-width: 0; - overflow: auto; - - > .new { - position: fixed; - z-index: 1000; - - > button { - display: block; - margin: 16px auto; - padding: 8px 16px; - border-radius: 32px; - } - } -} -</style> diff --git a/src/client/ui/deck/main-column.vue b/src/client/ui/deck/main-column.vue index 0b61ff6e3a..4c591022a5 100644 --- a/src/client/ui/deck/main-column.vue +++ b/src/client/ui/deck/main-column.vue @@ -1,7 +1,7 @@ <template> <XColumn v-if="deckStore.state.alwaysShowMainColumn || $route.name !== 'index'" :column="column" :is-stacked="isStacked"> <template #header> - <XHeader :info="pageInfo"/> + <XHeader :info="pageInfo" :back-button="true" @back="back()"/> </template> <router-view v-slot="{ Component }" class="_flat_"> @@ -56,6 +56,10 @@ export default defineComponent({ } }, + back() { + history.back(); + }, + onContextmenu(e) { const isLink = (el: HTMLElement) => { if (el.tagName === 'A') return true; diff --git a/src/client/ui/deck/widgets-column.vue b/src/client/ui/deck/widgets-column.vue index 69aaaffa88..22b1a38287 100644 --- a/src/client/ui/deck/widgets-column.vue +++ b/src/client/ui/deck/widgets-column.vue @@ -64,7 +64,7 @@ export default defineComponent({ <style lang="scss" scoped> .wtdtxvec { --margin: 8px; - --panelShadow: none; + --panelBorder: none; padding: 0 var(--margin); } diff --git a/src/client/ui/default.header.vue b/src/client/ui/default.header.vue index a67883020f..df2e99f13a 100644 --- a/src/client/ui/default.header.vue +++ b/src/client/ui/default.header.vue @@ -116,7 +116,7 @@ export default defineComponent({ }); })); - os.modalMenu([...[{ + os.popupMenu([...[{ type: 'link', text: this.$ts.profile, to: `/@${ this.$i.username }`, @@ -125,7 +125,7 @@ export default defineComponent({ icon: 'fas fa-plus', text: this.$ts.addAccount, action: () => { - os.modalMenu([{ + os.popupMenu([{ text: this.$ts.existingAccount, action: () => { this.addAccount(); }, }, { diff --git a/src/client/ui/default.side.vue b/src/client/ui/default.side.vue index 5c8de80378..dca16cdb3e 100644 --- a/src/client/ui/default.side.vue +++ b/src/client/ui/default.side.vue @@ -4,7 +4,7 @@ <header class="header" @contextmenu.prevent.stop="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> - <XHeader class="title" :info="pageInfo" :with-back="false"/> + <XHeader class="title" :info="pageInfo" :back-button="false"/> <button class="_button" @click="close()"><i class="fas fa-times"></i></button> </header> <component :is="component" v-bind="props" :ref="changePage"/> diff --git a/src/client/ui/default.sidebar.vue b/src/client/ui/default.sidebar.vue index 2e0336878d..dd6d4d1516 100644 --- a/src/client/ui/default.sidebar.vue +++ b/src/client/ui/default.sidebar.vue @@ -136,7 +136,7 @@ export default defineComponent({ }); })); - os.modalMenu([...[{ + os.popupMenu([...[{ type: 'link', text: this.$ts.profile, to: `/@${ this.$i.username }`, @@ -145,7 +145,7 @@ export default defineComponent({ icon: 'fas fa-plus', text: this.$ts.addAccount, action: () => { - os.modalMenu([{ + os.popupMenu([{ text: this.$ts.existingAccount, action: () => { this.addAccount(); }, }, { diff --git a/src/client/ui/default.vue b/src/client/ui/default.vue index 5e79cd3830..3fc666c833 100644 --- a/src/client/ui/default.vue +++ b/src/client/ui/default.vue @@ -12,9 +12,9 @@ </div> </template> - <main class="main _panel" @contextmenu.stop="onContextmenu"> + <main class="main" @contextmenu.stop="onContextmenu"> <header class="header" @click="onHeaderClick"> - <XHeader :info="pageInfo"/> + <XHeader :info="pageInfo" :back-button="true" @back="back()"/> </header> <div class="content" :class="{ _flat_: !fullView }"> <router-view v-slot="{ Component }"> @@ -143,7 +143,7 @@ export default defineComponent({ }, attachSticky(ref) { - const sticky = new StickySidebar(this.$refs[ref], this.$store.state.menuDisplay === 'top' ? 1 : 16, this.$store.state.menuDisplay === 'top' ? 60 : 0); // TODO: ヘッダーの高さを60pxと決め打ちしているのを直す + const sticky = new StickySidebar(this.$refs[ref], this.$store.state.menuDisplay === 'top' ? 0 : 16, this.$store.state.menuDisplay === 'top' ? 60 : 0); // TODO: ヘッダーの高さを60pxと決め打ちしているのを直す window.addEventListener('scroll', () => { sticky.calc(window.scrollY); }, { passive: true }); @@ -157,6 +157,10 @@ export default defineComponent({ window.scroll({ top: 0, behavior: 'smooth' }); }, + back() { + history.back(); + }, + showDrawerNav() { this.$refs.drawerNav.show(); }, @@ -230,8 +234,6 @@ export default defineComponent({ $widgets-hide-threshold: 1200px; $nav-icon-only-width: 78px; // TODO: どこかに集約したい - --panelShadow: 0 0 0 1px var(--divider); - // ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ min-height: calc(var(--vh, 1vh) * 100); box-sizing: border-box; @@ -289,9 +291,11 @@ export default defineComponent({ min-width: 0; width: 750px; margin: 0 16px 0 0; - background: var(--bg); - box-shadow: 0 0 0 1px var(--divider); + background: var(--panel); + border-left: solid 1px var(--divider); + border-right: solid 1px var(--divider); border-radius: 0; + overflow: clip; --margin: 12px; > .header { @@ -299,14 +303,13 @@ export default defineComponent({ z-index: 1000; top: var(--globalHeaderHeight, 0px); height: $header-height; - line-height: $header-height; -webkit-backdrop-filter: blur(32px); backdrop-filter: blur(32px); background-color: var(--header); + border-bottom: solid 0.5px var(--divider); } > .content { - background: var(--bg); --stickyTop: calc(var(--globalHeaderHeight, 0px) + #{$header-height}); } @@ -321,7 +324,7 @@ export default defineComponent({ } > .widgets { - //--panelShadow: none; + //--panelBorder: none; width: 300px; margin-top: 16px; @@ -342,14 +345,14 @@ export default defineComponent({ --globalHeaderHeight: 60px; // TODO: 60pxと決め打ちしているのを直す > .main { - margin-top: 1px; + margin-top: 0; + border: solid 1px var(--divider); border-radius: var(--radius); - box-shadow: 0 0 0 1px var(--divider); } > .widgets { --stickyTop: var(--globalHeaderHeight); - margin-top: 1px; + margin-top: 0; } } diff --git a/src/client/widgets/timeline.vue b/src/client/widgets/timeline.vue index 8548574afc..bd951d8565 100644 --- a/src/client/widgets/timeline.vue +++ b/src/client/widgets/timeline.vue @@ -86,7 +86,7 @@ export default defineComponent({ this.setSrc('list'); } })); - os.modalMenu([{ + os.popupMenu([{ text: this.$ts._timelines.home, icon: 'fas fa-home', action: () => { this.setSrc('home') } |