diff --git a/changelog.d/unify-show-hide-buttons.add b/changelog.d/unify-show-hide-buttons.add new file mode 100644 index 000000000..663bc38a5 --- /dev/null +++ b/changelog.d/unify-show-hide-buttons.add @@ -0,0 +1 @@ +Unify show/hide content buttons diff --git a/src/components/status_body/status_body.js b/src/components/status_body/status_body.js index b8f6f9a0b..aa334499e 100644 --- a/src/components/status_body/status_body.js +++ b/src/components/status_body/status_body.js @@ -72,6 +72,23 @@ const StatusContent = { hideTallStatus () { return this.mightHideBecauseTall && !this.showingTall }, + shouldShowToggle () { + return this.mightHideBecauseSubject || this.mightHideBecauseTall + }, + toggleButtonClasses () { + return { + 'cw-status-hider': !this.showingMore && this.mightHideBecauseSubject, + 'tall-status-hider': !this.showingMore && this.mightHideBecauseTall, + 'status-unhider': this.showingMore, + } + }, + toggleText () { + if (this.showingMore) { + return this.mightHideBecauseSubject ? this.$t('status.hide_content') : this.$t('general.show_less') + } else { + return this.mightHideBecauseSubject ? this.$t('status.show_content') : this.$t('general.show_more') + } + }, showingMore () { return (this.mightHideBecauseTall && this.showingTall) || (this.mightHideBecauseSubject && this.expandingSubject) }, diff --git a/src/components/status_body/status_body.scss b/src/components/status_body/status_body.scss index 07fc8ef45..e05ae649a 100644 --- a/src/components/status_body/status_body.scss +++ b/src/components/status_body/status_body.scss @@ -62,7 +62,6 @@ &.-tall-status { position: relative; height: 16em; - overflow: hidden; z-index: 1; .media-body { @@ -82,6 +81,10 @@ mask-composite: exclude; } } + + &.-expanded { + overflow: visible; + } } & .tall-status-hider, @@ -95,6 +98,13 @@ text-align: center; } + .status-unhider { + margin-top: auto; + position: sticky; + bottom: 0; + padding-bottom: 1em; + } + .tall-status-hider { position: absolute; height: 5em; @@ -118,6 +128,10 @@ } } + .toggle-button { + padding: 0.5em; + } + &.-compact { align-items: start; flex-direction: row; diff --git a/src/components/status_body/status_body.vue b/src/components/status_body/status_body.vue index 16894021b..0fc024b04 100644 --- a/src/components/status_body/status_body.vue +++ b/src/components/status_body/status_body.vue @@ -31,17 +31,9 @@