amorfo77/sogo
1
0
Fork 0
mirror of https://github.com/inverse-inc/sogo.git synced 2026-06-24 03:14:17 +00:00
Code Issues Projects Releases Wiki Activity

(css) Merge autoScrollList.scss with list.scss

Browse Source
This commit is contained in:
Francis Lachapelle
2015-08-07 11:17:09 -04:00
parent fb7d5b628f
commit 52559087b3
6 changed files with 134 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files
UI/Templates/ContactsUI/UIxContactFoldersView.wox
+1 -1
View File
@@ -386,7 +386,7 @@
</div>
-->
<md-virtual-repeat-container class="md-flex">
<md-list>
<md-list class="sg-section-list">
<div md-virtual-repeat="currentCard in addressbook.selectedFolder.cards">
<md-list-item
ng-class="{'sg-active': currentCard.id == addressbook.selectedFolder.selectedCard}"
UI/Templates/MailerUI/UIxMailFolderTemplate.wox
+1 -1
View File
@@ -13,7 +13,7 @@
</h2>
</header>
<md-virtual-repeat-container class="md-flex">
<md-list>
<md-list class="sg-section-list">
<div md-virtual-repeat="currentMessage in mailbox.selectedFolder.$messages">
<md-list-item
ng-class="{'sg-active': currentMessage.uid == mailbox.selectedFolder.selectedMessage, unread: !currentMessage.isread}"
UI/Templates/SchedulerUI/UIxCalMainView.wox
+9 -9
View File
@@ -534,20 +534,20 @@
<!-- Events list -->
<md-tab label:label="Events"
md-on-select="list.selectComponentType('events')">
<md-list>
<md-list-item class="md-clickable md-2-line"
<md-list class="sg-section-list">
<md-list-item class="md-2-line"
ng-repeat="event in list.component.$events"
ng-click="list.openEvent($event, event)">
<i class="md-avatar" ng-class="event.getClassName('bg')" ><!-- calendar color --></i>
<i class="md-tile-left" ng-class="event.getClassName('bg')" ><!-- calendar color --></i>
<div class="md-list-item-text">
<h3>{{event.c_title}}</h3>
<p>{{event.c_location}}</p>
<p class="md-secondary" layout="row">
{{event.formatted_startdate}}
<span class="sg-tile-icons">
<i class="sg-tile-icons">
<md-icon ng-show="event.c_iscycle">repeat</md-icon>
<md-icon ng-show="event.c_nextalarm">alarm</md-icon>
</span>
</i>
</p>
</div>
</md-list-item>
@@ -559,11 +559,11 @@
<!-- Tasks list -->
<md-tab label:label="Tasks"
md-on-select="list.selectComponentType('tasks')">
<md-list>
<md-list-item class="md-clickable md-2-line"
<md-list class="sg-section-list">
<md-list-item class="md-2-line"
ng-repeat="task in list.component.$tasks"
ng-click="list.openTask($event, task)">
<i class="md-avatar" ng-class="task.getClassName('bg')" ><!-- calendar color --></i>
<i class="md-tile-left" ng-class="task.getClassName('bg')" ><!-- calendar color --></i>
<div class="md-list-item-text">
<h3>{{task.c_title}}</h3>
<p class="md-secondary" layout="row">
@@ -575,7 +575,7 @@
</p>
</div>
</md-list-item>
<md-list-item ng-if="list.component.$tasks.length == 0">
<md-list-item disabled="disabled" ng-if="list.component.$tasks.length == 0">
<p class="sg-md-caption"><var:string label:value="No tasks for selected criteria"/></p>
</md-list-item>
</md-list>
UI/WebServerResources/scss/components/autoScrollList/autoScrollList.scss
-100
View File
@@ -1,100 +0,0 @@
/// autoScrollList.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
@import 'extends';
[id='messagesList'],
[id='contactsList'] {
border-top: 44px solid transparent; // padding for the header.subheader,
border-bottom: 2px solid transparent; // close to a hack
md-list-item {
transition: background-color $swift-ease-in-duration $swift-ease-in-timing-function,
color 0.12s linear;
&:hover {
background-color: sg-color($sogoPaper, 300);
color: sg-color($sogoBlue, 800);
cursor: pointer;
}
&:active {
color: sg-color($sogoBlue, 800);
}
&:focus,
&.sg-active {
background-color: sg-color($sogoBlue, 100);
}
}
}
.sg {
&-tile-content {
align-items: baseline;
flex-direction: row;
flex-wrap: wrap;
flex: 1;
justify-content: space-between;
p {
margin: $list-p-margin;
font-size: sg-size(body);
}
.msg-date {
float: right;
font-size: sg-size(body);
font-weight: $sg-font-light;
line-height: $sg-line-height-2;
margin-left: 1em;
}
.#{$md}-subhead-multi,
.#{$md}-subhead-solo,
.#{$md}-body-multi {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.#{$md}-subhead-multi {
@extend .#{$md}-body-1;
font-size: initial;
}
.#{$md}-body-multi {
@extend .#{$md}-caption;
}
}
}
.sg-avatar {
@extend .md-tile-left-card;
margin-right: 0;
margin-left: 0;
}
.sg-list-avatar {
@extend .md-tile-left-list;
margin-right: 0;
margin-left: 0;
}
.sg-selected-avatar {
@extend .md-tile-left-selected;
margin-right: 0;
margin-left: 0;
}
.sg-accepted {
@extend .md-tile-left-accepted;
margin-right: 0;
margin-left: 0;
}
.sg-declined {
@extend .md-tile-left-declined;
margin-right: 0;
margin-left: 0;
}
.sg-delegated {
@extend .md-tile-left-delegated;
margin-right: 0;
margin-left: 0;
}
.sg-needs-action {
@extend .md-tile-left-needs-action;
margin-right: 0;
margin-left: 0;
}
.sg-tentative {
@extend .md-tile-left-tentative;
margin-right: 0;
margin-left: 0;
}
UI/WebServerResources/scss/components/list/list.scss
+123 -16
View File
@@ -25,11 +25,11 @@ md-list-item {
}
// Add some padding to the first icon in a list item
.md-list-item-inner {
> i:first-child {
margin-left: $mg;
}
}
//.md-list-item-inner {
// > i:first-child {
// margin-left: $mg;
// }
//}
// The right tile for a list item.
// ----------------------------------------------------------------------------
@@ -55,18 +55,85 @@ md-list-item {
div.md-tile-left {
min-width: $sg-md-grid-pitch + $baseline-grid;
}
.sg-tile-icons {
md-icon {
font-size: $sg-font-size-1;
color: $colorGray;
margin: 2px;
// Specific lists with a single subheader (sg-md-subheader--fixed) at the top
[id='messagesList'],
[id='contactsList'] {
border-top: 44px solid transparent; // padding for the header.subheader until md-subheader is fixed
}
.sg-section-list {
md-list-item {
transition: background-color $swift-ease-in-duration $swift-ease-in-timing-function,
color 0.12s linear;
&:hover {
background-color: sg-color($sogoPaper, 300);
color: sg-color($sogoBlue, 800);
cursor: pointer;
}
&:active {
color: sg-color($sogoBlue, 800);
}
&:focus,
&.sg-active {
background-color: sg-color($sogoBlue, 100);
}
.md-list-item-inner {
.md-secondary {
// Expect the container to include a sg-tile-icons
right: 0px;
}
}
}
}
.sg {
&-tile-content {
align-items: baseline;
flex-direction: row;
flex-wrap: wrap;
flex: 1;
justify-content: space-between;
p {
margin: $list-p-margin;
font-size: sg-size(body);
}
.msg-date {
float: right;
font-size: sg-size(body);
font-weight: $sg-font-light;
line-height: $sg-line-height-2;
margin-left: 1em;
}
.#{$md}-subhead-multi,
.#{$md}-subhead-solo,
.#{$md}-body-multi {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.#{$md}-subhead-multi {
@extend .#{$md}-body-1;
font-size: initial;
}
.#{$md}-body-multi {
@extend .#{$md}-caption;
}
}
// Small tile of vertically-aligned icons
&-tile-icons {
md-icon {
font-size: $sg-font-size-1;
color: $colorGray;
margin: 2px;
}
display: flex;
flex-direction: column;
align-items: center;
justify-content: start;
width: (2 * $mg);
height:(7 * $line);
}
display: flex;
flex-direction: column;
align-items: center;
justify-content: start;
width: (2 * $mg);
height:(7 * $line);
}
.sg-avatars {
margin: ($mg / 2) 0 0 ($mg / 2);
@@ -123,3 +190,43 @@ div.md-tile-left {
background-color: rgba(255, 255, 0, 0.3) !important;
content: "\e7fd"; // person
}
.sg-avatar {
@extend .md-tile-left-card;
margin-right: 0;
margin-left: 0;
}
.sg-list-avatar {
@extend .md-tile-left-list;
margin-right: 0;
margin-left: 0;
}
.sg-selected-avatar {
@extend .md-tile-left-selected;
margin-right: 0;
margin-left: 0;
}
.sg-accepted {
@extend .md-tile-left-accepted;
margin-right: 0;
margin-left: 0;
}
.sg-declined {
@extend .md-tile-left-declined;
margin-right: 0;
margin-left: 0;
}
.sg-delegated {
@extend .md-tile-left-delegated;
margin-right: 0;
margin-left: 0;
}
.sg-needs-action {
@extend .md-tile-left-needs-action;
margin-right: 0;
margin-left: 0;
}
.sg-tentative {
@extend .md-tile-left-tentative;
margin-right: 0;
margin-left: 0;
}
UI/WebServerResources/scss/styles.scss
-1
View File
@@ -26,7 +26,6 @@
// Original angular-material components
// ------------------------------------------------------------------------------
@import 'components/autocomplete/autocomplete';
@import 'components/autoScrollList/autoScrollList';
@import 'components/backdrop/backdrop';
@import 'components/bottomSheet/bottomSheet';
@import 'components/button/button';