diff options
Diffstat (limited to 'packages/client/src')
105 files changed, 2962 insertions, 2166 deletions
diff --git a/packages/client/src/components/dialog.vue b/packages/client/src/components/dialog.vue index 1b03e65a3d..5d6678531d 100644 --- a/packages/client/src/components/dialog.vue +++ b/packages/client/src/components/dialog.vue @@ -14,7 +14,9 @@ </div> <header v-if="title"><Mfm :text="title"/></header> <div v-if="text" class="body"><Mfm :text="text"/></div> - <MkInput v-if="input" v-model="inputValue" autofocus :type="input.type || 'text'" :placeholder="input.placeholder" @keydown="onInputKeydown"></MkInput> + <MkInput v-if="input" v-model="inputValue" autofocus :type="input.type || 'text'" :placeholder="input.placeholder" @keydown="onInputKeydown"> + <template v-if="input.type === 'password'" #prefix><i class="fas fa-lock"></i></template> + </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> @@ -165,6 +167,10 @@ export default defineComponent({ > .icon { font-size: 32px; + &.info { + color: #55c4dd; + } + &.success { color: var(--success); } diff --git a/packages/client/src/components/emoji-picker-dialog.vue b/packages/client/src/components/emoji-picker-dialog.vue index 4517a90db9..c1a9f73bcc 100644 --- a/packages/client/src/components/emoji-picker-dialog.vue +++ b/packages/client/src/components/emoji-picker-dialog.vue @@ -1,5 +1,5 @@ <template> -<MkPopup ref="popup" #default="{point}" :manual-showing="manualShowing" :src="src" :front="true" @click="$refs.popup.close()" @opening="opening" @close="$emit('close')" @closed="$emit('closed')"> +<MkPopup ref="popup" v-slot="{ point, close }" :manual-showing="manualShowing" :src="src" :front="true" @click="close()" @opening="opening" @close="$emit('close')" @closed="$emit('closed')"> <MkEmojiPicker ref="picker" class="ryghynhb _popup _shadow" :class="{ pointer: point === 'top' }" :show-pinned="showPinned" :as-reaction-picker="asReactionPicker" @chosen="chosen"/> </MkPopup> </template> diff --git a/packages/client/src/components/form-dialog.vue b/packages/client/src/components/form-dialog.vue index 27810d315a..fbf49af5d2 100644 --- a/packages/client/src/components/form-dialog.vue +++ b/packages/client/src/components/form-dialog.vue @@ -12,66 +12,67 @@ <template #header> {{ title }} </template> - <FormBase class="xkpnjxcv"> - <template v-for="item in Object.keys(form).filter(item => !form[item].hidden)"> - <FormInput v-if="form[item].type === 'number'" v-model="values[item]" type="number" :step="form[item].step || 1"> - <span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span> - <template v-if="form[item].description" #desc>{{ form[item].description }}</template> - </FormInput> - <FormInput v-else-if="form[item].type === 'string' && !form[item].multiline" v-model="values[item]" type="text"> - <span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span> - <template v-if="form[item].description" #desc>{{ form[item].description }}</template> - </FormInput> - <FormTextarea v-else-if="form[item].type === 'string' && form[item].multiline" v-model="values[item]"> - <span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span> - <template v-if="form[item].description" #desc>{{ form[item].description }}</template> - </FormTextarea> - <FormSwitch v-else-if="form[item].type === 'boolean'" v-model="values[item]"> - <span v-text="form[item].label || item"></span> - <template v-if="form[item].description" #desc>{{ form[item].description }}</template> - </FormSwitch> - <FormSelect v-else-if="form[item].type === 'enum'" v-model="values[item]"> - <template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template> - <option v-for="item in form[item].enum" :key="item.value" :value="item.value">{{ item.label }}</option> - </FormSelect> - <FormRadios v-else-if="form[item].type === 'radio'" v-model="values[item]"> - <template #desc><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template> - <option v-for="item in form[item].options" :key="item.value" :value="item.value">{{ item.label }}</option> - </FormRadios> - <FormRange v-else-if="form[item].type === 'range'" v-model="values[item]" :min="form[item].mim" :max="form[item].max" :step="form[item].step"> - <template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template> - <template v-if="form[item].description" #desc>{{ form[item].description }}</template> - </FormRange> - <FormButton v-else-if="form[item].type === 'button'" @click="form[item].action($event, values)"> - <span v-text="form[item].content || item"></span> - </FormButton> - </template> - </FormBase> + + <MkSpacer :margin-min="20" :margin-max="32"> + <div class="xkpnjxcv _formRoot"> + <template v-for="item in Object.keys(form).filter(item => !form[item].hidden)"> + <FormInput v-if="form[item].type === 'number'" v-model="values[item]" type="number" :step="form[item].step || 1" class="_formBlock"> + <template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template> + <template v-if="form[item].description" #caption>{{ form[item].description }}</template> + </FormInput> + <FormInput v-else-if="form[item].type === 'string' && !form[item].multiline" v-model="values[item]" type="text" class="_formBlock"> + <template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template> + <template v-if="form[item].description" #caption>{{ form[item].description }}</template> + </FormInput> + <FormTextarea v-else-if="form[item].type === 'string' && form[item].multiline" v-model="values[item]" class="_formBlock"> + <template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template> + <template v-if="form[item].description" #caption>{{ form[item].description }}</template> + </FormTextarea> + <FormSwitch v-else-if="form[item].type === 'boolean'" v-model="values[item]" class="_formBlock"> + <span v-text="form[item].label || item"></span> + <template v-if="form[item].description" #caption>{{ form[item].description }}</template> + </FormSwitch> + <FormSelect v-else-if="form[item].type === 'enum'" v-model="values[item]" class="_formBlock"> + <template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template> + <option v-for="item in form[item].enum" :key="item.value" :value="item.value">{{ item.label }}</option> + </FormSelect> + <FormRadios v-else-if="form[item].type === 'radio'" v-model="values[item]" class="_formBlock"> + <template #caption><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template> + <option v-for="item in form[item].options" :key="item.value" :value="item.value">{{ item.label }}</option> + </FormRadios> + <FormRange v-else-if="form[item].type === 'range'" v-model="values[item]" :min="form[item].mim" :max="form[item].max" :step="form[item].step" class="_formBlock"> + <template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template> + <template v-if="form[item].description" #caption>{{ form[item].description }}</template> + </FormRange> + <MkButton v-else-if="form[item].type === 'button'" @click="form[item].action($event, values)" class="_formBlock"> + <span v-text="form[item].content || item"></span> + </MkButton> + </template> + </div> + </MkSpacer> </XModalWindow> </template> <script lang="ts"> import { defineComponent } from 'vue'; import XModalWindow from '@/components/ui/modal-window.vue'; -import FormBase from './debobigego/base.vue'; -import FormInput from './debobigego/input.vue'; -import FormTextarea from './debobigego/textarea.vue'; -import FormSwitch from './debobigego/switch.vue'; -import FormSelect from './debobigego/select.vue'; -import FormRange from './debobigego/range.vue'; -import FormButton from './debobigego/button.vue'; -import FormRadios from './debobigego/radios.vue'; +import FormInput from './form/input.vue'; +import FormTextarea from './form/textarea.vue'; +import FormSwitch from './form/switch.vue'; +import FormSelect from './form/select.vue'; +import FormRange from './form/range.vue'; +import MkButton from './ui/button.vue'; +import FormRadios from './form/radios.vue'; export default defineComponent({ components: { XModalWindow, - FormBase, FormInput, FormTextarea, FormSwitch, FormSelect, FormRange, - FormButton, + MkButton, FormRadios, }, diff --git a/packages/client/src/components/form/group.vue b/packages/client/src/components/form/group.vue new file mode 100644 index 0000000000..2fc203f1b9 --- /dev/null +++ b/packages/client/src/components/form/group.vue @@ -0,0 +1,35 @@ +<template> +<div v-sticky-container v-panel class="adfeebaf _formBlock"> + <div class="label"><slot name="label"></slot></div> + <div class="main _formRoot"> + <slot></slot> + </div> +</div> +</template> + +<script lang="ts"> +import { defineComponent } from 'vue'; + +export default defineComponent({ +}); +</script> + +<style lang="scss" scoped> +.adfeebaf { + padding: 24px 24px; + border-radius: var(--radius); + + > .label { + font-weight: bold; + padding: 0 0 16px 0; + + &:empty { + display: none; + } + } + + > .main { + + } +} +</style> diff --git a/packages/client/src/components/form/input.vue b/packages/client/src/components/form/input.vue index 99267f9231..c990b693f1 100644 --- a/packages/client/src/components/form/input.vue +++ b/packages/client/src/components/form/input.vue @@ -5,6 +5,7 @@ <div ref="prefixEl" class="prefix"><slot name="prefix"></slot></div> <input ref="inputEl" v-model="v" + v-panel :type="type" :disabled="disabled" :required="required" @@ -27,7 +28,7 @@ </div> <div class="caption"><slot name="caption"></slot></div> - <MkButton v-if="manualSave && changed" primary @click="updated"><i class="fas fa-save"></i> {{ $ts.save }}</MkButton> + <MkButton v-if="manualSave && changed" primary class="save" @click="updated"><i class="fas fa-check"></i> {{ $ts.save }}</MkButton> </div> </template> @@ -114,9 +115,9 @@ export default defineComponent({ 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 inputEl = ref<HTMLElement>(); + const prefixEl = ref<HTMLElement>(); + const suffixEl = ref<HTMLElement>(); const focus = () => inputEl.value.focus(); const onInput = (ev) => { @@ -208,7 +209,7 @@ export default defineComponent({ .matxzzsk { > .label { font-size: 0.85em; - padding: 0 0 8px 12px; + padding: 0 0 8px 0; user-select: none; &:empty { @@ -217,8 +218,8 @@ export default defineComponent({ } > .caption { - font-size: 0.8em; - padding: 8px 0 0 12px; + font-size: 0.85em; + padding: 8px 0 0 0; color: var(--fgTransparentWeak); &:empty { @@ -242,8 +243,7 @@ export default defineComponent({ font-weight: normal; font-size: 1em; color: var(--fg); - background: var(--panel); - border: solid 0.5px var(--inputBorder); + border: solid 0.5px var(--panel); border-radius: 6px; outline: none; box-shadow: none; @@ -311,5 +311,9 @@ export default defineComponent({ } } } + + > .save { + margin: 8px 0 0 0; + } } </style> diff --git a/packages/client/src/components/form/link.vue b/packages/client/src/components/form/link.vue new file mode 100644 index 0000000000..3eb74425b0 --- /dev/null +++ b/packages/client/src/components/form/link.vue @@ -0,0 +1,112 @@ +<template> +<div class="ffcbddfc" :class="{ inline }"> + <a v-if="external" class="main _button" :href="to" target="_blank"> + <span class="icon"><slot name="icon"></slot></span> + <span class="text"><slot></slot></span> + <span class="right"> + <span class="text"><slot name="suffix"></slot></span> + <i class="fas fa-external-link-alt icon"></i> + </span> + </a> + <MkA v-else class="main _button" :class="{ active }" :to="to" :behavior="behavior"> + <span class="icon"><slot name="icon"></slot></span> + <span class="text"><slot></slot></span> + <span class="right"> + <span class="text"><slot name="suffix"></slot></span> + <i class="fas fa-chevron-right icon"></i> + </span> + </MkA> +</div> +</template> + +<script lang="ts"> +import { defineComponent } from 'vue'; + +export default defineComponent({ + props: { + to: { + type: String, + required: true + }, + active: { + type: Boolean, + required: false + }, + external: { + type: Boolean, + required: false + }, + behavior: { + type: String, + required: false, + }, + inline: { + type: Boolean, + required: false + }, + }, +}); +</script> + +<style lang="scss" scoped> +.ffcbddfc { + display: block; + + &.inline { + display: inline-block; + } + + > .main { + display: flex; + align-items: center; + width: 100%; + box-sizing: border-box; + padding: 12px 14px 12px 14px; + background: var(--buttonBg); + border-radius: 6px; + font-size: 0.9em; + + &:hover { + text-decoration: none; + background: var(--buttonHoverBg); + } + + &.active { + color: var(--accent); + background: var(--buttonHoverBg); + } + + > .icon { + margin-right: 0.75em; + flex-shrink: 0; + text-align: center; + opacity: 0.8; + + &:empty { + display: none; + + & + .text { + padding-left: 4px; + } + } + } + + > .text { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + padding-right: 12px; + } + + > .right { + margin-left: auto; + opacity: 0.7; + white-space: nowrap; + + > .text:not(:empty) { + margin-right: 0.75em; + } + } + } +} +</style> diff --git a/packages/client/src/components/form/pagination.vue b/packages/client/src/components/form/pagination.vue new file mode 100644 index 0000000000..3d3b40a783 --- /dev/null +++ b/packages/client/src/components/form/pagination.vue @@ -0,0 +1,44 @@ +<template> +<FormSlot> + <template #label><slot name="label"></slot></template> + <div class="abcaccfa"> + <slot :items="items"></slot> + <div v-if="empty" key="_empty_" class="empty"> + <slot name="empty"></slot> + </div> + <MkButton v-show="more" class="button" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" @click="fetchMore"> + <template v-if="!moreFetching">{{ $ts.loadMore }}</template> + <template v-if="moreFetching"><MkLoading inline/></template> + </MkButton> + </div> +</FormSlot> +</template> + +<script lang="ts"> +import { defineComponent } from 'vue'; +import MkButton from '@/components/ui/button.vue'; +import FormSlot from './slot.vue'; +import paging from '@/scripts/paging'; + +export default defineComponent({ + components: { + MkButton, + FormSlot, + }, + + mixins: [ + paging({}), + ], + + props: { + pagination: { + required: true + }, + }, +}); +</script> + +<style lang="scss" scoped> +.abcaccfa { +} +</style> diff --git a/packages/client/src/components/form/radio.vue b/packages/client/src/components/form/radio.vue index 0f31d8fa0a..f0b8c71376 100644 --- a/packages/client/src/components/form/radio.vue +++ b/packages/client/src/components/form/radio.vue @@ -1,5 +1,6 @@ <template> <div + v-panel class="novjtctn" :class="{ disabled, checked }" :aria-checked="checked" @@ -50,9 +51,10 @@ export default defineComponent({ .novjtctn { position: relative; display: inline-block; - margin: 8px 20px 0 0; text-align: left; cursor: pointer; + padding: 11px 14px; + border-radius: 6px; transition: all 0.3s; > * { @@ -68,6 +70,14 @@ export default defineComponent({ } &.checked { + background: var(--accentedBg) !important; + border-color: var(--accent); + color: var(--accent); + + &, * { + cursor: default !important; + } + > .button { border-color: var(--accent); @@ -79,6 +89,11 @@ export default defineComponent({ } } + &:hover { + border-color: var(--inputBorderHover); + color: var(--accent); + } + > input { position: absolute; width: 0; @@ -89,8 +104,8 @@ export default defineComponent({ > .button { position: absolute; - width: 20px; - height: 20px; + width: 14px; + height: 14px; background: none; border: solid 2px var(--inputBorder); border-radius: 100%; @@ -114,7 +129,6 @@ export default defineComponent({ > .label { margin-left: 28px; display: block; - font-size: 16px; line-height: 20px; cursor: pointer; } diff --git a/packages/client/src/components/form/radios.vue b/packages/client/src/components/form/radios.vue index 998a738202..ff5d51f9c7 100644 --- a/packages/client/src/components/form/radios.vue +++ b/packages/client/src/components/form/radios.vue @@ -23,6 +23,8 @@ export default defineComponent({ }, render() { let options = this.$slots.default(); + const label = this.$slots.label && this.$slots.label(); + const caption = this.$slots.caption && this.$slots.caption(); // なぜかFragmentになることがあるため if (options.length === 1 && options[0].props == null) options = options[0].children; @@ -30,12 +32,21 @@ export default defineComponent({ return h('div', { class: 'novjtcto' }, [ - ...options.map(option => h(MkRadio, { - key: option.key, - value: option.props.value, - modelValue: this.value, - 'onUpdate:modelValue': value => this.value = value, - }, option.children)) + ...(label ? [h('div', { + class: 'label' + }, [label])] : []), + h('div', { + class: 'body' + }, options.map(option => h(MkRadio, { + key: option.key, + value: option.props.value, + modelValue: this.value, + 'onUpdate:modelValue': value => this.value = value, + }, option.children)), + ), + ...(caption ? [h('div', { + class: 'caption' + }, [caption])] : []), ]); } }); @@ -43,12 +54,30 @@ export default defineComponent({ <style lang="scss"> .novjtcto { - &:first-child { - margin-top: 0; + > .label { + font-size: 0.85em; + padding: 0 0 8px 0; + user-select: none; + + &:empty { + display: none; + } + } + + > .body { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); + grid-gap: 12px; } - &:last-child { - margin-bottom: 0; + > .caption { + font-size: 0.85em; + padding: 8px 0 0 0; + color: var(--fgTransparentWeak); + + &:empty { + display: none; + } } } </style> diff --git a/packages/client/src/components/form/range.vue b/packages/client/src/components/form/range.vue index dd771abfe2..79a83d6a93 100644 --- a/packages/client/src/components/form/range.vue +++ b/packages/client/src/components/form/range.vue @@ -1,29 +1,27 @@ <template> -<div class="timctyfi" :class="{ focused, disabled }"> - <div class="icon"><slot name="icon"></slot></div> - <span class="label"><slot name="label"></slot></span> - <input - ref="input" - v-model="v" - type="range" - :disabled="disabled" - :min="min" - :max="max" - :step="step" - :autofocus="autofocus" - @focus="focused = true" - @blur="focused = false" - @input="$emit('update:value', $event.target.value)" - /> +<div class="timctyfi" :class="{ disabled }"> + <div class="label"><slot name="label"></slot></div> + <div v-panel class="body"> + <div ref="containerEl" class="container"> + <div class="track"> + <div class="highlight" :style="{ width: (steppedValue * 100) + '%' }"></div> + </div> + <div v-if="steps" class="ticks"> + <div v-for="i in (steps + 1)" class="tick" :style="{ left: (((i - 1) / steps) * 100) + '%' }"></div> + </div> + <div ref="thumbEl" v-tooltip="textConverter(finalValue)" class="thumb" :style="{ left: thumbPosition + 'px' }" @mousedown="onMousedown" @touchstart="onMousedown"></div> + </div> + </div> </div> </template> <script lang="ts"> -import { defineComponent } from 'vue'; +import { computed, defineComponent, ref, watch } from 'vue'; +import * as os from '@/os'; export default defineComponent({ props: { - value: { + modelValue: { type: Number, required: false, default: 0 @@ -51,88 +49,198 @@ export default defineComponent({ autofocus: { type: Boolean, required: false - } + }, + textConverter: { + type: Function, + required: false, + default: (v) => v.toString(), + }, }, - data() { + + setup(props, context) { + const rawValue = ref((props.modelValue - props.min) / (props.max - props.min)); + const steppedValue = computed(() => { + if (props.step) { + const step = props.step / (props.max - props.min); + return (step * Math.round(rawValue.value / step)); + } else { + return rawValue.value; + } + }); + const finalValue = computed(() => { + return (steppedValue.value * (props.max - props.min)) + props.min; + }); + watch(finalValue, () => { + context.emit('update:modelValue', finalValue.value); + }); + + const thumbWidth = computed(() => { + if (thumbEl.value == null) return 0; + return thumbEl.value!.offsetWidth; + }); + const thumbPosition = computed(() => { + if (containerEl.value == null) return 0; + return (containerEl.value.offsetWidth - thumbWidth.value) * steppedValue.value; + }); + const steps = computed(() => { + if (props.step) { + return (props.max - props.min) / props.step; + } else { + return 0; + } + }); + const containerEl = ref<HTMLElement>(); + const thumbEl = ref<HTMLElement>(); + + const onMousedown = (ev: MouseEvent | TouchEvent) => { + ev.preventDefault(); + + const tooltipShowing = ref(true); + os.popup(import('@/components/ui/tooltip.vue'), { + showing: tooltipShowing, + text: computed(() => { + return props.textConverter(finalValue.value); + }), + source: thumbEl, + }, {}, 'closed'); + + const style = document.createElement('style'); + style.appendChild(document.createTextNode('* { cursor: grabbing !important; } body * { pointer-events: none !important; }')); + document.head.appendChild(style); + + const onDrag = (ev: MouseEvent | TouchEvent) => { + ev.preventDefault(); + const containerRect = containerEl.value!.getBoundingClientRect(); + const pointerX = ev.touches && ev.touches.length > 0 ? ev.touches[0].clientX : ev.clientX; + const pointerPositionOnContainer = pointerX - (containerRect.left + (thumbWidth.value / 2)); + rawValue.value = Math.min(1, Math.max(0, pointerPositionOnContainer / (containerEl.value!.offsetWidth - thumbWidth.value))); + }; + + const onMouseup = () => { + document.head.removeChild(style); + tooltipShowing.value = false; + window.removeEventListener('mousemove', onDrag); + window.removeEventListener('touchmove', onDrag); + window.removeEventListener('mouseup', onMouseup); + window.removeEventListener('touchend', onMouseup); + }; + + window.addEventListener('mousemove', onDrag); + window.addEventListener('touchmove', onDrag); + window.addEventListener('mouseup', onMouseup, { once: true }); + window.addEventListener('touchend', onMouseup, { once: true }); + }; + return { - v: this.value, - focused: false + rawValue, + finalValue, + steppedValue, + onMousedown, + containerEl, + thumbEl, + thumbPosition, + steps, }; }, - watch: { - value(v) { - this.v = parseFloat(v); - } - }, - mounted() { - if (this.autofocus) { - this.$nextTick(() => { - this.$refs.input.focus(); - }); - } - } }); </script> <style lang="scss" scoped> +@use "sass:math"; + .timctyfi { position: relative; - margin: 8px; - > .icon { - display: inline-block; - width: 24px; - text-align: center; - } + > .label { + font-size: 0.85em; + padding: 0 0 8px 0; + user-select: none; - > .title { - pointer-events: none; - font-size: 16px; - color: var(--inputLabel); - overflow: hidden; + &:empty { + display: none; + } } - > input { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background: var(--X10); - height: 7px; - margin: 0 8px; - outline: 0; - border: 0; - border-radius: 7px; + > .caption { + font-size: 0.85em; + padding: 8px 0 0 0; + color: var(--fgTransparentWeak); - &.disabled { - opacity: 0.6; - cursor: not-allowed; + &:empty { + display: none; } + } - &::-webkit-slider-thumb { - -webkit-appearance: none; - appearance: none; - cursor: pointer; - width: 20px; - height: 20px; - display: block; - border-radius: 50%; - border: none; - background: var(--accent); - box-shadow: 0 0 6px rgba(0, 0, 0, 0.3); - box-sizing: content-box; - } + $thumbHeight: 20px; + $thumbWidth: 20px; + + > .body { + padding: 12px; + border-radius: 6px; + + > .container { + position: relative; + height: $thumbHeight; + + > .track { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + width: calc(100% - #{$thumbWidth}); + height: 3px; + background: rgba(0, 0, 0, 0.1); + border-radius: 999px; + overflow: clip; + + > .highlight { + position: absolute; + top: 0; + left: 0; + height: 100%; + background: var(--accent); + opacity: 0.5; + transition: width 0.2s cubic-bezier(0,0,0,1); + } + } + + > .ticks { + $tickWidth: 3px; + + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + width: calc(100% - #{$thumbWidth}); + + > .tick { + position: absolute; + bottom: 0; + width: $tickWidth; + height: 3px; + margin-left: - math.div($tickWidth, 2); + background: var(--divider); + border-radius: 999px; + } + } + + > .thumb { + position: absolute; + width: $thumbWidth; + height: $thumbHeight; + cursor: grab; + background: var(--accent); + border-radius: 999px; + transition: left 0.2s cubic-bezier(0,0,0,1); - &::-moz-range-thumb { - -moz-appearance: none; - appearance: none; - cursor: pointer; - width: 20px; - height: 20px; - display: block; - border-radius: 50%; - border: none; - background: var(--accent); - box-shadow: 0 0 6px rgba(0, 0, 0, 0.3); + &:hover { + background: var(--accentLighten); + } + } } } } diff --git a/packages/client/src/components/form/section.vue b/packages/client/src/components/form/section.vue index 76db7ac5c3..bc2ab966b8 100644 --- a/packages/client/src/components/form/section.vue +++ b/packages/client/src/components/form/section.vue @@ -1,7 +1,7 @@ <template> -<div v-size="{ max: [500] }" v-sticky-container class="vrtktovh"> +<div v-size="{ max: [500] }" v-sticky-container class="vrtktovh _formBlock"> <div class="label"><slot name="label"></slot></div> - <div class="main"> + <div class="main _formRoot"> <slot></slot> </div> </div> @@ -17,15 +17,33 @@ export default defineComponent({ <style lang="scss" scoped> .vrtktovh { + margin: 0; border-top: solid 0.5px var(--divider); + border-bottom: solid 0.5px var(--divider); + padding: 24px 0; + + & + .vrtktovh { + border-top: none; + } + + &:first-child { + border-top: none; + } + + &:last-child { + border-bottom: none; + } > .label { font-weight: bold; - padding: 24px 0 16px 0; + padding: 0 0 16px 0; + + &:empty { + display: none; + } } > .main { - margin-bottom: 32px; } } </style> diff --git a/packages/client/src/components/form/select.vue b/packages/client/src/components/form/select.vue index fe2a4e3a7d..9ecff1aa6f 100644 --- a/packages/client/src/components/form/select.vue +++ b/packages/client/src/components/form/select.vue @@ -3,7 +3,7 @@ <div class="label" @click="focus"><slot name="label"></slot></div> <div ref="container" class="input" :class="{ inline, disabled, focused }" @click.prevent="onClick"> <div ref="prefixEl" class="prefix"><slot name="prefix"></slot></div> - <select ref="inputEl" v-model="v" + <select ref="inputEl" v-model="v" v-panel class="select" :disabled="disabled" :required="required" @@ -201,7 +201,7 @@ export default defineComponent({ .vblkjoeq { > .label { font-size: 0.85em; - padding: 0 0 8px 12px; + padding: 0 0 8px 0; user-select: none; &:empty { @@ -210,8 +210,8 @@ export default defineComponent({ } > .caption { - font-size: 0.8em; - padding: 8px 0 0 12px; + font-size: 0.85em; + padding: 8px 0 0 0; color: var(--fgTransparentWeak); &:empty { @@ -242,8 +242,7 @@ export default defineComponent({ font-weight: normal; font-size: 1em; color: var(--fg); - background: var(--panel); - border: solid 1px var(--inputBorder); + border: solid 1px var(--panel); border-radius: 6px; outline: none; box-shadow: none; diff --git a/packages/client/src/components/form/slot.vue b/packages/client/src/components/form/slot.vue index 8580c1307d..d031b2effc 100644 --- a/packages/client/src/components/form/slot.vue +++ b/packages/client/src/components/form/slot.vue @@ -18,11 +18,9 @@ export default defineComponent({ <style lang="scss" scoped> .adhpbeou { - margin: 1.5em 0; - > .label { font-size: 0.85em; - padding: 0 0 8px 12px; + padding: 0 0 8px 0; user-select: none; &:empty { @@ -31,20 +29,13 @@ export default defineComponent({ } > .caption { - font-size: 0.8em; - padding: 8px 0 0 12px; + font-size: 0.85em; + padding: 8px 0 0 0; color: var(--fgTransparentWeak); &:empty { display: none; } } - - > .content { - position: relative; - background: var(--panel); - border: solid 0.5px var(--inputBorder); - border-radius: 6px; - } } </style> diff --git a/packages/client/src/components/form/suspense.vue b/packages/client/src/components/form/suspense.vue new file mode 100644 index 0000000000..4d5debe604 --- /dev/null +++ b/packages/client/src/components/form/suspense.vue @@ -0,0 +1,98 @@ +<template> +<transition name="fade" mode="out-in"> + <div v-if="pending"> + <MkLoading/> + </div> + <div v-else-if="resolved"> + <slot :result="result"></slot> + </div> + <div v-else> + <div class="wszdbhzo"> + <div><i class="fas fa-exclamation-triangle"></i> {{ $ts.somethingHappened }}</div> + <MkButton inline class="retry" @click="retry"><i class="fas fa-redo-alt"></i> {{ $ts.retry }}</MkButton> + </div> + </div> +</transition> +</template> + +<script lang="ts"> +import { defineComponent, PropType, ref, watch } from 'vue'; +import MkButton from '@/components/ui/button.vue'; + +export default defineComponent({ + components: { + MkButton + }, + + props: { + p: { + type: Function as PropType<() => Promise<any>>, + required: true, + } + }, + + setup(props, context) { + const pending = ref(true); + const resolved = ref(false); + const rejected = ref(false); + const result = ref(null); + + const process = () => { + if (props.p == null) { + return; + } + const promise = props.p(); + pending.value = true; + resolved.value = false; + rejected.value = false; + promise.then((_result) => { + pending.value = false; + resolved.value = true; + result.value = _result; + }); + promise.catch(() => { + pending.value = false; + rejected.value = true; + }); + }; + + watch(() => props.p, () => { + process(); + }, { + immediate: true + }); + + const retry = () => { + process(); + }; + + return { + pending, + resolved, + rejected, + result, + retry, + }; + } +}); +</script> + +<style lang="scss" scoped> +.fade-enter-active, +.fade-leave-active { + transition: opacity 0.125s ease; +} +.fade-enter-from, +.fade-leave-to { + opacity: 0; +} + +.wszdbhzo { + padding: 16px; + text-align: center; + + > .retry { + margin-top: 16px; + } +} +</style> diff --git a/packages/client/src/components/form/switch.vue b/packages/client/src/components/form/switch.vue index d6df68a07f..239303a55a 100644 --- a/packages/client/src/components/form/switch.vue +++ b/packages/client/src/components/form/switch.vue @@ -18,7 +18,7 @@ </span> <span class="label"> <span><slot></slot></span> - <p><slot name="caption"></slot></p> + <p class="caption"><slot name="caption"></slot></p> </span> </div> </template> @@ -118,10 +118,14 @@ export default defineComponent({ transition: inherit; } - > p { - margin: 0; + > .caption { + margin: 8px 0 0 0; color: var(--fgTransparentWeak); - font-size: 90%; + font-size: 0.85em; + + &:empty { + display: none; + } } } diff --git a/packages/client/src/components/form/textarea.vue b/packages/client/src/components/form/textarea.vue index f3a2c394f1..98fd0da94b 100644 --- a/packages/client/src/components/form/textarea.vue +++ b/packages/client/src/components/form/textarea.vue @@ -4,6 +4,7 @@ <div class="input" :class="{ disabled, focused, tall, pre }"> <textarea ref="inputEl" v-model="v" + v-panel :class="{ code, _monospace: code }" :disabled="disabled" :required="required" @@ -20,7 +21,7 @@ </div> <div class="caption"><slot name="caption"></slot></div> - <MkButton v-if="manualSave && changed" primary @click="updated"><i class="fas fa-save"></i> {{ $ts.save }}</MkButton> + <MkButton v-if="manualSave && changed" primary class="save" @click="updated"><i class="fas fa-save"></i> {{ $ts.save }}</MkButton> </div> </template> @@ -174,7 +175,7 @@ export default defineComponent({ .adhpbeos { > .label { font-size: 0.85em; - padding: 0 0 8px 12px; + padding: 0 0 8px 0; user-select: none; &:empty { @@ -183,8 +184,8 @@ export default defineComponent({ } > .caption { - font-size: 0.8em; - padding: 8px 0 0 12px; + font-size: 0.85em; + padding: 8px 0 0 0; color: var(--fgTransparentWeak); &:empty { @@ -209,8 +210,7 @@ export default defineComponent({ font-weight: normal; font-size: 1em; color: var(--fg); - background: var(--panel); - border: solid 0.5px var(--inputBorder); + border: solid 0.5px var(--panel); border-radius: 6px; outline: none; box-shadow: none; @@ -248,5 +248,9 @@ export default defineComponent({ } } } + + > .save { + margin: 8px 0 0 0; + } } </style> diff --git a/packages/client/src/components/global/spacer.vue b/packages/client/src/components/global/spacer.vue index 1129d54c71..e2f1d1aec7 100644 --- a/packages/client/src/components/global/spacer.vue +++ b/packages/client/src/components/global/spacer.vue @@ -7,7 +7,7 @@ </template> <script lang="ts"> -import { defineComponent, onMounted, onUnmounted, ref } from 'vue'; +import { defineComponent, inject, onMounted, onUnmounted, ref } from 'vue'; export default defineComponent({ props: { @@ -15,19 +15,35 @@ export default defineComponent({ type: Number, required: false, default: null, - } + }, + marginMin: { + type: Number, + required: false, + default: 12, + }, + marginMax: { + type: Number, + required: false, + default: 24, + }, }, setup(props, context) { let ro: ResizeObserver; - const root = ref<HTMLElement>(null); - const content = ref<HTMLElement>(null); + const root = ref<HTMLElement>(); + const content = ref<HTMLElement>(); const margin = ref(0); + const shouldSpacerMin = inject('shouldSpacerMin', false); const adjust = (rect: { width: number; height: number; }) => { - if (rect.width > (props.contentMax || 500)) { - margin.value = 32; + if (shouldSpacerMin) { + margin.value = props.marginMin; + return; + } + + if (rect.width > props.contentMax || rect.width > 500) { + margin.value = props.marginMax; } else { - margin.value = 12; + margin.value = props.marginMin; } }; @@ -40,14 +56,14 @@ export default defineComponent({ }); */ adjust({ - width: root.value.offsetWidth, - height: root.value.offsetHeight, + width: root.value!.offsetWidth, + height: root.value!.offsetHeight, }); }); - ro.observe(root.value); + ro.observe(root.value!); if (props.contentMax) { - content.value.style.maxWidth = `${props.contentMax}px`; + content.value!.style.maxWidth = `${props.contentMax}px`; } }); diff --git a/packages/client/src/components/key-value.vue b/packages/client/src/components/key-value.vue new file mode 100644 index 0000000000..6a9a948ce9 --- /dev/null +++ b/packages/client/src/components/key-value.vue @@ -0,0 +1,48 @@ +<template> +<div class="alqyeyti"> + <div class="key"> + <slot name="key"></slot> + </div> + <div class="value"> + <slot name="value"></slot> + <button v-if="copy" v-tooltip="$ts.copy" class="_textButton" style="margin-left: 0.5em;" @click="copy_"><i class="far fa-copy"></i></button> + </div> +</div> +</template> + +<script lang="ts"> +import { defineComponent } from 'vue'; +import copyToClipboard from '@/scripts/copy-to-clipboard'; +import * as os from '@/os'; + +export default defineComponent({ + props: { + copy: { + type: String, + required: false, + default: null, + }, + }, + + setup(props) { + const copy_ = () => { + copyToClipboard(props.copy); + os.success(); + }; + + return { + copy_ + }; + }, +}); +</script> + +<style lang="scss" scoped> +.alqyeyti { + > .key { + font-size: 0.85em; + padding: 0 0 0.25em 0; + opacity: 0.75; + } +} +</style> diff --git a/packages/client/src/components/media-list.vue b/packages/client/src/components/media-list.vue index 4eef95af54..79fe36b540 100644 --- a/packages/client/src/components/media-list.vue +++ b/packages/client/src/components/media-list.vue @@ -44,16 +44,36 @@ export default defineComponent({ onMounted(() => { const lightbox = new PhotoSwipeLightbox({ - dataSource: props.mediaList.filter(media => media.type.startsWith('image')).map(media => ({ - src: media.url, - w: media.properties.width, - h: media.properties.height, - alt: media.name, - })), + dataSource: props.mediaList.filter(media => media.type.startsWith('image')).map(media => { + const item = { + src: media.url, + w: media.properties.width, + h: media.properties.height, + alt: media.name, + }; + if (media.properties.orientation != null && media.properties.orientation >= 5) { + [item.w, item.h] = [item.h, item.w]; + } + return item; + }), gallery: gallery.value, children: '.image', thumbSelector: '.image', - pswpModule: PhotoSwipe + loop: false, + padding: window.innerWidth > 500 ? { + top: 32, + bottom: 32, + left: 32, + right: 32, + } : { + top: 0, + bottom: 0, + left: 0, + right: 0, + }, + imageClickAction: 'close', + tapAction: 'toggle-controls', + pswpModule: PhotoSwipe, }); lightbox.on('itemData', (e) => { @@ -68,6 +88,9 @@ export default defineComponent({ itemData.src = file.url; itemData.w = Number(file.properties.width); itemData.h = Number(file.properties.height); + if (file.properties.orientation != null && file.properties.orientation >= 5) { + [itemData.w, itemData.h] = [itemData.h, itemData.w]; + } itemData.msrc = file.thumbnailUrl; itemData.thumbCropped = true; }); diff --git a/packages/client/src/components/mfm.ts b/packages/client/src/components/mfm.ts index d41cf6fc2b..d1da365d9a 100644 --- a/packages/client/src/components/mfm.ts +++ b/packages/client/src/components/mfm.ts @@ -184,6 +184,11 @@ export default defineComponent({ count, speed, }, genEl(token.children)); } + case 'rotate': { + const degrees = parseInt(token.props.args.deg) || '90'; + style = `transform: rotate(${degrees}deg); transform-origin: center center;`; + break; + } } if (style == null) { return h('span', {}, ['$[', token.props.name, ' ', ...genEl(token.children), ']']); diff --git a/packages/client/src/components/note-detailed.vue b/packages/client/src/components/note-detailed.vue index 5fd8e9f6e2..55a02f1e73 100644 --- a/packages/client/src/components/note-detailed.vue +++ b/packages/client/src/components/note-detailed.vue @@ -42,8 +42,6 @@ <MkUserName :user="appearNote.user"/> </MkA> <span v-if="appearNote.user.isBot" class="is-bot">bot</span> - <span v-if="appearNote.user.isAdmin" class="admin"><i class="fas fa-bookmark"></i></span> - <span v-if="!appearNote.user.isAdmin && appearNote.user.isModerator" class="moderator"><i class="far fa-bookmark"></i></span> <span v-if="appearNote.visibility !== 'public'" class="visibility"> <i v-if="appearNote.visibility === 'home'" class="fas fa-home"></i> <i v-else-if="appearNote.visibility === 'followers'" class="fas fa-unlock"></i> @@ -86,7 +84,9 @@ </div> <footer class="footer"> <div class="info"> - <MkTime class="created-at" :time="appearNote.createdAt" mode="detail"/> + <MkA class="created-at" :to="notePage(appearNote)"> + <MkTime :time="appearNote.createdAt" mode="detail"/> + </MkA> </div> <XReactionsViewer ref="reactionsViewer" :note="appearNote"/> <button class="button _button" @click="reply()"> @@ -138,6 +138,7 @@ import { url } from '@/config'; import copyToClipboard from '@/scripts/copy-to-clipboard'; import { checkWordMute } from '@/scripts/check-word-mute'; import { userPage } from '@/filters/user'; +import { notePage } from '@/filters/note'; import * as os from '@/os'; import { noteActions, noteViewInterruptors } from '@/store'; import { reactionPicker } from '@/scripts/reaction-picker'; @@ -183,6 +184,7 @@ export default defineComponent({ muted: false, translation: null, translating: false, + notePage, }; }, @@ -647,7 +649,7 @@ export default defineComponent({ text: this.$ts.pin, action: () => this.togglePin(true) } : undefined, - ...(this.$i.isModerator || this.$i.isAdmin ? [ + /*...(this.$i.isModerator || this.$i.isAdmin ? [ null, { icon: 'fas fa-bullhorn', @@ -655,7 +657,7 @@ export default defineComponent({ action: this.promote }] : [] - ), + ),*/ ...(this.appearNote.userId != this.$i.id ? [ null, { @@ -1017,12 +1019,6 @@ export default defineComponent({ border: solid 0.5px var(--divider); border-radius: 4px; } - - > .admin, - > .moderator { - margin-right: 0.5em; - color: var(--badge); - } } } } diff --git a/packages/client/src/components/note-header.vue b/packages/client/src/components/note-header.vue index ca4be1e67f..26e725c6b8 100644 --- a/packages/client/src/components/note-header.vue +++ b/packages/client/src/components/note-header.vue @@ -5,8 +5,6 @@ </MkA> <div v-if="note.user.isBot" class="is-bot">bot</div> <div class="username"><MkAcct :user="note.user"/></div> - <div v-if="note.user.isAdmin" class="admin"><i class="fas fa-bookmark"></i></div> - <div v-if="!note.user.isAdmin && note.user.isModerator" class="moderator"><i class="far fa-bookmark"></i></div> <div class="info"> <MkA class="created-at" :to="notePage(note)"> <MkTime :time="note.createdAt"/> @@ -23,7 +21,7 @@ <script lang="ts"> import { defineComponent } from 'vue'; -import notePage from '@/filters/note'; +import { notePage } from '@/filters/note'; import { userPage } from '@/filters/user'; import * as os from '@/os'; @@ -79,13 +77,6 @@ export default defineComponent({ border-radius: 3px; } - > .admin, - > .moderator { - flex-shrink: 0; - margin-right: 0.5em; - color: var(--badge); - } - > .username { flex-shrink: 9999999; margin: 0 .5em 0 0; diff --git a/packages/client/src/components/note.sub.vue b/packages/client/src/components/note.sub.vue index 40e1f5c8c4..de4218e535 100644 --- a/packages/client/src/components/note.sub.vue +++ b/packages/client/src/components/note.sub.vue @@ -26,7 +26,7 @@ <script lang="ts"> import { defineComponent } from 'vue'; -import notePage from '@/filters/note'; +import { notePage } from '@/filters/note'; import XNoteHeader from './note-header.vue'; import XSubNoteContent from './sub-note-content.vue'; import XCwButton from './cw-button.vue'; diff --git a/packages/client/src/components/note.vue b/packages/client/src/components/note.vue index 1a458b45f7..c4040388a9 100644 --- a/packages/client/src/components/note.vue +++ b/packages/client/src/components/note.vue @@ -623,6 +623,7 @@ export default defineComponent({ text: this.$ts.pin, action: () => this.togglePin(true) } : undefined, + /* ...(this.$i.isModerator || this.$i.isAdmin ? [ null, { @@ -631,7 +632,7 @@ export default defineComponent({ action: this.promote }] : [] - ), + ),*/ ...(this.appearNote.userId != this.$i.id ? [ null, { @@ -858,6 +859,7 @@ export default defineComponent({ .tkcbzcuz { position: relative; transition: box-shadow 0.1s ease; + font-size: 1.05em; overflow: clip; contain: content; diff --git a/packages/client/src/components/notification.vue b/packages/client/src/components/notification.vue index 89025b72e6..15d36f5a64 100644 --- a/packages/client/src/components/notification.vue +++ b/packages/client/src/components/notification.vue @@ -74,7 +74,7 @@ import { getNoteSummary } from '@/scripts/get-note-summary'; import XReactionIcon from './reaction-icon.vue'; import MkFollowButton from './follow-button.vue'; import XReactionTooltip from './reaction-tooltip.vue'; -import notePage from '@/filters/note'; +import { notePage } from '@/filters/note'; import { userPage } from '@/filters/user'; import { i18n } from '@/i18n'; import * as os from '@/os'; @@ -107,28 +107,25 @@ export default defineComponent({ const reactionRef = ref(null); onMounted(() => { - let readObserver: IntersectionObserver | null = null; - let connection = null; - if (!props.notification.isRead) { - readObserver = new IntersectionObserver((entries, observer) => { + const readObserver = new IntersectionObserver((entries, observer) => { if (!entries.some(entry => entry.isIntersecting)) return; os.stream.send('readNotification', { id: props.notification.id }); - entries.map(({ target }) => observer.unobserve(target)); + observer.disconnect(); }); readObserver.observe(elRef.value); - connection = os.stream.useChannel('main'); - connection.on('readAllNotifications', () => readObserver.unobserve(elRef.value)); - } + const connection = os.stream.useChannel('main'); + connection.on('readAllNotifications', () => readObserver.disconnect()); - onUnmounted(() => { - if (readObserver) readObserver.unobserve(elRef.value); - if (connection) connection.dispose(); - }); + onUnmounted(() => { + readObserver.disconnect(); + connection.dispose(); + }); + } }); const followRequestDone = ref(false); diff --git a/packages/client/src/components/poll-editor.vue b/packages/client/src/components/poll-editor.vue index c2f760acbd..fad0cf1593 100644 --- a/packages/client/src/components/poll-editor.vue +++ b/packages/client/src/components/poll-editor.vue @@ -206,8 +206,6 @@ export default defineComponent({ > .input { flex: 1; - margin-top: 16px; - margin-bottom: 0; } > button { @@ -223,7 +221,7 @@ export default defineComponent({ } > section { - margin: 16px 0 -16px 0; + margin: 16px 0 0 0; > div { margin: 0 8px; diff --git a/packages/client/src/components/poll.vue b/packages/client/src/components/poll.vue index 6dbe0c84e9..171b4a4770 100644 --- a/packages/client/src/components/poll.vue +++ b/packages/client/src/components/poll.vue @@ -1,7 +1,7 @@ <template> <div class="tivcixzd" :class="{ done: closed || isVoted }"> <ul> - <li v-for="(choice, i) in poll.choices" :key="i" :class="{ voted: choice.voted }" @click="vote(i)"> + <li v-for="(choice, i) in note.poll.choices" :key="i" :class="{ voted: choice.voted }" @click="vote(i)"> <div class="backdrop" :style="{ 'width': `${showResult ? (choice.votes / total * 100) : 0}%` }"></div> <span> <template v-if="choice.isVoted"><i class="fas fa-check"></i></template> @@ -13,7 +13,7 @@ <p v-if="!readOnly"> <span>{{ $t('_poll.totalVotes', { n: total }) }}</span> <span> · </span> - <a v-if="!closed && !isVoted" @click="toggleShowResult">{{ showResult ? $ts._poll.vote : $ts._poll.showResult }}</a> + <a v-if="!closed && !isVoted" @click="showResult = !showResult">{{ showResult ? $ts._poll.vote : $ts._poll.showResult }}</a> <span v-if="isVoted">{{ $ts._poll.voted }}</span> <span v-else-if="closed">{{ $ts._poll.closed }}</span> <span v-if="remaining > 0"> · {{ timer }}</span> @@ -22,9 +22,10 @@ </template> <script lang="ts"> -import { defineComponent } from 'vue'; +import { computed, defineComponent, onUnmounted, ref, toRef } from 'vue'; import { sum } from '@/scripts/array'; import * as os from '@/os'; +import { i18n } from '@/i18n'; export default defineComponent({ props: { @@ -38,65 +39,67 @@ export default defineComponent({ default: false, } }, - data() { - return { - remaining: -1, - showResult: false, - }; - }, - computed: { - poll(): any { - return this.note.poll; - }, - total(): number { - return sum(this.poll.choices.map(x => x.votes)); - }, - closed(): boolean { - return !this.remaining; - }, - timer(): string { - return this.$t( - this.remaining >= 86400 ? '_poll.remainingDays' : - this.remaining >= 3600 ? '_poll.remainingHours' : - this.remaining >= 60 ? '_poll.remainingMinutes' : '_poll.remainingSeconds', { - s: Math.floor(this.remaining % 60), - m: Math.floor(this.remaining / 60) % 60, - h: Math.floor(this.remaining / 3600) % 24, - d: Math.floor(this.remaining / 86400) - }); - }, - isVoted(): boolean { - return !this.poll.multiple && this.poll.choices.some(c => c.isVoted); - } - }, - created() { - this.showResult = this.readOnly || this.isVoted; - if (this.note.poll.expiresAt) { - const update = () => { - if (this.remaining = Math.floor(Math.max(new Date(this.note.poll.expiresAt).getTime() - Date.now(), 0) / 1000)) - requestAnimationFrame(update); - else - this.showResult = true; + setup(props) { + const remaining = ref(-1); + + const total = computed(() => sum(props.note.poll.choices.map(x => x.votes))); + const closed = computed(() => remaining.value === 0); + const isVoted = computed(() => !props.note.poll.multiple && props.note.poll.choices.some(c => c.isVoted)); + const timer = computed(() => i18n.t( + remaining.value >= 86400 ? '_poll.remainingDays' : + remaining.value >= 3600 ? '_poll.remainingHours' : + remaining.value >= 60 ? '_poll.remainingMinutes' : '_poll.remainingSeconds', { + s: Math.floor(remaining.value % 60), + m: Math.floor(remaining.value / 60) % 60, + h: Math.floor(remaining.value / 3600) % 24, + d: Math.floor(remaining.value / 86400) + })); + + const showResult = ref(props.readOnly || isVoted.value); + + // 期限付きアンケート + if (props.note.poll.expiresAt) { + const tick = () => { + remaining.value = Math.floor(Math.max(new Date(props.note.poll.expiresAt).getTime() - Date.now(), 0) / 1000); + if (remaining.value === 0) { + showResult.value = true; + } }; - update(); - } - }, - methods: { - toggleShowResult() { - this.showResult = !this.showResult; - }, - vote(id) { - if (this.readOnly || this.closed || !this.poll.multiple && this.poll.choices.some(c => c.isVoted)) return; - os.api('notes/polls/vote', { - noteId: this.note.id, - choice: id - }).then(() => { - if (!this.showResult) this.showResult = !this.poll.multiple; + tick(); + const intevalId = window.setInterval(tick, 3000); + onUnmounted(() => { + window.clearInterval(intevalId); }); } - } + + const vote = async (id) => { + if (props.readOnly || closed.value || isVoted.value) return; + + const { canceled } = await os.confirm({ + type: 'question', + text: i18n.t('voteConfirm', { choice: props.note.poll.choices[id].text }), + }); + if (canceled) return; + + await os.api('notes/polls/vote', { + noteId: props.note.id, + choice: id, + }); + if (!showResult.value) showResult.value = !props.note.poll.multiple; + }; + + return { + remaining, + showResult, + total, + isVoted, + closed, + timer, + vote, + }; + }, }); </script> @@ -112,38 +115,38 @@ export default defineComponent({ display: block; position: relative; margin: 4px 0; - padding: 4px 8px; - border: solid 0.5px var(--divider); + padding: 4px; + //border: solid 0.5px var(--divider); + background: var(--accentedBg); border-radius: 4px; overflow: hidden; cursor: pointer; - &:hover { - background: rgba(#000, 0.05); - } - - &:active { - background: rgba(#000, 0.1); - } - > .backdrop { position: absolute; top: 0; left: 0; height: 100%; background: var(--accent); + background: linear-gradient(90deg,var(--buttonGradateA),var(--buttonGradateB)); transition: width 1s ease; } > span { position: relative; + display: inline-block; + padding: 3px 5px; + background: var(--panel); + border-radius: 3px; > i { margin-right: 4px; + color: var(--accent); } > .votes { margin-left: 4px; + opacity: 0.7; } } } @@ -160,14 +163,6 @@ export default defineComponent({ &.done { > ul > li { cursor: default; - - &:hover { - background: transparent; - } - - &:active { - background: transparent; - } } } } diff --git a/packages/client/src/components/post-form.vue b/packages/client/src/components/post-form.vue index 6f75e12a77..9bad9a84f8 100644 --- a/packages/client/src/components/post-form.vue +++ b/packages/client/src/components/post-form.vue @@ -289,9 +289,14 @@ export default defineComponent({ if (this.reply && this.reply.text != null) { const ast = mfm.parse(this.reply.text); + const otherHost = this.reply.user.host; for (const x of extractMentions(ast)) { - const mention = x.host ? `@${x.username}@${toASCII(x.host)}` : `@${x.username}`; + const mention = x.host ? + `@${x.username}@${toASCII(x.host)}` : + (otherHost == null || otherHost == host) ? + `@${x.username}` : + `@${x.username}@${toASCII(otherHost)}`; // 自分は除外 if (this.$i.username == x.username && x.host == null) continue; diff --git a/packages/client/src/components/reaction-tooltip.vue b/packages/client/src/components/reaction-tooltip.vue index a52c295277..dda8e7c6d7 100644 --- a/packages/client/src/components/reaction-tooltip.vue +++ b/packages/client/src/components/reaction-tooltip.vue @@ -41,6 +41,7 @@ export default defineComponent({ > .icon { display: block; width: 60px; + font-size: 60px; // unicodeな絵文字についてはwidthが効かないため margin: 0 auto; } diff --git a/packages/client/src/components/reactions-viewer.details.vue b/packages/client/src/components/reactions-viewer.details.vue index 63c22b98c4..d6374517a2 100644 --- a/packages/client/src/components/reactions-viewer.details.vue +++ b/packages/client/src/components/reactions-viewer.details.vue @@ -62,6 +62,7 @@ export default defineComponent({ > .icon { display: block; width: 60px; + font-size: 60px; // unicodeな絵文字についてはwidthが効かないため margin: 0 auto; } diff --git a/packages/client/src/components/reactions-viewer.reaction.vue b/packages/client/src/components/reactions-viewer.reaction.vue index 65f92c39ee..44c6e98093 100644 --- a/packages/client/src/components/reactions-viewer.reaction.vue +++ b/packages/client/src/components/reactions-viewer.reaction.vue @@ -97,9 +97,7 @@ export default defineComponent({ limit: 11 }); - const users = reactions - .sort((a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()) - .map(x => x.user); + const users = reactions.map(x => x.user); os.popup(XDetails, { showing, diff --git a/packages/client/src/components/renote-button.vue b/packages/client/src/components/renote-button.vue index 62780cacea..280283ec67 100644 --- a/packages/client/src/components/renote-button.vue +++ b/packages/client/src/components/renote-button.vue @@ -48,9 +48,7 @@ export default defineComponent({ limit: 11 }); - const users = renotes - .sort((a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()) - .map(x => x.user); + const users = renotes.map(x => x.user); if (users.length < 1) return; diff --git a/packages/client/src/components/signin.vue b/packages/client/src/components/signin.vue index 51913f7a23..f640e948ad 100644 --- a/packages/client/src/components/signin.vue +++ b/packages/client/src/components/signin.vue @@ -197,6 +197,14 @@ export default defineComponent({ }); break; } + case '932c904e-9460-45b7-9ce6-7ed33be7eb2c': { + os.alert({ + type: 'error', + title: this.$ts.loginFailed, + text: this.$ts.incorrectPassword, + }); + break; + } case 'e03a5f46-d309-4865-9b69-56282d94e1eb': { showSuspendedDialog(); break; diff --git a/packages/client/src/components/ui/button.vue b/packages/client/src/components/ui/button.vue index b5f4547c84..804a2e2720 100644 --- a/packages/client/src/components/ui/button.vue +++ b/packages/client/src/components/ui/button.vue @@ -142,12 +142,12 @@ export default defineComponent({ padding: 8px 14px; text-align: center; font-weight: normal; - font-size: 0.8em; + font-size: 0.9em; line-height: 22px; box-shadow: none; text-decoration: none; background: var(--buttonBg); - border-radius: 4px; + border-radius: 5px; overflow: clip; box-sizing: border-box; transition: background 0.1s ease; diff --git a/packages/client/src/components/ui/menu.vue b/packages/client/src/components/ui/menu.vue index 0e237432ae..687ce5e548 100644 --- a/packages/client/src/components/ui/menu.vue +++ b/packages/client/src/components/ui/menu.vue @@ -2,7 +2,7 @@ <div ref="items" v-hotkey="keymap" class="rrevdjwt" :class="{ center: align === 'center' }" - :style="{ width: width ? width + 'px' : null }" + :style="{ width: width ? width + 'px' : null, maxHeight: maxHeight ? maxHeight + 'px' : null }" @contextmenu.self="e => e.preventDefault()" > <template v-for="(item, i) in items2"> @@ -64,6 +64,10 @@ export default defineComponent({ type: Number, required: false }, + maxHeight: { + type: Number, + required: false + }, }, emits: ['close'], data() { @@ -146,9 +150,10 @@ export default defineComponent({ <style lang="scss" scoped> .rrevdjwt { padding: 8px 0; + box-sizing: border-box; min-width: 200px; - max-height: 90vh; overflow: auto; + overscroll-behavior: contain; &.center { > .item { diff --git a/packages/client/src/components/ui/popup-menu.vue b/packages/client/src/components/ui/popup-menu.vue index ae2c044282..93bafddaee 100644 --- a/packages/client/src/components/ui/popup-menu.vue +++ b/packages/client/src/components/ui/popup-menu.vue @@ -1,6 +1,6 @@ <template> -<MkPopup ref="popup" :src="src" @closed="$emit('closed')"> - <MkMenu :items="items" :align="align" :width="width" class="_popup _shadow" @close="$refs.popup.close()"/> +<MkPopup ref="popup" v-slot="{ maxHeight, close }" :src="src" @closed="$emit('closed')"> + <MkMenu :items="items" :align="align" :width="width" :max-height="maxHeight" class="_popup _shadow" @close="close()"/> </MkPopup> </template> diff --git a/packages/client/src/components/ui/popup.vue b/packages/client/src/components/ui/popup.vue index 77e928542d..2374de2eaf 100644 --- a/packages/client/src/components/ui/popup.vue +++ b/packages/client/src/components/ui/popup.vue @@ -1,15 +1,15 @@ <template> -<transition :name="$store.state.animation ? 'popup-menu' : ''" appear @after-leave="onClosed" @enter="$emit('opening')" @after-enter="childRendered"> +<transition :name="$store.state.animation ? 'popup-menu' : ''" appear @after-leave="$emit('closed')" @enter="$emit('opening')"> <div v-show="manualShowing != null ? manualShowing : showing" ref="content" class="ccczpooj" :class="{ front, fixed, top: position === 'top' }" :style="{ pointerEvents: (manualShowing != null ? manualShowing : showing) ? 'auto' : 'none', '--transformOrigin': transformOrigin }"> - <slot></slot> + <slot :max-height="maxHeight" :close="close"></slot> </div> </transition> </template> <script lang="ts"> -import { defineComponent, PropType } from 'vue'; +import { defineComponent, nextTick, onMounted, onUnmounted, PropType, ref, watch } from 'vue'; -function getFixedContainer(el: Element | null): Element | null { +function getFixedContainer(el: Element | null | undefined): Element | null { if (el == null || el.tagName === 'BODY') return null; const position = window.getComputedStyle(el).getPropertyValue('position'); if (position === 'fixed') { @@ -41,55 +41,40 @@ export default defineComponent({ type: Boolean, required: false, default: false, - } + }, + noOverlap: { + type: Boolean, + required: false, + default: true, + }, }, emits: ['opening', 'click', 'esc', 'close', 'closed'], - data() { - return { - showing: true, - fixed: false, - transformOrigin: 'center', - contentClicking: false, - }; - }, - - mounted() { - this.$watch('src', () => { - if (this.src) { - // eslint-disable-next-line vue/no-mutating-props - 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); - }); + setup(props, context) { + const maxHeight = ref<number>(); + const fixed = ref(false); + const transformOrigin = ref('center'); + const showing = ref(true); + const content = ref<HTMLElement>(); - document.addEventListener('mousedown', this.onDocumentClick, { passive: true }); - }, + const close = () => { + // eslint-disable-next-line vue/no-mutating-props + if (props.src) props.src.style.pointerEvents = 'auto'; + showing.value = false; + context.emit('close'); + }; - beforeUnmount() { - document.removeEventListener('mousedown', this.onDocumentClick); - }, + const MARGIN = 16; - methods: { - align() { - if (this.src == null) return; + const align = () => { + if (props.src == null) return; - const popover = this.$refs.content as any; + const popover = content.value!; if (popover == null) return; - const rect = this.src.getBoundingClientRect(); + const rect = props.src.getBoundingClientRect(); const width = popover.offsetWidth; const height = popover.offsetHeight; @@ -97,81 +82,84 @@ export default defineComponent({ 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); + if (props.srcCenter) { + const x = rect.left + (fixed.value ? 0 : window.pageXOffset) + (props.src.offsetWidth / 2); + const y = rect.top + (fixed.value ? 0 : window.pageYOffset) + (props.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; + const x = rect.left + (fixed.value ? 0 : window.pageXOffset) + (props.src.offsetWidth / 2); + const y = rect.top + (fixed.value ? 0 : window.pageYOffset) + props.src.offsetHeight; left = (x - (width / 2)); top = y; } - if (this.fixed) { + if (fixed.value) { + // 画面から横にはみ出る場合 if (left + width > window.innerWidth) { left = window.innerWidth - width; } - if (top + height > window.innerHeight) { - top = window.innerHeight - height; + // 画面から縦にはみ出る場合 + if (top + height > (window.innerHeight - MARGIN)) { + if (props.noOverlap) { + const underSpace = (window.innerHeight - MARGIN) - top; + const upperSpace = (rect.top - MARGIN); + if (underSpace >= (upperSpace / 3)) { + maxHeight.value = underSpace; + } else { + maxHeight.value = upperSpace; + top = (upperSpace + MARGIN) - height; + } + } else { + top = (window.innerHeight - MARGIN) - 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 + height - window.pageYOffset > (window.innerHeight - MARGIN)) { + if (props.noOverlap) { + const underSpace = (window.innerHeight - MARGIN) - (top - window.pageYOffset); + const upperSpace = (rect.top - MARGIN); + if (underSpace >= (upperSpace / 3)) { + maxHeight.value = underSpace; + } else { + maxHeight.value = upperSpace; + top = window.pageYOffset + ((upperSpace + MARGIN) - height); + } + } else { + top = (window.innerHeight - MARGIN) - height + window.pageYOffset - 1; + } } } if (top < 0) { - top = 0; + top = MARGIN; } if (left < 0) { left = 0; } - if (top > rect.top + (this.fixed ? 0 : window.pageYOffset)) { - this.transformOrigin = 'center top'; + if (top > rect.top + (fixed.value ? 0 : window.pageYOffset)) { + transformOrigin.value = 'center top'; + } else if ((top + height) <= rect.top + (fixed.value ? 0 : window.pageYOffset)) { + transformOrigin.value = 'center bottom'; } else { - this.transformOrigin = 'center'; + transformOrigin.value = '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() { - // eslint-disable-next-line vue/no-mutating-props - 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; + const onDocumentClick = (ev: MouseEvent) => { + const flyoutElement = content.value; let targetElement = ev.target; do { if (targetElement === flyoutElement) { @@ -179,9 +167,45 @@ export default defineComponent({ } targetElement = targetElement.parentNode; } while (targetElement); - this.close(); - } - } + close(); + }; + + onMounted(() => { + watch(() => props.src, async () => { + if (props.src) { + // eslint-disable-next-line vue/no-mutating-props + props.src.style.pointerEvents = 'none'; + } + fixed.value = getFixedContainer(props.src) != null; + + await nextTick() + + align(); + }, { immediate: true, }); + + nextTick(() => { + const popover = content.value; + new ResizeObserver((entries, observer) => { + align(); + }).observe(popover!); + }); + + document.addEventListener('mousedown', onDocumentClick, { passive: true }); + + onUnmounted(() => { + document.removeEventListener('mousedown', onDocumentClick); + }); + }); + + return { + showing, + fixed, + content, + transformOrigin, + maxHeight, + close, + }; + }, }); </script> diff --git a/packages/client/src/components/ui/super-menu.vue b/packages/client/src/components/ui/super-menu.vue index b438d5dbc8..63a1d7063d 100644 --- a/packages/client/src/components/ui/super-menu.vue +++ b/packages/client/src/components/ui/super-menu.vue @@ -51,9 +51,8 @@ export default defineComponent({ } > .title { - font-size: 0.9em; opacity: 0.7; - margin: 0 0 8px 12px; + margin: 0 0 8px 0; } > .items { @@ -64,7 +63,6 @@ export default defineComponent({ box-sizing: border-box; padding: 10px 16px 10px 8px; border-radius: 9px; - font-size: 0.9em; &:hover { text-decoration: none; diff --git a/packages/client/src/components/ui/tooltip.vue b/packages/client/src/components/ui/tooltip.vue index dbc1a1c9b7..2a63c207fd 100644 --- a/packages/client/src/components/ui/tooltip.vue +++ b/packages/client/src/components/ui/tooltip.vue @@ -1,13 +1,13 @@ <template> <transition name="tooltip" appear @after-leave="$emit('closed')"> - <div v-show="showing" ref="content" class="buebdbiu _acrylic _shadow" :style="{ maxWidth: maxWidth + 'px' }"> + <div v-show="showing" ref="el" class="buebdbiu _acrylic _shadow" :style="{ maxWidth: maxWidth + 'px' }"> <slot>{{ text }}</slot> </div> </transition> </template> <script lang="ts"> -import { defineComponent } from 'vue'; +import { defineComponent, nextTick, onMounted, onUnmounted, ref } from 'vue'; export default defineComponent({ props: { @@ -31,35 +31,64 @@ export default defineComponent({ emits: ['closed'], - mounted() { - this.$nextTick(() => { - if (this.source == null) { - this.$emit('closed'); - return; - } + setup(props, context) { + const el = ref<HTMLElement>(); + + const setPosition = () => { + if (el.value == null) return; - const rect = this.source.getBoundingClientRect(); + const rect = props.source.getBoundingClientRect(); - const contentWidth = this.$refs.content.offsetWidth; - const contentHeight = this.$refs.content.offsetHeight; + const contentWidth = el.value.offsetWidth; + const contentHeight = el.value.offsetHeight; - let left = rect.left + window.pageXOffset + (this.source.offsetWidth / 2); + let left = rect.left + window.pageXOffset + (props.source.offsetWidth / 2); let top = rect.top + window.pageYOffset - contentHeight; - left -= (this.$el.offsetWidth / 2); + left -= (el.value.offsetWidth / 2); if (left + contentWidth - window.pageXOffset > window.innerWidth) { left = window.innerWidth - contentWidth + window.pageXOffset - 1; } if (top - window.pageYOffset < 0) { - top = rect.top + window.pageYOffset + this.source.offsetHeight; - this.$refs.content.style.transformOrigin = 'center top'; + top = rect.top + window.pageYOffset + props.source.offsetHeight; + el.value.style.transformOrigin = 'center top'; } - this.$el.style.left = left + 'px'; - this.$el.style.top = top + 'px'; + el.value.style.left = left + 'px'; + el.value.style.top = top + 'px'; + }; + + onMounted(() => { + nextTick(() => { + if (props.source == null) { + context.emit('closed'); + return; + } + + setPosition(); + + let loopHandler; + + const loop = () => { + loopHandler = window.requestAnimationFrame(() => { + setPosition(); + loop(); + }); + }; + + loop(); + + onUnmounted(() => { + window.cancelAnimationFrame(loopHandler); + }); + }); }); + + return { + el, + }; }, }) </script> diff --git a/packages/client/src/directives/index.ts b/packages/client/src/directives/index.ts index cd71bc26d3..4b11bb6213 100644 --- a/packages/client/src/directives/index.ts +++ b/packages/client/src/directives/index.ts @@ -10,6 +10,7 @@ import appear from './appear'; import anim from './anim'; import stickyContainer from './sticky-container'; import clickAnime from './click-anime'; +import panel from './panel'; export default function(app: App) { app.directive('userPreview', userPreview); @@ -23,4 +24,5 @@ export default function(app: App) { app.directive('anim', anim); app.directive('click-anime', clickAnime); app.directive('sticky-container', stickyContainer); + app.directive('panel', panel); } diff --git a/packages/client/src/directives/panel.ts b/packages/client/src/directives/panel.ts new file mode 100644 index 0000000000..86ec2a9116 --- /dev/null +++ b/packages/client/src/directives/panel.ts @@ -0,0 +1,24 @@ +import { Directive } from 'vue'; + +export default { + mounted(src, binding, vn) { + const getBgColor = (el: HTMLElement) => { + const style = window.getComputedStyle(el); + if (style.backgroundColor && !['rgba(0, 0, 0, 0)', 'rgba(0,0,0,0)', 'transparent'].includes(style.backgroundColor)) { + return style.backgroundColor; + } else { + return getBgColor(el.parentElement); + } + } + + const parentBg = getBgColor(src.parentElement); + + const myBg = getComputedStyle(document.documentElement).getPropertyValue('--panel'); + + if (parentBg === myBg) { + src.style.backgroundColor = 'var(--bg)'; + } else { + src.style.backgroundColor = 'var(--panel)'; + } + }, +} as Directive; diff --git a/packages/client/src/directives/tooltip.ts b/packages/client/src/directives/tooltip.ts index b96671be35..0e36322cd9 100644 --- a/packages/client/src/directives/tooltip.ts +++ b/packages/client/src/directives/tooltip.ts @@ -1,3 +1,6 @@ +// TODO: useTooltip関数使うようにしたい +// ただディレクティブ内でonUnmountedなどのcomposition api使えるのか不明 + import { Directive, ref } from 'vue'; import { isDeviceTouch } from '@/scripts/is-device-touch'; import { popup, alert } from '@/os'; diff --git a/packages/client/src/filters/note.ts b/packages/client/src/filters/note.ts index 5c000cf83b..cd9b7d98d2 100644 --- a/packages/client/src/filters/note.ts +++ b/packages/client/src/filters/note.ts @@ -1,3 +1,3 @@ -export default note => { +export const notePage = note => { return `/notes/${note.id}`; }; diff --git a/packages/client/src/menu.ts b/packages/client/src/menu.ts index ae74740bb8..bd155ba16d 100644 --- a/packages/client/src/menu.ts +++ b/packages/client/src/menu.ts @@ -1,4 +1,4 @@ -import { computed, ref } from 'vue'; +import { computed, ref, reactive } from 'vue'; import { search } from '@/scripts/search'; import * as os from '@/os'; import { i18n } from '@/i18n'; @@ -7,7 +7,7 @@ import { $i } from './account'; import { unisonReload } from '@/scripts/unison-reload'; import { router } from './router'; -export const menuDef = { +export const menuDef = reactive({ notifications: { title: 'notifications', icon: 'fas fa-bell', @@ -221,4 +221,4 @@ export const menuDef = { }*/], ev.currentTarget || ev.target); }, }, -}; +}); diff --git a/packages/client/src/os.ts b/packages/client/src/os.ts index 9eac06a5e3..37b57557c3 100644 --- a/packages/client/src/os.ts +++ b/packages/client/src/os.ts @@ -12,6 +12,16 @@ import { resolve } from '@/router'; import { $i } from '@/account'; import { defaultStore } from '@/store'; +export let isScreenTouching = false; + +window.addEventListener('touchstart', () => { + isScreenTouching = true; +}, { passive: true }); + +window.addEventListener('touchend', () => { + isScreenTouching = false; +}, { passive: true }); + export const stream = markRaw(new Misskey.Stream(url, $i)); export const pendingApiRequestsCount = ref(0); @@ -214,6 +224,10 @@ export function modalPageWindow(path: string) { }, {}, 'closed'); } +export function toast(message: string) { + // TODO +} + export function alert(props: { type?: 'error' | 'info' | 'success' | 'warning' | 'waiting' | 'question'; title?: string | null; @@ -542,7 +556,7 @@ export function contextMenu(items: any[], ev: MouseEvent) { }); } -export function post(props: Record<string, any>) { +export function post(props: Record<string, any> = {}) { return new Promise((resolve, reject) => { // NOTE: MkPostFormDialogをdynamic importするとiOSでテキストエリアに自動フォーカスできない // NOTE: ただ、dynamic importしない場合、MkPostFormDialogインスタンスが使いまわされ、 diff --git a/packages/client/src/pages/about-misskey.vue b/packages/client/src/pages/about-misskey.vue index c5c4ce9ef2..d1d4c54af5 100644 --- a/packages/client/src/pages/about-misskey.vue +++ b/packages/client/src/pages/about-misskey.vue @@ -1,64 +1,67 @@ <template> <div style="overflow: clip;"> - <FormBase class="znqjceqz"> - <div id="debug"></div> - <section class="_debobigegoItem about"> - <div ref="about" class="_debobigegoPanel panel" :class="{ playing: easterEggEngine != null }"> + <MkSpacer :content-max="600" :margin-min="20"> + <div class="_formRoot znqjceqz"> + <div id="debug"></div> + <div ref="about" v-panel class="_formBlock about" :class="{ playing: easterEggEngine != null }"> <img src="/client-assets/about-icon.png" alt="" class="icon" draggable="false" @load="iconLoaded" @click="gravity"/> <div class="misskey">Misskey</div> <div class="version">v{{ version }}</div> <span v-for="emoji in easterEggEmojis" :key="emoji.id" class="emoji" :data-physics-x="emoji.left" :data-physics-y="emoji.top" :class="{ _physics_circle_: !emoji.emoji.startsWith(':') }"><MkEmoji class="emoji" :emoji="emoji.emoji" :custom-emojis="$instance.emojis" :is-reaction="false" :normal="true" :no-style="true"/></span> </div> - </section> - <section class="_debobigegoItem" style="text-align: center; padding: 0 16px;"> - {{ $ts._aboutMisskey.about }}<br><a href="https://misskey-hub.net/docs/misskey.html" target="_blank" class="_link">{{ $ts.learnMore }}</a> - </section> - <FormGroup> - <FormLink to="https://github.com/misskey-dev/misskey" external> - <template #icon><i class="fas fa-code"></i></template> - {{ $ts._aboutMisskey.source }} - <template #suffix>GitHub</template> - </FormLink> - <FormLink to="https://crowdin.com/project/misskey" external> - <template #icon><i class="fas fa-language"></i></template> - {{ $ts._aboutMisskey.translation }} - <template #suffix>Crowdin</template> - </FormLink> - <FormLink to="https://www.patreon.com/syuilo" external> - <template #icon><i class="fas fa-hand-holding-medical"></i></template> - {{ $ts._aboutMisskey.donate }} - <template #suffix>Patreon</template> - </FormLink> - </FormGroup> - <FormGroup> - <template #label>{{ $ts._aboutMisskey.contributors }}</template> - <FormLink to="https://github.com/syuilo" external>@syuilo</FormLink> - <FormLink to="https://github.com/AyaMorisawa" external>@AyaMorisawa</FormLink> - <FormLink to="https://github.com/mei23" external>@mei23</FormLink> - <FormLink to="https://github.com/acid-chicken" external>@acid-chicken</FormLink> - <FormLink to="https://github.com/tamaina" external>@tamaina</FormLink> - <FormLink to="https://github.com/rinsuki" external>@rinsuki</FormLink> - <FormLink to="https://github.com/Xeltica" external>@Xeltica</FormLink> - <FormLink to="https://github.com/u1-liquid" external>@u1-liquid</FormLink> - <FormLink to="https://github.com/marihachi" external>@marihachi</FormLink> - <template #caption><MkLink url="https://github.com/misskey-dev/misskey/graphs/contributors">{{ $ts._aboutMisskey.allContributors }}</MkLink></template> - </FormGroup> - <FormGroup> - <template #label><Mfm text="[jelly ❤]"/> {{ $ts._aboutMisskey.patrons }}</template> - <FormKeyValueView v-for="patron in patrons" :key="patron"><template #key>{{ patron }}</template></FormKeyValueView> - <template #caption>{{ $ts._aboutMisskey.morePatrons }}</template> - </FormGroup> - </FormBase> + <div class="_formBlock" style="text-align: center;"> + {{ $ts._aboutMisskey.about }}<br><a href="https://misskey-hub.net/docs/misskey.html" target="_blank" class="_link">{{ $ts.learnMore }}</a> + </div> + <FormSection> + <div class="_formLinks"> + <FormLink to="https://github.com/misskey-dev/misskey" external> + <template #icon><i class="fas fa-code"></i></template> + {{ $ts._aboutMisskey.source }} + <template #suffix>GitHub</template> + </FormLink> + <FormLink to="https://crowdin.com/project/misskey" external> + <template #icon><i class="fas fa-language"></i></template> + {{ $ts._aboutMisskey.translation }} + <template #suffix>Crowdin</template> + </FormLink> + <FormLink to="https://www.patreon.com/syuilo" external> + <template #icon><i class="fas fa-hand-holding-medical"></i></template> + {{ $ts._aboutMisskey.donate }} + <template #suffix>Patreon</template> + </FormLink> + </div> + </FormSection> + <FormSection> + <template #label>{{ $ts._aboutMisskey.contributors }}</template> + <div class="_formLinks"> + <FormLink to="https://github.com/syuilo" external>@syuilo</FormLink> + <FormLink to="https://github.com/AyaMorisawa" external>@AyaMorisawa</FormLink> + <FormLink to="https://github.com/mei23" external>@mei23</FormLink> + <FormLink to="https://github.com/acid-chicken" external>@acid-chicken</FormLink> + <FormLink to="https://github.com/tamaina" external>@tamaina</FormLink> + <FormLink to="https://github.com/rinsuki" external>@rinsuki</FormLink> + <FormLink to="https://github.com/Xeltica" external>@Xeltica</FormLink> + <FormLink to="https://github.com/u1-liquid" external>@u1-liquid</FormLink> + <FormLink to="https://github.com/marihachi" external>@marihachi</FormLink> + </div> + <template #caption><MkLink url="https://github.com/misskey-dev/misskey/graphs/contributors">{{ $ts._aboutMisskey.allContributors }}</MkLink></template> + </FormSection> + <FormSection> + <template #label><Mfm text="$[jelly ❤]"/> {{ $ts._aboutMisskey.patrons }}</template> + <div v-for="patron in patrons" :key="patron">{{ patron }}</div> + <template #caption>{{ $ts._aboutMisskey.morePatrons }}</template> + </FormSection> + </div> + </MkSpacer> </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; import { version } from '@/config'; -import FormLink from '@/components/debobigego/link.vue'; -import FormBase from '@/components/debobigego/base.vue'; -import FormGroup from '@/components/debobigego/group.vue'; -import FormKeyValueView from '@/components/debobigego/key-value-view.vue'; +import FormLink from '@/components/form/link.vue'; +import FormSection from '@/components/form/section.vue'; +import MkKeyValue from '@/components/key-value.vue'; import MkLink from '@/components/link.vue'; import { physics } from '@/scripts/physics'; import * as symbols from '@/symbols'; @@ -122,10 +125,9 @@ const patrons = [ export default defineComponent({ components: { - FormBase, - FormGroup, + FormSection, FormLink, - FormKeyValueView, + MkKeyValue, MkLink, }, @@ -178,59 +180,54 @@ export default defineComponent({ <style lang="scss" scoped> .znqjceqz { - max-width: 800px; - box-sizing: border-box; - margin: 0 auto; - > .about { - > .panel { - position: relative; - text-align: center; - padding: 16px; - - &.playing { - &, * { - user-select: none; - } - - * { - will-change: transform; - } + position: relative; + text-align: center; + padding: 16px; + border-radius: var(--radius); - > .emoji { - visibility: visible; - } + &.playing { + &, * { + user-select: none; } - > .icon { - display: block; - width: 100px; - margin: 0 auto; - border-radius: 16px; + * { + will-change: transform; } - > .misskey { - margin: 0.75em auto 0 auto; - width: max-content; + > .emoji { + visibility: visible; } + } - > .version { - margin: 0 auto; - width: max-content; - opacity: 0.5; - } + > .icon { + display: block; + width: 100px; + margin: 0 auto; + border-radius: 16px; + } - > .emoji { - position: absolute; - top: 0; - left: 0; - visibility: hidden; + > .misskey { + margin: 0.75em auto 0 auto; + width: max-content; + } - > .emoji { - pointer-events: none; - font-size: 24px; - width: 24px; - } + > .version { + margin: 0 auto; + width: max-content; + opacity: 0.5; + } + + > .emoji { + position: absolute; + top: 0; + left: 0; + visibility: hidden; + + > .emoji { + pointer-events: none; + font-size: 24px; + width: 24px; } } } diff --git a/packages/client/src/pages/about.vue b/packages/client/src/pages/about.vue index dbdf0f6d91..a3a3d3cfb7 100644 --- a/packages/client/src/pages/about.vue +++ b/packages/client/src/pages/about.vue @@ -1,70 +1,80 @@ <template> -<FormBase> - <div class="_debobigegoItem"> - <div class="_debobigegoPanel fwhjspax"> - <img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" alt="" class="icon"/> - <span class="name">{{ $instance.name || host }}</span> +<MkSpacer :content-max="600" :margin-min="20"> + <div class="_formRoot"> + <div class="_formBlock fwhjspax" :style="{ backgroundImage: `url(${ $instance.bannerUrl })` }"> + <div class="content"> + <img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" alt="" class="icon"/> + <div class="name"> + <b>{{ $instance.name || host }}</b> + </div> + </div> </div> - </div> - <FormTextarea readonly :value="$instance.description"> - </FormTextarea> + <MkKeyValue class="_formBlock"> + <template #key>{{ $ts.description }}</template> + <template #value>{{ $instance.description }}</template> + </MkKeyValue> - <FormGroup> - <FormKeyValueView> - <template #key>Misskey</template> - <template #value>v{{ version }}</template> - </FormKeyValueView> - <FormLink to="/about-misskey">{{ $ts.aboutMisskey }}</FormLink> - </FormGroup> + <FormSection> + <MkKeyValue class="_formBlock" :copy="version"> + <template #key>Misskey</template> + <template #value>{{ version }}</template> + </MkKeyValue> + <FormLink to="/about-misskey">{{ $ts.aboutMisskey }}</FormLink> + </FormSection> - <FormGroup> - <FormKeyValueView> - <template #key>{{ $ts.administrator }}</template> - <template #value>{{ $instance.maintainerName }}</template> - </FormKeyValueView> - <FormKeyValueView> - <template #key>{{ $ts.contact }}</template> - <template #value>{{ $instance.maintainerEmail }}</template> - </FormKeyValueView> - </FormGroup> + <FormSection> + <div class="_inputSplit"> + <MkKeyValue class="_formBlock"> + <template #key>{{ $ts.administrator }}</template> + <template #value>{{ $instance.maintainerName }}</template> + </MkKeyValue> + <MkKeyValue class="_formBlock"> + <template #key>{{ $ts.contact }}</template> + <template #value>{{ $instance.maintainerEmail }}</template> + </MkKeyValue> + </div> + </FormSection> - <FormLink v-if="$instance.tosUrl" :to="$instance.tosUrl" external>{{ $ts.tos }}</FormLink> + <FormLink v-if="$instance.tosUrl" :to="$instance.tosUrl" external>{{ $ts.tos }}</FormLink> - <FormSuspense :p="initStats"> - <FormGroup> - <template #label>{{ $ts.statistics }}</template> - <FormKeyValueView> - <template #key>{{ $ts.users }}</template> - <template #value>{{ number(stats.originalUsersCount) }}</template> - </FormKeyValueView> - <FormKeyValueView> - <template #key>{{ $ts.notes }}</template> - <template #value>{{ number(stats.originalNotesCount) }}</template> - </FormKeyValueView> - </FormGroup> - </FormSuspense> + <FormSuspense :p="initStats"> + <FormSection> + <template #label>{{ $ts.statistics }}</template> + <div class="_inputSplit"> + <MkKeyValue class="_formBlock"> + <template #key>{{ $ts.users }}</template> + <template #value>{{ number(stats.originalUsersCount) }}</template> + </MkKeyValue> + <MkKeyValue class="_formBlock"> + <template #key>{{ $ts.notes }}</template> + <template #value>{{ number(stats.originalNotesCount) }}</template> + </MkKeyValue> + </div> + </FormSection> + </FormSuspense> - <FormGroup> - <template #label>Well-known resources</template> - <FormLink :to="`/.well-known/host-meta`" external>host-meta</FormLink> - <FormLink :to="`/.well-known/host-meta.json`" external>host-meta.json</FormLink> - <FormLink :to="`/.well-known/nodeinfo`" external>nodeinfo</FormLink> - <FormLink :to="`/robots.txt`" external>robots.txt</FormLink> - <FormLink :to="`/manifest.json`" external>manifest.json</FormLink> - </FormGroup> -</FormBase> + <FormSection> + <template #label>Well-known resources</template> + <div class="_formLinks"> + <FormLink :to="`/.well-known/host-meta`" external>host-meta</FormLink> + <FormLink :to="`/.well-known/host-meta.json`" external>host-meta.json</FormLink> + <FormLink :to="`/.well-known/nodeinfo`" external>nodeinfo</FormLink> + <FormLink :to="`/robots.txt`" external>robots.txt</FormLink> + <FormLink :to="`/manifest.json`" external>manifest.json</FormLink> + </div> + </FormSection> + </div> +</MkSpacer> </template> <script lang="ts"> import { defineComponent } from 'vue'; import { version, instanceName } from '@/config'; -import FormLink from '@/components/debobigego/link.vue'; -import FormBase from '@/components/debobigego/base.vue'; -import FormGroup from '@/components/debobigego/group.vue'; -import FormKeyValueView from '@/components/debobigego/key-value-view.vue'; -import FormTextarea from '@/components/debobigego/textarea.vue'; -import FormSuspense from '@/components/debobigego/suspense.vue'; +import FormLink from '@/components/form/link.vue'; +import FormSection from '@/components/form/section.vue'; +import FormSuspense from '@/components/form/suspense.vue'; +import MkKeyValue from '@/components/key-value.vue'; import * as os from '@/os'; import number from '@/filters/number'; import * as symbols from '@/symbols'; @@ -72,11 +82,9 @@ import { host } from '@/config'; export default defineComponent({ components: { - FormBase, - FormGroup, + MkKeyValue, + FormSection, FormLink, - FormKeyValueView, - FormTextarea, FormSuspense, }, @@ -105,19 +113,29 @@ export default defineComponent({ <style lang="scss" scoped> .fwhjspax { - padding: 16px; text-align: center; + border-radius: 10px; + overflow: clip; + background-size: cover; + background-position: center center; - > .icon { - display: block; - margin: auto; - height: 64px; - border-radius: 8px; - } + > .content { + overflow: hidden; - > .name { - display: block; - margin-top: 12px; + > .icon { + display: block; + margin: 16px auto 0 auto; + height: 64px; + border-radius: 8px; + } + + > .name { + display: block; + padding: 16px; + color: #fff; + text-shadow: 0 0 8px #000; + background: linear-gradient(transparent, rgba(0, 0, 0, 0.7)); + } } } </style> diff --git a/packages/client/src/pages/admin/abuses.vue b/packages/client/src/pages/admin/abuses.vue index ff1c4c57fc..8df20097b3 100644 --- a/packages/client/src/pages/admin/abuses.vue +++ b/packages/client/src/pages/admin/abuses.vue @@ -33,7 +33,7 @@ </div> --> - <MkPagination #default="{items}" ref="reports" :pagination="pagination" style="margin-top: var(--margin);"> + <MkPagination v-slot="{items}" ref="reports" :pagination="pagination" style="margin-top: var(--margin);"> <div v-for="report in items" :key="report.id" class="bcekxzvu _card _gap"> <div class="_content target"> <MkAvatar class="avatar" :user="report.targetUser" :show-indicator="true"/> diff --git a/packages/client/src/pages/admin/emojis.vue b/packages/client/src/pages/admin/emojis.vue index 6f9a955da2..9c9b3b2d4f 100644 --- a/packages/client/src/pages/admin/emojis.vue +++ b/packages/client/src/pages/admin/emojis.vue @@ -7,7 +7,7 @@ </MkInput> <MkPagination ref="emojis" :pagination="pagination"> <template #empty><span>{{ $ts.noCustomEmojis }}</span></template> - <template #default="{items}"> + <template v-slot="{items}"> <div class="ldhfsamy"> <button v-for="emoji in items" :key="emoji.id" class="emoji _panel _button" @click="edit(emoji)"> <img :src="emoji.url" class="img" :alt="emoji.name"/> @@ -31,7 +31,7 @@ </MkInput> <MkPagination ref="remoteEmojis" :pagination="remotePagination"> <template #empty><span>{{ $ts.noCustomEmojis }}</span></template> - <template #default="{items}"> + <template v-slot="{items}"> <div class="ldhfsamy"> <div v-for="emoji in items" :key="emoji.id" class="emoji _panel _button" @click="remoteMenu(emoji, $event)"> <img :src="emoji.url" class="img" :alt="emoji.name"/> diff --git a/packages/client/src/pages/admin/files.vue b/packages/client/src/pages/admin/files.vue index a6b0f8e59e..032e394a66 100644 --- a/packages/client/src/pages/admin/files.vue +++ b/packages/client/src/pages/admin/files.vue @@ -28,7 +28,7 @@ <template #label>MIME type</template> </MkInput> </div> - <MkPagination #default="{items}" ref="files" :pagination="pagination" class="urempief"> + <MkPagination v-slot="{items}" ref="files" :pagination="pagination" class="urempief"> <button v-for="file in items" :key="file.id" class="file _panel _button _gap" @click="show(file, $event)"> <MkDriveFileThumbnail class="thumbnail" :file="file" fit="contain"/> <div class="body"> diff --git a/packages/client/src/pages/admin/users.vue b/packages/client/src/pages/admin/users.vue index 016a013e51..e7a3437167 100644 --- a/packages/client/src/pages/admin/users.vue +++ b/packages/client/src/pages/admin/users.vue @@ -36,7 +36,7 @@ </MkInput> </div> - <MkPagination #default="{items}" ref="users" :pagination="pagination" class="users"> + <MkPagination v-slot="{items}" ref="users" :pagination="pagination" class="users"> <button v-for="user in items" :key="user.id" class="user _panel _button _gap" @click="show(user)"> <MkAvatar class="avatar" :user="user" :disable-link="true" :show-indicator="true"/> <div class="body"> diff --git a/packages/client/src/pages/announcements.vue b/packages/client/src/pages/announcements.vue index 34879a18bd..ca94640dda 100644 --- a/packages/client/src/pages/announcements.vue +++ b/packages/client/src/pages/announcements.vue @@ -1,6 +1,6 @@ <template> <MkSpacer :content-max="800"> - <MkPagination #default="{items}" :pagination="pagination" class="ruryvtyk _content"> + <MkPagination v-slot="{items}" :pagination="pagination" class="ruryvtyk _content"> <section v-for="(announcement, i) in items" :key="announcement.id" class="_card announcement"> <div class="_title"><span v-if="$i && !announcement.isRead">🆕 </span>{{ announcement.title }}</div> <div class="_content"> diff --git a/packages/client/src/pages/channels.vue b/packages/client/src/pages/channels.vue index a7bd8a018c..a08c273279 100644 --- a/packages/client/src/pages/channels.vue +++ b/packages/client/src/pages/channels.vue @@ -10,20 +10,20 @@ <div class="_section"> <div v-if="tab === 'featured'" class="_content grwlizim featured"> - <MkPagination #default="{items}" :pagination="featuredPagination"> + <MkPagination v-slot="{items}" :pagination="featuredPagination"> <MkChannelPreview v-for="channel in items" :key="channel.id" class="_gap" :channel="channel"/> </MkPagination> </div> <div v-if="tab === 'following'" class="_content grwlizim following"> - <MkPagination #default="{items}" :pagination="followingPagination"> + <MkPagination v-slot="{items}" :pagination="followingPagination"> <MkChannelPreview v-for="channel in items" :key="channel.id" class="_gap" :channel="channel"/> </MkPagination> </div> <div v-if="tab === 'owned'" class="_content grwlizim owned"> <MkButton class="new" @click="create()"><i class="fas fa-plus"></i></MkButton> - <MkPagination #default="{items}" :pagination="ownedPagination"> + <MkPagination v-slot="{items}" :pagination="ownedPagination"> <MkChannelPreview v-for="channel in items" :key="channel.id" class="_gap" :channel="channel"/> </MkPagination> </div> diff --git a/packages/client/src/pages/federation.vue b/packages/client/src/pages/federation.vue index 398619d3be..4e5f428ff9 100644 --- a/packages/client/src/pages/federation.vue +++ b/packages/client/src/pages/federation.vue @@ -1,96 +1,98 @@ <template> -<div class="taeiyria"> - <div class="query"> - <MkInput v-model="host" :debounce="true" class=""> - <template #prefix><i class="fas fa-search"></i></template> - <template #label>{{ $ts.host }}</template> - </MkInput> - <div class="_inputSplit"> - <MkSelect v-model="state"> - <template #label>{{ $ts.state }}</template> - <option value="all">{{ $ts.all }}</option> - <option value="federating">{{ $ts.federating }}</option> - <option value="subscribing">{{ $ts.subscribing }}</option> - <option value="publishing">{{ $ts.publishing }}</option> - <option value="suspended">{{ $ts.suspended }}</option> - <option value="blocked">{{ $ts.blocked }}</option> - <option value="notResponding">{{ $ts.notResponding }}</option> - </MkSelect> - <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> - <option value="+notes">{{ $ts.notes }} ({{ $ts.descendingOrder }})</option> - <option value="-notes">{{ $ts.notes }} ({{ $ts.ascendingOrder }})</option> - <option value="+users">{{ $ts.users }} ({{ $ts.descendingOrder }})</option> - <option value="-users">{{ $ts.users }} ({{ $ts.ascendingOrder }})</option> - <option value="+following">{{ $ts.following }} ({{ $ts.descendingOrder }})</option> - <option value="-following">{{ $ts.following }} ({{ $ts.ascendingOrder }})</option> - <option value="+followers">{{ $ts.followers }} ({{ $ts.descendingOrder }})</option> - <option value="-followers">{{ $ts.followers }} ({{ $ts.ascendingOrder }})</option> - <option value="+caughtAt">{{ $ts.registeredAt }} ({{ $ts.descendingOrder }})</option> - <option value="-caughtAt">{{ $ts.registeredAt }} ({{ $ts.ascendingOrder }})</option> - <option value="+lastCommunicatedAt">{{ $ts.lastCommunication }} ({{ $ts.descendingOrder }})</option> - <option value="-lastCommunicatedAt">{{ $ts.lastCommunication }} ({{ $ts.ascendingOrder }})</option> - <option value="+driveUsage">{{ $ts.driveUsage }} ({{ $ts.descendingOrder }})</option> - <option value="-driveUsage">{{ $ts.driveUsage }} ({{ $ts.ascendingOrder }})</option> - <option value="+driveFiles">{{ $ts.driveFilesCount }} ({{ $ts.descendingOrder }})</option> - <option value="-driveFiles">{{ $ts.driveFilesCount }} ({{ $ts.ascendingOrder }})</option> - </MkSelect> +<MkSpacer :content-max="1000"> + <div class="taeiyria"> + <div class="query"> + <MkInput v-model="host" :debounce="true" class=""> + <template #prefix><i class="fas fa-search"></i></template> + <template #label>{{ $ts.host }}</template> + </MkInput> + <div class="_inputSplit" style="margin-top: var(--margin);"> + <MkSelect v-model="state"> + <template #label>{{ $ts.state }}</template> + <option value="all">{{ $ts.all }}</option> + <option value="federating">{{ $ts.federating }}</option> + <option value="subscribing">{{ $ts.subscribing }}</option> + <option value="publishing">{{ $ts.publishing }}</option> + <option value="suspended">{{ $ts.suspended }}</option> + <option value="blocked">{{ $ts.blocked }}</option> + <option value="notResponding">{{ $ts.notResponding }}</option> + </MkSelect> + <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> + <option value="+notes">{{ $ts.notes }} ({{ $ts.descendingOrder }})</option> + <option value="-notes">{{ $ts.notes }} ({{ $ts.ascendingOrder }})</option> + <option value="+users">{{ $ts.users }} ({{ $ts.descendingOrder }})</option> + <option value="-users">{{ $ts.users }} ({{ $ts.ascendingOrder }})</option> + <option value="+following">{{ $ts.following }} ({{ $ts.descendingOrder }})</option> + <option value="-following">{{ $ts.following }} ({{ $ts.ascendingOrder }})</option> + <option value="+followers">{{ $ts.followers }} ({{ $ts.descendingOrder }})</option> + <option value="-followers">{{ $ts.followers }} ({{ $ts.ascendingOrder }})</option> + <option value="+caughtAt">{{ $ts.registeredAt }} ({{ $ts.descendingOrder }})</option> + <option value="-caughtAt">{{ $ts.registeredAt }} ({{ $ts.ascendingOrder }})</option> + <option value="+lastCommunicatedAt">{{ $ts.lastCommunication }} ({{ $ts.descendingOrder }})</option> + <option value="-lastCommunicatedAt">{{ $ts.lastCommunication }} ({{ $ts.ascendingOrder }})</option> + <option value="+driveUsage">{{ $ts.driveUsage }} ({{ $ts.descendingOrder }})</option> + <option value="-driveUsage">{{ $ts.driveUsage }} ({{ $ts.ascendingOrder }})</option> + <option value="+driveFiles">{{ $ts.driveFilesCount }} ({{ $ts.descendingOrder }})</option> + <option value="-driveFiles">{{ $ts.driveFilesCount }} ({{ $ts.ascendingOrder }})</option> + </MkSelect> + </div> </div> - </div> - <MkPagination #default="{items}" ref="instances" :key="host + state" :pagination="pagination"> - <div class="dqokceoi"> - <MkA v-for="instance in items" :key="instance.id" class="instance" :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> + <MkPagination v-slot="{items}" ref="instances" :key="host + state" :pagination="pagination"> + <div class="dqokceoi"> + <MkA v-for="instance in items" :key="instance.id" class="instance" :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="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 class="footer"> + <span class="status" :class="getStatus(instance)">{{ getStatus(instance) }}</span> + <span class="pubSub"> + <span v-if="instance.followersCount > 0" class="sub"><i class="fas fa-caret-down icon"></i>Sub</span> + <span v-else class="sub"><i class="fas fa-caret-down icon"></i>-</span> + <span v-if="instance.followingCount > 0" class="pub"><i class="fas fa-caret-up icon"></i>Pub</span> + <span v-else class="pub"><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> - <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 v-if="instance.followersCount > 0" class="sub"><i class="fas fa-caret-down icon"></i>Sub</span> - <span v-else class="sub"><i class="fas fa-caret-down icon"></i>-</span> - <span v-if="instance.followingCount > 0" class="pub"><i class="fas fa-caret-up icon"></i>Pub</span> - <span v-else class="pub"><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> + </MkA> + </div> + </MkPagination> + </div> +</MkSpacer> </template> <script lang="ts"> @@ -169,7 +171,7 @@ export default defineComponent({ .taeiyria { > .query { background: var(--bg); - padding: 16px; + margin-bottom: 16px; } } @@ -177,7 +179,6 @@ export default defineComponent({ display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); grid-gap: 12px; - padding: 16px; > .instance { padding: 16px; diff --git a/packages/client/src/pages/follow-requests.vue b/packages/client/src/pages/follow-requests.vue index a4de393995..54d695091d 100644 --- a/packages/client/src/pages/follow-requests.vue +++ b/packages/client/src/pages/follow-requests.vue @@ -7,7 +7,7 @@ <div>{{ $ts.noFollowRequests }}</div> </div> </template> - <template #default="{items}"> + <template v-slot="{items}"> <div v-for="req in items" :key="req.id" class="user _panel"> <MkAvatar class="avatar" :user="req.follower" :show-indicator="true"/> <div class="body"> diff --git a/packages/client/src/pages/gallery/index.vue b/packages/client/src/pages/gallery/index.vue index a036f4286b..cd0d2a40e4 100644 --- a/packages/client/src/pages/gallery/index.vue +++ b/packages/client/src/pages/gallery/index.vue @@ -9,7 +9,7 @@ <div v-if="tab === 'explore'"> <MkFolder class="_gap"> <template #header><i class="fas fa-clock"></i>{{ $ts.recentPosts }}</template> - <MkPagination #default="{items}" :pagination="recentPostsPagination" :disable-auto-load="true"> + <MkPagination v-slot="{items}" :pagination="recentPostsPagination" :disable-auto-load="true"> <div class="vfpdbgtk"> <MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/> </div> @@ -17,7 +17,7 @@ </MkFolder> <MkFolder class="_gap"> <template #header><i class="fas fa-fire-alt"></i>{{ $ts.popularPosts }}</template> - <MkPagination #default="{items}" :pagination="popularPostsPagination" :disable-auto-load="true"> + <MkPagination v-slot="{items}" :pagination="popularPostsPagination" :disable-auto-load="true"> <div class="vfpdbgtk"> <MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/> </div> @@ -25,7 +25,7 @@ </MkFolder> </div> <div v-else-if="tab === 'liked'"> - <MkPagination #default="{items}" :pagination="likedPostsPagination"> + <MkPagination v-slot="{items}" :pagination="likedPostsPagination"> <div class="vfpdbgtk"> <MkGalleryPostPreview v-for="like in items" :key="like.id" :post="like.post" class="post"/> </div> @@ -33,7 +33,7 @@ </div> <div v-else-if="tab === 'my'"> <MkA to="/gallery/new" class="_link" style="margin: 16px;"><i class="fas fa-plus"></i> {{ $ts.postToGallery }}</MkA> - <MkPagination #default="{items}" :pagination="myPostsPagination"> + <MkPagination v-slot="{items}" :pagination="myPostsPagination"> <div class="vfpdbgtk"> <MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/> </div> diff --git a/packages/client/src/pages/gallery/post.vue b/packages/client/src/pages/gallery/post.vue index f145caf28e..096947e6f8 100644 --- a/packages/client/src/pages/gallery/post.vue +++ b/packages/client/src/pages/gallery/post.vue @@ -36,7 +36,7 @@ <MkAd :prefer="['horizontal', 'horizontal-big']"/> <MkContainer :max-height="300" :foldable="true" class="other"> <template #header><i class="fas fa-clock"></i> {{ $ts.recentPosts }}</template> - <MkPagination #default="{items}" :pagination="otherPostsPagination"> + <MkPagination v-slot="{items}" :pagination="otherPostsPagination"> <div class="sdrarzaf"> <MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/> </div> diff --git a/packages/client/src/pages/mfm-cheat-sheet.vue b/packages/client/src/pages/mfm-cheat-sheet.vue index e9a3b6debc..ee9d807e71 100644 --- a/packages/client/src/pages/mfm-cheat-sheet.vue +++ b/packages/client/src/pages/mfm-cheat-sheet.vue @@ -281,6 +281,16 @@ </div> </div> </div> + <div class="section _block"> + <div class="title">{{ $ts._mfm.rotate }}</div> + <div class="content"> + <p>{{ $ts._mfm.rotateDescription }}</p> + <div class="preview"> + <Mfm :text="preview_rotate"/> + <MkTextarea v-model="preview_rotate"><span>MFM</span></MkTextarea> + </div> + </div> + </div> </div> </template> @@ -328,6 +338,7 @@ export default defineComponent({ preview_blur: `$[blur ${this.$ts._mfm.dummy}]`, preview_rainbow: `$[rainbow 🍮]`, preview_sparkle: `$[sparkle 🍮]`, + preview_rotate: `$[rotate 🍮]`, } }, }); diff --git a/packages/client/src/pages/my-antennas/index.vue b/packages/client/src/pages/my-antennas/index.vue index 8fc17c3606..d185e796c3 100644 --- a/packages/client/src/pages/my-antennas/index.vue +++ b/packages/client/src/pages/my-antennas/index.vue @@ -1,15 +1,17 @@ <template> -<div class="ieepwinx _section"> - <MkButton :link="true" to="/my/antennas/create" primary class="add"><i class="fas fa-plus"></i> {{ $ts.add }}</MkButton> +<MkSpacer :content-max="700"> + <div class="ieepwinx"> + <MkButton :link="true" to="/my/antennas/create" primary class="add"><i class="fas fa-plus"></i> {{ $ts.add }}</MkButton> - <div class="_content"> - <MkPagination #default="{items}" ref="list" :pagination="pagination"> - <MkA v-for="antenna in items" :key="antenna.id" class="ljoevbzj" :to="`/my/antennas/${antenna.id}`"> - <div class="name">{{ antenna.name }}</div> - </MkA> - </MkPagination> + <div class=""> + <MkPagination v-slot="{items}" ref="list" :pagination="pagination"> + <MkA v-for="antenna in items" :key="antenna.id" class="ljoevbzj" :to="`/my/antennas/${antenna.id}`"> + <div class="name">{{ antenna.name }}</div> + </MkA> + </MkPagination> + </div> </div> -</div> +</MkSpacer> </template> <script lang="ts"> @@ -29,6 +31,7 @@ export default defineComponent({ [symbols.PAGE_INFO]: { title: this.$ts.manageAntennas, icon: 'fas fa-satellite', + bg: 'var(--bg)', action: { icon: 'fas fa-plus', handler: this.create @@ -45,7 +48,6 @@ export default defineComponent({ <style lang="scss" scoped> .ieepwinx { - padding: 16px; > .add { margin: 0 auto 16px auto; diff --git a/packages/client/src/pages/my-clips/index.vue b/packages/client/src/pages/my-clips/index.vue index fc2f6d7380..a5bbc3fd2d 100644 --- a/packages/client/src/pages/my-clips/index.vue +++ b/packages/client/src/pages/my-clips/index.vue @@ -1,16 +1,16 @@ <template> -<div class="_section qtcaoidl"> - <MkButton primary class="add" @click="create"><i class="fas fa-plus"></i> {{ $ts.add }}</MkButton> +<MkSpacer :content-max="700"> + <div class="qtcaoidl"> + <MkButton primary class="add" @click="create"><i class="fas fa-plus"></i> {{ $ts.add }}</MkButton> - <div class="_content"> - <MkPagination #default="{items}" ref="list" :pagination="pagination" class="list"> + <MkPagination v-slot="{items}" ref="list" :pagination="pagination" class="list"> <MkA v-for="item in items" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _gap"> <b>{{ item.name }}</b> <div v-if="item.description" class="description">{{ item.description }}</div> </MkA> </MkPagination> </div> -</div> +</MkSpacer> </template> <script lang="ts"> @@ -31,6 +31,7 @@ export default defineComponent({ [symbols.PAGE_INFO]: { title: this.$ts.clip, icon: 'fas fa-paperclip', + bg: 'var(--bg)', action: { icon: 'fas fa-plus', handler: this.create @@ -86,17 +87,15 @@ export default defineComponent({ margin: 0 auto 16px auto; } - > ._content { - > .list { - > .item { - display: block; - padding: 16px; + > .list { + > .item { + display: block; + padding: 16px; - > .description { - margin-top: 8px; - padding-top: 8px; - border-top: solid 0.5px var(--divider); - } + > .description { + margin-top: 8px; + padding-top: 8px; + border-top: solid 0.5px var(--divider); } } } diff --git a/packages/client/src/pages/my-groups/index.vue b/packages/client/src/pages/my-groups/index.vue index e203b497df..c5019a5e5b 100644 --- a/packages/client/src/pages/my-groups/index.vue +++ b/packages/client/src/pages/my-groups/index.vue @@ -12,7 +12,7 @@ <div v-if="tab === 'owned'" class="_content"> <MkButton primary style="margin: 0 auto var(--margin) auto;" @click="create"><i class="fas fa-plus"></i> {{ $ts.createGroup }}</MkButton> - <MkPagination #default="{items}" ref="owned" :pagination="ownedPagination"> + <MkPagination v-slot="{items}" ref="owned" :pagination="ownedPagination"> <div v-for="group in items" :key="group.id" class="_card"> <div class="_title"><MkA :to="`/my/groups/${ group.id }`" class="_link">{{ group.name }}</MkA></div> <div class="_content"><MkAvatars :user-ids="group.userIds"/></div> @@ -21,7 +21,7 @@ </div> <div v-else-if="tab === 'joined'" class="_content"> - <MkPagination #default="{items}" ref="joined" :pagination="joinedPagination"> + <MkPagination v-slot="{items}" ref="joined" :pagination="joinedPagination"> <div v-for="group in items" :key="group.id" class="_card"> <div class="_title">{{ group.name }}</div> <div class="_content"><MkAvatars :user-ids="group.userIds"/></div> @@ -30,7 +30,7 @@ </div> <div v-else-if="tab === 'invites'" class="_content"> - <MkPagination #default="{items}" ref="invitations" :pagination="invitationPagination"> + <MkPagination v-slot="{items}" ref="invitations" :pagination="invitationPagination"> <div v-for="invitation in items" :key="invitation.id" class="_card"> <div class="_title">{{ invitation.group.name }}</div> <div class="_content"><MkAvatars :user-ids="invitation.group.userIds"/></div> diff --git a/packages/client/src/pages/my-lists/index.vue b/packages/client/src/pages/my-lists/index.vue index 645035d4ed..94a869b9ff 100644 --- a/packages/client/src/pages/my-lists/index.vue +++ b/packages/client/src/pages/my-lists/index.vue @@ -1,14 +1,16 @@ <template> -<div class="qkcjvfiv"> - <MkButton primary class="add" @click="create"><i class="fas fa-plus"></i> {{ $ts.createList }}</MkButton> +<MkSpacer :content-max="700"> + <div class="qkcjvfiv"> + <MkButton primary class="add" @click="create"><i class="fas fa-plus"></i> {{ $ts.createList }}</MkButton> - <MkPagination #default="{items}" ref="list" :pagination="pagination" class="lists _content"> - <MkA v-for="list in items" :key="list.id" class="list _panel" :to="`/my/lists/${ list.id }`"> - <div class="name">{{ list.name }}</div> - <MkAvatars :user-ids="list.userIds"/> - </MkA> - </MkPagination> -</div> + <MkPagination v-slot="{items}" ref="list" :pagination="pagination" class="lists _content"> + <MkA v-for="list in items" :key="list.id" class="list _panel" :to="`/my/lists/${ list.id }`"> + <div class="name">{{ list.name }}</div> + <MkAvatars :user-ids="list.userIds"/> + </MkA> + </MkPagination> + </div> +</MkSpacer> </template> <script lang="ts"> @@ -60,8 +62,6 @@ export default defineComponent({ <style lang="scss" scoped> .qkcjvfiv { - padding: 16px; - > .add { margin: 0 auto var(--margin) auto; } diff --git a/packages/client/src/pages/my-lists/list.vue b/packages/client/src/pages/my-lists/list.vue index bf73cdafde..0bfa20514b 100644 --- a/packages/client/src/pages/my-lists/list.vue +++ b/packages/client/src/pages/my-lists/list.vue @@ -1,35 +1,37 @@ <template> -<div class="mk-list-page"> - <transition name="zoom" mode="out-in"> - <div v-if="list" class="_section"> - <div class="_content"> - <MkButton inline @click="addUser()">{{ $ts.addUser }}</MkButton> - <MkButton inline @click="renameList()">{{ $ts.rename }}</MkButton> - <MkButton inline @click="deleteList()">{{ $ts.delete }}</MkButton> +<MkSpacer :content-max="700"> + <div class="mk-list-page"> + <transition name="zoom" mode="out-in"> + <div v-if="list" class="_section"> + <div class="_content"> + <MkButton inline @click="addUser()">{{ $ts.addUser }}</MkButton> + <MkButton inline @click="renameList()">{{ $ts.rename }}</MkButton> + <MkButton inline @click="deleteList()">{{ $ts.delete }}</MkButton> + </div> </div> - </div> - </transition> + </transition> - <transition name="zoom" mode="out-in"> - <div v-if="list" class="_section members _gap"> - <div class="_title">{{ $ts.members }}</div> - <div class="_content"> - <div class="users"> - <div v-for="user in users" :key="user.id" class="user _panel"> - <MkAvatar :user="user" class="avatar" :show-indicator="true"/> - <div class="body"> - <MkUserName :user="user" class="name"/> - <MkAcct :user="user" class="acct"/> - </div> - <div class="action"> - <button class="_button" @click="removeUser(user)"><i class="fas fa-times"></i></button> + <transition name="zoom" mode="out-in"> + <div v-if="list" class="_section members _gap"> + <div class="_title">{{ $ts.members }}</div> + <div class="_content"> + <div class="users"> + <div v-for="user in users" :key="user.id" class="user _panel"> + <MkAvatar :user="user" class="avatar" :show-indicator="true"/> + <div class="body"> + <MkUserName :user="user" class="name"/> + <MkAcct :user="user" class="acct"/> + </div> + <div class="action"> + <button class="_button" @click="removeUser(user)"><i class="fas fa-times"></i></button> + </div> </div> </div> </div> </div> - </div> - </transition> -</div> + </transition> + </div> +</MkSpacer> </template> <script lang="ts"> @@ -49,6 +51,7 @@ export default defineComponent({ [symbols.PAGE_INFO]: computed(() => this.list ? { title: this.list.name, icon: 'fas fa-list-ul', + bg: 'var(--bg)', } : null), list: null, users: [], diff --git a/packages/client/src/pages/page.vue b/packages/client/src/pages/page.vue index efbdc175d8..3a4803c3a3 100644 --- a/packages/client/src/pages/page.vue +++ b/packages/client/src/pages/page.vue @@ -1,5 +1,5 @@ <template> -<div> +<MkSpacer :content-max="700"> <transition name="fade" mode="out-in"> <div v-if="page" :key="page.id" v-size="{ max: [450] }" class="xcukqgmh"> <div class="_block main"> @@ -48,7 +48,7 @@ <MkAd :prefer="['horizontal', 'horizontal-big']"/> <MkContainer :max-height="300" :foldable="true" class="other"> <template #header><i class="fas fa-clock"></i> {{ $ts.recentPosts }}</template> - <MkPagination #default="{items}" :pagination="otherPostsPagination"> + <MkPagination v-slot="{items}" :pagination="otherPostsPagination"> <MkPagePreview v-for="page in items" :key="page.id" :page="page" class="_gap"/> </MkPagination> </MkContainer> @@ -56,7 +56,7 @@ <MkError v-else-if="error" @retry="fetch()"/> <MkLoading v-else/> </transition> -</div> +</MkSpacer> </template> <script lang="ts"> @@ -201,14 +201,7 @@ export default defineComponent({ } .xcukqgmh { - --padding: 32px; - - &.max-width_450px { - --padding: 16px; - } - > .main { - padding: var(--padding); > .header { padding: 16px; @@ -302,7 +295,7 @@ export default defineComponent({ } > .footer { - margin: var(--padding); + margin: var(--margin) 0 var(--margin) 0; font-size: 85%; opacity: 0.75; } diff --git a/packages/client/src/pages/pages.vue b/packages/client/src/pages/pages.vue index a8ded5cda9..f1dd64f119 100644 --- a/packages/client/src/pages/pages.vue +++ b/packages/client/src/pages/pages.vue @@ -1,50 +1,40 @@ <template> -<MkSpacer> - <!-- TODO: MkHeaderに統合 --> - <MkTab v-if="$i" v-model="tab"> - <option value="featured"><i class="fas fa-fire-alt"></i> {{ $ts._pages.featured }}</option> - <option value="my"><i class="fas fa-edit"></i> {{ $ts._pages.my }}</option> - <option value="liked"><i class="fas fa-heart"></i> {{ $ts._pages.liked }}</option> - </MkTab> - - <div class="_section"> - <div v-if="tab === 'featured'" class="rknalgpo _content"> - <MkPagination #default="{items}" :pagination="featuredPagesPagination"> - <MkPagePreview v-for="page in items" :key="page.id" class="ckltabjg" :page="page"/> - </MkPagination> - </div> +<MkSpacer :content-max="700"> + <div v-if="tab === 'featured'" class="rknalgpo"> + <MkPagination v-slot="{items}" :pagination="featuredPagesPagination"> + <MkPagePreview v-for="page in items" :key="page.id" class="ckltabjg" :page="page"/> + </MkPagination> + </div> - <div v-if="tab === 'my'" class="rknalgpo _content my"> - <MkButton class="new" @click="create()"><i class="fas fa-plus"></i></MkButton> - <MkPagination #default="{items}" :pagination="myPagesPagination"> - <MkPagePreview v-for="page in items" :key="page.id" class="ckltabjg" :page="page"/> - </MkPagination> - </div> + <div v-else-if="tab === 'my'" class="rknalgpo my"> + <MkButton class="new" @click="create()"><i class="fas fa-plus"></i></MkButton> + <MkPagination v-slot="{items}" :pagination="myPagesPagination"> + <MkPagePreview v-for="page in items" :key="page.id" class="ckltabjg" :page="page"/> + </MkPagination> + </div> - <div v-if="tab === 'liked'" class="rknalgpo _content"> - <MkPagination #default="{items}" :pagination="likedPagesPagination"> - <MkPagePreview v-for="like in items" :key="like.page.id" class="ckltabjg" :page="like.page"/> - </MkPagination> - </div> + <div v-else-if="tab === 'liked'" class="rknalgpo"> + <MkPagination v-slot="{items}" :pagination="likedPagesPagination"> + <MkPagePreview v-for="like in items" :key="like.page.id" class="ckltabjg" :page="like.page"/> + </MkPagination> </div> </MkSpacer> </template> <script lang="ts"> -import { defineComponent } from 'vue'; +import { computed, defineComponent } from 'vue'; import MkPagePreview from '@/components/page-preview.vue'; import MkPagination from '@/components/ui/pagination.vue'; import MkButton from '@/components/ui/button.vue'; -import MkTab from '@/components/tab.vue'; import * as symbols from '@/symbols'; export default defineComponent({ components: { - MkPagePreview, MkPagination, MkButton, MkTab + MkPagePreview, MkPagination, MkButton }, data() { return { - [symbols.PAGE_INFO]: { + [symbols.PAGE_INFO]: computed(() => ({ title: this.$ts.pages, icon: 'fas fa-sticky-note', bg: 'var(--bg)', @@ -53,7 +43,23 @@ export default defineComponent({ text: this.$ts.create, handler: this.create, }], - }, + tabs: [{ + active: this.tab === 'featured', + title: this.$ts._pages.featured, + icon: 'fas fa-fire-alt', + onClick: () => { this.tab = 'featured'; }, + }, { + active: this.tab === 'my', + title: this.$ts._pages.my, + icon: 'fas fa-edit', + onClick: () => { this.tab = 'my'; }, + }, { + active: this.tab === 'liked', + title: this.$ts._pages.liked, + icon: 'fas fa-heart', + onClick: () => { this.tab = 'liked'; }, + },] + })), tab: 'featured', featuredPagesPagination: { endpoint: 'pages/featured', diff --git a/packages/client/src/pages/settings/2fa.vue b/packages/client/src/pages/settings/2fa.vue index 8921480271..cffd10a0ee 100644 --- a/packages/client/src/pages/settings/2fa.vue +++ b/packages/client/src/pages/settings/2fa.vue @@ -1,69 +1,66 @@ <template> -<section class="_card"> - <div class="_title"><i class="fas fa-lock"></i> {{ $ts.twoStepAuthentication }}</div> - <div class="_content"> - <MkButton v-if="!data && !$i.twoFactorEnabled" @click="register">{{ $ts._2fa.registerDevice }}</MkButton> - <template v-if="$i.twoFactorEnabled"> - <p>{{ $ts._2fa.alreadyRegistered }}</p> - <MkButton @click="unregister">{{ $ts.unregister }}</MkButton> +<div> + <MkButton v-if="!data && !$i.twoFactorEnabled" @click="register">{{ $ts._2fa.registerDevice }}</MkButton> + <template v-if="$i.twoFactorEnabled"> + <p>{{ $ts._2fa.alreadyRegistered }}</p> + <MkButton @click="unregister">{{ $ts.unregister }}</MkButton> - <template v-if="supportsCredentials"> - <hr class="totp-method-sep"> + <template v-if="supportsCredentials"> + <hr class="totp-method-sep"> - <h2 class="heading">{{ $ts.securityKey }}</h2> - <p>{{ $ts._2fa.securityKeyInfo }}</p> - <div class="key-list"> - <div v-for="key in $i.securityKeysList" class="key"> - <h3>{{ key.name }}</h3> - <div class="last-used">{{ $ts.lastUsed }}<MkTime :time="key.lastUsed"/></div> - <MkButton @click="unregisterKey(key)">{{ $ts.unregister }}</MkButton> - </div> + <h2 class="heading">{{ $ts.securityKey }}</h2> + <p>{{ $ts._2fa.securityKeyInfo }}</p> + <div class="key-list"> + <div v-for="key in $i.securityKeysList" class="key"> + <h3>{{ key.name }}</h3> + <div class="last-used">{{ $ts.lastUsed }}<MkTime :time="key.lastUsed"/></div> + <MkButton @click="unregisterKey(key)">{{ $ts.unregister }}</MkButton> </div> + </div> - <MkSwitch v-if="$i.securityKeysList.length > 0" v-model="usePasswordLessLogin" @update:modelValue="updatePasswordLessLogin">{{ $ts.passwordLessLogin }}</MkSwitch> + <MkSwitch v-if="$i.securityKeysList.length > 0" v-model="usePasswordLessLogin" @update:modelValue="updatePasswordLessLogin">{{ $ts.passwordLessLogin }}</MkSwitch> - <MkInfo v-if="registration && registration.error" warn>{{ $ts.error }} {{ registration.error }}</MkInfo> - <MkButton v-if="!registration || registration.error" @click="addSecurityKey">{{ $ts._2fa.registerKey }}</MkButton> + <MkInfo v-if="registration && registration.error" warn>{{ $ts.error }} {{ registration.error }}</MkInfo> + <MkButton v-if="!registration || registration.error" @click="addSecurityKey">{{ $ts._2fa.registerKey }}</MkButton> - <ol v-if="registration && !registration.error"> - <li v-if="registration.stage >= 0"> - {{ $ts.tapSecurityKey }} - <i v-if="registration.saving && registration.stage == 0" class="fas fa-spinner fa-pulse fa-fw"></i> - </li> - <li v-if="registration.stage >= 1"> - <MkForm :disabled="registration.stage != 1 || registration.saving"> - <MkInput v-model="keyName" :max="30"> - <template #label>{{ $ts.securityKeyName }}</template> - </MkInput> - <MkButton :disabled="keyName.length == 0" @click="registerKey">{{ $ts.registerSecurityKey }}</MkButton> - <i v-if="registration.saving && registration.stage == 1" class="fas fa-spinner fa-pulse fa-fw"></i> - </MkForm> - </li> - </ol> - </template> - </template> - <div v-if="data && !$i.twoFactorEnabled"> - <ol style="margin: 0; padding: 0 0 0 1em;"> - <li> - <I18n :src="$ts._2fa.step1" tag="span"> - <template #a> - <a href="https://authy.com/" rel="noopener" target="_blank" class="_link">Authy</a> - </template> - <template #b> - <a href="https://support.google.com/accounts/answer/1066447" rel="noopener" target="_blank" class="_link">Google Authenticator</a> - </template> - </I18n> + <ol v-if="registration && !registration.error"> + <li v-if="registration.stage >= 0"> + {{ $ts.tapSecurityKey }} + <i v-if="registration.saving && registration.stage == 0" class="fas fa-spinner fa-pulse fa-fw"></i> </li> - <li>{{ $ts._2fa.step2 }}<br><img :src="data.qr"></li> - <li>{{ $ts._2fa.step3 }}<br> - <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 v-if="registration.stage >= 1"> + <MkForm :disabled="registration.stage != 1 || registration.saving"> + <MkInput v-model="keyName" :max="30"> + <template #label>{{ $ts.securityKeyName }}</template> + </MkInput> + <MkButton :disabled="keyName.length == 0" @click="registerKey">{{ $ts.registerSecurityKey }}</MkButton> + <i v-if="registration.saving && registration.stage == 1" class="fas fa-spinner fa-pulse fa-fw"></i> + </MkForm> </li> </ol> - <MkInfo>{{ $ts._2fa.step4 }}</MkInfo> - </div> + </template> + </template> + <div v-if="data && !$i.twoFactorEnabled"> + <ol style="margin: 0; padding: 0 0 0 1em;"> + <li> + <I18n :src="$ts._2fa.step1" tag="span"> + <template #a> + <a href="https://authy.com/" rel="noopener" target="_blank" class="_link">Authy</a> + </template> + <template #b> + <a href="https://support.google.com/accounts/answer/1066447" rel="noopener" target="_blank" class="_link">Google Authenticator</a> + </template> + </I18n> + </li> + <li>{{ $ts._2fa.step2 }}<br><img :src="data.qr"></li> + <li>{{ $ts._2fa.step3 }}<br> + <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> + <MkInfo>{{ $ts._2fa.step4 }}</MkInfo> </div> -</section> +</div> </template> <script lang="ts"> @@ -82,18 +79,11 @@ import * as symbols from '@/symbols'; export default defineComponent({ components: { - FormBase, MkButton, MkInfo, MkInput, MkSwitch }, - emits: ['info'], - data() { return { - [symbols.PAGE_INFO]: { - title: this.$ts.twoStepAuthentication, - icon: 'fas fa-lock' - }, data: null, supportsCredentials: !!navigator.credentials, usePasswordLessLogin: this.$i.usePasswordLessLogin, diff --git a/packages/client/src/pages/settings/apps.vue b/packages/client/src/pages/settings/apps.vue index 10b5fc603e..b5fe4e0aed 100644 --- a/packages/client/src/pages/settings/apps.vue +++ b/packages/client/src/pages/settings/apps.vue @@ -7,7 +7,7 @@ <div>{{ $ts.nothing }}</div> </div> </template> - <template #default="{items}"> + <template v-slot="{items}"> <div v-for="token in items" :key="token.id" class="_debobigegoPanel bfomjevm"> <img v-if="token.iconUrl" class="icon" :src="token.iconUrl" alt=""/> <div class="body"> diff --git a/packages/client/src/pages/settings/drive.vue b/packages/client/src/pages/settings/drive.vue index 1fcfed2114..9ab99c6efe 100644 --- a/packages/client/src/pages/settings/drive.vue +++ b/packages/client/src/pages/settings/drive.vue @@ -1,44 +1,43 @@ <template> -<FormBase class=""> - <FormGroup v-if="!fetching"> +<div class="_formRoot"> + <FormSection v-if="!fetching"> <template #label>{{ $ts.usageAmount }}</template> - <div class="_debobigegoItem uawsfosz"> - <div class="_debobigegoPanel"> - <div class="meter"><div :style="meterStyle"></div></div> - </div> + <div class="_formBlock uawsfosz"> + <div class="meter"><div :style="meterStyle"></div></div> </div> - <FormKeyValueView> - <template #key>{{ $ts.capacity }}</template> - <template #value>{{ bytes(capacity, 1) }}</template> - </FormKeyValueView> - <FormKeyValueView> - <template #key>{{ $ts.inUse }}</template> - <template #value>{{ bytes(usage, 1) }}</template> - </FormKeyValueView> - </FormGroup> - - <div class="_debobigegoItem"> - <div class="_debobigegoLabel">{{ $ts.statistics }}</div> - <div class="_debobigegoPanel"> - <div ref="chart"></div> + <div class="_inputSplit _formBlock"> + <MkKeyValue class="_formBlock"> + <template #key>{{ $ts.capacity }}</template> + <template #value>{{ bytes(capacity, 1) }}</template> + </MkKeyValue> + <MkKeyValue class="_formBlock"> + <template #key>{{ $ts.inUse }}</template> + <template #value>{{ bytes(usage, 1) }}</template> + </MkKeyValue> </div> - </div> + </FormSection> + + <FormSection> + <template #label>{{ $ts.statistics }}</template> + <div ref="chart"></div> + </FormSection> - <FormButton :center="false" primary @click="chooseUploadFolder()"> - {{ $ts.uploadFolder }} - <template #suffix>{{ uploadFolder ? uploadFolder.name : '-' }}</template> - <template #suffixIcon><i class="fas fa-folder-open"></i></template> - </FormButton> -</FormBase> + <FormSection> + <FormLink @click="chooseUploadFolder()"> + {{ $ts.uploadFolder }} + <template #suffix>{{ uploadFolder ? uploadFolder.name : '-' }}</template> + <template #suffixIcon><i class="fas fa-folder-open"></i></template> + </FormLink> + </FormSection> +</div> </template> <script lang="ts"> import { defineComponent } from 'vue'; import * as tinycolor from 'tinycolor2'; -import FormButton from '@/components/debobigego/button.vue'; -import FormGroup from '@/components/debobigego/group.vue'; -import FormKeyValueView from '@/components/debobigego/key-value-view.vue'; -import FormBase from '@/components/debobigego/base.vue'; +import FormLink from '@/components/form/link.vue'; +import FormSection from '@/components/form/section.vue'; +import MkKeyValue from '@/components/key-value.vue'; import * as os from '@/os'; import bytes from '@/filters/bytes'; import * as symbols from '@/symbols'; @@ -47,10 +46,9 @@ import * as symbols from '@/symbols'; export default defineComponent({ components: { - FormBase, - FormButton, - FormGroup, - FormKeyValueView, + FormLink, + FormSection, + MkKeyValue, }, emits: ['info'], @@ -128,19 +126,16 @@ export default defineComponent({ @use "sass:math"; .uawsfosz { - > div { - padding: 24px; - > .meter { - $size: 12px; - background: rgba(0, 0, 0, 0.1); - border-radius: math.div($size, 2); - overflow: hidden; + > .meter { + $size: 12px; + background: rgba(0, 0, 0, 0.1); + border-radius: math.div($size, 2); + overflow: hidden; - > div { - height: $size; - border-radius: math.div($size, 2); - } + > div { + height: $size; + border-radius: math.div($size, 2); } } } diff --git a/packages/client/src/pages/settings/email-address.vue b/packages/client/src/pages/settings/email-address.vue deleted file mode 100644 index c8ce61716f..0000000000 --- a/packages/client/src/pages/settings/email-address.vue +++ /dev/null @@ -1,68 +0,0 @@ -<template> -<FormBase> - <FormGroup> - <FormInput v-model="emailAddress" type="email"> - {{ $ts.emailAddress }} - <template v-if="$i.email && !$i.emailVerified" #desc>{{ $ts.verificationEmailSent }}</template> - <template v-else-if="emailAddress === $i.email && $i.emailVerified" #desc>{{ $ts.emailVerified }}</template> - </FormInput> - </FormGroup> - <FormButton primary @click="save">{{ $ts.save }}</FormButton> -</FormBase> -</template> - -<script lang="ts"> -import { defineComponent } from 'vue'; -import FormButton from '@/components/debobigego/button.vue'; -import FormInput from '@/components/form/input.vue'; -import FormBase from '@/components/debobigego/base.vue'; -import FormGroup from '@/components/debobigego/group.vue'; -import * as os from '@/os'; -import * as symbols from '@/symbols'; - -export default defineComponent({ - components: { - FormBase, - FormInput, - FormButton, - FormGroup, - }, - - emits: ['info'], - - data() { - return { - [symbols.PAGE_INFO]: { - title: this.$ts.emailAddress, - icon: 'fas fa-envelope', - bg: 'var(--bg)', - }, - emailAddress: null, - code: null, - } - }, - - created() { - this.emailAddress = this.$i.email; - }, - - mounted() { - this.$emit('info', this[symbols.PAGE_INFO]); - }, - - methods: { - save() { - os.inputText({ - title: this.$ts.password, - type: 'password' - }).then(({ canceled, result: password }) => { - if (canceled) return; - os.apiWithDialog('i/update-email', { - password: password, - email: this.emailAddress, - }); - }); - } - } -}); -</script> diff --git a/packages/client/src/pages/settings/email-notification.vue b/packages/client/src/pages/settings/email-notification.vue deleted file mode 100644 index c1735a0728..0000000000 --- a/packages/client/src/pages/settings/email-notification.vue +++ /dev/null @@ -1,91 +0,0 @@ -<template> -<FormBase> - <FormGroup> - <FormSwitch v-model="mention"> - {{ $ts._notification._types.mention }} - </FormSwitch> - <FormSwitch v-model="reply"> - {{ $ts._notification._types.reply }} - </FormSwitch> - <FormSwitch v-model="quote"> - {{ $ts._notification._types.quote }} - </FormSwitch> - <FormSwitch v-model="follow"> - {{ $ts._notification._types.follow }} - </FormSwitch> - <FormSwitch v-model="receiveFollowRequest"> - {{ $ts._notification._types.receiveFollowRequest }} - </FormSwitch> - <FormSwitch v-model="groupInvited"> - {{ $ts._notification._types.groupInvited }} - </FormSwitch> - </FormGroup> -</FormBase> -</template> - -<script lang="ts"> -import { defineComponent } from 'vue'; -import FormButton from '@/components/debobigego/button.vue'; -import FormSwitch from '@/components/form/switch.vue'; -import FormBase from '@/components/debobigego/base.vue'; -import FormGroup from '@/components/debobigego/group.vue'; -import * as os from '@/os'; -import * as symbols from '@/symbols'; -import * as symbols from '@/symbols'; - -export default defineComponent({ - components: { - FormBase, - FormSwitch, - FormButton, - FormGroup, - }, - - emits: ['info'], - - data() { - return { - [symbols.PAGE_INFO]: { - title: this.$ts.emailNotification, - icon: 'fas fa-envelope', - bg: 'var(--bg)', - }, - - mention: this.$i.emailNotificationTypes.includes('mention'), - reply: this.$i.emailNotificationTypes.includes('reply'), - quote: this.$i.emailNotificationTypes.includes('quote'), - follow: this.$i.emailNotificationTypes.includes('follow'), - receiveFollowRequest: this.$i.emailNotificationTypes.includes('receiveFollowRequest'), - groupInvited: this.$i.emailNotificationTypes.includes('groupInvited'), - } - }, - - created() { - this.$watch('mention', this.save); - this.$watch('reply', this.save); - this.$watch('quote', this.save); - this.$watch('follow', this.save); - this.$watch('receiveFollowRequest', this.save); - this.$watch('groupInvited', this.save); - }, - - mounted() { - this.$emit('info', this[symbols.PAGE_INFO]); - }, - - methods: { - save() { - os.api('i/update', { - emailNotificationTypes: [ - ...[this.mention ? 'mention' : null], - ...[this.reply ? 'reply' : null], - ...[this.quote ? 'quote' : null], - ...[this.follow ? 'follow' : null], - ...[this.receiveFollowRequest ? 'receiveFollowRequest' : null], - ...[this.groupInvited ? 'groupInvited' : null], - ].filter(x => x != null) - }); - } - } -}); -</script> diff --git a/packages/client/src/pages/settings/email.vue b/packages/client/src/pages/settings/email.vue index d1dda20f00..b04295cce0 100644 --- a/packages/client/src/pages/settings/email.vue +++ b/packages/client/src/pages/settings/email.vue @@ -1,66 +1,133 @@ <template> -<FormBase> - <FormGroup> +<div class="_formRoot"> + <FormSection> <template #label>{{ $ts.emailAddress }}</template> - <FormLink to="/settings/email/address"> - <template v-if="$i.email && !$i.emailVerified" #icon><i class="fas fa-exclamation-triangle" style="color: var(--warn);"></i></template> - <template v-else-if="$i.email && $i.emailVerified" #icon><i class="fas fa-check" style="color: var(--success);"></i></template> - {{ $i.email || $ts.notSet }} - </FormLink> - </FormGroup> + <FormInput v-model="emailAddress" type="email" manual-save> + <template #prefix><i class="fas fa-envelope"></i></template> + <template v-if="$i.email && !$i.emailVerified" #caption>{{ $ts.verificationEmailSent }}</template> + <template v-else-if="emailAddress === $i.email && $i.emailVerified" #caption><i class="fas fa-check" style="color: var(--success);"></i> {{ $ts.emailVerified }}</template> + </FormInput> + </FormSection> - <FormLink to="/settings/email/notification"> - <template #icon><i class="fas fa-bell"></i></template> - {{ $ts.emailNotification }} - </FormLink> + <FormSection> + <FormSwitch :value="$i.receiveAnnouncementEmail" @update:modelValue="onChangeReceiveAnnouncementEmail"> + {{ $ts.receiveAnnouncementFromInstance }} + </FormSwitch> + </FormSection> - <FormSwitch :value="$i.receiveAnnouncementEmail" @update:modelValue="onChangeReceiveAnnouncementEmail"> - {{ $ts.receiveAnnouncementFromInstance }} - </FormSwitch> -</FormBase> + <FormSection> + <template #label>{{ $ts.emailNotification }}</template> + <FormSwitch v-model="emailNotification_mention" class="_formBlock"> + {{ $ts._notification._types.mention }} + </FormSwitch> + <FormSwitch v-model="emailNotification_reply" class="_formBlock"> + {{ $ts._notification._types.reply }} + </FormSwitch> + <FormSwitch v-model="emailNotification_quote" class="_formBlock"> + {{ $ts._notification._types.quote }} + </FormSwitch> + <FormSwitch v-model="emailNotification_follow" class="_formBlock"> + {{ $ts._notification._types.follow }} + </FormSwitch> + <FormSwitch v-model="emailNotification_receiveFollowRequest" class="_formBlock"> + {{ $ts._notification._types.receiveFollowRequest }} + </FormSwitch> + <FormSwitch v-model="emailNotification_groupInvited" class="_formBlock"> + {{ $ts._notification._types.groupInvited }} + </FormSwitch> + </FormSection> +</div> </template> <script lang="ts"> -import { defineComponent } from 'vue'; +import { defineComponent, onMounted, ref, watch } from 'vue'; import FormButton from '@/components/debobigego/button.vue'; import FormLink from '@/components/debobigego/link.vue'; -import FormBase from '@/components/debobigego/base.vue'; -import FormGroup from '@/components/debobigego/group.vue'; -import FormSwitch from '@/components/debobigego/switch.vue'; +import FormSection from '@/components/form/section.vue'; +import FormInput from '@/components/form/input.vue'; +import FormSwitch from '@/components/form/switch.vue'; import * as os from '@/os'; import * as symbols from '@/symbols'; +import { $i } from '@/account'; +import { i18n } from '@/i18n'; export default defineComponent({ components: { - FormBase, + FormSection, FormLink, FormButton, FormSwitch, - FormGroup, + FormInput, }, emits: ['info'], - - data() { - return { - [symbols.PAGE_INFO]: { - title: this.$ts.email, - icon: 'fas fa-envelope', - bg: 'var(--bg)', - }, - } - }, - mounted() { - this.$emit('info', this[symbols.PAGE_INFO]); - }, + setup(props, context) { + const emailAddress = ref($i.email); - methods: { - onChangeReceiveAnnouncementEmail(v) { + const INFO = { + title: i18n.locale.email, + icon: 'fas fa-envelope', + bg: 'var(--bg)', + }; + + const onChangeReceiveAnnouncementEmail = (v) => { os.api('i/update', { receiveAnnouncementEmail: v }); - }, - } + }; + + const saveEmailAddress = () => { + os.inputText({ + title: i18n.locale.password, + type: 'password' + }).then(({ canceled, result: password }) => { + if (canceled) return; + os.apiWithDialog('i/update-email', { + password: password, + email: emailAddress.value, + }); + }); + }; + + const emailNotification_mention = ref($i.emailNotificationTypes.includes('mention')); + const emailNotification_reply = ref($i.emailNotificationTypes.includes('reply')); + const emailNotification_quote = ref($i.emailNotificationTypes.includes('quote')); + const emailNotification_follow = ref($i.emailNotificationTypes.includes('follow')); + const emailNotification_receiveFollowRequest = ref($i.emailNotificationTypes.includes('receiveFollowRequest')); + const emailNotification_groupInvited = ref($i.emailNotificationTypes.includes('groupInvited')); + + const saveNotificationSettings = () => { + os.api('i/update', { + emailNotificationTypes: [ + ...[emailNotification_mention.value ? 'mention' : null], + ...[emailNotification_reply.value ? 'reply' : null], + ...[emailNotification_quote.value ? 'quote' : null], + ...[emailNotification_follow.value ? 'follow' : null], + ...[emailNotification_receiveFollowRequest.value ? 'receiveFollowRequest' : null], + ...[emailNotification_groupInvited.value ? 'groupInvited' : null], + ].filter(x => x != null) + }); + }; + + watch([emailNotification_mention, emailNotification_reply, emailNotification_quote, emailNotification_follow, emailNotification_receiveFollowRequest, emailNotification_groupInvited], () => { + saveNotificationSettings(); + }); + + onMounted(() => { + context.emit('info', INFO); + + watch(emailAddress, () => { + saveEmailAddress(); + }); + }); + + return { + [symbols.PAGE_INFO]: INFO, + emailAddress, + onChangeReceiveAnnouncementEmail, + emailNotification_mention, emailNotification_reply, emailNotification_quote, emailNotification_follow, emailNotification_receiveFollowRequest, emailNotification_groupInvited, + }; + }, }); </script> diff --git a/packages/client/src/pages/settings/general.vue b/packages/client/src/pages/settings/general.vue index ac8e04511c..57a4b25574 100644 --- a/packages/client/src/pages/settings/general.vue +++ b/packages/client/src/pages/settings/general.vue @@ -1,8 +1,6 @@ <template> -<FormBase> - <FormSwitch v-model="showFixedPostForm">{{ $ts.showFixedPostForm }}</FormSwitch> - - <FormSelect v-model="lang"> +<div class="_formRoot"> + <FormSelect v-model="lang" class="_formBlock"> <template #label>{{ $ts.uiLanguage }}</template> <option v-for="x in langs" :key="x[0]" :value="x[0]">{{ x[1] }}</option> <template #caption> @@ -14,57 +12,59 @@ </template> </FormSelect> - <FormGroup> + <FormSwitch v-model="showFixedPostForm" class="_formBlock">{{ $ts.showFixedPostForm }}</FormSwitch> + + <FormSection> <template #label>{{ $ts.behavior }}</template> - <FormSwitch v-model="imageNewTab">{{ $ts.openImageInNewTab }}</FormSwitch> - <FormSwitch v-model="enableInfiniteScroll">{{ $ts.enableInfiniteScroll }}</FormSwitch> - <FormSwitch v-model="useReactionPickerForContextMenu">{{ $ts.useReactionPickerForContextMenu }}</FormSwitch> - <FormSwitch v-model="disablePagesScript">{{ $ts.disablePagesScript }}</FormSwitch> - </FormGroup> + <FormSwitch v-model="imageNewTab" class="_formBlock">{{ $ts.openImageInNewTab }}</FormSwitch> + <FormSwitch v-model="enableInfiniteScroll" class="_formBlock">{{ $ts.enableInfiniteScroll }}</FormSwitch> + <FormSwitch v-model="useReactionPickerForContextMenu" class="_formBlock">{{ $ts.useReactionPickerForContextMenu }}</FormSwitch> + <FormSwitch v-model="disablePagesScript" class="_formBlock">{{ $ts.disablePagesScript }}</FormSwitch> - <FormSelect v-model="serverDisconnectedBehavior"> - <template #label>{{ $ts.whenServerDisconnected }}</template> - <option value="reload">{{ $ts._serverDisconnectedBehavior.reload }}</option> - <option value="dialog">{{ $ts._serverDisconnectedBehavior.dialog }}</option> - <option value="quiet">{{ $ts._serverDisconnectedBehavior.quiet }}</option> - </FormSelect> + <FormSelect v-model="serverDisconnectedBehavior" class="_formBlock"> + <template #label>{{ $ts.whenServerDisconnected }}</template> + <option value="reload">{{ $ts._serverDisconnectedBehavior.reload }}</option> + <option value="dialog">{{ $ts._serverDisconnectedBehavior.dialog }}</option> + <option value="quiet">{{ $ts._serverDisconnectedBehavior.quiet }}</option> + </FormSelect> + </FormSection> - <FormGroup> + <FormSection> <template #label>{{ $ts.appearance }}</template> - <FormSwitch v-model="disableAnimatedMfm">{{ $ts.disableAnimatedMfm }}</FormSwitch> - <FormSwitch v-model="reduceAnimation">{{ $ts.reduceUiAnimation }}</FormSwitch> - <FormSwitch v-model="useBlurEffect">{{ $ts.useBlurEffect }}</FormSwitch> - <FormSwitch v-model="useBlurEffectForModal">{{ $ts.useBlurEffectForModal }}</FormSwitch> - <FormSwitch v-model="showGapBetweenNotesInTimeline">{{ $ts.showGapBetweenNotesInTimeline }}</FormSwitch> - <FormSwitch v-model="loadRawImages">{{ $ts.loadRawImages }}</FormSwitch> - <FormSwitch v-model="disableShowingAnimatedImages">{{ $ts.disableShowingAnimatedImages }}</FormSwitch> - <FormSwitch v-model="squareAvatars">{{ $ts.squareAvatars }}</FormSwitch> - <FormSwitch v-model="useSystemFont">{{ $ts.useSystemFont }}</FormSwitch> - <FormSwitch v-model="useOsNativeEmojis">{{ $ts.useOsNativeEmojis }} + <FormSwitch v-model="disableAnimatedMfm" class="_formBlock">{{ $ts.disableAnimatedMfm }}</FormSwitch> + <FormSwitch v-model="reduceAnimation" class="_formBlock">{{ $ts.reduceUiAnimation }}</FormSwitch> + <FormSwitch v-model="useBlurEffect" class="_formBlock">{{ $ts.useBlurEffect }}</FormSwitch> + <FormSwitch v-model="useBlurEffectForModal" class="_formBlock">{{ $ts.useBlurEffectForModal }}</FormSwitch> + <FormSwitch v-model="showGapBetweenNotesInTimeline" class="_formBlock">{{ $ts.showGapBetweenNotesInTimeline }}</FormSwitch> + <FormSwitch v-model="loadRawImages" class="_formBlock">{{ $ts.loadRawImages }}</FormSwitch> + <FormSwitch v-model="disableShowingAnimatedImages" class="_formBlock">{{ $ts.disableShowingAnimatedImages }}</FormSwitch> + <FormSwitch v-model="squareAvatars" class="_formBlock">{{ $ts.squareAvatars }}</FormSwitch> + <FormSwitch v-model="useSystemFont" class="_formBlock">{{ $ts.useSystemFont }}</FormSwitch> + <FormSwitch v-model="useOsNativeEmojis" class="_formBlock">{{ $ts.useOsNativeEmojis }} <div><Mfm :key="useOsNativeEmojis" text="🍮🍦🍭🍩🍰🍫🍬🥞🍪"/></div> </FormSwitch> - </FormGroup> - <FormGroup> - <FormSwitch v-model="aiChanMode">{{ $ts.aiChanMode }}</FormSwitch> - </FormGroup> + <FormRadios v-model="fontSize" class="_formBlock"> + <template #label>{{ $ts.fontSize }}</template> + <option value="small"><span style="font-size: 14px;">Aa</span></option> + <option :value="null"><span style="font-size: 16px;">Aa</span></option> + <option value="large"><span style="font-size: 18px;">Aa</span></option> + <option value="veryLarge"><span style="font-size: 20px;">Aa</span></option> + </FormRadios> + </FormSection> - <FormRadios v-model="fontSize"> - <template #desc>{{ $ts.fontSize }}</template> - <option value="small"><span style="font-size: 14px;">Aa</span></option> - <option :value="null"><span style="font-size: 16px;">Aa</span></option> - <option value="large"><span style="font-size: 18px;">Aa</span></option> - <option value="veryLarge"><span style="font-size: 20px;">Aa</span></option> - </FormRadios> + <FormSection> + <FormSwitch v-model="aiChanMode">{{ $ts.aiChanMode }}</FormSwitch> + </FormSection> - <FormSelect v-model="instanceTicker"> + <FormSelect v-model="instanceTicker" class="_formBlock"> <template #label>{{ $ts.instanceTicker }}</template> <option value="none">{{ $ts._instanceTicker.none }}</option> <option value="remote">{{ $ts._instanceTicker.remote }}</option> <option value="always">{{ $ts._instanceTicker.always }}</option> </FormSelect> - <FormSelect v-model="nsfw"> + <FormSelect v-model="nsfw" class="_formBlock"> <template #label>{{ $ts.nsfw }}</template> <option value="respect">{{ $ts._nsfw.respect }}</option> <option value="ignore">{{ $ts._nsfw.ignore }}</option> @@ -76,28 +76,27 @@ <FormSwitch v-model="defaultSideView">{{ $ts.openInSideView }}</FormSwitch> </FormGroup> - <FormSelect v-model="chatOpenBehavior"> + <FormSelect v-model="chatOpenBehavior" class="_formBlock"> <template #label>{{ $ts.chatOpenBehavior }}</template> <option value="page">{{ $ts.showInPage }}</option> <option value="window">{{ $ts.openInWindow }}</option> <option value="popout">{{ $ts.popout }}</option> </FormSelect> - <FormLink to="/settings/deck">{{ $ts.deck }}</FormLink> + <FormLink to="/settings/deck" class="_formBlock">{{ $ts.deck }}</FormLink> - <FormLink to="/settings/custom-css"><template #icon><i class="fas fa-code"></i></template>{{ $ts.customCss }}</FormLink> -</FormBase> + <FormLink to="/settings/custom-css" class="_formBlock"><template #icon><i class="fas fa-code"></i></template>{{ $ts.customCss }}</FormLink> +</div> </template> <script lang="ts"> import { defineComponent } from 'vue'; -import FormSwitch from '@/components/debobigego/switch.vue'; -import FormSelect from '@/components/debobigego/select.vue'; -import FormRadios from '@/components/debobigego/radios.vue'; -import FormBase from '@/components/debobigego/base.vue'; -import FormGroup from '@/components/debobigego/group.vue'; -import FormLink from '@/components/debobigego/link.vue'; -import FormButton from '@/components/debobigego/button.vue'; +import FormSwitch from '@/components/form/switch.vue'; +import FormSelect from '@/components/form/select.vue'; +import FormRadios from '@/components/form/radios.vue'; +import FormGroup from '@/components/form/group.vue'; +import FormSection from '@/components/form/section.vue'; +import FormLink from '@/components/form/link.vue'; import MkLink from '@/components/link.vue'; import { langs } from '@/config'; import { defaultStore } from '@/store'; @@ -112,10 +111,9 @@ export default defineComponent({ FormSwitch, FormSelect, FormRadios, - FormBase, FormGroup, FormLink, - FormButton, + FormSection, }, emits: ['info'], diff --git a/packages/client/src/pages/settings/import-export.vue b/packages/client/src/pages/settings/import-export.vue index 4cc92adfb3..5b5b704695 100644 --- a/packages/client/src/pages/settings/import-export.vue +++ b/packages/client/src/pages/settings/import-export.vue @@ -1,5 +1,5 @@ <template> -<div style="margin: 16px;"> +<div class="_formRoot"> <FormSection> <template #label>{{ $ts._exportOrImport.allNotes }}</template> <MkButton :class="$style.button" inline @click="doExport('notes')"><i class="fas fa-download"></i> {{ $ts.export }}</MkButton> diff --git a/packages/client/src/pages/settings/index.vue b/packages/client/src/pages/settings/index.vue index 333d07c9c6..bfac1be77d 100644 --- a/packages/client/src/pages/settings/index.vue +++ b/packages/client/src/pages/settings/index.vue @@ -1,7 +1,7 @@ <template> <div ref="el" class="vvcocwet" :class="{ wide: !narrow }"> <div v-if="!narrow || page == null" class="nav"> - <MkSpacer :content-max="700"> + <MkSpacer :content-max="700" :margin-min="20"> <div class="baaadecd"> <div class="title">{{ $ts.settings }}</div> <MkInfo v-if="emailNotConfigured" warn class="info">{{ $ts.emailNotConfiguredWarning }} <MkA to="/settings/email" class="_link">{{ $ts.configure }}</MkA></MkInfo> @@ -10,7 +10,12 @@ </MkSpacer> </div> <div class="main"> - <component :is="component" :key="page" v-bind="pageProps"/> + <MkSpacer :content-max="600" :margin-min="20"> + <div class="bkzroven"> + <div v-if="childInfo" class="title">{{ childInfo.title }}</div> + <component :is="component" :key="page" v-bind="pageProps" @info="onInfo"/> + </div> + </MkSpacer> </div> </div> </template> @@ -52,6 +57,7 @@ export default defineComponent({ const narrow = ref(false); const view = ref(null); const el = ref(null); + const childInfo = ref(null); const menuDef = computed(() => [{ title: i18n.locale.basicSettings, items: [{ @@ -192,8 +198,6 @@ export default defineComponent({ case 'other': return defineAsyncComponent(() => import('./other.vue')); case 'general': return defineAsyncComponent(() => import('./general.vue')); case 'email': return defineAsyncComponent(() => import('./email.vue')); - case 'email/address': return defineAsyncComponent(() => import('./email-address.vue')); - case 'email/notification': return defineAsyncComponent(() => import('./email-notification.vue')); case 'theme': return defineAsyncComponent(() => import('./theme.vue')); case 'theme/install': return defineAsyncComponent(() => import('./theme.install.vue')); case 'theme/manage': return defineAsyncComponent(() => import('./theme.manage.vue')); @@ -259,6 +263,10 @@ export default defineComponent({ const emailNotConfigured = computed(() => instance.enableEmail && ($i.email == null || !$i.emailVerified)); + const onInfo = (info) => { + childInfo.value = info; + }; + return { [symbols.PAGE_INFO]: INFO, page, @@ -269,6 +277,8 @@ export default defineComponent({ pageProps, component, emailNotConfigured, + onInfo, + childInfo, }; }, }); @@ -285,7 +295,7 @@ export default defineComponent({ } > .info { - margin: 0 16px; + margin: 16px 0; } > .accounts { @@ -299,6 +309,16 @@ export default defineComponent({ } } + > .main { + .bkzroven { + > .title { + margin: 4px 0 20px 0; + font-size: 1.5em; + font-weight: bold; + } + } + } + &.wide { display: flex; max-width: 1000px; @@ -321,6 +341,12 @@ export default defineComponent({ flex: 1; min-width: 0; overflow: auto; + + .bkzroven { + > .title { + margin: 6px 0 24px 0; + } + } } } } diff --git a/packages/client/src/pages/settings/menu.vue b/packages/client/src/pages/settings/menu.vue index 47cc4256b0..19d26be89a 100644 --- a/packages/client/src/pages/settings/menu.vue +++ b/packages/client/src/pages/settings/menu.vue @@ -1,28 +1,28 @@ <template> -<FormBase> - <FormTextarea v-model="items" tall manual-save> - <span>{{ $ts.menu }}</span> - <template #desc><button class="_textButton" @click="addItem">{{ $ts.addItem }}</button></template> +<div class="_formRoot"> + <FormTextarea v-model="items" tall manual-save class="_formBlock"> + <template #label>{{ $ts.menu }}</template> + <template #caption><button class="_textButton" @click="addItem">{{ $ts.addItem }}</button></template> </FormTextarea> - <FormRadios v-model="menuDisplay"> - <template #desc>{{ $ts.display }}</template> + <FormRadios v-model="menuDisplay" class="_formBlock"> + <template #label>{{ $ts.display }}</template> <option value="sideFull">{{ $ts._menuDisplay.sideFull }}</option> <option value="sideIcon">{{ $ts._menuDisplay.sideIcon }}</option> <option value="top">{{ $ts._menuDisplay.top }}</option> <!-- <MkRadio v-model="menuDisplay" value="hide" disabled>{{ $ts._menuDisplay.hide }}</MkRadio>--> <!-- TODO: サイドバーを完全に隠せるようにすると、別途ハンバーガーボタンのようなものをUIに表示する必要があり面倒 --> </FormRadios> - <FormButton danger @click="reset()"><i class="fas fa-redo"></i> {{ $ts.default }}</FormButton> -</FormBase> + <FormButton danger class="_formBlock" @click="reset()"><i class="fas fa-redo"></i> {{ $ts.default }}</FormButton> +</div> </template> <script lang="ts"> import { defineComponent } from 'vue'; -import FormTextarea from '@/components/debobigego/textarea.vue'; -import FormRadios from '@/components/debobigego/radios.vue'; +import FormTextarea from '@/components/form/textarea.vue'; +import FormRadios from '@/components/form/radios.vue'; import FormBase from '@/components/debobigego/base.vue'; -import FormButton from '@/components/debobigego/button.vue'; +import FormButton from '@/components/ui/button.vue'; import * as os from '@/os'; import { menuDef } from '@/menu'; import { defaultStore } from '@/store'; diff --git a/packages/client/src/pages/settings/mute-block.vue b/packages/client/src/pages/settings/mute-block.vue index 4a9633a20d..4f42d5e429 100644 --- a/packages/client/src/pages/settings/mute-block.vue +++ b/packages/client/src/pages/settings/mute-block.vue @@ -7,7 +7,7 @@ <div v-if="tab === 'mute'"> <MkPagination :pagination="mutingPagination" class="muting"> <template #empty><FormInfo>{{ $ts.noUsers }}</FormInfo></template> - <template #default="{items}"> + <template v-slot="{items}"> <FormGroup> <FormLink v-for="mute in items" :key="mute.id" :to="userPage(mute.mutee)"> <MkAcct :user="mute.mutee"/> @@ -19,7 +19,7 @@ <div v-if="tab === 'block'"> <MkPagination :pagination="blockingPagination" class="blocking"> <template #empty><FormInfo>{{ $ts.noUsers }}</FormInfo></template> - <template #default="{items}"> + <template v-slot="{items}"> <FormGroup> <FormLink v-for="block in items" :key="block.id" :to="userPage(block.blockee)"> <MkAcct :user="block.blockee"/> diff --git a/packages/client/src/pages/settings/notifications.vue b/packages/client/src/pages/settings/notifications.vue index 7de10a182c..d3ada0d7ef 100644 --- a/packages/client/src/pages/settings/notifications.vue +++ b/packages/client/src/pages/settings/notifications.vue @@ -1,20 +1,20 @@ <template> -<FormBase> - <FormLink @click="configure">{{ $ts.notificationSetting }}</FormLink> - <FormGroup> - <FormButton @click="readAllNotifications">{{ $ts.markAsReadAllNotifications }}</FormButton> - <FormButton @click="readAllUnreadNotes">{{ $ts.markAsReadAllUnreadNotes }}</FormButton> - <FormButton @click="readAllMessagingMessages">{{ $ts.markAsReadAllTalkMessages }}</FormButton> - </FormGroup> -</FormBase> +<div class="_formRoot"> + <FormLink class="_formBlock" @click="configure"><template #icon><i class="fas fa-cog"></i></template>{{ $ts.notificationSetting }}</FormLink> + <FormSection> + <FormLink class="_formBlock" @click="readAllNotifications">{{ $ts.markAsReadAllNotifications }}</FormLink> + <FormLink class="_formBlock" @click="readAllUnreadNotes">{{ $ts.markAsReadAllUnreadNotes }}</FormLink> + <FormLink class="_formBlock" @click="readAllMessagingMessages">{{ $ts.markAsReadAllTalkMessages }}</FormLink> + </FormSection> +</div> </template> <script lang="ts"> import { defineComponent } from 'vue'; -import FormButton from '@/components/debobigego/button.vue'; -import FormLink from '@/components/debobigego/link.vue'; +import FormButton from '@/components/ui/button.vue'; +import FormLink from '@/components/form/link.vue'; import FormBase from '@/components/debobigego/base.vue'; -import FormGroup from '@/components/debobigego/group.vue'; +import FormSection from '@/components/form/section.vue'; import { notificationTypes } from 'misskey-js'; import * as os from '@/os'; import * as symbols from '@/symbols'; @@ -24,7 +24,7 @@ export default defineComponent({ FormBase, FormLink, FormButton, - FormGroup, + FormSection, }, emits: ['info'], diff --git a/packages/client/src/pages/settings/privacy.vue b/packages/client/src/pages/settings/privacy.vue index 94afba9aa4..78a0ea8b8d 100644 --- a/packages/client/src/pages/settings/privacy.vue +++ b/packages/client/src/pages/settings/privacy.vue @@ -1,64 +1,66 @@ <template> -<FormBase> - <FormGroup> - <FormSwitch v-model="isLocked" @update:modelValue="save()">{{ $ts.makeFollowManuallyApprove }}</FormSwitch> - <FormSwitch v-model="autoAcceptFollowed" :disabled="!isLocked" @update:modelValue="save()">{{ $ts.autoAcceptFollowed }}</FormSwitch> - <template #caption>{{ $ts.lockedAccountInfo }}</template> - </FormGroup> - <FormSwitch v-model="publicReactions" @update:modelValue="save()"> +<div class="_formRoot"> + <FormSwitch v-model="isLocked" class="_formBlock" @update:modelValue="save()">{{ $ts.makeFollowManuallyApprove }}<template #caption>{{ $ts.lockedAccountInfo }}</template></FormSwitch> + <FormSwitch v-if="isLocked" v-model="autoAcceptFollowed" class="_formBlock" @update:modelValue="save()">{{ $ts.autoAcceptFollowed }}</FormSwitch> + + <FormSwitch v-model="publicReactions" class="_formBlock" @update:modelValue="save()"> {{ $ts.makeReactionsPublic }} - <template #desc>{{ $ts.makeReactionsPublicDescription }}</template> + <template #caption>{{ $ts.makeReactionsPublicDescription }}</template> </FormSwitch> - <FormGroup> + + <FormSelect v-model="ffVisibility" class="_formBlock"> <template #label>{{ $ts.ffVisibility }}</template> - <FormSelect v-model="ffVisibility"> - <option value="public">{{ $ts._ffVisibility.public }}</option> - <option value="followers">{{ $ts._ffVisibility.followers }}</option> - <option value="private">{{ $ts._ffVisibility.private }}</option> - </FormSelect> + <option value="public">{{ $ts._ffVisibility.public }}</option> + <option value="followers">{{ $ts._ffVisibility.followers }}</option> + <option value="private">{{ $ts._ffVisibility.private }}</option> <template #caption>{{ $ts.ffVisibilityDescription }}</template> - </FormGroup> - <FormSwitch v-model="hideOnlineStatus" @update:modelValue="save()"> + </FormSelect> + + <FormSwitch v-model="hideOnlineStatus" class="_formBlock" @update:modelValue="save()"> {{ $ts.hideOnlineStatus }} - <template #desc>{{ $ts.hideOnlineStatusDescription }}</template> + <template #caption>{{ $ts.hideOnlineStatusDescription }}</template> </FormSwitch> - <FormSwitch v-model="noCrawle" @update:modelValue="save()"> + <FormSwitch v-model="noCrawle" class="_formBlock" @update:modelValue="save()"> {{ $ts.noCrawle }} - <template #desc>{{ $ts.noCrawleDescription }}</template> + <template #caption>{{ $ts.noCrawleDescription }}</template> </FormSwitch> - <FormSwitch v-model="isExplorable" @update:modelValue="save()"> + <FormSwitch v-model="isExplorable" class="_formBlock" @update:modelValue="save()"> {{ $ts.makeExplorable }} - <template #desc>{{ $ts.makeExplorableDescription }}</template> + <template #caption>{{ $ts.makeExplorableDescription }}</template> </FormSwitch> - <FormSwitch v-model="rememberNoteVisibility" @update:modelValue="save()">{{ $ts.rememberNoteVisibility }}</FormSwitch> - <FormGroup v-if="!rememberNoteVisibility"> - <template #label>{{ $ts.defaultNoteVisibility }}</template> - <FormSelect v-model="defaultNoteVisibility"> - <option value="public">{{ $ts._visibility.public }}</option> - <option value="home">{{ $ts._visibility.home }}</option> - <option value="followers">{{ $ts._visibility.followers }}</option> - <option value="specified">{{ $ts._visibility.specified }}</option> - </FormSelect> - <FormSwitch v-model="defaultNoteLocalOnly">{{ $ts._visibility.localOnly }}</FormSwitch> - </FormGroup> - <FormSwitch v-model="keepCw" @update:modelValue="save()">{{ $ts.keepCw }}</FormSwitch> -</FormBase> + + <FormSection> + <FormSwitch v-model="rememberNoteVisibility" class="_formBlock" @update:modelValue="save()">{{ $ts.rememberNoteVisibility }}</FormSwitch> + <FormGroup v-if="!rememberNoteVisibility" class="_formBlock"> + <template #label>{{ $ts.defaultNoteVisibility }}</template> + <FormSelect v-model="defaultNoteVisibility" class="_formBlock"> + <option value="public">{{ $ts._visibility.public }}</option> + <option value="home">{{ $ts._visibility.home }}</option> + <option value="followers">{{ $ts._visibility.followers }}</option> + <option value="specified">{{ $ts._visibility.specified }}</option> + </FormSelect> + <FormSwitch v-model="defaultNoteLocalOnly" class="_formBlock">{{ $ts._visibility.localOnly }}</FormSwitch> + </FormGroup> + </FormSection> + + <FormSwitch v-model="keepCw" class="_formBlock" @update:modelValue="save()">{{ $ts.keepCw }}</FormSwitch> +</div> </template> <script lang="ts"> import { defineComponent } from 'vue'; -import FormSwitch from '@/components/debobigego/switch.vue'; -import FormSelect from '@/components/debobigego/select.vue'; -import FormBase from '@/components/debobigego/base.vue'; -import FormGroup from '@/components/debobigego/group.vue'; +import FormSwitch from '@/components/form/switch.vue'; +import FormSelect from '@/components/form/select.vue'; +import FormSection from '@/components/form/section.vue'; +import FormGroup from '@/components/form/group.vue'; import * as os from '@/os'; import { defaultStore } from '@/store'; import * as symbols from '@/symbols'; export default defineComponent({ components: { - FormBase, FormSelect, + FormSection, FormGroup, FormSwitch, }, diff --git a/packages/client/src/pages/settings/profile.vue b/packages/client/src/pages/settings/profile.vue index ce55c57c09..2eaf9a9f83 100644 --- a/packages/client/src/pages/settings/profile.vue +++ b/packages/client/src/pages/settings/profile.vue @@ -1,59 +1,58 @@ <template> -<FormBase> - <FormGroup> - <div class="_debobigegoItem _debobigegoPanel llvierxe" :style="{ backgroundImage: $i.bannerUrl ? `url(${ $i.bannerUrl })` : null }"> - <MkAvatar class="avatar" :user="$i"/> +<div class="_formRoot"> + <div class="llvierxe" :style="{ backgroundImage: $i.bannerUrl ? `url(${ $i.bannerUrl })` : null }"> + <div class="avatar _acrylic"> + <MkAvatar class="avatar" :user="$i" :disable-link="true" @click="changeAvatar"/> + <MkButton primary class="avatarEdit" @click="changeAvatar">{{ $ts._profile.changeAvatar }}</MkButton> </div> - <FormButton primary @click="changeAvatar">{{ $ts._profile.changeAvatar }}</FormButton> - <FormButton primary @click="changeBanner">{{ $ts._profile.changeBanner }}</FormButton> - </FormGroup> + <MkButton primary class="bannerEdit" @click="changeBanner">{{ $ts._profile.changeBanner }}</MkButton> + </div> - <FormInput v-model="name" :max="30" manual-save> - <span>{{ $ts._profile.name }}</span> + <FormInput v-model="name" :max="30" manual-save class="_formBlock"> + <template #label>{{ $ts._profile.name }}</template> </FormInput> - <FormTextarea v-model="description" :max="500" tall manual-save> - <span>{{ $ts._profile.description }}</span> - <template #desc>{{ $ts._profile.youCanIncludeHashtags }}</template> + <FormTextarea v-model="description" :max="500" tall manual-save class="_formBlock"> + <template #label>{{ $ts._profile.description }}</template> + <template #caption>{{ $ts._profile.youCanIncludeHashtags }}</template> </FormTextarea> - <FormInput v-model="location" manual-save> - <span>{{ $ts.location }}</span> + <FormInput v-model="location" manual-save class="_formBlock"> + <template #label>{{ $ts.location }}</template> <template #prefix><i class="fas fa-map-marker-alt"></i></template> </FormInput> - <FormInput v-model="birthday" type="date" manual-save> - <span>{{ $ts.birthday }}</span> + <FormInput v-model="birthday" type="date" manual-save class="_formBlock"> + <template #label>{{ $ts.birthday }}</template> <template #prefix><i class="fas fa-birthday-cake"></i></template> </FormInput> - <FormSelect v-model="lang"> + <FormSelect v-model="lang" class="_formBlock"> <template #label>{{ $ts.language }}</template> <option v-for="x in langs" :key="x[0]" :value="x[0]">{{ x[1] }}</option> </FormSelect> - <FormGroup> - <FormButton primary @click="editMetadata">{{ $ts._profile.metadataEdit }}</FormButton> + <FormSlot> + <MkButton @click="editMetadata">{{ $ts._profile.metadataEdit }}</MkButton> <template #caption>{{ $ts._profile.metadataDescription }}</template> - </FormGroup> + </FormSlot> - <FormSwitch v-model="isCat">{{ $ts.flagAsCat }}<template #desc>{{ $ts.flagAsCatDescription }}</template></FormSwitch> + <FormSwitch v-model="isCat" class="_formBlock">{{ $ts.flagAsCat }}<template #caption>{{ $ts.flagAsCatDescription }}</template></FormSwitch> - <FormSwitch v-model="isBot">{{ $ts.flagAsBot }}<template #desc>{{ $ts.flagAsBotDescription }}</template></FormSwitch> + <FormSwitch v-model="isBot" class="_formBlock">{{ $ts.flagAsBot }}<template #caption>{{ $ts.flagAsBotDescription }}</template></FormSwitch> - <FormSwitch v-model="alwaysMarkNsfw">{{ $ts.alwaysMarkSensitive }}</FormSwitch> -</FormBase> + <FormSwitch v-model="alwaysMarkNsfw" class="_formBlock">{{ $ts.alwaysMarkSensitive }}</FormSwitch> +</div> </template> <script lang="ts"> import { defineComponent } from 'vue'; -import FormButton from '@/components/debobigego/button.vue'; -import FormInput from '@/components/debobigego/input.vue'; -import FormTextarea from '@/components/debobigego/textarea.vue'; -import FormSwitch from '@/components/debobigego/switch.vue'; -import FormSelect from '@/components/debobigego/select.vue'; -import FormBase from '@/components/debobigego/base.vue'; -import FormGroup from '@/components/debobigego/group.vue'; +import MkButton from '@/components/ui/button.vue'; +import FormInput from '@/components/form/input.vue'; +import FormTextarea from '@/components/form/textarea.vue'; +import FormSwitch from '@/components/form/switch.vue'; +import FormSelect from '@/components/form/select.vue'; +import FormSlot from '@/components/form/slot.vue'; import { host, langs } from '@/config'; import { selectFile } from '@/scripts/select-file'; import * as os from '@/os'; @@ -61,13 +60,12 @@ import * as symbols from '@/symbols'; export default defineComponent({ components: { - FormButton, + MkButton, FormInput, FormTextarea, FormSwitch, FormSelect, - FormBase, - FormGroup, + FormSlot, }, emits: ['info'], @@ -257,25 +255,28 @@ export default defineComponent({ <style lang="scss" scoped> .llvierxe { position: relative; - height: 150px; background-size: cover; background-position: center; + border-radius: 10px; + overflow: clip; - > * { - pointer-events: none; + > .avatar { + display: inline-block; + text-align: center; + padding: 16px; + + > .avatar { + display: inline-block; + width: 72px; + height: 72px; + margin: 0 auto 16px auto; + } } - > .avatar { + > .bannerEdit { position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - display: block; - width: 72px; - height: 72px; - margin: auto; - box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.5); + top: 16px; + right: 16px; } } </style> diff --git a/packages/client/src/pages/settings/reaction.vue b/packages/client/src/pages/settings/reaction.vue index 5864020cb9..4d500f5b47 100644 --- a/packages/client/src/pages/settings/reaction.vue +++ b/packages/client/src/pages/settings/reaction.vue @@ -1,8 +1,8 @@ <template> -<FormBase> - <div class="_debobigegoItem"> - <div class="_debobigegoLabel">{{ $ts.reactionSettingDescription }}</div> - <div class="_debobigegoPanel"> +<div class="_formRoot"> + <FromSlot class="_formBlock"> + <template #label>{{ $ts.reactionSettingDescription }}</template> + <div v-panel style="border-radius: 6px;"> <XDraggable v-model="reactions" class="zoaiodol" :item-key="item => item" animation="150" delay="100" delay-on-touch-only="true"> <template #item="{element}"> <button class="_button item" @click="remove(element, $event)"> @@ -14,33 +14,38 @@ </template> </XDraggable> </div> - <div class="_debobigegoCaption">{{ $ts.reactionSettingDescription2 }} <button class="_textButton" @click="preview">{{ $ts.preview }}</button></div> - </div> + <template #caption>{{ $ts.reactionSettingDescription2 }} <button class="_textButton" @click="preview">{{ $ts.preview }}</button></template> + </FromSlot> - <FormRadios v-model="reactionPickerWidth"> - <template #desc>{{ $ts.width }}</template> + <FormRadios v-model="reactionPickerWidth" class="_formBlock"> + <template #label>{{ $ts.width }}</template> <option :value="1">{{ $ts.small }}</option> <option :value="2">{{ $ts.medium }}</option> <option :value="3">{{ $ts.large }}</option> </FormRadios> - <FormRadios v-model="reactionPickerHeight"> - <template #desc>{{ $ts.height }}</template> + <FormRadios v-model="reactionPickerHeight" class="_formBlock"> + <template #label>{{ $ts.height }}</template> <option :value="1">{{ $ts.small }}</option> <option :value="2">{{ $ts.medium }}</option> <option :value="3">{{ $ts.large }}</option> </FormRadios> - <FormButton @click="preview"><i class="fas fa-eye"></i> {{ $ts.preview }}</FormButton> - <FormButton danger @click="setDefault"><i class="fas fa-undo"></i> {{ $ts.default }}</FormButton> -</FormBase> + <FormSection> + <FormButton @click="preview"><i class="fas fa-eye"></i> {{ $ts.preview }}</FormButton> + </FormSection> + <FormSection> + <FormButton danger @click="setDefault"><i class="fas fa-undo"></i> {{ $ts.default }}</FormButton> + </FormSection> +</div> </template> <script lang="ts"> import { defineComponent } from 'vue'; import XDraggable from 'vuedraggable'; -import FormInput from '@/components/debobigego/input.vue'; -import FormRadios from '@/components/debobigego/radios.vue'; -import FormBase from '@/components/debobigego/base.vue'; -import FormButton from '@/components/debobigego/button.vue'; +import FormInput from '@/components/form/input.vue'; +import FormRadios from '@/components/form/radios.vue'; +import FromSlot from '@/components/form/slot.vue'; +import FormButton from '@/components/ui/button.vue'; +import FormSection from '@/components/form/section.vue'; import * as os from '@/os'; import { defaultStore } from '@/store'; import * as symbols from '@/symbols'; @@ -49,8 +54,9 @@ export default defineComponent({ components: { FormInput, FormButton, - FormBase, + FromSlot, FormRadios, + FormSection, XDraggable, }, @@ -135,7 +141,8 @@ export default defineComponent({ <style lang="scss" scoped> .zoaiodol { - padding: 16px; + padding: 12px; + font-size: 1.1em; > .item { display: inline-block; diff --git a/packages/client/src/pages/settings/security.vue b/packages/client/src/pages/settings/security.vue index c18edd80b0..069f9d964d 100644 --- a/packages/client/src/pages/settings/security.vue +++ b/packages/client/src/pages/settings/security.vue @@ -1,45 +1,61 @@ <template> -<FormBase> - <X2fa/> - <FormLink to="/settings/2fa"><template #icon><i class="fas fa-mobile-alt"></i></template>{{ $ts.twoStepAuthentication }}</FormLink> - <FormButton primary @click="change()">{{ $ts.changePassword }}</FormButton> - <FormPagination :pagination="pagination"> +<div class="_formRoot"> + <FormSection> + <template #label>{{ $ts.password }}</template> + <FormButton primary @click="change()">{{ $ts.changePassword }}</FormButton> + </FormSection> + + <FormSection> + <template #label>{{ $ts.twoStepAuthentication }}</template> + <X2fa/> + </FormSection> + + <FormSection> <template #label>{{ $ts.signinHistory }}</template> - <template #default="{items}"> - <div v-for="item in items" :key="item.id" class="_debobigegoPanel timnmucd"> - <header> - <i v-if="item.success" class="fas fa-check icon succ"></i> - <i v-else class="fas fa-times-circle icon fail"></i> - <code class="ip _monospace">{{ item.ip }}</code> - <MkTime :time="item.createdAt" class="time"/> - </header> - </div> - </template> - </FormPagination> - <FormGroup> - <FormButton danger @click="regenerateToken"><i class="fas fa-sync-alt"></i> {{ $ts.regenerateLoginToken }}</FormButton> - <template #caption>{{ $ts.regenerateLoginTokenDescription }}</template> - </FormGroup> -</FormBase> + <FormPagination :pagination="pagination"> + <template v-slot="{items}"> + <div> + <div v-for="item in items" :key="item.id" v-panel class="timnmucd"> + <header> + <i v-if="item.success" class="fas fa-check icon succ"></i> + <i v-else class="fas fa-times-circle icon fail"></i> + <code class="ip _monospace">{{ item.ip }}</code> + <MkTime :time="item.createdAt" class="time"/> + </header> + </div> + </div> + </template> + </FormPagination> + </FormSection> + + <FormSection> + <FormSlot> + <FormButton danger @click="regenerateToken"><i class="fas fa-sync-alt"></i> {{ $ts.regenerateLoginToken }}</FormButton> + <template #caption>{{ $ts.regenerateLoginTokenDescription }}</template> + </FormSlot> + </FormSection> +</div> </template> <script lang="ts"> import { defineComponent } from 'vue'; -import FormBase from '@/components/debobigego/base.vue'; +import FormSection from '@/components/form/section.vue'; import FormLink from '@/components/debobigego/link.vue'; -import FormGroup from '@/components/debobigego/group.vue'; -import FormButton from '@/components/debobigego/button.vue'; -import FormPagination from '@/components/debobigego/pagination.vue'; +import FormSlot from '@/components/form/slot.vue'; +import FormButton from '@/components/ui/button.vue'; +import FormPagination from '@/components/form/pagination.vue'; +import X2fa from './2fa.vue'; import * as os from '@/os'; import * as symbols from '@/symbols'; export default defineComponent({ components: { - FormBase, + FormSection, FormLink, FormButton, FormPagination, - FormGroup, + FormSlot, + X2fa, }, emits: ['info'], @@ -115,6 +131,20 @@ export default defineComponent({ .timnmucd { padding: 16px; + &:first-child { + border-top-left-radius: 6px; + border-top-right-radius: 6px; + } + + &:last-child { + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; + } + + &:not(:last-child) { + border-bottom: solid 0.5px var(--divider); + } + > header { display: flex; align-items: center; diff --git a/packages/client/src/pages/settings/sounds.vue b/packages/client/src/pages/settings/sounds.vue index 7bea50976e..1492a989a2 100644 --- a/packages/client/src/pages/settings/sounds.vue +++ b/packages/client/src/pages/settings/sounds.vue @@ -1,29 +1,28 @@ <template> -<FormBase> - <FormRange v-model="masterVolume" :min="0" :max="1" :step="0.05"> - <template #label><i class="fas fa-volume-icon"></i> {{ $ts.masterVolume }}</template> +<div class="_formRoot"> + <FormRange v-model="masterVolume" :min="0" :max="1" :step="0.05" :text-converter="(v) => `${Math.floor(v * 100)}%`" class="_formBlock"> + <template #label>{{ $ts.masterVolume }}</template> </FormRange> - <FormGroup> + <FormSection> <template #label>{{ $ts.sounds }}</template> - <FormButton v-for="type in Object.keys(sounds)" :key="type" :center="false" @click="edit(type)"> + <FormLink v-for="type in Object.keys(sounds)" :key="type" style="margin-bottom: 8px;" @click="edit(type)"> {{ $t('_sfx.' + type) }} <template #suffix>{{ sounds[type].type || $ts.none }}</template> <template #suffixIcon><i class="fas fa-chevron-down"></i></template> - </FormButton> - </FormGroup> + </FormLink> + </FormSection> - <FormButton danger @click="reset()"><i class="fas fa-redo"></i> {{ $ts.default }}</FormButton> -</FormBase> + <FormButton danger class="_formBlock" @click="reset()"><i class="fas fa-redo"></i> {{ $ts.default }}</FormButton> +</div> </template> <script lang="ts"> import { defineComponent } from 'vue'; -import FormRange from '@/components/debobigego/range.vue'; -import FormSelect from '@/components/debobigego/select.vue'; -import FormBase from '@/components/debobigego/base.vue'; -import FormButton from '@/components/debobigego/button.vue'; -import FormGroup from '@/components/debobigego/group.vue'; +import FormRange from '@/components/form/range.vue'; +import FormButton from '@/components/ui/button.vue'; +import FormLink from '@/components/form/link.vue'; +import FormSection from '@/components/form/section.vue'; import * as os from '@/os'; import { ColdDeviceStorage } from '@/store'; import { playFile } from '@/scripts/sound'; @@ -58,11 +57,10 @@ const soundsTypes = [ export default defineComponent({ components: { - FormSelect, + FormLink, FormButton, - FormBase, FormRange, - FormGroup, + FormSection, }, emits: ['info'], diff --git a/packages/client/src/pages/settings/theme.manage.vue b/packages/client/src/pages/settings/theme.manage.vue index ac4edbe66e..c605b1eb64 100644 --- a/packages/client/src/pages/settings/theme.manage.vue +++ b/packages/client/src/pages/settings/theme.manage.vue @@ -1,6 +1,6 @@ <template> -<FormBase> - <FormSelect v-model="selectedThemeId"> +<div class="_formRoot"> + <FormSelect v-model="selectedThemeId" class="_formBlock"> <template #label>{{ $ts.theme }}</template> <optgroup :label="$ts._theme.installedThemes"> <option v-for="x in installedThemes" :key="x.id" :value="x.id">{{ x.name }}</option> @@ -10,31 +10,31 @@ </optgroup> </FormSelect> <template v-if="selectedTheme"> - <FormInput readonly :modelValue="selectedTheme.author"> - <span>{{ $ts.author }}</span> + <FormInput readonly :modelValue="selectedTheme.author" class="_formBlock"> + <template #label>{{ $ts.author }}</template> </FormInput> - <FormTextarea v-if="selectedTheme.desc" readonly :modelValue="selectedTheme.desc"> - <span>{{ $ts._theme.description }}</span> + <FormTextarea v-if="selectedTheme.desc" readonly :modelValue="selectedTheme.desc" class="_formBlock"> + <template #label>{{ $ts._theme.description }}</template> </FormTextarea> - <FormTextarea readonly tall :modelValue="selectedThemeCode"> - <span>{{ $ts._theme.code }}</span> - <template #desc><button class="_textButton" @click="copyThemeCode()">{{ $ts.copy }}</button></template> + <FormTextarea readonly tall :modelValue="selectedThemeCode" class="_formBlock"> + <template #label>{{ $ts._theme.code }}</template> + <template #caption><button class="_textButton" @click="copyThemeCode()">{{ $ts.copy }}</button></template> </FormTextarea> - <FormButton v-if="!builtinThemes.some(t => t.id == selectedTheme.id)" danger @click="uninstall()"><i class="fas fa-trash-alt"></i> {{ $ts.uninstall }}</FormButton> + <FormButton v-if="!builtinThemes.some(t => t.id == selectedTheme.id)" class="_formBlock" danger @click="uninstall()"><i class="fas fa-trash-alt"></i> {{ $ts.uninstall }}</FormButton> </template> -</FormBase> +</div> </template> <script lang="ts"> import { defineComponent } from 'vue'; import * as JSON5 from 'json5'; -import FormTextarea from '@/components/debobigego/textarea.vue'; -import FormSelect from '@/components/debobigego/select.vue'; -import FormRadios from '@/components/debobigego/radios.vue'; +import FormTextarea from '@/components/form/textarea.vue'; +import FormSelect from '@/components/form/select.vue'; +import FormRadios from '@/components/form/radios.vue'; import FormBase from '@/components/debobigego/base.vue'; import FormGroup from '@/components/debobigego/group.vue'; -import FormInput from '@/components/debobigego/input.vue'; -import FormButton from '@/components/debobigego/button.vue'; +import FormInput from '@/components/form/input.vue'; +import FormButton from '@/components/ui/button.vue'; import { Theme, builtinThemes } from '@/scripts/theme'; import copyToClipboard from '@/scripts/copy-to-clipboard'; import * as os from '@/os'; diff --git a/packages/client/src/pages/settings/theme.vue b/packages/client/src/pages/settings/theme.vue index 2420966c51..2f4daa26c0 100644 --- a/packages/client/src/pages/settings/theme.vue +++ b/packages/client/src/pages/settings/theme.vue @@ -1,34 +1,35 @@ <template> -<FormBase> - <FormGroup> - <div class="rfqxtzch _debobigegoItem _debobigegoPanel"> - <div class="darkMode"> - <div class="toggleWrapper"> - <input id="dn" v-model="darkMode" type="checkbox" class="dn"/> - <label for="dn" class="toggle"> - <span class="before">{{ $ts.light }}</span> - <span class="after">{{ $ts.dark }}</span> - <span class="toggle__handler"> - <span class="crater crater--1"></span> - <span class="crater crater--2"></span> - <span class="crater crater--3"></span> - </span> - <span class="star star--1"></span> - <span class="star star--2"></span> - <span class="star star--3"></span> - <span class="star star--4"></span> - <span class="star star--5"></span> - <span class="star star--6"></span> - </label> - </div> +<div class="_formRoot"> + <div v-panel class="rfqxtzch _formBlock"> + <div class="toggle"> + <div class="toggleWrapper"> + <input id="dn" v-model="darkMode" type="checkbox" class="dn"/> + <label for="dn" class="toggle"> + <span class="before">{{ $ts.light }}</span> + <span class="after">{{ $ts.dark }}</span> + <span class="toggle__handler"> + <span class="crater crater--1"></span> + <span class="crater crater--2"></span> + <span class="crater crater--3"></span> + </span> + <span class="star star--1"></span> + <span class="star star--2"></span> + <span class="star star--3"></span> + <span class="star star--4"></span> + <span class="star star--5"></span> + <span class="star star--6"></span> + </label> </div> </div> - <FormSwitch v-model="syncDeviceDarkMode">{{ $ts.syncDeviceDarkMode }}</FormSwitch> - </FormGroup> + <div class="sync"> + <FormSwitch v-model="syncDeviceDarkMode">{{ $ts.syncDeviceDarkMode }}</FormSwitch> + </div> + </div> <template v-if="darkMode"> - <FormSelect v-model="darkThemeId"> + <FormSelect v-model="darkThemeId" class="_formBlock"> <template #label>{{ $ts.themeForDarkMode }}</template> + <template #prefix><i class="fas fa-moon"></i></template> <optgroup :label="$ts.darkThemes"> <option v-for="x in darkThemes" :key="x.id" :value="x.id">{{ x.name }}</option> </optgroup> @@ -36,8 +37,9 @@ <option v-for="x in lightThemes" :key="x.id" :value="x.id">{{ x.name }}</option> </optgroup> </FormSelect> - <FormSelect v-model="lightThemeId"> + <FormSelect v-model="lightThemeId" class="_formBlock"> <template #label>{{ $ts.themeForLightMode }}</template> + <template #prefix><i class="fas fa-sun"></i></template> <optgroup :label="$ts.lightThemes"> <option v-for="x in lightThemes" :key="x.id" :value="x.id">{{ x.name }}</option> </optgroup> @@ -47,8 +49,9 @@ </FormSelect> </template> <template v-else> - <FormSelect v-model="lightThemeId"> + <FormSelect v-model="lightThemeId" class="_formBlock"> <template #label>{{ $ts.themeForLightMode }}</template> + <template #prefix><i class="fas fa-sun"></i></template> <optgroup :label="$ts.lightThemes"> <option v-for="x in lightThemes" :key="x.id" :value="x.id">{{ x.name }}</option> </optgroup> @@ -56,8 +59,9 @@ <option v-for="x in darkThemes" :key="x.id" :value="x.id">{{ x.name }}</option> </optgroup> </FormSelect> - <FormSelect v-model="darkThemeId"> + <FormSelect v-model="darkThemeId" class="_formBlock"> <template #label>{{ $ts.themeForDarkMode }}</template> + <template #prefix><i class="fas fa-moon"></i></template> <optgroup :label="$ts.darkThemes"> <option v-for="x in darkThemes" :key="x.id" :value="x.id">{{ x.name }}</option> </optgroup> @@ -67,31 +71,28 @@ </FormSelect> </template> - <FormButton v-if="wallpaper == null" primary @click="setWallpaper">{{ $ts.setWallpaper }}</FormButton> - <FormButton v-else primary @click="wallpaper = null">{{ $ts.removeWallpaper }}</FormButton> - - <FormGroup> - <FormLink to="https://assets.misskey.io/theme/list" external><template #icon><i class="fas fa-globe"></i></template>{{ $ts._theme.explore }}</FormLink> - <FormLink to="/settings/theme/install"><template #icon><i class="fas fa-download"></i></template>{{ $ts._theme.install }}</FormLink> - </FormGroup> - - <FormGroup> - <FormLink to="/theme-editor"><template #icon><i class="fas fa-paint-roller"></i></template>{{ $ts._theme.make }}</FormLink> - <!--<FormLink to="/advanced-theme-editor"><template #icon><i class="fas fa-paint-roller"></i></template>{{ $ts._theme.make }} ({{ $ts.advanced }})</FormLink>--> - </FormGroup> + <FormSection> + <div class="_formLinksGrid"> + <FormLink to="/settings/theme/manage"><template #icon><i class="fas fa-folder-open"></i></template>{{ $ts._theme.manage }}<template #suffix>{{ themesCount }}</template></FormLink> + <FormLink to="https://assets.misskey.io/theme/list" external><template #icon><i class="fas fa-globe"></i></template>{{ $ts._theme.explore }}</FormLink> + <FormLink to="/settings/theme/install"><template #icon><i class="fas fa-download"></i></template>{{ $ts._theme.install }}</FormLink> + <FormLink to="/theme-editor"><template #icon><i class="fas fa-paint-roller"></i></template>{{ $ts._theme.make }}</FormLink> + </div> + </FormSection> - <FormLink to="/settings/theme/manage"><template #icon><i class="fas fa-folder-open"></i></template>{{ $ts._theme.manage }}<template #suffix>{{ themesCount }}</template></FormLink> -</FormBase> + <FormButton v-if="wallpaper == null" class="_formBlock" @click="setWallpaper">{{ $ts.setWallpaper }}</FormButton> + <FormButton v-else class="_formBlock" @click="wallpaper = null">{{ $ts.removeWallpaper }}</FormButton> +</div> </template> <script lang="ts"> import { computed, defineComponent, onActivated, onMounted, ref, watch } from 'vue'; -import FormSwitch from '@/components/debobigego/switch.vue'; -import FormSelect from '@/components/debobigego/select.vue'; -import FormBase from '@/components/debobigego/base.vue'; -import FormGroup from '@/components/debobigego/group.vue'; -import FormLink from '@/components/debobigego/link.vue'; -import FormButton from '@/components/debobigego/button.vue'; +import FormSwitch from '@/components/form/switch.vue'; +import FormSelect from '@/components/form/select.vue'; +import FormGroup from '@/components/form/group.vue'; +import FormSection from '@/components/form/section.vue'; +import FormLink from '@/components/form/link.vue'; +import FormButton from '@/components/ui/button.vue'; import { builtinThemes } from '@/scripts/theme'; import { selectFile } from '@/scripts/select-file'; import { isDeviceDarkmode } from '@/scripts/is-device-darkmode'; @@ -105,8 +106,8 @@ export default defineComponent({ components: { FormSwitch, FormSelect, - FormBase, FormGroup, + FormSection, FormLink, FormButton, }, @@ -198,11 +199,12 @@ export default defineComponent({ <style lang="scss" scoped> .rfqxtzch { - padding: 16px; + border-radius: 6px; - > .darkMode { + > .toggle { position: relative; - padding: 32px 0; + padding: 26px 0; + text-align: center; &.disabled { opacity: 0.7; @@ -212,13 +214,11 @@ export default defineComponent({ } } - .toggleWrapper { - position: absolute; - top: 50%; - left: 50%; - overflow: hidden; + > .toggleWrapper { + display: inline-block; + text-align: left; + overflow: clip; padding: 0 100px; - transform: translate3d(-50%, -50%, 0); input { position: absolute; @@ -239,7 +239,6 @@ export default defineComponent({ > .before, > .after { position: absolute; top: 15px; - font-size: 18px; transition: color 1s ease; } @@ -420,5 +419,10 @@ export default defineComponent({ } } } + + > .sync { + padding: 14px 16px; + border-top: solid 0.5px var(--divider); + } } </style> diff --git a/packages/client/src/pages/settings/word-mute.vue b/packages/client/src/pages/settings/word-mute.vue index f97557ece3..068f88740a 100644 --- a/packages/client/src/pages/settings/word-mute.vue +++ b/packages/client/src/pages/settings/word-mute.vue @@ -1,32 +1,30 @@ <template> -<div> - <MkTab v-model="tab"> +<div class="_formRoot"> + <MkTab v-model="tab" class="_formBlock"> <option value="soft">{{ $ts._wordMute.soft }}</option> <option value="hard">{{ $ts._wordMute.hard }}</option> </MkTab> - <FormBase> - <div class="_debobigegoItem"> - <div v-show="tab === 'soft'"> - <FormInfo>{{ $ts._wordMute.softDescription }}</FormInfo> - <FormTextarea v-model="softMutedWords"> - <span>{{ $ts._wordMute.muteWords }}</span> - <template #desc>{{ $ts._wordMute.muteWordsDescription }}<br>{{ $ts._wordMute.muteWordsDescription2 }}</template> - </FormTextarea> - </div> - <div v-show="tab === 'hard'"> - <FormInfo>{{ $ts._wordMute.hardDescription }}</FormInfo> - <FormTextarea v-model="hardMutedWords"> - <span>{{ $ts._wordMute.muteWords }}</span> - <template #desc>{{ $ts._wordMute.muteWordsDescription }}<br>{{ $ts._wordMute.muteWordsDescription2 }}</template> - </FormTextarea> - <FormKeyValueView v-if="hardWordMutedNotesCount != null"> - <template #key>{{ $ts._wordMute.mutedNotes }}</template> - <template #value>{{ number(hardWordMutedNotesCount) }}</template> - </FormKeyValueView> - </div> + <div class="_formBlock"> + <div v-show="tab === 'soft'"> + <MkInfo class="_formBlock">{{ $ts._wordMute.softDescription }}</MkInfo> + <FormTextarea v-model="softMutedWords" class="_formBlock"> + <span>{{ $ts._wordMute.muteWords }}</span> + <template #caption>{{ $ts._wordMute.muteWordsDescription }}<br>{{ $ts._wordMute.muteWordsDescription2 }}</template> + </FormTextarea> </div> - <FormButton primary inline :disabled="!changed" @click="save()"><i class="fas fa-save"></i> {{ $ts.save }}</FormButton> - </FormBase> + <div v-show="tab === 'hard'"> + <MkInfo class="_formBlock">{{ $ts._wordMute.hardDescription }}</MkInfo> + <FormTextarea v-model="hardMutedWords" class="_formBlock"> + <span>{{ $ts._wordMute.muteWords }}</span> + <template #caption>{{ $ts._wordMute.muteWordsDescription }}<br>{{ $ts._wordMute.muteWordsDescription2 }}</template> + </FormTextarea> + <MkKeyValue v-if="hardWordMutedNotesCount != null" class="_formBlock"> + <template #key>{{ $ts._wordMute.mutedNotes }}</template> + <template #value>{{ number(hardWordMutedNotesCount) }}</template> + </MkKeyValue> + </div> + </div> + <MkButton primary inline :disabled="!changed" @click="save()"><i class="fas fa-save"></i> {{ $ts.save }}</MkButton> </div> </template> @@ -34,9 +32,9 @@ import { defineComponent } from 'vue'; import FormTextarea from '@/components/form/textarea.vue'; import FormBase from '@/components/debobigego/base.vue'; -import FormKeyValueView from '@/components/debobigego/key-value-view.vue'; -import FormButton from '@/components/debobigego/button.vue'; -import FormInfo from '@/components/debobigego/info.vue'; +import MkKeyValue from '@/components/key-value.vue'; +import MkButton from '@/components/ui/button.vue'; +import MkInfo from '@/components/ui/info.vue'; import MkTab from '@/components/tab.vue'; import * as os from '@/os'; import number from '@/filters/number'; @@ -45,11 +43,11 @@ import * as symbols from '@/symbols'; export default defineComponent({ components: { FormBase, - FormButton, + MkButton, FormTextarea, - FormKeyValueView, + MkKeyValue, MkTab, - FormInfo, + MkInfo, }, emits: ['info'], diff --git a/packages/client/src/pages/timeline.vue b/packages/client/src/pages/timeline.vue index 81de0277f5..494932c602 100644 --- a/packages/client/src/pages/timeline.vue +++ b/packages/client/src/pages/timeline.vue @@ -1,20 +1,22 @@ <template> -<div v-size="{ min: [800] }" v-hotkey.global="keymap" class="cmuxhskf"> - <XTutorial v-if="$store.reactiveState.tutorial.value != -1" class="tutorial _block"/> - <XPostForm v-if="$store.reactiveState.showFixedPostForm.value" class="post-form _block" fixed/> +<MkSpacer :content-max="800"> + <div v-hotkey.global="keymap" class="cmuxhskf"> + <XTutorial v-if="$store.reactiveState.tutorial.value != -1" class="tutorial _block"/> + <XPostForm v-if="$store.reactiveState.showFixedPostForm.value" class="post-form _block" fixed/> - <div v-if="queue > 0" class="new"><button class="_buttonPrimary" @click="top()">{{ $ts.newNoteRecived }}</button></div> - <div class="tl _block"> - <XTimeline ref="tl" :key="src" - class="tl" - :src="src" - :sound="true" - @before="before()" - @after="after()" - @queue="queueUpdated" - /> + <div v-if="queue > 0" class="new"><button class="_buttonPrimary" @click="top()">{{ $ts.newNoteRecived }}</button></div> + <div class="tl _block"> + <XTimeline ref="tl" :key="src" + class="tl" + :src="src" + :sound="true" + @before="before()" + @after="after()" + @queue="queueUpdated" + /> + </div> </div> -</div> +</MkSpacer> </template> <script lang="ts"> @@ -66,7 +68,7 @@ export default defineComponent({ icon: 'fas fa-home', iconOnly: true, onClick: () => { this.src = 'home'; this.saveSrc(); }, - }, { + }, ...(this.isLocalTimelineAvailable ? [{ active: this.src === 'local', title: this.$ts._timelines.local, icon: 'fas fa-comments', @@ -78,13 +80,13 @@ export default defineComponent({ icon: 'fas fa-share-alt', iconOnly: true, onClick: () => { this.src = 'social'; this.saveSrc(); }, - }, { + }] : []), ...(this.isGlobalTimelineAvailable ? [{ active: this.src === 'global', title: this.$ts._timelines.global, icon: 'fas fa-globe', iconOnly: true, onClick: () => { this.src = 'global'; this.saveSrc(); }, - }], + }] : [])], })), }; }, @@ -188,8 +190,6 @@ export default defineComponent({ <style lang="scss" scoped> .cmuxhskf { - padding: var(--margin); - > .new { position: sticky; top: calc(var(--stickyTop, 0px) + 16px); @@ -213,10 +213,5 @@ export default defineComponent({ border-radius: var(--radius); overflow: clip; } - - &.min-width_800px { - max-width: 800px; - margin: 0 auto; - } } </style> diff --git a/packages/client/src/pages/user/clips.vue b/packages/client/src/pages/user/clips.vue index 9e16bfc45b..aad5317ce0 100644 --- a/packages/client/src/pages/user/clips.vue +++ b/packages/client/src/pages/user/clips.vue @@ -1,6 +1,6 @@ <template> <div> - <MkPagination #default="{items}" ref="list" :pagination="pagination"> + <MkPagination v-slot="{items}" ref="list" :pagination="pagination"> <MkA v-for="item in items" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _gap"> <b>{{ item.name }}</b> <div v-if="item.description" class="description">{{ item.description }}</div> diff --git a/packages/client/src/pages/user/follow-list.vue b/packages/client/src/pages/user/follow-list.vue index 2cfb8ee1ad..9fb8943fb8 100644 --- a/packages/client/src/pages/user/follow-list.vue +++ b/packages/client/src/pages/user/follow-list.vue @@ -1,6 +1,6 @@ <template> <div> - <MkPagination #default="{items}" ref="list" :pagination="pagination" class="mk-following-or-followers"> + <MkPagination v-slot="{items}" ref="list" :pagination="pagination" class="mk-following-or-followers"> <div class="users _isolated"> <MkUserInfo v-for="user in items.map(x => type === 'following' ? x.followee : x.follower)" :key="user.id" class="user" :user="user"/> </div> diff --git a/packages/client/src/pages/user/gallery.vue b/packages/client/src/pages/user/gallery.vue index 9def25c2ae..860aa9f44f 100644 --- a/packages/client/src/pages/user/gallery.vue +++ b/packages/client/src/pages/user/gallery.vue @@ -1,6 +1,6 @@ <template> <div> - <MkPagination #default="{items}" :pagination="pagination"> + <MkPagination v-slot="{items}" :pagination="pagination"> <div class="jrnovfpt"> <MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/> </div> diff --git a/packages/client/src/pages/user/index.photos.vue b/packages/client/src/pages/user/index.photos.vue index 589a9465da..79dd1726e1 100644 --- a/packages/client/src/pages/user/index.photos.vue +++ b/packages/client/src/pages/user/index.photos.vue @@ -20,7 +20,7 @@ <script lang="ts"> import { defineComponent } from 'vue'; import { getStaticImageUrl } from '@/scripts/get-static-image-url'; -import notePage from '@/filters/note'; +import { notePage } from '@/filters/note'; import * as os from '@/os'; import MkContainer from '@/components/ui/container.vue'; import ImgWithBlurhash from '@/components/img-with-blurhash.vue'; diff --git a/packages/client/src/pages/user/pages.vue b/packages/client/src/pages/user/pages.vue index eb8f10d8aa..40d1fe3842 100644 --- a/packages/client/src/pages/user/pages.vue +++ b/packages/client/src/pages/user/pages.vue @@ -1,6 +1,6 @@ <template> <div> - <MkPagination #default="{items}" ref="list" :pagination="pagination"> + <MkPagination v-slot="{items}" ref="list" :pagination="pagination"> <MkPagePreview v-for="page in items" :key="page.id" :page="page" class="_gap"/> </MkPagination> </div> diff --git a/packages/client/src/pages/user/reactions.vue b/packages/client/src/pages/user/reactions.vue index eff456372c..69c27de55b 100644 --- a/packages/client/src/pages/user/reactions.vue +++ b/packages/client/src/pages/user/reactions.vue @@ -1,6 +1,6 @@ <template> <div> - <MkPagination #default="{items}" ref="list" :pagination="pagination"> + <MkPagination v-slot="{items}" ref="list" :pagination="pagination"> <div v-for="item in items" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _gap afdcfbfb"> <div class="header"> <MkAvatar class="avatar" :user="user"/> diff --git a/packages/client/src/scripts/get-user-menu.ts b/packages/client/src/scripts/get-user-menu.ts index 0c04547101..ebe101bc0f 100644 --- a/packages/client/src/scripts/get-user-menu.ts +++ b/packages/client/src/scripts/get-user-menu.ts @@ -109,6 +109,14 @@ export function getUserMenu(user) { return !confirm.canceled; } + async function invalidateFollow() { + os.apiWithDialog('following/invalidate', { + userId: user.id + }).then(() => { + user.isFollowed = !user.isFollowed; + }) + } + let menu = [{ icon: 'fas fa-at', text: i18n.locale.copyUsername, @@ -153,6 +161,14 @@ export function getUserMenu(user) { action: toggleBlock }]); + if (user.isFollowed) { + menu = menu.concat([{ + icon: 'fas fa-unlink', + text: i18n.locale.breakFollow, + action: invalidateFollow + }]); + } + menu = menu.concat([null, { icon: 'fas fa-exclamation-circle', text: i18n.locale.reportAbuse, diff --git a/packages/client/src/scripts/mfm-tags.ts b/packages/client/src/scripts/mfm-tags.ts index 1b18210aa9..18e8d7038a 100644 --- a/packages/client/src/scripts/mfm-tags.ts +++ b/packages/client/src/scripts/mfm-tags.ts @@ -1 +1 @@ -export const MFM_TAGS = ['tada', 'jelly', 'twitch', 'shake', 'spin', 'jump', 'bounce', 'flip', 'x2', 'x3', 'x4', 'font', 'blur', 'rainbow', 'sparkle']; +export const MFM_TAGS = ['tada', 'jelly', 'twitch', 'shake', 'spin', 'jump', 'bounce', 'flip', 'x2', 'x3', 'x4', 'font', 'blur', 'rainbow', 'sparkle', 'rotate']; diff --git a/packages/client/src/scripts/use-tooltip.ts b/packages/client/src/scripts/use-tooltip.ts index 2c0c36400d..a9bf6d93db 100644 --- a/packages/client/src/scripts/use-tooltip.ts +++ b/packages/client/src/scripts/use-tooltip.ts @@ -1,4 +1,6 @@ +import { isScreenTouching } from '@/os'; import { Ref, ref } from 'vue'; +import { isDeviceTouch } from './is-device-touch'; export function useTooltip(onShow: (showing: Ref<boolean>) => void) { let isHovering = false; @@ -10,6 +12,10 @@ export function useTooltip(onShow: (showing: Ref<boolean>) => void) { close(); if (!isHovering) return; + // iOS(Androidも？)では、要素をタップした直後に(おせっかいで)mouseoverイベントを発火させたりするため、その対策 + // これが無いと、画面に触れてないのにツールチップが出たりしてしまう + if (isDeviceTouch && !isScreenTouching) return; + const showing = ref(true); onShow(showing); changeShowingState = () => { diff --git a/packages/client/src/style.scss b/packages/client/src/style.scss index 951d5a14f3..eeb8d1e82d 100644 --- a/packages/client/src/style.scss +++ b/packages/client/src/style.scss @@ -29,6 +29,7 @@ html { overflow: auto; overflow-wrap: break-word; font-family: "BIZ UDGothic", Roboto, HelveticaNeue, Arial, sans-serif; + font-size: 15px; line-height: 1.35; text-size-adjust: 100%; tab-size: 2; @@ -387,9 +388,8 @@ hr { ._inputSplit { display: grid; - grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); - grid-gap: 8px; - margin: 1em 0; + grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); + grid-gap: 12px; > * { margin: 0 !important; @@ -397,7 +397,7 @@ hr { } ._formBlock { - margin: 20px 0; + margin: 1.5em 0; } ._formRoot { @@ -410,6 +410,18 @@ hr { } } +._formLinksGrid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + grid-gap: 12px; +} + +._formLinks { + > *:not(:last-child) { + margin-bottom: 8px; + } +} + ._table { > ._row { display: flex; diff --git a/packages/client/src/ui/_common_/sidebar-for-mobile.vue b/packages/client/src/ui/_common_/sidebar-for-mobile.vue new file mode 100644 index 0000000000..5babdb98a8 --- /dev/null +++ b/packages/client/src/ui/_common_/sidebar-for-mobile.vue @@ -0,0 +1,205 @@ +<template> +<div class="kmwsukvl"> + <div> + <button v-click-anime class="item _button account" @click="openAccountMenu"> + <MkAvatar :user="$i" class="avatar"/><MkAcct class="text" :user="$i"/> + </button> + <MkA v-click-anime class="item index" active-class="active" to="/" exact> + <i class="fas fa-home fa-fw"></i><span class="text">{{ $ts.timeline }}</span> + </MkA> + <template v-for="item in menu"> + <div v-if="item === '-'" class="divider"></div> + <component :is="menuDef[item].to ? 'MkA' : 'button'" v-else-if="menuDef[item] && (menuDef[item].show !== false)" v-click-anime class="item _button" :class="[item, { active: menuDef[item].active }]" active-class="active" :to="menuDef[item].to" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}"> + <i class="fa-fw" :class="menuDef[item].icon"></i><span class="text">{{ $ts[menuDef[item].title] }}</span> + <span v-if="menuDef[item].indicated" class="indicator"><i class="fas fa-circle"></i></span> + </component> + </template> + <div class="divider"></div> + <MkA v-if="$i.isAdmin || $i.isModerator" v-click-anime class="item" active-class="active" to="/admin"> + <i class="fas fa-door-open fa-fw"></i><span class="text">{{ $ts.controlPanel }}</span> + </MkA> + <button v-click-anime class="item _button" @click="more"> + <i class="fa fa-ellipsis-h fa-fw"></i><span class="text">{{ $ts.more }}</span> + <span v-if="otherMenuItemIndicated" class="indicator"><i class="fas fa-circle"></i></span> + </button> + <MkA v-click-anime class="item" active-class="active" to="/settings"> + <i class="fas fa-cog fa-fw"></i><span class="text">{{ $ts.settings }}</span> + </MkA> + <button class="item _button post" data-cy-open-post-form @click="post"> + <i class="fas fa-pencil-alt fa-fw"></i><span class="text">{{ $ts.note }}</span> + </button> + </div> +</div> +</template> + +<script lang="ts"> +import { computed, defineComponent, ref, toRef, watch } from 'vue'; +import { host } from '@/config'; +import { search } from '@/scripts/search'; +import * as os from '@/os'; +import { menuDef } from '@/menu'; +import { openAccountMenu } from '@/account'; +import { defaultStore } from '@/store'; + +export default defineComponent({ + setup(props, context) { + const menu = toRef(defaultStore.state, 'menu'); + const otherMenuItemIndicated = computed(() => { + for (const def in menuDef) { + if (menu.value.includes(def)) continue; + if (menuDef[def].indicated) return true; + } + return false; + }); + + return { + host: host, + accounts: [], + connection: null, + menu, + menuDef: menuDef, + otherMenuItemIndicated, + post: os.post, + search, + openAccountMenu, + more: () => { + os.popup(import('@/components/launch-pad.vue'), {}, { + }, 'closed'); + }, + }; + }, +}); +</script> + +<style lang="scss" scoped> +.kmwsukvl { + $ui-font-size: 1em; // TODO: どこかに集約したい + $avatar-size: 32px; + $avatar-margin: 8px; + + > div { + + > .divider { + margin: 16px 16px; + border-top: solid 0.5px var(--divider); + } + + > .item { + position: relative; + display: block; + padding-left: 24px; + font-size: $ui-font-size; + line-height: 2.85rem; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + width: 100%; + text-align: left; + box-sizing: border-box; + color: var(--navFg); + + > i { + position: relative; + width: 32px; + } + + > i, + > .avatar { + margin-right: $avatar-margin; + } + + > .avatar { + width: $avatar-size; + height: $avatar-size; + vertical-align: middle; + } + + > .indicator { + position: absolute; + top: 0; + left: 20px; + color: var(--navIndicator); + font-size: 8px; + animation: blink 1s infinite; + } + + > .text { + position: relative; + font-size: 0.9em; + } + + &:hover { + text-decoration: none; + color: var(--navHoverFg); + } + + &.active { + color: var(--navActive); + } + + &:hover, &.active { + &:before { + content: ""; + display: block; + width: calc(100% - 24px); + height: 100%; + margin: auto; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + border-radius: 999px; + background: var(--accentedBg); + } + } + + &:first-child, &:last-child { + position: sticky; + z-index: 1; + padding-top: 8px; + padding-bottom: 8px; + background: var(--X14); + -webkit-backdrop-filter: var(--blur, blur(8px)); + backdrop-filter: var(--blur, blur(8px)); + } + + &:first-child { + top: 0; + + &:hover, &.active { + &:before { + content: none; + } + } + } + + &:last-child { + bottom: 0; + color: var(--fgOnAccent); + + &:before { + content: ""; + display: block; + width: calc(100% - 20px); + height: calc(100% - 20px); + margin: auto; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + border-radius: 999px; + background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB)); + } + + &:hover, &.active { + &:before { + background: var(--accentLighten); + } + } + } + } + } +} +</style> diff --git a/packages/client/src/ui/_common_/sidebar.vue b/packages/client/src/ui/_common_/sidebar.vue index 6abb21d963..00e95d3663 100644 --- a/packages/client/src/ui/_common_/sidebar.vue +++ b/packages/client/src/ui/_common_/sidebar.vue @@ -1,385 +1,300 @@ <template> -<div class="mvcprjjd"> - <transition name="nav-back"> - <div v-if="showing" - class="nav-back _modalBg" - @click="showing = false" - @touchstart.passive="showing = false" - ></div> - </transition> - - <transition name="nav"> - <nav v-show="showing" class="nav" :class="{ iconOnly, hidden }"> - <div> - <button v-click-anime class="item _button account" @click="openAccountMenu"> - <MkAvatar :user="$i" class="avatar"/><MkAcct class="text" :user="$i"/> - </button> - <MkA v-click-anime class="item index" active-class="active" to="/" exact> - <i class="fas fa-home fa-fw"></i><span class="text">{{ $ts.timeline }}</span> - </MkA> - <template v-for="item in menu"> - <div v-if="item === '-'" class="divider"></div> - <component :is="menuDef[item].to ? 'MkA' : 'button'" v-else-if="menuDef[item] && (menuDef[item].show !== false)" v-click-anime class="item _button" :class="[item, { active: menuDef[item].active }]" active-class="active" :to="menuDef[item].to" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}"> - <i class="fa-fw" :class="menuDef[item].icon"></i><span class="text">{{ $ts[menuDef[item].title] }}</span> - <span v-if="menuDef[item].indicated" class="indicator"><i class="fas fa-circle"></i></span> - </component> - </template> - <div class="divider"></div> - <MkA v-if="$i.isAdmin || $i.isModerator" v-click-anime class="item" active-class="active" to="/admin"> - <i class="fas fa-door-open fa-fw"></i><span class="text">{{ $ts.controlPanel }}</span> - </MkA> - <button v-click-anime class="item _button" @click="more"> - <i class="fa fa-ellipsis-h fa-fw"></i><span class="text">{{ $ts.more }}</span> - <span v-if="otherNavItemIndicated" class="indicator"><i class="fas fa-circle"></i></span> - </button> - <MkA v-click-anime class="item" active-class="active" to="/settings"> - <i class="fas fa-cog fa-fw"></i><span class="text">{{ $ts.settings }}</span> - </MkA> - <button class="item _button post" data-cy-open-post-form @click="post"> - <i class="fas fa-pencil-alt fa-fw"></i><span class="text">{{ $ts.note }}</span> - </button> - </div> - </nav> - </transition> +<div class="mvcprjjd" :class="{ iconOnly }"> + <div> + <button v-click-anime class="item _button account" @click="openAccountMenu"> + <MkAvatar :user="$i" class="avatar"/><MkAcct class="text" :user="$i"/> + </button> + <MkA v-click-anime class="item index" active-class="active" to="/" exact> + <i class="fas fa-home fa-fw"></i><span class="text">{{ $ts.timeline }}</span> + </MkA> + <template v-for="item in menu"> + <div v-if="item === '-'" class="divider"></div> + <component :is="menuDef[item].to ? 'MkA' : 'button'" v-else-if="menuDef[item] && (menuDef[item].show !== false)" v-click-anime class="item _button" :class="[item, { active: menuDef[item].active }]" active-class="active" :to="menuDef[item].to" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}"> + <i class="fa-fw" :class="menuDef[item].icon"></i><span class="text">{{ $ts[menuDef[item].title] }}</span> + <span v-if="menuDef[item].indicated" class="indicator"><i class="fas fa-circle"></i></span> + </component> + </template> + <div class="divider"></div> + <MkA v-if="$i.isAdmin || $i.isModerator" v-click-anime class="item" active-class="active" to="/admin"> + <i class="fas fa-door-open fa-fw"></i><span class="text">{{ $ts.controlPanel }}</span> + </MkA> + <button v-click-anime class="item _button" @click="more"> + <i class="fa fa-ellipsis-h fa-fw"></i><span class="text">{{ $ts.more }}</span> + <span v-if="otherMenuItemIndicated" class="indicator"><i class="fas fa-circle"></i></span> + </button> + <MkA v-click-anime class="item" active-class="active" to="/settings"> + <i class="fas fa-cog fa-fw"></i><span class="text">{{ $ts.settings }}</span> + </MkA> + <button class="item _button post" data-cy-open-post-form @click="post"> + <i class="fas fa-pencil-alt fa-fw"></i><span class="text">{{ $ts.note }}</span> + </button> + </div> </div> </template> <script lang="ts"> -import { defineComponent } from 'vue'; +import { computed, defineComponent, ref, watch } from 'vue'; import { host } from '@/config'; import { search } from '@/scripts/search'; import * as os from '@/os'; import { menuDef } from '@/menu'; import { openAccountMenu } from '@/account'; +import { defaultStore } from '@/store'; export default defineComponent({ - props: { - defaultHidden: { - type: Boolean, - required: false, - default: false, - } - }, - - data() { - return { - host: host, - showing: false, - accounts: [], - connection: null, - menuDef: menuDef, - iconOnly: false, - hidden: this.defaultHidden, - }; - }, + setup(props, context) { + const iconOnly = ref(false); - computed: { - menu(): string[] { - return this.$store.state.menu; - }, - - otherNavItemIndicated(): boolean { - for (const def in this.menuDef) { - if (this.menu.includes(def)) continue; - if (this.menuDef[def].indicated) return true; + const menu = computed(() => defaultStore.state.menu); + const otherMenuItemIndicated = computed(() => { + for (const def in menuDef) { + if (menu.value.includes(def)) continue; + if (menuDef[def].indicated) return true; } return false; - }, - }, + }); - watch: { - $route(to, from) { - this.showing = false; - }, + const calcViewState = () => { + iconOnly.value = (window.innerWidth <= 1279) || (defaultStore.state.menuDisplay === 'sideIcon'); + }; - '$store.reactiveState.menuDisplay.value'() { - this.calcViewState(); - }, + calcViewState(); - iconOnly() { - this.$nextTick(() => { - this.$emit('change-view-mode'); - }); - }, + window.addEventListener('resize', calcViewState); - hidden() { - this.$nextTick(() => { - this.$emit('change-view-mode'); - }); - } - }, + watch(defaultStore.reactiveState.menuDisplay, () => { + calcViewState(); + }); - created() { - window.addEventListener('resize', this.calcViewState); - this.calcViewState(); + return { + host: host, + accounts: [], + connection: null, + menu, + menuDef: menuDef, + otherMenuItemIndicated, + iconOnly, + post: os.post, + search, + openAccountMenu, + more: () => { + os.popup(import('@/components/launch-pad.vue'), {}, { + }, 'closed'); + }, + }; }, - - methods: { - calcViewState() { - this.iconOnly = (window.innerWidth <= 1279) || (this.$store.state.menuDisplay === 'sideIcon'); - if (!this.defaultHidden) { - this.hidden = (window.innerWidth <= 650); - } - }, - - show() { - this.showing = true; - }, - - post() { - os.post(); - }, - - search() { - search(); - }, - - more(ev) { - os.popup(import('@/components/launch-pad.vue'), {}, { - }, 'closed'); - }, - - openAccountMenu, - } }); </script> <style lang="scss" scoped> -.nav-enter-active, -.nav-leave-active { - opacity: 1; - transform: translateX(0); - transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1); -} -.nav-enter-from, -.nav-leave-active { - opacity: 0; - transform: translateX(-240px); -} - -.nav-back-enter-active, -.nav-back-leave-active { - opacity: 1; - transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1); -} -.nav-back-enter-from, -.nav-back-leave-active { - opacity: 0; -} - .mvcprjjd { $ui-font-size: 1em; // TODO: どこかに集約したい $nav-width: 250px; $nav-icon-only-width: 86px; + $avatar-size: 32px; + $avatar-margin: 8px; - > .nav-back { - z-index: 1001; - } - - > .nav { - $avatar-size: 32px; - $avatar-margin: 8px; + flex: 0 0 $nav-width; + width: $nav-width; + box-sizing: border-box; - flex: 0 0 $nav-width; + > div { + position: fixed; + top: 0; + left: 0; + z-index: 1001; width: $nav-width; + // ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ + height: calc(var(--vh, 1vh) * 100); box-sizing: border-box; + overflow: auto; + overflow-x: clip; + background: var(--navBg); - &.iconOnly { - flex: 0 0 $nav-icon-only-width; - width: $nav-icon-only-width; + > .divider { + margin: 16px 16px; + border-top: solid 0.5px var(--divider); + } - &:not(.hidden) { - > div { - width: $nav-icon-only-width; + > .item { + position: relative; + display: block; + padding-left: 24px; + font-size: $ui-font-size; + line-height: 2.85rem; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + width: 100%; + text-align: left; + box-sizing: border-box; + color: var(--navFg); - > .divider { - margin: 8px auto; - width: calc(100% - 32px); - } + > i { + position: relative; + width: 32px; + } - > .item { - padding-left: 0; - padding: 18px 0; - width: 100%; - text-align: center; - font-size: $ui-font-size * 1.1; - line-height: initial; + > i, + > .avatar { + margin-right: $avatar-margin; + } + + > .avatar { + width: $avatar-size; + height: $avatar-size; + vertical-align: middle; + } + + > .indicator { + position: absolute; + top: 0; + left: 20px; + color: var(--navIndicator); + font-size: 8px; + animation: blink 1s infinite; + } + + > .text { + position: relative; + font-size: 0.9em; + } - > i, - > .avatar { - display: block; - margin: 0 auto; - } + &:hover { + text-decoration: none; + color: var(--navHoverFg); + } - > i { - opacity: 0.7; - } + &.active { + color: var(--navActive); + } - > .text { - display: none; - } + &:hover, &.active { + &:before { + content: ""; + display: block; + width: calc(100% - 24px); + height: 100%; + margin: auto; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + border-radius: 999px; + background: var(--accentedBg); + } + } - &:hover, &.active { - > i, > .text { - opacity: 1; - } - } + &:first-child, &:last-child { + position: sticky; + z-index: 1; + padding-top: 8px; + padding-bottom: 8px; + background: var(--X14); + -webkit-backdrop-filter: var(--blur, blur(8px)); + backdrop-filter: var(--blur, blur(8px)); + } - &:first-child { - margin-bottom: 8px; - } + &:first-child { + top: 0; - &:last-child { - margin-top: 8px; - } + &:hover, &.active { + &:before { + content: none; } } } - } - &.hidden { - position: fixed; - top: 0; - left: 0; - z-index: 1001; - } + &:last-child { + bottom: 0; + color: var(--fgOnAccent); - &:not(.hidden) { - display: block !important; + &:before { + content: ""; + display: block; + width: calc(100% - 20px); + height: calc(100% - 20px); + margin: auto; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + border-radius: 999px; + background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB)); + } + + &:hover, &.active { + &:before { + background: var(--accentLighten); + } + } + } } + } + + &.iconOnly { + flex: 0 0 $nav-icon-only-width; + width: $nav-icon-only-width; > div { - position: fixed; - top: 0; - left: 0; - z-index: 1001; - width: $nav-width; - // ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ - height: calc(var(--vh, 1vh) * 100); - box-sizing: border-box; - overflow: auto; - overflow-x: clip; - background: var(--navBg); + width: $nav-icon-only-width; > .divider { - margin: 16px 16px; - border-top: solid 0.5px var(--divider); + margin: 8px auto; + width: calc(100% - 32px); } > .item { - position: relative; - display: block; - padding-left: 24px; - font-size: $ui-font-size; - line-height: 2.85rem; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; + padding-left: 0; + padding: 18px 0; width: 100%; - text-align: left; - box-sizing: border-box; - color: var(--navFg); - - > i { - position: relative; - width: 32px; - } + text-align: center; + font-size: $ui-font-size * 1.1; + line-height: initial; > i, > .avatar { - margin-right: $avatar-margin; + display: block; + margin: 0 auto; } - > .avatar { - width: $avatar-size; - height: $avatar-size; - vertical-align: middle; - } - - > .indicator { - position: absolute; - top: 0; - left: 20px; - color: var(--navIndicator); - font-size: 8px; - animation: blink 1s infinite; + > i { + opacity: 0.7; } > .text { - position: relative; - font-size: 0.9em; - } - - &:hover { - text-decoration: none; - color: var(--navHoverFg); - } - - &.active { - color: var(--navActive); + display: none; } &:hover, &.active { - &:before { - content: ""; - display: block; - width: calc(100% - 24px); - height: 100%; - margin: auto; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - border-radius: 999px; - background: var(--accentedBg); + > i, > .text { + opacity: 1; } } - &:first-child, &:last-child { - position: sticky; - z-index: 1; - padding-top: 8px; - padding-bottom: 8px; - background: var(--X14); - -webkit-backdrop-filter: var(--blur, blur(8px)); - backdrop-filter: var(--blur, blur(8px)); + &:first-child { + margin-bottom: 8px; } - &:first-child { - top: 0; + &:last-child { + margin-top: 8px; + } - &:hover, &.active { - &:before { - content: none; - } - } + &:before { + width: 100%; + border-radius: 0; } - &:last-child { - bottom: 0; - color: var(--fgOnAccent); + &.post { + height: $nav-icon-only-width; + } - &:before { - content: ""; - display: block; - width: calc(100% - 20px); - height: calc(100% - 20px); - margin: auto; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - border-radius: 999px; - background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB)); - } - - &:hover, &.active { - &:before { - background: var(--accentLighten); - } - } + &.post:before { + width: calc(100% - 32px); + height: calc(100% - 32px); + border-radius: 100%; } } } diff --git a/packages/client/src/ui/chat/note-header.vue b/packages/client/src/ui/chat/note-header.vue index 0b318ba8f1..5f87fdd14e 100644 --- a/packages/client/src/ui/chat/note-header.vue +++ b/packages/client/src/ui/chat/note-header.vue @@ -5,8 +5,6 @@ </MkA> <span v-if="note.user.isBot" class="is-bot">bot</span> <span class="username"><MkAcct :user="note.user"/></span> - <span v-if="note.user.isAdmin" class="admin"><i class="fas fa-bookmark"></i></span> - <span v-if="!note.user.isAdmin && note.user.isModerator" class="moderator"><i class="far fa-bookmark"></i></span> <div class="info"> <MkA class="created-at" :to="notePage(note)"> <MkTime :time="note.createdAt"/> @@ -23,7 +21,7 @@ <script lang="ts"> import { defineComponent } from 'vue'; -import notePage from '@/filters/note'; +import { notePage } from '@/filters/note'; import { userPage } from '@/filters/user'; import * as os from '@/os'; @@ -79,12 +77,6 @@ export default defineComponent({ border-radius: 3px; } - > .admin, - > .moderator { - margin-right: 0.5em; - color: var(--badge); - } - > .username { margin: 0 .5em 0 0; overflow: hidden; diff --git a/packages/client/src/ui/chat/note.vue b/packages/client/src/ui/chat/note.vue index 512c87a59e..6927dd0eaf 100644 --- a/packages/client/src/ui/chat/note.vue +++ b/packages/client/src/ui/chat/note.vue @@ -632,6 +632,7 @@ export default defineComponent({ text: this.$ts.pin, action: () => this.togglePin(true) } : undefined, + /* ...(this.$i.isModerator || this.$i.isAdmin ? [ null, { @@ -640,7 +641,7 @@ export default defineComponent({ action: this.promote }] : [] - ), + ),*/ ...(this.appearNote.userId != this.$i.id ? [ null, { diff --git a/packages/client/src/ui/classic.vue b/packages/client/src/ui/classic.vue index fe533662d0..41da973152 100644 --- a/packages/client/src/ui/classic.vue +++ b/packages/client/src/ui/classic.vue @@ -1,16 +1,14 @@ <template> -<div class="mk-app" :class="{ wallpaper, isMobile }" :style="`--globalHeaderHeight:${globalHeaderHeight}px`"> +<div class="gbhvwtnk" :class="{ wallpaper }" :style="`--globalHeaderHeight:${globalHeaderHeight}px`"> <XHeaderMenu v-if="showMenuOnTop" v-get-size="(w, h) => globalHeaderHeight = h"/> <div class="columns" :class="{ fullView, withGlobalHeader: showMenuOnTop }"> - <template v-if="!isMobile"> - <div v-if="!showMenuOnTop" class="sidebar"> - <XSidebar/> - </div> - <div v-else ref="widgetsLeft" class="widgets left"> - <XWidgets :place="'left'" @mounted="attachSticky('widgetsLeft')"/> - </div> - </template> + <div v-if="!showMenuOnTop" class="sidebar"> + <XSidebar/> + </div> + <div v-else ref="widgetsLeft" class="widgets left"> + <XWidgets :place="'left'" @mounted="attachSticky('widgetsLeft')"/> + </div> <main class="main" :style="{ background: pageInfo?.bg }" @contextmenu.stop="onContextmenu"> <div class="content"> @@ -32,16 +30,6 @@ </div> </div> - <div v-if="isMobile" class="buttons"> - <button ref="navButton" class="button nav _button" @click="showDrawerNav"><i class="fas fa-bars"></i><span v-if="navIndicated" class="indicator"><i class="fas fa-circle"></i></span></button> - <button class="button home _button" @click="$route.name === 'index' ? top() : $router.push('/')"><i class="fas fa-home"></i></button> - <button class="button notifications _button" @click="$router.push('/my/notifications')"><i class="fas fa-bell"></i><span v-if="$i.hasUnreadNotification" class="indicator"><i class="fas fa-circle"></i></span></button> - <button class="button widget _button" @click="widgetsShowing = true"><i class="fas fa-layer-group"></i></button> - <button class="button post _button" @click="post"><i class="fas fa-pencil-alt"></i></button> - </div> - - <XDrawerSidebar v-if="isMobile" ref="drawerNav" class="sidebar"/> - <transition name="tray-back"> <div v-if="widgetsShowing" class="tray-back _modalBg" @@ -65,20 +53,17 @@ import { defineComponent, defineAsyncComponent, markRaw } from 'vue'; import { instanceName } from '@/config'; import { StickySidebar } from '@/scripts/sticky-sidebar'; import XSidebar from './classic.sidebar.vue'; -import XDrawerSidebar from '@/ui/_common_/sidebar.vue'; import XCommon from './_common_/common.vue'; import * as os from '@/os'; import { menuDef } from '@/menu'; import * as symbols from '@/symbols'; const DESKTOP_THRESHOLD = 1100; -const MOBILE_THRESHOLD = 600; export default defineComponent({ components: { XCommon, XSidebar, - XDrawerSidebar, XHeaderMenu: defineAsyncComponent(() => import('./classic.header.vue')), XWidgets: defineAsyncComponent(() => import('./classic.widgets.vue')), }, @@ -86,6 +71,7 @@ export default defineComponent({ provide() { return { shouldHeaderThin: this.showMenuOnTop, + shouldSpacerMin: true, }; }, @@ -94,7 +80,6 @@ export default defineComponent({ pageInfo: null, menuDef: menuDef, globalHeaderHeight: 0, - isMobile: window.innerWidth <= MOBILE_THRESHOLD, isDesktop: window.innerWidth >= DESKTOP_THRESHOLD, widgetsShowing: false, fullView: false, @@ -103,20 +88,17 @@ export default defineComponent({ }, computed: { - navIndicated(): boolean { - for (const def in this.menuDef) { - if (def === 'notifications') continue; // 通知は下にボタンとして表示されてるから - if (this.menuDef[def].indicated) return true; - } - return false; - }, - showMenuOnTop(): boolean { - return !this.isMobile && this.$store.state.menuDisplay === 'top'; + return this.$store.state.menuDisplay === 'top'; } }, created() { + if (window.innerWidth < 1024) { + localStorage.setItem('ui', 'default'); + location.reload(); + } + document.documentElement.style.overflowY = 'scroll'; if (this.$store.state.widgets.length === 0) { @@ -135,7 +117,6 @@ export default defineComponent({ mounted() { window.addEventListener('resize', () => { - this.isMobile = (window.innerWidth <= MOBILE_THRESHOLD); this.isDesktop = (window.innerWidth >= DESKTOP_THRESHOLD); }, { passive: true }); @@ -178,22 +159,10 @@ export default defineComponent({ }, { passive: true }); }, - post() { - os.post(); - }, - top() { window.scroll({ top: 0, behavior: 'smooth' }); }, - back() { - history.back(); - }, - - showDrawerNav() { - this.$refs.drawerNav.show(); - }, - onTransition() { if (window._scroll) window._scroll(); }, @@ -257,10 +226,9 @@ export default defineComponent({ opacity: 0; } -.mk-app { +.gbhvwtnk { $ui-font-size: 1em; $widgets-hide-threshold: 1200px; - $nav-icon-only-width: 78px; // TODO: どこかに集約したい // ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ min-height: calc(var(--vh, 1vh) * 100); @@ -271,21 +239,6 @@ export default defineComponent({ //backdrop-filter: var(--blur, blur(4px)); } - &.isMobile { - > .columns { - display: block; - margin: 0; - - > .main { - margin: 0; - padding-bottom: 92px; - border: none; - width: 100%; - border-radius: 0; - } - } - } - > .columns { display: flex; justify-content: center; @@ -371,76 +324,6 @@ export default defineComponent({ } } - > .buttons { - position: fixed; - z-index: 1000; - bottom: 0; - padding: 16px; - display: flex; - width: 100%; - box-sizing: border-box; - -webkit-backdrop-filter: var(--blur, blur(32px)); - backdrop-filter: var(--blur, blur(32px)); - background-color: var(--header); - border-top: solid 0.5px var(--divider); - - > .button { - position: relative; - flex: 1; - padding: 0; - margin: auto; - height: 64px; - border-radius: 8px; - background: var(--panel); - color: var(--fg); - - &:not(:last-child) { - margin-right: 12px; - } - - @media (max-width: 400px) { - height: 60px; - - &:not(:last-child) { - margin-right: 8px; - } - } - - &:hover { - background: var(--X2); - } - - > .indicator { - position: absolute; - top: 0; - left: 0; - color: var(--indicator); - font-size: 16px; - animation: blink 1s infinite; - } - - &:first-child { - margin-left: 0; - } - - &:last-child { - margin-right: 0; - } - - > * { - font-size: 22px; - } - - &:disabled { - cursor: default; - - > * { - opacity: 0.5; - } - } - } - } - > .tray-back { z-index: 1001; } diff --git a/packages/client/src/ui/deck.vue b/packages/client/src/ui/deck.vue index 329716664e..e1b2887bb2 100644 --- a/packages/client/src/ui/deck.vue +++ b/packages/client/src/ui/deck.vue @@ -1,8 +1,8 @@ <template> -<div class="mk-deck" :class="`${deckStore.reactiveState.columnAlign.value}`" :style="{ '--deckMargin': deckStore.reactiveState.columnMargin.value + 'px' }" +<div class="mk-deck" :class="[{ isMobile }, `${deckStore.reactiveState.columnAlign.value}`]" :style="{ '--deckMargin': deckStore.reactiveState.columnMargin.value + 'px' }" @contextmenu.self.prevent="onContextmenu" > - <XSidebar ref="nav"/> + <XSidebar v-if="!isMobile"/> <template v-for="ids in layout"> <!-- sectionを利用しているのは、deck.vue側でcolumnに対してfirst-of-typeを効かせるため --> @@ -22,91 +22,76 @@ /> </template> - <button v-if="$i" class="nav _button" @click="showNav()"><i class="fas fa-bars"></i><span v-if="navIndicated" class="indicator"><i class="fas fa-circle"></i></span></button> - <button v-if="$i" class="post _buttonPrimary" @click="post()"><i class="fas fa-pencil-alt"></i></button> + <div v-if="isMobile" class="buttons"> + <button class="button nav _button" @click="drawerMenuShowing = true"><i class="fas fa-bars"></i><span v-if="menuIndicated" class="indicator"><i class="fas fa-circle"></i></span></button> + <button class="button home _button" @click="$router.push('/')"><i class="fas fa-home"></i></button> + <button class="button notifications _button" @click="$router.push('/my/notifications')"><i class="fas fa-bell"></i><span v-if="$i.hasUnreadNotification" class="indicator"><i class="fas fa-circle"></i></span></button> + <button class="button post _button" @click="post()"><i class="fas fa-pencil-alt"></i></button> + </div> + + <transition name="menu-back"> + <div v-if="drawerMenuShowing" + class="menu-back _modalBg" + @click="drawerMenuShowing = false" + @touchstart.passive="drawerMenuShowing = false" + ></div> + </transition> + + <transition name="menu"> + <XDrawerMenu v-if="drawerMenuShowing" class="menu"/> + </transition> <XCommon/> </div> </template> <script lang="ts"> -import { defineComponent } from 'vue'; +import { computed, defineComponent, provide, ref, watch } from 'vue'; import { v4 as uuid } from 'uuid'; -import { host } from '@/config'; import DeckColumnCore from '@/ui/deck/column-core.vue'; import XSidebar from '@/ui/_common_/sidebar.vue'; +import XDrawerMenu from '@/ui/_common_/sidebar-for-mobile.vue'; import { getScrollContainer } from '@/scripts/scroll'; import * as os from '@/os'; import { menuDef } from '@/menu'; import XCommon from './_common_/common.vue'; -import { deckStore, addColumn, loadDeck } from './deck/deck-store'; +import { deckStore, addColumn as addColumnToStore, loadDeck } from './deck/deck-store'; +import { useRoute } from 'vue-router'; +import { $i } from '@/account'; +import { i18n } from '@/i18n'; export default defineComponent({ components: { XCommon, XSidebar, + XDrawerMenu, DeckColumnCore, }, - provide() { - return deckStore.state.navWindow ? { - navHook: (url) => { - os.pageWindow(url); - } - } : {}; - }, - - data() { - return { - deckStore, - host: host, - menuDef: menuDef, - wallpaper: localStorage.getItem('wallpaper') != null, - }; - }, - - computed: { - columns() { - return deckStore.reactiveState.columns.value; - }, - layout() { - return deckStore.reactiveState.layout.value; - }, - navIndicated(): boolean { - if (!this.$i) return false; - for (const def in this.menuDef) { - if (this.menuDef[def].indicated) return true; - } - return false; - }, - }, + setup() { + const isMobile = ref(window.innerWidth <= 500); + window.addEventListener('resize', () => { + isMobile.value = window.innerWidth <= 500; + }); - created() { - document.documentElement.style.overflowY = 'hidden'; - document.documentElement.style.scrollBehavior = 'auto'; - window.addEventListener('wheel', this.onWheel); - loadDeck(); - }, + const drawerMenuShowing = ref(false); - mounted() { - }, + const route = useRoute(); + watch(route, () => { + drawerMenuShowing.value = false; + }); - methods: { - onWheel(e) { - if (getScrollContainer(e.target) == null) { - document.documentElement.scrollLeft += e.deltaY > 0 ? 96 : -96; + const columns = deckStore.reactiveState.columns; + const layout = deckStore.reactiveState.layout.value; + const menuIndicated = computed(() => { + if ($i == null) return false; + for (const def in menuDef) { + if (menuDef[def].indicated) return true; } - }, - - showNav() { - this.$refs.nav.show(); - }, - - post() { - os.post(); - }, + return false; + }); - async addColumn(ev) { + const addColumn = async (ev) => { const columns = [ 'main', 'widgets', @@ -119,33 +104,83 @@ export default defineComponent({ ]; const { canceled, result: column } = await os.select({ - title: this.$ts._deck.addColumn, + title: i18n.locale._deck.addColumn, items: columns.map(column => ({ - value: column, text: this.$t('_deck._columns.' + column) + value: column, text: i18n.t('_deck._columns.' + column) })) }); if (canceled) return; - addColumn({ + addColumnToStore({ type: column, id: uuid(), - name: this.$t('_deck._columns.' + column), + name: i18n.t('_deck._columns.' + column), width: 330, }); - }, + }; - onContextmenu(e) { + const onContextmenu = (ev) => { os.contextMenu([{ - text: this.$ts._deck.addColumn, + text: i18n.locale._deck.addColumn, icon: null, - action: this.addColumn - }], e); - }, - } + action: addColumn + }], ev); + }; + + provide('shouldSpacerMin', true); + if (deckStore.state.navWindow) { + provide('navHook', (url) => { + os.pageWindow(url); + }); + } + + document.documentElement.style.overflowY = 'hidden'; + document.documentElement.style.scrollBehavior = 'auto'; + window.addEventListener('wheel', (ev) => { + if (getScrollContainer(ev.target) == null) { + document.documentElement.scrollLeft += ev.deltaY > 0 ? 96 : -96; + } + }); + loadDeck(); + + return { + isMobile, + deckStore, + drawerMenuShowing, + columns, + layout, + menuIndicated, + onContextmenu, + wallpaper: localStorage.getItem('wallpaper') != null, + post: os.post, + }; + }, }); </script> <style lang="scss" scoped> +.menu-enter-active, +.menu-leave-active { + opacity: 1; + transform: translateX(0); + transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1); +} +.menu-enter-from, +.menu-leave-active { + opacity: 0; + transform: translateX(-240px); +} + +.menu-back-enter-active, +.menu-back-leave-active { + opacity: 1; + transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1); +} +.menu-back-enter-from, +.menu-back-leave-active { + opacity: 0; +} + .mk-deck { $nav-hide-threshold: 650px; // TODO: どこかに集約したい @@ -169,6 +204,10 @@ export default defineComponent({ } } + &.isMobile { + padding-bottom: 100px; + } + > .column { flex-shrink: 0; margin-right: var(--deckMargin); @@ -183,43 +222,89 @@ export default defineComponent({ } } - > .post, - > .nav { + > .buttons { position: fixed; z-index: 1000; - bottom: 32px; - width: 64px; - height: 64px; - border-radius: 100%; - box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12); - font-size: 22px; + bottom: 0; + left: 0; + padding: 16px; + display: flex; + width: 100%; + box-sizing: border-box; - @media (min-width: ($nav-hide-threshold + 1px)) { - display: none; - } - } + > .button { + position: relative; + flex: 1; + padding: 0; + margin: auto; + height: 64px; + border-radius: 8px; + background: var(--panel); + color: var(--fg); - > .post { - right: 32px; - } + &:not(:last-child) { + margin-right: 12px; + } - > .nav { - left: 32px; - background: var(--panel); - color: var(--fg); + @media (max-width: 400px) { + height: 60px; - &:hover { - background: var(--X2); - } + &:not(:last-child) { + margin-right: 8px; + } + } + + &:hover { + background: var(--X2); + } + + > .indicator { + position: absolute; + top: 0; + left: 0; + color: var(--indicator); + font-size: 16px; + animation: blink 1s infinite; + } + + &:first-child { + margin-left: 0; + } + + &:last-child { + margin-right: 0; + } - > .indicator { - position: absolute; - top: 0; - left: 0; - color: var(--indicator); - font-size: 16px; - animation: blink 1s infinite; + > * { + font-size: 22px; + } + + &:disabled { + cursor: default; + + > * { + opacity: 0.5; + } + } } } + + > .menu-back { + z-index: 1001; + } + + > .menu { + position: fixed; + top: 0; + left: 0; + z-index: 1001; + // ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ + height: calc(var(--vh, 1vh) * 100); + width: 240px; + box-sizing: border-box; + overflow: auto; + overscroll-behavior: contain; + background: var(--bg); + } } </style> diff --git a/packages/client/src/ui/deck/column.vue b/packages/client/src/ui/deck/column.vue index 09d089c528..d3c7cf8213 100644 --- a/packages/client/src/ui/deck/column.vue +++ b/packages/client/src/ui/deck/column.vue @@ -401,6 +401,7 @@ export default defineComponent({ height: calc(100% - var(--deckColumnHeaderHeight)); overflow: auto; overflow-x: hidden; + overscroll-behavior: contain; -webkit-overflow-scrolling: touch; box-sizing: border-box; } diff --git a/packages/client/src/ui/universal.vue b/packages/client/src/ui/universal.vue index 55afc5217f..9fc2177ee0 100644 --- a/packages/client/src/ui/universal.vue +++ b/packages/client/src/ui/universal.vue @@ -1,9 +1,9 @@ <template> -<div class="mk-app" :class="{ wallpaper }"> - <XSidebar ref="nav" class="sidebar"/> +<div class="dkgtipfy" :class="{ wallpaper }"> + <XSidebar v-if="!isMobile" class="sidebar"/> - <div ref="contents" class="contents" :style="{ background: pageInfo?.bg }" @contextmenu.stop="onContextmenu"> - <main ref="main"> + <div class="contents" :style="{ background: pageInfo?.bg }" @contextmenu.stop="onContextmenu"> + <main> <div class="content"> <MkStickyContainer> <template #header><MkHeader v-if="pageInfo && !pageInfo.hideHeader" :info="pageInfo"/></template> @@ -20,32 +20,44 @@ </main> </div> - <XSide v-if="isDesktop" ref="side" class="side"/> + <XSideView v-if="isDesktop" ref="side" class="side"/> - <div v-if="isDesktop" ref="widgets" class="widgets"> + <div v-if="isDesktop" ref="widgetsEl" class="widgets"> <XWidgets @mounted="attachSticky"/> </div> - <div class="buttons" :class="{ navHidden }"> - <button ref="navButton" class="button nav _button" @click="showNav"><i class="fas fa-bars"></i><span v-if="navIndicated" class="indicator"><i class="fas fa-circle"></i></span></button> + <button class="widgetButton _button" :class="{ show: true }" @click="widgetsShowing = true"><i class="fas fa-layer-group"></i></button> + + <div v-if="isMobile" class="buttons"> + <button class="button nav _button" @click="drawerMenuShowing = true"><i class="fas fa-bars"></i><span v-if="menuIndicated" class="indicator"><i class="fas fa-circle"></i></span></button> <button class="button home _button" @click="$route.name === 'index' ? top() : $router.push('/')"><i class="fas fa-home"></i></button> <button class="button notifications _button" @click="$router.push('/my/notifications')"><i class="fas fa-bell"></i><span v-if="$i.hasUnreadNotification" class="indicator"><i class="fas fa-circle"></i></span></button> <button class="button widget _button" @click="widgetsShowing = true"><i class="fas fa-layer-group"></i></button> - <button class="button post _button" @click="post"><i class="fas fa-pencil-alt"></i></button> + <button class="button post _button" @click="post()"><i class="fas fa-pencil-alt"></i></button> </div> - <button class="widgetButton _button" :class="{ navHidden }" @click="widgetsShowing = true"><i class="fas fa-layer-group"></i></button> + <transition name="menuDrawer-back"> + <div v-if="drawerMenuShowing" + class="menuDrawer-back _modalBg" + @click="drawerMenuShowing = false" + @touchstart.passive="drawerMenuShowing = false" + ></div> + </transition> + + <transition name="menuDrawer"> + <XDrawerMenu v-if="drawerMenuShowing" class="menuDrawer"/> + </transition> - <transition name="tray-back"> + <transition name="widgetsDrawer-back"> <div v-if="widgetsShowing" - class="tray-back _modalBg" + class="widgetsDrawer-back _modalBg" @click="widgetsShowing = false" @touchstart.passive="widgetsShowing = false" ></div> </transition> - <transition name="tray"> - <XWidgets v-if="widgetsShowing" class="tray"/> + <transition name="widgetsDrawer"> + <XWidgets v-if="widgetsShowing" class="widgetsDrawer"/> </transition> <XCommon/> @@ -53,60 +65,69 @@ </template> <script lang="ts"> -import { defineComponent, defineAsyncComponent } from 'vue'; +import { defineComponent, defineAsyncComponent, provide, onMounted, computed, ref, watch } from 'vue'; import { instanceName } from '@/config'; import { StickySidebar } from '@/scripts/sticky-sidebar'; import XSidebar from '@/ui/_common_/sidebar.vue'; +import XDrawerMenu from '@/ui/_common_/sidebar-for-mobile.vue'; import XCommon from './_common_/common.vue'; -import XSide from './classic.side.vue'; +import XSideView from './classic.side.vue'; import * as os from '@/os'; -import { menuDef } from '@/menu'; import * as symbols from '@/symbols'; +import { defaultStore } from '@/store'; +import * as EventEmitter from 'eventemitter3'; +import { menuDef } from '@/menu'; +import { useRoute } from 'vue-router'; +import { i18n } from '@/i18n'; const DESKTOP_THRESHOLD = 1100; +const MOBILE_THRESHOLD = 500; export default defineComponent({ components: { XCommon, XSidebar, + XDrawerMenu, XWidgets: defineAsyncComponent(() => import('./universal.widgets.vue')), - XSide, // NOTE: dynamic importするとAsyncComponentWrapperが間に入るせいでref取得できなくて面倒になる + XSideView, // NOTE: dynamic importするとAsyncComponentWrapperが間に入るせいでref取得できなくて面倒になる }, - provide() { - return { - sideViewHook: this.isDesktop ? (url) => { - this.$refs.side.navigate(url); - } : null - }; - }, + setup() { + const isDesktop = ref(window.innerWidth >= DESKTOP_THRESHOLD); + const isMobile = ref(window.innerWidth <= MOBILE_THRESHOLD); + window.addEventListener('resize', () => { + isMobile.value = window.innerWidth <= MOBILE_THRESHOLD; + }); - data() { - return { - pageInfo: null, - isDesktop: window.innerWidth >= DESKTOP_THRESHOLD, - menuDef: menuDef, - navHidden: false, - widgetsShowing: false, - wallpaper: localStorage.getItem('wallpaper') != null, - }; - }, + const pageInfo = ref(); + const widgetsEl = ref<HTMLElement>(); + const widgetsShowing = ref(false); - computed: { - navIndicated(): boolean { - for (const def in this.menuDef) { + const sideViewController = new EventEmitter(); + + provide('sideViewHook', isDesktop.value ? (url) => { + sideViewController.emit('navigate', url); + } : null); + + const menuIndicated = computed(() => { + for (const def in menuDef) { if (def === 'notifications') continue; // 通知は下にボタンとして表示されてるから - if (this.menuDef[def].indicated) return true; + if (menuDef[def].indicated) return true; } return false; - } - }, + }); + + const drawerMenuShowing = ref(false); + + const route = useRoute(); + watch(route, () => { + drawerMenuShowing.value = false; + }); - created() { document.documentElement.style.overflowY = 'scroll'; - if (this.$store.state.widgets.length === 0) { - this.$store.set('widgets', [{ + if (defaultStore.state.widgets.length === 0) { + defaultStore.set('widgets', [{ name: 'calendar', id: 'a', place: 'right', data: {} }, { @@ -117,123 +138,129 @@ export default defineComponent({ id: 'c', place: 'right', data: {} }]); } - }, - - mounted() { - this.adjustUI(); - const ro = new ResizeObserver((entries, observer) => { - this.adjustUI(); + onMounted(() => { + if (!isDesktop.value) { + window.addEventListener('resize', () => { + if (window.innerWidth >= DESKTOP_THRESHOLD) isDesktop.value = true; + }, { passive: true }); + } }); - ro.observe(this.$refs.contents); - - window.addEventListener('resize', this.adjustUI, { passive: true }); - - if (!this.isDesktop) { - window.addEventListener('resize', () => { - if (window.innerWidth >= DESKTOP_THRESHOLD) this.isDesktop = true; - }, { passive: true }); - } - }, - - methods: { - changePage(page) { + const changePage = (page) => { if (page == null) return; if (page[symbols.PAGE_INFO]) { - this.pageInfo = page[symbols.PAGE_INFO]; - document.title = `${this.pageInfo.title} | ${instanceName}`; + pageInfo.value = page[symbols.PAGE_INFO]; + document.title = `${pageInfo.value.title} | ${instanceName}`; } - }, - - adjustUI() { - const navWidth = this.$refs.nav.$el.offsetWidth; - this.navHidden = navWidth === 0; - }, - - showNav() { - this.$refs.nav.show(); - }, - - attachSticky(el) { - const sticky = new StickySidebar(this.$refs.widgets); - window.addEventListener('scroll', () => { - sticky.calc(window.scrollY); - }, { passive: true }); - }, - - post() { - os.post(); - }, - - top() { - window.scroll({ top: 0, behavior: 'smooth' }); - }, - - back() { - history.back(); - }, - - onTransition() { - if (window._scroll) window._scroll(); - }, + }; - onContextmenu(e) { + const onContextmenu = (ev) => { const isLink = (el: HTMLElement) => { if (el.tagName === 'A') return true; if (el.parentElement) { return isLink(el.parentElement); } }; - if (isLink(e.target)) return; - if (['INPUT', 'TEXTAREA', 'IMG', 'VIDEO', 'CANVAS'].includes(e.target.tagName) || e.target.attributes['contenteditable']) return; + if (isLink(ev.target)) return; + if (['INPUT', 'TEXTAREA', 'IMG', 'VIDEO', 'CANVAS'].includes(ev.target.tagName) || ev.target.attributes['contenteditable']) return; if (window.getSelection().toString() !== '') return; - const path = this.$route.path; + const path = route.path; os.contextMenu([{ type: 'label', text: path, }, { icon: 'fas fa-columns', - text: this.$ts.openInSideView, + text: i18n.locale.openInSideView, action: () => { this.$refs.side.navigate(path); } }, { icon: 'fas fa-window-maximize', - text: this.$ts.openInWindow, + text: i18n.locale.openInWindow, action: () => { os.pageWindow(path); } - }], e); - }, - } + }], ev); + }; + + const attachSticky = (el) => { + const sticky = new StickySidebar(widgetsEl.value); + window.addEventListener('scroll', () => { + sticky.calc(window.scrollY); + }, { passive: true }); + }; + + return { + pageInfo, + isDesktop, + isMobile, + widgetsEl, + widgetsShowing, + drawerMenuShowing, + menuIndicated, + wallpaper: localStorage.getItem('wallpaper') != null, + changePage, + top: () => { + window.scroll({ top: 0, behavior: 'smooth' }); + }, + onTransition: () => { + if (window._scroll) window._scroll(); + }, + post: os.post, + onContextmenu, + attachSticky, + }; + }, }); </script> <style lang="scss" scoped> -.tray-enter-active, -.tray-leave-active { +.widgetsDrawer-enter-active, +.widgetsDrawer-leave-active { opacity: 1; transform: translateX(0); transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1); } -.tray-enter-from, -.tray-leave-active { +.widgetsDrawer-enter-from, +.widgetsDrawer-leave-active { opacity: 0; transform: translateX(240px); } -.tray-back-enter-active, -.tray-back-leave-active { +.widgetsDrawer-back-enter-active, +.widgetsDrawer-back-leave-active { opacity: 1; transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1); } -.tray-back-enter-from, -.tray-back-leave-active { +.widgetsDrawer-back-enter-from, +.widgetsDrawer-back-leave-active { opacity: 0; } -.mk-app { +.menuDrawer-enter-active, +.menuDrawer-leave-active { + opacity: 1; + transform: translateX(0); + transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1); +} +.menuDrawer-enter-from, +.menuDrawer-leave-active { + opacity: 0; + transform: translateX(-240px); +} + +.menuDrawer-back-enter-active, +.menuDrawer-back-leave-active { + opacity: 1; + transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1); +} +.menuDrawer-back-enter-from, +.menuDrawer-back-leave-active { + opacity: 0; +} + +.dkgtipfy { $ui-font-size: 1em; // TODO: どこかに集約したい $widgets-hide-threshold: 1090px; @@ -248,6 +275,7 @@ export default defineComponent({ } > .sidebar { + border-right: solid 0.5px var(--divider); } > .contents { @@ -284,6 +312,7 @@ export default defineComponent({ } } +/* > .widgetButton { display: block; position: fixed; @@ -304,12 +333,35 @@ export default defineComponent({ @media (min-width: ($widgets-hide-threshold + 1px)) { display: none; } + }*/ + + > .widgetButton { + display: none; + } + + > .widgetsDrawer-back { + z-index: 1001; + } + + > .widgetsDrawer { + position: fixed; + top: 0; + right: 0; + z-index: 1001; + // ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ + height: calc(var(--vh, 1vh) * 100); + padding: var(--margin); + box-sizing: border-box; + overflow: auto; + overscroll-behavior: contain; + background: var(--bg); } > .buttons { position: fixed; z-index: 1000; bottom: 0; + left: 0; padding: 16px; display: flex; width: 100%; @@ -318,10 +370,6 @@ export default defineComponent({ backdrop-filter: var(--blur, blur(32px)); background-color: var(--header); - &:not(.navHidden) { - display: none; - } - > .button { position: relative; flex: 1; @@ -379,22 +427,24 @@ export default defineComponent({ } } - > .tray-back { + > .menuDrawer-back { z-index: 1001; } - > .tray { + > .menuDrawer { position: fixed; top: 0; - right: 0; + left: 0; z-index: 1001; // ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ height: calc(var(--vh, 1vh) * 100); - padding: var(--margin); + width: 240px; box-sizing: border-box; overflow: auto; + overscroll-behavior: contain; background: var(--bg); } + } </style> diff --git a/packages/client/src/ui/visitor/kanban.vue b/packages/client/src/ui/visitor/kanban.vue index 2da4dd40b6..ee0f11b838 100644 --- a/packages/client/src/ui/visitor/kanban.vue +++ b/packages/client/src/ui/visitor/kanban.vue @@ -16,7 +16,7 @@ </div> <div class="announcements panel"> <header>{{ $ts.announcements }}</header> - <MkPagination #default="{items}" :pagination="announcements" class="list"> + <MkPagination v-slot="{items}" :pagination="announcements" class="list"> <section v-for="announcement in items" :key="announcement.id" class="item"> <div class="title">{{ announcement.title }}</div> <div class="content"> |