Skip to content

Commit 8109f3c

Browse files
betorobsonbetorobson
authored
rr/side-menu (#4)
* rr/main-controller (pull request #2) rr/main-controller * fix gulp indexHTML task * removing unecessary elements * main-controller base Approved-by: Roberto Robson Soares Nogueira <[email protected]> * Merged in rr/navigation-bar (pull request #3) rr/navigation-bar * navigation-bar directive * add navigation-bar app.js dependency. set tiny md override md-button-icon Approved-by: Roberto Robson Soares Nogueira <[email protected]> * rr/side-menu (pull request #4) rr/side-menu Approved-by: Roberto Robson Soares Nogueira <[email protected]>
1 parent c4134fa commit 8109f3c

17 files changed

+353
-29
lines changed

‎assets/icons/arrow-left.svg

+4
Loading

‎assets/icons/contact.svg

+5
Loading

‎assets/icons/home.svg

+4
Loading

‎assets/icons/location.svg

+4
Loading

‎assets/imgs/maps-and-flags.svg

+43
Loading

‎gulp-tasks/assets.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
module.exports = function(gulp, modules){
22

33
var globMatchFiles = [
4-
'assets/**/'
4+
'assets/**/*'
55
];
66

77
gulp.task('assetsClean', function(){

‎src/app.js

+11-2
Original file line numberDiff line numberDiff line change
@@ -19,11 +19,20 @@
1919

2020
// directives
2121
'directives.mainController',
22-
'directives.navigation-bar'
22+
'directives.navigation-bar',
23+
'directives.side-menu'
2324

2425
// views
2526
// 'views.home'
2627

27-
]);
28+
])
29+
30+
.config(function($mdThemingProvider){
31+
$mdThemingProvider.theme('default')
32+
.primaryPalette('teal')
33+
.accentPalette('orange');
34+
})
35+
36+
;
2837

2938
})();

‎src/directives/main-controller/main-controller.html

+4-1
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,17 @@
33

44
<div layout="row" flex>
55

6+
<side-menu></side-menu>
7+
68
<md-content
79
layout="column"
810
md-scroll-y
911
flex
1012
ng-class="{
11-
'not-scrollable' : $mdSidenav('sidemenu').isOpen()
13+
'not-scrollable' : $mdSidenav('side-menu').isOpen()
1214
}"
1315
>
16+
md-content
1417
</md-content>
1518

1619
</div>

‎src/directives/main-controller/main-controller.js

+13-1
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@
1212
$scope,
1313
$location,
1414
$element,
15+
$timeout,
16+
$mdMedia,
1517
path
1618
){
1719

@@ -37,13 +39,23 @@
3739

3840
};
3941

42+
var setDeviceAttr = function(){
43+
angular.element($element).attr(
44+
'device',
45+
$scope.mainController.device
46+
);
47+
};
48+
4049
// hold all main controller communication
4150
$scope.mainController = {
4251
go: go,
4352
currentView: null,
44-
setViewAttribute: setViewAttribute
53+
setViewAttribute: setViewAttribute,
54+
device: $mdMedia('gt-sm') ? 'desktop' : 'mobile'
4555
};
4656

57+
$timeout(setDeviceAttr, 0);
58+
4759
}
4860
)
4961

‎src/directives/navigation-bar/navigation-bar.html

+3-13
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
1+
12
<md-toolbar>
23
<div class="md-toolbar-tools">
34

45
<md-button
5-
ng-click="toggleSideMenu($event)"
6+
ng-click="toggleSideMenu()"
67
aria-label="Menu"
78
md-ripple-size="auto"
89
class="md-icon-button"
9-
xhide-gt-md
10+
hide-gt-md
1011
>
1112
<md-icon md-svg-icon="assets/icons/menu.svg"></md-icon>
1213
</md-button>
@@ -17,14 +18,3 @@ <h2 flex class="md-toolbar-tools">
1718

1819
</div>
1920
</md-toolbar>
20-
21-
<md-button
22-
ng-show="navigationBarService.fabButton"
23-
ng-click="navigationBarService.fabButton.func($event)"
24-
class="md-fab md-fab-bottom-right color2"
25-
aria-label="Adicionar">
26-
<md-icon
27-
class="{{navigationBarService.fabButton.icon}}"
28-
aria-hidden="true">
29-
</md-icon>
30-
</md-button>

‎src/directives/navigation-bar/navigation-bar.js

