Added toolbar to comment form

9 files changed, 129 insertions, 108 deletions

diff --git a/app/assets/javascripts/issue.js.coffee b/app/assets/javascripts/issue.js.coffee
index d663e34871c..44a8aa68834 100644
--- a/app/assets/javascripts/issue.js.coffee
+++ b/app/assets/javascripts/issue.js.coffee
@@ -6,25 +6,10 @@ class @Issue
   constructor: ->
     # Prevent duplicate event bindings
     @disableTaskList()
-    @fixAffixScroll()
     if $('a.btn-close').length
       @initTaskList()
       @initIssueBtnEventListeners()
 
-  fixAffixScroll: ->
-    fixAffix = ->
-      $discussion = $('.issuable-discussion')
-      $sidebar = $('.issuable-sidebar')
-      if $sidebar.hasClass('no-affix')
-        $sidebar.removeClass(['affix-top','affix'])
-      discussionHeight = $discussion.height()
-      sidebarHeight = $sidebar.height()
-      if sidebarHeight > discussionHeight
-        $discussion.height(sidebarHeight + 50)
-        $sidebar.addClass('no-affix')
-    $(window).on('resize', fixAffix)
-    fixAffix()
-
   initTaskList: ->
     $('.detail-page-description .js-task-list-container').taskList('enable')
     $(document).on 'tasklist:changed', '.detail-page-description .js-task-list-container', @updateTaskList
diff --git a/app/assets/javascripts/merge_request.js.coffee b/app/assets/javascripts/merge_request.js.coffee
index 6af5a48a0bb..1f46e331427 100644
--- a/app/assets/javascripts/merge_request.js.coffee
+++ b/app/assets/javascripts/merge_request.js.coffee
@@ -15,8 +15,6 @@ class @MergeRequest
     this.$('.show-all-commits').on 'click', =>
       this.showAllCommits()
 
-    @fixAffixScroll();
-
     @initTabs()
 
     # Prevent duplicate event bindings
@@ -30,20 +28,6 @@ class @MergeRequest
   $: (selector) ->
     this.$el.find(selector)
 
-  fixAffixScroll: ->
-    fixAffix = ->
-      $discussion = $('.issuable-discussion')
-      $sidebar = $('.issuable-sidebar')
-      if $sidebar.hasClass('no-affix')
-        $sidebar.removeClass(['affix-top','affix'])
-      discussionHeight = $discussion.height()
-      sidebarHeight = $sidebar.height()
-      if sidebarHeight > discussionHeight
-        $discussion.height(sidebarHeight + 50)
-        $sidebar.addClass('no-affix')
-    $(window).on('resize', fixAffix)
-    fixAffix()
-
   initTabs: ->
     if @opts.action != 'new'
       # `MergeRequests#new` has no tab-persisting or lazy-loading behavior
diff --git a/app/assets/javascripts/notes.js.coffee b/app/assets/javascripts/notes.js.coffee
index 24569c4f975..864156cb718 100644
--- a/app/assets/javascripts/notes.js.coffee
+++ b/app/assets/javascripts/notes.js.coffee
@@ -1,4 +1,5 @@
 #= require autosave
+#= require autosize
 #= require dropzone
 #= require dropzone_input
 #= require gfm_auto_complete
@@ -287,6 +288,8 @@ class @Notes
       else
         previewButton.removeClass("turn-on").addClass "turn-off"
 
