|
|
@ -12,10 +12,11 @@
|
|
|
|
v-show="showDropIcon !== 'hide'"
|
|
|
|
v-show="showDropIcon !== 'hide'"
|
|
|
|
:style="{ animation: showDropIcon === 'show' ? 'fade-in 0.25s' : 'fade-out 0.5s' }"
|
|
|
|
:style="{ animation: showDropIcon === 'show' ? 'fade-in 0.25s' : 'fade-out 0.5s' }"
|
|
|
|
class="drop-indicator"
|
|
|
|
class="drop-indicator"
|
|
|
|
:class="[uploadFileLimitReached ? 'icon-block' : 'icon-upload']"
|
|
|
|
|
|
|
|
@dragleave="fileDragStop"
|
|
|
|
@dragleave="fileDragStop"
|
|
|
|
@drop.stop="fileDrop"
|
|
|
|
@drop.stop="fileDrop"
|
|
|
|
/>
|
|
|
|
>
|
|
|
|
|
|
|
|
<FAIcon :icon="uploadFileLimitReached ? 'ban' : 'upload'" />
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
|
|
<div class="form-group">
|
|
|
|
<i18n
|
|
|
|
<i18n
|
|
|
|
v-if="!$store.state.users.currentUser.locked && newStatus.visibility == 'private' && !disableLockWarning"
|
|
|
|
v-if="!$store.state.users.currentUser.locked && newStatus.visibility == 'private' && !disableLockWarning"
|
|
|
@ -36,10 +37,10 @@
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<span>{{ $t('post_status.scope_notice.public') }}</span>
|
|
|
|
<span>{{ $t('post_status.scope_notice.public') }}</span>
|
|
|
|
<a
|
|
|
|
<a
|
|
|
|
class="button-icon dismiss"
|
|
|
|
class="fa-scale-110 fa-old-padding dismiss"
|
|
|
|
@click.prevent="dismissScopeNotice()"
|
|
|
|
@click.prevent="dismissScopeNotice()"
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<i class="icon-cancel" />
|
|
|
|
<FAIcon icon="times" />
|
|
|
|
</a>
|
|
|
|
</a>
|
|
|
|
</p>
|
|
|
|
</p>
|
|
|
|
<p
|
|
|
|
<p
|
|
|
@ -48,10 +49,10 @@
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<span>{{ $t('post_status.scope_notice.unlisted') }}</span>
|
|
|
|
<span>{{ $t('post_status.scope_notice.unlisted') }}</span>
|
|
|
|
<a
|
|
|
|
<a
|
|
|
|
class="button-icon dismiss"
|
|
|
|
class="fa-scale-110 fa-old-padding dismiss"
|
|
|
|
@click.prevent="dismissScopeNotice()"
|
|
|
|
@click.prevent="dismissScopeNotice()"
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<i class="icon-cancel" />
|
|
|
|
<FAIcon icon="times" />
|
|
|
|
</a>
|
|
|
|
</a>
|
|
|
|
</p>
|
|
|
|
</p>
|
|
|
|
<p
|
|
|
|
<p
|
|
|
@ -60,10 +61,10 @@
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<span>{{ $t('post_status.scope_notice.private') }}</span>
|
|
|
|
<span>{{ $t('post_status.scope_notice.private') }}</span>
|
|
|
|
<a
|
|
|
|
<a
|
|
|
|
class="button-icon dismiss"
|
|
|
|
class="fa-scale-110 fa-old-padding dismiss"
|
|
|
|
@click.prevent="dismissScopeNotice()"
|
|
|
|
@click.prevent="dismissScopeNotice()"
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<i class="icon-cancel" />
|
|
|
|
<FAIcon icon="times" />
|
|
|
|
</a>
|
|
|
|
</a>
|
|
|
|
</p>
|
|
|
|
</p>
|
|
|
|
<p
|
|
|
|
<p
|
|
|
@ -82,11 +83,12 @@
|
|
|
|
@click.stop.prevent="togglePreview"
|
|
|
|
@click.stop.prevent="togglePreview"
|
|
|
|
>
|
|
|
|
>
|
|
|
|
{{ $t('post_status.preview') }}
|
|
|
|
{{ $t('post_status.preview') }}
|
|
|
|
<i :class="showPreview ? 'icon-left-open' : 'icon-right-open'" />
|
|
|
|
<FAIcon :icon="showPreview ? 'chevron-left' : 'chevron-right'" />
|
|
|
|
</a>
|
|
|
|
</a>
|
|
|
|
<i
|
|
|
|
<FAIcon
|
|
|
|
v-show="previewLoading"
|
|
|
|
v-show="previewLoading"
|
|
|
|
class="icon-spin3 animate-spin"
|
|
|
|
spin
|
|
|
|
|
|
|
|
icon="circle-notch"
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
<div
|
|
|
@ -199,7 +201,10 @@
|
|
|
|
{{ $t(`post_status.content_type["${postFormat}"]`) }}
|
|
|
|
{{ $t(`post_status.content_type["${postFormat}"]`) }}
|
|
|
|
</option>
|
|
|
|
</option>
|
|
|
|
</select>
|
|
|
|
</select>
|
|
|
|
<i class="icon-down-open" />
|
|
|
|
<FAIcon
|
|
|
|
|
|
|
|
class="select-down-icon"
|
|
|
|
|
|
|
|
icon="chevron-down"
|
|
|
|
|
|
|
|
/>
|
|
|
|
</label>
|
|
|
|
</label>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
<div
|
|
|
@ -236,22 +241,22 @@
|
|
|
|
<div
|
|
|
|
<div
|
|
|
|
class="emoji-icon"
|
|
|
|
class="emoji-icon"
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<i
|
|
|
|
<div
|
|
|
|
:title="$t('emoji.add_emoji')"
|
|
|
|
:title="$t('emoji.add_emoji')"
|
|
|
|
class="icon-smile btn btn-default"
|
|
|
|
class="btn btn-default"
|
|
|
|
@click="showEmojiPicker"
|
|
|
|
@click="showEmojiPicker"
|
|
|
|
/>
|
|
|
|
>
|
|
|
|
|
|
|
|
<FAIcon icon="smile-beam" />
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
<div
|
|
|
|
v-if="pollsAvailable"
|
|
|
|
v-if="pollsAvailable"
|
|
|
|
class="poll-icon"
|
|
|
|
class="poll-icon"
|
|
|
|
:class="{ selected: pollFormVisible }"
|
|
|
|
:class="{ selected: pollFormVisible }"
|
|
|
|
>
|
|
|
|
|
|
|
|
<i
|
|
|
|
|
|
|
|
:title="$t('polls.add_poll')"
|
|
|
|
:title="$t('polls.add_poll')"
|
|
|
|
class="icon-chart-bar btn btn-default"
|
|
|
|
|
|
|
|
@click="togglePollForm"
|
|
|
|
@click="togglePollForm"
|
|
|
|
/>
|
|
|
|
>
|
|
|
|
|
|
|
|
<FAIcon icon="poll-h" />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<button
|
|
|
|
<button
|
|
|
@ -284,8 +289,9 @@
|
|
|
|
class="alert error"
|
|
|
|
class="alert error"
|
|
|
|
>
|
|
|
|
>
|
|
|
|
Error: {{ error }}
|
|
|
|
Error: {{ error }}
|
|
|
|
<i
|
|
|
|
<FAIcon
|
|
|
|
class="button-icon icon-cancel"
|
|
|
|
class="fa-scale-110 fa-old-padding"
|
|
|
|
|
|
|
|
icon="times"
|
|
|
|
@click="clearError"
|
|
|
|
@click="clearError"
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
@ -295,8 +301,9 @@
|
|
|
|
:key="file.url"
|
|
|
|
:key="file.url"
|
|
|
|
class="media-upload-wrapper"
|
|
|
|
class="media-upload-wrapper"
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<i
|
|
|
|
<FAIcon
|
|
|
|
class="fa button-icon icon-cancel"
|
|
|
|
class="fa-scale-110 fa-old-padding"
|
|
|
|
|
|
|
|
icon="times"
|
|
|
|
@click="removeMediaFile(file)"
|
|
|
|
@click="removeMediaFile(file)"
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
<attachment
|
|
|
|
<attachment
|
|
|
@ -379,21 +386,16 @@
|
|
|
|
padding-left: 0.5em;
|
|
|
|
padding-left: 0.5em;
|
|
|
|
display: flex;
|
|
|
|
display: flex;
|
|
|
|
width: 100%;
|
|
|
|
width: 100%;
|
|
|
|
|
|
|
|
|
|
|
|
.icon-spin3 {
|
|
|
|
|
|
|
|
margin-left: auto;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.preview-toggle {
|
|
|
|
.preview-toggle {
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
cursor: pointer;
|
|
|
|
user-select: none;
|
|
|
|
user-select: none;
|
|
|
|
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
&:hover {
|
|
|
|
text-decoration: underline;
|
|
|
|
text-decoration: underline;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
i {
|
|
|
|
svg, i {
|
|
|
|
margin-left: 0.2em;
|
|
|
|
margin-left: 0.2em;
|
|
|
|
font-size: 0.8em;
|
|
|
|
font-size: 0.8em;
|
|
|
|
transform: rotate(90deg);
|
|
|
|
transform: rotate(90deg);
|
|
|
@ -435,18 +437,20 @@
|
|
|
|
|
|
|
|
|
|
|
|
.media-upload-icon, .poll-icon, .emoji-icon {
|
|
|
|
.media-upload-icon, .poll-icon, .emoji-icon {
|
|
|
|
font-size: 26px;
|
|
|
|
font-size: 26px;
|
|
|
|
|
|
|
|
line-height: 1.1;
|
|
|
|
flex: 1;
|
|
|
|
flex: 1;
|
|
|
|
|
|
|
|
padding: 0 0.1em;
|
|
|
|
|
|
|
|
|
|
|
|
&.selected, &:hover {
|
|
|
|
&.selected, &:hover {
|
|
|
|
// needs to be specific to override icon default color
|
|
|
|
// needs to be specific to override icon default color
|
|
|
|
i, label {
|
|
|
|
svg, i, label {
|
|
|
|
color: $fallback--lightText;
|
|
|
|
color: $fallback--lightText;
|
|
|
|
color: var(--lightText, $fallback--lightText);
|
|
|
|
color: var(--lightText, $fallback--lightText);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&.disabled {
|
|
|
|
&.disabled {
|
|
|
|
i {
|
|
|
|
svg, i {
|
|
|
|
cursor: not-allowed;
|
|
|
|
cursor: not-allowed;
|
|
|
|
color: $fallback--icon;
|
|
|
|
color: $fallback--icon;
|
|
|
|
color: var(--btnDisabledText, $fallback--icon);
|
|
|
|
color: var(--btnDisabledText, $fallback--icon);
|
|
|
@ -475,7 +479,7 @@
|
|
|
|
text-align: right;
|
|
|
|
text-align: right;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.icon-chart-bar {
|
|
|
|
.poll-icon {
|
|
|
|
cursor: pointer;
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
@ -488,19 +492,6 @@
|
|
|
|
margin-bottom: .5em;
|
|
|
|
margin-bottom: .5em;
|
|
|
|
width: 18em;
|
|
|
|
width: 18em;
|
|
|
|
|
|
|
|
|
|
|
|
.icon-cancel {
|
|
|
|
|
|
|
|
display: inline-block;
|
|
|
|
|
|
|
|
position: static;
|
|
|
|
|
|
|
|
margin: 0;
|
|
|
|
|
|
|
|
padding-bottom: 0;
|
|
|
|
|
|
|
|
margin-left: $fallback--attachmentRadius;
|
|
|
|
|
|
|
|
margin-left: var(--attachmentRadius, $fallback--attachmentRadius);
|
|
|
|
|
|
|
|
background-color: $fallback--fg;
|
|
|
|
|
|
|
|
background-color: var(--btn, $fallback--fg);
|
|
|
|
|
|
|
|
border-bottom-left-radius: 0;
|
|
|
|
|
|
|
|
border-bottom-right-radius: 0;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
img, video {
|
|
|
|
img, video {
|
|
|
|
object-fit: contain;
|
|
|
|
object-fit: contain;
|
|
|
|
max-height: 10em;
|
|
|
|
max-height: 10em;
|
|
|
@ -523,7 +514,7 @@
|
|
|
|
flex-direction: column;
|
|
|
|
flex-direction: column;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.media-upload-wrapper .attachments {
|
|
|
|
.attachments .media-upload-wrapper {
|
|
|
|
padding: 0 0.5em;
|
|
|
|
padding: 0 0.5em;
|
|
|
|
|
|
|
|
|
|
|
|
.attachment {
|
|
|
|
.attachment {
|
|
|
@ -532,14 +523,18 @@
|
|
|
|
position: relative;
|
|
|
|
position: relative;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
i {
|
|
|
|
.fa-scale-110 fa-old-padding {
|
|
|
|
position: absolute;
|
|
|
|
position: absolute;
|
|
|
|
margin: 10px;
|
|
|
|
margin: 10px;
|
|
|
|
padding: 5px;
|
|
|
|
margin: .75em;
|
|
|
|
|
|
|
|
padding: .5em;
|
|
|
|
background: rgba(230,230,230,0.6);
|
|
|
|
background: rgba(230,230,230,0.6);
|
|
|
|
|
|
|
|
z-index: 2;
|
|
|
|
|
|
|
|
color: black;
|
|
|
|
border-radius: $fallback--attachmentRadius;
|
|
|
|
border-radius: $fallback--attachmentRadius;
|
|
|
|
border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
|
|
|
|
border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
|
|
|
|
font-weight: bold;
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
@ -613,11 +608,6 @@
|
|
|
|
cursor: not-allowed;
|
|
|
|
cursor: not-allowed;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.icon-cancel {
|
|
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
|
|
z-index: 4;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@keyframes fade-in {
|
|
|
|
@keyframes fade-in {
|
|
|
|
from { opacity: 0; }
|
|
|
|
from { opacity: 0; }
|
|
|
|
to { opacity: 0.6; }
|
|
|
|
to { opacity: 0.6; }
|
|
|
|