Skip to content

Commit

Permalink
Allow to toggle editable title by click
Browse files Browse the repository at this point in the history 
Signed-off-by: Raimund Schlüßler <raimund.schluessler@mailbox.org>
  • Loading branch information
@raimund-schluessler
raimund-schluessler committed Aug 16, 2020
1 parent 54b3637 commit 0c6c5b6
Showing 1 changed file with 94 additions and 63 deletions.
157 changes: 94 additions & 63 deletions src/components/AppSidebar/AppSidebar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,38 +123,42 @@
</div>

<!-- sidebar details -->
<div v-if="!empty" :class="{ 'app-sidebar-header__desc--with-star': canStar, 'app-sidebar-header__desc--with-subtitle': subtitle && !titleEditable, 'app-sidebar-header__desc--editable': titleEditable && !subtitle, 'app-sidebar-header__desc--with-subtitle--editable': titleEditable && subtitle}" class="app-sidebar-header__desc">
<div v-if="!empty" :class="{ 'app-sidebar-header__desc--with-star': canStar, 'app-sidebar-header__desc--with-subtitle': subtitle && !titleEditing, 'app-sidebar-header__desc--editable': titleEditing && !subtitle, 'app-sidebar-header__desc--with-subtitle--editable': titleEditing && subtitle}" class="app-sidebar-header__desc">
<!-- favourite icon -->
<a v-if="canStar"
:class="{ 'icon-starred': isStarred&& !starLoading, 'icon-star': !isStarred && !starLoading, 'icon-loading-small': starLoading }"
class="app-sidebar-header__star"
@click.prevent="toggleStarred" />

<!-- main title -->
<h2 v-if="!titleEditable" class="app-sidebar-header__title">
{{ title }}
</h2>
<template v-if="titleEditable">
<form
class="rename-form"
@submit.prevent="onSubmitTitle">
<input
v-focus
class="app-sidebar-header__title-input"
type="text"
:placeholder="titlePlaceholder"
:value="title"
@keydown.esc="onDismissEditing"
@input="onTitleInput">
<button
class="icon-confirm"
type="submit" />
</form>
</template>
<!-- secondary title -->
<p v-if="subtitle.trim() !== ''" class="app-sidebar-header__subtitle">
{{ subtitle }}
</p>
<div class="app-sidebar-header__title">
<h2 v-show="!titleEditing" class="app-sidebar-header__maintitle" @click="editTitle($event)">
{{ title }}
</h2>
<template v-if="titleEditing">
<form
v-click-outside="() => onSubmitTitle()"
class="app-sidebar-header__maintitle-form"
@submit.prevent="onSubmitTitle">
<input
ref="titleInput"
v-focus
class="app-sidebar-header__maintitle-input"
type="text"
:placeholder="titlePlaceholder"
:value="title"
@keydown.esc="onDismissEditing"
@input="onTitleInput">
<button
class="icon-confirm"
type="submit" />
</form>
</template>
<!-- secondary title -->
<p v-if="subtitle.trim() !== ''" class="app-sidebar-header__subtitle">
{{ subtitle }}
</p>
</div>

<!-- header main menu -->
<Actions v-if="$slots['secondary-actions']" class="app-sidebar-header__menu" :force-menu="forceMenu">
Expand All @@ -178,6 +182,7 @@ import Actions from '../Actions'
import Focus from '../../directives/Focus'
import l10n from '../../mixins/l10n'
import AppSidebarTabs from '../AppSidebarTabs/AppSidebarTabs'
import { directive as ClickOutside } from 'v-click-outside'
export default {
name: 'AppSidebar',
Expand All @@ -187,6 +192,7 @@ export default {
},
directives: {
focus: Focus,
ClickOutside,
},
mixins: [l10n],
props: {
Expand All @@ -200,7 +206,7 @@ export default {
required: true,
},
titleEditable: {
type: Boolean,
type: [Boolean, String],
default: false,
},
titlePlaceholder: {
Expand Down Expand Up @@ -267,6 +273,7 @@ export default {
data() {
return {
isStarred: this.starred,
editing: false,
}
},
Expand All @@ -280,6 +287,9 @@ export default {
hasFigureClickListener() {
return this.$listeners['figure-click']
},
titleEditing() {
return this.titleEditable === 'toggle' ? this.editing : this.titleEditable
},
},
watch: {
Expand Down Expand Up @@ -314,6 +324,19 @@ export default {
this.$emit('update:starred', this.isStarred)
},
editTitle(event) {
// Don't edit the title if editing is disabled
if (this.titleEditable === false) {
return
}
this.editing = 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
Expand All @@ -336,9 +359,13 @@ export default {
* @param {Event} event submit event
*/
onSubmitTitle(event) {
// Disable editing
this.editing = false
this.$emit('submit-title', event)
},
onDismissEditing() {
// Disable editing
this.editing = false
this.$emit('dismiss-editing')
},
},
Expand Down Expand Up @@ -410,13 +437,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%;
Expand All @@ -425,16 +467,18 @@ $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;
}
input.app-sidebar-header__title-input {
input.app-sidebar-header__maintitle-input {
width: 100%;
margin: 0;
padding: $desc-input-padding;
font-size: 16px;
font-size: 20px;
font-weight: bold;
}
// subtitle
Expand All @@ -445,53 +489,47 @@ $top-buttons-spacing: 6px;
}
// favourite
.app-sidebar-header__star {
position: absolute;
left: 0;
display: block;
width: $clickable-area;
height: $clickable-area;
padding: $icon-margin;
}
// main menu
.app-sidebar-header__menu {
position: absolute;
right: $clickable-area / 2;
height: 44px;
width: 44px;
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;
}
}
Expand Down Expand Up @@ -577,13 +615,6 @@ $top-buttons-spacing: 6px;
opacity: 0;
}
.rename-form {
display: flex;
& .icon-confirm {
margin: 0;
}
}
</style>

<style lang="scss">
Expand Down

0 comments on commit 0c6c5b6

Please sign in to comment.