Skip to content

Commit 9a3aa5a

Browse files
micrummicrum
committed
rework bottom-sheet, add sharing actions, rework top navbar
- provide google material icons
1 parent 9f62452 commit 9a3aa5a

File tree

12 files changed

+115
-208
lines changed

12 files changed

+115
-208
lines changed

‎src/app/controllers/MainController.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -53,9 +53,8 @@
5353
var vm = this;
5454

5555
vm.actions = [
56-
{ name: 'Share', icon: 'share' },
57-
{ name: 'Download', icon: 'download' },
58-
{ name: 'Settings', icon: 'settings' }
56+
{ name: 'Share', icon: 'share', url: 'https://twitter.com/intent/tweet?text=Angular%20Material%20Dashboard%20https://github.com/flatlogic/angular-material-dashboard%20via%20@flatlogicinc' },
57+
{ name: 'Star', icon: 'star', url: 'https://github.com/flatlogic/angular-material-dashboard/stargazers' }
5958
];
6059

6160
vm.performAction = function(action) {

‎src/app/index.js‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -80,8 +80,5 @@ angular.module('angularMaterialAdmin', ['ngAnimate', 'ngCookies', 'ngTouch',
8080
'A700': '#E75753'
8181
});
8282

83-
$mdIconProvider
84-
.defaultIconSet('assets/images/icons.svg', 128)
85-
.icon('menu', 'assets/images/menu.svg', 24)
86-
.icon('user', 'assets/images/user.svg', 64);
83+
$mdIconProvider.icon('user', 'assets/images/user.svg', 64);
8784
});

‎src/app/stylesheets/_custom.scss‎

Lines changed: 53 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -22,13 +22,56 @@ $accent-color: #E75753;
2222
}
2323

2424

25+
// VARIABLES
26+
$left-sidenav-width: 110px;
27+
28+
29+
// DASHBOARD
2530
.todolist-content {
2631
height: 350px;
2732
}
2833

34+
.messages {
35+
position: relative;
2936

30-
// VARIABLES
31-
$left-sidenav-width: 110px;
37+
&-content {
38+
height: 80vh;
39+
}
40+
}
41+
42+
43+
// LAYOUT
44+
body {
45+
color: $text-color;
46+
}
47+
48+
.toolbar-button {
49+
min-width: 20px;
50+
}
51+
52+
.img-circle {
53+
height: 50px;
54+
border-radius: 50%;
55+
margin: 0 10px;
56+
}
57+
58+
.notifications-label {
59+
width: 16px;
60+
height: 16px;
61+
line-height: 16px;
62+
text-align: center;
63+
border-radius: 50%;
64+
position: absolute;
65+
font-size: 12px;
66+
top: 2px;
67+
right: 2px;
68+
background-color: $accent-color;
69+
}
70+
71+
.share-label {
72+
vert-align: middle;
73+
margin-left: 10px;
74+
}
3275

3376

3477
// PANEL-WIDGET
@@ -46,16 +89,6 @@ $left-sidenav-width: 110px;
4689
}
4790

4891

