amorfo77/sogo
1
0
Fork 0
mirror of https://github.com/inverse-inc/sogo.git synced 2026-08-21 06:33:18 +00:00
Code Issues Projects Releases Wiki Activity

Fine-tune layout

Browse Source
This commit is contained in:
Benoit Favreault
2015-06-12 11:41:28 -04:00
committed by Francis Lachapelle
parent 2c8d1b5db7
commit e69c47854a
9 changed files with 83 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
UI/Templates/ContactsUI/UIxContactFoldersView.wox
+7 -12
View File
@@ -147,14 +147,14 @@
<!-- Sidenav -->
<md-sidenav id="left-sidenav" class="md-sidenav-left" md-component-id="left" md-is-locked-open="isGtMedium" layout="column">
<md-toolbar class="md-tall" layout-align="start start">
<div class="md-toolbar-tools" layout="row">
<div class="md-toolbar-tools sg-padded" layout="row" layout-align="start start">
<md-button class="iconButton sg-button-navicon" ng-click="openBottomSheet()">
<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 class="md-toolbar-tools sg-padded" layout="row">
<div layout="column">
<p class="sg-md-title">{{activeUser.identification}}</p>
<!--fixme: implement this with the proper model and actions -->
@@ -205,7 +205,7 @@
<section layout="column" class="sg-app-content md-layout-fill">
<md-toolbar layout="column" layout-align="space-between start" class="md-tall toolbar-main">
<div class="md-toolbar-tools md-toolbar-tools-top" layout="row" layout-align="space-between start">
<div class="md-toolbar-tools md-toolbar-tools-top sg-padded" layout="row" layout-align="space-between start">
<div class="sg-toolbar-group-1" layout="row">
<md-button ng-click="toggleLeft()" class="hide-gt-md sg-button-navicon iconButton" label:aria-label="Toggle Menu">
<span class="md-icon-menu"></span>
@@ -218,14 +218,14 @@
</div>
<p class="sg-md-display-3 sg-date-today" ng-bind="currentDay.day"><!-- day --></p>
</div>
<div class="sg-toolbar-group-2">
<md-button class="iconButton" label:aria-label="Search">
<i class="md-icon-search"><!--icon--></i>
<div class="sg-toolbar-group-last">
<md-button class="iconButton" label:aria-label="Menu">
<i class="md-icon-more-vert"><!--icon--></i>
</md-button>
</div>
</div>
<div class="md-toolbar-tools md-toolbar-tools-bottom" layout="row" layout-align="space-between center">
<div class="cols-6" layout="row" layout-align="space-between center" style="padding-right: 16px"
<div class="view-list cols-6 sg-padded" layout="row" layout-align="space-between center"
sg-search="addressbook.$filter(searchText, { search: searchField })">
<md-input-container class="sg-search-field-container">
<label style="color: white"><i class="md-icon-search"><!--icon--></i><var:string label:value="Search"/></label>
@@ -246,11 +246,6 @@
<div layout="row" class="md-flex" layout-align="space-between">
<md-content class="view-list" style="position: relative;" id="contactsList">
<style>
.vs-repeat-repeated-element {
width: 100%;
}
</style>
<header class="sg-md-subheader">
<h2 class="sg-md-subhead-solo fg-sogoBlue-700">Contacts</h2>
</header>
UI/Templates/ContactsUI/UIxContactViewTemplate.wox
+1 -1
View File
@@ -7,7 +7,7 @@
>
<md-card class="viewer">
<md-card-content>
<md-button class="iconButton show-sm" ng-click="toggleDetailView()"><i class="md-icon-arrow-back"><!--icon--></i></md-button>
<md-button class="iconButton show-sm" ng-click="toggleDetailView()"><i class="md-icon-close"><!--icon--></i></md-button>
<header>
<div class="sg-avatar">
<!--avatar--><!-- currentCard.tag = vcard || vlist -->
UI/Templates/MailerUI/UIxMailMainFrame.wox
+7 -8
View File
@@ -265,8 +265,8 @@
<!-- Sidenav -->
<md-sidenav id="left-sidenav" class="md-sidenav-left md-layout-fill" md-component-id="left" md-is-locked-open="isGtMedium" layout="column">
<md-toolbar class="md-tall" layout-align="start start">
<div class="md-toolbar-tools" layout="row">
<md-toolbar class="md-tall sg-padded" layout-align="start start">
<div class="md-toolbar-tools" layout="row" layout-align="start start">
<md-button class="iconButton sg-button-navicon" ng-click="openBottomSheet()">
<i class="md-icon-apps"><!--icon--></i>
</md-button>
@@ -304,12 +304,11 @@
<!-- Main section -->
<section layout="column" class="sg-app-content md-layout-fill">
<md-toolbar layout="column" layout-align="space-between start" class="md-tall toolbar-main">
<div class="md-toolbar-tools md-toolbar-tools-top" layout="row" layout-align="space-between start">
<div class="md-toolbar-tools md-toolbar-tools-top sg-padded" layout="row" layout-align="space-between start">
<div class="sg-toolbar-group-1" layout="row">
<md-button ng-click="toggleLeft()" class="hide-gt-md sg-button-navicon iconButton" aria-label="Toggle Menu">
<span class="md-icon-menu"></span>
</md-button>
<!--todo: provide live data for this group-->
<div class="sg-date-group" layout="column" layout-align="space-between end">
<p class="sg-day" ng-bind="currentDay.weekday"><!-- weekday --></p>
<p class="sg-month" ng-bind="currentDay.month"><!-- month --></p>
@@ -317,14 +316,14 @@
</div>
<p class="sg-md-display-3 sg-date-today" ng-bind="currentDay.day"><!-- day --></p>
</div>
<div class="sg-toolbar-group-2">
<md-button class="iconButton" aria-label="Search">
<i class="md-icon-search"><!--icon--></i>
<div class="sg-toolbar-group-last">
<md-button class="iconButton" aria-label="More">
<i class="md-icon-more-vert"><!--icon--></i>
</md-button>
</div>
</div>
<div class="md-toolbar-tools md-toolbar-tools-bottom" layout="row" layout-align="space-between center">
<div class="cols-6" layout="row" layout-align="space-between center" style="padding-right: 16px"
<div class="view-list cols-6 sg-padded" layout="row" layout-align="space-between center"
sg-search="mailbox.$filter({ sort: 'date', asc: false }, [{ searchBy: searchField, searchInput: searchText }])">
<md-input-container class="sg-search-field-container">
<label style="color: white"><i class="md-icon-search"><!--icon--></i><var:string label:value="Search"/></label>
UI/WebServerResources/scss/components/autoScrollList/autoScrollList.scss
+4
View File
@@ -10,6 +10,10 @@
// avoid overspecifying
// todo: create new classes and refactor templates markup
// ----------------------------------------------------------------------------
.vs-repeat-repeated-element {
width: 100%;
}
[id='messagesList'],
[id='contactsList'] {
border-top: 44px solid transparent; // padding for the header.subheader,
UI/WebServerResources/scss/components/button/_button.scss
+27 -8
View File
@@ -32,6 +32,9 @@ md-sidenav md-list button.md-button {
md-sidenav .md-button [class ^= "md-icon"] {
margin-right: 1em;
}
md-sidenav .md-button.iconButton.sg-button-navicon [class ^= "md-icon"] {
margin: 0;
}
///
/// iconButton
@@ -80,7 +83,7 @@ $iconButton-transition: transform $swift-ease-in-duration $swift-ease-in-timing-
[class ^= md-icon],
[class *= md-icon-] {
padding: $iconButton-icon-padding;
color: curentColor;
color: currentColor;
font-size: $iconButton-icon-size;
transition: $iconButton-transition;
}
@@ -92,13 +95,29 @@ $iconButton-transition: transform $swift-ease-in-duration $swift-ease-in-timing-
border-radius: 50%;
}
}
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,
md-toolbar .md-toolbar-tools:not(.md-toolbar-tools-bottom) .iconButton {
margin-top: ($mg * -1);
}
// First button must have it's icon align to margin/padding
md-content.md-padding > .iconButton:first-child {
margin-top: ($iconButton-padding * -1);
margin-left: ($iconButton-padding * -1);
md-toolbar .md-toolbar-tools .iconButton:first-child,
.sg-toolbar-group-last .iconButton:first-child {
margin-left: ($mg * -1);
}
md-content.md-padding,
md-card-content {
&> .iconButton:first-child {
margin-top: ($mg * -1);
margin-left: ($mg * -1);
}
}
// Last button must have it's icon align to margin/padding
md-toolbar .md-toolbar-tools .iconButton:last-child,
.sg-toolbar-group-last .iconButton:last-child {
margin-right: ($mg * -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
@@ -133,8 +152,8 @@ md-content.md-padding > .iconButton:first-child {
}
.sg-button-navicon {
top: ($mg * -1);
margin-left: ($mg * -1);
//top: ($mg * -1);
//margin-left: ($mg * -1);
width: $touch-zone;
height: $touch-zone;
}
UI/WebServerResources/scss/components/toolbar/toolbar.scss
+24 -3
View File
@@ -1,13 +1,33 @@
$toolbar-tools-height: 100%;
$toolbar-height: $pitch;
$toolbar-medium-tall-height: 88px !default;
$toolbar-tall-height: ($toolbar-height * 2);
$toolbar-indent-margin: $pitch;
$toolbar-padding: $mg;
@import 'extends';
// According to specs, there's no case where toolbars have no padding
// We overule angular-material way of implenting this by defining padding toolbars
// instead of toolbar-tools to prevent padding addition
// INFO: because we make intensive use of border-box box sizing model, horizontal paddings
// must be declare in containers with sg-padded
md-toolbar {
// todo: create variables scaled z-index
padding: $toolbar-padding 0;
box-shadow: none;
font-size: initial;
}
.md-toolbar-tools {
padding: 0 initial;
}
// angular-material is overspecifying so we are
.md-toolbar-tools[layout-align="start start"] {
align-items: flex-start;
}
.md-toolbar-tools.md-toolbar-tools-top {
padding-top: $mg;
align-items: flex-start;
}
.md-toolbar-tools.md-toolbar-tools-bottom {
@@ -46,7 +66,8 @@ hgroup {
&-2 {
order: 2;
}
&-3 {
&-3,
&-last {
order: 3;
}
}
UI/WebServerResources/scss/core/base_styles/_base_style.scss
+11 -2
View File
@@ -10,14 +10,23 @@
*/
main {
background-color: sg-color($sogoPaper, 200);
background-color: $background-base-color;
}
// Utility class to add padding on containers
// Because of the border-box sizing model, padding can affect width specialy
// in nested containers
.sg-padded {
padding-left: $mg;
padding-right: $mg;
}
.sg-logo {
background-image: url("../img/sogo-full.svg");
background-size: contain;
background-repeat: no-repeat;
margin: $bl 0 0 $mg;
height: 7 * $bl;
min-width: 18 * $bl;
//optical adjustement
transform: translateY(-10%);
}
UI/WebServerResources/scss/core/variables.scss
+1
View File
@@ -13,6 +13,7 @@ $version: '3.alpha';
$primary-color: sg-color($sogoBlue, 300) !default;
//$foreground-primary-color: rgba($foreground-base-color, 0.73) !default;
$foreground-primary-color: rgba($primary-color, 0.87);//override
$background-base-color: sg-color($sogoPaper, 200);
// Typography
// ------------------------------
UI/WebServerResources/scss/views/_view.scss
+1 -1
View File
@@ -50,6 +50,7 @@ $detailView-width: grid-step(8) !global;
.view-detail {
position: relative;
z-index: $z-index-view;
background-color: $background-base-color;
@include from(lg) {
@include flex-col(lg, 8, 2, 1);
margin: 0 auto $mg auto;
@@ -61,7 +62,6 @@ $detailView-width: grid-step(8) !global;
@include to(sm) {
width: 100%;
min-width: 100%;
background-color: sg-color($sogoPaper, 50);
transform: translateX(-100%) scale(1);
filter: opacity(1);
transform-origin: 50% 50%;