archive/bramw_baserow
1
0
Fork 0
mirror of https://gitlab.com/bramw/baserow.git synced 2025-04-10 07:37:30 +00:00
Code Issues Projects Releases Wiki Activity

created context form and dropdown component

Browse source
This commit is contained in:
Bram Wiepjes 2019-04-12 13:50:03 +02:00
parent 257b4a2f67
commit f968309d54
6 changed files with 126 additions and 10 deletions

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

@ -87,7 +87,7 @@
</a> </a>
</li> </li>
<li class="menu-item"> <li class="menu-item">
<a href="#" class="menu-link user-item"> <a href="#" class="menu-link menu-user-item">
B B
<span class="menu-link-text">Full Name</span> <span class="menu-link-text">Full Name</span>
</a> </a>
@ -241,7 +241,7 @@
<i class="header-filter-icon fas fa-th"></i> <i class="header-filter-icon fas fa-th"></i>
Grid view name Grid view name
</a> </a>
<div class="select"> <div class="select hidden">
<div class="select-search"> <div class="select-search">
<i class="select-search-icon fas fa-search"></i> <i class="select-search-icon fas fa-search"></i>
<input type="text" class="select-search-input" placeholder="Search views" /> <input type="text" class="select-search-input" placeholder="Search views" />
@ -249,7 +249,7 @@
<ul class="select-items"> <ul class="select-items">
<li class="select-item"> <li class="select-item">
<a href="#" class="select-item-link"> <a href="#" class="select-item-link">
<i class="fas fa-th fa-fw color-primary"></i> <i class="select-item-icon fas fa-th fa-fw color-primary"></i>
Grid view name Grid view name
</a> </a>
<a href="#" class="select-item-options" data-context=".context"> <a href="#" class="select-item-options" data-context=".context">
@ -274,7 +274,7 @@
</li> </li>
<li class="select-item"> <li class="select-item">
<a href="#" class="select-item-link"> <a href="#" class="select-item-link">
<i class="fas fa-th fa-fw color-primary"></i> <i class="select-item-icon fas fa-th fa-fw color-primary"></i>
Grid view option 2. Grid view option 2.
</a> </a>
<a href="#" class="select-item-options"> <a href="#" class="select-item-options">
@ -283,7 +283,7 @@
</li> </li>
<li class="select-item"> <li class="select-item">
<a href="#" class="select-item-link"> <a href="#" class="select-item-link">
<i class="fas fa-th fa-fw color-primary"></i> <i class="select-item-icon fas fa-th fa-fw color-primary"></i>
Grid view 2 Grid view 2
</a> </a>
<a href="#" class="select-item-options"> <a href="#" class="select-item-options">
@ -292,7 +292,7 @@
</li> </li>
<li class="select-item"> <li class="select-item">
<a href="#" class="select-item-link"> <a href="#" class="select-item-link">
<i class="fas fa-th fa-fw color-primary"></i> <i class="select-item-icon fas fa-th fa-fw color-primary"></i>
Grid view 3 Grid view 3
</a> </a>
<a href="#" class="select-item-options"> <a href="#" class="select-item-options">
@ -393,9 +393,58 @@
<i class="fas fa-hashtag"></i> <i class="fas fa-hashtag"></i>
</div> </div>
<div class="grid-view-description-name">Price</div> <div class="grid-view-description-name">Price</div>
<a href="#" class="grid-view-description-options"> <a href="#" class="grid-view-description-options" data-context=".context">
<i class="fas fa-caret-down"></i> <i class="fas fa-caret-down"></i>
</a> </a>
<div class="context hidden">
<div class="context-form">
<div class="control">
<div class="control-elements">
<input type="text" class="input" placeholder="Name" value="Price" />
</div>
</div>
<div class="control">
<div class="control-elements">
<div class="dropdown">
<a href="#" class="dropdown-selected" data-context=".dropdown-items">
<i class="dropdown-selected-icon fas fa-hashtag"></i>
Number
<i class="dropdown-toggle-icon fas fa-caret-down"></i>
</a>
<div class="dropdown-items hidden">
<div class="select-search">
<i class="select-search-icon fas fa-search"></i>
<input type="text" class="select-search-input" placeholder="Search field types" />
</div>
<ul class="select-items">
<li class="select-item">
<a href="#" class="select-item-link">
<i class="select-item-icon fas fa-font fa-fw"></i>
Text
</a>
</li>
<li class="select-item active">
<a href="#" class="select-item-link">
<i class="select-item-icon fas fa-hashtag fa-fw"></i>
Number
</a>
</li>
<li class="select-item">
<a href="#" class="select-item-link">
<i class="select-item-icon fas fa-check-square fa-fw"></i>
Checkbox
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="context-form-actions">
<a href="#" class="button">Change</a>
</div>
</div>
</div>
<a href="#" class="grid-view-description-width"></a> <a href="#" class="grid-view-description-width"></a>
</div> </div>
</div> </div>
@ -655,6 +704,10 @@
$("[data-toggle-layout-collapse]").click(function() { $("[data-toggle-layout-collapse]").click(function() {
$(".layout").toggleClass("layout-collapsed"); $(".layout").toggleClass("layout-collapsed");
}); });
$(".dropdown-items .select-item-link").click(function(e) {
$(this).closest(".dropdown-items").addClass("hidden");
})
})(); })();
</script> </script>
</body> </body>

