LupusNobilis
/
sogo
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Finish the toolbars 

Add an app button on sidenav
Add a logout select on sidenav
pull/91/head
Benoit Favreault 2015-03-13 02:10:31 -04:00 committed by Francis Lachapelle
parent 9fc713dc5f
commit a57713523b
8 changed files with 86 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
UI/Templates/ContactsUI/UIxContactFoldersView.wox
View File

@ -148,11 +148,23 @@
<!-- 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="start start">
<span class="sg-logo"> </span>
<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 class="md-toolbar-tools" layout="row">
<md-button class="iconButton sg-button-navicon">
<i class="md-icon-apps"><!--icon--></i>
</md-button>
<span class="sg-logo"><!--logo.svg--></span>
</div>
<div class="md-toolbar-tools" layout="row">
<div layout="column">
<p class="sg-md-title">{{activeUser.identification}}</p>
<!--fixme: implement this with the proper model and actions -->
<md-select class="sg-logout" ng-model="accounts.options" label:placeholder="sogo1@inverse.ca">
<md-option >sogo1@inverse.ca</md-option>
<md-option >connect an other account</md-option>
<md-option >logout</md-option>
</md-select>
</div>
</div>
</md-toolbar>
<md-content md-scroll-y="md-scroll-y" class="md-flex">
@ -192,12 +204,12 @@
<section layout="column" class="md-layout-fill">
<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="md-toolbar-tools md-toolbar-tools-top" 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 iconButton" aria-label="Toggle Menu">
<span class="md-icon-menu"></span>
</md-button>
<div class="sg-date-group" layout="column" layout-align="center end">
<div class="sg-date-group" layout="column" layout-align="space-between end">
<p class="sg-day">monday</p>
<p class="sg-month">january</p>
<p class="sg-year">2015</p>

2
UI/Templates/ContactsUI/UIxContactViewTemplate.wox
View File

@ -17,7 +17,7 @@
<span class="label radius" ng-repeat="category in card.categories">{{category.value}}</span>
</h6>
</div>
<div class="sg-icon-bar">
<div class="sg-icon-bar--vertical">
<span ng-show="addressbook.isEditable">
<md-button class="iconButton" aria-label="Edit" ui-sref="addressbook.card.editor({addressbookId: addressbook.id, cardId: card.id})">
<i class="md-icon-create"><!-- edit --></i>

26
UI/Templates/MailerUI/UIxMailMainFrame.wox
View File

@ -265,13 +265,25 @@
<!-- 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="start start">
<span class="sg-logo"> </span>
<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 class="md-toolbar-tools" layout="row">
<md-button class="iconButton sg-button-navicon">
<i class="md-icon-apps"><!--icon--></i>
</md-button>
<span class="sg-logo"><!--logo.svg--></span>
</div>
<div class="md-toolbar-tools" layout="row">
<div layout="column">
<p class="sg-md-title">{{activeUser.identification}}</p>
<!--fixme: implement this with the proper model and actions -->
<md-select class="sg-logout" ng-model="accounts.options" label:placeholder="sogo1@inverse.ca">
<md-option >sogo1@inverse.ca</md-option>
<md-option >connect an other account</md-option>
<md-option >logout</md-option>
</md-select>
</div>
</div>
</md-toolbar>
<md-content md-scroll-y="md-scroll-y" class="md-flex">
<md-list ng-repeat="account in accounts track by account.id">
<md-item>
@ -291,12 +303,12 @@
<!-- Main section -->
<section layout="column" class="md-layout-fill">
<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="md-toolbar-tools md-toolbar-tools-top" 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 iconButton" aria-label="Toggle Menu">
<span class="md-icon-menu"></span>
</md-button>
<div class="sg-date-group" layout="column" layout-align="center end">
<div class="sg-date-group" layout="column" layout-align="space-between end">
<p class="sg-day">monday</p>
<p class="sg-month">january</p>
<p class="sg-year">2015</p>

2
UI/Templates/MailerUI/UIxMailViewTemplate.wox
View File

