Refactor zen mode. Make it works in diffs
This commit is contained in:
parent
3333bd4608
commit
cad685e70b
|
@ -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'
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
|
@ -160,3 +160,12 @@
|
|||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.comment-hints {
|
||||
color: #999;
|
||||
background: #FFF;
|
||||
padding: 5px;
|
||||
margin-top: -7px;
|
||||
border: 1px solid #DDD;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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 }.
|
||||
|
||||
|
|
|
@ -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 }.
|
||||
|
||||
|
|
Loading…
Reference in New Issue