Limit image caption text characters (#343)

- Limit caption text input to 1000 characters (fixes #18)
- Show only one line of the caption text in the mediabox (fixes #319)

src/directives/mediabox.ts

@@ -77,7 +77,7 @@ export default [
                     <md-icon class="close material-icons md-24" ng-click="ctrl.close()" aria-label="Close" translate-attr="{'aria-label': 'common.CLOSE', 'title': 'common.CLOSE'}">close</md-icon>
                     <div class="inner" ng-click="ctrl.close($event)">
                         <img ng-src="{{ ctrl.imageDataUrl }}">
-                        <div class="caption">
+                        <div class="caption" title="{{ ctrl.caption | escapeHtml}}">
                             <span ng-bind-html="ctrl.caption | escapeHtml | markify | emojify"></span>
                         </div>
                     </div>

src/partials/messenger.ts

@@ -463,7 +463,7 @@ class ConversationController {
                                 <md-dialog-content class="md-dialog-content">
                                     <h2 class="md-title">${title}</h2>
                                     <md-input-container md-no-float class="input-caption md-prompt-input-container" ng-show="!${showSendAsFileCheckbox} || ctrl.sendAsFile || ${captionSupported}">
-                                        <input md-autofocus ng-keypress="ctrl.keypress($event)" ng-model="ctrl.caption" placeholder="${placeholder}" aria-label="${placeholder}">
+                                        <input maxlength="1000" md-autofocus ng-keypress="ctrl.keypress($event)" ng-model="ctrl.caption" placeholder="${placeholder}" aria-label="${placeholder}">
                                     </md-input-container>
                                     <md-input-container md-no-float class="input-send-as-file md-prompt-input-container" ng-show="${showSendAsFileCheckbox}">
                                         <md-checkbox ng-model="ctrl.sendAsFile" aria-label="${confirmSendAsFile}">

src/sass/components/_mediabox.scss

@@ -91,12 +91,14 @@ mediabox {
             }
 
             .caption {
-                display: flex;
-                align-items: flex-end;
-                height: 28px;
                 margin: 4px 0 0;
                 color: rgba(255, 255, 255, 0.8);
                 font-size: 1.3em;
+                display: block;
+                width: 90%;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
             }
         }
     }