Skip to content

Commit

Permalink
Fix sidebar title menu alignment
Browse files Browse the repository at this point in the history 
Signed-off-by: Richard Steinmetz <richard@steinmetz.cloud>
  • Loading branch information
@st3iny
st3iny committed Jul 10, 2021
1 parent 55438b8 commit 3d570b3
Show file tree
Hide file tree
Showing 7 changed files with 78 additions and 66 deletions.
Binary file modified ...arred_false-compact_false-header_image-secondary_button-editable_false-base.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...tarred_false-compact_false-header_image-secondary_button-editable_true-base.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...tarred_null-compact_false-header_image-secondary_button-editable_false-base.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...starred_null-compact_false-header_image-secondary_button-editable_true-base.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...tarred_true-compact_false-header_image-secondary_button-editable_false-base.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...starred_true-compact_false-header_image-secondary_button-editable_true-base.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
144 changes: 78 additions & 66 deletions src/components/AppSidebar/AppSidebar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -192,33 +192,41 @@ include a standard-header like it's used by the files app.

<!-- title -->
<div class="app-sidebar-header__title-container">
<!-- main title -->
<h2 v-show="!titleEditable"
v-linkify="{text: title, linkify: linkifyTitle}"
v-tooltip.auto="titleTooltip"
class="app-sidebar-header__maintitle"
@click.self="editTitle">
{{ title }}
</h2>
<template v-if="titleEditable">
<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>
<div class="app-sidebar-header__maintitle-container">
<!-- main title -->
<h2 v-show="!titleEditable"
v-linkify="{text: title, linkify: linkifyTitle}"
v-tooltip.auto="titleTooltip"
class="app-sidebar-header__maintitle"
@click.self="editTitle">
{{ title }}
</h2>
<template v-if="titleEditable">
<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>
<!-- header main menu -->
<Actions v-if="$slots['secondary-actions']"
class="app-sidebar-header__menu"
:force-menu="forceMenu">
<slot name="secondary-actions" />
</Actions>
</div>
<!-- secondary title -->
<p
v-if="subtitle.trim() !== ''"
Expand All @@ -227,11 +235,6 @@ include a standard-header like it's used by the files app.
{{ subtitle }}
</p>
</div>

<!-- header main menu -->
<Actions v-if="$slots['secondary-actions']" class="app-sidebar-header__menu" :force-menu="forceMenu">
<slot name="secondary-actions" />
</Actions>
</div>
</div>
<div v-if="$slots['description'] && !empty" class="app-sidebar-header__description">
Expand Down Expand Up @@ -708,20 +711,52 @@ $top-buttons-spacing: 6px;
justify-content: center;
min-width: 0;

// main title
.app-sidebar-header__maintitle {
padding: 0;
min-height: 30px;
font-size: 20px;
line-height: $desc-title-height;

// Needs 'deep' as the link is generated by the linkify directive
&::v-deep .linkified {
cursor: pointer;
text-decoration: underline;
.app-sidebar-header__maintitle-container {
display: flex;
align-items: center;

// main title
.app-sidebar-header__maintitle {
padding: 0;
min-height: 30px;
font-size: 20px;
line-height: $desc-title-height;

// Needs 'deep' as the link is generated by the linkify directive
&::v-deep .linkified {
cursor: pointer;
text-decoration: underline;
}
}

.app-sidebar-header__maintitle-form {
display: flex;
flex: 1 1 auto;

& .icon-confirm {
margin: 0;
}

input.app-sidebar-header__maintitle-input {
flex: 1 1 auto;
margin: 0;
padding: $desc-input-padding;
font-size: 20px;
font-weight: bold;
}
}

// main menu
.app-sidebar-header__menu {
height: $clickable-area;
width: $clickable-area;
border-radius: $clickable-area / 2;
background-color: $action-background-hover;
margin-left: 5px;
}
}

// shared between main and subtitle
.app-sidebar-header__maintitle,
.app-sidebar-header__subtitle {
overflow: hidden;
Expand All @@ -737,21 +772,6 @@ $top-buttons-spacing: 6px;
opacity: $opacity_normal;
font-size: var(--default-font-size);
}

.app-sidebar-header__maintitle-form {
display: flex;
& .icon-confirm {
margin: 0;
}

input.app-sidebar-header__maintitle-input {
flex: 1 1 auto;
margin: 0;
padding: $desc-input-padding;
font-size: 20px;
font-weight: bold;
}
}
}

// favourite
Expand All @@ -761,14 +781,6 @@ $top-buttons-spacing: 6px;
height: $clickable-area;
padding: $icon-margin;
}
// main menu
.app-sidebar-header__menu {
height: $clickable-area;
width: $clickable-area;
border-radius: $clickable-area / 2;
background-color: $action-background-hover;
margin-left: 5px;
}
}

// sidebar description slot
Expand Down

0 comments on commit 3d570b3

Please sign in to comment.