From bad7c0bb148b39a1ef8af6ac7b1d102ebb55015b Mon Sep 17 00:00:00 2001
From: Bram Wiepjes <bramw@protonmail.com>
Date: Mon, 1 Apr 2019 22:04:08 +0200
Subject: [PATCH] added context search and footer button styling
---
web-frontend/public/grid.html | 19 +++++--
.../src/scss/abstracts/_variables.scss | 4 +-
web-frontend/src/scss/base/_helpers.scss | 4 ++
.../src/scss/components/_context.scss | 50 ++++++++++++++++++-
web-frontend/src/scss/components/_header.scss | 48 +++++++++---------
web-frontend/src/scss/components/_layout.scss | 2 +
6 files changed, 97 insertions(+), 30 deletions(-)
diff --git a/web-frontend/public/grid.html b/web-frontend/public/grid.html
index 20a612591..62e98e745 100644
--- a/web-frontend/public/grid.html
+++ b/web-frontend/public/grid.html
@@ -9,7 +9,7 @@
<title>Baserow</title>
</head>
<body>
- <div class="layout layout-collapsed">
+ <div class="layout">
<div class="layout-col-1 menu">
<ul class="menu-items">
<li>
@@ -182,11 +182,24 @@
<div class="layout-col-3">
<header class="layout-col-3-1 header">
<ul class="header-filter">
- <li>
- <a href="#">
+ <li class="header-filter-item">
+ <a href="#" class="header-filter-link" data-context=".context">
<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>
+ @TODO
+ <div class="context-footer">
+ <a href="#" class="context-footer-button">
+ <i class="fas fa-plus"></i>
+ Do something
+ </a>
+ </div>
+ </div>
</li>
</ul>
<ul class="header-info">
diff --git a/web-frontend/src/scss/abstracts/_variables.scss b/web-frontend/src/scss/abstracts/_variables.scss
index d20da9b1a..e1812d75d 100644
--- a/web-frontend/src/scss/abstracts/_variables.scss
+++ b/web-frontend/src/scss/abstracts/_variables.scss
@@ -61,4 +61,6 @@ $color-error-900: #4d0c03 !default;
$z-index-layout-col-1: 3;
$z-index-layout-col-2: 2;
$z-index-layout-col-3: 1;
-$z-index-modal: 4;
+$z-index-layout-col-3-1: 5;
+$z-index-layout-col-3-2: 4;
+$z-index-modal: 6;
diff --git a/web-frontend/src/scss/base/_helpers.scss b/web-frontend/src/scss/base/_helpers.scss
index 89dad5c1d..8e74fb1e2 100644
--- a/web-frontend/src/scss/base/_helpers.scss
+++ b/web-frontend/src/scss/base/_helpers.scss
@@ -12,6 +12,10 @@
text-align: right;
}
+.color-primary {
+ color: $color-primary-500 !important;
+}
+
.remove-scrollbar {
-ms-overflow-style: none;
diff --git a/web-frontend/src/scss/components/_context.scss b/web-frontend/src/scss/components/_context.scss
index 4a2a97f12..c8a55dc66 100644
--- a/web-frontend/src/scss/components/_context.scss
+++ b/web-frontend/src/scss/components/_context.scss
@@ -4,19 +4,65 @@
white-space: nowrap;
background-color: $white;
border-radius: 6px;
+ border: 1px solid $color-neutral-200;
box-shadow: 0 2px 6px 0 rgba($black, 0.16);
}
.context-menu-title {
color: $color-neutral-600;
- padding: 12px 8px;
+ padding: 12px 8px 2px 8px;
line-height: 13px;
+ 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;
- margin-bottom: 10px;
+ margin: 10px 0;
li {
margin-bottom: 4px;
diff --git a/web-frontend/src/scss/components/_header.scss b/web-frontend/src/scss/components/_header.scss
index 6f5694d0d..33c177ad0 100644
--- a/web-frontend/src/scss/components/_header.scss
+++ b/web-frontend/src/scss/components/_header.scss
@@ -30,34 +30,34 @@
list-style: none;
padding: 0;
margin: auto 0;
+}
- li {
- @extend %first-last-no-margin;
+.header-filter-item {
+ @extend %first-last-no-margin;
- float: left;
- margin-left: 12px;
+ float: left;
+ margin-left: 12px;
+}
+
+.header-filter-link {
+ display: block;
+ font-weight: 600;
+ color: $color-primary-900;
+ padding: 0 10px;
+ border-radius: 3px;
+
+ @include fixed-height(32px, 13px);
+
+ &:hover {
+ text-decoration: none;
+ background-color: $color-neutral-100;
}
+}
- a {
- display: block;
- font-weight: 600;
- color: $color-primary-900;
- padding: 0 10px;
- border-radius: 3px;
-
- @include fixed-height(32px, 13px);
-
- &:hover {
- text-decoration: none;
- background-color: $color-neutral-100;
- }
- }
-
- .header-filter-icon {
- color: $color-primary-500;
- margin-right: 4px;
- font-size: 14px;
- }
+.header-filter-icon {
+ color: $color-primary-500;
+ margin-right: 4px;
+ font-size: 14px;
}
.header-info {
diff --git a/web-frontend/src/scss/components/_layout.scss b/web-frontend/src/scss/components/_layout.scss
index 77b759448..c955f4eaa 100644
--- a/web-frontend/src/scss/components/_layout.scss
+++ b/web-frontend/src/scss/components/_layout.scss
@@ -43,6 +43,7 @@
.layout-col-3-1 {
position: absolute;
+ z-index: $z-index-layout-col-3-1;
left: 0;
top: 0;
right: 0;
@@ -51,6 +52,7 @@
.layout-col-3-2 {
position: absolute;
+ z-index: $z-index-layout-col-3-2;
left: 0;
top: 52px;
right: 0;