archive/bramw_baserow
1
0
Fork 0
mirror of https://gitlab.com/bramw/baserow.git synced 2025-04-04 13:15:24 +00:00
Code Issues Projects Releases Wiki Activity

added tree component

Browse source
This commit is contained in:
Bram Wiepjes 2019-02-20 22:56:59 +01:00
parent 9a2a09c615
commit 0cac64f05d
9 changed files with 343 additions and 11 deletions

117
web-frontend/public/grid.html
View file

@ -31,7 +31,122 @@
</ul>
</div>
<div class="layout-col-2 sidebar">
sidebar
<div class="sidebar-content">
<div class="sidebar-title">Baserow</div>
<div class="sidebar-group-title">Group name 1</div>
<ul class="tree">
<li class="tree-item">
<div class="tree-action">
<a href="#" class="tree-link">
<i class="tree-type fas fa-database"></i>
Vehicles
</a>
<a href="#" class="tree-options">
<i class="fas fa-ellipsis-v"></i>
</a>
</div>
</li>
<li class="tree-item">
<div class="tree-action">
<a href="#" class="tree-link">
<i class="tree-type fas fa-angle-right"></i>
Map nummer 1
</a>
</div>
</li>
<li class="tree-item active">
<div class="tree-action">
<a href="#" class="tree-link">
<i class="tree-type fas fa-database"></i>
Webshop
</a>
<a href="#" class="tree-options">
<i class="fas fa-ellipsis-v"></i>
</a>
</div>
<ul class="tree-subs">
<li class="tree-sub active">
<a href="#" class="tree-sub-link">Customers</a>
<a href="#" class="tree-options">
<i class="fas fa-ellipsis-v"></i>
</a>
</li>
<li class="tree-sub">
<a href="#" class="tree-sub-link">Products very long name</a>
<a href="#" class="tree-options">
<i class="fas fa-ellipsis-v"></i>
</a>
</li>
<li class="tree-sub">
<a href="#" class="tree-sub-link">Categories</a>
<a href="#" class="tree-options">
<i class="fas fa-ellipsis-v"></i>
</a>
</li>
</ul>
</li>
<li class="tree-item">
<div class="tree-action">
<a href="#" class="tree-link">
<i class="tree-type fas fa-angle-down"></i>
Map nummer 1
</a>
</div>
<ul class="tree">
<li class="tree-item">
<div class="tree-action">
<a href="#" class="tree-link">
<i class="tree-type fas fa-database"></i>
Vehicles
</a>
<a href="#" class="tree-options">
<i class="fas fa-ellipsis-v"></i>
</a>
</div>
</li>
<li class="tree-item">
<div class="tree-action">
<a href="#" class="tree-link">
<i class="tree-type fas fa-database"></i>
Something
</a>
<a href="#" class="tree-options">
<i class="fas fa-ellipsis-v"></i>
</a>
</div>
</li>
</ul>
</li>
<li class="tree-item">
<div class="tree-action">
<a href="#" class="tree-link">
<i class="tree-type fas fa-database"></i>
Vehicles with very long name and that is not good.
</a>
<a href="#" class="tree-options">
<i class="fas fa-ellipsis-v"></i>
</a>
</div>
</li>
<li class="tree-item">
<div class="tree-action">
<a href="#" class="tree-link">
<i class="tree-type fas fa-database"></i>
Something else
</a>
<a href="#" class="tree-options">
<i class="fas fa-ellipsis-v"></i>
</a>
</div>
</li>
</ul>
</div>
<div class="sidebar-footer">
<a href="#" class="sidebar-collapse">
<i class="fas fa-angle-double-left"></i>
Collapse sidebar
</a>
</div>
</div>
<div class="layout-col-3">content</div>
</div>

9
web-frontend/src/scss/abstracts/_mixins.scss
View file

@ -41,10 +41,15 @@
}
}
@mixin center-text($width, $font-size, $height: $width) {
width: $width;
@mixin fixed-height($height, $font-size) {
height: $height;
line-height: $height;
font-size: $font-size;
}
@mixin center-text($width, $font-size, $height: $width) {
@include fixed-height($height, $font-size);
width: $width;
text-align: center;
}

6
web-frontend/src/scss/abstracts/_placeholders.scss
View file

@ -7,3 +7,9 @@
margin-bottom: 0;
}
}
%ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

9
web-frontend/src/scss/base/_typography.scss
View file

@ -1,5 +1,14 @@
html {
font-size: 62.5%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-weight: 400;
}
@-moz-document url-prefix() {
body {
font-weight: lighter !important;
}
}
body {

26
web-frontend/src/scss/components/_layout.scss
View file

@ -4,21 +4,31 @@
top: 0;
right: 0;
bottom: 0;
display: flex;
}
.layout-col-1 {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 52px;
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 52px;
overflow-x: auto;
}
.layout-col-2 {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 226px;
position: absolute;
left: 52px;
top: 0;
bottom: 0;
width: 226px;
overflow-y: auto;
}
.layout-col-3 {
width: 100%;
position: absolute;
left: 278px;
top: 0;
bottom: 0;
right: 0;
overflow-y: auto;
}

2
web-frontend/src/scss/components/_menu.scss
View file

@ -41,6 +41,7 @@
border-radius: 100%;
background-color: $color-primary-500;
color: $white;
font-weight: 700;
@include center-text(32px, 18px);
}
@ -55,6 +56,7 @@
border-radius: 3px;
padding: 0 4px;
white-space: nowrap;
font-weight: 400;
@include center-text(auto, 11px, 21px);

40
web-frontend/src/scss/components/_sidebar.scss
View file

@ -1,4 +1,44 @@
.sidebar {
display: flex;
flex-direction: column;
justify-content: space-between;
background-color: $white;
border-right: 1px solid $color-neutral-200;
}
.sidebar-content {
padding: 12px;
}
.sidebar-footer {
flex-grow: 0;
flex-shrink: 0;
border-top: 1px solid $color-neutral-200;
}
.sidebar-collapse {
display: block;
padding: 14px 16px;
color: $color-primary-900;
font-weight: bold;
font-size: 14px;
line-height: 14px;
&:hover {
text-decoration: none;
background-color: $color-neutral-100;
}
}
.sidebar-title {
font-family: $logo-font-stack;
font-size: 20px;
font-weight: 700;
margin-bottom: 16px;
}
.sidebar-group-title {
font-size: 14px;
font-weight: 700;
margin-bottom: 10px;
}

144
web-frontend/src/scss/components/_tree.scss Normal file
View file

@ -0,0 +1,144 @@
.tree {
list-style: none;
padding: 0;
margin: 0;
.tree-item & {
padding-left: 8px;
}
}
.tree-item {
@extend %first-last-no-margin;
position: relative;
margin: 4px 0;
border-radius: 3px;
&.active {
background-color: $color-primary-100;
}
}
%tree-size {
line-height: 32px;
height: 32px;
}
.tree-action {
@extend %tree-size;
padding: 0 32px 0 6px;
border-radius: 3px;
&:hover {
background-color: $color-neutral-100;
}
.tree-item.active &:hover {
background-color: transparent;
}
}
.tree-link {
@extend %tree-size;
@extend %ellipsis;
display: block;
color: $color-primary-900;
font-size: 14px;
&:hover {
text-decoration: none;
}
}
.tree-type {
@extend %tree-size;
text-align: center;
width: $fa-fw-width;
color: $color-neutral-300;
margin-right: 4px;
font-size: 11px;
}
%sub-tree-size {
line-height: 28px;
height: 28px;
}
.tree-subs {
list-style: none;
padding: 0 0 2px 0;
margin: 0;
}
.tree-sub {
@extend %sub-tree-size;
position: relative;
padding: 0 34px;
&::before,
&::after {
content: "";
position: absolute;
left: 12px;
}
&::before {
top: 0;
height: 28px;
border-left: 1px solid $color-neutral-200;
}
&::after {
top: 14px;
width: 12px;
border-bottom: 1px solid $color-neutral-200;
}
&:last-child::before {
height: 15px;
}
}
.tree-sub-link {
@extend %sub-tree-size;
@extend %ellipsis;
color: $color-primary-900;
display: block;
&:hover {
text-decoration: none;
color: $color-primary-500;
}
.active > & {
font-weight: 600;
color: $color-primary-600;
}
}
.tree-options {
display: none;
position: absolute;
z-index: 1;
right: 0;
top: 0;
text-align: center;
width: 32px;
color: $color-neutral-300;
height: inherit;
line-height: inherit;
&:hover {
color: $color-neutral-700;
}
:hover > & {
display: block;
}
}

1
web-frontend/src/scss/default.scss
View file

@ -15,5 +15,6 @@
@import "components/layout";
@import "components/menu";
@import "components/sidebar";
@import "components/tree";
@import "components/box_page";