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

(css) Adapt to md changes and improve multi-select

pull/207/head
Francis Lachapelle 2016-04-21 13:40:47 -04:00
parent 6a139b81c1
commit fba40c43d6
14 changed files with 156 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
UI/Contacts/English.lproj/Localizable.strings
View File

@ -228,3 +228,6 @@
"Synchronization" = "Synchronization";
"Synchronize" = "Synchronize";
"Sucessfully subscribed to address book" = "Sucessfully subscribed to address book";
/* Aria label for scope of search on contacts */
"Search scope" = "Search scope";

5
UI/MailerUI/English.lproj/Localizable.strings
View File

@ -345,4 +345,7 @@
"More search options" = "More search options";
"Your email has been saved" = "Your email has been saved";
"Your email has been sent" = "Your email has been sent";
"Folder compacted" = "Folder compacted";
"Folder compacted" = "Folder compacted";
/* Aria label for scope of search on messages */
"Search scope" = "Search scope";

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

@ -27,10 +27,12 @@
md-component-id="left" md-is-locked-open="isGtMedium"
ng-class="{ 'sg-close': leftIsClose }">
<var:component className="UIxSidenavToolbarTemplate" />
<md-content md-scroll-y="md-scroll-y" class="md-flex md-hue-2">
<md-content md-scroll-y="md-scroll-y" class="md-flex"
md-colors="::{ backgroundColor: 'default-background-300' }">
<!-- User's addressbooks -->
<section>
<md-subheader class="sg-md-subheader--icon-button md-hue-2">
<md-subheader class="sg-md-subheader--icon-button"
md-colors="::{background: 'default-background-300'}">
<div layout="row" layout-align="space-between center">
<span><var:string label:value="Address Books"/></span>
<md-button class="sg-icon-button"
@ -111,7 +113,8 @@
</section>
<!-- Subscriptions -->
<section>
<md-subheader class="sg-md-subheader--icon-button md-hue-2">
<md-subheader class="sg-md-subheader--icon-button"
md-colors="::{background: 'default-background-300'}">
<div layout="row" layout-align="space-between center">
<span><var:string label:value="Subscriptions"/></span>
<md-button class="sg-icon-button"
@ -171,7 +174,8 @@
</section>
<!-- Remote/domain addressbooks -->
<section>
<md-subheader class="sg-md-subheader--icon-button md-hue-2">
<md-subheader class="sg-md-subheader--icon-button"
md-colors="::{background: 'default-background-300'}">
<var:string label:value="Global Addressbooks"/>
</md-subheader>
<md-list>
@ -293,7 +297,7 @@
</div>
</md-input-container>
<md-input-container flex="25">
<md-select>
<md-select label:aria-label="Search scope">
<md-option value="name_or_address" selected="selected"><var:string label:value="Name or Email"/></md-option>
<md-option value="category"><var:string label:value="Category"/></md-option>
<md-option value="organization"><var:string label:value="Organization"/></md-option>
@ -381,7 +385,8 @@
</span>
</md-subheader>
<md-virtual-repeat-container class="md-flex" md-top-index="addressbook.selectedFolder.$topIndex">
<md-list class="sg-section-list">
<md-list class="sg-section-list"
ng-class="{ 'sg-list-selectable': addressbook.mode.multiple }">
<md-list-item
class="md-default-theme md-accent md-hue-2"
ng-class="{'md-bg': addressbook.selectedFolder.isSelectedCard(currentCard.id)}"
@ -389,12 +394,22 @@
md-on-demand="md-on-demand" md-item-size="56"
aria-label="{{currentCard.$fullname()}}"
ng-click="addressbook.selectCard(currentCard)">
<div class="md-secondary"
ng-click="addressbook.toggleCardSelection($event, currentCard)">
<div class="md-avatar sg-avatar-selected"
ng-if="currentCard.selected">
<!-- selected avatar -->
<div class="sg-tile-content">
<div class="sg-md-subhead">
<div ng-bind-html="currentCard.$fullname()"><!-- cn --></div>
</div>
<div class="sg-md-body">
<div>{{currentCard.$preferredEmail(addressbook.selectedFolder.constructor.$query)}}</div>
</div>
</div>
<div class="sg-tile-icons"><!-- spacer --></div>
<div class="md-secondary sg-avatar-selectable"
ng-class="{ 'sg-avatar-selected': currentCard.selected }"
ng-click="addressbook.toggleCardSelection($event, currentCard)">
<!-- <div class="md-avatar sg-avatar-selected" -->
<!-- ng-if="currentCard.selected"> -->
<!-- selected avatar -->
<!-- </div> -->
<sg-avatar-image class="md-avatar"
ng-if="addressbook.notSelectedComponent(currentCard, 'vcard')"
sg-email="currentCard.$preferredEmail(addressbook.selectedFolder.constructor.$query)"
@ -407,15 +422,6 @@
<!-- list avatar -->
</div>
</div>
<div class="sg-tile-content">
<div class="sg-md-subhead">
<div ng-bind-html="currentCard.$fullname()"><!-- cn --></div>
</div>
<div class="sg-md-body">
<div>{{currentCard.$preferredEmail(addressbook.selectedFolder.constructor.$query)}}</div>
</div>
</div>
<div class="sg-tile-icons"><!-- spacer --></div>
</md-list-item>
</md-list>
</md-virtual-repeat-container>
@ -434,13 +440,16 @@
</md-content>
</div>
<div id="detailView" class="view-detail md-default-theme md-background md-bg md-hue-2"
<div id="detailView" class="view-detail"
layout="column" layout-align="start center"
ng-class="{ 'sg-close': !addressbook.selectedFolder.selectedCard }"
md-colors="::{backgroundColor: 'default-background-200'}"
ui-view="card">
<md-content class="hide-xs md-flex md-hue-2"
<md-content class="hide-xs md-flex"
md-colors="::{backgroundColor: 'default-background-200'}"
layout="column" layout-align="center center" layout-fill="layout-fill">
<div class="md-default-theme md-background md-fg md-hue-3 sg-md-title"><var:string label:value="No contact selected"/></div>
<div class="sg-md-title"
md-colors="::{color: 'default-background-500'}"><var:string label:value="No contact selected"/></div>
</md-content>
</div>
</div>

25
UI/Templates/MailerUI/UIxMailFolderTemplate.wox
View File

@ -6,7 +6,7 @@
<div class="view-list" layout="column">
<!-- in virtual mailbox mode -->
<md-toolbar class="md-whiteframe-z1"
<md-toolbar class="md-whiteframe-z1 md-hue-3"
ng-hide="!app.showingAdvancedSearch || mailbox.mode.multiple">
<div class="md-toolbar-tools">
<md-input-container class="md-flex">
@ -133,7 +133,7 @@
</div>
</md-input-container>
<md-input-container flex="25">
<md-select>
<md-select label:aria-label="Search scope">
<md-option value="subject" selected="selected"><var:string label:value="Subject"/></md-option>
<md-option value="from"><var:string label:value="Sender"/></md-option>
<md-option value="subject_or_from"><var:string label:value="Subject or Sender"/></md-option>
@ -258,7 +258,8 @@
</span>
</md-subheader>
<md-virtual-repeat-container class="md-flex" md-top-index="mailbox.selectedFolder.$topIndex">
<md-list class="sg-section-list">
<md-list class="sg-section-list"
ng-class="{ 'sg-list-selectable': mailbox.mode.multiple }">
<md-list-item
class="md-default-theme md-accent md-hue-2"
ng-class="{'md-bg': mailbox.selectedFolder.isSelectedMessage(currentMessage.uid, currentMessage.$mailbox.path),
@ -267,15 +268,12 @@
md-on-demand="md-on-demand" md-item-size="56"
ng-click="mailbox.selectMessage(currentMessage)"
aria-label="{{currentMessage.subject}}">
<div class="md-secondary"
ng-click="mailbox.toggleMessageSelection($event, currentMessage)"
ng-switch="currentMessage.selected">
<div class="md-secondary sg-avatar-selectable"
ng-class="{ 'sg-avatar-selected': currentMessage.selected }"
ng-click="mailbox.toggleMessageSelection($event, currentMessage)">
<sg-avatar-image class="md-avatar"
ng-switch-when="false"
sg-email="mailbox.service.selectedFolder.type == 'sent' ? currentMessage.to[0].email : currentMessage.from[0].email"
size="40"><!-- avatar --></sg-avatar-image>
<div class="md-avatar sg-avatar-selected"
ng-switch-when="true"><!-- selected avatar --></div>
</div>
<div class="sg-category"
ng-repeat="tag in currentMessage.flags | limitTo:5"
@ -320,13 +318,16 @@
</md-content>
</div>
<div id="detailView" class="view-detail md-default-theme md-background md-bg md-hue-2"
<div id="detailView" class="view-detail"
layout="column" layout-align="start center"
ng-class="{ 'sg-close': !mailbox.service.selectedFolder.selectedMessage }"
md-colors="::{backgroundColor: 'default-background-200'}"
ui-view="message">
<md-content class="hide-xs md-flex md-hue-2"
<md-content class="hide-xs md-flex"
md-colors="::{backgroundColor: 'default-background-200'}"
layout="column" layout-align="center center" layout-fill="layout-fill">
<div class="md-default-theme md-background md-fg md-hue-3 sg-md-title"><var:string label:value="No message selected"/></div>
<div class="sg-md-title"
md-colors="::{color: 'default-background-500'}"><var:string label:value="No message selected"/></div>
</md-content>
</div>

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

@ -34,10 +34,12 @@
md-component-id="left" md-is-locked-open="isGtMedium"
ng-class="{ 'sg-close': leftIsClose }">
<var:component className="UIxSidenavToolbarTemplate" />
<md-content class="md-flex md-hue-2" layout="column" md-scroll-y="md-scroll-y">
<md-content class="md-flex" layout="column" md-scroll-y="md-scroll-y"
md-colors="::{ backgroundColor: 'default-background-300' }">
<section class="md-flex" layout="column"
ng-repeat="account in app.accounts track by account.id">
<md-subheader class="sg-md-subheader--icon-button md-hue-2">
<md-subheader class="sg-md-subheader--icon-button"
md-colors="::{ backgroundColor: 'default-background-300' }">
<div layout="row" layout-align="start center">
<md-button class="md-icon-button"
ng-show="account.id == 0"
@ -183,9 +185,11 @@
<md-toolbar layout="row" layout-align="space-between center" class="toolbar-main">
<var:component className="UIxTopnavToolbar"/>
</md-toolbar>
<md-content class="md-flex md-hue-2"
<md-content class="md-flex"
md-colors="::{backgroundColor: 'default-background-200'}"
layout="column" layout-align="center center" layout-fill="layout-fill">
<div class="md-default-theme md-background md-fg md-hue-3 sg-md-title">
<div class="sg-md-title"
md-colors="::{color: 'default-background-500'}">
<var:string label:value="No mailbox selected"/>
</div>
</md-content>
@ -199,7 +203,7 @@
</md-toolbar>
<!-- Advanced search toolbar -->
<md-toolbar layout="column" class="md-tall toolbar-main"
<md-toolbar layout="column" class="md-tall toolbar-main md-hue-3"
ng-show="app.showingAdvancedSearch">
<div class="md-toolbar-tools">
<div layout="column" class="md-flex">

27
UI/Templates/SchedulerUI/UIxCalMainView.wox
View File

@ -36,10 +36,12 @@
md-component-id="left" md-is-locked-open="isGtMedium"
ng-class="{ 'sg-close': leftIsClose }">
<var:component className="UIxSidenavToolbarTemplate" />
<md-content class="md-flex md-hue-2" md-scroll-y="md-scroll-y">
<md-content class="md-flex" md-scroll-y="md-scroll-y"
md-colors="::{ backgroundColor: 'default-background-300' }">
<!-- User's calendars -->
<section class="sg-section-list">
<md-subheader class="sg-md-subheader--icon-button md-hue-2">
<md-subheader class="sg-md-subheader--icon-button"
md-colors="::{background: 'default-background-300'}">
<div layout="row" layout-align="space-between center">
<span><var:string label:value="Calendars"/></span>
<md-button class="sg-icon-button"
@ -134,7 +136,8 @@
</section>
<!-- Subscriptions -->
<section class="sg-section-list">
<md-subheader class="sg-md-subheader--icon-button md-hue-2">
<md-subheader class="sg-md-subheader--icon-button"
md-colors="::{background: 'default-background-300'}">
<div layout="row" layout-align="space-between center">
<span><var:string label:value="Subscriptions"/></span>
<md-button class="sg-icon-button"
@ -202,7 +205,8 @@
</section>
<!-- Web Calendars -->
<section class="sg-section-list">
<md-subheader class="sg-md-subheader--icon-button md-hue-2">
<md-subheader class="sg-md-subheader--icon-button"
md-colors="::{background: 'default-background-300'}">
<div layout="row" layout-align="space-between center">
<span><var:string label:value="Web Calendars"/></span>
<md-button class="sg-icon-button"
@ -509,18 +513,17 @@
<md-subheader>
<span>{{list.filterpopup() | loc}}</span>
</md-subheader>
<md-list class="sg-section-list">
<md-list class="sg-section-list"
ng-class="{ 'sg-list-selectable': list.mode.multiple }">
<md-list-item ng-repeat="event in list.component.$events"
aria-label="{{event.c_title}}"
ng-click="list.openEvent($event, event)">
<div class="md-secondary"
<div class="md-secondary sg-avatar-selectable"
label:aria-label="Toggle item"
ng-click="list.toggleComponentSelection($event, event)"
ng-switch="event.selected">
<div class="md-avatar sg-avatar-selected" ng-class="event.getClassName('fg')"
ng-switch-when="true"><!-- selected avatar --></div>
<div class="sg-color-chip" ng-class="event.getClassName('bg')"
ng-switch-when="false"><!-- calendar color --></div>
ng-class="[event.getClassName('fg'), { 'sg-avatar-selected' : event.selected }]"
ng-click="list.toggleComponentSelection($event, event)">
<div class="sg-color-chip"
ng-class="event.getClassName('bg')"><!-- calendar color --></div>
</div>
<div class="sg-category"
ng-repeat="category in event.categories | limitTo:5"

6
UI/WebServerResources/js/Common/Common.app.js
View File

