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

544 lines
13 KiB
Vue
Raw Normal View History

2018-02-14 06:26:08 +02:00
<template>
<div class="mk-post-form">
<div class="form">
<header>
<button class="cancel" @click="cancel"><fa icon="times"/></button>
<div>
2018-11-09 06:47:22 +02:00
<span class="text-count" :class="{ over: trimmedLength(text) > maxNoteTextLength }">{{ maxNoteTextLength - trimmedLength(text) }}</span>
<span class="geo" v-if="geo"><fa icon="map-marker-alt"/></span>
<button class="submit" :disabled="!canPost" @click="post">{{ submitText }}</button>
</div>
</header>
<div class="form">
2018-09-13 11:44:36 +03:00
<mk-note-preview class="preview" v-if="reply" :note="reply"/>
<mk-note-preview class="preview" v-if="renote" :note="renote"/>
<div v-if="visibility == 'specified'" class="visibleUsers">
<span v-for="u in visibleUsers">
2018-12-06 09:09:33 +02:00
<mk-user-name :user="u"/>
<a @click="removeVisibleUser(u)">[x]</a>
</span>
<a @click="addVisibleUser">+{{ $t('add-visible-user') }}</a>
</div>
<input v-show="useCw" ref="cw" v-model="cw" :placeholder="$t('annotations')" v-autocomplete="{ model: 'cw' }">
<textarea v-model="text" ref="text" :disabled="posting" :placeholder="placeholder" v-autocomplete="{ model: 'text' }"></textarea>
<div class="attaches" v-show="files.length != 0">
<x-draggable class="files" :list="files" :options="{ animation: 150 }">
<div class="file" v-for="file in files" :key="file.id">
2018-08-16 18:27:36 +03:00
<div class="img" :style="`background-image: url(${file.thumbnailUrl})`" @click="detachMedia(file)"></div>
</div>
</x-draggable>
</div>
2019-01-23 12:42:47 +02:00
<mk-poll-editor v-if="poll" ref="poll" @destroyed="poll = false" @updated="onPollUpdate()"/>
<mk-uploader ref="uploader" @uploaded="attachMedia" @change="onChangeUploadings"/>
<footer>
<button class="upload" @click="chooseFile"><fa icon="upload"/></button>
<button class="drive" @click="chooseFileFromDrive"><fa icon="cloud"/></button>
<button class="kao" @click="kao"><fa :icon="['far', 'smile']"/></button>
<button class="poll" @click="poll = true"><fa icon="chart-pie"/></button>
<button class="poll" @click="useCw = !useCw"><fa :icon="['far', 'eye-slash']"/></button>
<button class="geo" @click="geo ? removeGeo() : setGeo()"><fa icon="map-marker-alt"/></button>
<button class="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>
</button>
</footer>
2018-09-15 22:34:46 +03:00
<input ref="file" class="file" type="file" multiple="multiple" @change="onChangeFile"/>
2018-02-14 06:26:08 +02:00
</div>
</div>
2018-08-17 00:03:03 +03:00
<div class="hashtags" v-if="recentHashtags.length > 0 && $store.state.settings.suggestRecentHashtags">
2018-07-20 20:58:44 +03:00
<a v-for="tag in recentHashtags.slice(0, 5)" @click="addTag(tag)">#{{ tag }}</a>
2018-02-14 06:26:08 +02:00
</div>
2018-02-21 19:15:46 +02:00
</div>
2018-02-14 06:26:08 +02:00
</template>
<script lang="ts">
import Vue from 'vue';
import i18n from '../../../i18n';
import insertTextAtCursor from 'insert-text-at-cursor';
2018-02-22 00:06:47 +02:00
import * as XDraggable from 'vuedraggable';
2018-04-29 02:51:17 +03:00
import MkVisibilityChooser from '../../../common/views/components/visibility-chooser.vue';
2018-08-17 22:13:25 +03:00
import getFace from '../../../common/scripts/get-face';
2019-01-30 09:56:27 +02:00
import { parse } from '../../../../../mfm/parse';
2018-06-12 23:21:55 +03:00
import { host } from '../../../config';
2018-09-15 21:48:16 +03:00
import { erase, unique } from '../../../../../prelude/array';
import { length } from 'stringz';
import { toASCII } from 'punycode';
2018-12-19 04:16:29 +02:00
import extractMentions from '../../../../../misc/extract-mentions';
2018-02-14 06:26:08 +02:00
export default Vue.extend({
i18n: i18n('mobile/views/components/post-form.vue'),
2018-02-22 00:06:47 +02:00
components: {
2019-01-23 12:43:45 +02:00
XDraggable
2018-02-22 00:06:47 +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
},
2018-12-27 16:14:30 +02:00
mention: {
type: Object,
required: false
},
2018-06-16 12:42:49 +03:00
initialText: {
type: String,
required: false
},
instant: {
type: Boolean,
required: false,
default: false
}
},
2018-04-22 11:04:52 +03:00
2018-02-14 06:26:08 +02:00
data() {
return {
posting: false,
text: '',
uploadings: [],
files: [],
2018-03-05 01:44:37 +02:00
poll: false,
2018-12-07 11:33:09 +02:00
pollChoices: [],
Enhance poll (#4409) * Start working * WIP: Enhance poll * Fix bug * Use `name` in voting note refs: https://github.com/syuilo/misskey/issues/4407#issuecomment-469057296 * Fix style * Refactor Co-authored-by: MeiMei <30769358+mei23@users.noreply.github.com> * WIP: Update poll editor * Fix bug * Fix bug refs: https://github.com/syuilo/misskey/pull/4409#discussion_r * Fix typo * Better design * Beautify poll editor * Fix UI * Fix bug refs: https://github.com/syuilo/misskey/pull/4409#discussion_r262217524 * Add debug logging * Fix bug * Log deliver * fix vote * Update ap/show refs: https://github.com/syuilo/misskey/pull/4409#issuecomment-469652386 * Update poll view * Maybe done * Add tests * Fix path * Fix test * Fix test * Fix test * Fix expired check on AP * Update note.ts * Squashed commit of the following: commit d9a4beabf851893b8992a0f4568265eb9d4f0b8e Author: mei23 <m@m544.net> Date: Wed Mar 6 05:16:14 2019 +0900 tune commit 83ff421a6e978243f80ba9ec820189bc897e6e3b Author: mei23 <m@m544.net> Date: Wed Mar 6 05:01:14 2019 +0900 fallback commit 0b566af973b115ade9e75ea4b8094ee2b329dabc Author: mei23 <m@m544.net> Date: Wed Mar 6 04:40:12 2019 +0900 Note commit cc0296dd6127580ac584c40398db3f762a311f8b Author: mei23 <m@m544.net> Date: Wed Mar 6 04:33:58 2019 +0900 createで送る * Squashed commit of the following: commit ae696b1ed12568b27c27367ac5a77035c97c9a1f Author: mei23 <m@m544.net> Date: Wed Mar 6 06:11:17 2019 +0900 fix commit b735e354e7a9e64534c4f17d04ecbc65fb735c21 Author: mei23 <m@m544.net> Date: Wed Mar 6 06:08:33 2019 +0900 messge commit d9a4beabf851893b8992a0f4568265eb9d4f0b8e Author: mei23 <m@m544.net> Date: Wed Mar 6 05:16:14 2019 +0900 tune commit 83ff421a6e978243f80ba9ec820189bc897e6e3b Author: mei23 <m@m544.net> Date: Wed Mar 6 05:01:14 2019 +0900 fallback commit 0b566af973b115ade9e75ea4b8094ee2b329dabc Author: mei23 <m@m544.net> Date: Wed Mar 6 04:40:12 2019 +0900 Note commit cc0296dd6127580ac584c40398db3f762a311f8b Author: mei23 <m@m544.net> Date: Wed Mar 6 04:33:58 2019 +0900 createで送る * Fix typo * Update vote.ts * Update vote.ts * Update poll-editor.vue * Update tslint.json * Fix layout * Add note * Fix bug * Rename text key * 投票するときに投稿として扱わないように (#4425) * wip * 形式をMastodonと合わせた * Bye something * Use - instead of ~ * Redundancy * Yes! * Refactor * Use moment instead of Date * Fix indent * Refactor if (votes.length) は必要なさそう * Clean up * Bye Date * Clean * Fix timer is not displayed * Fix リモートから無期限pollにvoteできない * Fix vote actor
2019-03-06 15:55:47 +02:00
pollMultiple: false,
2018-04-22 11:04:52 +03:00
geo: null,
visibility: 'public',
2018-04-29 02:51:17 +03:00
visibleUsers: [],
localOnly: false,
2018-04-22 11:04:52 +03:00
useCw: false,
cw: null,
recentHashtags: JSON.parse(localStorage.getItem('hashtags') || '[]'),
maxNoteTextLength: 1000
2018-02-14 06:26:08 +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-05-28 19:44:15 +03:00
computed: {
draftId(): string {
return this.renote
2018-09-01 17:12:51 +03:00
? `renote:${this.renote.id}`
2018-05-28 19:44:15 +03:00
: this.reply
2018-09-01 17:12:51 +03:00
? `reply:${this.reply.id}`
2018-05-28 19:44:15 +03:00
: 'note';
},
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
return this.renote
? this.$t('quote-placeholder')
2018-05-28 19:44:15 +03:00
: this.reply
? this.$t('reply-placeholder')
2018-05-28 19:44:15 +03:00
: x;
},
submitText(): string {
return this.renote
? this.$t('renote')
2018-05-28 19:44:15 +03:00
: this.reply
? this.$t('reply')
: this.$t('submit');
2018-05-28 19:44:15 +03: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) &&
2018-12-07 11:33:09 +02:00
(this.text.trim().length <= this.maxNoteTextLength) &&
(!this.poll || this.pollChoices.length >= 2);
2018-05-28 19:44:15 +03:00
}
},
2018-02-14 06:26:08 +02: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-12-27 16:14:30 +02:00
if (this.mention) {
this.text = this.mention.host ? `@${this.mention.username}@${toASCII(this.mention.host)}` : `@${this.mention.username}`;
this.text += ' ';
}
2018-05-26 17:20:52 +03:00
if (this.reply && this.reply.text != null) {
const ast = parse(this.reply.text);
2018-12-19 04:16:29 +02:00
for (const x of extractMentions(ast)) {
const mention = x.host ? `@${x.username}@${toASCII(x.host)}` : `@${x.username}`;
2018-05-26 21:01:08 +03:00
// 自分は除外
2019-01-05 21:00:30 +02:00
if (this.$store.state.i.username == x.username && x.host == null) continue;
if (this.$store.state.i.username == x.username && x.host == host) continue;
2018-05-26 21:01:08 +03:00
// 重複は除外
2019-01-05 21:00:30 +02:00
if (this.text.indexOf(`${mention} `) != -1) continue;
2018-05-26 21:01:08 +03:00
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);
// 公開以外へのリプライ時は元の公開範囲を引き継ぐ
2018-12-28 19:55:46 +02:00
if (this.reply && ['home', 'followers', 'specified'].includes(this.reply.visibility)) {
this.visibility = this.reply.visibility;
}
2018-12-22 20:41:28 +02:00
if (this.reply) {
this.$root.api('users/show', { userId: this.reply.userId }).then(user => {
this.visibleUsers.push(user);
});
}
// keep cw when reply
if (this.$store.state.settings.keepCw && this.reply && this.reply.cw) {
this.useCw = true;
this.cw = this.reply.cw;
}
2018-09-01 10:23:23 +03:00
this.focus();
2018-02-22 00:06:47 +02:00
this.$nextTick(() => {
2018-02-22 22:43:19 +02:00
this.focus();
2018-02-14 06:26:08 +02:00
});
},
2018-04-22 11:04:52 +03:00
2018-02-14 06:26:08 +02:00
methods: {
trimmedLength(text: string) {
return length(text.trim());
},
addTag(tag: string) {
insertTextAtCursor(this.$refs.text, ` #${tag} `);
},
2018-02-22 22:43:19 +02:00
focus() {
(this.$refs.text as any).focus();
},
2018-04-22 11:04:52 +03:00
2018-12-02 13:24:38 +02:00
addVisibleUser() {
this.$root.dialog({
title: this.$t('enter-username'),
user: true
}).then(({ canceled, result: user }) => {
if (canceled) return;
this.visibleUsers.push(user);
});
},
2018-02-22 00:06:47 +02:00
chooseFile() {
(this.$refs.file as any).click();
},
2018-04-22 11:04:52 +03:00
2018-02-22 00:06:47 +02:00
chooseFileFromDrive() {
this.$chooseDriveFile({
2018-02-22 00:06:47 +02:00
multiple: true
}).then(files => {
for (const x of files) this.attachMedia(x);
2018-02-22 00:06:47 +02:00
});
},
2018-04-22 11:04:52 +03:00
2018-02-14 06:26:08 +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-14 06:26:08 +02:00
},
2018-04-22 11:04:52 +03:00
2018-02-22 00:06:47 +02:00
detachMedia(file) {
this.files = this.files.filter(x => x.id != file.id);
2018-09-05 13:32:46 +03:00
this.$emit('change-attached-files', this.files);
2018-02-14 06:26:08 +02:00
},
2018-04-22 11:04:52 +03:00
2018-02-14 06:26:08 +02:00
onChangeFile() {
for (const x of Array.from((this.$refs.file as any).files)) this.upload(x);
2018-02-14 06:26:08 +02:00
},
2018-04-22 11:04:52 +03:00
2018-12-07 11:33:09 +02:00
onPollUpdate() {
Enhance poll (#4409) * Start working * WIP: Enhance poll * Fix bug * Use `name` in voting note refs: https://github.com/syuilo/misskey/issues/4407#issuecomment-469057296 * Fix style * Refactor Co-authored-by: MeiMei <30769358+mei23@users.noreply.github.com> * WIP: Update poll editor * Fix bug * Fix bug refs: https://github.com/syuilo/misskey/pull/4409#discussion_r * Fix typo * Better design * Beautify poll editor * Fix UI * Fix bug refs: https://github.com/syuilo/misskey/pull/4409#discussion_r262217524 * Add debug logging * Fix bug * Log deliver * fix vote * Update ap/show refs: https://github.com/syuilo/misskey/pull/4409#issuecomment-469652386 * Update poll view * Maybe done * Add tests * Fix path * Fix test * Fix test * Fix test * Fix expired check on AP * Update note.ts * Squashed commit of the following: commit d9a4beabf851893b8992a0f4568265eb9d4f0b8e Author: mei23 <m@m544.net> Date: Wed Mar 6 05:16:14 2019 +0900 tune commit 83ff421a6e978243f80ba9ec820189bc897e6e3b Author: mei23 <m@m544.net> Date: Wed Mar 6 05:01:14 2019 +0900 fallback commit 0b566af973b115ade9e75ea4b8094ee2b329dabc Author: mei23 <m@m544.net> Date: Wed Mar 6 04:40:12 2019 +0900 Note commit cc0296dd6127580ac584c40398db3f762a311f8b Author: mei23 <m@m544.net> Date: Wed Mar 6 04:33:58 2019 +0900 createで送る * Squashed commit of the following: commit ae696b1ed12568b27c27367ac5a77035c97c9a1f Author: mei23 <m@m544.net> Date: Wed Mar 6 06:11:17 2019 +0900 fix commit b735e354e7a9e64534c4f17d04ecbc65fb735c21 Author: mei23 <m@m544.net> Date: Wed Mar 6 06:08:33 2019 +0900 messge commit d9a4beabf851893b8992a0f4568265eb9d4f0b8e Author: mei23 <m@m544.net> Date: Wed Mar 6 05:16:14 2019 +0900 tune commit 83ff421a6e978243f80ba9ec820189bc897e6e3b Author: mei23 <m@m544.net> Date: Wed Mar 6 05:01:14 2019 +0900 fallback commit 0b566af973b115ade9e75ea4b8094ee2b329dabc Author: mei23 <m@m544.net> Date: Wed Mar 6 04:40:12 2019 +0900 Note commit cc0296dd6127580ac584c40398db3f762a311f8b Author: mei23 <m@m544.net> Date: Wed Mar 6 04:33:58 2019 +0900 createで送る * Fix typo * Update vote.ts * Update vote.ts * Update poll-editor.vue * Update tslint.json * Fix layout * Add note * Fix bug * Rename text key * 投票するときに投稿として扱わないように (#4425) * wip * 形式をMastodonと合わせた * Bye something * Use - instead of ~ * Redundancy * Yes! * Refactor * Use moment instead of Date * Fix indent * Refactor if (votes.length) は必要なさそう * Clean up * Bye Date * Clean * Fix timer is not displayed * Fix リモートから無期限pollにvoteできない * Fix vote actor
2019-03-06 15:55:47 +02:00
const got = this.$refs.poll.get();
this.pollChoices = got.choices;
this.pollMultiple = got.multiple;
2018-12-07 11:33:09 +02:00
},
2018-02-14 06:26:08 +02:00
upload(file) {
(this.$refs.uploader as any).upload(file);
},
2018-04-22 11:04:52 +03:00
2018-02-14 06:26:08 +02:00
onChangeUploadings(uploads) {
this.$emit('change-uploadings', uploads);
},
2018-04-22 11:04:52 +03:00
2018-03-05 01:44:37 +02:00
setGeo() {
if (navigator.geolocation == null) {
alert(this.$t('location-alert'));
2018-03-05 01:44:37 +02:00
return;
}
navigator.geolocation.getCurrentPosition(pos => {
this.geo = pos.coords;
}, 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;
},
2018-04-22 11:04:52 +03:00
2018-04-29 02:51:17 +03:00
setVisibility() {
2018-11-09 01:13:34 +02:00
const w = this.$root.new(MkVisibilityChooser, {
2018-12-30 07:43:03 +02:00
source: this.$refs.visibilityButton,
currentVisibility: this.visibility
2018-04-29 02:51:17 +03:00
});
w.$once('chosen', v => {
this.applyVisibility(v);
2018-04-29 02:51:17 +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-29 02:51:17 +03:00
},
removeVisibleUser(user) {
2018-09-06 18:02:55 +03:00
this.visibleUsers = erase(user, this.visibleUsers);
2018-04-29 02:51:17 +03:00
},
2018-02-14 06:26:08 +02:00
clear() {
this.text = '';
this.files = [];
this.poll = false;
2018-09-05 13:32:46 +03:00
this.$emit('change-attached-files');
2018-02-14 06:26:08 +02:00
},
2018-04-22 11:04:52 +03:00
2018-02-22 00:06:47 +02:00
post() {
this.posting = true;
2018-05-27 07:49:09 +03:00
const viaMobile = this.$store.state.settings.disableViaMobile !== true;
2018-11-09 01:13:34 +02:00
this.$root.api('notes/create', {
2018-02-22 00:06:47 +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-05-18 00:27:27 +03:00
renoteId: this.renote ? this.renote.id : undefined,
2018-03-04 02:39:25 +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-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-04-29 02:51:17 +03:00
visibility: this.visibility,
visibleUserIds: this.visibility == 'specified' ? this.visibleUsers.map(u => u.id) : undefined,
localOnly: this.localOnly,
2018-03-29 08:48:47 +03:00
viaMobile: viaMobile
2018-02-22 00:06:47 +02:00
}).then(data => {
2018-06-16 12:42:49 +03:00
this.$emit('posted');
2018-02-22 00:06:47 +02:00
}).catch(err => {
this.posting = false;
});
if (this.text && this.text != '') {
2019-03-16 11:00:23 +02:00
const hashtags = parse(this.text).filter(x => x.node.type === 'hashtag').map(x => x.node.props.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-22 00:06:47 +02:00
},
2018-04-22 11:04:52 +03:00
2018-02-14 06:26:08 +02:00
cancel() {
this.$emit('cancel');
2018-02-21 19:37:04 +02:00
},
2018-04-22 11:04:52 +03:00
2018-02-21 19:37:04 +02:00
kao() {
2018-08-17 22:13:25 +03:00
this.text += getFace();
2018-02-14 06:26:08 +02:00
}
}
});
</script>
<style lang="stylus" scoped>
2018-09-28 06:07:28 +03:00
.mk-post-form
2018-02-14 06:26:08 +02:00
max-width 500px
width calc(100% - 16px)
margin 8px auto
@media (min-width 500px)
margin 16px auto
width calc(100% - 32px)
> .form
box-shadow 0 8px 32px rgba(#000, 0.1)
2018-04-27 15:33:18 +03:00
@media (min-width 600px)
margin 32px auto
2018-02-14 06:26:08 +02:00
> .form
2018-09-26 14:28:13 +03:00
background var(--face)
border-radius 8px
box-shadow 0 0 2px rgba(#000, 0.1)
> header
z-index 1000
height 50px
2018-09-28 06:07:28 +03:00
box-shadow 0 1px 0 0 var(--mobilePostFormDivider)
2018-04-29 02:51:17 +03:00
> .cancel
padding 0
width 50px
line-height 50px
font-size 24px
2018-09-28 06:07:28 +03:00
color var(--text)
> div
position absolute
top 0
right 0
2018-09-28 06:07:28 +03:00
color var(--text)
2018-04-29 02:51:17 +03:00
> .text-count
line-height 50px
2018-04-29 02:51:17 +03:00
> .geo
margin 0 8px
line-height 50px
2018-02-14 06:26:08 +02:00
> .submit
margin 8px
padding 0 16px
line-height 34px
vertical-align bottom
2018-09-26 14:19:35 +03:00
color var(--primaryForeground)
background var(--primary)
border-radius 4px
2018-02-14 06:26:08 +02:00
&:disabled
opacity 0.7
2018-02-14 06:26:08 +02:00
> .form
max-width 500px
margin 0 auto
2018-02-14 06:26:08 +02:00
2018-09-13 11:44:36 +03:00
> .preview
padding 16px
2018-02-14 06:26:08 +02:00
> .visibleUsers
2018-07-28 07:08:41 +03:00
margin 5px
font-size 14px
2018-02-14 06:26:08 +02:00
> span
margin-right 16px
2018-09-28 06:07:28 +03:00
color var(--text)
2018-02-14 06:26:08 +02:00
> input
z-index 1
2018-05-07 10:39:00 +03:00
> input
> textarea
display block
padding 12px
2018-05-07 10:39:00 +03:00
margin 0
width 100%
font-size 16px
2018-09-28 06:07:28 +03:00
color var(--inputText)
background var(--mobilePostFormTextareaBg)
2018-05-07 10:39:00 +03:00
border none
border-radius 0
2018-09-28 06:07:28 +03:00
box-shadow 0 1px 0 0 var(--mobilePostFormDivider)
&:disabled
opacity 0.5
> textarea
max-width 100%
min-width 100%
min-height 80px
> .attaches
> .files
display block
margin 0
padding 4px
list-style none
&:after
content ""
display block
clear both
> .file
display block
float left
margin 0
padding 0
border solid 4px transparent
> .img
width 64px
height 64px
background-size cover
background-position center center
> .mk-uploader
margin 8px 0 0 0
padding 8px
> .file
display none
> footer
white-space nowrap
overflow auto
-webkit-overflow-scrolling touch
overflow-scrolling touch
> *
display inline-block
padding 0
margin 0
width 48px
height 48px
font-size 20px
2018-10-07 13:30:24 +03:00
color var(--mobilePostFormButton)
background transparent
outline none
border none
border-radius 0
box-shadow none
> .hashtags
2018-07-20 20:58:44 +03:00
margin 8px
> *
2018-07-20 20:58:44 +03:00
margin-right 8px
2018-02-14 06:26:08 +02:00
2018-04-29 02:51:17 +03:00
</style>