Skip to content

Commit 1640a46

Browse files
pavel-blagodovpavel-blagodov
committed
added mn-dropdown widget
Change-Id: I0c425b7e639cb141f31ad9dbd396c2b9fe462583 Reviewed-on: http://review.couchbase.org/106369 Reviewed-by: Pavel Blagodov <[email protected]> Tested-by: Pavel Blagodov <[email protected]>
1 parent 28b23b5 commit 1640a46

16 files changed

+650
-200
lines changed

‎priv/public/ui/app/components/directives/mn_dropdown.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<div class="mn-dropdown">
2+
<div ng-class="[{active: showMenu}, iconClass || 'select']"
3+
ng-if="isSlotFilled('select')"
4+
ng-transclude="select"
5+
ng-click="toggleMenu($event)"></div>
6+
<div class="menu" ng-if="showMenu">
7+
<div class="header" ng-transclude="header" ng-if="isSlotFilled('header')"></div>
8+
<div class="body" ng-transclude="body"></div>
9+
<div class="footer" ng-transclude="footer" ng-if="isSlotFilled('footer')"></div>
10+
</div>
11+
</div>

‎priv/public/ui/app/components/directives/mn_dropdown.js‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
(function () {
2+
"use strict";
3+
4+
angular
5+
.module('mnDropdown', [])
6+
.directive('mnDropdown', mnDropdownDirective)
7+
.directive('mnDropdownItem', mnDropdownItemDirective)
8+
9+
function mnDropdownItemDirective() {
10+
var mnDropdownItem ={
11+
require: '^^mnDropdown',
12+
restrict: 'E',
13+
scope: {
14+
mnItem: '='
15+
},
16+
link: link
17+
};
18+
19+
return mnDropdownItem;
20+
21+
function link(scope, element, attrs, mnDropdownCtl) {
22+
element.on("mousedown", onMousedown);
23+
element.on("click", onItemClick);
24+
element.on("mouseup", onMouseup);
25+
26+
scope.$on("$destroy", function () {
27+
element.off("mousedown", onMousedown);
28+
element.off("mouseup", onMouseup);
29+
element.off("click", onItemClick);
30+
});
31+
32+
function onItemClick() {
33+
mnDropdownCtl.onItemClick(scope.mnItem);
34+
}
35+
36+
function onMousedown() {
37+
element.addClass("mousedowm");
38+
}
39+
40+
function onMouseup() {
41+
element.removeClass("mousedowm");
42+
}
43+
44+
}
45+
}
46+
function mnDropdownDirective($document) {
47+
var mnDropdown = {
48+
restrict: 'E',
49+
scope: {
50+
model: "=?",
51+
onClose: "&?",
52+
onSelect: "&?",
53+
iconClass: "@?"
54+
},
55+
transclude: {
56+
'select': '?innerSelect',
57+
'header': '?innerHeader',
58+
'body': 'innerBody',
59+
'footer': '?innerFooter'
60+
},
61+
templateUrl: "app/components/directives/mn_dropdown.html",
62+
controller: controller
63+
};
64+
65+
return mnDropdown;
66+
67+
function controller($scope, $transclude, $timeout) {
68+
$scope.toggleMenu = toggleMenu;
69+
$scope.isSlotFilled = $transclude.isSlotFilled;
70+
this.onItemClick = onItemClick;
71+
72+
$scope.$on("$destroy", function () {
73+
$document.off('click', toggleMenu);
74+
});
75+
76+
function closeMenu() {
77+
$scope.showMenu = false;
78+
$scope.onClose && $scope.onClose($scope.model && $scope.model.selected);
79+
}
80+
81+
function openMenu() {
82+
$scope.showMenu = true;
83+
}
84+
85+
function onItemClick(item) {
86+
$timeout(function () {
87+
$scope.model && ($scope.model.selected = item);
88+
$scope.onSelect && $scope.onSelect({scenario: item});
89+
toggleMenu();
90+
});
91+
}
92+
93+
function documentClick() {
94+
$timeout(toggleMenu);
95+
}
96+
97+
function toggleMenu($event) {
98+
$event && $event.stopPropagation && $event.stopPropagation();
99+
($scope.showMenu ? closeMenu : openMenu)();
100+
outsideClick();
101+
}
102+
103+
function outsideClick() {
104+
$document[$scope.showMenu ? "on" : "off"]('click', documentClick);
105+
}
106+
}
107+
}
108+
})();

‎priv/public/ui/app/components/mn_helper.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,8 @@
1919
reloadApp: reloadApp,
2020
reloadState: reloadState,
2121
listToCheckboxes: listToCheckboxes,
22-
getEndings: getEndings
22+
getEndings: getEndings,
23+
generateID: generateID
2324
};
2425