@ -145,7 +145,7 @@
'800': '367d2e',
'900': '225e1b',
// 'A100': 'b9f6ca',
'A100': 'ffffff', // assigned to md-hue-1
'A100': 'fafafa', // assigned to md-hue-1
'A200': '69f0ae',
'A400': '00e676',
'A700': '00c853',
@ -204,12 +204,12 @@
.accentPalette('sogo-green', {
'default': '500',
// 'hue-1': '200',
'hue-1': 'A100',
'hue-1': 'A100', // background-50
'hue-2': '300',
'hue-3': 'A700'
})
.backgroundPalette('grey', {
'default': 'A100',
'default': '50',
'hue-1': '200',
'hue-2': '300',
'hue-3': '500'

3
UI/WebServerResources/js/Common/sgFolderStylesheet.directive.js
View File

@ -29,8 +29,7 @@
template: [
'<style type="text/css">',
/* Background color */
' .bg-folder{{ cssCtrl.ngModel.id }},',
' .bg-folder{{ cssCtrl.ngModel.id }} label {',
' .bg-folder{{ cssCtrl.ngModel.id }} {',
' background-color: {{ cssCtrl.ngModel.color }} !important;',
' color: {{ cssCtrl.contrast(cssCtrl.ngModel.color) }} !important;',
' }',

69
UI/WebServerResources/scss/components/list/list.scss
View File

@ -17,7 +17,27 @@ $sg-avatar-width: 40px;
// Circle diamter of color chips
$sg-color-chip-width: 16px;
/*------------------------------------*\
MD-LIST-ITEM
\*------------------------------------*/
md-list-item {
// Gain some space with secondary action button;
// Impact: list with checkbox in sidevav of Calendar module
&.md-with-secondary ._md-list-item-inner {
padding-right: $bl;
}
// Fix for md-menu visibility when set as a secondary action in a list item
&._md-button-wrap > div.md-button:first-child > .md-button:first-child {
z-index: $z-index-sidenav - 2;
}
._md-secondary-container {
z-index: $z-index-sidenav - 1;
}
._md-list-item-inner {
overflow: hidden;
@ -45,6 +65,11 @@ md-list-item {
}
}
/*------------------------------------*\
MD-SIDENAV
\*------------------------------------*/
.md-sidenav-left {
md-list {
padding: 0;
@ -98,6 +123,7 @@ md-list-item {
.md-tile-right {
padding-right: $item-padding-right;
}
// The right tile for a list item (avatar container)
// ----------------------------------------------------------------------------
@ -124,17 +150,9 @@ div.md-tile-left {
min-width: $sg-md-grid-pitch + $baseline-grid;
}
.sg-section-list {
md-list-item {
&._md-button-wrap {
> .md-button:first-child {
._md-list-item-inner {
// Expect the container to include a sg-tile-icons
padding-right: 0px;
}
}
}
}
.sg-section-list md-list-item._md-button-wrap > .md-button:first-child ._md-list-item-inner {
// Expect the container to include a sg-tile-icons (Mailer module)
padding-right: 0px;
}
.sg {
@ -180,8 +198,8 @@ div.md-tile-left {
&-tile-icons {
display: flex;
flex-direction: column;
align-items: center;
justify-content: start;
align-items: flex-end;
justify-content: center;
width: (2 * $mg);
height: (2 + $sg-font-size-1) * 4; // (vertical padding + icon size) * max number of icons
}
@ -203,6 +221,8 @@ div.md-tile-left {
font-size: $sg-font-size-1;
//color: $colorGray;
margin: 1px 2px;
min-height: $sg-font-size-1;
min-width: $sg-font-size-1;
}
}
@ -265,10 +285,29 @@ sg-avatar-image md-icon.material-icons {
content: "\e80b"; // public
}
}
.sg-avatar-selected {
/*------------------------------------*\
SELECTABLE AVATARS
\*------------------------------------*/
.sg-list-selectable .sg-avatar-selectable,
.sg-avatar-selectable:hover {
font-family: 'Material Icons';
font-size: $sg-avatar-width;
height: 100%;
&:before {
color: inherit;
content: "\e5ca"; // check
content: "\e835"; // check box outline
font-size: $icon-size;
margin: 0 ($sg-avatar-width - $icon-size)/2;
}
&.sg-avatar-selected:before {
content: "\e834"; // check box
}
> * {
display: none;
}
}
//.md-tile-left-accepted:before {

9
UI/WebServerResources/scss/components/sticky/sticky.scss
View File

@ -1 +1,8 @@
@import "extends";
@import "extends";
._md-sticky-clone {
// Increase the z-index of sticky subheaders so it always appear above
// seconday buttons of list items.
// See z-index changes in custom list.scss.
z-index: $z-index-sidenav;
}

7
UI/WebServerResources/scss/components/subheader/subheader.scss
View File

@ -1,10 +1,17 @@
/// subheader.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
@import 'extends';
$sg-subheader-padding-top-bottom: ($subheader-padding - ($icon-button-height - $subheader-font-size)/2);
$sg-subheader-padding-left-right: $baseline-grid;
.sg-md-subheader {
&--icon-button ._md-subheader-inner {
line-height: $sg-avatar-width + ($sg-subheader-padding-top-bottom)*2;
padding: ($subheader-padding - ($icon-button-height - $subheader-font-size)/2) $baseline-grid;
padding: $sg-subheader-padding-top-bottom $sg-subheader-padding-left-right;
padding-left: $subheader-padding;
padding-right: 0;
}
&--fixed {
position: fixed;

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

@ -155,7 +155,7 @@ $z-index-bottom-sheet: 70 !default;
$z-index-scroll-mask: 65 !default;
$z-index-sidenav: 60 !default;
$z-index-backdrop: 50 !default;
$z-index-fab: 20 !default;
$z-index-fab: 60 !default;
$z-index-progress-circular: 2 !default; // Used to fix animation bug in Chrome
$z-index-toolbar: 10 !default;
$z-index-view: 9;

10
UI/WebServerResources/scss/views/SchedulerUI.scss
View File

@ -31,13 +31,9 @@ $quarter_height: 10px;
}
// The color chip is smaller; adjust the "selected" icon accordingly
.sg-avatar-selected {
&:before {
margin-left: -($bl);
}
&.md-avatar:first-child {
margin-right: 0;
}
.sg-list-selectable .sg-avatar-selectable:before,
.sg-avatar-selectable:hover:before {
margin: 0 (($sg-color-chip-width + 2*$bl) - $icon-size)/2;
}
}

4
UI/WebServerResources/scss/views/_view.scss
View File

@ -57,14 +57,16 @@ $listView-width: grid-step(6) !global;
// the left side of the list item.
.md-with-secondary {
._md-list-item-inner {
order: 2;
padding-left: $baseline-grid;
}
._md-secondary-container {
order: -1; // move secondary container to the left
order: 1; // move secondary container to the left
}
.md-secondary {
margin: 0;
padding: 0;
text-align: left;
}
}