From 07b7721043c7bd9a5357b7e090cb30eae7f52fe0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Raimund=20Schl=C3=BC=C3=9Fler?= Date: Fri, 14 Aug 2020 23:44:37 +0200 Subject: [PATCH] Allow to toggle editable title by click MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Raimund Schlüßler --- src/components/AppSidebar/AppSidebar.vue | 165 ++++++++++++++--------- 1 file changed, 103 insertions(+), 62 deletions(-) diff --git a/src/components/AppSidebar/AppSidebar.vue b/src/components/AppSidebar/AppSidebar.vue index c223e61d2e..678c1a7258 100644 --- a/src/components/AppSidebar/AppSidebar.vue +++ b/src/components/AppSidebar/AppSidebar.vue @@ -123,7 +123,14 @@ -
+
-

- - -

- {{ subtitle }} -

+
+

+ + +

+ {{ subtitle }} +

+

@@ -177,6 +191,7 @@ import Focus from '../../directives/Focus' import Linkify from '../../directives/Linkify' import l10n from '../../mixins/l10n' import AppSidebarTabs from '../AppSidebarTabs/AppSidebarTabs' +import { directive as ClickOutside } from 'v-click-outside' export default { name: 'AppSidebar', @@ -187,6 +202,7 @@ export default { directives: { focus: Focus, linkify: Linkify, + ClickOutside, }, mixins: [l10n], props: { @@ -199,6 +215,10 @@ export default { default: '', required: true, }, + + /** + * Allow to edit the sidebar title. + */ titleEditable: { type: Boolean, default: false, @@ -267,6 +287,7 @@ export default { data() { return { isStarred: this.starred, + titleEditing: false, } }, @@ -314,6 +335,19 @@ export default { this.$emit('update:starred', this.isStarred) }, + editTitle(event) { + // Don't edit the title if editing is disabled or if we clicked on a link + if (this.titleEditable === false || event.target.tagName === 'A') { + return + } + this.titleEditing = true + // Focus the title input + this.$nextTick( + () => this.$refs.titleInput.focus() + ) + this.$emit('start-editing') + }, + /** * Emit title change event to parent component * @param {Event} event input event @@ -336,9 +370,13 @@ export default { * @param {Event} event submit event */ onSubmitTitle(event) { + // Disable editing + this.titleEditing = false this.$emit('submit-title', event) }, onDismissEditing() { + // Disable editing + this.titleEditing = false this.$emit('dismiss-editing') }, }, @@ -410,13 +448,28 @@ $top-buttons-spacing: 6px; &__desc { position: relative; display: flex; - flex-direction: column; + flex-direction: row; justify-content: center; box-sizing: content-box; - padding: #{$desc-vertical-padding} #{$clickable-area * 2 + $top-buttons-spacing * 3} #{$desc-vertical-padding} $desc-vertical-padding / 2; + padding: #{$desc-vertical-padding} 0 #{$desc-vertical-padding} #{$desc-vertical-padding / 2}; + + .app-sidebar-header__title { + flex: 1 1 auto; + display: flex; + flex-direction: column; + justify-content: center; + } + + .app-sidebar-header__maintitle-form { + display: flex; + margin-left: -7.5px; + & .icon-confirm { + margin: 0; + } + } // titles - .app-sidebar-header__title, + .app-sidebar-header__maintitle, .app-sidebar-header__subtitle { overflow: hidden; width: 100%; @@ -425,8 +478,9 @@ $top-buttons-spacing: 6px; text-overflow: ellipsis; } // main title - .app-sidebar-header__title { + .app-sidebar-header__maintitle { padding: 0; + min-height: 30px; font-size: 20px; line-height: $desc-title-height; @@ -436,12 +490,12 @@ $top-buttons-spacing: 6px; text-decoration: underline; } } - - input.app-sidebar-header__title-input { - width: 100%; + input.app-sidebar-header__maintitle-input { + flex: 1 1 auto; margin: 0; padding: $desc-input-padding; - font-size: 16px; + font-size: 20px; + font-weight: bold; } // subtitle @@ -452,8 +506,6 @@ $top-buttons-spacing: 6px; } // favourite .app-sidebar-header__star { - position: absolute; - left: 0; display: block; width: $clickable-area; height: $clickable-area; @@ -461,44 +513,40 @@ $top-buttons-spacing: 6px; } // main menu .app-sidebar-header__menu { - position: absolute; - right: $clickable-area / 2; + height: $clickable-area; + width: $clickable-area; border-radius: $clickable-area / 2; background-color: $action-background-hover; } + &--editable { + .app-sidebar-header__maintitle-form { + margin-top: -2px; + margin-bottom: -2px; + } + } + // custom overrides &--with-star { - padding-left: $clickable-area; - } - &--with-subtitle { - justify-content: space-between; - height: $desc-height; - } - &--editable { - height: $desc-height * .75; + padding-left: 0; } &--with-subtitle--editable { - height: $desc-height * 1.5; - - .app-sidebar-header__subtitle { - margin-left: $desc-input-padding; + .app-sidebar-header__maintitle-form { + margin-top: -2px; } - - .app-sidebar-header__title-input { - margin-top: -$desc-vertical-padding / 2 - $desc-input-padding; + .app-sidebar-header__subtitle { + margin-top: -2px; } } } - &--with-figure { + &:not(.app-sidebar-header--with-figure) { .app-sidebar-header__desc { - padding-right: $clickable-area * 2; + padding-right: #{$clickable-area * 2 + $top-buttons-spacing}; } - } - &:not(.app-sidebar-header--with-figure) { .app-sidebar-header__menu { + position: absolute; top: $top-buttons-spacing; - right: $top-buttons-spacing * 2 + $clickable-area; + right: $top-buttons-spacing + $clickable-area; } } @@ -584,13 +632,6 @@ $top-buttons-spacing: 6px; opacity: 0; } -.rename-form { - display: flex; - & .icon-confirm { - margin: 0; - } -} -