Commit 58c0a4f5 authored by Robert Schilling's avatar Robert Schilling

Implement zen mode for issues/MRs/notes

Close Zen mode by ESC, foward/backward
parent 6c9cb565
No related merge requests found
......@@ -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
......
......@@ -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 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' }.
......
......@@ -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 }}
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment