mirror of
https://gitlab.com/bramw/baserow.git
synced 2025-04-04 21:25:24 +00:00
moved select context to a separate component
This commit is contained in:
Bram Wiepjes
parent
bad7c0bb14
commit
5538fc76e5
6 changed files with 294 additions and 89 deletions
web-frontend
|
|
@ -12,30 +12,84 @@
|
|||
<div class="layout">
|
||||
<div class="layout-col-1 menu">
|
||||
<ul class="menu-items">
|
||||
<li>
|
||||
<a href="#" class="menu-item active">
|
||||
<li class="menu-item">
|
||||
<a href="#" class="menu-link active">
|
||||
<i class="fas fa-tachometer-alt"></i>
|
||||
<span class="menu-item-text">Dashboard</span>
|
||||
<span class="menu-link-text">Dashboard</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="menu-item">
|
||||
<li class="menu-item">
|
||||
<a href="#" class="menu-link" data-context=".select">
|
||||
<i class="fas fa-layer-group"></i>
|
||||
<span class="menu-item-text">Groups</span>
|
||||
<span class="menu-link-text">Groups</span>
|
||||
</a>
|
||||
<div class="select hidden">
|
||||
<div class="select-search">
|
||||
<i class="select-search-icon fas fa-search"></i>
|
||||
<input type="text" class="select-search-input" placeholder="Search views" />
|
||||
</div>
|
||||
<ul class="select-items">
|
||||
<li class="select-item active">
|
||||
<a href="#" class="select-item-link">Group name 1</a>
|
||||
<a href="#" class="select-item-options" data-context=".context">
|
||||
<i class="fas fa-ellipsis-v"></i>
|
||||
</a>
|
||||
<div class="context hidden">
|
||||
<ul class="context-menu">
|
||||
<li>
|
||||
<a href="#">
|
||||
<i class="context-menu-icon fas fa-fw fa-pen"></i>
|
||||
Rename group
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i class="context-menu-icon fas fa-fw fa-trash"></i>
|
||||
Delete group
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="select-item">
|
||||
<a href="#" class="select-item-link">Group name 2</a>
|
||||
<a href="#" class="select-item-options">
|
||||
<i class="fas fa-ellipsis-v"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="select-item">
|
||||
<a href="#" class="select-item-link">Group name 3</a>
|
||||
<a href="#" class="select-item-options">
|
||||
<i class="fas fa-ellipsis-v"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="select-item">
|
||||
<a href="#" class="select-item-link">Group name 4</a>
|
||||
<a href="#" class="select-item-options">
|
||||
<i class="fas fa-ellipsis-v"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="select-footer">
|
||||
<a href="#" class="select-footer-button">
|
||||
<i class="fas fa-plus"></i>
|
||||
Do something
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="menu-items">
|
||||
<li class="layout-uncollapse">
|
||||
<a href="#" class="menu-item" data-toggle-layout-collapse>
|
||||
<i class="fas fa-angle-double-right"></i>
|
||||
<span class="menu-item-text">Uncollapse</span>
|
||||
<li class="menu-item layout-uncollapse">
|
||||
<a href="#" class="menu-link" data-toggle-layout-collapse>
|
||||
<i class="menu-item-icon fas fa-angle-double-right"></i>
|
||||
<span class="menu-link-text">Uncollapse</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="user-item">
|
||||
<li class="menu-item">
|
||||
<a href="#" class="menu-link user-item">
|
||||
B
|
||||
<span class="menu-item-text">Full Name</span>
|
||||
<span class="menu-link-text">Full Name</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -69,7 +123,7 @@
|
|||
<li>
|
||||
<a href="#">
|
||||
<i class="context-menu-icon fas fa-fw fa-trash"></i>
|
||||
Rename table
|
||||
Delete table
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -183,21 +237,65 @@
|
|||
<header class="layout-col-3-1 header">
|
||||
<ul class="header-filter">
|
||||
<li class="header-filter-item">
|
||||
<a href="#" class="header-filter-link" data-context=".context">
|
||||
<a href="#" class="header-filter-link" data-context=".select">
|
||||
<i class="header-filter-icon fas fa-th"></i>
|
||||
Grid view name
|
||||
</a>
|
||||
<div class="context">
|
||||
<div class="context-search">
|
||||
<i class="context-search-icon fas fa-search"></i>
|
||||
<input type="text" class="context-search-input" placeholder="Search views" />
|
||||
<div class="select">
|
||||
<div class="select-search">
|
||||
<i class="select-search-icon fas fa-search"></i>
|
||||
<input type="text" class="select-search-input" placeholder="Search views" />
|
||||
</div>
|
||||
@TODO
|
||||
<div class="context-footer">
|
||||
<a href="#" class="context-footer-button">
|
||||
<i class="fas fa-plus"></i>
|
||||
Do something
|
||||
</a>
|
||||
<ul class="select-items">
|
||||
<li class="select-item active">
|
||||
<a href="#" class="select-item-link">Grid view name</a>
|
||||
<a href="#" class="select-item-options" data-context=".context">
|
||||
<i class="fas fa-ellipsis-v"></i>
|
||||
</a>
|
||||
<div class="context hidden">
|
||||
<ul class="context-menu">
|
||||
<li>
|
||||
<a href="#">
|
||||
<i class="context-menu-icon fas fa-fw fa-pen"></i>
|
||||
Rename
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i class="context-menu-icon fas fa-fw fa-trash"></i>
|
||||
Delete
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="select-item">
|
||||
<a href="#" class="select-item-link">Grid view option 2.</a>
|
||||
<a href="#" class="select-item-options">
|
||||
<i class="fas fa-ellipsis-v"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="select-item">
|
||||
<a href="#" class="select-item-link">Grid view 2</a>
|
||||
<a href="#" class="select-item-options">
|
||||
<i class="fas fa-ellipsis-v"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="select-item">
|
||||
<a href="#" class="select-item-link">Grid view 3</a>
|
||||
<a href="#" class="select-item-options">
|
||||
<i class="fas fa-ellipsis-v"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="select-footer">
|
||||
<div class="select-footer-multiple">
|
||||
<div class="select-footer-multiple-label">Add a view:</div>
|
||||
<a href="#" class="select-footer-multiple-item">
|
||||
<i class="select-footer-multiple-icon fas fa-th"></i>
|
||||
Grid
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -15,50 +15,6 @@
|
|||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.context-search {
|
||||
position: relative;
|
||||
border-bottom: 1px solid $color-neutral-200;
|
||||
}
|
||||
|
||||
.context-search-icon {
|
||||
@include absolute(0, auto, auto, 0);
|
||||
@include center-text(32px, 14px, 36px);
|
||||
|
||||
color: $color-neutral-300;
|
||||
}
|
||||
|
||||
.context-search-input {
|
||||
display: block;
|
||||
width: 100%;
|
||||
border: none;
|
||||
padding: 0 12px 0 36px;
|
||||
border-top-left-radius: 6px;
|
||||
border-top-right-radius: 6px;
|
||||
|
||||
@include fixed-height(36px, 14px);
|
||||
}
|
||||
|
||||
.context-footer {
|
||||
border-top: 1px solid $color-neutral-200;
|
||||
}
|
||||
|
||||
.context-footer-button {
|
||||
display: block;
|
||||
padding: 0 12px;
|
||||
color: $color-neutral-600;
|
||||
|
||||
@include fixed-height(36px, 14px);
|
||||
|
||||
.fas {
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $color-neutral-100;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.context-menu {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
|
|
|
|||
|
|
@ -10,19 +10,16 @@
|
|||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
a {
|
||||
position: relative;
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.menu-link {
|
||||
position: relative;
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
border-radius: 3px;
|
||||
color: $white;
|
||||
|
||||
|
|
@ -37,16 +34,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.user-item {
|
||||
border-radius: 100%;
|
||||
background-color: $color-primary-500;
|
||||
color: $white;
|
||||
font-weight: 700;
|
||||
|
||||
@include center-text(32px, 18px);
|
||||
}
|
||||
|
||||
.menu-item-text {
|
||||
.menu-link-text {
|
||||
display: none;
|
||||
position: absolute;
|
||||
left: 36px;
|
||||
|
|
@ -64,3 +52,12 @@
|
|||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.user-item {
|
||||
border-radius: 100%;
|
||||
background-color: $color-primary-500;
|
||||
color: $white;
|
||||
font-weight: 700;
|
||||
|
||||
@include center-text(32px, 18px);
|
||||
}
|
||||
|
|
|
|||
151
web-frontend/src/scss/components/_select.scss
Normal file
151
web-frontend/src/scss/components/_select.scss
Normal file
|
|
@ -0,0 +1,151 @@
|
|||
.select {
|
||||
@extend .context;
|
||||
|
||||
max-width: 360px;
|
||||
}
|
||||
|
||||
.select-search {
|
||||
position: relative;
|
||||
border-bottom: 1px solid $color-neutral-200;
|
||||
}
|
||||
|
||||
.select-search-icon {
|
||||
color: $color-neutral-300;
|
||||
|
||||
@include absolute(0, auto, auto, 0);
|
||||
@include center-text(32px, 14px, 36px);
|
||||
}
|
||||
|
||||
.select-search-input {
|
||||
display: block;
|
||||
width: 100%;
|
||||
border: none;
|
||||
padding: 0 12px 0 36px;
|
||||
border-top-left-radius: 6px;
|
||||
border-top-right-radius: 6px;
|
||||
|
||||
@include fixed-height(36px, 14px);
|
||||
}
|
||||
|
||||
.select-items {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
%select-item-size {
|
||||
@include fixed-height(32px, 14px);
|
||||
}
|
||||
|
||||
.select-item {
|
||||
@extend %select-item-size;
|
||||
|
||||
position: relative;
|
||||
margin: 0 8px 4px 8px;
|
||||
padding: 0 32px 0 10px;
|
||||
border-radius: 3px;
|
||||
|
||||
&:hover {
|
||||
background-color: $color-neutral-100;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: $color-primary-100;
|
||||
|
||||
&::after {
|
||||
@extend .fas;
|
||||
@extend %select-item-size;
|
||||
|
||||
content: fa-content($fa-var-check-circle);
|
||||
width: 32px;
|
||||
text-align: center;
|
||||
color: $color-success-500;
|
||||
|
||||
@include absolute(0, 0, auto, auto);
|
||||
}
|
||||
|
||||
&:hover::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select-item-link {
|
||||
@extend %ellipsis;
|
||||
@extend %select-item-size;
|
||||
|
||||
display: block;
|
||||
color: $color-primary-900;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.select-item-options {
|
||||
@extend %select-item-size;
|
||||
|
||||
display: none;
|
||||
text-align: center;
|
||||
width: 32px;
|
||||
color: $color-neutral-300;
|
||||
|
||||
@include absolute(0, 0, auto, auto);
|
||||
|
||||
&:hover {
|
||||
color: $color-neutral-700;
|
||||
}
|
||||
|
||||
:hover > & {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.select-footer {
|
||||
border-top: 1px solid $color-neutral-200;
|
||||
}
|
||||
|
||||
.select-footer-button {
|
||||
display: block;
|
||||
padding: 0 12px;
|
||||
color: $color-neutral-600;
|
||||
|
||||
@include fixed-height(36px, 14px);
|
||||
|
||||
.fas {
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $color-neutral-100;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.select-footer-multiple {
|
||||
display: flex;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.select-footer-multiple-label {
|
||||
@extend %select-item-size;
|
||||
}
|
||||
|
||||
.select-footer-multiple-item {
|
||||
@extend %select-item-size;
|
||||
|
||||
margin-left: 8px;
|
||||
padding: 0 10px;
|
||||
color: $color-primary-900;
|
||||
border-radius: 3px;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
background-color: $color-neutral-100;
|
||||
}
|
||||
}
|
||||
|
||||
.select-footer-multiple-icon {
|
||||
color: $color-neutral-300;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
|
@ -18,3 +18,5 @@
|
|||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
// @TODO add the to use a checkbox input here.
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@
|
|||
@import "components/scrollbar";
|
||||
@import "components/modal";
|
||||
@import "components/context";
|
||||
@import "components/select";
|
||||
|
||||
@import "components/fields/boolean";
|
||||
@import "components/fields/number";
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue