moparisthebest/mail
1
0
Fork 0
mirror of https://github.com/moparisthebest/mail synced 2025-02-07 10:30:18 -05:00
Code Issues Releases Wiki Activity

implement attachment ui for writer

Browse Source
This commit is contained in:
Tankred Hase 2014-02-06 00:41:08 +01:00
parent 2709b42c22
commit 6514017358
3 changed files with 93 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/js/controller/write.js
View File

@ -183,6 +183,14 @@ define(function(require) {
}
};
//
// Editing attachments
//
$scope.remove = function(attachment) {
$scope.attachments.splice($scope.attachments.indexOf(attachment), 1);
};
//
// Editing email body
//
@ -446,9 +454,9 @@ define(function(require) {
};
});
ngModule.directive('attachment', function() {
ngModule.directive('attachmentInput', function() {
return function(scope, elm) {
elm.bind('change', function(e) {
elm.on('change', function(e) {
for (var i = 0; i < e.target.files.length; i++) {
addAttachment(e.target.files.item(i));
}
@ -469,5 +477,13 @@ define(function(require) {
};
});
ngModule.directive('attachmentBtn', function() {
return function(scope, elm) {
elm.on('click', function() {
document.querySelector('#attachment-input').click();
});
};
});
return WriteCtrl;
});

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

@ -38,7 +38,7 @@
}
.subject-box {
margin: 20px 0;
margin: 20px 0 7px 0;
width: inherit;
border: 1px;
border-style: solid;
@ -56,17 +56,76 @@
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;
width: 0;
height: 0;
}
.btn-attachment {
float: right;
position: absolute;
top: 0;
right: 0;
padding: em(7.5) em(7.5) em(4) em(7.5);
margin: em(5);
outline: none;
//color: $color-grey-lightest;
//background-color: $color-blue;
color: $btn-disabled-color;
background-color: $btn-disabled-back-color;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAJUlEQVQIW2NkQABJIPM5lCvJCGMgC4LYIAkUlTAFMB0gjRQaBQCw8go5lVnl5wAAAABJRU5ErkJggg==);
color: $color-grey-lightest;
background-color: $color-blue;
&:hover,
&:focus {
background-color: lighten($color-blue, 10%);
}
&:active,
&.active {
top: 1px;
right: -1px;
}
}
}

13
src/tpl/write.html
View File

@ -25,13 +25,18 @@
<div class="subject-line">
<input ng-model="subject" class="subject" spellcheck="true" tabindex="2" placeholder="Subject" ng-change="updatePreview()">
</div>
<button class="btn-attachment">
<div data-icon="&#xe003;"></div>
</button>
</div><!--/.subject-box-->
<div class="attachments-box">
<input type="file" attachment multiple>
<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-->
<input id="attachment-input" type="file" multiple attachment-input>
<button class="btn-attachment" attachment-btn>
<div data-icon="&#xe003;"></div>
</button>
</div><!--/.attachments-box-->
<div class="body" focus-child>