@ -37,7 +37,7 @@
</p>
-->
<div class="sg-icon-bar">
<div class="sg-icon-bar--vertical">
<!-- todo: Replace md-tooltip values by localizable string variable -->
<md-button class="iconButton"
ui-sref="mail.account.mailbox.message.action({accountId: account.id, mailboxId: (mailbox.path | encodeUri), messageId: message.uid, actionName: 'reply'})"

38
UI/WebServerResources/scss/components/button/_button.scss
View File

@ -66,26 +66,24 @@ $iconButton-transition: transform $swift-ease-in-duration $swift-ease-in-timing-
transition: $iconButton-transition;
}
}
// Containers have padding, we compensate to align according to specs
.iconButton:last-child {
margin-right: ($iconButton-padding * -1);
margin-end: ($iconButton-padding * -1);
-moz-margin-end: ($iconButton-padding * -1);
-webkit-margin-end: ($iconButton-padding * -1);
}
.iconButton:first-child {
margin-left: ($iconButton-padding * -1);
margin-start: ($iconButton-padding * -1);
-moz-margin-start: ($iconButton-padding * -1);
-webkit-margin-start: ($iconButton-padding * -1);
}
.iconButton:only-child {
margin-start: ($iconButton-padding * -1);
-moz-margin-start: ($iconButton-padding * -1);
-webkit-margin-start: ($iconButton-padding * -1);
// Icon-bars are for iconButtons, by default they're vertical and at the right
// the modifier class is to reflect those values and leave place to other versions
.sg-icon-bar--vertical {
font-size: $sg-font-size-3;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
// Containers have padding, we compensate to align according to specs
margin: 0 ($iconButton-padding * -1) 0 $mg;
}
// NiceToHave: some horizontal or left hand side variant
.sg-icon-bar *.button {
display: block;
}
// angular-material is overspecifying so we are
.md-button.md-default-theme:not([disabled]).iconButton {
@ -98,6 +96,8 @@ $iconButton-transition: transform $swift-ease-in-duration $swift-ease-in-timing-
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 {
.sg-button-navicon.iconButton span.md-icon-menu,
.sg-button-navicon.iconButton i[class|="md-icon"] {
padding: 0;
font-size: $iconButton-menu-size;
}

15
UI/WebServerResources/scss/components/select/select.scss
View File

@ -9,8 +9,23 @@ md-select {
md-select.md-default-theme.sg-toolbar-sort {
margin: 0 $bl 4px 0;
color: $colorWhite;
md-select-label.md-select-label {
border: none;
color: inherit;
}
}
md-select.md-default-theme.sg-logout {
margin-top: 0;
color: $colorWhite;
// angular material overqualifies, so we are
md-select-label.md-select-label,
md-select-label.md-select-label.md-placeholder,
md-select-label.md-select-label * {
border: none;
color: $colorWhite;
}
}

20
UI/WebServerResources/scss/components/toolbar/toolbar.scss
View File

@ -6,10 +6,16 @@ md-toolbar {
box-shadow: none;
font-size: initial;
}
.md-toolbar-tools.md-toolbar-tools-top {
padding-top: $bl;
}
.md-toolbar-tools.md-toolbar-tools-bottom {
height: (5 * $line);
max-height: (5 * $line);
}
header {
flex-direction: row;
flex-wrap: nowrap;
@ -28,17 +34,7 @@ hgroup {
color: inherit;
font-size: sg-size(headline);
}
.sg-icon-bar {
font-size: $sg-font-size-3;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
margin: 0 0 0 $mg;
}
.sg-icon-bar *.button {
display: block;
}
.sg-toolbar-group {
display: flex;
flex-direction: row;
@ -55,5 +51,3 @@ hgroup {
order: 3;
}
}

8
UI/WebServerResources/scss/core/typography/typography.scss
View File

@ -395,16 +395,18 @@ html p {
// Date bloc in use on the toolbar
// ----------------------------------------------------------------------------
$today-font-size: 72px; // Visualy adjusted
.sg-date-group {
height: $pitch;
font-size: sg-size(button);
line-height: 1;
text-transform: uppercase;
}
.sg-date-today {
font-size: $pitch;
line-height: 1;
margin-left: $bl;
font-size: $today-font-size;
line-height: 56px; // Visualy adjusted
font-weight: $sg-font-light;
}