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

View file

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

View file

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

View file

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

View file

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

View file

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