From 61f34ff361a24a287ac0bf0c79fd2f77b4f2b708 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Sun, 28 Jun 2020 16:40:39 +0300
Subject: [PATCH] remove panel-footer in userpanel, simplify preview header,
fix word-wrap in preview
---
.../post_status_form/post_status_form.js | 17 +++--
.../post_status_form/post_status_form.vue | 74 +++++++++----------
src/components/status/status.vue | 3 -
.../status_content/status_content.vue | 3 +
src/components/user_panel/user_panel.vue | 4 +-
src/i18n/en.json | 1 -
6 files changed, 51 insertions(+), 51 deletions(-)
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index bb5dbf97..732691e7 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -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)
},
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 8201911e..0cebd36e 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -16,30 +16,26 @@
@drop.stop="fileDrop"
/>
<div class="form-group">
- <a
- v-if="!showPreview"
- class="preview-start"
- @click.stop.prevent="previewStatus(newStatus)"
- >
- {{ $t('status.preview') }}
- </a>
+ <div class="preview-heading faint">
+ <a
+ class="preview-toggle faint"
+ @click.stop.prevent="togglePreview"
+ >
+ {{ $t('status.preview') }}
+ <i
+ class="icon-down-open"
+ :style="{ transform: showPreview ? 'rotate(0deg)' : 'rotate(-90deg)' }"
+ />
+ </a>
+ <i
+ v-show="previewLoading"
+ class="icon-spin3 animate-spin"
+ />
+ </div>
<div
- v-else
+ v-if="showPreview"
class="preview-container"
>
- <span class="preview-heading">
- <span class="preview-title">
- {{ $t('status.status_preview') }}
- </span>
- <i
- v-if="previewLoading"
- class="icon-spin3 animate-spin"
- />
- <i
- class="preview-close icon-cancel"
- @click.stop.prevent="closePreview"
- />
- </span>
<div
v-if="!preview"
class="preview-status"
@@ -369,30 +365,32 @@
max-width: 10em;
}
- .preview-start {
- margin-left: auto;
+ .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;
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 7ec29b28..1c36d883 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -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;
diff --git a/src/components/status_content/status_content.vue b/src/components/status_content/status_content.vue
index efc2485e..373802af 100644
--- a/src/components/status_content/status_content.vue
+++ b/src/components/status_content/status_content.vue
@@ -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;
diff --git a/src/components/user_panel/user_panel.vue b/src/components/user_panel/user_panel.vue
index 1db4f648..5685916a 100644
--- a/src/components/user_panel/user_panel.vue
+++ b/src/components/user_panel/user_panel.vue
@@ -10,9 +10,7 @@
:hide-bio="true"
rounded="top"
/>
- <div class="panel-footer">
- <PostStatusForm />
- </div>
+ <PostStatusForm />
</div>
<auth-form
v-else
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 44afb59c..21df3e73 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -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": {