From 7db30f745154cda4bc66f3e1e6a6d7e988a8d43c 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 1/2] 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 | 188 ++++++++++++++--------- 1 file changed, 117 insertions(+), 71 deletions(-) diff --git a/src/components/AppSidebar/AppSidebar.vue b/src/components/AppSidebar/AppSidebar.vue index c223e61d2e..5136b9eff5 100644 --- a/src/components/AppSidebar/AppSidebar.vue +++ b/src/components/AppSidebar/AppSidebar.vue @@ -123,36 +123,55 @@ -
+
- +
+ +
-

- - -

- {{ subtitle }} -

+
+

+ + +

+ {{ subtitle }} +

+

@@ -177,6 +196,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 +207,7 @@ export default { directives: { focus: Focus, linkify: Linkify, + ClickOutside, }, mixins: [l10n], props: { @@ -199,6 +220,10 @@ export default { default: '', required: true, }, + + /** + * Allow to edit the sidebar title. + */ titleEditable: { type: Boolean, default: false, @@ -314,16 +339,21 @@ export default { this.$emit('update:starred', this.isStarred) }, + editTitle(event) { + this.$emit('update:titleEditable', true) + // Focus the title input + if (this.titleEditable) { + this.$nextTick( + () => this.$refs.titleInput.focus() + ) + } + }, + /** * Emit title change event to parent component * @param {Event} event input event */ onTitleInput(event) { - /** - * Emitted on title events of the text field - * @type {Event|Date} - */ - this.$emit('input-title', event) /** * Emitted when the title value changes * @type {string|Date} @@ -336,9 +366,13 @@ export default { * @param {Event} event submit event */ onSubmitTitle(event) { + // Disable editing + this.$emit('update:titleEditable', false) this.$emit('submit-title', event) }, onDismissEditing() { + // Disable editing + this.$emit('update:titleEditable', false) this.$emit('dismiss-editing') }, }, @@ -410,13 +444,37 @@ $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__star-action { + display: flex; + height: $clickable-area; + width: $clickable-area; + justify-content: center; + flex: 0 0 auto; + } + + .app-sidebar-header__title { + flex: 1 1 auto; + display: flex; + flex-direction: column; + justify-content: center; + min-width: 0; + } + + .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 +483,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 +495,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 +511,6 @@ $top-buttons-spacing: 6px; } // favourite .app-sidebar-header__star { - position: absolute; - left: 0; display: block; width: $clickable-area; height: $clickable-area; @@ -461,44 +518,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 +637,6 @@ $top-buttons-spacing: 6px; opacity: 0; } -.rename-form { - display: flex; - & .icon-confirm { - margin: 0; - } -} -