2526
return mnHelper;
@@ -65,6 +66,9 @@
6566
function reloadApp() {
6667
$window.location.reload();
6768
}
69+
function generateID() {
70+
return Math.random().toString(36).substr(2, 9);
71+
}
6872
function reloadState(state) {
6973
if (!state) {
7074
mnPendingQueryKeeper.cancelAllQueries();

‎priv/public/ui/app/css/cbui-components.css‎

Lines changed: 201 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1695,7 +1695,7 @@ input[type="checkbox"].fake-select + label:before {
16951695
font-size: .875rem;
16961696
padding: 1rem 2rem;
16971697
border-radius: 9px;
1698-
margin: .5rem;
1698+
margin: .5rem 0;
16991699
text-align: center;
17001700
}
17011701
.zero-content.text-left {
@@ -2382,6 +2382,19 @@ nav.nav-sidebar-hidden {
23822382
background-color: #f5f5f5;
23832383
cursor: pointer;
23842384
}
2385+
.chart-overlay .dialog {
2386+
width: 100%;
2387+
margin: 0 2rem;
2388+
}
2389+
.chart-overlay .panel-header {
2390+
display: none;
2391+
}
2392+
.chart-overlay .chart-controls {
2393+
display: none;
2394+
}
2395+
.chart-overlay .statistics-large:hover {
2396+
background-color: #fff;
2397+
}
23852398
.row.charts {
23862399
flex-wrap: wrap;
23872400
margin-left: -.5rem;
@@ -2415,6 +2428,7 @@ nav.nav-sidebar-hidden {
24152428
.chart-controls .icon:last-child {
24162429
margin-right: 0;
24172430
}
2431+
24182432
.chart-adder {
24192433
background-color: #f5f5f5;
24202434
border-radius: 5px;
@@ -2438,29 +2452,205 @@ nav.nav-sidebar-hidden {
24382452

24392453
/* over-writes of nvd3 css -------------------------------------------------- */
24402454
.nvd3 .nv-axis line {
2441-
opacity: 0;
2455+
opacity: 0!important;
24422456
}
24432457
.nvd3 .nv-axis.nv-y1 line,
24442458
.nvd3 .nv-axis.nv-x line {
2445-
opacity: 1;
2459+
opacity: 1!important;
24462460
}
24472461
.nvd3 text {
2448-
font: normal 10px OpenSans;
2462+
font: normal 10px OpenSans!important;
24492463
}
24502464
.tick line {
2451-
display:none;
2465+
display:none!important;
24522466
}
24532467
.domain {
2454-
opacity: .2;
2468+
opacity: .2!important;
24552469
}
24562470
.nv-axisMaxMin-y text,
24572471
.nv-axisMin-y text {
24582472
font-weight: 400!important;
24592473
}
2460-
.full-size-dialog .dialog {
2461-
width:100%;
2462-
margin: 2rem
2474+
2475+
/* cbui custom dropdown menu ------------------------------------------------*/
2476+
mn-dropdown {
2477+
display: block;
2478+
position: relative;
2479+
z-index: 100;
24632480
}
2464-
.full-size-dialog .panel-header {
2465-
display: none
2481+
mn-dropdown inner-header,
2482+
mn-dropdown inner-body,
2483+
mn-dropdown inner-footer,
2484+
mn-dropdown mn-dropdown-item {
2485+
display: block;
2486+
}
2487+
mn-dropdown .select {
2488+
border: 1px solid #d1d1d1;
2489+
border-radius: 4px;
2490+
position: relative;
2491+
cursor: pointer;
2492+
display: flex;
2493+
align-items: center;
2494+
justify-content: space-between;
2495+
padding: 0 1rem 0 .5rem;
2496+
height: 32px;
2497+
min-width: 248px;
2498+
font-size: .875rem;
2499+
}
2500+
mn-dropdown .select:after {
2501+
font-family: FontAwesome;
2502+
content: "\f0d7";
2503+
color: #555;
2504+
position: relative;
2505+
right: -.5rem;
2506+
}
2507+
mn-dropdown .select.active:after {
2508+
content: "\f0d8";
2509+
}
2510+
mn-dropdown .menu {
2511+
position: absolute;
2512+
top: 31px;
2513+
width: 248px;
2514+
border: 1px solid #d1d1d1;
2515+
background-color: #fff;
2516+
box-shadow: 0 4px 7px 0 rgba(0,0,0,0.25);
2517+
overflow-y: hidden;
2518+
}
2519+
mn-dropdown .footer {
2520+
padding: 1rem;
2521+
box-shadow: 0 -2px 6px -2px rgba(0,0,0,0.18);
2522+
position: relative;
2523+
}
2524+
mn-dropdown-item {
2525+
background-color: white;
2526+
padding: .5rem 1rem;
2527+
cursor: pointer;
2528+
position: relative;
2529+
font-size: .875rem;
2530+
display: block;
2531+
border-bottom: 1px solid #d1d1d1;
2532+
line-height: 1.3;
2533+
}
2534+
mn-dropdown-item:hover {
2535+
background-color: #f6fafd;
2536+
}
2537+
2538+
/* styles specific to the .scenario-dropdown menu --------------------------- */
2539+
.scenario-dropdown inner-body {
2540+
overflow-y: auto;
2541+
max-height: calc(100vh - 200px);
2542+
}
2543+
/* magic number max-height shortens main menu when the add footer is expanded;
2544+
TO-DO: EDIT controls are shorter than ADD and still make menu jump ----- */
2545+
.scenario-dropdown inner-body.body-shorter {
2546+
max-height: calc(100vh - 344px);
2547+
}
2548+
.scenario-dropdown mn-dropdown-item {
2549+
background-color: white;
2550+
padding: .5rem 1rem;
2551+
cursor: pointer;
2552+
position: relative;
2553+
font-size: .875rem;
2554+
display: block;
2555+
border-width: 0;
2556+
line-height: 1;
2557+
}
2558+
.scenario-dropdown mn-dropdown-item:last-child {
2559+
margin-bottom: .5rem;
2560+
}
2561+
.scenario-dropdown mn-dropdown-item:hover {
2562+
background-color: #f6fafd;
2563+
}
2564+
.scenario-dropdown mn-dropdown-item p:nth-child(1) {
2565+
font-size: .875rem;
2566+
font-weight: 600;
2567+
color: #000;
2568+
margin: 0 0 .125rem 0;
2569+
line-height: 1.2;
2570+
}
2571+
.scenario-dropdown mn-dropdown-item p:nth-child(2) {
2572+
font-size: .688rem;
2573+
font-weight: 400;
2574+
color: #333;
2575+
margin: 0;
2576+
}
2577+
.scenario-controls {
2578+
display: none;
2579+
margin: 0 0 0 1rem;
2580+
white-space: nowrap;
2581+
text-align: right;
2582+
position: absolute;
2583+
right: .25rem;
2584+
top: .3rem;
2585+
background-color: rgba(246,250,253, 0.9);
2586+
padding: .25rem .5rem;
2587+
}
2588+
mn-dropdown-item:hover .scenario-controls {
2589+
display: block;
2590+
}
2591+
.scenario-controls .icon {
2592+
color: #999;
2593+
padding: 0 .25rem;
2594+
cursor: pointer;
2595+
}
2596+
.scenario-controls .icon:hover {
2597+
color: #000;
2598+
}
2599+
.scenario-controls .icon:last-child {
2600+
margin-right: 0;
2601+
}
2602+
.scenario-add {
2603+
position: relative;
2604+
margin: -.5rem 0;
2605+
}
2606+
.scenario-add input[type=text] {
2607+
border: 1px solid #d1d1d1;
2608+
border-radius: 2px;
2609+
position: relative;
2610+
width: 100%;
2611+
height: 32px;
2612+
font-size: .8125rem;
2613+
color: #333;
2614+
margin: 0;
2615+
}
2616+
.scenario-add-ext {
2617+
margin: 0;
2618+
}
2619+
.scenario-add .icon {
2620+
font-size: 1.5rem;
2621+
color: #ececec;
2622+
position: absolute;
2623+
right: .5rem;
2624+
top: .25rem;
2625+
pointer-events: none;
2626+
}
2627+
.scenario-add:hover .icon {
2628+
font-size: 1.5rem;
2629+
color: #999;
2630+
}
2631+
input[type=text].scenario-desc {
2632+
border: 1px solid #d1d1d1;
2633+
border-radius: 2px;
2634+
position: relative;
2635+
width: 100%;
2636+
height: 32px;
2637+
font-size: .8125rem;
2638+
color: #333;
2639+
margin: .5rem 0;
2640+
}
2641+
.scenario-dropdown .footer label {
2642+
font-size: .8125rem;
2643+
color: #333;
2644+
}
2645+
.scenario-save-controls {
2646+
width: 100%;
2647+
display: flex;
2648+
align-items: center;
2649+
justify-content: space-between;
2650+
position: relative;
2651+
background-color: #fff;
2652+
margin-bottom: -.5rem;
2653+
}
2654+
.scenario-save-controls a {
2655+
font-size: .875rem;
24662656
}

0 commit comments

Comments
 (0)