amorfo77/sogo
1
0
Fork 0
mirror of https://github.com/inverse-inc/sogo.git synced 2026-03-10 09:21:23 +00:00
Code Issues Projects Releases Wiki Activity

(css) Improve attachments area of mail composer

Browse Source 
Fixes #4243
This commit is contained in:
Francis Lachapelle
2017-08-23 11:55:09 -04:00
parent 37ffe889b5
commit 9495c43b4b
2 changed files with 46 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
UI/Templates/MailerUI/UIxMailEditor.wox
View File

@@ -241,21 +241,24 @@
</md-dialog-content>
<!-- ATTACHMENTS -->
<md-dialog-actions class="sg-mail-editor-attachments">
<div layout="row" layout-align="space-between center" layout-fill="layout-fill">
<!-- Attachments -->
<md-chips ng-model="editor.uploader.queue"
class="md-flex sg-readonly" readonly="true">
<md-chip-template>
<span class="sg-chip-progress" ng-show="$chip.isUploading">
<span class="md-default-theme md-warn md-bg"
ng-style="{ width: $chip.progress + '%'}"><!-- progress --></span>
</span>
<a ng-href="{{$chip.inlineUrl}}" target="_new">{{$chip.file.name}}</a>
<md-icon ng-class="{ 'md-warn': $chip.isUploading }"
ng-click="editor.removeAttachment($chip, 'fileInput')">close</md-icon>
</md-chip-template>
</md-chips>
<md-dialog-content class="md-actions sg-mail-editor-attachments"
layout="row" layout-align="space-between start">
<!-- Attachments -->
<md-chips ng-model="editor.uploader.queue"
class="md-flex sg-readonly" readonly="true">
<md-chip-template>
<span class="sg-chip-progress" ng-show="$chip.isUploading">
<span class="md-default-theme md-warn md-bg"
ng-style="{ width: $chip.progress + '%'}"><!-- progress --></span>
</span>
<a ng-href="{{$chip.inlineUrl}}" target="_new">{{$chip.file.name}}</a>
<button class="md-icon-button md-chip-remove"
ng-click="editor.removeAttachment($chip, 'fileInput')">
<md-icon ng-class="{ 'md-warn': $chip.isUploading }">close</md-icon>
</button>
</md-chip-template>
</md-chips>
<div class="msg-header-buttons">
<label class="md-button md-icon-button" for="fileInput">
<md-icon>attach_file</md-icon>
<!-- <span><var:string label:value="Attach"/></span> -->
@@ -269,7 +272,7 @@
-->
<!-- multiple="multiple" -->
</div>
</md-dialog-actions>
</md-dialog-content>
</form>
<sg-ripple class="md-default-theme md-accent md-bg"

33
UI/WebServerResources/scss/views/MailerUI.scss
View File

@@ -261,10 +261,6 @@ md-sidenav {
overflow: hidden;
}
}
md-dialog-content {
padding-bottom: 0;
padding-top: 0;
}
md-chip-template {
md-icon[ng-click] {
cursor: pointer;
@@ -275,9 +271,34 @@ md-sidenav {
// Message body container of mail composer dialog
.sg-mail-editor-content {
margin-bottom: 0;
.cke_chrome {
border-bottom: 0;
}
}
// Attachments list in bottom actions section of mail composer dialog
.sg-mail-editor-attachments {
margin-top: -$baseline-grid;
md-dialog .md-actions.sg-mail-editor-attachments {
border-top: 1px solid $colorGrayLighter;
overflow: auto;
max-height: 2 * $pitch; // = 128px (3 rows of chips)
md-chip {
max-width: 4 * $pitch; // = 256px
}
a {
float: left;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
padding-right: 18px; // leave some space for the delete (x) button
}
.md-chips md-chip .md-chip-remove {
position: absolute;
right: 0;
}
.md-icon-button {
// Attachment button (file upload label)
// Lower margins to fit the md-actions max height (52px)
margin-bottom: $baseline-grid/2;
margin-top: $baseline-grid/2;
}
}