mirror of
https://github.com/inverse-inc/sogo.git
synced 2026-08-19 13:43:22 +00:00
Styled ngTags for Mail editor and propose a chip-like version of tags
This commit is contained in:
iRouge
committed by
Francis Lachapelle
Francis Lachapelle
parent
df8b4e302f
commit
780d757d6b
@@ -22,16 +22,16 @@
|
||||
</div>
|
||||
|
||||
<div class="PseudoField">
|
||||
<label class="PseudoField-label">
|
||||
<label class="PseudoField-label" ng-class="{focused: to.hasFocus}">
|
||||
<var:string label:value="To"/>
|
||||
</label>
|
||||
<div class="PseudoField-inputLike">
|
||||
|
||||
<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>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="PseudoField">
|
||||
<label class="PseudoField-label">
|
||||
@@ -77,18 +77,16 @@
|
||||
</ul>
|
||||
<textarea name="content" var:class="editorClass" ng-model="message.editable.text"/>
|
||||
<div class="buttonsToolbar">
|
||||
<span>
|
||||
<a class="button tiny radius"
|
||||
<div layout="row" layout-align="end center">
|
||||
<md-button
|
||||
data-ng-click="message.$save()">
|
||||
<i class="icon-disk"><!-- send --></i>
|
||||
<var:string label:value="Save"/>
|
||||
</a>
|
||||
<a class="button tiny radius"
|
||||
</md-button>
|
||||
<md-button class="fg-sogoBlue-700"
|
||||
data-ng-click="send(message)">
|
||||
<i class="icon-mail"><!-- send --></i>
|
||||
<var:string label:value="Send"/>
|
||||
</a>
|
||||
</span>
|
||||
</md-button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -82,31 +82,31 @@
|
||||
<var:if condition="shortUserNameForDisplay" const:value="anonymous" const:negate="YES">
|
||||
<md-toolbar class="sg-bottombar md-hide-sm" layout="row" layout-align="center center">
|
||||
<var:if condition = "userHasCalendarAccess">
|
||||
<var:if condition = "isCalendar">
|
||||
<md-button ng-disabled = "true">
|
||||
<var:string label:value = "Calendar" />
|
||||
<var:if condition="isCalendar">
|
||||
<md-button ng-disabled="true">
|
||||
<var:string label:value="Calendar"/>
|
||||
</md-button>
|
||||
</var:if>
|
||||
<var:if condition = "isCalendar" const:negate = "YES">
|
||||
<md-button var:href = "relativeCalendarPath">
|
||||
<var:string label:value = "Calendar" />
|
||||
<var:if condition="isCalendar" const:negate="YES">
|
||||
<md-button var:href="relativeCalendarPath">
|
||||
<var:string label:value="Calendar"/>
|
||||
</md-button>
|
||||
</var:if>
|
||||
</var:if>
|
||||
<var:if condition = "isContacts">
|
||||
<md-button ng-disabled = "true">
|
||||
<var:string label:value = "Address Book" />
|
||||
<var:if condition="isContacts">
|
||||
<md-button ng-disabled="true">
|
||||
<var:string label:value="Address Book"/>
|
||||
</md-button>
|
||||
</var:if>
|
||||
<var:if condition = "isContacts" const:negate = "YES">
|
||||
<md-button var:href = "relativeContactsPath">
|
||||
<var:string label:value = "Address Book" />
|
||||
<var:if condition="isContacts" const:negate="YES">
|
||||
<md-button var:href="relativeContactsPath">
|
||||
<var:string label:value="Address Book"/>
|
||||
</md-button>
|
||||
</var:if>
|
||||
<var:if condition = "userHasMailAccess">
|
||||
<var:if condition = "isMail">
|
||||
<md-button ng-disabled = "true">
|
||||
<var:string label:value = "Mail" />
|
||||
<var:if condition="userHasMailAccess">
|
||||
<var:if condition="isMail">
|
||||
<md-button ng-disabled="true">
|
||||
<var:string label:value="Mail"/>
|
||||
</md-button>
|
||||
</var:if>
|
||||
<var:if condition = "isMail" const:negate = "YES">
|
||||
|
||||
@@ -7,42 +7,58 @@ tags-input *, tags-input *:before, tags-input *:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
tags-input .host {
|
||||
@extend .PseudoField-inputLike;
|
||||
position: relative;
|
||||
|
||||
}
|
||||
tags-input .host:active {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
tags-input .tags {
|
||||
@extend .PseudoField-inputLike;
|
||||
padding: 0;
|
||||
line-height: 2 * $mg;
|
||||
word-wrap: break-word;
|
||||
cursor: text;
|
||||
|
||||
border-bottom: 1px solid $colorGrayLight;
|
||||
transition: $swift-ease-out;
|
||||
}
|
||||
tags-input .tags.focused {
|
||||
border-bottom: 2px solid sg-color($sogoBlue, 700);
|
||||
}
|
||||
|
||||
tags-input/deep/#inner-editor {
|
||||
color: $colorGrayLight;
|
||||
line-height: inherit;
|
||||
}
|
||||
:root/deep/#placeholder,
|
||||
:root/deep/[pseudo="-webkit-input-placeholder"] {
|
||||
color: $colorGrayLight;
|
||||
height: $mg;
|
||||
font: inherit;
|
||||
line-height: inherit;
|
||||
padding: 0;
|
||||
}
|
||||
tags-input .tags .tag-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
// Trying to make it chip-like
|
||||
tags-input .tags .tag-item {
|
||||
margin: 2px;
|
||||
padding: 0 5px;
|
||||
padding: $line $mg;
|
||||
display: inline-block;
|
||||
float: left;
|
||||
font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
height: 26px;
|
||||
line-height: 25px;
|
||||
border: 1px solid #acacac;
|
||||
border-radius: 3px;
|
||||
background: -webkit-linear-gradient(top, #f0f9ff 0%, #cbebff 47%, #a1dbff 100%);
|
||||
background: linear-gradient(to bottom, #f0f9ff 0%, #cbebff 47%, #a1dbff 100%);
|
||||
height: (4 * $line);
|
||||
font-size: sg-size(body);
|
||||
line-height: (2 * $line);
|
||||
border: none;
|
||||
border-radius: (2 * $line);
|
||||
background-color: sg-color($sogoPaper, 400);
|
||||
}
|
||||
tags-input .tags .tag-item.selected {
|
||||
background: -webkit-linear-gradient(top, #febbbb 0%, #fe9090 45%, #ff5c5c 100%);
|
||||
background: linear-gradient(to bottom, #febbbb 0%, #fe9090 45%, #ff5c5c 100%);
|
||||
|
||||
}
|
||||
tags-input .tags .tag-item .remove-button {
|
||||
margin: 0 0 0 5px;
|
||||
@@ -51,7 +67,6 @@ tags-input .tags .tag-item .remove-button {
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
font: bold 16px Arial, sans-serif;
|
||||
color: #585858;
|
||||
}
|
||||
tags-input .tags .tag-item .remove-button:active {
|
||||
@@ -78,16 +93,17 @@ tags-input.ng-invalid .tags {
|
||||
}
|
||||
|
||||
tags-input .autocomplete {
|
||||
margin-top: 5px;
|
||||
margin-top: 0;
|
||||
position: absolute;
|
||||
padding: 5px 0;
|
||||
z-index: 999;
|
||||
width: 100%;
|
||||
background-color: white;
|
||||
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||
border: none;
|
||||
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
|
||||
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
|
||||
top: 100%;
|
||||
}
|
||||
tags-input .autocomplete .suggestion-list {
|
||||
margin: 0;
|
||||
@@ -100,20 +116,18 @@ tags-input .autocomplete .suggestion-item {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font: 16px "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
color: black;
|
||||
background-color: white;
|
||||
}
|
||||
tags-input .autocomplete .suggestion-item.selected {
|
||||
color: white;
|
||||
background-color: #0097cf;
|
||||
background-color: sg-color($sogoBlue, 300);
|
||||
}
|
||||
tags-input .autocomplete .suggestion-item.selected em {
|
||||
color: white;
|
||||
background-color: #0097cf;
|
||||
background-color: sg-color($sogoBlue, 700);
|
||||
}
|
||||
tags-input .autocomplete .suggestion-item em {
|
||||
font: normal bold 16px "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
color: black;
|
||||
color: $colorGrayDark;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
@@ -64,7 +64,7 @@
|
||||
font-size: sg-size(caption);
|
||||
line-height: $sg-line-height-1; // 16px;
|
||||
font-weight: $sg-font-regular;
|
||||
color: $colorGray;
|
||||
color: $colorGrayLight;
|
||||
}
|
||||
.PseudoField-inputLike {
|
||||
display: block;
|
||||
|
||||
@@ -6,8 +6,19 @@
|
||||
////
|
||||
|
||||
[id=messageEditor] {
|
||||
width: 13 *$pitch;
|
||||
width: (13 * $pitch + $mg); // 13 cols + 1margin for scrollbar
|
||||
margin: 0 auto;
|
||||
overflow: auto;
|
||||
background-color: sg-color($sogoPaper, 100);
|
||||
|
||||
}
|
||||
.buttonsToolbar {
|
||||
padding: $mg 0;
|
||||
button {
|
||||
min-width: 5em;
|
||||
margin: 1em 0 1em 1em;
|
||||
}
|
||||
}
|
||||
// CKE is overqualifying... let's use an ID
|
||||
#cke_content {
|
||||
margin-top: $mg;
|
||||
}
|
||||
Reference in New Issue
Block a user