12
web-frontend/src/scss/components/_context.scss
View file

@ -46,3 +46,15 @@
margin-right: 4px; margin-right: 4px;
text-align: left; text-align: left;
} }
.context-form {
min-width: 260px;
padding: 16px;
}
.context-form-actions {
border-top: 1px solid $color-neutral-200;
padding-top: 20px;
margin-top: 20px;
text-align: right;
}

45
web-frontend/src/scss/components/_dropdown.scss Normal file
View file

@ -0,0 +1,45 @@
.dropdown {
position: relative;
}
.dropdown-selected {
@extend %ellipsis;
position: relative;
display: block;
width: 100%;
border: 1px solid $color-neutral-400;
border-radius: 3px;
padding: 0 40px 0 12px;
color: $color-primary-900;
@include fixed-height(32px, 13px);
&:hover {
text-decoration: none;
border-color: $color-neutral-600;
}
}
.dropdown-selected-icon {
margin-right: 4px;
color: $color-neutral-600;
}
.dropdown-toggle-icon {
@include absolute(0, 0, 0, auto);
@include center-text(32px, 14px);
}
.dropdown-items {
border: 1px solid $color-primary-500;
border-radius: 3px;
background-color: $white;
box-shadow: 0 2px 6px 0 rgba($black, 0.16);
@include absolute(0, 0, auto, 0);
.select-item.active:hover::after {
display: block;
}
}

3
web-frontend/src/scss/components/_menu.scss
View file

@ -27,6 +27,7 @@
&:hover { &:hover {
background-color: rgba(0, 0, 0, 0.1); background-color: rgba(0, 0, 0, 0.1);
text-decoration: none;
} }
&.active { &.active {
@ -53,7 +54,7 @@
} }
} }
.user-item { .menu-user-item {
border-radius: 100%; border-radius: 100%;
background-color: $color-primary-500; background-color: $color-primary-500;
color: $white; color: $white;

8
web-frontend/src/scss/components/_select.scss
View file

@ -34,8 +34,8 @@
max-height: (4 * 36px) + 20px; // we show max 8 items max-height: (4 * 36px) + 20px; // we show max 8 items
overflow: auto; overflow: auto;
&:before, &::before,
&:after { &::after {
content: ""; content: "";
display: block; display: block;
height: 10px; height: 10px;
@ -96,6 +96,10 @@
} }
} }
.select-item-icon {
margin-right: 6px;
}
.select-item-options { .select-item-options {
@extend %select-item-size; @extend %select-item-size;

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

@ -21,6 +21,7 @@
@import "components/modal"; @import "components/modal";
@import "components/context"; @import "components/context";
@import "components/select"; @import "components/select";
@import "components/dropdown";
@import "components/fields/boolean"; @import "components/fields/boolean";
@import "components/fields/number"; @import "components/fields/number";