Add sidenav toggle button in Calendar module

Also show the current list filter on the right side of the toggle
button.
pull/101/head^2
Francis Lachapelle 2015-12-02 13:51:33 -05:00
parent b2c2fc5dcd
commit b02de72e57
5 changed files with 39 additions and 3 deletions

View File

@ -354,7 +354,7 @@
<md-content id="contactsList" layout="column" class="md-flex">
<md-subheader ng-show="addressbook.service.$query.value">
<md-button class="md-icon-button md-primary hide show-gt-sm" ng-click="toggleLeft()">
<md-button class="md-icon-button hide show-gt-sm" ng-click="toggleLeft()">
<md-icon ng-class="{'md-rotate-180': leftIsClose }">keyboard_arrow_left</md-icon>
</md-button>
<span ng-switch="addressbook.selectedFolder.cards.length">
@ -363,7 +363,7 @@
</span>
</md-subheader>
<md-subheader ng-hide="addressbook.service.$query.value">
<md-button class="md-icon-button md-primary hide show-gt-sm" ng-click="toggleLeft()">
<md-button class="md-icon-button hide show-gt-sm" ng-click="toggleLeft()">
<md-icon ng-class="{'md-rotate-180': leftIsClose }">keyboard_arrow_left</md-icon>
</md-button>
<span ng-switch="addressbook.selectedFolder.isRemote">

View File

@ -202,9 +202,11 @@
<md-content id="messagesList" layout="column" class="md-flex">
<md-subheader>
<md-button class="md-icon-button md-primary hide show-gt-sm" ng-click="toggleLeft()">
<!-- toggle sidenav -->
<md-button class="md-icon-button hide show-gt-sm" ng-click="toggleLeft()">
<md-icon ng-class="{'md-rotate-180': leftIsClose }">keyboard_arrow_left</md-icon>
</md-button>
<!-- message count -->
<span ng-switch="mailbox.service.selectedFolder.getLength()">
<span ng-switch-when="0"><var:string label:value="No message"/></span>
<span ng-switch-default="true">{{mailbox.service.selectedFolder.getLength()}} <var:string label:value="messages"/></span>

View File

@ -582,6 +582,12 @@
<!-- Events list -->
<md-tab label:label="Events"
md-on-select="list.selectComponentType('events')">
<md-subheader>
<md-button class="md-icon-button hide show-gt-sm" ng-click="toggleLeft()">
<md-icon ng-class="{'md-rotate-180': leftIsClose }">keyboard_arrow_left</md-icon>
</md-button>
<span>{{list.component.$queryEvents.filterpopup | loc}}</span>
</md-subheader>
<md-list class="sg-section-list">
<md-list-item ng-repeat="event in list.component.$events"
ng-click="list.openEvent($event, event)">
@ -619,6 +625,12 @@
<!-- Tasks list -->
<md-tab label:label="Tasks"
md-on-select="list.selectComponentType('tasks')">
<md-subheader>
<md-button class="md-icon-button hide show-gt-sm" ng-click="toggleLeft()">
<md-icon ng-class="{'md-rotate-180': leftIsClose }">keyboard_arrow_left</md-icon>
</md-button>
<span>{{list.component.$queryTasks.filterpopup | loc}}</span>
</md-subheader>
<md-list class="sg-section-list">
<md-list-item ng-repeat="task in list.component.$tasks"
ng-click="list.openTask($event, task)">

View File

@ -68,6 +68,21 @@ md-list md-list-item button.md-button.sg-icon-button {
}
}
.md-subheader-content {
.md-icon-button:first-child {
padding-left: 0;
margin-left: $icon-button-margin/2;
margin-right: $icon-button-margin*1.5;
}
}
md-tab-content {
.md-subheader-content {
.md-icon-button:first-child {
margin-right: $icon-button-margin/2;
}
}
}
// md-toolbar .md-toolbar-tools:first-of-type .iconButton,
// md-toolbar .md-toolbar-tools:first-child .iconButton,
// md-toolbar .md-toolbar-tools.md-toolbar-tools-top .iconButton,

View File

@ -11,6 +11,13 @@
padding: 0 0 0 $layout-gutter-width;
}
}
md-tab-content {
.md-subheader {
.md-subheader-inner {
padding-left: $layout-gutter-width/2;
}
}
}
.sg-md-subheader {
&--fixed {