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

Adjust UI for Contact, Contact editor, Messages and Message editor

Browse Source
This commit is contained in:
iRouge
2015-02-26 22:32:22 -05:00
committed by Francis Lachapelle
parent 15dab4dfe5
commit 80d6c0226a
13 changed files with 218 additions and 177 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
UI/Templates/ContactsUI/UIxContactEditorTemplate.wox
View File

@@ -144,7 +144,6 @@
<div class="section">
<div class="attr" ng-repeat="phone in card.phones">
<div layout="row" layout-align="center end">
<i class="md-icon-phone md-icon-lg cols-1"><!--icon--></i>
<md-select ng-model="phone.type" label:placeholder="Type">
<md-option ng-repeat="type in allTelTypes" ng-value="type">{{ type }}</md-option>
</md-select>
@@ -202,17 +201,10 @@
<!-- addresses -->
<div class="section">
<div class="attr" ng-repeat="address in card.addresses">
<div layout="row" layout-align="start end">
<div layout="row" layout-align="center end">
<md-select ng-model="address.type" label:placeholder="Type">
<md-option ng-repeat="type in allAddressTypes" ng-value="type">{{ type }}</md-option>
</md-select>
<p>
<var:string label:value="Address"/>
</p>
</div>
<div layout="row" layout-align="center end">
<md-input-container>
<label>
<var:string label:value="street"/>
@@ -293,13 +285,13 @@
<div class="fieldset md-layout-margin" layout="row" layout-align="end center">
<md-button class="md-primary md-hue-3" ng-click="cancel()">
<md-button class="" ng-click="cancel()">
<var:string label:value="Cancel"/>
</md-button>
<md-button class="md-accent" ng-click="reset()">
<md-button class="" ng-click="reset()">
<var:string label:value="Reset"/>
</md-button>
<md-button class="md-accent md-hue-3" type="submit">
<md-button class="md-primary md-hue-3" type="submit">
<var:string label:value="Save"/>
</md-button>
</div>

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

@@ -192,21 +192,24 @@
<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="sg-toolbar-group-1">
<md-button ng-click="toggleLeft()" class="md-hide-gt-md">
<div class="sg-toolbar-group-1" layout="row">
<md-button ng-click="toggleLeft()" class="md-hide-gt-md sg-button-navicon">
<span class="md-icon-menu"></span>
</md-button>
<div class="sg-md-display-3">
15
<div class="sg-date-group" layout="column" layout-align="center end">
<p class="sg-day">monday</p>
<p class="sg-month">january</p>
<p class="sg-year">2015</p>
</div>
<p class="sg-md-display-3">15</p>
</div>
<div class="sg-toolbar-group-2">
<span class="md-icon-search"></span>
</div>
</div>
<div class="md-toolbar-tools md-toolbar-tools-bottom" layout="row" layout-align="space-between center">
<div class="cols-7" layout="row" layout-align="space-between center" style="padding-right: 16px">
<div class="cols-6" layout="row" layout-align="space-between center" style="padding-right: 16px">
<md-input-container class="sg-search-field-container">
<label style="color: white"><i class="md-icon-search"><!--icon--></i>Search</label>
<input name="folderSearch" type="search"
@@ -214,9 +217,9 @@
</md-input-container>
<div class="sg-toolbar-group">
<span>ALL
<span class="md-icon-arrow-drop-down"><!-- sort drop-down --></span>
</span>
<md-select class="sg-toolbar-sort md-contrast-light" label:placeholder="All">ALL
</md-select>
<span class="md-icon-create"><!-- icon --></span>
</div>
</div>

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

