shrink new conversation attachment padding

fixes CNVS-9138

test plan:
  * in new conversations, open the new message dialog;
  * add enough attachments to overflow the modal size;
  * verify that a horizontal scrollbar appears when the
    attachments overflow the modal width;
  * verify that the scrollbar appears/disappears as
    appropriate when the modal is resized or attachments
    are removed;
  * verify that the aesthetics of attachments are nice and
    that they give you another reason to ❤️ canvas.

Change-Id: I8323c419cd5a681790bbdf4d528317b1f786295c
Reviewed-on: https://gerrit.instructure.com/26533
Tested-by: Jenkins <jenkins@instructure.com>
Reviewed-by: Braden Anderson <banderson@instructure.com>
QA-Review: Steven Shepherd <sshepherd@instructure.com>
Product-Review: Zach Pendleton <zachp@instructure.com>

app/coffeescripts/views/conversations/MessageFormDialog.coffee

@@ -298,18 +298,28 @@ define [
       @resizeBody()
 
     resizeBody: ->
-      # place the attachment pane at the bottom of the form
-      @$attachmentsPane.css('top', @$attachmentsPane.height())
+      @updateAttachmentOverflow()
       # Compute desired height of body
       @$messageBody.height( (@$el.offset().top + @$el.height()) - @$messageBody.offset().top - @$attachmentsPane.height())
 
+    attachmentsShouldOverflow: ->
+      $attachments = @$attachments.children()
+      ($attachments.length * $attachments.outerWidth()) > @$attachmentsPane.width()
+
     addAttachment: ->
       $attachment = $(addAttachmentTemplate())
       @$attachments.append($attachment)
       $attachment.hide()
       $attachment.find('input').click()
+      @updateAttachmentOverflow()
       @focusAddAttachment()
 
+    setAttachmentClip: ($attachment) ->
+      $name = $attachment.find( $('.attachment-name') )
+      $clip = $attachment.find( $('.attachment-name-clip') )
+      $clip.height( $name.height() )
+      $clip.addClass('hidden') if $name.height() < 35
+
     imageTypes: ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'svg']
 
     handleBodyClick: (e) =>
@@ -335,6 +345,7 @@ define [
       file = input.files[0]
       name = file.name
       $attachment.find('.attachment-name').text(name)
+      @setAttachmentClip($attachment)
       remove = $attachment.find('.remove_link')
       remove.attr('aria-label', remove.attr('title')+': '+name)
       extension = name.split('.').pop().toLowerCase()
@@ -381,7 +392,7 @@ define [
       $attachment.slideUp "fast", =>
         $attachment.remove()
         @updateAttachmentPane()
-        
+
     focusPrevAttachment: ($attachment) =>
       $newTarget = $attachment.prevAll(':visible').first()
       if !$newTarget.length then return false
@@ -395,11 +406,6 @@ define [
     focusAddAttachment: () ->
       @$fullDialog.find('.attach-file').focus()
 
-#    addToken: (userData) ->
-#      input = @$el.find('.recipients').data('token_input')
-#      input.addToken(userData) if input
-#      @resizeBody()
-#
     addMediaComment: ->
       @$mediaComment.mediaComment 'create', 'any', (id, type) =>
         @$mediaCommentId.val(id)
@@ -413,28 +419,9 @@ define [
       @$mediaComment.hide()
       @$addMediaComment.show()
 
+    updateAttachmentOverflow: ->
+      @$attachmentsPane.toggleClass('overflowed', @attachmentsShouldOverflow())
+
     updateAttachmentPane: ->
       @$attachmentsPane[if @$attachmentsPane.find('input:not([value=])').length then 'addClass' else 'removeClass']('has-items')
       @resizeBody()
-
-#    messageData: (data) ->
-#      numRecipients = if @options.conversation
-#        Math.max(@options.conversation.get('audience').length, 1)
-#      else
-#        # note: this number may be high, if users appear in multiple of the
-#        # specified recipient contexts. there's no way of knowing without going
-#        # to the server first, which is what we're trying to avoid.
-#        _.reduce @tokenInput.$tokens.find('input[name="recipients[]"]'),
-#          (memo, node) -> memo + ($(node).closest('li').data('user_count') ? 1),
-#          0
-#      {recipient_count: numRecipients, message: {body: data.body}}
-#
-#    resetForParticipant: (user) ->
-#      @toggleOptions(user_note: on) if @canAddNotesFor(user)
-#
-#    toggleOptions: (options) ->
-#      for key, enabled of options
-#        $node = @$form.find(".#{key}_info")
-#        $node.showIf(enabled)
-#        $node.find("input[type=checkbox][name=#{key}]").prop('checked', false) unless enabled
-#

app/stylesheets/compose_message_dialog.scss

@@ -96,13 +96,18 @@ $subtleBorderColor: #e5e5e5;
   .attachments-pane {
     border: none;
     height: 0;
-    overflow-x: auto;
+    overflow: hidden;
 
     &.has-items {
       border-top: 1px solid $subtleBorderColor;
-      min-height: 120px;
+      min-height: 100px;
       margin: 0;
     }
+
+    &.overflowed {
+      min-height: 120px;
+      overflow-x: auto;
+    }
   }
 
   .attachment_list {
@@ -113,11 +118,12 @@ $subtleBorderColor: #e5e5e5;
   .attachment {
     display: inline-block;
     vertical-align: top;
-    height: 85px;
+    height: 90px;
     width: 80px;
-    padding: 8px 10px;
+    padding: 5px 10px;
     position: relative;
     outline: none;
+    overflow: hidden;
   }
 
   .attachment .file_input {
@@ -176,6 +182,7 @@ $subtleBorderColor: #e5e5e5;
     border-radius: 10px;
     max-height: 38px;
     overflow: hidden;
+    padding: 0 4px;
   }
 
   .attachment:focus .attachment-name {
@@ -183,6 +190,26 @@ $subtleBorderColor: #e5e5e5;
     color: #fff;
   }
 
+  .attachment-name-clip {
+    background: -ms-linear-gradient(top, transparent 60%, #fff 90%);
+    background: -moz-linear-gradient(top, rgba(255,255,255,0) 60%, rgba(255,255,255,1) 90%);
+    background: -o-linear-gradient(top, transparent 60%, #fff 90%);
+    background: -webkit-linear-gradient(top, transparent 60%, #fff 90%);
+    background: linear-gradient(top, transparent 60%, #fff 90%);
+    position: absolute;
+    top: 55px;
+    width: 80px;
+  }
+
+  .attachment:focus .attachment-name-clip {
+    background: -ms-linear-gradient(top, transparent 95%, #08c 99%);
+    background: -moz-linear-gradient(top, transparent 95%, #08c 99%);
+    background: -o-linear-gradient(top, transparent 95%, #08c 99%);
+    background: -webkit-linear-gradient(top, transparent 95%, #08c 99%);
+    background: linear-gradient(top, transparent 95%, #08c 99%);
+    border-radius: 10px;
+  }
+
   .message-body {
     overflow-y: auto;
     overflow-x: hidden;

app/views/jst/conversations/addAttachment.handlebars

@@ -10,6 +10,7 @@
       <div class="attachment-icon" aria-hidden="true">
         <i class="icon-paperclip"></i>
       </div>
+      <div class="attachment-name-clip"></div>
       <div class="attachment-name"></div>
       <input type="file"
              class="file_input"