Refactor zen mode. Make it works in diffs

app/assets/javascripts/dispatcher.js.coffee

@@ -46,6 +46,7 @@ class Dispatcher
         new ZenMode()
       when "projects:merge_requests:diffs"
         new Diff()
+        new ZenMode()
       when 'projects:merge_requests:index'
         shortcut_handler = new ShortcutsNavigation()
       when 'dashboard:show'

app/assets/javascripts/zen_mode.js.coffee

@@ -10,7 +10,15 @@ class @ZenMode
       if not @active_checkbox
         @scroll_position = window.pageYOffset
 
-    $('body').on 'change', '.zennable input[type=checkbox]', (e) =>
+    $('body').on 'click', '.zen-enter-link', (e) =>
+      e.preventDefault()
+      $(e.currentTarget).closest('.zennable').find('.zen-toggle-comment').prop('checked', true)
+
+    $('body').on 'click', '.zen-leave-link', (e) =>
+      e.preventDefault()
+      $(e.currentTarget).closest('.zennable').find('.zen-toggle-comment').prop('checked', false)
+
+    $('body').on 'change', '.zen-toggle-comment', (e) =>
       checkbox = e.currentTarget
       if checkbox.checked
         # Disable other keyboard shortcuts in ZEN mode
@@ -32,8 +40,6 @@ class @ZenMode
     @active_zen_area = @active_checkbox.parent().find('textarea')
     @active_zen_area.focus()
     window.location.hash = ZenMode.fullscreen_prefix + @active_checkbox.prop('id')
-    # Disable dropzone in ZEN mode
-    Dropzone.forElement('.div-dropzone').disable()
 
   exitZenMode: =>
     if @active_zen_area isnt null

app/assets/stylesheets/generic/forms.scss

@@ -97,136 +97,3 @@ label {
 .wiki-content {
   margin-top: 35px;
 }
-
-.zennable {
-  position: relative;
-
-  input {
-    display: none;
-  }
-
-  .collapse {
-    display: none;
-    opacity: 0.5;
-
-    &:before {
-      content: '\f066';
-      font-family: FontAwesome;
-      color: #000;
-      font-size: 28px;
-      position: relative;
-      padding: 30px 40px 0 0;
-    }
-
-    &:hover {
-      opacity: 0.8;
-    }
-  }
-
-  .expand {
-    opacity: 0.5;
-
-    &:before {
-      content: '\f065';
-      font-family: FontAwesome;
-      color: #000;
-      font-size: 14px;
-      line-height: 14px;
-      padding-right: 20px;
-      position: relative;
-      vertical-align: middle;
-    }
-
-    &:hover {
-      opacity: 0.8;
-    }
-  }
-
-  input:checked ~ .zen-backdrop .expand {
-    display: none;
-  }
-
-  input:checked ~ .zen-backdrop .collapse {
-    display: block;
-    position: absolute;
-    top: 0;
-  }
-
-  label {
-    position: absolute;
-    top: -26px;
-    right: 0;
-    font-variant: small-caps;
-    text-transform: uppercase;
-    font-size: 10px;
-    padding: 4px;
-    font-weight: 500;
-    letter-spacing: 1px;
-
-    &:before {
-      display: inline-block;
-      width: 10px;
-      height: 14px;
-    }
-  }
-
-  input:checked ~ .zen-backdrop {
-    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;
-    }
-  }
-
-  .zen-backdrop textarea::-webkit-input-placeholder {
-    color: white;
-  }
-
-  .zen-backdrop textarea:-moz-placeholder {
-    color: white;
-  }
-
-  .zen-backdrop textarea::-moz-placeholder {
-    color: white;
-  }
-
-  .zen-backdrop textarea:-ms-input-placeholder {
-    color: white;
-  }
-
-  input:checked ~ .zen-backdrop textarea::-webkit-input-placeholder {
-    color: #999;
-  }
-
-  input:checked ~ .zen-backdrop textarea:-moz-placeholder {
-    color: #999;
-    opacity: 1;
-  }
-
-  input:checked ~ .zen-backdrop textarea::-moz-placeholder {
-    color: #999;
-    opacity: 1;
-  }
-
-  input:checked ~ .zen-backdrop textarea:-ms-input-placeholder {
-    color: #999;
-  }
-}

app/assets/stylesheets/generic/zen.scss

+.zennable {
+  position: relative;
+
+  input {
+    display: none;
+  }
+
+  .zen-enter-link {
+    color: #888;
+    position: absolute;
+    top: -26px;
+    right: 4px;
+  }
+
+  .zen-leave-link {
+    display: none;
+    color: #888;
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    padding: 5px;
+    font-size: 36px;
+
+    &:hover {
+      color: #111;
+    }
+  }
+
+  input:checked ~ .zen-backdrop .zen-enter-link {
+    display: none;
+  }
+
+  input:checked ~ .zen-backdrop .zen-leave-link {
+    display: block;
+    position: absolute;
+    top: 0;
+  }
+
+  input:checked ~ .zen-backdrop {
+    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;
+    }
+  }
+
+  .zen-backdrop textarea::-webkit-input-placeholder {
+    color: white;
+  }
+
+  .zen-backdrop textarea:-moz-placeholder {
+    color: white;
+  }
+
+  .zen-backdrop textarea::-moz-placeholder {
+    color: white;
+  }
+
+  .zen-backdrop textarea:-ms-input-placeholder {
+    color: white;
+  }
+
+  input:checked ~ .zen-backdrop textarea::-webkit-input-placeholder {
+    color: #999;
+  }
+
+  input:checked ~ .zen-backdrop textarea:-moz-placeholder {
+    color: #999;
+    opacity: 1;
+  }
+
+  input:checked ~ .zen-backdrop textarea::-moz-placeholder {
+    color: #999;
+    opacity: 1;
+  }
+
+  input:checked ~ .zen-backdrop textarea:-ms-input-placeholder {
+    color: #999;
+  }
+}

app/assets/stylesheets/sections/note_form.scss

@@ -160,3 +160,12 @@
     background: transparent;
   }
 }
+
+.comment-hints {
+  color: #999;
+  background: #FFF;
+  padding: 5px;
+  margin-top: -7px;
+  border: 1px solid #DDD;
+  font-size: 13px;
+}

app/views/projects/_zen.html.haml

 .zennable
-  %input#zen-toggle-comment{ tabindex: '-1', type: 'checkbox' }
+  %input#zen-toggle-comment.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' }
+    = link_to nil, class: 'zen-enter-link' do
+      %i.fa.fa-expand
+      Edit in fullscreen
+    = link_to nil, class: 'zen-leave-link' do
+      %i.fa.fa-compress

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

@@ -4,7 +4,7 @@
       = render 'projects/zen', f: f, attr: :note,
         classes: 'note_text js-note-text'
 
-      .light.clearfix
+      .comment-hints.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 }.
 

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

@@ -9,7 +9,7 @@
     = render 'projects/zen', f: f, attr: :note,
       classes: 'note_text js-note-text'
 
-    .light.clearfix
+    .comment-hints.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 }.