From 58c0a4f5cf27f76f1dc0474197b8aca06b6db12d Mon Sep 17 00:00:00 2001 From: Robert Schilling Date: Thu, 11 Sep 2014 12:05:38 +0200 Subject: [PATCH 1/2] Implement zen mode for issues/MRs/notes Close Zen mode by ESC, foward/backward --- .../javascripts/markdown_area.js.coffee | 2 +- app/assets/stylesheets/generic/forms.scss | 137 ++++++++++++++++++ app/views/projects/_issuable_form.html.haml | 10 +- .../merge_requests/_new_submit.html.haml | 7 +- app/views/projects/notes/_form.html.haml | 7 +- 5 files changed, 157 insertions(+), 6 deletions(-) diff --git a/app/assets/javascripts/markdown_area.js.coffee b/app/assets/javascripts/markdown_area.js.coffee index bee2785562d..a971e5dbf1d 100644 --- a/app/assets/javascripts/markdown_area.js.coffee +++ b/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 diff --git a/app/assets/stylesheets/generic/forms.scss b/app/assets/stylesheets/generic/forms.scss index 2a31cae5dfb..3b90c4f27f0 100644 --- a/app/assets/stylesheets/generic/forms.scss +++ b/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; + } +} diff --git a/app/views/projects/_issuable_form.html.haml b/app/views/projects/_issuable_form.html.haml index f7c4673b52d..402cdb44182 100644 --- a/app/views/projects/_issuable_form.html.haml +++ b/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 diff --git a/app/views/projects/merge_requests/_new_submit.html.haml b/app/views/projects/merge_requests/_new_submit.html.haml index e013fd6d1ce..248f6a00522 100644 --- a/app/views/projects/merge_requests/_new_submit.html.haml +++ b/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 mousetrap', 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' }. diff --git a/app/views/projects/notes/_form.html.haml b/app/views/projects/notes/_form.html.haml index 5ebafb13f1c..66b79e5026b 100644 --- a/app/views/projects/notes/_form.html.haml +++ b/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 }} From 0d5958c7296190bb9a814048529502b3ebf90bc2 Mon Sep 17 00:00:00 2001 From: Robert Schilling Date: Thu, 11 Sep 2014 18:19:49 +0200 Subject: [PATCH 2/2] Close Zen mode by ESC, foward/backward --- CHANGELOG | 1 + app/assets/javascripts/application.js.coffee | 1 + app/assets/javascripts/dispatcher.js.coffee | 8 ++- app/assets/javascripts/zen_mode.js.coffee | 51 +++++++++++++++++++ .../merge_requests/_new_submit.html.haml | 2 +- 5 files changed, 60 insertions(+), 3 deletions(-) create mode 100644 app/assets/javascripts/zen_mode.js.coffee diff --git a/CHANGELOG b/CHANGELOG index 6021da42422..49bf983eb5e 100644 --- a/CHANGELOG +++ b/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) diff --git a/app/assets/javascripts/application.js.coffee b/app/assets/javascripts/application.js.coffee index 86ccd8c21ed..9add1304dc7 100644 --- a/app/assets/javascripts/application.js.coffee +++ b/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 diff --git a/app/assets/javascripts/dispatcher.js.coffee b/app/assets/javascripts/dispatcher.js.coffee index ae4cf577179..086c09f196e 100644 --- a/app/assets/javascripts/dispatcher.js.coffee +++ b/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' diff --git a/app/assets/javascripts/zen_mode.js.coffee b/app/assets/javascripts/zen_mode.js.coffee new file mode 100644 index 00000000000..aea707d8550 --- /dev/null +++ b/app/assets/javascripts/zen_mode.js.coffee @@ -0,0 +1,51 @@ +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() diff --git a/app/views/projects/merge_requests/_new_submit.html.haml b/app/views/projects/merge_requests/_new_submit.html.haml index 248f6a00522..657a77eb758 100644 --- a/app/views/projects/merge_requests/_new_submit.html.haml +++ b/app/views/projects/merge_requests/_new_submit.html.haml @@ -24,7 +24,7 @@ .zennable %input#zen-toggle-comment{ tabindex: '-1', type: 'checkbox' } .zen-backdrop - = f.text_area :description, class: 'form-control js-gfm-input markdown-area mousetrap', rows: 10, placeholder: 'Leave a comment' + = 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