Merge pull request #7737 from Razer6/feature/zenmaster

Zen Mode for issues/MR/notes

CHANGELOG

@@ -26,6 +26,7 @@ v 7.3.0
   - Don't allow edit of system notes
   - Project wiki search (Ralf Seidler)
   - Enabled Shibboleth authentication support (Matus Banas)
+  - Zen mode (fullscreen) for issues/MR/notes (Robert Schilling)
 
 v 7.2.1
   - Delete orphaned labels during label migration (James Brooks)

app/assets/javascripts/application.js.coffee

@@ -34,6 +34,7 @@
 #= require dropzone
 #= require semantic-ui/sidebar
 #= require mousetrap
+#= require mousetrap/pause
 #= require shortcuts
 #= require shortcuts_navigation
 #= require shortcuts_dashboard_navigation

app/assets/javascripts/dispatcher.js.coffee

@@ -24,18 +24,22 @@ class Dispatcher
       when 'projects:issues:show'
         new Issue()
         shortcut_handler = new ShortcutsIssueable()
+        new ZenMode()
       when 'projects:milestones:show'
         new Milestone()
-      when 'projects:issues:new'
+      when 'projects:issues:new','projects:issues:edit'
         GitLab.GfmAutoComplete.setup()
         shortcut_handler = new ShortcutsNavigation()
-      when 'projects:merge_requests:new'
+        new ZenMode()
+      when 'projects:merge_requests:new', 'projects:merge_requests:edit'
         GitLab.GfmAutoComplete.setup()
         new Diff()
         shortcut_handler = new ShortcutsNavigation()
+        new ZenMode()
       when 'projects:merge_requests:show'
         new Diff()
         shortcut_handler = new ShortcutsIssueable()
+        new ZenMode()
       when "projects:merge_requests:diffs"
         new Diff()
       when 'projects:merge_requests:index'

app/assets/javascripts/markdown_area.js.coffee

@@ -27,7 +27,7 @@ $(document).ready ->
   dropzone = $(".div-dropzone").dropzone(
     url: project_image_path_upload
     dictDefaultMessage: ""
-    clickable: true
+    clickable: false
     paramName: "markdown_img"
     maxFilesize: 10
     uploadMultiple: false

app/assets/javascripts/zen_mode.js.coffee

+class @ZenMode
+  @fullscreen_prefix = 'fullscreen_'
+  @ESC = 27
+
+  constructor: ->
+    @active_zen_area = null
+    @active_checkbox = null
+
+    $('body').on 'change', '.zennable input[type=checkbox]', (e) =>
+      checkbox = e.currentTarget;
+      if checkbox.checked
+        Mousetrap.pause()
+        @udpateActiveZenArea(checkbox)
+      else
+        @exitZenMode()
+
+    $(document).on 'keydown', (e) =>
+      console.log("esc")
+      if e.keyCode is ZenMode.ESC
+        @exitZenMode()
+
+    $(window).on 'hashchange', @updateZenModeFromLocationHash
+
+  udpateActiveZenArea: (checkbox) =>
+    @active_checkbox = $(checkbox)
+    @active_checkbox.prop('checked', true)
+    @active_zen_area = @active_checkbox.parent().find('textarea')
+    @active_zen_area.focus()
+    window.location.hash = ZenMode.fullscreen_prefix + @active_checkbox.prop('id')
+  
+  exitZenMode: =>
+    if @active_zen_area isnt null
+      Mousetrap.unpause()
+      @active_checkbox.prop('checked', false)
+      @active_zen_area = null
+      @active_checkbox = null
+      window.location.hash = ''
+
+  checkboxFromLocationHash: (e) ->
+    id = $.trim(window.location.hash.replace('#' + ZenMode.fullscreen_prefix, ''))
+    if id
+      return $('.zennable input[type=checkbox]#' + id)[0]
+    else
+      return null
+
+  updateZenModeFromLocationHash: (e) =>
+    checkbox = @checkboxFromLocationHash()
+    if checkbox
+      @udpateActiveZenArea(checkbox)
+    else
+      @exitZenMode()      

app/assets/stylesheets/generic/forms.scss

@@ -83,3 +83,140 @@ label {
 .form-control {
   @include box-shadow(none);
 }
+
+.issuable-description {
+  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/views/projects/_issuable_form.html.haml

@@ -4,11 +4,15 @@
   .col-sm-10
     = f.text_field :title, maxlength: 255, autofocus: true,
         class: 'form-control pad js-gfm-input', required: true
-.form-group
+.form-group.issuable-description
   = f.label :description, 'Description', class: 'control-label'
   .col-sm-10
-    = f.text_area :description, rows: 14,
-        class: 'form-control js-gfm-input markdown-area'
+    .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' }
     .col-sm-12.hint
       .pull-left
         Parsed with

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

@@ -21,7 +21,12 @@
       .form-group
         .light
           = f.label :description, "Description"
-        = f.text_area :description, class: "form-control js-gfm-input markdown-area", rows: 10
+        .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' }
         .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,7 +14,12 @@
         Preview
   %div
     .note-write-holder
-      = f.text_area :note, size: 255, class: 'note_text js-note-text js-gfm-input markdown-area'
+      .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' }
 
       .light.clearfix
         .pull-left Comments are parsed with #{link_to "GitLab Flavored Markdown", help_page_path("markdown", "markdown"),{ target: '_blank', tabindex: -1 }}