Merge pull request #7801 from cirosantilli/dry-zen-view

Factor zen mode.

app/assets/stylesheets/generic/issuable.scss

+/**
+ * Styles that apply to both issues and merge requests.
+ */
+
+.issue-form, .merge-request-form {
+  .description {
+    height: 20em;
+  }
+}

app/views/projects/_issuable_form.html.haml

@@ -7,12 +7,8 @@
 .form-group.issuable-description
   = f.label :description, 'Description', class: 'control-label'
   .col-sm-10
-    .zennable
-      %input#zen-toggle-comment{ tabindex: '-1', type: 'checkbox' }
-      .zen-backdrop
-        = f.text_area :description, rows: 14, class: 'form-control js-gfm-input markdown-area', placeholder: 'Leave a comment'
-        %label{ for: 'zen-toggle-comment', class: 'expand' } Edit in fullscreen
-        %label{ for: 'zen-toggle-comment', class: 'collapse' }
+    = render 'projects/zen', f: f, attr: :description,
+                             classes: 'description form-control'
     .col-sm-12.hint
       .pull-left
         Parsed with

app/views/projects/_zen.html.haml

+.zennable
+  %input#zen-toggle-comment{ tabindex: '-1', type: 'checkbox' }
+  .zen-backdrop
+    - classes << ' js-gfm-input markdown-area'
+    = f.text_area attr, class: classes, placeholder: 'Leave a comment'
+    %label{ for: 'zen-toggle-comment', class: 'expand' } Edit in fullscreen
+    %label{ for: 'zen-toggle-comment', class: 'collapse' }

app/views/projects/merge_requests/_new_submit.html.haml

@@ -21,12 +21,8 @@
       .form-group
         .light
           = f.label :description, "Description"
-        .zennable
-          %input#zen-toggle-comment{ tabindex: '-1', type: 'checkbox' }
-          .zen-backdrop
-            = f.text_area :description, class: 'form-control js-gfm-input markdown-area', rows: 10, placeholder: 'Leave a comment'
-            %label{ for: 'zen-toggle-comment', class: 'expand' } Edit in fullscreen
-            %label{ for: 'zen-toggle-comment', class: 'collapse' }
+        = render 'projects/zen', f: f, attr: :description,
+                                 classes: 'description form-control'
         .clearfix.hint
           .pull-left Description is parsed with #{link_to "GitLab Flavored Markdown", help_page_path("markdown", "markdown"), target: '_blank'}.
           .pull-right Attach images (JPG, PNG, GIF) by dragging & dropping or #{link_to "selecting them", '#', class: 'markdown-selector' }.

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

@@ -14,13 +14,8 @@
         Preview
   %div
     .note-write-holder
-      .zennable
-        %input#zen-toggle-comment{ tabindex: '-1', type: 'checkbox' }
-        .zen-backdrop
-          = f.text_area :note, size: 255, class: 'note_text js-note-text js-gfm-input markdown-area', placeholder: 'Leave a comment'
-          %label{ for: 'zen-toggle-comment', class: 'expand' } Edit in fullscreen
-          %label{ for: 'zen-toggle-comment', class: 'collapse' }
-
+      = render 'projects/zen', f: f, attr: :note,
+                               classes: 'note_text js-note-text'
       .light.clearfix
         .pull-left Comments are parsed with #{link_to "GitLab Flavored Markdown", help_page_path("markdown", "markdown"),{ target: '_blank', tabindex: -1 }}
         .pull-right Attach images (JPG, PNG, GIF) by dragging & dropping or #{link_to "selecting them", '#', class: 'markdown-selector', tabindex: -1 }.