Adjust Messages header view

Add ngMaterial directives tomessage composer
This commit is contained in:
iRouge
2015-02-10 03:17:10 -05:00
committed by Francis Lachapelle
parent 4cd6ffcaec
commit 75f38173c5
7 changed files with 108 additions and 45 deletions
+51 -21
View File
@@ -8,26 +8,53 @@
xmlns:uix="OGo:uix"><var:string var:value="doctype" const:escapeHTML="NO" />
<div id="messageEditor">
<form>
<label><var:string label:value="From"/>
<select name="from"
data-ng-model="message.editable.from"
data-ng-options="identity for identity in identities"><!-- from --></select></label>
<label><var:string label:value="To"/>
<tags-input type="text" name="to"
ng-model="message.editable.to"
label:placeholder="Add a recipient">
<auto-complete data-source="userFilter($query)"><!-- to --></auto-complete></tags-input></label>
<label><var:string label:value="Cc"/>
<tags-input type="text" name="cc"
ng-model="message.editable.cc"
label:placeholder="Add a recipient">
<auto-complete data-source="userFilter($query)"><!-- to --></auto-complete></tags-input></label>
<label><var:string label:value="Subject"/>
<input type="text" name="subject" ng-model="message.editable.subject"/></label>
<label><var:string label:value="Attachments"/>
<input type="file"
data-nv-file-select="nv-file-select"
data-uploader="uploader"/></label>
<label>
<var:string label:value="From"/>
</label>
<select name="from"
data-ng-model="message.editable.from"
data-ng-options="identity for identity in identities"><!-- from --></select>
<md-input-container>
<label>
<var:string label:value="To"/>
<input type="text" name="to"
ng-model="message.editable.to"
label:placeholder="Add a recipient">
<auto-complete data-source="userFilter($query)"><!-- to --></auto-complete>
</input>
</label>
</md-input-container>
<md-input-container>
<label>
<var:string label:value="Cc"/>
</label>
<input type="text" name="cc"
ng-model="message.editable.cc"
label:placeholder="Add a recipient">
<auto-complete data-source="userFilter($query)"><!-- to --></auto-complete>
</input>
</md-input-container>
<md-input-container>
<label>
<var:string label:value="Subject"/>
</label>
<input type="text" name="subject" ng-model="message.editable.subject"/>
</md-input-container>
<md-input-container>
<label>
<var:string label:value="Attachments"/>
</label>
<input type="file"
data-nv-file-select="nv-file-select"
data-uploader="uploader"/>
</md-input-container>
<ul>
<li ng-repeat="item in message.editable.attachmentAttrs">
<span ng-bind="item.filename"><!-- filename --></span>
@@ -36,7 +63,10 @@
<span ng-bind="item.file.name"><!-- filename --></span> (<span ng-bind="item.file.progress"><!-- progress --></span>)
</li>
</ul>
<textarea name="content" var:class="editorClass" ng-model="message.editable.text"/>
<textarea name="content" var:class="editorClass" ng-model="message.editable.text"/>
<div class="buttonsToolbar">
<span>
<a class="button tiny radius"
+21 -10
View File
@@ -8,22 +8,32 @@
xmlns:uix="OGo:uix">
<md-content md-scroll-y="md-scroll-y" class="md-padding">
<header class="header">
<header class="msg-header">
<hgroup>
<h3 class="sg-md-headline" data-ng-bind="message.subject"><!-- subject --></h3>
<div class="msg-header-group">
<div class="md-tile-left">
<!--avatar-->
<div layout="row" layout-align="start center">
<label>
<var:string label:value="From"/>
</label>
<div class="sg-avatar">
<!--avatar-->
</div>
<div class="sg-md-body-multi name">
<a data-ng-href="mailto:{{message.from[0].email}}" data-ng-bind="message.from[0].full"><!-- from --></a>
</div>
</div>
<div class="sg-md-body-multi name">
<a data-ng-href="mailto:{{message.from[0].email}}" data-ng-bind="message.from[0].full"><!-- from --></a>
<div layout="row" layout-align="start center">
<label>
<var:string label:value="To"/>
</label>
<div class="sg-md-body-multi">
<a data-ng-href="mailto:{{message.to[0].email}}" data-ng-bind="message.to[0].full"><!-- to --></a>
</div>
</div>
<div class="msg-date sg-md-body-multi"><span data-ng-bind="message.date"><!-- date --></span></div>
</div>
<div>
<a data-ng-href="mailto:{{message.to[0].email}}" data-ng-bind="message.to[0].full"><!-- to --></a>
</div>
<p class="flags">
<span class="label radius" data-ng-repeat="flag in message.flags">{{flag}}</span>
</p>
@@ -46,7 +56,8 @@
data-ng-click="loadImages()"><var:string label:value="Load Images"/></span>
</div>
</header>
<md-divider><!-- divider --></md-divider>
<div class="msg-date sg-md-body-multi"><span data-ng-bind="message.date"><!-- date --></span></div>
<div class="mailer_mailcontent"
data-ng-bind-html="message.$content()"><!-- msg --></div>
</md-content>
@@ -59,7 +59,7 @@ $paletteBlueGrey: #eceff1 #cfd8dc #b0bec5 #90a4ae #78909c #607d8b #546e7a #455a6
// ---------------------------------------------------------------------------
$sogoPaper: (
50: #fcf7f8,
50: #fcfbf8,
100: #f7f1dc,
200: #ede5ca,
300: #e6d8ba,
@@ -81,3 +81,7 @@
flex-wrap: wrap;
}
}
.sg-avatar {
@extend .md-tile-left;
margin-right: 0;
}
@@ -18,20 +18,17 @@ hgroup {
}
}
.sg-icon-bar {
font-size: $sg-font-size-5;
font-size: $sg-font-size-3;
color: $colorGray;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
width: ($pitch);
height:(3 * $pitch);
margin-right: $mg * -1;
height:(2 * $pitch);
margin-left: $mg;
}
.sg-icon-bar *.button {
display: block;
margin: 0 auto;
width: (2 * $mg);
}
+27 -6
View File
@@ -9,17 +9,38 @@
[data-ui-view="message"] {
max-width: grid-step(8);
}
.msg-header {
padding-bottom: $mg;
}
.msg-header-group {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
[layout="row"] + [layout="row"] {
margin-top: -1 * 1em;
}
}
.msg-header-group .sg-md-body-multi.name,
.msg-header-group .sg-md-body-multi.name {}
.msg-date {
padding: $mg 0 0 $mg;
margin: $mg 0;
text-align: right;
}
.msg-header label {
font-size: sg-size(caption) - 1; // -1px to compensate for the uppercase and simulate Small caps
text-transform: uppercase;
margin-right: $mg;
width: ($pitch + $bl);
text-align: right;
line-height: $sg-line-height-2;
font-weight: 600;
color: $colorGray;
}
.mailer_mailcontent {
@extend .sg-md-body-multi;
}