Compare commits
No commits in common. "1121e9646d977494c990411e6c8317b729b87783" and "8a4b949552df3ad1525b8a63f175dda19b757e89" have entirely different histories.
1121e9646d
...
8a4b949552
|
|
@ -1,10 +1,10 @@
|
|||
<template>
|
||||
<div class="zmdxowus">
|
||||
<p v-if="poll.choices.length < 2" class="caution">
|
||||
<p v-if="choices.length < 2" class="caution">
|
||||
<i class="fas fa-exclamation-triangle"></i>{{ $ts._poll.noOnlyOneChoice }}
|
||||
</p>
|
||||
<ul ref="choices">
|
||||
<li v-for="(choice, i) in poll.choices" :key="i">
|
||||
<li v-for="(choice, i) in choices" :key="i">
|
||||
<MkInput class="input" :model-value="choice" :placeholder="$t('_poll.choiceN', { n: i + 1 })" @update:modelValue="onInput(i, $event)">
|
||||
</MkInput>
|
||||
<button class="_button" @click="remove(i)">
|
||||
|
|
@ -12,10 +12,10 @@
|
|||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
<MkButton v-if="poll.choices.length < 10" class="add" @click="add">{{ $ts.add }}</MkButton>
|
||||
<MkButton v-if="choices.length < 10" class="add" @click="add">{{ $ts.add }}</MkButton>
|
||||
<MkButton v-else class="add" disabled>{{ $ts._poll.noMore }}</MkButton>
|
||||
<MkSwitch v-model="poll.multiple">{{ $ts._poll.canMultipleVote }}</MkSwitch>
|
||||
<section>
|
||||
<MkSwitch v-model="multiple">{{ $ts._poll.canMultipleVote }}</MkSwitch>
|
||||
<div>
|
||||
<MkSelect v-model="expiration">
|
||||
<template #label>{{ $ts._poll.expiration }}</template>
|
||||
|
|
@ -47,8 +47,8 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue';
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import { addTime } from '@/scripts/time';
|
||||
import { formatDateTimeString } from '@/scripts/format-time-string';
|
||||
import MkInput from './form/input.vue';
|
||||
|
|
@ -56,54 +56,107 @@ import MkSelect from './form/select.vue';
|
|||
import MkSwitch from './form/switch.vue';
|
||||
import MkButton from './ui/button.vue';
|
||||
|
||||
const { poll } = defineProps({
|
||||
export default defineComponent({
|
||||
components: {
|
||||
MkInput,
|
||||
MkSelect,
|
||||
MkSwitch,
|
||||
MkButton,
|
||||
},
|
||||
|
||||
props: {
|
||||
poll: {
|
||||
type: Object,
|
||||
required: true,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
});
|
||||
const emit = defineEmits(['updated']);
|
||||
|
||||
const expiration = ref('infinite');
|
||||
const atDate = ref(formatDateTimeString(addTime(new Date(), 1, 'day'), 'yyyy-MM-dd'));
|
||||
const atTime = ref('00:00');
|
||||
const after = ref(0);
|
||||
const unit = ref('second');
|
||||
emits: ['updated'],
|
||||
|
||||
if (poll.expiresAt) {
|
||||
expiration.value = 'at';
|
||||
atDate.value = atTime.value = poll.expiresAt;
|
||||
} else if (typeof poll.expiredAfter === 'number') {
|
||||
expiration.value = 'after';
|
||||
after.value = poll.expiredAfter / 1000;
|
||||
} else {
|
||||
expiration.value = 'infinite';
|
||||
}
|
||||
data() {
|
||||
return {
|
||||
choices: this.poll.choices,
|
||||
multiple: this.poll.multiple,
|
||||
expiration: 'infinite',
|
||||
atDate: formatDateTimeString(addTime(new Date(), 1, 'day'), 'yyyy-MM-dd'),
|
||||
atTime: '00:00',
|
||||
after: 0,
|
||||
unit: 'second',
|
||||
};
|
||||
},
|
||||
|
||||
function onInput(i, e) {
|
||||
poll.choices[i] = e;
|
||||
}
|
||||
watch: {
|
||||
choices: {
|
||||
handler() {
|
||||
this.$emit('updated', this.get());
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
multiple: {
|
||||
handler() {
|
||||
this.$emit('updated', this.get());
|
||||
},
|
||||
},
|
||||
expiration: {
|
||||
handler() {
|
||||
this.$emit('updated', this.get());
|
||||
},
|
||||
},
|
||||
atDate: {
|
||||
handler() {
|
||||
this.$emit('updated', this.get());
|
||||
},
|
||||
},
|
||||
after: {
|
||||
handler() {
|
||||
this.$emit('updated', this.get());
|
||||
},
|
||||
},
|
||||
unit: {
|
||||
handler() {
|
||||
this.$emit('updated', this.get());
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
function add() {
|
||||
poll.choices.push('');
|
||||
created() {
|
||||
const poll = this.poll;
|
||||
if (poll.expiresAt) {
|
||||
this.expiration = 'at';
|
||||
this.atDate = this.atTime = poll.expiresAt;
|
||||
} else if (typeof poll.expiredAfter === 'number') {
|
||||
this.expiration = 'after';
|
||||
this.after = poll.expiredAfter / 1000;
|
||||
} else {
|
||||
this.expiration = 'infinite';
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onInput(i, e) {
|
||||
this.choices[i] = e;
|
||||
},
|
||||
|
||||
add() {
|
||||
this.choices.push('');
|
||||
this.$nextTick(() => {
|
||||
// TODO
|
||||
// nextTick(() => {
|
||||
// (this.$refs.choices as any).childNodes[this.choices.length - 1].childNodes[0].focus();
|
||||
// });
|
||||
}
|
||||
//(this.$refs.choices as any).childNodes[this.choices.length - 1].childNodes[0].focus();
|
||||
});
|
||||
},
|
||||
|
||||
function remove(i) {
|
||||
poll.choices = poll.choices.filter((_, _i) => _i != i);
|
||||
}
|
||||
remove(i) {
|
||||
this.choices = this.choices.filter((_, _i) => _i != i);
|
||||
},
|
||||
|
||||
function get() {
|
||||
const calcAt = () => {
|
||||
return new Date(`${atDate.value} ${atTime.value}`).getTime();
|
||||
get() {
|
||||
const at = () => {
|
||||
return new Date(`${this.atDate} ${this.atTime}`).getTime();
|
||||
};
|
||||
|
||||
const calcAfter = () => {
|
||||
let base = parseInt(after.value);
|
||||
switch (unit) {
|
||||
const after = () => {
|
||||
let base = parseInt(this.after);
|
||||
switch (this.unit) {
|
||||
case 'day': base *= 24;
|
||||
case 'hour': base *= 60;
|
||||
case 'minute': base *= 60;
|
||||
|
|
@ -113,16 +166,16 @@ function get() {
|
|||
};
|
||||
|
||||
return {
|
||||
choices: poll.choices,
|
||||
multiple: poll.multiple,
|
||||
choices: this.choices,
|
||||
multiple: this.multiple,
|
||||
...(
|
||||
expiration.value === 'at' ? { expiresAt: calcAt() } :
|
||||
expiration.value === 'after' ? { expiredAfter: calcAfter() } : {}
|
||||
this.expiration === 'at' ? { expiresAt: at() } :
|
||||
this.expiration === 'after' ? { expiredAfter: after() } : {}
|
||||
)
|
||||
};
|
||||
}
|
||||
|
||||
watch([poll, expiration, atDate, after, unit], () => emit('updated', get()));
|
||||
},
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
@ -163,7 +216,7 @@ watch([poll, expiration, atDate, after, unit], () => emit('updated', get()));
|
|||
}
|
||||
|
||||
> .add {
|
||||
margin: 8px 0;
|
||||
margin: 8px 0 0 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
|
|
@ -172,27 +225,21 @@ watch([poll, expiration, atDate, after, unit], () => emit('updated', get()));
|
|||
|
||||
> div {
|
||||
margin: 0 8px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
|
||||
&:last-child {
|
||||
flex: 1 0 auto;
|
||||
|
||||
> div {
|
||||
flex-grow: 1;
|
||||
> section {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
margin: -32px 0 0;
|
||||
|
||||
> &:first-child {
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
> section {
|
||||
// MAGIC: Prevent div above from growing unless wrapped to its own line
|
||||
flex-grow: 9999;
|
||||
align-items: end;
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
|
||||
> .input {
|
||||
flex: 1 1 auto;
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -89,7 +89,6 @@ const defaultRoutes = [
|
|||
];
|
||||
|
||||
const chatRoutes = [
|
||||
{ path: '/', component: $i ? page('timeline', 'chat') : page('welcome'), props: $i ? route => ({ src: 'home' }) : undefined },
|
||||
{ path: '/timeline', component: page('timeline', 'chat'), props: route => ({ src: 'home' }) },
|
||||
{ path: '/timeline/home', component: page('timeline', 'chat'), props: route => ({ src: 'home' }) },
|
||||
{ path: '/timeline/local', component: page('timeline', 'chat'), props: route => ({ src: 'local' }) },
|
||||
|
|
|
|||
|
|
@ -21,7 +21,6 @@
|
|||
<textarea ref="text" v-model="text" class="text" :class="{ withCw: useCw }" :disabled="posting" :placeholder="placeholder" @keydown="onKeydown" @paste="onPaste" @compositionupdate="onCompositionUpdate" @compositionend="onCompositionEnd"/>
|
||||
<XPostFormAttaches class="attaches" :files="files" @updated="updateFiles" @detach="detachFile" @changeSensitive="updateFileSensitive" @changeName="updateFileName"/>
|
||||
<XPollEditor v-if="poll" :poll="poll" @destroyed="poll = null" @updated="onPollUpdate"/>
|
||||
<XNotePreview v-if="showPreview" class="preview" :text="text"/>
|
||||
<footer>
|
||||
<div class="left">
|
||||
<button v-tooltip="$ts.attachFile" class="_button" @click="chooseFileFrom"><i class="fas fa-photo-video"></i></button>
|
||||
|
|
@ -40,7 +39,6 @@
|
|||
<span v-if="visibility === 'followers'"><i class="fas fa-unlock"></i></span>
|
||||
<span v-if="visibility === 'specified'"><i class="fas fa-envelope"></i></span>
|
||||
</button>
|
||||
<button v-tooltip="$ts.previewNoteText" class="_button preview" :class="{ active: showPreview }" @click="showPreview = !showPreview"><i class="fas fa-file-code"></i></button>
|
||||
<button class="submit _buttonPrimary" :disabled="!canPost" @click="post">{{ submitText }}<i :class="reply ? 'fas fa-reply' : renote ? 'fas fa-quote-right' : 'fas fa-paper-plane'"></i></button>
|
||||
</div>
|
||||
</footer>
|
||||
|
|
@ -53,7 +51,6 @@ import { defineComponent, defineAsyncComponent } from 'vue';
|
|||
import insertTextAtCursor from 'insert-text-at-cursor';
|
||||
import { length } from 'stringz';
|
||||
import { toASCII } from 'punycode/';
|
||||
import XNotePreview from '@/components/note-preview.vue';
|
||||
import * as mfm from 'mfm-js';
|
||||
import { host, url } from '@/config';
|
||||
import { erase, unique } from '@/scripts/array';
|
||||
|
|
@ -68,7 +65,6 @@ import { throttle } from 'throttle-debounce';
|
|||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
XNotePreview,
|
||||
XPostFormAttaches: defineAsyncComponent(() => import('@/components/post-form-attaches.vue')),
|
||||
XPollEditor: defineAsyncComponent(() => import('@/components/poll-editor.vue'))
|
||||
},
|
||||
|
|
@ -126,7 +122,6 @@ export default defineComponent({
|
|||
cw: null,
|
||||
localOnly: this.$store.state.rememberNoteVisibility ? this.$store.state.localOnly : this.$store.state.defaultNoteLocalOnly,
|
||||
visibility: this.$store.state.rememberNoteVisibility ? this.$store.state.visibility : this.$store.state.defaultNoteVisibility,
|
||||
showPreview: false,
|
||||
visibleUsers: [],
|
||||
autocomplete: null,
|
||||
draghover: false,
|
||||
|
|
@ -422,7 +417,6 @@ export default defineComponent({
|
|||
this.files = [];
|
||||
this.poll = null;
|
||||
this.quoteId = null;
|
||||
this.showPreview = false;
|
||||
},
|
||||
|
||||
onKeydown(e: KeyboardEvent) {
|
||||
|
|
@ -741,12 +735,7 @@ export default defineComponent({
|
|||
|
||||
> .visibility {
|
||||
width: $height;
|
||||
margin: 0 0 0 8px;
|
||||
border-radius: 6px;
|
||||
|
||||
&:hover {
|
||||
background: var(--X5);
|
||||
}
|
||||
margin: 0 8px;
|
||||
|
||||
& + .localOnly {
|
||||
margin-left: 0 !important;
|
||||
|
|
@ -758,30 +747,12 @@ export default defineComponent({
|
|||
opacity: 0.7;
|
||||
}
|
||||
|
||||
> .preview {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
margin: 0 8px 0 0;
|
||||
font-size: 16px;
|
||||
width: $height;
|
||||
border-radius: 6px;
|
||||
|
||||
&:hover {
|
||||
background: var(--X5);
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: var(--accent);
|
||||
}
|
||||
}
|
||||
|
||||
> .submit {
|
||||
margin: 0;
|
||||
padding: 0 12px;
|
||||
line-height: 34px;
|
||||
font-weight: bold;
|
||||
border-radius: 4px;
|
||||
font-size: 0.9em;
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.7;
|
||||
|
|
|
|||
Loading…
Reference in New Issue