@@ -291,32 +291,39 @@
<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="sg-toolbar-group-1">
<md-button ng-click="toggleLeft()" class="md-hide-gt-md">
<div class="sg-toolbar-group-1" layout="row">
<md-button ng-click="toggleLeft()" class="md-hide-gt-md sg-button-navicon">
<span class="md-icon-menu"></span>
</md-button>
<div class="sg-md-display-3">
15
<div class="sg-date-group" layout="column" layout-align="center end">
<p class="sg-day">monday</p>
<p class="sg-month">january</p>
<p class="sg-year">2015</p>
</div>
<p class="sg-md-display-3">15</p>
</div>
<div class="sg-toolbar-group-2">
<span class="md-icon-search"></span>
</div>
</div>
<div class="md-toolbar-tools md-toolbar-tools-bottom" layout="row" layout-align="space-between center">
<div class="cols-7" layout="row" layout-align="space-between center" style="padding-right: 16px">
<div class="md-icon-search"><!-- search-field --></div>
<div class="cols-6" layout="row" layout-align="space-between center" style="padding-right: 16px">
<md-input-container class="sg-search-field-container">
<label style="color: white"><i class="md-icon-search"><!--icon--></i>Search</label>
<input name="folderSearch" type="search"
ng-model="search.filter" ng-keyup="doSearch($event)" style="color: white"/>
</md-input-container>
<div class="sg-toolbar-group">
<span>ALL
<span class="md-icon-arrow-drop-down"><!-- sort drop-down --></span>
</span>
<md-select class="sg-toolbar-sort md-contrast-light" label:placeholder="All">ALL
</md-select>
<span class="md-icon-create"><!-- icon --></span>
</div>
</div>
<div class="spacer cols-8"><!-- spacer --></div>
</div>
</md-toolbar>
<div layout="row" class="md-flex" layout-align="space-between" ui-view="mailbox"><!-- messages list --></div>
</section>

5
UI/WebServerResources/scss/components/_palette.scss
View File

@@ -14,6 +14,11 @@ $colorGray: rgba($colorBlack, .54);
$colorGrayLight: rgba($colorBlack, .26);
$colorGrayLighter: rgba($colorBlack, .12);
// Whites for text
// ----------------------------------------------------------------------------
$colorWhite: #fff;
// Color Palettes
// At this stage of developpement --eg. version AngularMaterial v0.7.1-- ngMaterial theming is incomplete
// and does not apply every specified hues, neither provide acces to it trough it's theming API

3
UI/WebServerResources/scss/components/autoScrollList/autoScrollList.scss
View File

@@ -30,7 +30,8 @@
&:active {
color: sg-color($sogoBlue, 800);
}
&:focus {
&:focus,
&._selected {
background-color: sg-color($sogoBlue, 100);
}
}

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

@@ -33,4 +33,9 @@ button.icon {
&:hover {
color: sg-color($sogoBlue, 500);
}
}
.sg-button-navicon {
width: $touch-zone;
height: $touch-zone;
margin-left: ($mg * -1);
}

4
UI/WebServerResources/scss/components/icon/icon.scss
View File

@@ -37,7 +37,3 @@ src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAjEMAAsAA
font-weight: normal;
font-style: normal;
}
.md-icon-lg {
line-height: 1;
vertical-align: initial;
}

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

@@ -2,4 +2,15 @@
md-select {
margin-bottom: 2px;
}
margin-right: $bl;
}
// angular material overqualifies, so we are
md-select.md-default-theme.sg-toolbar-sort {
margin: 0 $bl -6px 0;
color: $colorWhite;
md-select-label.md-select-label {
border: none;
color: inherit;
}
}

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

