remove panel-footer in userpanel, simplify preview header, fix word-wrap in preview

This commit is contained in:
Shpuld Shpuldson 2020-06-28 16:40:39 +03:00
parent ed5b36f751
commit 61f34ff361
6 changed files with 51 additions and 51 deletions

View file

@ -235,13 +235,13 @@ const PostStatusForm = {
this.posting = false this.posting = false
}) })
}, },
previewStatus (newStatus) { previewStatus () {
if (this.emptyStatus) { if (this.emptyStatus) {
this.preview = { error: this.$t('status.preview_empty') } this.preview = { error: this.$t('status.preview_empty') }
this.previewLoading = false this.previewLoading = false
return return
} }
const newStatus = this.newStatus
this.previewLoading = true this.previewLoading = true
statusPoster.postStatus({ statusPoster.postStatus({
status: newStatus.status, status: newStatus.status,
@ -269,18 +269,23 @@ const PostStatusForm = {
this.previewLoading = false this.previewLoading = false
}) })
}, },
debouncePreviewStatus: debounce(function (newStatus) { debouncePreviewStatus: debounce(function () { this.previewStatus() }, 750),
this.previewStatus(newStatus)
}, 750),
autoPreview () { autoPreview () {
if (!this.preview) return if (!this.preview) return
this.previewLoading = true this.previewLoading = true
this.debouncePreviewStatus(this.newStatus) this.debouncePreviewStatus()
}, },
closePreview () { closePreview () {
this.preview = null this.preview = null
this.previewLoading = false this.previewLoading = false
}, },
togglePreview () {
if (this.showPreview) {
this.closePreview()
} else {
this.previewStatus()
}
},
addMediaFile (fileInfo) { addMediaFile (fileInfo) {
this.newStatus.files.push(fileInfo) this.newStatus.files.push(fileInfo)
}, },

View file

@ -16,30 +16,26 @@
@drop.stop="fileDrop" @drop.stop="fileDrop"
/> />
<div class="form-group"> <div class="form-group">
<div class="preview-heading faint">
<a <a
v-if="!showPreview" class="preview-toggle faint"
class="preview-start" @click.stop.prevent="togglePreview"
@click.stop.prevent="previewStatus(newStatus)"
> >
{{ $t('status.preview') }} {{ $t('status.preview') }}
</a>
<div
v-else
class="preview-container"
>
<span class="preview-heading">
<span class="preview-title">
{{ $t('status.status_preview') }}
</span>
<i <i
v-if="previewLoading" class="icon-down-open"
:style="{ transform: showPreview ? 'rotate(0deg)' : 'rotate(-90deg)' }"
/>
</a>
<i
v-show="previewLoading"
class="icon-spin3 animate-spin" class="icon-spin3 animate-spin"
/> />
<i </div>
class="preview-close icon-cancel" <div
@click.stop.prevent="closePreview" v-if="showPreview"
/> class="preview-container"
</span> >
<div <div
v-if="!preview" v-if="!preview"
class="preview-status" class="preview-status"
@ -369,30 +365,32 @@
max-width: 10em; max-width: 10em;
} }
.preview-start { .preview-heading {
display: flex;
width: 100%;
.icon-spin3 {
margin-left: auto; margin-left: auto;
}
}
.preview-toggle {
display: flex;
cursor: pointer; cursor: pointer;
&:hover {
text-decoration: underline;
}
}
.icon-down-open {
transition: transform 0.1s;
} }
.preview-container { .preview-container {
margin-bottom: 1em; margin-bottom: 1em;
} }
.preview-heading {
display: flex;
width: 100%;
color: $fallback--faint;
color: var(--faint, $fallback--faint);
}
.preview-title {
flex-grow: 1;
}
.preview-close {
padding-left: 0.5em;
}
.preview-error { .preview-error {
font-style: italic; font-style: italic;
color: $fallback--faint; color: $fallback--faint;

View file

@ -372,9 +372,6 @@ $status-margin: 0.75em;
} }
.status-el { .status-el {
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
border-left-width: 0px; border-left-width: 0px;
min-width: 0; min-width: 0;
border-color: $fallback--border; border-color: $fallback--border;

View file

@ -180,6 +180,9 @@ $status-margin: 0.75em;
font-family: var(--postFont, sans-serif); font-family: var(--postFont, sans-serif);
line-height: 1.4em; line-height: 1.4em;
white-space: pre-wrap; white-space: pre-wrap;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
blockquote { blockquote {
margin: 0.2em 0 0.2em 2em; margin: 0.2em 0 0.2em 2em;

View file

@ -10,10 +10,8 @@
:hide-bio="true" :hide-bio="true"
rounded="top" rounded="top"
/> />
<div class="panel-footer">
<PostStatusForm /> <PostStatusForm />
</div> </div>
</div>
<auth-form <auth-form
v-else v-else
key="user-panel" key="user-panel"

View file

@ -638,7 +638,6 @@
"thread_muted": "Thread muted", "thread_muted": "Thread muted",
"thread_muted_and_words": ", has words:", "thread_muted_and_words": ", has words:",
"preview": "Preview", "preview": "Preview",
"status_preview": "Status preview",
"preview_empty": "Empty" "preview_empty": "Empty"
}, },
"user_card": { "user_card": {