wip: clip

This commit is contained in:
syuilo
2020-11-15 12:04:54 +09:00
parent ea33d61a90
commit d53c55ecb5
15 changed files with 699 additions and 11 deletions

View File

@ -15,15 +15,15 @@
<div class="xkpnjxcv _section">
<label v-for="item in Object.keys(form).filter(item => !form[item].hidden)" :key="item">
<MkInput v-if="form[item].type === 'number'" v-model:value="values[item]" type="number" :step="form[item].step || 1">
<span v-text="form[item].label || item"></span>
<span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $t('optional') }})</span>
<template v-if="form[item].description" #desc>{{ form[item].description }}</template>
</MkInput>
<MkInput v-else-if="form[item].type === 'string' && !item.multiline" v-model:value="values[item]" type="text">
<span v-text="form[item].label || item"></span>
<MkInput v-else-if="form[item].type === 'string' && !form[item].multiline" v-model:value="values[item]" type="text">
<span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $t('optional') }})</span>
<template v-if="form[item].description" #desc>{{ form[item].description }}</template>
</MkInput>
<MkTextarea v-else-if="form[item].type === 'string' && item.multiline" v-model:value="values[item]">
<span v-text="form[item].label || item"></span>
<MkTextarea v-else-if="form[item].type === 'string' && form[item].multiline" v-model:value="values[item]">
<span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $t('optional') }})</span>
<template v-if="form[item].description" #desc>{{ form[item].description }}</template>
</MkTextarea>
<MkSwitch v-else-if="form[item].type === 'boolean'" v-model:value="values[item]">

View File

@ -102,7 +102,7 @@
<script lang="ts">
import { computed, defineAsyncComponent, defineComponent, markRaw, ref } from 'vue';
import { faSatelliteDish, faBolt, faTimes, faBullhorn, faStar, faLink, faExternalLinkSquareAlt, faPlus, faMinus, faRetweet, faReply, faReplyAll, faEllipsisH, faHome, faUnlock, faEnvelope, faThumbtack, faBan, faQuoteRight, faInfoCircle, faBiohazard, faPlug, faExclamationCircle } from '@fortawesome/free-solid-svg-icons';
import { faSatelliteDish, faBolt, faTimes, faBullhorn, faStar, faLink, faExternalLinkSquareAlt, faPlus, faMinus, faRetweet, faReply, faReplyAll, faEllipsisH, faHome, faUnlock, faEnvelope, faThumbtack, faBan, faQuoteRight, faInfoCircle, faBiohazard, faPlug, faExclamationCircle, faPaperclip } from '@fortawesome/free-solid-svg-icons';
import { faCopy, faTrashAlt, faEdit, faEye, faEyeSlash } from '@fortawesome/free-regular-svg-icons';
import { parse } from '../../mfm/parse';
import { sum, unique } from '../../prelude/array';
@ -610,6 +610,11 @@ export default defineComponent({
text: this.$t('favorite'),
action: () => this.toggleFavorite(true)
}),
{
icon: faPaperclip,
text: this.$t('clip'),
action: () => this.clip()
},
(this.appearNote.userId != this.$store.state.i.id) ? statePromise.then(state => state.isWatching ? {
icon: faEyeSlash,
text: this.$t('unwatch'),
@ -762,6 +767,43 @@ export default defineComponent({
});
},
async clip() {
const clips = await os.api('clips/list');
os.modalMenu([{
icon: faPlus,
text: this.$t('createNew'),
action: async () => {
const { canceled, result } = await os.form(this.$t('createNewClip'), {
name: {
type: 'string',
label: this.$t('name')
},
description: {
type: 'string',
required: false,
multiline: true,
label: this.$t('description')
},
isPublic: {
type: 'boolean',
label: this.$t('public')
}
});
if (canceled) return;
const clip = await os.apiWithDialog('clips/create', result);
os.apiWithDialog('clips/add-note', { clipId: clip.id, noteId: this.appearNote.id });
}
}, null, ...clips.map(clip => ({
text: clip.name,
action: () => {
os.apiWithDialog('clips/add-note', { clipId: clip.id, noteId: this.appearNote.id });
}
}))], this.$refs.menuButton, {
}).then(this.focus);
},
async promote() {
const { canceled, result: days } = await os.dialog({
title: this.$t('numberOfDays'),

View File

@ -6,7 +6,7 @@
<XAntenna v-if="draft" :antenna="draft" @created="onAntennaCreated" style="margin-bottom: var(--margin);"/>
<MkPagination :pagination="pagination" #default="{items}" class="antennas" ref="list">
<XAntenna v-for="(antenna, i) in items" :key="antenna.id" :antenna="antenna" @created="onAntennaDeleted"/>
<XAntenna v-for="(antenna, i) in items" :key="antenna.id" :antenna="antenna" @deleted="onAntennaDeleted"/>
</MkPagination>
</div>
</div>

View File

@ -0,0 +1,78 @@
<template>
<div class="_section">
<MkButton @click="create" primary class="add"><Fa :icon="faPlus"/> {{ $t('add') }}</MkButton>
<div class="_content">
<MkPagination :pagination="pagination" #default="{items}" ref="list">
<MkA v-for="item in items" :key="item.id" :to="`/clips/${item.id}`">{{ item.name }}</MkA>
</MkPagination>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { faPlus, faPaperclip } from '@fortawesome/free-solid-svg-icons';
import MkPagination from '@/components/ui/pagination.vue';
import MkButton from '@/components/ui/button.vue';
import * as os from '@/os';
export default defineComponent({
components: {
MkPagination,
MkButton,
},
data() {
return {
INFO: {
title: this.$t('clip'),
icon: faPaperclip,
action: {
icon: faPlus,
handler: this.create
}
},
pagination: {
endpoint: 'clips/list',
limit: 10,
},
draft: null,
faPlus
};
},
methods: {
async create() {
const { canceled, result } = await os.form(this.$t('createNewClip'), {
name: {
type: 'string',
label: this.$t('name')
},
description: {
type: 'string',
required: false,
multiline: true,
label: this.$t('description')
},
isPublic: {
type: 'boolean',
label: this.$t('public')
}
});
if (canceled) return;
os.apiWithDialog('clips/create', result);
},
onClipCreated() {
this.$refs.list.reload();
this.draft = null;
},
onClipDeleted() {
this.$refs.list.reload();
},
}
});
</script>

View File

@ -162,7 +162,7 @@ export default defineComponent({
dialogCancelByBgClick: true,
dialogInput: false,
dialogResult: null,
formTitle: null,
formTitle: 'Test form',
formForm: JSON.stringify({
foo: {
type: 'boolean',
@ -179,6 +179,12 @@ export default defineComponent({
default: 'Misskey makes you happy.',
label: 'This is a string property'
},
qux: {
type: 'string',
multiline: true,
default: 'Misskey makes\nyou happy.',
label: 'Multiline string'
},
}, null, '\t'),
formResult: null,
mfm: '',

View File

@ -55,6 +55,7 @@ export const router = createRouter({
{ path: '/my/groups', component: page('my-groups/index') },
{ path: '/my/groups/:group', component: page('my-groups/group') },
{ path: '/my/antennas', component: page('my-antennas/index') },
{ path: '/my/clips', component: page('my-clips/index') },
{ path: '/my/apps', component: page('apps') },
{ path: '/scratchpad', component: page('scratchpad') },
{ path: '/instance', component: page('instance/index') },

View File

@ -1,5 +1,5 @@
import { faBell, faComments, faEnvelope } from '@fortawesome/free-regular-svg-icons';
import { faAt, faBroadcastTower, faCloud, faColumns, faDoorClosed, faFileAlt, faFireAlt, faGamepad, faHashtag, faListUl, faSatellite, faSatelliteDish, faSearch, faStar, faTerminal, faUserClock, faUsers } from '@fortawesome/free-solid-svg-icons';
import { faAt, faBroadcastTower, faCloud, faColumns, faDoorClosed, faFileAlt, faFireAlt, faGamepad, faHashtag, faListUl, faPaperclip, faSatellite, faSatelliteDish, faSearch, faStar, faTerminal, faUserClock, faUsers } from '@fortawesome/free-solid-svg-icons';
import { computed } from 'vue';
import { store } from '@/store';
import { search } from '@/scripts/search';
@ -99,6 +99,12 @@ export const sidebarDef = {
show: computed(() => store.getters.isSignedIn),
to: '/my/pages',
},
clips: {
title: 'clip',
icon: faPaperclip,
show: computed(() => store.getters.isSignedIn),
to: '/my/clips',
},
channels: {
title: 'channel',
icon: faSatelliteDish,