@@ -45,7 +45,7 @@ hgroup {
justify-content: space-between;
&-1 {
order: 1;
max-width: $messageList-width;
max-width: $listView-width;
}
&-2 {
order: 2;

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

@@ -147,6 +147,7 @@ $sg-rem-Base-value: 16 !global;
$sg-sp-value: (1 / $sg-rem-Base-value) !default; // sp value
$sg-md-typo-baseline: 4px;
$sg-base-line-height: 1.3;
// Font-size basic scale (from Google)
// NiceToHave : generate with a loop
@@ -265,134 +266,153 @@ h6 {
margin: $h6-margin-base;
}
// Base styles
// ----------------------------------------------------------------------------
html p {
font-size: inherit;
line-height: $sg-base-line-height;
}
/// Gogle Material Design Standard styles
/// as specified (http://www.google.com/design/spec/style/typography.html#typography-standard-styles)
/// Some specification class names are counterintuitive. We provide some aliases
// -------------------------------------------------------------------------------------------------
.#{$md}-caption {
font-size: $sg-font-size-1;
line-height: $sg-line-height-1;
font-weight: $sg-font-regular;
white-space: nowrap;
}
.#{$md}-menu {
font-size: $sg-font-size-2;
line-height: $sg-line-height-1;
font-weight: $sg-font-medium;
white-space: nowrap;}
.#{$md}-button {
font-size: $sg-font-size-2;
line-height: $sg-line-height-1;
font-weight: $sg-font-medium;
white-space: nowrap;
text-transform: capitalize;
}
.#{$md}-body-1 {
font-size: $sg-font-size-2;
line-height: $sg-line-height-2;
font-weight: $sg-font-regular;
}
/// @alias .body-1
.#{$md}-body-multi {
@extend .#{$md}-body-1;
}
.#{$md}-body-2 {
$lineHeight : $sg-line-height-2 + $sg-md-typo-baseline;
font-size: $sg-font-size-2;
line-height: $lineHeight;
font-weight: $sg-font-medium;
margin-top: ($lineHeight * -1);
margin-bottom: $lineHeight;
}
/// @alias .body-2
.#{$md}-body-solo {
@extend .#{$md}-body-2;
}
.#{$md}-subhead-1 {
$lineHeight : $sg-line-height-3;
font-size: $sg-font-size-3;
line-height: $lineHeight;
font-weight: $sg-font-regular;
margin-top: ($lineHeight * -1);
margin-bottom: $lineHeight;
}
/// @alias .subhead-1
.#{$md}-subhead-multi {
@extend .#{$md}-subhead-1;
}
.#{$md}-subhead-2 {
$lineHeight : $sg-line-height-3 + $sg-md-typo-baseline;
font-size: $sg-font-size-3;
line-height: $lineHeight;
font-weight: $sg-font-regular;
margin-top: ($lineHeight * -1);
margin-bottom: $lineHeight;
}
/// @alias .subhead-2
.#{$md}-subhead-solo {
@extend .#{$md}-subhead-2;
}
.#{$md}-title {
$lineHeight : $sg-line-height-4;
font-size: $sg-font-size-4;
line-height: $lineHeight;
font-weight: $sg-font-medium;
white-space: nowrap;
}
.#{$md}-headline {
$lineHeight : $sg-line-height-5;
font-size: $sg-font-size-5;
line-height: $lineHeight;
font-weight: $sg-font-regular;
margin-top: 0;
margin-bottom: $line;
}
.#{$md}-display-1 {
$lineHeight : $sg-line-height-6;
font-size: $sg-font-size-6;
line-height: $lineHeight;
font-weight: $sg-font-regular;
}
.#{$md}-display-2 {
$lineHeight: $sg-line-height-7;
font-size: $sg-font-size-7;
line-height: $lineHeight;
font-weight: $sg-font-regular;
white-space: nowrap;
}
.#{$md}-display-2--light {
$lineHeight: $sg-line-height-7;
font-size: $sg-font-size-7;
line-height: $lineHeight;
font-weight: $sg-font-light;
}
.#{$md}-display-3 {
$lineHeight : $sg-line-height-8;
font-size: $sg-font-size-8;
line-height: $lineHeight;
font-weight: $sg-font-regular;
white-space: nowrap;
}
.#{$md}-display-4 {
$lineHeight : $sg-line-height-9;
font-size: $sg-font-size-9;
line-height: $lineHeight;
font-weight: $sg-font-light;
white-space: nowrap;
}
.#{$md}-display-2-subheader {
@extend .#{$md}-title;
margin-bottom: $mg;
font-weight: $sg-font-thin;
}
a,
a:hover,
a:active,
a:visited,
link {
color: inherit;
text-decoration: none;
border: none;
outline: none;
.#{$md}-caption {
font-size: $sg-font-size-1;
line-height: $sg-line-height-1;
font-weight: $sg-font-regular;
white-space: nowrap;
}
.#{$md}-menu {
font-size: $sg-font-size-2;
line-height: $sg-line-height-1;
font-weight: $sg-font-medium;
white-space: nowrap;}
.#{$md}-button {
font-size: $sg-font-size-2;
line-height: $sg-line-height-1;
font-weight: $sg-font-medium;
white-space: nowrap;
text-transform: capitalize;
}
.#{$md}-body-1 {
font-size: $sg-font-size-2;
line-height: $sg-line-height-2;
font-weight: $sg-font-regular;
}
/// @alias .body-1
.#{$md}-body-multi {
@extend .#{$md}-body-1;
}
.#{$md}-body-2 {
$lineHeight : $sg-line-height-2 + $sg-md-typo-baseline;
font-size: $sg-font-size-2;
line-height: $lineHeight;
font-weight: $sg-font-medium;
margin-top: ($lineHeight * -1);
margin-bottom: $lineHeight;
}
/// @alias .body-2
.#{$md}-body-solo {
@extend .#{$md}-body-2;
}
.#{$md}-subhead-1 {
$lineHeight : $sg-line-height-3;
font-size: $sg-font-size-3;
line-height: $lineHeight;
font-weight: $sg-font-regular;
margin-top: ($lineHeight * -1);
margin-bottom: $lineHeight;
}
/// @alias .subhead-1
.#{$md}-subhead-multi {
@extend .#{$md}-subhead-1;
}
.#{$md}-subhead-2 {
$lineHeight : $sg-line-height-3 + $sg-md-typo-baseline;
font-size: $sg-font-size-3;
line-height: $lineHeight;
font-weight: $sg-font-regular;
margin-top: ($lineHeight * -1);
margin-bottom: $lineHeight;
}
/// @alias .subhead-2
.#{$md}-subhead-solo {
@extend .#{$md}-subhead-2;
}
.#{$md}-title {
$lineHeight : $sg-line-height-4;
font-size: $sg-font-size-4;
line-height: $lineHeight;
font-weight: $sg-font-medium;
white-space: nowrap;
}
.#{$md}-headline {
$lineHeight : $sg-line-height-5;
font-size: $sg-font-size-5;
line-height: $lineHeight;
font-weight: $sg-font-regular;
margin-top: 0;
margin-bottom: $line;
}
.#{$md}-display-1 {
$lineHeight : $sg-line-height-6;
font-size: $sg-font-size-6;
line-height: $lineHeight;
font-weight: $sg-font-regular;
}
.#{$md}-display-2 {
$lineHeight: $sg-line-height-7;
font-size: $sg-font-size-7;
line-height: $lineHeight;
font-weight: $sg-font-regular;
white-space: nowrap;
}
.#{$md}-display-2--light {
$lineHeight: $sg-line-height-7;
font-size: $sg-font-size-7;
line-height: $lineHeight;
font-weight: $sg-font-light;
}
.#{$md}-display-3 {
$lineHeight : $sg-line-height-8;
font-size: $sg-font-size-8;
line-height: $lineHeight;
font-weight: $sg-font-regular;
white-space: nowrap;
}
.#{$md}-display-4 {
$lineHeight : $sg-line-height-9;
font-size: $sg-font-size-9;
line-height: $lineHeight;
font-weight: $sg-font-light;
white-space: nowrap;
}
.#{$md}-display-2-subheader {
@extend .#{$md}-title;
margin-bottom: $mg;
font-weight: $sg-font-thin;
white-space: normal;
}
// Date bloc in use on the toolbar
// ----------------------------------------------------------------------------
.sg-date-group {
height: $pitch;
font-size: sg-size(button);
line-height: 1;
text-transform: uppercase;
}
a,
a:hover,
a:active,
a:visited,
link {
color: inherit;
text-decoration: none;
border: none;
outline: none;
}