+    autosize(textarea)
+
     new Autosave textarea, [
       "Note"
       form.find("#note_commit_id").val()
@@ -368,6 +371,9 @@ class @Notes
     textarea = form.find("textarea")
     textarea.focus()
 
+    if isNewForm
+      autosize(textarea)
+
     # HACK (rspeicher/DouweM): Work around a Chrome 43 bug(?).
     # The textarea has the correct value, Chrome just won't show it unless we
     # modify it, so let's clear it and re-set it!
diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss
index 9e2240bd217..ae23e19172a 100644
--- a/app/assets/stylesheets/framework/markdown_area.scss
+++ b/app/assets/stylesheets/framework/markdown_area.scss
@@ -1,9 +1,7 @@
 .div-dropzone-wrapper {
   .div-dropzone {
     position: relative;
-    padding: 0;
-    border: 0;
-    margin-bottom: 5px;
+    margin-bottom: -5px;
 
     .div-dropzone-focus {
       border-color: #66afe9 !important;
@@ -25,12 +23,10 @@
 
     .div-dropzone-spinner {
       position: absolute;
-      top: 100%;
-      left: 100%;
-      margin-top: -1.1em;
-      margin-left: -1.1em;
+      bottom: 10px;
+      right: 5px;
       opacity: 0;
-      font-size: 30px;
+      font-size: 20px;
       transition: opacity 200ms ease-in-out;
     }
 
diff --git a/app/assets/stylesheets/framework/zen.scss b/app/assets/stylesheets/framework/zen.scss
index e75f4471e6c..951d794916b 100644
--- a/app/assets/stylesheets/framework/zen.scss
+++ b/app/assets/stylesheets/framework/zen.scss
@@ -1,42 +1,51 @@
-.zennable {
-  .zen-backdrop {
-    &.fullscreen {
-      background-color: white;
-      position: fixed;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      z-index: 1031;
+.zen-backdrop {
+  &.fullscreen {
+    background-color: white;
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 1031;
 
-      textarea {
-        border: none;
-        box-shadow: none;
-        border-radius: 0;
-        color: #000;
-        font-size: 20px;
-        line-height: 26px;
-        padding: 30px;
-        display: block;
-        outline: none;
-        resize: none;
-        height: 100vh;
-        max-width: 900px;
-        margin: 0 auto;
-      }
+    textarea {
+      border: none;
+      box-shadow: none;
+      border-radius: 0;
+      color: #000;
+      font-size: 20px;
+      line-height: 26px;
+      padding: 30px;
+      display: block;
+      outline: none;
+      resize: none;
+      height: 100vh;
+      max-width: 900px;
+      margin: 0 auto;
+    }
 
-      .zen-control-leave {
-        display: block;
-        position: absolute;
-        top: 0;
-      }
+    .zen-control-leave {
+      display: block;
+      position: absolute;
+      top: 0;
     }
   }
 }
 
 .zen-cotrol {
+  padding: 0;
   color: #555;
-  line-height: 31px;
+  background: none;
+  border: 0;
+}
+
+.zen-control-full {
+  color: #959494;
+
+  &:hover {
+    color: $gl-link-color;
+    text-decoration: none;
+  }
 }
 
 .zen-control-leave {
diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss
index 554f87c05ad..561b37e5828 100644
--- a/app/assets/stylesheets/pages/note_form.scss
+++ b/app/assets/stylesheets/pages/note_form.scss
@@ -47,9 +47,7 @@
   padding-left: 0;
   padding-right: 0;
   font-family: $regular_font;
-  border-left: 0;
-  border-right: 0;
-  resize: none!important; // TODO: Find a way to remove this !important
+  border: 0;
 
   &:focus {
     outline: 0;
@@ -63,10 +61,11 @@
 }
 
 .common-note-form {
-  margin: 0;
-  padding: $gl-padding;
-  border: 1px solid #E5E5E5;
-  border-radius: $border-radius-base;
+  .md-area {
+    padding: $gl-padding-top $gl-padding;
+    border: 1px solid #E5E5E5;
+    border-radius: $border-radius-base;
+  }
 }
 
 .note-form-actions {
@@ -151,11 +150,43 @@
   }
 }
 
-.comment-hints {
-  color: #999;
-  background: #fff;
-  padding: 7px;
-  margin-top: -7px;
-  border: 1px solid $border-color;
-  font-size: 13px;
+.comment-toolbar {
+  padding-top: $gl-padding-top;
+  border-top: 1px solid $border-color;
+}
+
+.toolbar-button {
+  float: left;
+  margin-right: $gl-padding;
+  padding: 0;
+  background: none;
+  border: 0;
+  color: #959494;
+  font-size: 14px;
+  line-height: 16px;
+
+  &:hover,
+  &:focus {
+    color: $gl-link-color;
+    outline: 0;
+  }
+
+  &:last-child {
+    margin-right: 0;
+  }
+}
+
+.toolbar-button-icon {
+  position: relative;
+  top: 1px;
+  margin-right: 3px;
+  color: inherit;
+  font-size: 16px;
+}
+
+.toolbar-text {
+  float: left;
+  color: #959494;
+  font-size: 14px;
+  line-height: 16px;
 }
diff --git a/app/views/projects/_md_preview.html.haml b/app/views/projects/_md_preview.html.haml
index 32c44338614..4920910fee1 100644
--- a/app/views/projects/_md_preview.html.haml
+++ b/app/views/projects/_md_preview.html.haml
@@ -1,20 +1,19 @@
 .md-area
-  .md-header.clearfix
-    %ul.nav-links.pull-left
+  .md-header
+    %ul.nav-links
       %li.active
         %a.js-md-write-button{ href: "#md-write-holder" }
           Write
       %li
         %a.js-md-preview-button{ href: "#md-preview-holder" }
           Preview
-    .pull-right
-      %a.zen-cotrol.js-zen-enter{ href: "#" }
-        Go full screen
+      %li.pull-right
+        %button.zen-cotrol.zen-control-full.js-zen-enter{ type: 'button' }
+          Go full screen
 
   .md-write-holder
     = yield
-  .md.md-preview-holder.hide
-    .js-md-preview{class: (preview_class if defined?(preview_class))}
+  .md.md-preview-holder.js-md-preview.hide{class: (preview_class if defined?(preview_class))}
 
   - if defined?(referenced_users) && referenced_users
     %div.referenced-users.hide
diff --git a/app/views/projects/_zen.html.haml b/app/views/projects/_zen.html.haml
index efa60c88b14..bddff5cdcbc 100644
--- a/app/views/projects/_zen.html.haml
+++ b/app/views/projects/_zen.html.haml
@@ -1,9 +1,8 @@
-.zennable
-  .zen-backdrop
-    - classes << ' js-gfm-input js-autosize markdown-area'
-    - if defined?(f) && f
-      = f.text_area attr, class: classes, placeholder: "Write a comment or drag your files here..."
-    - else
-      = text_area_tag attr, nil, class: classes, placeholder: "Write a comment or drag your files here..."
-    %a.zen-cotrol.zen-control-leave.js-zen-leave{ href: "#" }
-      = icon('compress')
+.zen-backdrop
+  - classes << ' js-gfm-input js-autosize markdown-area'
+  - if defined?(f) && f
+    = f.text_area attr, class: classes, placeholder: "Write a comment or drag your files here..."
+  - else
+    = text_area_tag attr, nil, class: classes, placeholder: "Write a comment or drag your files here..."
+  %a.zen-cotrol.zen-control-leave.js-zen-leave{ href: "#" }
+    = icon('compress')
diff --git a/app/views/projects/notes/_hints.html.haml b/app/views/projects/notes/_hints.html.haml
index 6e7929bdab0..7f83656146e 100644
--- a/app/views/projects/notes/_hints.html.haml
+++ b/app/views/projects/notes/_hints.html.haml
@@ -1,9 +1,21 @@
-.comment-hints.clearfix
-  .pull-left
+.comment-toolbar.clearfix
+  %button.toolbar-button.js-toolbar-button{ type: 'button', data: { prefix: ':' }, tabindex: '-1' }
+    = icon('smile-o', class: 'toolbar-button-icon')
+    Emoji
+  .toolbar-text
+    Styling with
     = link_to 'Markdown', help_page_path('markdown', 'markdown'), target: '_blank', tabindex: -1
-    tip:
-    = random_markdown_tip
-  .pull-right
-    = link_to '#', class: 'markdown-selector', tabindex: -1 do
-      = icon('paperclip')
-      Attach a file
+    is supported
+  %button.toolbar-button.markdown-selector.pull-right{ type: 'button', tabindex: '-1' }
+    = icon('file-image-o', class: 'toolbar-button-icon')
+    Attach a file
+
+-# .comment-hints.clearfix
+-#   .pull-left
+-#     = link_to 'Markdown', help_page_path('markdown', 'markdown'), target: '_blank', tabindex: -1
+-#     tip:
+-#     = random_markdown_tip
+-#   .pull-right
+-#     = link_to '#', class: 'markdown-selector', tabindex: -1 do
+-#       = icon('paperclip')
+-#       Attach a file