Restyling on elements in comment form

app/assets/javascripts/notes.js.coffee

 #= require autosave
-#= require autosize
 #= require dropzone
 #= require dropzone_input
 #= require gfm_auto_complete
@@ -288,7 +287,6 @@ class @Notes
       else
         previewButton.removeClass("turn-on").addClass "turn-off"
 
-    autosize(textarea)
     new Autosave textarea, [
       "Note"
       form.find("#note_commit_id").val()
@@ -370,9 +368,6 @@ 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!

app/assets/javascripts/zen_mode.js.coffee

@@ -42,7 +42,7 @@ class @ZenMode
       $(e.currentTarget).trigger('zen_mode:leave')
 
     $(document).on 'zen_mode:enter', (e) =>
-      @enter(e.target.parentNode)
+      @enter($(e.target).closest('.md-area').find('.zen-backdrop'))
     $(document).on 'zen_mode:leave', (e) =>
       @exit()
 

app/assets/stylesheets/framework/markdown_area.scss

@@ -65,6 +65,21 @@
   position: relative;
 }
 
+.md-header {
+  .nav-links {
+    .active {
+      a {
+        border-bottom-color: #000;
+      }
+    }
+
+    a {
+      padding-top: 0;
+      line-height: 1;
+    }
+  }
+}
+
 .referenced-users {
   color: #4c4e54;
   padding-top: 10px;

app/assets/stylesheets/framework/typography.scss

@@ -244,7 +244,7 @@ a > code {
  * Textareas intended for GFM
  *
  */
-textarea.js-gfm-input {
+.js-gfm-input {
   font-family: $monospace_font;
   color: $gl-text-color;
 }

app/assets/stylesheets/framework/zen.scss

 .zennable {
-  a.js-zen-enter {
-    color: $gl-gray;
-    position: absolute;
-    top: 0;
-    right: 4px;
-    line-height: 56px;
-  }
-
-  a.js-zen-leave {
-    display: none;
-    color: $gl-text-color;
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    padding: 5px;
-    font-size: 36px;
-
-    &:hover {
-      color: #111;
-    }
-  }
-
   .zen-backdrop {
     &.fullscreen {
       background-color: white;
@@ -47,11 +25,7 @@
         margin: 0 auto;
       }
 
-      a.js-zen-enter {
-        display: none;
-      }
-
-      a.js-zen-leave {
+      .zen-control-leave {
         display: block;
         position: absolute;
         top: 0;
@@ -59,3 +33,21 @@
     }
   }
 }
+
+.zen-cotrol {
+  color: #555;
+  line-height: 31px;
+}
+
+.zen-control-leave {
+  display: none;
+  color: $gl-text-color;
+  position: absolute;
+  right: 10px;
+  padding: 5px;
+  font-size: 36px;
+
+  &:hover {
+    color: #111;
+  }
+}

app/assets/stylesheets/pages/note_form.scss

 /**
  * Note Form
  */
-
-.comment-btn {
-  @extend .btn-create;
-}
 .reply-btn {
   @extend .btn-primary;
   margin: 10px $gl-padding;
@@ -42,18 +38,22 @@
     max-width: 100%;
   }
 
-  .note_text {
-    width: 100%;
-  }
-
   .comment-hints {
     margin-top: -12px;
   }
 }
 
-/* loading indicator */
-.notes-busy {
-  margin: 18px;
+.note-textarea {
+  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
+
+  &:focus {
+    outline: 0;
+  }
 }
 
 .note-image-attach {
@@ -64,11 +64,9 @@
 
 .common-note-form {
   margin: 0;
-  background: #fff;
   padding: $gl-padding;
-  margin-left: -$gl-padding;
-  margin-right: -$gl-padding;
-  margin-bottom: -$gl-padding;
+  border: 1px solid #E5E5E5;
+  border-radius: $border-radius-base;
 }
 
 .note-form-actions {

app/views/projects/_md_preview.html.haml

 .md-area
   .md-header.clearfix
-    %ul.nav-links
+    %ul.nav-links.pull-left
       %li.active
-        %a.js-md-write-button(href="#md-write-holder" tabindex="-1")
+        %a.js-md-write-button{ href: "#md-write-holder" }
           Write
       %li
-        %a.js-md-preview-button(href="#md-preview-holder" tabindex="-1")
+        %a.js-md-preview-button{ href: "#md-preview-holder" }
           Preview
+    .pull-right
+      %a.zen-cotrol.js-zen-enter{ href: "#" }
+        Go full screen
 
-  %div
-    .md-write-holder
-      = yield
-    .md.md-preview-holder.hide
-      .js-md-preview{class: (preview_class if defined?(preview_class))}
+  .md-write-holder
+    = yield
+  .md.md-preview-holder.hide
+    .js-md-preview{class: (preview_class if defined?(preview_class))}
 
   - if defined?(referenced_users) && referenced_users
     %div.referenced-users.hide

app/views/projects/_zen.html.haml

@@ -2,10 +2,8 @@
   .zen-backdrop
     - classes << ' js-gfm-input js-autosize markdown-area'
     - if defined?(f) && f
-      = f.text_area attr, class: classes
+      = f.text_area attr, class: classes, placeholder: "Write a comment or drag your files here..."
     - else
-      = text_area_tag attr, nil, class: classes
-    %a.js-zen-enter{ tabindex: "-1", href: "#" }
-      Go full screen
-    %a.js-zen-leave{ tabindex: "-1", href: "#" }
+      = 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')

app/views/projects/notes/_edit_form.html.haml

@@ -2,7 +2,7 @@
   = form_for note, url: namespace_project_note_path(@project.namespace, @project, note), method: :put, remote: true, authenticity_token: true, html: { class: 'edit-note js-quick-submit' } do |f|
     = note_target_fields(note)
     = render layout: 'projects/md_preview', locals: { preview_class: 'md-preview' } do
-      = render 'projects/zen', f: f, attr: :note, classes: 'note_text js-note-text js-task-list-field'
+      = render 'projects/zen', f: f, attr: :note, classes: 'note-textarea js-note-text js-task-list-field'
       = render 'projects/notes/hints'
 
     .note-form-actions.clearfix

app/views/projects/notes/_form.html.haml

@@ -8,7 +8,7 @@
   = f.hidden_field :noteable_type
 
   = render layout: 'projects/md_preview', locals: { preview_class: "md-preview", referenced_users: true } do
-    = render 'projects/zen', f: f, attr: :note, classes: 'note_text js-note-text'
+    = render 'projects/zen', f: f, attr: :note, classes: 'note-textarea js-note-text'
     = render 'projects/notes/hints'
     .error-alert
 

app/views/projects/notes/_notes_with_form.html.haml

@@ -7,18 +7,18 @@
           = image_tag avatar_icon(current_user), alt: current_user.to_reference, class: 'avatar s40'
     .timeline-content
       .js-main-target-form
-      - if can? current_user, :create_note, @project
-        = render "projects/notes/form", view: diff_view
-      - else
-        .disabled-comment-area
-          .disabled-profile
-          .disabled-comment
-            %span
-              Please
-              = link_to "register",new_user_session_path
-              or
-              = link_to "login",new_user_session_path
-              to post a comment
+        - if can? current_user, :create_note, @project
+          = render "projects/notes/form", view: diff_view
+        - else
+          .disabled-comment-area
+            .disabled-profile
+            .disabled-comment
+              %span
+                Please
+                = link_to "register",new_user_session_path
+                or
+                = link_to "login",new_user_session_path
+                to post a comment
 
 :javascript
   var notes = new Notes("#{namespace_project_notes_path(namespace_id: @project.namespace, target_id: @noteable.id, target_type: @noteable.class.name.underscore)}", #{@notes.map(&:id).to_json}, #{Time.now.to_i}, "#{diff_view}")