Sharkey/src/client/app/desktop/views/components/post-form.vue

801 lines
20 KiB
Vue
Raw Normal View History

2018-02-11 18:06:17 +02:00
<template>
<div class="mk-post-form"
2018-02-26 23:25:17 +02:00
@dragover.stop="onDragover"
2018-02-11 18:06:17 +02:00
@dragenter="onDragenter"
@dragleave="onDragleave"
2018-02-26 23:25:17 +02:00
@drop.stop="onDrop"
2018-02-11 18:06:17 +02:00
>
<div class="content">
2018-04-28 23:28:34 +03:00
<div v-if="visibility == 'specified'" class="visibleUsers">
<span v-for="u in visibleUsers">{{ u | userName }}<a @click="removeVisibleUser(u)">[x]</a></span>
<a @click="addVisibleUser">{{ $t('add-visible-user') }}</a>
2018-04-28 23:28:34 +03:00
</div>
2018-08-17 00:03:03 +03:00
<div class="hashtags" v-if="recentHashtags.length > 0 && $store.state.settings.suggestRecentHashtags">
<b>{{ $t('recent-tags') }}:</b>
<a v-for="tag in recentHashtags.slice(0, 5)" @click="addTag(tag)" :title="$t('click-to-tagging')">#{{ tag }}</a>
</div>
<div class="local-only" v-if="this.localOnly == true">{{ $t('local-only-message') }}</div>
2018-12-02 00:33:03 +02:00
<input v-show="useCw" ref="cw" v-model="cw" :placeholder="$t('annotations')" v-autocomplete="'cw'">
2018-11-12 17:12:55 +02:00
<div class="textarea">
<textarea :class="{ with: (files.length != 0 || poll) }"
ref="text" v-model="text" :disabled="posting"
@keydown="onKeydown" @paste="onPaste" :placeholder="placeholder"
v-autocomplete="'text'"
></textarea>
<button class="emoji" @click="emoji" ref="emoji">
<fa :icon="['far', 'laugh']"/>
</button>
2018-11-12 17:21:49 +02:00
<div class="files" :class="{ with: poll }" v-show="files.length != 0">
<x-draggable :list="files" :options="{ animation: 150 }">
<div v-for="file in files" :key="file.id">
<div class="img" :style="{ backgroundImage: `url(${file.thumbnailUrl})` }" :title="file.name"></div>
<img class="remove" @click="detachMedia(file.id)" src="/assets/desktop/remove.png" :title="$t('attach-cancel')" alt=""/>
</div>
</x-draggable>
<p class="remain">{{ 4 - files.length }}/4</p>
</div>
<mk-poll-editor v-if="poll" ref="poll" @destroyed="poll = false" @updated="saveDraft()"/>
2018-11-12 17:12:55 +02:00
</div>
2018-02-11 18:06:17 +02:00
</div>
2018-02-22 19:09:48 +02:00
<mk-uploader ref="uploader" @uploaded="attachMedia" @change="onChangeUploadings"/>
<button class="upload" :title="$t('attach-media-from-local')" @click="chooseFile"><fa icon="upload"/></button>
<button class="drive" :title="$t('attach-media-from-drive')" @click="chooseFileFromDrive"><fa icon="cloud"/></button>
<button class="kao" :title="$t('insert-a-kao')" @click="kao"><fa :icon="['far', 'smile']"/></button>
<button class="poll" :title="$t('create-poll')" @click="poll = !poll"><fa icon="chart-pie"/></button>
<button class="cw" :title="$t('hide-contents')" @click="useCw = !useCw"><fa :icon="['far', 'eye-slash']"/></button>
<button class="geo" :title="$t('attach-location-information')" @click="geo ? removeGeo() : setGeo()"><fa icon="map-marker-alt"/></button>
<button class="visibility" :title="$t('visibility')" @click="setVisibility" ref="visibilityButton">
<span v-if="visibility === 'public'"><fa icon="globe"/></span>
<span v-if="visibility === 'home'"><fa icon="home"/></span>
<span v-if="visibility === 'followers'"><fa icon="unlock"/></span>
<span v-if="visibility === 'specified'"><fa icon="envelope"/></span>
<span v-if="visibility === 'private'"><fa icon="lock"/></span>
</button>
2018-11-09 01:26:32 +02:00
<p class="text-count" :class="{ over: trimmedLength(text) > maxNoteTextLength }">{{ maxNoteTextLength - trimmedLength(text) }}</p>
2018-02-16 08:38:12 +02:00
<button :class="{ posting }" class="submit" :disabled="!canPost" @click="post">
2018-11-09 01:26:32 +02:00
{{ posting ? $t('posting') : submitText }}<mk-ellipsis v-if="posting"/>
2018-02-11 18:06:17 +02:00
</button>
2018-09-15 22:34:46 +03:00
<input ref="file" type="file" multiple="multiple" tabindex="-1" @change="onChangeFile"/>
2018-02-11 18:06:17 +02:00
<div class="dropzone" v-if="draghover"></div>
</div>
</template>
2018-02-12 05:21:26 +02:00
<script lang="ts">
import Vue from 'vue';
import i18n from '../../../i18n';
import insertTextAtCursor from 'insert-text-at-cursor';
2018-02-21 22:57:24 +02:00
import * as XDraggable from 'vuedraggable';
2018-08-17 22:13:25 +03:00
import getFace from '../../../common/scripts/get-face';
2018-04-28 11:25:56 +03:00
import MkVisibilityChooser from '../../../common/views/components/visibility-chooser.vue';
import parse from '../../../../../mfm/parse';
2018-06-12 23:21:55 +03:00
import { host } from '../../../config';
2018-09-11 21:02:14 +03:00
import { erase, unique } from '../../../../../prelude/array';
import { length } from 'stringz';
2018-09-09 21:02:06 +03:00
import parseAcct from '../../../../../misc/acct/parse';
import { toASCII } from 'punycode';
2018-02-12 05:21:26 +02:00
export default Vue.extend({
i18n: i18n('desktop/views/components/post-form.vue'),
2018-02-21 22:57:24 +02:00
components: {
2018-04-28 11:25:56 +03:00
XDraggable,
MkVisibilityChooser
2018-02-21 22:57:24 +02:00
},
2018-04-22 11:04:52 +03:00
2018-06-16 12:42:49 +03:00
props: {
reply: {
type: Object,
required: false
},
renote: {
type: Object,
required: false
},
initialText: {
type: String,
required: false
},
instant: {
type: Boolean,
required: false,
default: false
}
},
2018-04-22 11:04:52 +03:00
2018-02-12 05:21:26 +02:00
data() {
return {
posting: false,
2018-02-12 11:49:06 +02:00
text: '',
files: [],
uploadings: [],
poll: false,
2018-04-22 11:04:52 +03:00
useCw: false,
cw: null,
2018-03-05 01:44:37 +02:00
geo: null,
visibility: 'public',
2018-04-28 23:28:34 +03:00
visibleUsers: [],
localOnly: false,
2018-02-12 11:49:06 +02:00
autocomplete: null,
draghover: false,
recentHashtags: JSON.parse(localStorage.getItem('hashtags') || '[]'),
maxNoteTextLength: 1000
2018-02-12 05:21:26 +02:00
};
},
2018-04-22 11:04:52 +03:00
created() {
2018-11-09 01:13:34 +02:00
this.$root.getMeta().then(meta => {
this.maxNoteTextLength = meta.maxNoteTextLength;
});
},
2018-02-12 05:21:26 +02:00
computed: {
2018-02-12 11:49:06 +02:00
draftId(): string {
2018-04-07 20:30:37 +03:00
return this.renote
2018-09-01 17:12:51 +03:00
? `renote:${this.renote.id}`
2018-02-12 11:49:06 +02:00
: this.reply
2018-09-01 17:12:51 +03:00
? `reply:${this.reply.id}`
2018-04-07 20:30:37 +03:00
: 'note';
2018-02-12 11:49:06 +02:00
},
2018-04-22 11:04:52 +03:00
2018-02-12 11:49:06 +02:00
placeholder(): string {
2018-05-28 20:00:45 +03:00
const xs = [
this.$t('@.note-placeholders.a'),
this.$t('@.note-placeholders.b'),
this.$t('@.note-placeholders.c'),
this.$t('@.note-placeholders.d'),
this.$t('@.note-placeholders.e'),
this.$t('@.note-placeholders.f')
2018-05-28 20:00:45 +03:00
];
const x = xs[Math.floor(Math.random() * xs.length)];
2018-05-28 19:44:15 +03:00
2018-04-07 20:30:37 +03:00
return this.renote
? this.$t('quote-placeholder')
2018-02-12 11:49:06 +02:00
: this.reply
? this.$t('reply-placeholder')
2018-05-28 19:44:15 +03:00
: x;
2018-02-12 11:49:06 +02:00
},
2018-04-22 11:04:52 +03:00
2018-02-12 11:49:06 +02:00
submitText(): string {
2018-04-07 20:30:37 +03:00
return this.renote
? this.$t('renote')
2018-02-12 11:49:06 +02:00
: this.reply
? this.$t('reply')
: this.$t('submit');
2018-02-12 11:49:06 +02:00
},
2018-04-22 11:04:52 +03:00
2018-02-12 05:21:26 +02:00
canPost(): boolean {
2018-07-23 07:37:29 +03:00
return !this.posting &&
(1 <= this.text.length || 1 <= this.files.length || this.poll || this.renote) &&
(length(this.text.trim()) <= this.maxNoteTextLength);
2018-02-12 11:49:06 +02:00
}
},
2018-04-22 11:04:52 +03:00
mounted() {
2018-06-16 12:42:49 +03:00
if (this.initialText) {
this.text = this.initialText;
}
if (this.reply && this.reply.user.host != null) {
this.text = `@${this.reply.user.username}@${toASCII(this.reply.user.host)} `;
2018-02-21 22:57:24 +02:00
}
2018-04-22 11:04:52 +03:00
2018-05-26 17:20:52 +03:00
if (this.reply && this.reply.text != null) {
const ast = parse(this.reply.text);
ast.filter(t => t.type == 'mention').forEach(x => {
const mention = x.host ? `@${x.username}@${toASCII(x.host)}` : `@${x.username}`;
2018-05-26 21:01:08 +03:00
// 自分は除外
2018-05-27 07:49:09 +03:00
if (this.$store.state.i.username == x.username && x.host == null) return;
2018-06-12 23:21:55 +03:00
if (this.$store.state.i.username == x.username && x.host == host) return;
2018-05-26 21:01:08 +03:00
// 重複は除外
if (this.text.indexOf(`${mention} `) != -1) return;
this.text += `${mention} `;
2018-05-26 17:20:52 +03:00
});
}
// デフォルト公開範囲
this.applyVisibility(this.$store.state.settings.rememberNoteVisibility ? (this.$store.state.device.visibility || this.$store.state.settings.defaultNoteVisibility) : this.$store.state.settings.defaultNoteVisibility);
// 公開以外へのリプライ時は元の公開範囲を引き継ぐ
if (this.reply && ['home', 'followers', 'specified', 'private'].includes(this.reply.visibility)) {
this.visibility = this.reply.visibility;
}
// ダイレクトへのリプライはリプライ先ユーザーを初期設定
if (this.reply && this.reply.visibility === 'specified') {
2018-11-09 01:13:34 +02:00
this.$root.api('users/show', { userId: this.reply.userId }).then(user => {
this.visibleUsers.push(user);
});
}
2018-02-18 11:40:24 +02:00
this.$nextTick(() => {
2018-02-16 08:38:12 +02:00
// 書きかけの投稿を復元
2018-06-16 12:42:49 +03:00
if (!this.instant) {
const draft = JSON.parse(localStorage.getItem('drafts') || '{}')[this.draftId];
if (draft) {
this.text = draft.data.text;
this.files = draft.data.files;
if (draft.data.poll) {
this.poll = true;
this.$nextTick(() => {
(this.$refs.poll as any).set(draft.data.poll);
});
}
2018-09-05 13:32:46 +03:00
this.$emit('change-attached-files', this.files);
2018-02-16 08:38:12 +02:00
}
2018-02-12 11:49:06 +02:00
}
this.$nextTick(() => this.watch());
2018-02-12 11:49:06 +02:00
});
},
2018-04-22 11:04:52 +03:00
2018-02-12 11:49:06 +02:00
methods: {
trimmedLength(text: string) {
return length(text.trim());
},
addTag(tag: string) {
insertTextAtCursor(this.$refs.text, ` #${tag} `);
},
watch() {
this.$watch('text', () => this.saveDraft());
this.$watch('poll', () => this.saveDraft());
this.$watch('files', () => this.saveDraft());
},
2018-02-12 11:49:06 +02:00
focus() {
(this.$refs.text as any).focus();
},
2018-04-22 11:04:52 +03:00
2018-02-12 11:49:06 +02:00
chooseFile() {
(this.$refs.file as any).click();
},
2018-04-22 11:04:52 +03:00
2018-02-18 05:35:18 +02:00
chooseFileFromDrive() {
this.$chooseDriveFile({
2018-02-18 05:35:18 +02:00
multiple: true
}).then(files => {
2018-02-12 11:49:06 +02:00
files.forEach(this.attachMedia);
2018-02-18 05:35:18 +02:00
});
2018-02-12 11:49:06 +02:00
},
2018-04-22 11:04:52 +03:00
2018-02-12 11:49:06 +02:00
attachMedia(driveFile) {
this.files.push(driveFile);
2018-09-05 13:32:46 +03:00
this.$emit('change-attached-files', this.files);
2018-02-12 11:49:06 +02:00
},
2018-04-22 11:04:52 +03:00
2018-02-12 11:49:06 +02:00
detachMedia(id) {
this.files = this.files.filter(x => x.id != id);
2018-09-05 13:32:46 +03:00
this.$emit('change-attached-files', this.files);
2018-02-12 11:49:06 +02:00
},
2018-04-22 11:04:52 +03:00
2018-02-12 11:49:06 +02:00
onChangeFile() {
Array.from((this.$refs.file as any).files).forEach(this.upload);
},
2018-04-22 11:04:52 +03:00
2018-02-12 11:49:06 +02:00
upload(file) {
(this.$refs.uploader as any).upload(file);
},
2018-04-22 11:04:52 +03:00
2018-02-12 11:49:06 +02:00
onChangeUploadings(uploads) {
this.$emit('change-uploadings', uploads);
},
2018-04-22 11:04:52 +03:00
2018-02-12 11:49:06 +02:00
clear() {
this.text = '';
this.files = [];
this.poll = false;
2018-09-05 13:32:46 +03:00
this.$emit('change-attached-files', this.files);
2018-02-12 11:49:06 +02:00
},
2018-04-22 11:04:52 +03:00
2018-02-12 11:49:06 +02:00
onKeydown(e) {
2018-07-20 20:06:49 +03:00
if ((e.which == 10 || e.which == 13) && (e.ctrlKey || e.metaKey) && this.canPost) this.post();
2018-02-12 11:49:06 +02:00
},
2018-04-22 11:04:52 +03:00
2018-02-12 11:49:06 +02:00
onPaste(e) {
Array.from(e.clipboardData.items).forEach((item: any) => {
if (item.kind == 'file') {
this.upload(item.getAsFile());
}
});
},
2018-04-22 11:04:52 +03:00
2018-02-12 11:49:06 +02:00
onDragover(e) {
2018-02-26 23:25:17 +02:00
const isFile = e.dataTransfer.items[0].kind == 'file';
const isDriveFile = e.dataTransfer.types[0] == 'mk_drive_file';
if (isFile || isDriveFile) {
e.preventDefault();
this.draghover = true;
e.dataTransfer.dropEffect = e.dataTransfer.effectAllowed == 'all' ? 'copy' : 'move';
}
2018-02-12 11:49:06 +02:00
},
2018-04-22 11:04:52 +03:00
2018-02-12 11:49:06 +02:00
onDragenter(e) {
this.draghover = true;
},
2018-04-22 11:04:52 +03:00
2018-02-12 11:49:06 +02:00
onDragleave(e) {
this.draghover = false;
},
2018-04-22 11:04:52 +03:00
2018-02-12 11:49:06 +02:00
onDrop(e): void {
this.draghover = false;
// ファイルだったら
if (e.dataTransfer.files.length > 0) {
2018-02-26 23:25:17 +02:00
e.preventDefault();
2018-02-12 11:49:06 +02:00
Array.from(e.dataTransfer.files).forEach(this.upload);
return;
}
2018-02-26 23:25:17 +02:00
//#region ドライブのファイル
const driveFile = e.dataTransfer.getData('mk_drive_file');
if (driveFile != null && driveFile != '') {
const file = JSON.parse(driveFile);
this.files.push(file);
2018-09-05 13:32:46 +03:00
this.$emit('change-attached-files', this.files);
2018-02-26 23:25:17 +02:00
e.preventDefault();
2018-02-26 21:36:16 +02:00
}
2018-02-26 23:25:17 +02:00
//#endregion
2018-02-12 11:49:06 +02:00
},
2018-04-22 11:04:52 +03:00
2018-03-05 01:44:37 +02:00
setGeo() {
if (navigator.geolocation == null) {
alert(this.$t('geolocation-alert'));
2018-03-05 01:44:37 +02:00
return;
}
navigator.geolocation.getCurrentPosition(pos => {
this.geo = pos.coords;
this.$emit('geo-attached', this.geo);
}, err => {
2018-09-01 17:12:51 +03:00
alert(`%i18n:@error%: ${err.message}`);
2018-03-05 01:44:37 +02:00
}, {
2018-07-23 07:37:29 +03:00
enableHighAccuracy: true
});
2018-03-05 01:44:37 +02:00
},
2018-04-22 11:04:52 +03:00
2018-03-05 07:09:12 +02:00
removeGeo() {
this.geo = null;
this.$emit('geo-dettached');
},
2018-04-22 11:04:52 +03:00
2018-04-28 11:25:56 +03:00
setVisibility() {
2018-11-09 01:13:34 +02:00
const w = this.$root.new(MkVisibilityChooser, {
2018-08-17 10:35:04 +03:00
source: this.$refs.visibilityButton
2018-04-28 11:25:56 +03:00
});
w.$once('chosen', v => {
this.applyVisibility(v);
2018-04-28 11:25:56 +03:00
});
},
applyVisibility(v :string) {
const m = v.match(/^local-(.+)/);
if (m) {
this.localOnly = true;
this.visibility = m[1];
} else {
this.localOnly = false;
this.visibility = v;
}
},
2018-04-28 23:28:34 +03:00
addVisibleUser() {
this.$input({
title: this.$t('enter-username')
2018-09-09 21:02:06 +03:00
}).then(acct => {
if (acct.startsWith('@')) acct = acct.substr(1);
2018-11-09 01:13:34 +02:00
this.$root.api('users/show', parseAcct(acct)).then(user => {
2018-04-28 23:28:34 +03:00
this.visibleUsers.push(user);
});
});
},
removeVisibleUser(user) {
2018-09-06 18:02:55 +03:00
this.visibleUsers = erase(user, this.visibleUsers);
2018-04-28 23:28:34 +03:00
},
2018-11-12 17:12:55 +02:00
async emoji() {
const Picker = await import('./emoji-picker-dialog.vue').then(m => m.default);
const button = this.$refs.emoji;
const rect = button.getBoundingClientRect();
const vm = this.$root.new(Picker, {
x: button.offsetWidth + rect.left + window.pageXOffset,
y: rect.top + window.pageYOffset
});
vm.$once('chosen', emoji => {
insertTextAtCursor(this.$refs.text, emoji);
});
},
2018-02-12 11:49:06 +02:00
post() {
this.posting = true;
2018-11-09 01:13:34 +02:00
this.$root.api('notes/create', {
2018-02-12 11:49:06 +02:00
text: this.text == '' ? undefined : this.text,
2018-09-05 13:32:46 +03:00
fileIds: this.files.length > 0 ? this.files.map(f => f.id) : undefined,
2018-03-29 08:48:47 +03:00
replyId: this.reply ? this.reply.id : undefined,
2018-04-07 20:30:37 +03:00
renoteId: this.renote ? this.renote.id : undefined,
2018-03-05 01:44:37 +02:00
poll: this.poll ? (this.$refs.poll as any).get() : undefined,
2018-04-22 11:04:52 +03:00
cw: this.useCw ? this.cw || '' : undefined,
2018-04-28 11:25:56 +03:00
visibility: this.visibility,
2018-04-29 01:01:47 +03:00
visibleUserIds: this.visibility == 'specified' ? this.visibleUsers.map(u => u.id) : undefined,
localOnly: this.localOnly,
2018-03-05 02:03:54 +02:00
geo: this.geo ? {
2018-03-29 09:23:15 +03:00
coordinates: [this.geo.longitude, this.geo.latitude],
2018-03-05 02:03:54 +02:00
altitude: this.geo.altitude,
accuracy: this.geo.accuracy,
altitudeAccuracy: this.geo.altitudeAccuracy,
heading: isNaN(this.geo.heading) ? null : this.geo.heading,
speed: this.geo.speed,
} : null
2018-02-12 11:49:06 +02:00
}).then(data => {
this.clear();
this.deleteDraft();
this.$emit('posted');
this.$notify(this.renote
? this.$t('reposted')
2018-02-12 11:49:06 +02:00
: this.reply
? this.$t('replied')
: this.$t('posted'));
2018-02-12 11:49:06 +02:00
}).catch(err => {
this.$notify(this.renote
? this.$t('renote-failed')
2018-02-12 11:49:06 +02:00
: this.reply
? this.$t('reply-failed')
: this.$t('note-failed'));
2018-02-12 11:49:06 +02:00
}).then(() => {
this.posting = false;
});
if (this.text && this.text != '') {
const hashtags = parse(this.text).filter(x => x.type == 'hashtag').map(x => x.hashtag);
const history = JSON.parse(localStorage.getItem('hashtags') || '[]') as string[];
2018-09-11 21:02:14 +03:00
localStorage.setItem('hashtags', JSON.stringify(unique(hashtags.concat(history))));
}
2018-02-12 11:49:06 +02:00
},
2018-04-22 11:04:52 +03:00
2018-02-12 11:49:06 +02:00
saveDraft() {
2018-06-16 12:42:49 +03:00
if (this.instant) return;
2018-02-12 11:49:06 +02:00
const data = JSON.parse(localStorage.getItem('drafts') || '{}');
data[this.draftId] = {
2018-03-29 08:48:47 +03:00
updatedAt: new Date(),
2018-02-12 11:49:06 +02:00
data: {
text: this.text,
files: this.files,
poll: this.poll && this.$refs.poll ? (this.$refs.poll as any).get() : undefined
}
}
localStorage.setItem('drafts', JSON.stringify(data));
},
2018-04-22 11:04:52 +03:00
2018-02-12 11:49:06 +02:00
deleteDraft() {
const data = JSON.parse(localStorage.getItem('drafts') || '{}');
delete data[this.draftId];
localStorage.setItem('drafts', JSON.stringify(data));
},
2018-04-22 11:04:52 +03:00
2018-02-12 11:49:06 +02:00
kao() {
2018-08-17 22:13:25 +03:00
this.text += getFace();
2018-02-12 05:21:26 +02:00
}
}
});
</script>
2018-02-12 11:49:06 +02:00
<style lang="stylus" scoped>
2018-09-28 09:56:50 +03:00
.mk-post-form
2018-02-12 11:49:06 +02:00
display block
padding 16px
2018-09-27 08:32:48 +03:00
background var(--desktopPostFormBg)
2018-09-30 16:45:24 +03:00
overflow hidden
2018-02-12 11:49:06 +02:00
&:after
content ""
display block
clear both
> .content
2018-04-22 11:04:52 +03:00
> input
2018-11-12 17:12:55 +02:00
> .textarea > textarea
2018-02-12 11:49:06 +02:00
display block
width 100%
2018-04-22 11:04:52 +03:00
padding 12px
2018-02-12 11:49:06 +02:00
font-size 16px
2018-09-27 08:32:48 +03:00
color var(--desktopPostFormTextareaFg)
background var(--desktopPostFormTextareaBg)
2018-02-12 11:49:06 +02:00
outline none
2018-09-26 14:19:35 +03:00
border solid 1px var(--primaryAlpha01)
2018-02-12 11:49:06 +02:00
border-radius 4px
2018-04-22 11:04:52 +03:00
transition border-color .2s ease
2018-11-16 10:41:52 +02:00
padding-right 30px
2018-02-12 11:49:06 +02:00
&:hover
2018-09-26 14:19:35 +03:00
border-color var(--primaryAlpha02)
2018-02-12 11:49:06 +02:00
transition border-color .1s ease
2018-04-22 11:04:52 +03:00
&:focus
2018-09-26 14:19:35 +03:00
border-color var(--primaryAlpha05)
2018-04-22 11:04:52 +03:00
transition border-color 0s ease
&:disabled
opacity 0.5
&::-webkit-input-placeholder
2018-09-26 14:19:35 +03:00
color var(--primaryAlpha03)
2018-04-22 11:04:52 +03:00
> input
margin-bottom 8px
2018-11-12 17:12:55 +02:00
> .textarea
> .emoji
position absolute
top 0
right 0
padding 10px
font-size 18px
color var(--text)
opacity 0.5
2018-04-22 11:04:52 +03:00
2018-11-12 17:12:55 +02:00
&:hover
color var(--textHighlighted)
opacity 1
2018-02-12 11:49:06 +02:00
2018-11-12 17:12:55 +02:00
&:active
color var(--primary)
opacity 1
2018-02-12 11:49:06 +02:00
2018-11-12 17:12:55 +02:00
> textarea
margin 0
max-width 100%
min-width 100%
min-height 84px
&:hover
& + * + *
2018-11-12 17:21:49 +02:00
& + * + * + *
2018-11-12 17:12:55 +02:00
border-color var(--primaryAlpha02)
transition border-color .1s ease
&:focus
& + * + *
2018-11-12 17:21:49 +02:00
& + * + * + *
2018-11-12 17:12:55 +02:00
border-color var(--primaryAlpha05)
transition border-color 0s ease
& + .emoji
opacity 0.7
&.with
border-bottom solid 1px var(--primaryAlpha01) !important
border-radius 4px 4px 0 0
2018-02-12 11:49:06 +02:00
2018-11-12 17:21:49 +02:00
> .files
margin 0
padding 0
background var(--desktopPostFormTextareaBg)
border solid 1px var(--primaryAlpha01)
border-top none
border-radius 0 0 4px 4px
transition border-color .3s ease
&.with
border-bottom solid 1px var(--primaryAlpha01) !important
border-radius 0
> .remain
display block
position absolute
top 8px
right 8px
margin 0
padding 0
color var(--primaryAlpha04)
> div
padding 4px
&:after
content ""
display block
clear both
> div
float left
border solid 4px transparent
cursor move
&:hover > .remove
display block
> .img
width 64px
height 64px
background-size cover
background-position center center
> .remove
display none
position absolute
top -6px
right -6px
width 16px
height 16px
cursor pointer
> .mk-poll-editor
background var(--desktopPostFormTextareaBg)
border solid 1px var(--primaryAlpha01)
border-top none
border-radius 0 0 4px 4px
transition border-color .3s ease
2018-04-28 23:28:34 +03:00
> .visibleUsers
margin-bottom 8px
font-size 14px
> span
margin-right 16px
2018-09-27 11:42:51 +03:00
color var(--primary)
2018-04-28 23:28:34 +03:00
> .hashtags
2018-07-20 20:58:44 +03:00
margin 0 0 8px 0
overflow hidden
2018-07-20 19:21:27 +03:00
white-space nowrap
2018-07-20 20:58:44 +03:00
font-size 14px
> b
2018-09-27 11:42:51 +03:00
color var(--primary)
2018-07-20 20:58:44 +03:00
> *
2018-07-20 20:58:44 +03:00
margin-right 8px
2018-07-20 19:21:27 +03:00
white-space nowrap
> .local-only
margin 0 0 8px 0
color var(--primary)
2018-02-16 08:38:12 +02:00
> .mk-uploader
2018-02-12 11:49:06 +02:00
margin 8px 0 0 0
padding 8px
2018-09-26 14:19:35 +03:00
border solid 1px var(--primaryAlpha02)
2018-02-12 11:49:06 +02:00
border-radius 4px
2018-02-16 08:38:12 +02:00
input[type='file']
2018-02-12 11:49:06 +02:00
display none
2018-02-16 08:38:12 +02:00
.submit
2018-02-12 11:49:06 +02:00
display block
position absolute
bottom 16px
right 16px
cursor pointer
padding 0
margin 0
width 110px
height 40px
font-size 1em
2018-09-26 14:19:35 +03:00
color var(--primaryForeground)
2018-09-28 14:39:32 +03:00
background var(--primary)
2018-02-12 11:49:06 +02:00
outline none
2018-09-28 14:39:32 +03:00
border none
2018-02-12 11:49:06 +02:00
border-radius 4px
&:not(:disabled)
font-weight bold
&:hover:not(:disabled)
2018-09-28 14:39:32 +03:00
background var(--primaryLighten5)
2018-02-12 11:49:06 +02:00
&:active:not(:disabled)
2018-09-28 14:39:32 +03:00
background var(--primaryDarken5)
2018-02-12 11:49:06 +02:00
&:focus
&:after
content ""
pointer-events none
position absolute
top -5px
right -5px
bottom -5px
left -5px
2018-09-26 14:19:35 +03:00
border 2px solid var(--primaryAlpha03)
2018-02-12 11:49:06 +02:00
border-radius 8px
&:disabled
opacity 0.7
cursor default
&.wait
background linear-gradient(
45deg,
2018-09-26 14:19:35 +03:00
var(--primaryDarken10) 25%,
var(--primary) 25%,
var(--primary) 50%,
var(--primaryDarken10) 50%,
var(--primaryDarken10) 75%,
var(--primary) 75%,
var(--primary)
2018-02-12 11:49:06 +02:00
)
background-size 32px 32px
animation stripe-bg 1.5s linear infinite
opacity 0.7
cursor wait
@keyframes stripe-bg
from {background-position: 0 0;}
to {background-position: -64px 32px;}
2018-04-29 03:00:41 +03:00
> .text-count
pointer-events none
display block
position absolute
bottom 16px
right 138px
margin 0
line-height 40px
2018-09-26 14:19:35 +03:00
color var(--primaryAlpha05)
2018-04-29 03:00:41 +03:00
&.over
color #ec3828
2018-03-03 09:35:15 +02:00
> .upload
> .drive
> .kao
> .poll
2018-11-09 01:26:32 +02:00
> .cw
2018-03-05 01:44:37 +02:00
> .geo
2018-04-28 11:25:56 +03:00
> .visibility
2018-02-12 11:49:06 +02:00
display inline-block
cursor pointer
padding 0
margin 8px 4px 0 0
width 40px
height 40px
font-size 1em
2018-09-28 09:56:50 +03:00
color var(--desktopPostFormTransparentButtonFg)
2018-02-12 11:49:06 +02:00
background transparent
outline none
border solid 1px transparent
border-radius 4px
&:hover
background transparent
2018-09-28 09:56:50 +03:00
border-color var(--primaryAlpha03)
2018-02-12 11:49:06 +02:00
&:active
2018-09-26 14:19:35 +03:00
color var(--primaryAlpha06)
2018-09-28 09:56:50 +03:00
background linear-gradient(to bottom, var(--desktopPostFormTransparentButtonActiveGradientStart) 0%, var(--desktopPostFormTransparentButtonActiveGradientEnd) 100%)
2018-09-26 14:19:35 +03:00
border-color var(--primaryAlpha05)
2018-04-29 02:51:17 +03:00
box-shadow 0 2px 4px rgba(#000, 0.15) inset
2018-02-12 11:49:06 +02:00
&:focus
&:after
content ""
pointer-events none
position absolute
top -5px
right -5px
bottom -5px
left -5px
2018-09-26 14:19:35 +03:00
border 2px solid var(--primaryAlpha03)
2018-02-12 11:49:06 +02:00
border-radius 8px
> .dropzone
position absolute
left 0
top 0
width 100%
height 100%
2018-09-26 14:19:35 +03:00
border dashed 2px var(--primaryAlpha05)
2018-02-12 11:49:06 +02:00
pointer-events none
</style>