Threads controller UI and removing attachments #28
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -159,6 +159,77 @@ div.big-icon > img { | |
| cursor: pointer; | ||
| } | ||
|
|
||
| .attach-icon { | ||
| margin-top: 13px; | ||
| } | ||
|
|
||
| .attach-icon:hover { | ||
| fill: #66afe9; | ||
| } | ||
|
|
||
| .sidebtn { | ||
| width: 70px; | ||
| height: 30px; | ||
| font-size: 12px; | ||
| padding: 0; | ||
| float: left !important; | ||
|
There was a problem hiding this comment. Using |
||
| } | ||
|
|
||
| .sidebtnlarge { | ||
| width: 100px; | ||
| height: 35px; | ||
| font-size: 15px; | ||
| padding: 0px; | ||
| float: left !important; | ||
| } | ||
|
|
||
| .single-attachment { | ||
| background-color: #f5f5f5; | ||
| border: 1px solid #dcdcdc; | ||
| font-weight: bold; | ||
| font-size: 13px; | ||
| margin: 0 7px 6px; | ||
| color: #1155CC !important; | ||
| text-align: left; | ||
| padding: 2px 6px; | ||
| max-width: 448px; | ||
| width: 80%; | ||
| height: 23px; | ||
| display: flex; | ||
| } | ||
|
|
||
| #textareaSpace { | ||
| min-height: 250px; | ||
| max-height: 500px; | ||
| overflow: auto; | ||
| background-color: white; | ||
| } | ||
|
|
||
| #textareaElement { | ||
| flex;flex-direction: column; | ||
| min-height: 250px; | ||
| text-align: left; | ||
| border: none; | ||
| background-color: white; | ||
| outline: none; | ||
| resize: none; | ||
| margin-bottom: 0px; | ||
| } | ||
|
|
||
| #attachmentRepeat { | ||
| background-color: white; | ||
| min-height: 20px; | ||
| padding-top: 10px; | ||
| display: flex; | ||
| flex-direction: column; | ||
| } | ||
|
|
||
| .removeAttachment { | ||
| border: none; | ||
| font-size: 13px; | ||
| color: gray; | ||
| background-color: inherit; | ||
| margin: 0 !important; | ||
| padding: 0; | ||
| float: right; | ||
| } | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -176,7 +176,7 @@ e2email.pages.threads.ThreadsCtrl = function( | |
| * invalidRecipient: ?string, | ||
| * subject: ?string, | ||
| * message: ?string, | ||
| * attachments: Array<e2email.models.mail.Attachment> | ||
| * }} | ||
| */ | ||
| e2email.pages.threads.ThreadsCtrl.Compose; | ||
|
|
@@ -478,6 +478,24 @@ ThreadsCtrl.prototype.onFileUpload = function(name, type, contents, size) { | |
| }; | ||
|
|
||
|
|
||
| /** | ||
| * Removes the attachment object from the list of attachments. | ||
| * @param {string} name of the file | ||
|
|
||
| * @export | ||
| */ | ||
| ThreadsCtrl.prototype.removeObj = function(name) { | ||
| var at = this.compose.attachments; | ||
|
There was a problem hiding this comment. Better way to remove an element from an Array is to use goog.array.removeIf. E.g. However, can you guarantee that the filename is unique in the attachments list? Does it e.g. also contain the filepath? A user might want to attach two files of a same filename from different directories. If this is for the purpose of removing attachments upon user click, the object you click on should identify the attachments by an ever-increasing counter. You could e.g. reuse the array index for that, but then instead of removing the attachment you'd set the value at certain index to null and you'd use The better solution is to use goog.structs.Map instead of an array and generate keys upon adding from e.g. a Threads-controller property attachmentsCounter (it would ++ every time new attachment is added to the map and used as a Map key). You'd have to store the map key in some UI element property and use it in Map.remove(). To iterate over a map in Angular, use |
||
|
|
||
| if (at != []) { | ||
| var i; | ||
| for (i = at.length - 1; i >= 0; i--) { | ||
| if (at[i].filename == name) | ||
| at.splice(i, 1); | ||
| } | ||
| } | ||
| }; | ||
|
|
||
|
|
||
| /** | ||
| * Requests the contents of the compose model to be delivered. | ||
| * @export | ||
|
|
||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why are attachment-specific definitions needed in app.css? Do they need to be shared across pages?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The CSS for the attachment icon and attachment input/display is in two pages: Threads.html and Messages.html, I put it on app.css not to have repetitive code.