+7-3
Original file line numberDiff line numberDiff line change
@@ -4,21 +4,25 @@
44
(function(){
55

66
angular.module('directives.navigation-bar',[
7-
'factories.navigation-bar'
7+
'factories.navigation-bar',
8+
'factories.side-menu'
89
])
910

1011
.controller('NavigationBarCtrl',
1112

1213
function(
1314
$scope,
14-
navigationBarFactory
15+
navigationBarFactory,
16+
sideMenuFactory
1517
){
1618

19+
sideMenuFactory;
20+
1721
$scope.navigationBarTitle = navigationBarFactory.getTitle;
1822

1923
$scope.toggleSideMenu = function(){
2024

21-
console.log('toggleSideMenu');
25+
sideMenuFactory.toggle();
2226

2327
};
2428

‎src/directives/side-menu/side-menu-factory.js

+85
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
2+
'use strict';
3+
4+
(function(){
5+
6+
angular.module('factories.side-menu', [])
7+
8+
.factory('sideMenuFactory', function(
9+
$mdSidenav,
10+
$timeout,
11+
path
12+
){
13+
14+
var scope = null;
15+
var componentId = 'side-menu';
16+
17+
var paths = path.getPaths();
18+
var sideMenuItems = [];
19+
20+
var getSideMenuItems = function(){
21+
return sideMenuItems;
22+
};
23+
24+
var setSideMenuItems = function(){
25+
Object.keys(paths).map(function(key){
26+
if(paths[key].sideMenu){
27+
sideMenuItems.push(paths[key]);
28+
}
29+
});
30+
};
31+
32+
/**
33+
* Supplies a function that will continue to operate until the
34+
* time is up.
35+
*/
36+
var debounce = function(func, wait){
37+
var timer;
38+
return function debounced() {
39+
var context = scope,
40+
args = Array.prototype.slice.call(arguments);
41+
$timeout.cancel(timer);
42+
timer = $timeout(function() {
43+
timer = undefined;
44+
func.apply(context, args);
45+
}, wait || 10);
46+
};
47+
};
48+
49+
/**
50+
* Build handler to open/close a SideNav; when animation finishes
51+
* report completion in console
52+
*/
53+
var buildDelayedToggler = function(navID){
54+
return debounce(function(){
55+
$mdSidenav(navID)
56+
.toggle()
57+
.then(function () {
58+
console.log('toggle ' + navID + ' is done');
59+
});
60+
}, 200);
61+
};
62+
63+
var toggle = buildDelayedToggler(componentId);
64+
65+
var getId = function(){
66+
return componentId;
67+
};
68+
69+
var setScope = function(sideMenuScope){
70+
scope = sideMenuScope;
71+
};
72+
73+
var factory = {
74+
setScope: setScope,
75+
toggle: toggle,
76+
getId: getId,
77+
getSideMenuItems: getSideMenuItems
78+
};
79+
80+
setSideMenuItems();
81+
82+
return factory;
83+
});
84+
85+
})();

‎src/directives/side-menu/side-menu.html

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
2+
<md-sidenav
3+
side-menu
4+
md-component-id="{{componentId}}"
5+
md-is-locked-open="$mdMedia('gt-md')"
6+
class="md-sidenav-left"
7+
md-whiteframe="4"
8+
layout="column"
9+
>
10+
11+
<md-content flex layout="column">
12+
13+
<md-button
14+
hide-gt-md
15+
class="close-side-menu md-icon-button"
16+
aria-label="Close side menu"
17+
ng-click="closeSideMenu()"
18+
>
19+
<md-icon md-svg-icon="/assets/icons/arrow-left.svg"></md-icon>
20+
</md-button>
21+
22+
<img
23+
class="logo"
24+
src="/assets/imgs/maps-and-flags.svg"
25+
/>
26+
27+
<h1 class="md-headline">
28+
UI Challenge
29+
</h1>
30+
31+
<md-list
32+
flex="noshrink"
33+
>
34+
35+
<md-list-item
36+
ng-repeat="item in sideMenuItens"
37+
md-colors="isSideMenuItemActive(item)"
38+
ng-click="mainController.go(item.path)"
39+
class="active md-no-focus"
40+
>
41+
<md-icon
42+
md-menu-align-target
43+
md-svg-src="/assets/icons/{{item.icon}}"
44+
></md-icon>
45+
<p flex>{{item.label}}</p>
46+
</md-list-item>
47+
48+
</md-list>
49+
50+
</md-content>
51+
52+
</md-sidenav>

0 commit comments

Comments
 (0)