Fix sidenav toolbar (logo and buttons)

This commit is contained in:
iRouge
2015-03-08 17:09:20 -04:00
committed by Francis Lachapelle
parent 90cd79a21b
commit fdb4cd71eb
6 changed files with 24 additions and 13 deletions

View File

@@ -147,11 +147,13 @@
-->
<!-- Sidenav -->
<md-sidenav class="md-sidenav-left" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')" layout="column">
<md-toolbar class="md-tall" layout-align="end start">
<md-toolbar class="md-tall" layout-align="start start">
<span class="sg-logo"> </span>
<h2 class="md-toolbar-tools md-toolbar-tools-bottom">
<span class="sg-md-title md-flex">{{activeUser.identification}}</span>
</h2>
<div class="md-toolbar-tools md-toolbar-tools-bottom">
<p class="sg-md-title md-flex">{{activeUser.identification}}</p>
<!--fixme: correct this data-binding -->
<p class="md-sg-subhead-1">{{account.name}}</p>
</div>
</md-toolbar>
<md-content md-scroll-y="md-scroll-y" class="md-flex" ng-controller="LeftCtrl">
<md-list>
@@ -192,7 +194,7 @@
<md-toolbar layout="column" layout-align="space-between start" class="md-tall toolbar-main">
<div class="md-toolbar-tools" layout="row" layout-align="space-between start" ng-controller="toggleCtrl">
<div class="sg-toolbar-group-1" layout="row">
<md-button ng-click="toggleLeft()" class="md-hide-gt-md sg-button-navicon" aria-label="Toggle Menu">
<md-button ng-click="toggleLeft()" class="md-hide-gt-md sg-button-navicon iconButton" aria-label="Toggle Menu">
<span class="md-icon-menu"></span>
</md-button>
<div class="sg-date-group" layout="column" layout-align="center end">

View File

@@ -21,8 +21,7 @@
<!--avatar-->
</div>
<div class="sg-tile-content">
<a ui-sref="mail.account.mailbox.message({accountId: account.id, mailboxId: (mailbox.path | encodeUri), messageId: currentMessage.uid})"
>
<a ui-sref="mail.account.mailbox.message({accountId: account.id, mailboxId: (mailbox.path | encodeUri), messageId: currentMessage.uid})">
<div class="sg-md-subhead-multi subject">
{{currentMessage.subject}}
</div>

View File

@@ -264,11 +264,13 @@
<!-- Sidenav -->
<md-sidenav class="md-sidenav-left" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')" layout="column">
<md-toolbar class="md-tall" layout-align="end start">
<md-toolbar class="md-tall" layout-align="start start">
<span class="sg-logo"> </span>
<h2 class="md-toolbar-tools md-toolbar-tools-bottom">
<span class="sg-md-title md-flex">{{activeUser.identification}}</span>
</h2>
<div class="md-toolbar-tools md-toolbar-tools-bottom">
<p class="sg-md-title md-flex">{{activeUser.identification}}</p>
<!--fixme: correct this data-binding -->
<p class="md-sg-subhead-1">{{account.name}}</p>
</div>
</md-toolbar>
<md-content md-scroll-y="md-scroll-y" class="md-flex" ng-controller="LeftCtrl">
<md-list ng-repeat="account in accounts track by account.id">
@@ -291,7 +293,7 @@
<md-toolbar layout="column" layout-align="space-between start" class="md-tall toolbar-main">
<div class="md-toolbar-tools" layout="row" layout-align="space-between start" ng-controller="toggleCtrl">
<div class="sg-toolbar-group-1" layout="row">
<md-button ng-click="toggleLeft()" class="md-hide-gt-md sg-button-navicon" aria-label="Toggle Menu">
<md-button ng-click="toggleLeft()" class="md-hide-gt-md sg-button-navicon iconButton" aria-label="Toggle Menu">
<span class="md-icon-menu"></span>
</md-button>
<div class="sg-date-group" layout="column" layout-align="center end">

View File

@@ -35,6 +35,7 @@ sg-folder-tree .md-button {
// Variables
$iconButton-size: $touch-zone-width;
$iconButton-icon-size: sg-size(title);
$iconButton-menu-size: sg-size(headline);
$iconButton-icon-padding: 2px;
$iconButton-size-cursor-coarse: $iconButton-size;
// Could be use to scale-down buttons if desktop layout suffers too much from touch-size
@@ -44,6 +45,7 @@ $iconButton-padding: ($iconButton-size - ($iconButton-icon-size + ($iconButton-i
$iconButton-hover-scale: 1.25;
$iconButton-transition: transform $swift-ease-in-duration $swift-ease-in-timing-function;
// Classes
.iconButton {
padding: $iconButton-padding;
@@ -94,4 +96,8 @@ $iconButton-transition: transform $swift-ease-in-duration $swift-ease-in-timing-
width: $touch-zone;
height: $touch-zone;
margin-left: ($mg * -1);
}
// angular-material is overspecifying so we are and so we have to continue
.sg-button-navicon.iconButton span.md-icon-menu {
font-size: $iconButton-menu-size;
}

View File

@@ -1,8 +1,10 @@
@import 'extends';
md-toolbar {
// todo: create variables scaled z-index
z-index: 20;
box-shadow: none;
font-size: initial;
}
.md-toolbar-tools.md-toolbar-tools-bottom {
height: (5 * $line);

View File

@@ -19,7 +19,7 @@ main {
background-image: url("../img/sogo-full.svg");
background-size: contain;
background-repeat: no-repeat;
margin-left: 16px;
margin: $bl 0 0 $mg;
height: 7 * $bl;
min-width: 18 * $bl;
}