From 5538fc76e50e2a977c1cae1bec9b46f9172a51aa Mon Sep 17 00:00:00 2001
From: Bram Wiepjes <bramw@protonmail.com>
Date: Wed, 10 Apr 2019 21:46:28 +0200
Subject: [PATCH] moved select context to a separate component
---
web-frontend/public/grid.html | 148 ++++++++++++++---
.../src/scss/components/_context.scss | 44 -----
web-frontend/src/scss/components/_menu.scss | 37 ++---
web-frontend/src/scss/components/_select.scss | 151 ++++++++++++++++++
.../src/scss/components/fields/_boolean.scss | 2 +
web-frontend/src/scss/default.scss | 1 +
6 files changed, 294 insertions(+), 89 deletions(-)
create mode 100644 web-frontend/src/scss/components/_select.scss
diff --git a/web-frontend/public/grid.html b/web-frontend/public/grid.html
index 62e98e745..e87a2b95a 100644
--- a/web-frontend/public/grid.html
+++ b/web-frontend/public/grid.html
@@ -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>
diff --git a/web-frontend/src/scss/components/_context.scss b/web-frontend/src/scss/components/_context.scss
index c8a55dc66..f013286f3 100644
--- a/web-frontend/src/scss/components/_context.scss
+++ b/web-frontend/src/scss/components/_context.scss
@@ -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;
diff --git a/web-frontend/src/scss/components/_menu.scss b/web-frontend/src/scss/components/_menu.scss
index 5ae9cbf6b..14a5bcf54 100644
--- a/web-frontend/src/scss/components/_menu.scss
+++ b/web-frontend/src/scss/components/_menu.scss
@@ -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);
+}
diff --git a/web-frontend/src/scss/components/_select.scss b/web-frontend/src/scss/components/_select.scss
new file mode 100644
index 000000000..ab2994762
--- /dev/null
+++ b/web-frontend/src/scss/components/_select.scss
@@ -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;
+}
diff --git a/web-frontend/src/scss/components/fields/_boolean.scss b/web-frontend/src/scss/components/fields/_boolean.scss
index bb5af7f23..3ea65634c 100644
--- a/web-frontend/src/scss/components/fields/_boolean.scss
+++ b/web-frontend/src/scss/components/fields/_boolean.scss
@@ -18,3 +18,5 @@
visibility: visible;
}
}
+
+// @TODO add the to use a checkbox input here.
diff --git a/web-frontend/src/scss/default.scss b/web-frontend/src/scss/default.scss
index 1a1bbe02b..dea134cf5 100755
--- a/web-frontend/src/scss/default.scss
+++ b/web-frontend/src/scss/default.scss
@@ -20,6 +20,7 @@
@import "components/scrollbar";
@import "components/modal";
@import "components/context";
+@import "components/select";
@import "components/fields/boolean";
@import "components/fields/number";