From 0be9a2956f41b08a4220daa748cdefe4df1aad43 Mon Sep 17 00:00:00 2001
From: Bram Wiepjes <bramw@protonmail.com>
Date: Wed, 27 Mar 2019 20:00:31 +0100
Subject: [PATCH] added simple context menu
---
web-frontend/public/grid.html | 31 +++++++++++--
.../src/scss/components/_context.scss | 46 +++++++++++++++++++
web-frontend/src/scss/components/_form.scss | 2 +-
web-frontend/src/scss/components/_modal.scss | 1 +
web-frontend/src/scss/default.scss | 1 +
5 files changed, 77 insertions(+), 4 deletions(-)
create mode 100644 web-frontend/src/scss/components/_context.scss
diff --git a/web-frontend/public/grid.html b/web-frontend/public/grid.html
index 9c552588c..d9b52488a 100644
--- a/web-frontend/public/grid.html
+++ b/web-frontend/public/grid.html
@@ -48,9 +48,26 @@
<i class="tree-type fas fa-database"></i>
Vehicles
</a>
- <a href="#" class="tree-options">
+ <a href="#" class="tree-options" data-context=".context">
<i class="fas fa-ellipsis-v"></i>
</a>
+ <div class="context hidden">
+ <div class="context-menu-title">Vehicles</div>
+ <ul class="context-menu">
+ <li>
+ <a href="#">
+ <i class="context-menu-icon fas fa-fw fa-pen"></i>
+ Rename database
+ </a>
+ </li>
+ <li>
+ <a href="#">
+ <i class="context-menu-icon fas fa-fw fa-trash"></i>
+ Rename table
+ </a>
+ </li>
+ </ul>
+ </div>
</div>
</li>
<li class="tree-item">
@@ -347,7 +364,7 @@
</div>
</div>
</div>
- <div class="modal-wrapper">
+ <div class="modal-wrapper hidden">
<div class="modal-box">
<a href="#" class="modal-close">
<i class="fas fa-times"></i>
@@ -478,7 +495,7 @@
$this.removeClass("grid-view-row-hover");
});
- $cell = $(".grid-view-cell")
+ $cell = $(".grid-view-cell");
$cell.click(function(e) {
$cell.removeClass("active");
$(this).addClass("active");
@@ -497,6 +514,14 @@
$(".modal-close").click(function() {
$(this).closest(".modal-wrapper").addClass("hidden");
});
+
+ $(".grid-view-row-more").click(function() {
+ $(".modal-wrapper").removeClass("hidden");
+ });
+
+ $("[data-context]").click(function() {
+ $(this).siblings($(this).attr("data-context")).toggleClass("hidden");
+ });
})();
</script>
</body>
diff --git a/web-frontend/src/scss/components/_context.scss b/web-frontend/src/scss/components/_context.scss
new file mode 100644
index 000000000..4a2a97f12
--- /dev/null
+++ b/web-frontend/src/scss/components/_context.scss
@@ -0,0 +1,46 @@
+.context {
+ position: absolute;
+ z-index: 1;
+ white-space: nowrap;
+ background-color: $white;
+ border-radius: 6px;
+ box-shadow: 0 2px 6px 0 rgba($black, 0.16);
+}
+
+.context-menu-title {
+ color: $color-neutral-600;
+ padding: 12px 8px;
+ line-height: 13px;
+}
+
+.context-menu {
+ list-style: none;
+ padding: 0;
+ margin-bottom: 10px;
+
+ li {
+ margin-bottom: 4px;
+ padding: 0 8px;
+ }
+
+ a {
+ display: block;
+ border-radius: 3px;
+ color: $color-primary-900;
+ padding: 0 10px;
+
+ @include fixed-height(32px, 14px);
+
+ &:hover {
+ background-color: $color-neutral-100;
+ text-decoration: none;
+ }
+ }
+}
+
+.context-menu-icon {
+ font-size: 13px;
+ color: $color-neutral-400;
+ margin-right: 4px;
+ text-align: left;
+}
diff --git a/web-frontend/src/scss/components/_form.scss b/web-frontend/src/scss/components/_form.scss
index 6b3588f33..8e9db3bbe 100644
--- a/web-frontend/src/scss/components/_form.scss
+++ b/web-frontend/src/scss/components/_form.scss
@@ -15,7 +15,7 @@
&:hover {
text-decoration: none;
- color:$color-neutral-500;
+ color: $color-neutral-500;
}
}
diff --git a/web-frontend/src/scss/components/_modal.scss b/web-frontend/src/scss/components/_modal.scss
index 2acedb9ea..1dac2a3d1 100644
--- a/web-frontend/src/scss/components/_modal.scss
+++ b/web-frontend/src/scss/components/_modal.scss
@@ -22,6 +22,7 @@
.modal-close {
@include absolute(20px, 20px, auto, auto);
+
font-size: 20px;
color: $color-neutral-400;
diff --git a/web-frontend/src/scss/default.scss b/web-frontend/src/scss/default.scss
index aebe7b1b9..1a1bbe02b 100755
--- a/web-frontend/src/scss/default.scss
+++ b/web-frontend/src/scss/default.scss
@@ -19,6 +19,7 @@
@import "components/header";
@import "components/scrollbar";
@import "components/modal";
+@import "components/context";
@import "components/fields/boolean";
@import "components/fields/number";