mirror of
https://github.com/inverse-inc/sogo.git
synced 2026-05-17 09:25:25 +00:00
(fix) improved message editor
This commit is contained in:
Ludovic Marcotte
@@ -10,175 +10,176 @@
|
||||
<!-- TOOLBAR TO SHOW CC/BCC/ATTACHMENT FIELDS -->
|
||||
|
||||
<div class="md-toolbar-tools">
|
||||
<md-icon class="material-icons sg-icon-toolbar-bg">edit</md-icon>
|
||||
<md-button ng-show="editor.hideCc" ng-click="editor.hideCc = false">Cc</md-button>
|
||||
<md-button ng-show="editor.hideBcc" ng-click="editor.hideBcc = false">Bcc</md-button>
|
||||
|
||||
<md-button>
|
||||
<label for="file-input">
|
||||
<md-button>
|
||||
<label for="file-input">
|
||||
Add files
|
||||
</label>
|
||||
</label>
|
||||
</md-button>
|
||||
<input id="file-input" type="file"
|
||||
nv-file-select="nv-file-select"
|
||||
multiple="multiple"
|
||||
uploader="editor.uploader"
|
||||
ng-show="false"/>
|
||||
|
||||
<md-menu>
|
||||
<md-button label:aria-label="More mail options" class="iconBtton" ng-click="$mdOpenMenu($event)">
|
||||
<md-icon>more_vert</md-icon>
|
||||
</md-button>
|
||||
<input id="file-input" type="file"
|
||||
nv-file-select="nv-file-select"
|
||||
multiple="multiple"
|
||||
uploader="editor.uploader"
|
||||
ng-show="false"/>
|
||||
|
||||
<md-menu>
|
||||
<md-button label:aria-label="More mail options" class="iconBtton" ng-click="$mdOpenMenu($event)">
|
||||
<md-icon>more_vert</md-icon>
|
||||
</md-button>
|
||||
<md-menu-content width="4">
|
||||
<md-menu-item>
|
||||
<md-button>
|
||||
<md-checkbox ng-model="editor.message.editable.receipt">
|
||||
<var:string label:value="Receipt"/>
|
||||
</md-checkbox>
|
||||
</md-button>
|
||||
</md-menu-item>
|
||||
<md-menu-item>
|
||||
<div layout="row" layout-align="center center">
|
||||
<span>
|
||||
<var:string label:value="Priority"/>
|
||||
</span>
|
||||
<md-slider flex="flex"
|
||||
md-discrete="md-discrete"
|
||||
ng-model="editor.message.editable.priority"
|
||||
step="1"
|
||||
min="1"
|
||||
max="5"
|
||||
label:aria-label="Priority">
|
||||
</md-slider>
|
||||
</div>
|
||||
</md-menu-item>
|
||||
<md-menu-content width="4">
|
||||
<md-menu-item>
|
||||
<md-button>
|
||||
<md-checkbox ng-model="editor.message.editable.receipt">
|
||||
<var:string label:value="Receipt"/>
|
||||
</md-checkbox>
|
||||
</md-button>
|
||||
</md-menu-item>
|
||||
<md-menu-item>
|
||||
<div layout="row" layout-align="center center">
|
||||
<span>
|
||||
<var:string label:value="Priority"/>
|
||||
</span>
|
||||
<md-slider flex="flex"
|
||||
md-discrete="md-discrete"
|
||||
ng-model="editor.message.editable.priority"
|
||||
step="1"
|
||||
min="1"
|
||||
max="5"
|
||||
label:aria-label="Priority">
|
||||
</md-slider>
|
||||
</div>
|
||||
</md-menu-item>
|
||||
</md-menu-content>
|
||||
</md-menu>
|
||||
</md-menu>
|
||||
|
||||
</div>
|
||||
</md-toolbar>
|
||||
|
||||
<md-dialog-content>
|
||||
<form>
|
||||
<header>
|
||||
|
||||
<!-- FROM / TO / CC/ BCC / SUBJECT / ATTACHMENTS -->
|
||||
<div class="msg-header-content">
|
||||
<md-input-container>
|
||||
<label> <var:string label:value="From"/></label>
|
||||
<md-select name="from"
|
||||
ng-model="editor.message.editable.from">
|
||||
<md-option ng-value="identity" ng-repeat="identity in editor.identities">{{identity}}</md-option>
|
||||
</md-select>
|
||||
</md-input-container>
|
||||
|
||||
<div class="pseudo-input-container">
|
||||
<label class="pseudo-input-label">
|
||||
<var:string label:value="To"/>
|
||||
</label>
|
||||
<md-chips ng-model="editor.message.editable.to">
|
||||
<md-autocomplete
|
||||
md-selected-item="editor.autocomplete.to.selected"
|
||||
md-search-text="editor.autocomplete.to.searchText"
|
||||
md-items="user in editor.contactFilter(editor.autocomplete.to.searchText)"
|
||||
label:placeholder="Add a recipient">
|
||||
<span md-highlight-text="editor.autocomplete.to.searchText"
|
||||
md-highlight-flags="^i">{{user}}</span>
|
||||
</md-autocomplete>
|
||||
<md-chip-template>{{$chip}}</md-chip-template>
|
||||
</md-chips>
|
||||
</div>
|
||||
|
||||
<div class="pseudo-input-container" ng-hide="editor.hideCc">
|
||||
<label class="pseudo-input-label">
|
||||
<var:string label:value="Cc"/>
|
||||
</label>
|
||||
<md-chips ng-model="editor.message.editable.cc">
|
||||
<md-autocomplete
|
||||
md-selected-item="editor.autocomplete.cc.selected"
|
||||
md-search-text="editor.autocomplete.cc.searchText"
|
||||
md-items="user in editor.contactFilter(editor.autocomplete.cc.searchText)"
|
||||
label:placeholder="Add a recipient">
|
||||
<span md-highlight-text="editor.autocomplete.cc.searchText"
|
||||
md-highlight-flags="^i">{{user}}</span>
|
||||
</md-autocomplete>
|
||||
<md-chip-template>{{$chip}}</md-chip-template>
|
||||
</md-chips>
|
||||
</div>
|
||||
|
||||
<div class="pseudo-input-container" ng-hide="editor.hideBcc">
|
||||
<label class="pseudo-input-label">
|
||||
<var:string label:value="Bcc"/>
|
||||
</label>
|
||||
<md-chips ng-model="editor.message.editable.bcc">
|
||||
<md-autocomplete
|
||||
md-selected-item="editor.autocomplete.bcc.selected"
|
||||
md-search-text="editor.autocomplete.bcc.searchText"
|
||||
md-items="user in editor.contactFilter(editor.autocomplete.bcc.searchText)"
|
||||
label:placeholder="Add a recipient">
|
||||
<span md-highlight-text="editor.autocomplete.bcc.searchText"
|
||||
md-highlight-flags="^i">{{user}}</span>
|
||||
</md-autocomplete>
|
||||
<md-chip-template>{{$chip}}</md-chip-template>
|
||||
</md-chips>
|
||||
</div>
|
||||
|
||||
<md-input-container>
|
||||
<label>
|
||||
<var:string label:value="Subject"/>
|
||||
</label>
|
||||
<input type="text" name="subject" ng-model="editor.message.editable.subject"/>
|
||||
</md-input-container>
|
||||
|
||||
<md-list>
|
||||
<!-- FILES ALREADY UPLOADED, FOR EXAMPLE WHEN WE FORWARD A
|
||||
MAIL WITH ATTACHMENTS -->
|
||||
<md-list-item ng-repeat="item in editor.message.editable.attachmentAttrs">
|
||||
<div layout="row" layout-align="space-between center">
|
||||
<span ng-bind="item.filename"><!-- filename --></span>
|
||||
<md-button class="sg-icon-button"
|
||||
ng-click="editor.message.$deleteAttachment(item.filename);">
|
||||
<md-icon>remove_circle_outline</md-icon>
|
||||
</md-button>
|
||||
</div>
|
||||
</md-list-item>
|
||||
<!-- FILE BEING ATTACHED TO A MAIL -->
|
||||
<md-list-item ng-repeat="item in editor.uploader.queue">
|
||||
<div layout="row" layout-align="space-between center">
|
||||
<span ng-bind="item.file.name"><!-- filename --></span>
|
||||
<md-progress-linear md-mode="determinate"
|
||||
value="{{item.progress}}"
|
||||
ng-show="item.isUploading" ><!-- progress--></md-progress-linear>
|
||||
<md-button class="sg-icon-button"
|
||||
ng-click="editor.uploader.cancelItem(item)"
|
||||
ng-show="item.isUploading">
|
||||
<md-icon>cancel</md-icon>
|
||||
</md-button>
|
||||
<md-button class="sg-icon-button"
|
||||
ng-click="editor.message.$deleteAttachment(item.file.name); item.remove();"
|
||||
ng-show="!item.isUploading">
|
||||
<md-icon>remove_circle_outline</md-icon>
|
||||
</md-button>
|
||||
</div>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</div>
|
||||
|
||||
</header>
|
||||
|
||||
<!-- MESSAGE CONTENT -->
|
||||
<textarea name="content" var:class="editorClass"
|
||||
ng-model="editor.message.editable.text"/>
|
||||
|
||||
<!-- TOOLBAR BUTTONS -->
|
||||
<div class="buttonsToolbar">
|
||||
<div layout="row" layout-align="end center">
|
||||
<md-button ng-click="editor.cancel()"><var:string label:value="Cancel"/></md-button>
|
||||
<md-button ng-click="editor.message.$save()"><var:string label:value="Save"/></md-button>
|
||||
<md-button class="fg-sogoBlue-700 md-primary md-hue-3"
|
||||
ng-click="editor.send()"><var:string label:value="Send"/></md-button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</md-dialog-content>
|
||||
</md-dialog>
|
||||
</md-toolbar>
|
||||
|
||||
<md-dialog-content>
|
||||
<form>
|
||||
<header>
|
||||
|
||||
<!-- FROM / TO / CC/ BCC / SUBJECT / ATTACHMENTS -->
|
||||
<div class="msg-header-content">
|
||||
<md-input-container>
|
||||
<label> <var:string label:value="From"/></label>
|
||||
<md-select name="from"
|
||||
ng-model="editor.message.editable.from">
|
||||
<md-option ng-value="identity" ng-repeat="identity in editor.identities">{{identity}}</md-option>
|
||||
</md-select>
|
||||
</md-input-container>
|
||||
|
||||
<div class="pseudo-input-container">
|
||||
<label class="pseudo-input-label">
|
||||
<var:string label:value="To"/>
|
||||
</label>
|
||||
<md-chips ng-model="editor.message.editable.to">
|
||||
<md-autocomplete
|
||||
md-selected-item="editor.autocomplete.to.selected"
|
||||
md-search-text="editor.autocomplete.to.searchText"
|
||||
md-items="user in editor.contactFilter(editor.autocomplete.to.searchText)"
|
||||
label:placeholder="Add a recipient">
|
||||
<span md-highlight-text="editor.autocomplete.to.searchText"
|
||||
md-highlight-flags="^i">{{user}}</span>
|
||||
</md-autocomplete>
|
||||
<md-chip-template>{{$chip}}</md-chip-template>
|
||||
</md-chips>
|
||||
</div>
|
||||
|
||||
<div class="pseudo-input-container" ng-hide="editor.hideCc">
|
||||
<label class="pseudo-input-label">
|
||||
<var:string label:value="Cc"/>
|
||||
</label>
|
||||
<md-chips ng-model="editor.message.editable.cc">
|
||||
<md-autocomplete
|
||||
md-selected-item="editor.autocomplete.cc.selected"
|
||||
md-search-text="editor.autocomplete.cc.searchText"
|
||||
md-items="user in editor.contactFilter(editor.autocomplete.cc.searchText)"
|
||||
label:placeholder="Add a recipient">
|
||||
<span md-highlight-text="editor.autocomplete.cc.searchText"
|
||||
md-highlight-flags="^i">{{user}}</span>
|
||||
</md-autocomplete>
|
||||
<md-chip-template>{{$chip}}</md-chip-template>
|
||||
</md-chips>
|
||||
</div>
|
||||
|
||||
<div class="pseudo-input-container" ng-hide="editor.hideBcc">
|
||||
<label class="pseudo-input-label">
|
||||
<var:string label:value="Bcc"/>
|
||||
</label>
|
||||
<md-chips ng-model="editor.message.editable.bcc">
|
||||
<md-autocomplete
|
||||
md-selected-item="editor.autocomplete.bcc.selected"
|
||||
md-search-text="editor.autocomplete.bcc.searchText"
|
||||
md-items="user in editor.contactFilter(editor.autocomplete.bcc.searchText)"
|
||||
label:placeholder="Add a recipient">
|
||||
<span md-highlight-text="editor.autocomplete.bcc.searchText"
|
||||
md-highlight-flags="^i">{{user}}</span>
|
||||
</md-autocomplete>
|
||||
<md-chip-template>{{$chip}}</md-chip-template>
|
||||
</md-chips>
|
||||
</div>
|
||||
|
||||
<md-input-container>
|
||||
<label>
|
||||
<var:string label:value="Subject"/>
|
||||
</label>
|
||||
<input type="text" name="subject" ng-model="editor.message.editable.subject"/>
|
||||
</md-input-container>
|
||||
|
||||
<md-list>
|
||||
<!-- FILES ALREADY UPLOADED, FOR EXAMPLE WHEN WE FORWARD A
|
||||
MAIL WITH ATTACHMENTS -->
|
||||
<md-list-item ng-repeat="item in editor.message.editable.attachmentAttrs">
|
||||
<div layout="row" layout-align="space-between center">
|
||||
<span ng-bind="item.filename"><!-- filename --></span>
|
||||
<md-button class="sg-icon-button"
|
||||
ng-click="editor.message.$deleteAttachment(item.filename);">
|
||||
<md-icon>remove_circle_outline</md-icon>
|
||||
</md-button>
|
||||
</div>
|
||||
</md-list-item>
|
||||
<!-- FILE BEING ATTACHED TO A MAIL -->
|
||||
<md-list-item ng-repeat="item in editor.uploader.queue">
|
||||
<div layout="row" layout-align="space-between center">
|
||||
<span ng-bind="item.file.name"><!-- filename --></span>
|
||||
<md-progress-linear md-mode="determinate"
|
||||
value="{{item.progress}}"
|
||||
ng-show="item.isUploading" ><!-- progress--></md-progress-linear>
|
||||
<md-button class="sg-icon-button"
|
||||
ng-click="editor.uploader.cancelItem(item)"
|
||||
ng-show="item.isUploading">
|
||||
<md-icon>cancel</md-icon>
|
||||
</md-button>
|
||||
<md-button class="sg-icon-button"
|
||||
ng-click="editor.message.$deleteAttachment(item.file.name); item.remove();"
|
||||
ng-show="!item.isUploading">
|
||||
<md-icon>remove_circle_outline</md-icon>
|
||||
</md-button>
|
||||
</div>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</div>
|
||||
|
||||
</header>
|
||||
|
||||
<!-- MESSAGE CONTENT -->
|
||||
<textarea name="content" var:class="editorClass"
|
||||
ng-model="editor.message.editable.text"/>
|
||||
|
||||
<!-- TOOLBAR BUTTONS -->
|
||||
<div class="buttonsToolbar">
|
||||
<div layout="row" layout-align="end center">
|
||||
<md-button ng-click="editor.cancel()"><var:string label:value="Cancel"/></md-button>
|
||||
<md-button ng-click="editor.message.$save()"><var:string label:value="Save"/></md-button>
|
||||
<md-button class="fg-sogoBlue-700 md-primary md-hue-3"
|
||||
ng-click="editor.send()"><var:string label:value="Send"/></md-button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</md-dialog-content>
|
||||
</md-dialog>
|
||||
</container>
|
||||
|
||||
@@ -49,7 +49,7 @@
|
||||
<md-button class="md-fab md-fab-bottom-right md-accent"
|
||||
label:aria-label="Write a new message"
|
||||
ng-click="mailbox.newMessage($event)">
|
||||
<md-icon>add</md-icon>
|
||||
<md-icon>edit</md-icon>
|
||||
</md-button>
|
||||
</md-content>
|
||||
</div>
|
||||
|
||||
@@ -1,21 +1,21 @@
|
||||
/// MessageEditorUI.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
|
||||
|
||||
[id=messageEditor] {
|
||||
//width: (13 * $pitch + $mg); // 13 cols + 1margin for scrollbar
|
||||
@include from(lg) {
|
||||
@include flex-col(lg, 11, 1, 1);
|
||||
}
|
||||
@include at(md) {
|
||||
@include flex-col(md, 10, 1, 1);
|
||||
}
|
||||
margin: 0 auto;
|
||||
overflow: auto;
|
||||
height: 100%;
|
||||
background-color: sg-color($sogoPaper, 50);
|
||||
transform: translateY(-1 * $pitch);
|
||||
z-index: 40;
|
||||
box-shadow: $whiteframe-shadow-z1;
|
||||
}
|
||||
// [id=messageEditor] {
|
||||
// //width: (13 * $pitch + $mg); // 13 cols + 1margin for scrollbar
|
||||
// @include from(lg) {
|
||||
// @include flex-col(lg, 11, 1, 1);
|
||||
// }
|
||||
// @include at(md) {
|
||||
// @include flex-col(md, 10, 1, 1);
|
||||
// }
|
||||
// margin: 0 auto;
|
||||
// overflow: auto;
|
||||
// height: 100%;
|
||||
// background-color: sg-color($sogoPaper, 50);
|
||||
// transform: translateY(-1 * $pitch);
|
||||
// z-index: 40;
|
||||
// box-shadow: $whiteframe-shadow-z1;
|
||||
// }
|
||||
.buttonsToolbar {
|
||||
padding: $mg 0;
|
||||
button {
|
||||
@@ -25,11 +25,11 @@
|
||||
}
|
||||
// CKE is overqualifying... let's use an ID
|
||||
#cke_content,
|
||||
textarea.ck-editor{
|
||||
textarea.ck-editor {
|
||||
margin-top: $mg;
|
||||
}
|
||||
// Plain text editor
|
||||
[id=messageEditor] textarea {
|
||||
textarea.plain-text {
|
||||
width: 100%;
|
||||
min-height: grid-step(3);
|
||||
margin-top: $mg;
|
||||
|
||||
Reference in New Issue
Block a user