Skip to content

Commit f968309

Browse files
bram2wbram2w
committedApr 12, 2019
created context form and dropdown component
·
use-perm-for-roles0.0.1
1 parent 257b4a2 commit f968309

File tree

6 files changed

+126
-10
lines changed

6 files changed

+126
-10
lines changed
 

‎web-frontend/public/grid.html

+60-7
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@
8787
</a>
8888
</li>
8989
<li class="menu-item">
90-
<a href="#" class="menu-link user-item">
90+
<a href="#" class="menu-link menu-user-item">
9191
B
9292
<span class="menu-link-text">Full Name</span>
9393
</a>
@@ -241,15 +241,15 @@
241241
<i class="header-filter-icon fas fa-th"></i>
242242
Grid view name
243243
</a>
244-
<div class="select">
244+
<div class="select hidden">
245245
<div class="select-search">
246246
<i class="select-search-icon fas fa-search"></i>
247247
<input type="text" class="select-search-input" placeholder="Search views" />
248248
</div>
249249
<ul class="select-items">
250250
<li class="select-item">
251251
<a href="#" class="select-item-link">
252-
<i class="fas fa-th fa-fw color-primary"></i>
252+
<i class="select-item-icon fas fa-th fa-fw color-primary"></i>
253253
Grid view name
254254
</a>
255255
<a href="#" class="select-item-options" data-context=".context">
@@ -274,7 +274,7 @@
274274
</li>
275275
<li class="select-item">
276276
<a href="#" class="select-item-link">
277-
<i class="fas fa-th fa-fw color-primary"></i>
277+
<i class="select-item-icon fas fa-th fa-fw color-primary"></i>
278278
Grid view option 2.
279279
</a>
280280
<a href="#" class="select-item-options">
@@ -283,7 +283,7 @@
283283
</li>
284284
<li class="select-item">
285285
<a href="#" class="select-item-link">
286-
<i class="fas fa-th fa-fw color-primary"></i>
286+
<i class="select-item-icon fas fa-th fa-fw color-primary"></i>
287287
Grid view 2
288288
</a>
289289
<a href="#" class="select-item-options">
@@ -292,7 +292,7 @@
292292
</li>
293293
<li class="select-item">
294294
<a href="#" class="select-item-link">
295-
<i class="fas fa-th fa-fw color-primary"></i>
295+
<i class="select-item-icon fas fa-th fa-fw color-primary"></i>
296296
Grid view 3
297297
</a>
298298
<a href="#" class="select-item-options">
@@ -393,9 +393,58 @@
393393
<i class="fas fa-hashtag"></i>
394394
</div>
395395
<div class="grid-view-description-name">Price</div>
396-
<a href="#" class="grid-view-description-options">
396+
<a href="#" class="grid-view-description-options" data-context=".context">
397397
<i class="fas fa-caret-down"></i>
398398
</a>
399+
<div class="context hidden">
400+
<div class="context-form">
401+
<div class="control">
402+
<div class="control-elements">
403+
<input type="text" class="input" placeholder="Name" value="Price" />
404+
</div>
405+
</div>
406+
<div class="control">
407+
<div class="control-elements">
408+
<div class="dropdown">
409+
<a href="#" class="dropdown-selected" data-context=".dropdown-items">
410+
<i class="dropdown-selected-icon fas fa-hashtag"></i>
411+
Number
412+
<i class="dropdown-toggle-icon fas fa-caret-down"></i>
413+
</a>
414+
<div class="dropdown-items hidden">
415+
<div class="select-search">
416+
<i class="select-search-icon fas fa-search"></i>
417+
<input type="text" class="select-search-input" placeholder="Search field types" />
418+
</div>
419+
<ul class="select-items">
420+
<li class="select-item">
421+
<a href="#" class="select-item-link">
422+
<i class="select-item-icon fas fa-font fa-fw"></i>
423+
Text
424+
</a>
425+
</li>
426+
<li class="select-item active">
427+
<a href="#" class="select-item-link">
428+
<i class="select-item-icon fas fa-hashtag fa-fw"></i>
429+
Number
430+
</a>
431+
</li>
432+
<li class="select-item">
433+
<a href="#" class="select-item-link">
434+
<i class="select-item-icon fas fa-check-square fa-fw"></i>
435+
Checkbox
436+
</a>
437+
</li>
438+
</ul>
439+
</div>
440+
</div>
441+
</div>
442+
</div>
443+
<div class="context-form-actions">
444+
<a href="#" class="button">Change</a>
445+
</div>
446+
</div>
447+
</div>
399448
<a href="#" class="grid-view-description-width"></a>
400449
</div>
401450
</div>
@@ -655,6 +704,10 @@ <h2 class="box-title">Orange Penquin</h2>
655704
$("[data-toggle-layout-collapse]").click(function() {
656705
$(".layout").toggleClass("layout-collapsed");
657706
});
707+
708+
$(".dropdown-items .select-item-link").click(function(e) {
709+
$(this).closest(".dropdown-items").addClass("hidden");
710+
})
658711
})();
659712
</script>
660713
</body>

