Merge pull request #7737 from Razer6/feature/zenmaster
Zen Mode for issues/MR/notes
This commit is contained in:
Dmitriy Zaporozhets
commit
a034a46652
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -34,6 +34,7 @@
|
|||
#= require dropzone
|
||||
#= require semantic-ui/sidebar
|
||||
#= require mousetrap
|
||||
#= require mousetrap/pause
|
||||
#= require shortcuts
|
||||
#= require shortcuts_navigation
|
||||
#= require shortcuts_dashboard_navigation
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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' }.
|
||||
|
|
|
|||
|
|
@ -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 }}
|
||||
|
|
|
|||
Loading…
Reference in New Issue