archive/bramw_baserow
1
0
Fork 0
mirror of https://gitlab.com/bramw/baserow.git synced 2025-05-05 09:20:09 +00:00
Code Issues Projects Releases Wiki Activity

Left sidebar collapse styling changes

Browse source
This commit is contained in:
Bram Wiepjes 2025-04-16 17:37:50 +00:00
parent 371837866c
commit 099e17804e
5 changed files with 41 additions and 19 deletions
changelog/entries/unreleased/refactor
implement_left_sidebar_collapse_styling.json
web-frontend/modules/core
assets
icons
sidebar.svg
scss
components
sidebar.scss
variables.scss
components/sidebar
SidebarFoot.vue

8
changelog/entries/unreleased/refactor/implement_left_sidebar_collapse_styling.json Normal file
View file

@ -0,0 +1,8 @@
{
"type": "refactor",
"message": "Implemented small styling changes for the collapsing of the left sidebar.",
"domain": "core",
"issue_number": null,
"bullet_points": [],
"created_at": "2025-04-04"
}

6
web-frontend/modules/core/assets/icons/sidebar.svg Normal file
View file

@ -0,0 +1,6 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18.875 20.25L5.125 20.25C3.60622 20.25 2.375 19.0188 2.375 17.5L2.375 6.5C2.375 4.98122 3.60622 3.75 5.125 3.75L18.875 3.75C20.3938 3.75 21.625 4.98122 21.625 6.5V17.5C21.625 19.0188 20.3938 20.25 18.875 20.25Z" stroke="#202128" stroke-width="1.925" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M11.3125 20.25V3.75" stroke="#202128" stroke-width="1.925" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M5.8125 7.1875H7.875" stroke="#202128" stroke-width="1.925" stroke-linecap="round"/>
<path d="M5.8125 10.625H7.875" stroke="#202128" stroke-width="1.925" stroke-linecap="round"/>
</svg>
Side by side

After

(image error) Size: 717 B

18
web-frontend/modules/core/assets/scss/components/sidebar.scss
View file

@ -1,8 +1,8 @@
.sidebar {
@include absolute(0);
background-color: $color-neutral-50;
border-right: solid 1px $color-neutral-200;
background-color: $palette-neutral-25;
border-right: solid 1px $palette-neutral-200;
height: 100%;
display: flex;
flex-direction: column;
@ -165,9 +165,19 @@
.sidebar--collapsed & {
flex-direction: column;
gap: 8px;
margin-top: 0;
margin-bottom: 8px;
margin-bottom: 16px;
}
}
.sidebar__foot-separator {
width: 1px;
height: 16px;
background-color: $palette-neutral-200;
.sidebar--collapsed & {
width: 16px;
height: 1px;
}
}

2
web-frontend/modules/core/assets/scss/variables.scss
View file

@ -81,7 +81,7 @@ $baserow-icons: 'circle-empty', 'circle-checked', 'check-square', 'formula',
'calendar', 'smile', 'smartphone', 'plus', 'heading-1', 'heading-2',
'heading-3', 'paragraph', 'ordered-list', 'enlarge', 'share', 'settings',
'up-down-arrows', 'application', 'groups', 'timeline', 'dashboard', 'jira',
'postgresql', 'hubspot', 'separator', 'spacer', 'automation';
'postgresql', 'hubspot', 'separator', 'spacer', 'automation', 'sidebar';
$grid-view-row-height-small: 33px;
$grid-view-row-height-medium: 55px;

26
web-frontend/modules/core/components/sidebar/SidebarFoot.vue
View file

@ -5,20 +5,6 @@
<ExternalLinkBaserowLogo />
</div>
<div class="sidebar__foot-links">
<a
v-if="!collapsed && width > 220"
class="sidebar__foot-link"
@click="$emit('set-col1-width', 52)"
>
<i class="sidebar__foot-link-icon iconoir-fast-arrow-left"></i>
</a>
<a
v-if="collapsed"
class="sidebar__foot-link"
@click="$emit('set-col1-width', 240)"
>
<i class="sidebar__foot-link-icon iconoir-fast-arrow-right"></i>
</a>
<a
class="sidebar__foot-link"
:class="{
@ -37,6 +23,18 @@
>
<i class="sidebar__foot-link-icon iconoir-redo"></i>
</a>
<template v-if="!collapsed && width > 224">
<div class="sidebar__foot-separator"></div>
<a class="sidebar__foot-link" @click="$emit('set-col1-width', 52)">
<i class="sidebar__foot-link-icon baserow-icon-sidebar"></i>
</a>
</template>
<template v-if="collapsed">
<div class="sidebar__foot-separator"></div>
<a class="sidebar__foot-link" @click="$emit('set-col1-width', 240)">
<i class="sidebar__foot-link-icon baserow-icon-sidebar"></i>
</a>
</template>
</div>
</div>
</div>