‎web-frontend/src/scss/components/_context.scss

+12
Original file line numberDiff line numberDiff line change
@@ -46,3 +46,15 @@
4646
margin-right: 4px;
4747
text-align: left;
4848
}
49+
50+
.context-form {
51+
min-width: 260px;
52+
padding: 16px;
53+
}
54+
55+
.context-form-actions {
56+
border-top: 1px solid $color-neutral-200;
57+
padding-top: 20px;
58+
margin-top: 20px;
59+
text-align: right;
60+
}

‎web-frontend/src/scss/components/_dropdown.scss

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
.dropdown {
2+
position: relative;
3+
}
4+
5+
.dropdown-selected {
6+
@extend %ellipsis;
7+
8+
position: relative;
9+
display: block;
10+
width: 100%;
11+
border: 1px solid $color-neutral-400;
12+
border-radius: 3px;
13+
padding: 0 40px 0 12px;
14+
color: $color-primary-900;
15+
16+
@include fixed-height(32px, 13px);
17+
18+
&:hover {
19+
text-decoration: none;
20+
border-color: $color-neutral-600;
21+
}
22+
}
23+
24+
.dropdown-selected-icon {
25+
margin-right: 4px;
26+
color: $color-neutral-600;
27+
}
28+
29+
.dropdown-toggle-icon {
30+
@include absolute(0, 0, 0, auto);
31+
@include center-text(32px, 14px);
32+
}
33+
34+
.dropdown-items {
35+
border: 1px solid $color-primary-500;
36+
border-radius: 3px;
37+
background-color: $white;
38+
box-shadow: 0 2px 6px 0 rgba($black, 0.16);
39+
40+
@include absolute(0, 0, auto, 0);
41+
42+
.select-item.active:hover::after {
43+
display: block;
44+
}
45+
}

‎web-frontend/src/scss/components/_menu.scss

+2-1
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727

2828
&:hover {
2929
background-color: rgba(0, 0, 0, 0.1);
30+
text-decoration: none;
3031
}
3132

3233
&.active {
@@ -53,7 +54,7 @@
5354
}
5455
}
5556

56-
.user-item {
57+
.menu-user-item {
5758
border-radius: 100%;
5859
background-color: $color-primary-500;
5960
color: $white;

‎web-frontend/src/scss/components/_select.scss

+6-2
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,8 @@
3434
max-height: (4 * 36px) + 20px; // we show max 8 items
3535
overflow: auto;
3636

37-
&:before,
38-
&:after {
37+
&::before,
38+
&::after {
3939
content: "";
4040
display: block;
4141
height: 10px;
@@ -96,6 +96,10 @@
9696
}
9797
}
9898

99+
.select-item-icon {
100+
margin-right: 6px;
101+
}
102+
99103
.select-item-options {
100104
@extend %select-item-size;
101105

‎web-frontend/src/scss/default.scss

+1
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
@import "components/modal";
2222
@import "components/context";
2323
@import "components/select";
24+
@import "components/dropdown";
2425

2526
@import "components/fields/boolean";
2627
@import "components/fields/number";

0 commit comments

Comments
 (0)
Please sign in to comment.