9
UI/WebServerResources/scss/core/variables.scss
View File

@@ -31,6 +31,10 @@ $line: $baseline-grid;
$sg-md-grid-pitch: 8 * $baseline-grid;
// shortcut alias for $sg-md-grid-pitch
$pitch: $sg-md-grid-pitch;
$touch-zone-width: 48px;
// shortcyut alias for $touch-zone-width
$touch-zone: $touch-zone-width;
// Google specifies dimensions in grid pitch
// This is a small utility function
// Return dimension in px
@@ -49,9 +53,10 @@ $layout-breakpoint-md: 960px !default;
$layout-breakpoint-lg: 1200px !default;
// App bar variables
$app-bar-height: 64px;
$app-bar-height: $sg-md-grid-pitch;
$messageList-width: grid-step(7);
$listView-width: grid-step(6);
$detailView-width: grid-step(8);
$toast-height: $baseline-grid * 3 !default;
$toast-margin: $baseline-grid * 1 !default;

9
UI/WebServerResources/scss/views/ContactsUI.scss
View File

@@ -1,16 +1,15 @@
/*! ContactUI.scss */
[id="contactsList"] {
width: $messageList-width;
max-width:$messageList-width;
flex: 1 0 auto;
[id ="contactsList"] {
flex: 0 0 $listView-width;
}
[id = "contactsList"] .sg-md-subheader {
transform: translateY(-100%); // Compensate the container top-margin
}
// md is overqualifying, we have to do the same to override
md-content[data-ui-view="card"] {
md-content[ui-view="card"] {
flex: 0 0 $detailView-width;
background-color: sg-color($sogoPaper, 200);
}

9
UI/WebServerResources/scss/views/MailerUI.scss
View File

@@ -1,13 +1,10 @@
[id="messagesList"] {
width:$messageList-width;
max-width:$messageList-width;
flex: 1 1 auto;
flex: 0 0 $listView-width;
}
[data-ui-view="message"] {
width: grid-step(9);
max-width: grid-step(9);
[ui-view="message"] {
flex: 0 0 $detailView-width;
}
// Message view header