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 simple context menu

Browse source
This commit is contained in:
Bram Wiepjes 2019-03-27 20:00:31 +01:00
parent 1bbc35b8fd
commit 0be9a2956f
5 changed files with 77 additions and 4 deletions

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

@ -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>

46
web-frontend/src/scss/components/_context.scss Normal file
View file

@ -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;
}

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

@ -15,7 +15,7 @@
&:hover {
text-decoration: none;
color:$color-neutral-500;
color: $color-neutral-500;
}
}

1
web-frontend/src/scss/components/_modal.scss
View file

@ -22,6 +22,7 @@
.modal-close {
@include absolute(20px, 20px, auto, auto);
font-size: 20px;
color: $color-neutral-400;

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

@ -19,6 +19,7 @@
@import "components/header";
@import "components/scrollbar";
@import "components/modal";
@import "components/context";
@import "components/fields/boolean";
@import "components/fields/number";