mirror of
https://github.com/MisskeyIO/misskey
synced 2024-12-24 03:28:27 +09:00
a89003b57a
* update stream.ts * https://github.com/misskey-dev/misskey/pull/7769#issuecomment-917542339 * fix lint * clean up? * add app * fix * nanka iroiro * wip * wip * fix lint * fix loginId * fix * refactor * refactor * remove follow action * clean up * Revert "remove follow action" This reverts commit defbb416480905af2150d1c92f10d8e1d1288c0a. * Revert "clean up" This reverts commit f94919cb9cff41e274044fc69c56ad36a33974f2. * remove fetch specification * renoteの条件追加 * apiFetch => cli * bypass fetch? * fix * refactor: use path alias * temp: add submodule * remove submodule * enhane: unison-reloadに指定したパスに移動できるように * null * null * feat: ログインするアカウントのIDをクエリ文字列で指定する機能 * null * await? * rename * rename * Update read.ts * merge * get-note-summary * fix * swパッケージに * add missing packages * fix getNoteSummary * add webpack-cli * ✌️ * remove plugins * sw-inject分離したがテストしてない * fix notification.vue * remove a blank line * disconnect intersection observer * disconnect2 * fix notification.vue * remove a blank line * disconnect intersection observer * disconnect2 * fix * ✌️ * clean up config * typesを戻した * Update packages/client/src/components/notification.vue Co-authored-by: Acid Chicken (硫酸鶏) <root@acid-chicken.com> * disconnect * oops * Failed to load the script unexpectedly回避 sw.jsとlib.tsを分離してみた * truncate notification * Update packages/client/src/ui/_common_/common.vue Co-authored-by: syuilo <Syuilotan@yahoo.co.jp> * clean up * clean up * キャッシュ対策 * Truncate push notification message * クライアントがあったらストリームに接続しているということなので通知しない判定の位置を修正 * components/drive-file-thumbnail.vue * components/drive-select-dialog.vue * components/drive-window.vue * merge * fix * Service Workerのビルドにesbuildを使うようにする * return createEmptyNotification() * fix * i18n.ts * update * ✌️ * remove ts-loader * fix * fix * enhance: Service Workerを常に登録するように * pollEnded * URLをsw.jsに戻す * clean up * wip * wip * wip * wip * wip * wip * ✌️ * use import * fix * install rollup * use defineAsyncComponent. * fix emojilist * wip use defineAsyncComponent * popup(import -> popup(defineAsyncComponent(() => import * draggable? * fix init import * clean up * fix router * add comment * ✌️ * ✌️ * ✌️ * remove webpack * update vite * fix boot sequence * Revert "fix boot sequence" This reverts commit e893dbf37aed83bf9f12e427d98c78a7065b4a39. * revert boot import * never make two app div * ; * remove console.log * change clientEntry sequence * fix * Revert "fix" This reverts commit 12741b3d89950a31dbb1bb81477ddb27b0e9951a. * fix * add comment https://github.com/misskey-dev/misskey/pull/8575#issuecomment-1114239210 * add log * add comment Co-authored-by: Acid Chicken (硫酸鶏) <root@acid-chicken.com> Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
153 lines
4.5 KiB
Vue
153 lines
4.5 KiB
Vue
<template>
|
|
<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)">
|
|
<MkEmoji :emoji="element" :normal="true"/>
|
|
</button>
|
|
</template>
|
|
<template #footer>
|
|
<button class="_button add" @click="chooseEmoji"><i class="fas fa-plus"></i></button>
|
|
</template>
|
|
</XDraggable>
|
|
</div>
|
|
<template #caption>{{ $ts.reactionSettingDescription2 }} <button class="_textButton" @click="preview">{{ $ts.preview }}</button></template>
|
|
</FromSlot>
|
|
|
|
<FormRadios v-model="reactionPickerSize" class="_formBlock">
|
|
<template #label>{{ $ts.size }}</template>
|
|
<option :value="1">{{ $ts.small }}</option>
|
|
<option :value="2">{{ $ts.medium }}</option>
|
|
<option :value="3">{{ $ts.large }}</option>
|
|
</FormRadios>
|
|
<FormRadios v-model="reactionPickerWidth" class="_formBlock">
|
|
<template #label>{{ $ts.numberOfColumn }}</template>
|
|
<option :value="1">5</option>
|
|
<option :value="2">6</option>
|
|
<option :value="3">7</option>
|
|
<option :value="4">8</option>
|
|
<option :value="5">9</option>
|
|
</FormRadios>
|
|
<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>
|
|
<option :value="4">{{ $ts.large }}+</option>
|
|
</FormRadios>
|
|
|
|
<FormSwitch v-model="reactionPickerUseDrawerForMobile" class="_formBlock">
|
|
{{ $ts.useDrawerReactionPickerForMobile }}
|
|
<template #caption>{{ $ts.needReloadToApply }}</template>
|
|
</FormSwitch>
|
|
|
|
<FormSection>
|
|
<div style="display: flex; gap: var(--margin); flex-wrap: wrap;">
|
|
<FormButton inline @click="preview"><i class="fas fa-eye"></i> {{ $ts.preview }}</FormButton>
|
|
<FormButton inline danger @click="setDefault"><i class="fas fa-undo"></i> {{ $ts.default }}</FormButton>
|
|
</div>
|
|
</FormSection>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { defineAsyncComponent, watch } from 'vue';
|
|
import XDraggable from 'vuedraggable';
|
|
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 FormSwitch from '@/components/form/switch.vue';
|
|
import * as os from '@/os';
|
|
import { defaultStore } from '@/store';
|
|
import * as symbols from '@/symbols';
|
|
import { i18n } from '@/i18n';
|
|
|
|
let reactions = $ref(JSON.parse(JSON.stringify(defaultStore.state.reactions)));
|
|
|
|
const reactionPickerSize = $computed(defaultStore.makeGetterSetter('reactionPickerSize'));
|
|
const reactionPickerWidth = $computed(defaultStore.makeGetterSetter('reactionPickerWidth'));
|
|
const reactionPickerHeight = $computed(defaultStore.makeGetterSetter('reactionPickerHeight'));
|
|
const reactionPickerUseDrawerForMobile = $computed(defaultStore.makeGetterSetter('reactionPickerUseDrawerForMobile'));
|
|
|
|
function save() {
|
|
defaultStore.set('reactions', reactions);
|
|
}
|
|
|
|
function remove(reaction, ev: MouseEvent) {
|
|
os.popupMenu([{
|
|
text: i18n.ts.remove,
|
|
action: () => {
|
|
reactions = reactions.filter(x => x !== reaction);
|
|
}
|
|
}], ev.currentTarget ?? ev.target);
|
|
}
|
|
|
|
function preview(ev: MouseEvent) {
|
|
os.popup(defineAsyncComponent(() => import('@/components/emoji-picker-dialog.vue')), {
|
|
asReactionPicker: true,
|
|
src: ev.currentTarget ?? ev.target,
|
|
}, {}, 'closed');
|
|
}
|
|
|
|
async function setDefault() {
|
|
const { canceled } = await os.confirm({
|
|
type: 'warning',
|
|
text: i18n.ts.resetAreYouSure,
|
|
});
|
|
if (canceled) return;
|
|
|
|
reactions = JSON.parse(JSON.stringify(defaultStore.def.reactions.default));
|
|
}
|
|
|
|
function chooseEmoji(ev: MouseEvent) {
|
|
os.pickEmoji(ev.currentTarget ?? ev.target, {
|
|
showPinned: false
|
|
}).then(emoji => {
|
|
if (!reactions.includes(emoji)) {
|
|
reactions.push(emoji);
|
|
}
|
|
});
|
|
}
|
|
|
|
watch($$(reactions), () => {
|
|
save();
|
|
}, {
|
|
deep: true,
|
|
});
|
|
|
|
defineExpose({
|
|
[symbols.PAGE_INFO]: {
|
|
title: i18n.ts.reaction,
|
|
icon: 'fas fa-laugh',
|
|
action: {
|
|
icon: 'fas fa-eye',
|
|
handler: preview,
|
|
},
|
|
bg: 'var(--bg)',
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.zoaiodol {
|
|
padding: 12px;
|
|
font-size: 1.1em;
|
|
|
|
> .item {
|
|
display: inline-block;
|
|
padding: 8px;
|
|
cursor: move;
|
|
}
|
|
|
|
> .add {
|
|
display: inline-block;
|
|
padding: 8px;
|
|
}
|
|
}
|
|
</style>
|