49-
// DASHBOARD MESSAGES
50-
.messages {
51-
position: relative;
52-
53-
&-content {
54-
height: 80vh;
55-
}
56-
}
57-
58-
5992
// ANGULAR MATERIAL OVERRIDES
6093
md-radio-group {
6194
border: none;
@@ -72,11 +105,16 @@ md-sidenav.md-locked-open.md-sidenav-left {
72105
}
73106

74107

75-
// LAYOUT
76-
body {
77-
color: $text-color;
108+
// LIBS OVERRIDES
109+
.material-icons {
110+
vertical-align: middle;
78111
}
79112

113+
.material-icons.md-18 { font-size: 18px; }
114+
.material-icons.md-24 { font-size: 24px; }
115+
.material-icons.md-36 { font-size: 36px; }
116+
.material-icons.md-48 { font-size: 48px; }
117+
80118

81119
// CHARTS
82120
.donut-chart-title{

‎src/app/views/dashboard.html‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!-- TODO: use heading classes after update material to 0.9.0 -->
1+
<!-- TODO: use heading classes -->
22
<!-- TODO: add tile directive -->
33
<md-grid-list layout-margin flex md-cols="1" md-cols-gt-md="3" md-row-height="2:1" md-gutter="12px">
44
<md-grid-tile class="md-whiteframe-z1 blue">
@@ -7,7 +7,6 @@ <h2>Over 9000</h2>
77
</div>
88
<md-grid-tile-footer>
99
<div class="md-tile-content" layout="row">
10-
<md-icon md-svg-icon="www"></md-icon>
1110
<h2 layout-padding>Site visitors</h2>
1211
</div>
1312
</md-grid-tile-footer>
@@ -19,7 +18,6 @@ <h2>12</h2>
1918
</div>
2019
<md-grid-tile-footer>
2120
<div class="md-tile-content" layout="row">
22-
<md-icon md-svg-icon="notifications"></md-icon>
2321
<h2 layout-padding>Warnings</h2>
2422
</div>
2523
</md-grid-tile-footer>
@@ -31,7 +29,6 @@ <h2>42%</h2>
3129
</div>
3230
<md-grid-tile-footer>
3331
<div class="md-tile-content" layout="row">
34-
<md-icon md-svg-icon="memory"></md-icon>
3532
<h2 layout-padding>Memory load</h2>
3633
</div>
3734
</md-grid-tile-footer>

‎src/app/views/main.html‎

Lines changed: 47 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ <h1>AMD</h1>
1010
flex class="capitalize" ng-click="vm.selectItem(item)"
1111
ui-sref-active="md-accent" ui-sref="{{item.sref}}">
1212
<div hide-sm hide-md class="md-tile-content">
13-
<md-icon md-svg-icon="{{item.icon}}"></md-icon>
13+
<i class="material-icons md-36">{{item.icon}}</i>
1414
</div>
1515
<div class="md-tile-content">
1616
{{item.name}}
@@ -25,37 +25,56 @@ <h1>AMD</h1>
2525
</md-sidenav>
2626

2727
<div layout="column" flex>
28-
<md-toolbar layout="row">
29-
<md-button hide-gt-sm ng-click="vm.toggleItemsList()" aria-label="Show Menu">
30-
<md-icon md-svg-icon="menu"></md-icon>
31-
</md-button>
32-
</md-toolbar>
28+
<md-toolbar layout="row" layout-align="end center">
29+
<md-button hide-sm class="toolbar-button" aria-label="Search">
30+
<i class="material-icons">search</i>
31+
</md-button>
32+
<md-button hide-sm class="toolbar-button" aria-label="Notifications">
33+
<i class="material-icons">notifications</i>
34+
<span class="notifications-label">7</span>
35+
</md-button>
36+
<md-button hide-sm class="toolbar-button" aria-label="Settings">
37+
<i class="material-icons">settings</i>
38+
</md-button>
39+
<md-button hide-gt-sm ng-click="vm.toggleItemsList()" aria-label="Menu">
40+
<i class="material-icons">menu</i>
41+
</md-button>
42+
</md-toolbar>
3343

34-
<md-content flex class="md-padding">
35-
<div ui-view></div>
36-
</md-content>
44+
<md-content flex class="md-padding">
45+
<div ui-view></div>
46+
</md-content>
3747
</div>
3848

3949
<md-sidenav md-is-locked-open="$mdMedia('gt-sm')" md-component-id="right"
4050
class="md-whiteframe-z2 md-sidenav-right">
41-
<md-toolbar class="md-accent" layout="row">
42-
<!-- TODO: replace md-icon to ng-src and fix images paths in build -->
43-
<md-icon hide-sm hide-md md-svg-icon="user"></md-icon>
44-
<md-menu hide-sm hide-md>
45-
<md-button class="capitalize" ng-click="$mdOpenMenu()" aria-label="Open menu">Richard Feynman</md-button>
46-
<md-menu-content>
47-
<md-menu-item><md-button ui-sref="home.profile">Profile</md-button></md-menu-item>
48-
<md-menu-item><md-button ng-click="vm.showActions($event)">Actions</md-button></md-menu-item>
49-
</md-menu-content>
50-
</md-menu>
51-
</md-toolbar>
52-
53-
<section>
54-
<md-toolbar md-theme="grey" class="md-hue-1">
55-
<div class="md-toolbar-tools">
56-
<h3>Messages</h3>
57-
</div>
51+
<md-toolbar layout="row" flex="80">
52+
<md-toolbar class="md-accent" layout="row" layout-align="center center">
53+
<img class="img-circle" ng-src="assets/images/feynman.jpg">
54+
<md-menu>
55+
<md-button class="capitalize" ng-click="$mdOpenMenu()" aria-label="Open menu">
56+
<span>Richard Feynman</span>
57+
<i class="material-icons">keyboard_arrow_down</i>
58+
</md-button>
59+
<md-menu-content>
60+
<md-menu-item><md-button ng-click="$mdCloseMenu()" ui-sref="home.profile">Profile</md-button></md-menu-item>
61+
<md-menu-item><md-button ng-click="$mdCloseMenu()" ui-sref="home.dashboard">Log out</md-button></md-menu-item>
62+
</md-menu-content>
63+
</md-menu>
64+
</md-toolbar>
65+
<md-toolbar flex="20" layout="row" layout-align="center center">
66+
<md-button ng-click="vm.showActions($event)" class="toolbar-button">
67+
<i class="material-icons">more_vert</i>
68+
</md-button>
69+
</md-toolbar>
5870
</md-toolbar>
59-
<div ng-include src="'app/views/partials/messages.html'"/>
60-
</section>
71+
72+
<section>
73+
<md-toolbar md-theme="grey" class="md-hue-1">
74+
<div class="md-toolbar-tools">
75+
<h3>Messages</h3>
76+
</div>
77+
</md-toolbar>
78+
<div ng-include src="'app/views/partials/messages.html'"/>
79+
</section>
6180
</md-sidenav>

‎src/app/views/partials/bottomSheet.html‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
11
<md-bottom-sheet class="md-list md-has-header">
2-
<md-subheader>
3-
<h4>Select action</h4>
4-
</md-subheader>
2+
<md-subheader>Select action</md-subheader>
53
<md-list>
6-
<md-item ng-repeat="action in vm.actions">
7-
<md-button class="md-primary" ng-click="vm.performAction(action)">
8-
<md-icon class="md-default-theme" md-svg-src="{{action.icon}}"></md-icon>
9-
<span>{{action.name}}</span>
10-
</md-button>
11-
</md-item>
4+
<md-list-item ng-repeat="action in vm.actions">
5+
<md-button class="md-list-item-content" ng-click="vm.performAction(action)" ng-href="{{action.url}}" target="_blank">
6+
<i class="material-icons">{{action.icon}}</i>
7+
<span class="share-label">{{action.name}}</span>
8+
</md-button>
9+
</md-list-item>
1210
</md-list>
1311
</md-bottom-sheet>

‎src/assets/images/feynman.jpg‎

23.2 KB
Loading

0 commit comments

Comments
 (0)