forked from misskey-dev/misskey
-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: 投稿フォーム下部の項目をカスタマイズできるように (#139)
* change: 投稿フォーム下部の項目の切り離し * feat: storeに投稿フォーム下部の項目の並び順を保存できるように * remove: console.log * add: 設定ページを追加 * add: 翻訳を追加
- Loading branch information
1 parent
73d8359
commit f760650
Showing
8 changed files
with
261 additions
and
16 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,147 @@ | ||
| <template> | ||
| <div class="_gaps_m"> | ||
| <FormSlot> | ||
| <template #label>{{ i18n.ts.postForm }}<span class="_beta">{{ i18n.ts.originalFeature }}</span></template> | ||
| <MkContainer :showHeader="false"> | ||
| <Sortable | ||
| v-model="items" | ||
| :class="$style.items" | ||
| :itemKey="items => items" | ||
| :animation="100" | ||
| :delay="50" | ||
| :delayOnTouchOnly="true" | ||
| > | ||
| <template #item="{element}"> | ||
| <button v-tooltip="bottomItemDef[element.type].title" class="_button" :class="$style.item" @click="removeItem(element.type, $event)"> | ||
| <i class="ti ti-fw" :class="[$style.itemIcon, bottomItemDef[element.type].icon]"></i> | ||
| </button> | ||
| </template> | ||
| </Sortable> | ||
| </MkContainer> | ||
| </FormSlot> | ||
| <div class="_buttons"> | ||
| <MkButton @click="addItem"><i class="ti ti-plus"></i> {{ i18n.ts.addItem }}</MkButton> | ||
| <MkButton danger @click="reset"><i class="ti ti-reload"></i> {{ i18n.ts.default }}</MkButton> | ||
| <MkButton primary class="save" @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton> | ||
| </div> | ||
| <div :class="$style.label">{{ i18n.ts.postFormBottomSettingsDescription }}</div> | ||
| <MkSwitch v-model="disableNoteDrafting"> | ||
| <template #caption>{{ i18n.ts.disableNoteDraftingDescription }}</template> | ||
| {{ i18n.ts.disableNoteDrafting }} | ||
| <span class="_beta">{{ i18n.ts.originalFeature }}</span> | ||
| </MkSwitch> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script lang="ts" setup> | ||
| import { computed, defineAsyncComponent, ref } from 'vue'; | ||
| import MkButton from '@/components/MkButton.vue'; | ||
| import MkSwitch from '@/components/MkSwitch.vue'; | ||
| import FormSlot from '@/components/form/slot.vue'; | ||
| import MkContainer from '@/components/MkContainer.vue'; | ||
| import { bottomItemDef } from '@/scripts/post-form.js'; | ||
| import * as os from '@/os.js'; | ||
| import { defaultStore } from '@/store.js'; | ||
| import { i18n } from '@/i18n.js'; | ||
| import { definePageMetadata } from '@/scripts/page-metadata.js'; | ||
| const disableNoteDrafting = computed(defaultStore.makeGetterSetter('disableNoteDrafting')); | ||
| const Sortable = defineAsyncComponent(() => import('vuedraggable').then(x => x.default)); | ||
| const items = ref(defaultStore.state.postFormActions.map(x => ({ | ||
| id: Math.random().toString(), | ||
| type: x, | ||
| }))); | ||
| async function addItem() { | ||
| const currentItems = items.value.map(x => x.type); | ||
| const bottomItem = Object.keys(bottomItemDef).filter(k => !currentItems.includes(k)); | ||
| const { canceled, result: item } = await os.select({ | ||
| title: i18n.ts.addItem, | ||
| items: bottomItem.map(k => ({ | ||
| value: k, text: bottomItemDef[k].title, | ||
| })), | ||
| }); | ||
| if (canceled || item == null) return; | ||
| items.value = [...items.value, { | ||
| id: Math.random().toString(), | ||
| type: item, | ||
| }]; | ||
| } | ||
| function getHTMLElement(ev: MouseEvent): HTMLElement { | ||
| const target = ev.currentTarget ?? ev.target; | ||
| return target as HTMLElement; | ||
| } | ||
| function removeItem(type: keyof typeof bottomItemDef, ev: MouseEvent) { | ||
| const item = bottomItemDef[type]; | ||
| os.popupMenu([{ | ||
| type: 'label', | ||
| text: item.title, | ||
| }, { | ||
| text: i18n.ts.remove, | ||
| action: () => { | ||
| items.value = items.value.filter(x => x.type !== type); | ||
| }, | ||
| }], getHTMLElement(ev)); | ||
| } | ||
| async function save() { | ||
| defaultStore.set('postFormActions', items.value.map(x => x.type)); | ||
| } | ||
| async function reset() { | ||
| const result = await os.confirm({ | ||
| type: 'warning', | ||
| text: i18n.ts.resetAreYouSure, | ||
| }); | ||
| if (result.canceled) return; | ||
| items.value = defaultStore.def.postFormActions.default.map(x => ({ | ||
| id: Math.random().toString(), | ||
| type: x, | ||
| })); | ||
| } | ||
| const headerActions = computed(() => []); | ||
| const headerTabs = computed(() => []); | ||
| definePageMetadata(() => ({ | ||
| title: i18n.ts.postForm, | ||
| icon: 'ti ti-pencil', | ||
| })); | ||
| </script> | ||
|
|
||
| <style lang="scss" module> | ||
| .items { | ||
| padding: 8px; | ||
| flex: 1; | ||
| display: grid; | ||
| grid-auto-flow: row; | ||
| grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); | ||
| grid-auto-rows: 40px; | ||
| } | ||
| .item { | ||
| display: inline-block; | ||
| padding: 0; | ||
| margin: 0; | ||
| font-size: 1em; | ||
| width: auto; | ||
| height: 100%; | ||
| border-radius: 6px; | ||
| &:hover { | ||
| background: var(--X5); | ||
| } | ||
| } | ||
| .label { | ||
| font-size: 0.85em; | ||
| padding: 0 0 8px 0; | ||
| user-select: none; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| import { i18n } from '@/i18n.js'; | ||
|
|
||
| export const bottomItemDef = { | ||
| attachFile: { | ||
| title: i18n.ts.attachFile, | ||
| icon: 'ti-photo-plus', | ||
| }, | ||
| poll: { | ||
| title: i18n.ts.poll, | ||
| icon: 'ti-chart-arrows', | ||
| }, | ||
| scheduledNoteDelete: { | ||
| title: i18n.ts.scheduledNoteDelete, | ||
| icon: 'ti-bomb', | ||
| }, | ||
| useCw: { | ||
| title: i18n.ts.useCw, | ||
| icon: 'ti-eye-off', | ||
| }, | ||
| mention: { | ||
| title: i18n.ts.mention, | ||
| icon: 'ti-at', | ||
| }, | ||
| hashtags: { | ||
| title: i18n.ts.hashtags, | ||
| icon: 'ti-hash', | ||
| }, | ||
| plugins: { | ||
| title: i18n.ts.plugins, | ||
| icon: 'ti-plug', | ||
| }, | ||
| emoji: { | ||
| title: i18n.ts.emoji, | ||
| icon: 'ti-mood-happy', | ||
| }, | ||
| addMfmFunction: { | ||
| title: i18n.ts.addMfmFunction, | ||
| icon: 'ti-palette', | ||
| }, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters