Skip to content
GitLab
Projects
Groups
Snippets
Help
Loading...
Help
What's new
7
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Open sidebar
projects.thm.de
GitLab
Commits
a9800ce4
Commit
a9800ce4
authored
Jan 11, 2016
by
Dmitriy Zaporozhets
Browse files
Options
Browse Files
Download
Plain Diff
Merge branch 'master' of gitlab.com:gitlab-org/gitlab-ce
parents
d89ad507
66dee188
Changes
5
Hide whitespace changes
Inline
Side-by-side
Showing
5 changed files
with
119 additions
and
128 deletions
+119
-128
app/assets/javascripts/zen_mode.js.coffee
app/assets/javascripts/zen_mode.js.coffee
+64
-40
app/assets/stylesheets/framework/zen.scss
app/assets/stylesheets/framework/zen.scss
+37
-62
app/views/projects/_zen.html.haml
app/views/projects/_zen.html.haml
+4
-5
spec/javascripts/fixtures/zen_mode.html.haml
spec/javascripts/fixtures/zen_mode.html.haml
+4
-5
spec/javascripts/zen_mode_spec.js.coffee
spec/javascripts/zen_mode_spec.js.coffee
+10
-16
No files found.
app/assets/javascripts/zen_mode.js.coffee
View file @
a9800ce4
# Zen Mode (full screen) textarea
#
#= provides zen_mode:enter
#= provides zen_mode:leave
#
#= require jquery.scrollTo
#= require dropzone
#= require mousetrap
#= require mousetrap/pause
#
# ### Events
#
# `zen_mode:enter`
#
# Fired when the "Edit in fullscreen" link is clicked.
#
# **Synchronicity** Sync
# **Bubbles** Yes
# **Cancelable** No
# **Target** a.js-zen-enter
#
# `zen_mode:leave`
#
# Fired when the "Leave Fullscreen" link is clicked.
#
# **Synchronicity** Sync
# **Bubbles** Yes
# **Cancelable** No
# **Target** a.js-zen-leave
#
class
@
ZenMode
constructor
:
->
@
active_zen_area
=
null
@
active_checkbox
=
null
@
scroll_position
=
0
$
(
window
).
scroll
=>
if
not
@
active_checkbox
@
scroll_position
=
window
.
pageYOffset
@
active_backdrop
=
null
@
active_textarea
=
null
$
(
'body'
).
on
'click'
,
'.zen-enter
-link
'
,
(
e
)
=
>
$
(
document
).
on
'click'
,
'.
js-
zen-enter'
,
(
e
)
-
>
e
.
preventDefault
()
$
(
e
.
currentTarget
).
closest
(
'.zennable'
).
find
(
'
.
zen
-toggle-comment'
).
prop
(
'checked'
,
true
).
change
(
)
$
(
e
.
currentTarget
).
trigger
(
'zen
_mode:enter'
)
$
(
'body'
).
on
'click'
,
'.zen-leave
-link
'
,
(
e
)
=
>
$
(
document
).
on
'click'
,
'.
js-
zen-leave'
,
(
e
)
-
>
e
.
preventDefault
()
$
(
e
.
currentTarget
).
closest
(
'.zennable'
).
find
(
'.zen-toggle-comment'
).
prop
(
'checked'
,
false
).
change
()
$
(
'body'
).
on
'change'
,
'.zen-toggle-comment'
,
(
e
)
=>
checkbox
=
e
.
currentTarget
if
checkbox
.
checked
# Disable other keyboard shortcuts in ZEN mode
Mousetrap
.
pause
()
@
updateActiveZenArea
(
checkbox
)
else
@
exitZenMode
()
$
(
document
).
on
'keydown'
,
(
e
)
=>
if
e
.
keyCode
is
27
# Esc
@
exitZenMode
()
$
(
e
.
currentTarget
).
trigger
(
'zen_mode:leave'
)
$
(
document
).
on
'zen_mode:enter'
,
(
e
)
=>
@
enter
(
e
.
target
.
parentNode
)
$
(
document
).
on
'zen_mode:leave'
,
(
e
)
=>
@
exit
()
$
(
document
).
on
'keydown'
,
(
e
)
->
if
e
.
keyCode
==
27
# Esc
e
.
preventDefault
()
$
(
document
).
trigger
(
'zen_mode:leave'
)
enter
:
(
backdrop
)
->
Mousetrap
.
pause
()
@
active_backdrop
=
$
(
backdrop
)
@
active_backdrop
.
addClass
(
'fullscreen'
)
@
active_textarea
=
@
active_backdrop
.
find
(
'textarea'
)
updateActiveZenArea
:
(
checkbox
)
=>
@
active_checkbox
=
$
(
checkbox
)
@
active_checkbox
.
prop
(
'checked'
,
true
)
@
active_zen_area
=
@
active_checkbox
.
parent
().
find
(
'textarea'
)
# Prevent a user-resized textarea from persisting to fullscreen
@
active_
zen_
area
.
removeAttr
(
'style'
)
@
active_
zen_
area
.
focus
()
@
active_
text
area
.
removeAttr
(
'style'
)
@
active_
text
area
.
focus
()
exit
ZenMode
:
=
>
if
@
active_
zen_area
isnt
null
exit
:
-
>
if
@
active_
textarea
Mousetrap
.
unpause
()
@
active_checkbox
.
prop
(
'checked'
,
false
)
@
active_zen_area
=
null
@
active_checkbox
=
null
@
restoreScroll
(
@
scroll_position
)
# Enable dropzone when leaving ZEN mode
@
active_textarea
.
closest
(
'.zen-backdrop'
).
removeClass
(
'fullscreen'
)
@
scrollTo
(
@
active_textarea
)
@
active_textarea
=
null
@
active_backdrop
=
null
Dropzone
.
forElement
(
'.div-dropzone'
).
enable
()
restoreS
croll
:
(
y
)
->
window
.
scrollTo
(
window
.
pageXOffset
,
y
)
s
croll
To
:
(
zen_area
)
->
$
.
scrollTo
(
zen_area
,
0
,
offset
:
-
150
)
app/assets/stylesheets/framework/zen.scss
View file @
a9800ce4
.zennable
{
.zen-toggle-comment
{
display
:
none
;
}
.zen-enter-link
{
a
.js-zen-enter
{
color
:
$gl-gray
;
position
:
absolute
;
top
:
0px
;
...
...
@@ -11,7 +7,7 @@
line-height
:
40px
;
}
.
zen-leave
-link
{
a
.js-
zen-leave
{
display
:
none
;
color
:
$gl-text-color
;
position
:
absolute
;
...
...
@@ -25,62 +21,41 @@
}
}
// Hide the Enter link when we're in Zen mode
input
:checked
~
.zen-backdrop
.zen-enter-link
{
display
:
non
e
;
}
// Show the Leave link when we're in Zen mode
input
:checked
~
.zen-backdrop
.zen-leave-link
{
display
:
block
;
position
:
absolute
;
top
:
0
;
}
input
:checked
~
.zen-backdrop
{
b
ackground-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
{
&
.fullscreen
{
background-color
:
whit
e
;
position
:
fixed
;
top
:
0
;
bottom
:
0
;
left
:
0
;
right
:
0
;
z-index
:
1031
;
textarea
{
border
:
none
;
box-shadow
:
none
;
b
order-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
;
}
a
.js-zen-enter
{
display
:
none
;
}
a
.js-zen-leave
{
display
:
block
;
position
:
absolute
;
top
:
0
;
}
}
}
// Make the color of the placeholder text in the Zenned-out textarea darker,
// so it becomes visible
input
:checked
~
.zen-backdrop
textarea
::-webkit-input-placeholder
{
color
:
#A8A8A8
;
}
input
:checked
~
.zen-backdrop
textarea
:-moz-placeholder
{
color
:
#A8A8A8
;
opacity
:
1
;
}
input
:checked
~
.zen-backdrop
textarea
::-moz-placeholder
{
color
:
#A8A8A8
;
opacity
:
1
;
}
input
:checked
~
.zen-backdrop
textarea
:-ms-input-placeholder
{
color
:
#A8A8A8
;
}
}
app/views/projects/_zen.html.haml
View file @
a9800ce4
.zennable
%input
#zen-toggle-comment
.zen-toggle-comment
(
tabindex=
"-1"
type=
"checkbox"
)
.zen-backdrop
-
classes
<<
' js-gfm-input markdown-area'
-
if
defined?
(
f
)
&&
f
=
f
.
text_area
attr
,
class:
classes
,
placeholder:
''
=
f
.
text_area
attr
,
class:
classes
-
else
=
text_area_tag
attr
,
nil
,
class:
classes
,
placeholder:
''
%a
.zen-enter
-link
(
tabindex=
"-1"
href=
"#"
)
=
text_area_tag
attr
,
nil
,
class:
classes
%a
.
js-
zen-enter
(
tabindex=
"-1"
href=
"#"
)
=
icon
(
'expand'
)
Edit in fullscreen
%a
.zen-leave
-link
(
href=
"#"
)
%a
.
js-
zen-leave
(
tabindex=
"-1"
href=
"#"
)
=
icon
(
'compress'
)
spec/javascripts/fixtures/zen_mode.html.haml
View file @
a9800ce4
.zennable
%input
#zen-toggle-comment
.zen-toggle-comment
{
tabindex:
'-1'
,
type:
'checkbox'
}
.zen-backdrop
%textarea
#note_note
.js-gfm-input.markdown-area
{
placeholder:
'Leave a comment'
}
%a
.zen-enter
-link
{
tabindex
:
'-1'
}
%textarea
#note_note
.js-gfm-input.markdown-area
%a
.
js-
zen-enter
(
tabindex
=
"-1"
href=
"#"
)
%i
.fa.fa-expand
Edit in fullscreen
%a
.zen-leave
-link
Edit in fullscreen
%a
.
js-
zen-leave
(
tabindex=
"-1"
href=
"#"
)
%i
.fa.fa-compress
spec/javascripts/zen_mode_spec.js.coffee
View file @
a9800ce4
...
...
@@ -15,14 +15,6 @@ describe 'ZenMode', ->
# Set this manually because we can't actually scroll the window
@
zen
.
scroll_position
=
456
# Ohmmmmmmm
enterZen
=
->
$
(
'.zen-toggle-comment'
).
prop
(
'checked'
,
true
).
trigger
(
'change'
)
# Wh- what was that?!
exitZen
=
->
$
(
'.zen-toggle-comment'
).
prop
(
'checked'
,
false
).
trigger
(
'change'
)
describe
'on enter'
,
->
it
'pauses Mousetrap'
,
->
spyOn
(
Mousetrap
,
'pause'
)
...
...
@@ -35,16 +27,14 @@ describe 'ZenMode', ->
expect
(
'textarea'
).
not
.
toHaveAttr
(
'style'
)
describe
'in use'
,
->
beforeEach
->
enterZen
()
beforeEach
->
enterZen
()
it
'exits on Escape'
,
->
$
(
document
).
trigger
(
jQuery
.
Event
(
'keydown'
,
{
keyCode
:
27
})
)
expect
(
$
(
'.zen-
toggle-comment'
).
prop
(
'checked'
)).
toBe
(
false
)
escapeKeydown
(
)
expect
(
$
(
'.zen-
backdrop'
)).
not
.
toHaveClass
(
'fullscreen'
)
describe
'on exit'
,
->
beforeEach
->
enterZen
()
beforeEach
->
enterZen
()
it
'unpauses Mousetrap'
,
->
spyOn
(
Mousetrap
,
'unpause'
)
...
...
@@ -52,6 +42,10 @@ describe 'ZenMode', ->
expect
(
Mousetrap
.
unpause
).
toHaveBeenCalled
()
it
'restores the scroll position'
,
->
spyOn
(
@
zen
,
'
restoreS
croll'
)
spyOn
(
@
zen
,
'
s
croll
To
'
)
exitZen
()
expect
(
@
zen
.
restoreScroll
).
toHaveBeenCalledWith
(
456
)
expect
(
@
zen
.
scrollTo
).
toHaveBeenCalled
()
enterZen
=
->
$
(
'a.js-zen-enter'
).
click
()
# Ohmmmmmmm
exitZen
=
->
$
(
'a.js-zen-leave'
).
click
()
escapeKeydown
=
->
$
(
'textarea'
).
trigger
(
$
.
Event
(
'keydown'
,
{
keyCode
:
27
}))
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment