amorfo77/sogo
1
0
Fork 0
mirror of https://github.com/inverse-inc/sogo.git synced 2026-03-28 01:22:44 +00:00
Code Issues Projects Releases Wiki Activity

Adapt markup to typographic styles

Browse Source 
- Mail Messages List
This commit is contained in:
iRouge
2015-02-03 13:34:44 -05:00
committed by Francis Lachapelle
parent bd61c354f0
commit 08a76aef97
4 changed files with 33 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,15 +2,16 @@
<container
xmlns = "http://www.w3.org/1999/xhtml"
>
<md-content flex = "40" style = "min-width: 300px;" id = "messagesList">
<!--dirty fix for vs-repeat-->
<md-content flex = "40" style = "min-width: 300px; position: relative;" id = "messagesList">
<style>
.vs-repeat-repeated-element {
width: 100%;
}
</style>
<md-list data-vs-repeat = "72"
data-vs-scroll-parent = "#messagesList">
<!--<md-subheader class="md-default-theme md-primary md-hue-3">Unread Messages</md-subheader>-->
<md-item ng-repeat = "currentMessage in mailbox.$messages track by currentMessage.id"
data-ng-class = "{unread: !currentMessage.isread}">
<md-item-content>
@@ -22,15 +23,14 @@
data-ui-sref-active = "_selected">
<div class = "sg-md-subhead-multi">
{{currentMessage.$shortAddress('from')}}
<span class = "right" data-ng-bind-html = "currentMessage.relativedate"><!-- date --></span>
</div>
<span class = "right" data-ng-bind-html = "currentMessage.relativedate"><!-- date --></span>
<div class = "sg-md-body-multi">{{currentMessage.subject}}</div>
<i class = "icon-ion-refresh"
data-ng-hide = "mailbox.$loadMessage(currentMessage.uid)"><!-- loading --></i>
</a>
</div>
</md-item-content>
<md-divider md-inset = "true" ng-if = "!$last"><!--divider--></md-divider>
</md-item>
</md-list>
</md-content>

5
UI/WebServerResources/scss/_devtools.scss
View File

@@ -21,4 +21,9 @@ html.dev {
content: " ";
z-index: 1000;
}
}
// for visibility while devopping
// ____________________________________________________________________________
.md-tile-left {
background-color: rgba(224, 255, 255, 0.5);
}

8
UI/WebServerResources/scss/components/list/_extends.scss Normal file
View File

@@ -0,0 +1,8 @@
/*! _extends.scss - */
////
/// SOGo
/// Version: #{$Version}
/// Module: list
/// Extends for list from angular-material sources
////
@import '../../../angular-material/src/components/list/list.scss';

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

@@ -1,76 +1,10 @@
$list-h3-font-size: 1.1em !default;
$list-h3-margin: 0 0 3px 0 !default;
$list-h3-font-weight: 400 !default;
$list-h4-font-size: 0.9em !default;
$list-h4-font-weight: 400 !default;
$list-h4-margin: 0 0 3px 0 !default;
$list-p-font-size: 0.75em !default;
$list-p-margin: 0 0 3px 0 !default;
$list-padding-top: $baseline-grid !default;
$list-padding-right: 0px !default;
$list-padding-left: 0px !default;
$list-padding-bottom: $baseline-grid !default;
$item-padding-top: 0px !default;
$item-padding-right: 0px !default;
$item-padding-left: 0px !default;
$item-padding-bottom: 0px !default;
md-list {
padding: $list-padding-top $list-padding-right $list-padding-bottom $list-padding-left;
}
md-item {
}
md-item-content {
display: flex;
align-items: center;
flex-direction: row;
box-sizing: border-box;
position: relative;
padding: $item-padding-top $item-padding-right $item-padding-bottom $item-padding-left;
}
/**
* The left tile for a list item.
*/
.md-tile-left {
min-width: 56px;
margin-right: -16px;
// for dev only
height: 56px;
background-color: grey;
}
/**
* The center content tile for a list item.
*/
.md-tile-content {
flex: 1;
padding: $baseline-grid * 2;
text-overflow: ellipsis;
h3 {
margin: $list-h3-margin;
font-weight: $list-h3-font-weight;
font-size: $list-h3-font-size;
}
h4 {
margin: $list-h4-margin;
font-weight: $list-h4-font-weight;
font-size: $list-h4-font-size;
}
p {
margin: $list-p-margin;
font-size: $list-p-font-size;
}
}
////
/// SOGo
/// Version: #{$Version}
/// Module: List
/// Main definitions for List
////
@import 'extends';
.sg {
&-tile-content {
@extend .md-tile-content;
@@ -95,9 +29,15 @@ md-item-content {
}
}
}
/**
* The right tile for a list item.
*/
// The right tile for a list item.
// ----------------------------------------------------------------------------
.md-tile-right {
padding-right: $item-padding-right;
}
// The right tile for a list item (avatar container)
// ----------------------------------------------------------------------------
.md-tile-left {
border-radius: 100%;
min-height: 56px;
}