moparisthebest/mail
1
0
Fork 0
mirror of https://github.com/moparisthebest/mail synced 2025-01-11 05:28:00 -05:00
Code Issues Releases Wiki Activity

fix overflow of multiple attachments

Browse Source
This commit is contained in:
Tankred Hase 2014-02-06 09:13:31 +01:00
parent 34f0551d6f
commit 20f36285b6
3 changed files with 64 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/sass/views/_read.scss
View File

@ -39,6 +39,7 @@
}
.attachments {
position: relative;
width: inherit;
border: 1px;
border-style: solid;
@ -46,14 +47,15 @@
min-height: em(44);
.attachment {
line-height: 42px;
border-radius: 15px;
height: 32px;
border-radius: 16px;
vertical-align: middle;
margin: 5px 0 5px 5px;
padding: 5px 10px 5px 10px;
border: 1px;
border-style: solid;
border-color: $color-grey-lighter;
display: inline-block;
span {
font-size: 14px;

88
src/sass/views/_write.scss
View File

@ -38,6 +38,7 @@
}
.subject-box {
position: relative;
margin: 20px 0 7px 0;
width: inherit;
border: 1px;
@ -56,49 +57,6 @@
font-weight: bold;
width: 100%;
}
}
.attachments-box {
position: relative;
margin: 0 0 5px 0;
width: inherit;
border: 1px;
border-style: solid;
border-color: $color-grey-lighter;
min-height: em(44);
.attachment {
line-height: 41px;
border-radius: 15px;
vertical-align: middle;
margin: 5px 0 5px 5px;
padding: 5px 5px 5px 10px;
border: 1px;
border-style: solid;
border-color: $color-grey-lighter;
cursor: default;
span {
font-size: 14px;
color: $color-grey-input;
vertical-align: middle;
}
.close {
margin-left: 5px;
&:hover,
&:focus {
color: darken($color-grey, 10%);
cursor: pointer;
}
}
&:hover,
&:focus {
background-color: darken($color-white, 2%);
}
}
input[type=file] {
visibility: hidden;
@ -129,6 +87,50 @@
}
}
.attachments-box {
position: relative;
margin: 0 0 5px 0;
width: inherit;
border: 1px;
border-style: solid;
border-color: $color-grey-lighter;
min-height: em(44);
.attachment {
height: 32px;
border-radius: 16px;
vertical-align: middle;
margin: 5px 0 5px 5px;
padding: 5px 5px 5px 10px;
border: 1px;
border-style: solid;
border-color: $color-grey-lighter;
cursor: default;
display: inline-block;
span {
font-size: 14px;
color: $color-grey-input;
vertical-align: middle;
}
.close {
margin-left: 5px;
&:hover,
&:focus {
color: darken($color-grey, 10%);
cursor: pointer;
}
}
&:hover,
&:focus {
background-color: darken($color-white, 2%);
}
}
}
.body {
line-height: 1.5em;
cursor: text;

26
src/tpl/write.html
View File

@ -24,20 +24,24 @@
<div class="subject-box">
<div class="subject-line">
<input ng-model="subject" class="subject" spellcheck="true" tabindex="2" placeholder="Subject" ng-change="updatePreview()">
</div>
</div><!--/.subject-box-->
<div class="attachments-box">
<span ng-repeat="attachment in attachments" class="attachment">
<span data-icon="&#xe003;"></span>
{{attachment.fileName}}
<span class="close" data-icon="&#xe000;" ng-click="remove(attachment)"></span>
</span><!--/.attachment-->
</div><!--/.subject-line-->
<input id="attachment-input" type="file" multiple attachment-input>
<button class="btn-attachment" attachment-btn>
<div data-icon="&#xe003;"></div>
</button>
</div><!--/.attachments-box-->
</button><!--/.btn-attachment-->
</div><!--/.subject-box-->
<div ng-switch="attachments.length > 0">
<div ng-switch-when="true">
<div class="attachments-box">
<span ng-repeat="attachment in attachments" class="attachment">
<span data-icon="&#xe003;"></span>
{{attachment.fileName}}
<span class="close" data-icon="&#xe000;" ng-click="remove(attachment)"></span>
</span><!--/.attachment-->
</div><!--/.attachments-box-->
</div><!--/ng-switch-when-->
</div><!--/ng-switch-->
<div class="body" focus-child>
<p ng-model="body" contentEditable="true" spellcheck="false" ng-change="updatePreview()" tabindex="3" focus-me="state.writer.open && writerTitle === 'Reply'"></p>