(css) Adapt to md changes and improve multi-select
parent
6a139b81c1
commit
fba40c43d6
|
@ -228,3 +228,6 @@
|
||||||
"Synchronization" = "Synchronization";
|
"Synchronization" = "Synchronization";
|
||||||
"Synchronize" = "Synchronize";
|
"Synchronize" = "Synchronize";
|
||||||
"Sucessfully subscribed to address book" = "Sucessfully subscribed to address book";
|
"Sucessfully subscribed to address book" = "Sucessfully subscribed to address book";
|
||||||
|
|
||||||
|
/* Aria label for scope of search on contacts */
|
||||||
|
"Search scope" = "Search scope";
|
|
@ -345,4 +345,7 @@
|
||||||
"More search options" = "More search options";
|
"More search options" = "More search options";
|
||||||
"Your email has been saved" = "Your email has been saved";
|
"Your email has been saved" = "Your email has been saved";
|
||||||
"Your email has been sent" = "Your email has been sent";
|
"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";
|
|
@ -27,10 +27,12 @@
|
||||||
md-component-id="left" md-is-locked-open="isGtMedium"
|
md-component-id="left" md-is-locked-open="isGtMedium"
|
||||||
ng-class="{ 'sg-close': leftIsClose }">
|
ng-class="{ 'sg-close': leftIsClose }">
|
||||||
<var:component className="UIxSidenavToolbarTemplate" />
|
<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 -->
|
<!-- User's addressbooks -->
|
||||||
<section>
|
<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">
|
<div layout="row" layout-align="space-between center">
|
||||||
<span><var:string label:value="Address Books"/></span>
|
<span><var:string label:value="Address Books"/></span>
|
||||||
<md-button class="sg-icon-button"
|
<md-button class="sg-icon-button"
|
||||||
|
@ -111,7 +113,8 @@
|
||||||
</section>
|
</section>
|
||||||
<!-- Subscriptions -->
|
<!-- Subscriptions -->
|
||||||
<section>
|
<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">
|
<div layout="row" layout-align="space-between center">
|
||||||
<span><var:string label:value="Subscriptions"/></span>
|
<span><var:string label:value="Subscriptions"/></span>
|
||||||
<md-button class="sg-icon-button"
|
<md-button class="sg-icon-button"
|
||||||
|
@ -171,7 +174,8 @@
|
||||||
</section>
|
</section>
|
||||||
<!-- Remote/domain addressbooks -->
|
<!-- Remote/domain addressbooks -->
|
||||||
<section>
|
<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"/>
|
<var:string label:value="Global Addressbooks"/>
|
||||||
</md-subheader>
|
</md-subheader>
|
||||||
<md-list>
|
<md-list>
|
||||||
|
@ -293,7 +297,7 @@
|
||||||
</div>
|
</div>
|
||||||
</md-input-container>
|
</md-input-container>
|
||||||
<md-input-container flex="25">
|
<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="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="category"><var:string label:value="Category"/></md-option>
|
||||||
<md-option value="organization"><var:string label:value="Organization"/></md-option>
|
<md-option value="organization"><var:string label:value="Organization"/></md-option>
|
||||||
|
@ -381,7 +385,8 @@
|
||||||
</span>
|
</span>
|
||||||
</md-subheader>
|
</md-subheader>
|
||||||
<md-virtual-repeat-container class="md-flex" md-top-index="addressbook.selectedFolder.$topIndex">
|
<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
|
<md-list-item
|
||||||
class="md-default-theme md-accent md-hue-2"
|
class="md-default-theme md-accent md-hue-2"
|
||||||
ng-class="{'md-bg': addressbook.selectedFolder.isSelectedCard(currentCard.id)}"
|
ng-class="{'md-bg': addressbook.selectedFolder.isSelectedCard(currentCard.id)}"
|
||||||
|
@ -389,12 +394,22 @@
|
||||||
md-on-demand="md-on-demand" md-item-size="56"
|
md-on-demand="md-on-demand" md-item-size="56"
|
||||||
aria-label="{{currentCard.$fullname()}}"
|
aria-label="{{currentCard.$fullname()}}"
|
||||||
ng-click="addressbook.selectCard(currentCard)">
|
ng-click="addressbook.selectCard(currentCard)">
|
||||||
<div class="md-secondary"
|
<div class="sg-tile-content">
|
||||||
ng-click="addressbook.toggleCardSelection($event, currentCard)">
|
<div class="sg-md-subhead">
|
||||||
<div class="md-avatar sg-avatar-selected"
|
<div ng-bind-html="currentCard.$fullname()"><!-- cn --></div>
|
||||||
ng-if="currentCard.selected">
|
|
||||||
<!-- selected avatar -->
|
|
||||||
</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"
|
<sg-avatar-image class="md-avatar"
|
||||||
ng-if="addressbook.notSelectedComponent(currentCard, 'vcard')"
|
ng-if="addressbook.notSelectedComponent(currentCard, 'vcard')"
|
||||||
sg-email="currentCard.$preferredEmail(addressbook.selectedFolder.constructor.$query)"
|
sg-email="currentCard.$preferredEmail(addressbook.selectedFolder.constructor.$query)"
|
||||||
|
@ -407,15 +422,6 @@
|
||||||
<!-- list avatar -->
|
<!-- list avatar -->
|
||||||
</div>
|
</div>
|
||||||
</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-item>
|
||||||
</md-list>
|
</md-list>
|
||||||
</md-virtual-repeat-container>
|
</md-virtual-repeat-container>
|
||||||
|
@ -434,13 +440,16 @@
|
||||||
</md-content>
|
</md-content>
|
||||||
</div>
|
</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"
|
layout="column" layout-align="start center"
|
||||||
ng-class="{ 'sg-close': !addressbook.selectedFolder.selectedCard }"
|
ng-class="{ 'sg-close': !addressbook.selectedFolder.selectedCard }"
|
||||||
|
md-colors="::{backgroundColor: 'default-background-200'}"
|
||||||
ui-view="card">
|
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">
|
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>
|
</md-content>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -6,7 +6,7 @@
|
||||||
<div class="view-list" layout="column">
|
<div class="view-list" layout="column">
|
||||||
|
|
||||||
<!-- in virtual mailbox mode -->
|
<!-- 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">
|
ng-hide="!app.showingAdvancedSearch || mailbox.mode.multiple">
|
||||||
<div class="md-toolbar-tools">
|
<div class="md-toolbar-tools">
|
||||||
<md-input-container class="md-flex">
|
<md-input-container class="md-flex">
|
||||||
|
@ -133,7 +133,7 @@
|
||||||
</div>
|
</div>
|
||||||
</md-input-container>
|
</md-input-container>
|
||||||
<md-input-container flex="25">
|
<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="subject" selected="selected"><var:string label:value="Subject"/></md-option>
|
||||||
<md-option value="from"><var:string label:value="Sender"/></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>
|
<md-option value="subject_or_from"><var:string label:value="Subject or Sender"/></md-option>
|
||||||
|
@ -258,7 +258,8 @@
|
||||||
</span>
|
</span>
|
||||||
</md-subheader>
|
</md-subheader>
|
||||||
<md-virtual-repeat-container class="md-flex" md-top-index="mailbox.selectedFolder.$topIndex">
|
<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
|
<md-list-item
|
||||||
class="md-default-theme md-accent md-hue-2"
|
class="md-default-theme md-accent md-hue-2"
|
||||||
ng-class="{'md-bg': mailbox.selectedFolder.isSelectedMessage(currentMessage.uid, currentMessage.$mailbox.path),
|
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"
|
md-on-demand="md-on-demand" md-item-size="56"
|
||||||
ng-click="mailbox.selectMessage(currentMessage)"
|
ng-click="mailbox.selectMessage(currentMessage)"
|
||||||
aria-label="{{currentMessage.subject}}">
|
aria-label="{{currentMessage.subject}}">
|
||||||
<div class="md-secondary"
|
<div class="md-secondary sg-avatar-selectable"
|
||||||
ng-click="mailbox.toggleMessageSelection($event, currentMessage)"
|
ng-class="{ 'sg-avatar-selected': currentMessage.selected }"
|
||||||
ng-switch="currentMessage.selected">
|
ng-click="mailbox.toggleMessageSelection($event, currentMessage)">
|
||||||
<sg-avatar-image class="md-avatar"
|
<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"
|
sg-email="mailbox.service.selectedFolder.type == 'sent' ? currentMessage.to[0].email : currentMessage.from[0].email"
|
||||||
size="40"><!-- avatar --></sg-avatar-image>
|
size="40"><!-- avatar --></sg-avatar-image>
|
||||||
<div class="md-avatar sg-avatar-selected"
|
|
||||||
ng-switch-when="true"><!-- selected avatar --></div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="sg-category"
|
<div class="sg-category"
|
||||||
ng-repeat="tag in currentMessage.flags | limitTo:5"
|
ng-repeat="tag in currentMessage.flags | limitTo:5"
|
||||||
|
@ -320,13 +318,16 @@
|
||||||
</md-content>
|
</md-content>
|
||||||
</div>
|
</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"
|
layout="column" layout-align="start center"
|
||||||
ng-class="{ 'sg-close': !mailbox.service.selectedFolder.selectedMessage }"
|
ng-class="{ 'sg-close': !mailbox.service.selectedFolder.selectedMessage }"
|
||||||
|
md-colors="::{backgroundColor: 'default-background-200'}"
|
||||||
ui-view="message">
|
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">
|
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>
|
</md-content>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -34,10 +34,12 @@
|
||||||
md-component-id="left" md-is-locked-open="isGtMedium"
|
md-component-id="left" md-is-locked-open="isGtMedium"
|
||||||
ng-class="{ 'sg-close': leftIsClose }">
|
ng-class="{ 'sg-close': leftIsClose }">
|
||||||
<var:component className="UIxSidenavToolbarTemplate" />
|
<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"
|
<section class="md-flex" layout="column"
|
||||||
ng-repeat="account in app.accounts track by account.id">
|
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">
|
<div layout="row" layout-align="start center">
|
||||||
<md-button class="md-icon-button"
|
<md-button class="md-icon-button"
|
||||||
ng-show="account.id == 0"
|
ng-show="account.id == 0"
|
||||||
|
@ -183,9 +185,11 @@
|
||||||
<md-toolbar layout="row" layout-align="space-between center" class="toolbar-main">
|
<md-toolbar layout="row" layout-align="space-between center" class="toolbar-main">
|
||||||
<var:component className="UIxTopnavToolbar"/>
|
<var:component className="UIxTopnavToolbar"/>
|
||||||
</md-toolbar>
|
</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">
|
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"/>
|
<var:string label:value="No mailbox selected"/>
|
||||||
</div>
|
</div>
|
||||||
</md-content>
|
</md-content>
|
||||||
|
@ -199,7 +203,7 @@
|
||||||
</md-toolbar>
|
</md-toolbar>
|
||||||
|
|
||||||
<!-- Advanced search 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">
|
ng-show="app.showingAdvancedSearch">
|
||||||
<div class="md-toolbar-tools">
|
<div class="md-toolbar-tools">
|
||||||
<div layout="column" class="md-flex">
|
<div layout="column" class="md-flex">
|
||||||
|
|
|
@ -36,10 +36,12 @@
|
||||||
md-component-id="left" md-is-locked-open="isGtMedium"
|
md-component-id="left" md-is-locked-open="isGtMedium"
|
||||||
ng-class="{ 'sg-close': leftIsClose }">
|
ng-class="{ 'sg-close': leftIsClose }">
|
||||||
<var:component className="UIxSidenavToolbarTemplate" />
|
<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 -->
|
<!-- User's calendars -->
|
||||||
<section class="sg-section-list">
|
<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">
|
<div layout="row" layout-align="space-between center">
|
||||||
<span><var:string label:value="Calendars"/></span>
|
<span><var:string label:value="Calendars"/></span>
|
||||||
<md-button class="sg-icon-button"
|
<md-button class="sg-icon-button"
|
||||||
|
@ -134,7 +136,8 @@
|
||||||
</section>
|
</section>
|
||||||
<!-- Subscriptions -->
|
<!-- Subscriptions -->
|
||||||
<section class="sg-section-list">
|
<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">
|
<div layout="row" layout-align="space-between center">
|
||||||
<span><var:string label:value="Subscriptions"/></span>
|
<span><var:string label:value="Subscriptions"/></span>
|
||||||
<md-button class="sg-icon-button"
|
<md-button class="sg-icon-button"
|
||||||
|
@ -202,7 +205,8 @@
|
||||||
</section>
|
</section>
|
||||||
<!-- Web Calendars -->
|
<!-- Web Calendars -->
|
||||||
<section class="sg-section-list">
|
<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">
|
<div layout="row" layout-align="space-between center">
|
||||||
<span><var:string label:value="Web Calendars"/></span>
|
<span><var:string label:value="Web Calendars"/></span>
|
||||||
<md-button class="sg-icon-button"
|
<md-button class="sg-icon-button"
|
||||||
|
@ -509,18 +513,17 @@
|
||||||
<md-subheader>
|
<md-subheader>
|
||||||
<span>{{list.filterpopup() | loc}}</span>
|
<span>{{list.filterpopup() | loc}}</span>
|
||||||
</md-subheader>
|
</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"
|
<md-list-item ng-repeat="event in list.component.$events"
|
||||||
aria-label="{{event.c_title}}"
|
aria-label="{{event.c_title}}"
|
||||||
ng-click="list.openEvent($event, event)">
|
ng-click="list.openEvent($event, event)">
|
||||||
<div class="md-secondary"
|
<div class="md-secondary sg-avatar-selectable"
|
||||||
label:aria-label="Toggle item"
|
label:aria-label="Toggle item"
|
||||||
ng-click="list.toggleComponentSelection($event, event)"
|
ng-class="[event.getClassName('fg'), { 'sg-avatar-selected' : event.selected }]"
|
||||||
ng-switch="event.selected">
|
ng-click="list.toggleComponentSelection($event, event)">
|
||||||
<div class="md-avatar sg-avatar-selected" ng-class="event.getClassName('fg')"
|
<div class="sg-color-chip"
|
||||||
ng-switch-when="true"><!-- selected avatar --></div>
|
ng-class="event.getClassName('bg')"><!-- calendar color --></div>
|
||||||
<div class="sg-color-chip" ng-class="event.getClassName('bg')"
|
|
||||||
ng-switch-when="false"><!-- calendar color --></div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="sg-category"
|
<div class="sg-category"
|
||||||
ng-repeat="category in event.categories | limitTo:5"
|
ng-repeat="category in event.categories | limitTo:5"
|
||||||
|
|
|
@ -145,7 +145,7 @@
|
||||||
'800': '367d2e',
|
'800': '367d2e',
|
||||||
'900': '225e1b',
|
'900': '225e1b',
|
||||||
// 'A100': 'b9f6ca',
|
// 'A100': 'b9f6ca',
|
||||||
'A100': 'ffffff', // assigned to md-hue-1
|
'A100': 'fafafa', // assigned to md-hue-1
|
||||||
'A200': '69f0ae',
|
'A200': '69f0ae',
|
||||||
'A400': '00e676',
|
'A400': '00e676',
|
||||||
'A700': '00c853',
|
'A700': '00c853',
|
||||||
|
@ -204,12 +204,12 @@
|
||||||
.accentPalette('sogo-green', {
|
.accentPalette('sogo-green', {
|
||||||
'default': '500',
|
'default': '500',
|
||||||
// 'hue-1': '200',
|
// 'hue-1': '200',
|
||||||
'hue-1': 'A100',
|
'hue-1': 'A100', // background-50
|
||||||
'hue-2': '300',
|
'hue-2': '300',
|
||||||
'hue-3': 'A700'
|
'hue-3': 'A700'
|
||||||
})
|
})
|
||||||
.backgroundPalette('grey', {
|
.backgroundPalette('grey', {
|
||||||
'default': 'A100',
|
'default': '50',
|
||||||
'hue-1': '200',
|
'hue-1': '200',
|
||||||
'hue-2': '300',
|
'hue-2': '300',
|
||||||
'hue-3': '500'
|
'hue-3': '500'
|
||||||
|
|
|
@ -29,8 +29,7 @@
|
||||||
template: [
|
template: [
|
||||||
'<style type="text/css">',
|
'<style type="text/css">',
|
||||||
/* Background color */
|
/* Background color */
|
||||||
' .bg-folder{{ cssCtrl.ngModel.id }},',
|
' .bg-folder{{ cssCtrl.ngModel.id }} {',
|
||||||
' .bg-folder{{ cssCtrl.ngModel.id }} label {',
|
|
||||||
' background-color: {{ cssCtrl.ngModel.color }} !important;',
|
' background-color: {{ cssCtrl.ngModel.color }} !important;',
|
||||||
' color: {{ cssCtrl.contrast(cssCtrl.ngModel.color) }} !important;',
|
' color: {{ cssCtrl.contrast(cssCtrl.ngModel.color) }} !important;',
|
||||||
' }',
|
' }',
|
||||||
|
|
|
@ -17,7 +17,27 @@ $sg-avatar-width: 40px;
|
||||||
// Circle diamter of color chips
|
// Circle diamter of color chips
|
||||||
$sg-color-chip-width: 16px;
|
$sg-color-chip-width: 16px;
|
||||||
|
|
||||||
|
|
||||||
|
/*------------------------------------*\
|
||||||
|
MD-LIST-ITEM
|
||||||
|
\*------------------------------------*/
|
||||||
|
|
||||||
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 {
|
._md-list-item-inner {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
|
@ -45,6 +65,11 @@ md-list-item {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*------------------------------------*\
|
||||||
|
MD-SIDENAV
|
||||||
|
\*------------------------------------*/
|
||||||
|
|
||||||
.md-sidenav-left {
|
.md-sidenav-left {
|
||||||
md-list {
|
md-list {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
@ -98,6 +123,7 @@ md-list-item {
|
||||||
.md-tile-right {
|
.md-tile-right {
|
||||||
padding-right: $item-padding-right;
|
padding-right: $item-padding-right;
|
||||||
}
|
}
|
||||||
|
|
||||||
// The right tile for a list item (avatar container)
|
// 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;
|
min-width: $sg-md-grid-pitch + $baseline-grid;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sg-section-list {
|
.sg-section-list md-list-item._md-button-wrap > .md-button:first-child ._md-list-item-inner {
|
||||||
md-list-item {
|
// Expect the container to include a sg-tile-icons (Mailer module)
|
||||||
&._md-button-wrap {
|
padding-right: 0px;
|
||||||
> .md-button:first-child {
|
|
||||||
._md-list-item-inner {
|
|
||||||
// Expect the container to include a sg-tile-icons
|
|
||||||
padding-right: 0px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.sg {
|
.sg {
|
||||||
|
@ -180,8 +198,8 @@ div.md-tile-left {
|
||||||
&-tile-icons {
|
&-tile-icons {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: flex-end;
|
||||||
justify-content: start;
|
justify-content: center;
|
||||||
width: (2 * $mg);
|
width: (2 * $mg);
|
||||||
height: (2 + $sg-font-size-1) * 4; // (vertical padding + icon size) * max number of icons
|
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;
|
font-size: $sg-font-size-1;
|
||||||
//color: $colorGray;
|
//color: $colorGray;
|
||||||
margin: 1px 2px;
|
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
|
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 {
|
&:before {
|
||||||
color: inherit;
|
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 {
|
//.md-tile-left-accepted:before {
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
|
@ -1,10 +1,17 @@
|
||||||
/// subheader.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
|
/// subheader.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
|
||||||
@import 'extends';
|
@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 {
|
.sg-md-subheader {
|
||||||
&--icon-button ._md-subheader-inner {
|
&--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: ($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-left: $subheader-padding;
|
||||||
|
padding-right: 0;
|
||||||
}
|
}
|
||||||
&--fixed {
|
&--fixed {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
|
@ -155,7 +155,7 @@ $z-index-bottom-sheet: 70 !default;
|
||||||
$z-index-scroll-mask: 65 !default;
|
$z-index-scroll-mask: 65 !default;
|
||||||
$z-index-sidenav: 60 !default;
|
$z-index-sidenav: 60 !default;
|
||||||
$z-index-backdrop: 50 !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-progress-circular: 2 !default; // Used to fix animation bug in Chrome
|
||||||
$z-index-toolbar: 10 !default;
|
$z-index-toolbar: 10 !default;
|
||||||
$z-index-view: 9;
|
$z-index-view: 9;
|
||||||
|
|
|
@ -31,13 +31,9 @@ $quarter_height: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
// The color chip is smaller; adjust the "selected" icon accordingly
|
// The color chip is smaller; adjust the "selected" icon accordingly
|
||||||
.sg-avatar-selected {
|
.sg-list-selectable .sg-avatar-selectable:before,
|
||||||
&:before {
|
.sg-avatar-selectable:hover:before {
|
||||||
margin-left: -($bl);
|
margin: 0 (($sg-color-chip-width + 2*$bl) - $icon-size)/2;
|
||||||
}
|
|
||||||
&.md-avatar:first-child {
|
|
||||||
margin-right: 0;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -57,14 +57,16 @@ $listView-width: grid-step(6) !global;
|
||||||
// the left side of the list item.
|
// the left side of the list item.
|
||||||
.md-with-secondary {
|
.md-with-secondary {
|
||||||
._md-list-item-inner {
|
._md-list-item-inner {
|
||||||
|
order: 2;
|
||||||
padding-left: $baseline-grid;
|
padding-left: $baseline-grid;
|
||||||
}
|
}
|
||||||
._md-secondary-container {
|
._md-secondary-container {
|
||||||
order: -1; // move secondary container to the left
|
order: 1; // move secondary container to the left
|
||||||
}
|
}
|
||||||
.md-secondary {
|
.md-secondary {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
text-align: left;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue