diff options
| -rw-r--r-- | app/assets/javascripts/dispatcher.js.coffee | 1 | ||||
| -rw-r--r-- | app/assets/javascripts/zen_mode.js.coffee | 12 | ||||
| -rw-r--r-- | app/assets/stylesheets/generic/forms.scss | 133 | ||||
| -rw-r--r-- | app/assets/stylesheets/generic/zen.scss | 98 | ||||
| -rw-r--r-- | app/assets/stylesheets/sections/note_form.scss | 9 | ||||
| -rw-r--r-- | app/views/projects/_zen.html.haml | 9 | ||||
| -rw-r--r-- | app/views/projects/notes/_edit_form.html.haml | 2 | ||||
| -rw-r--r-- | app/views/projects/notes/_form.html.haml | 2 |
8 files changed, 125 insertions, 141 deletions
diff --git a/app/assets/javascripts/dispatcher.js.coffee b/app/assets/javascripts/dispatcher.js.coffee index db1c529d51e..e5349d80e94 100644 --- a/app/assets/javascripts/dispatcher.js.coffee +++ b/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' diff --git a/app/assets/javascripts/zen_mode.js.coffee b/app/assets/javascripts/zen_mode.js.coffee index 0c9942a4014..0fb8f7ed75f 100644 --- a/app/assets/javascripts/zen_mode.js.coffee +++ b/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 diff --git a/app/assets/stylesheets/generic/forms.scss b/app/assets/stylesheets/generic/forms.scss index 1a832569953..c8982cdc00d 100644 --- a/app/assets/stylesheets/generic/forms.scss +++ b/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; - } -} diff --git a/app/assets/stylesheets/generic/zen.scss b/app/assets/stylesheets/generic/zen.scss new file mode 100644 index 00000000000..26afc21a6ab --- /dev/null +++ b/app/assets/stylesheets/generic/zen.scss @@ -0,0 +1,98 @@ +.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; + } +} diff --git a/app/assets/stylesheets/sections/note_form.scss b/app/assets/stylesheets/sections/note_form.scss index cf1bd09e8e1..26511d799f3 100644 --- a/app/assets/stylesheets/sections/note_form.scss +++ b/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; +} diff --git a/app/views/projects/_zen.html.haml b/app/views/projects/_zen.html.haml index 2bbc49e8eb5..5114c5874ea 100644 --- a/app/views/projects/_zen.html.haml +++ b/app/views/projects/_zen.html.haml @@ -1,7 +1,10 @@ .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 diff --git a/app/views/projects/notes/_edit_form.html.haml b/app/views/projects/notes/_edit_form.html.haml index a4520787a85..59e2b3f1b0b 100644 --- a/app/views/projects/notes/_edit_form.html.haml +++ b/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 }. diff --git a/app/views/projects/notes/_form.html.haml b/app/views/projects/notes/_form.html.haml index 76525966dc3..3879a0f10da 100644 --- a/app/views/projects/notes/_form.html.haml +++ b/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 }. |