History

Tweak dbclick-to-toggle-sidebar code

Thibaut Courouble committed 10 years ago

Commit 31495ff1 parent 4cb0d7a12 files · +50 −41Browse files

Unified · Split

12 files
  1. assets/javascripts/app/app.coffee +0 −8
  2. assets/javascripts/app/settings.coffee +11 −11
  3. assets/javascripts/views/layout/document.coffee +9 −1
  4. assets/javascripts/views/layout/resizer.coffee +3 −3
  5. assets/stylesheets/components/_content.scss +2 −4
  6. assets/stylesheets/components/_notice.scss +2 −0
  7. assets/stylesheets/components/_path.scss +2 −4
  8. assets/stylesheets/components/_sidebar.scss +18 −5
  9. assets/stylesheets/global/_variables.scss +1 −0
  10. assets/stylesheets/global/variables-dark.scss +1 −0
  11. lib/app.rb +0 −4
  12. views/app.erb +1 −1
assets/javascripts/app/app.coffee+0−8
@@ -179,14 +179,6 @@ · 178 unmodified lines
179 # enabled because it doesn't support caching URLs that use CORS.179 # enabled because it doesn't support caching URLs that use CORS.
180 @config[if @appCache and @settings.hasDocs() then 'index_path' else 'docs_host']180 @config[if @appCache and @settings.hasDocs() then 'index_path' else 'docs_host']
181 181
182 toggleSidebar: ->
183 state = @el.getAttribute('data-sidebar')
184 newState = if state == 'visible' then 'hidden' else 'visible'
185 @el.setAttribute('data-sidebar', newState)
186 @settings.setSidebar(newState)
187 @appCache?.updateInBackground()
188 return
189
190 onBootError: (args...) ->182 onBootError: (args...) ->
191 @trigger 'bootError'183 @trigger 'bootError'
192 @hideLoading()184 @hideLoading()
assets/javascripts/app/settings.coffee+11−11
@@ -4,7 +4,6 @@ class app.Settings · 3 unmodified lines
4 DARK_KEY = 'dark'4 DARK_KEY = 'dark'
5 LAYOUT_KEY = 'layout'5 LAYOUT_KEY = 'layout'
6 SIZE_KEY = 'size'6 SIZE_KEY = 'size'
7 SIDEBAR_KEY = 'sidebar'
8 7
9 @defaults:8 @defaults:
10 count: 09 count: 0
@@ -63,10 +62,18 @@ class app.Settings · 52 unmodified lines
63 catch62 catch
64 return63 return
65 64
66 setLayout: (value) ->65 setLayout: (name, enable) ->
67 try66 try
68 if value67 layout = (Cookies.get(LAYOUT_KEY) || '').split(' ')
69 Cookies.set LAYOUT_KEY, value, path: '/', expires: 1e868 $.arrayDelete(layout, '')
69
70 if enable
71 layout.push(name) if layout.indexOf(name) is -1
72 else
73 $.arrayDelete(layout, name)
74
75 if layout.length > 0
76 Cookies.set LAYOUT_KEY, layout.join(' '), path: '/', expires: 1e8
70 else77 else
71 Cookies.expire LAYOUT_KEY78 Cookies.expire LAYOUT_KEY
72 catch79 catch
@@ -78,17 +85,10 @@ class app.Settings · 5 unmodified lines
78 catch85 catch
79 return86 return
80 87
81 setSidebar: (value) ->
82 try
83 Cookies.set SIDEBAR_KEY, value, path: '/', expires: 1e8
84 catch
85 return
86
87 reset: ->88 reset: ->
88 try Cookies.expire DOCS_KEY89 try Cookies.expire DOCS_KEY
89 try Cookies.expire DARK_KEY90 try Cookies.expire DARK_KEY
90 try Cookies.expire LAYOUT_KEY91 try Cookies.expire LAYOUT_KEY
91 try Cookies.expire SIZE_KEY92 try Cookies.expire SIZE_KEY
92 try Cookies.expire SIDEBAR_KEY
93 try @store.del(SETTINGS_KEY)93 try @store.del(SETTINGS_KEY)
94 return94 return
assets/javascripts/views/layout/document.coffee+9−1
@@ -1,5 +1,6 @@
1class app.views.Document extends app.View1class app.views.Document extends app.View
2 MAX_WIDTH_CLASS = '_max-width'2 MAX_WIDTH_CLASS = '_max-width'
3 HIDE_SIDEBAR_CLASS = '_sidebar-hidden'
3 4
4 @el: document5 @el: document
5 6
@@ -34,7 +35,14 @@ class app.views.Document extends app.View · 28 unmodified lines
34 toggleLayout: ->35 toggleLayout: ->
35 wantsMaxWidth = !app.el.classList.contains(MAX_WIDTH_CLASS)36 wantsMaxWidth = !app.el.classList.contains(MAX_WIDTH_CLASS)
36 app.el.classList[if wantsMaxWidth then 'add' else 'remove'](MAX_WIDTH_CLASS)37 app.el.classList[if wantsMaxWidth then 'add' else 'remove'](MAX_WIDTH_CLASS)
37 app.settings.setLayout(if wantsMaxWidth then MAX_WIDTH_CLASS else false)38 app.settings.setLayout(MAX_WIDTH_CLASS, wantsMaxWidth)
39 app.appCache?.updateInBackground()
40 return
41
42 toggleSidebar: ->
43 sidebarHidden = app.el.classList.contains(HIDE_SIDEBAR_CLASS)
44 app.el.classList[if sidebarHidden then 'remove' else 'add'](HIDE_SIDEBAR_CLASS)
45 app.settings.setLayout(HIDE_SIDEBAR_CLASS, !sidebarHidden)
38 app.appCache?.updateInBackground()46 app.appCache?.updateInBackground()
39 return47 return
40 48
assets/javascripts/views/layout/resizer.coffee+3−3
@@ -4,7 +4,7 @@ class app.views.Resizer extends app.View · 3 unmodified lines
4 @events:4 @events:
5 dragstart: 'onDragStart'5 dragstart: 'onDragStart'
6 dragend: 'onDragEnd'6 dragend: 'onDragEnd'
7 dblclick: 'onDbLClick'7 dblclick: 'onDblClick'
8 8
9 @isSupported: ->9 @isSupported: ->
10 'ondragstart' of document.createElement('div') and !app.isMobile()10 'ondragstart' of document.createElement('div') and !app.isMobile()
@@ -32,8 +32,8 @@ class app.views.Resizer extends app.View · 21 unmodified lines
32 app.appCache?.updateInBackground()32 app.appCache?.updateInBackground()
33 return33 return
34 34
35 onDbLClick: (event) =>35 onDblClick: (event) ->
36 app.toggleSidebar()36 app.document.toggleSidebar()
37 return37 return
38 38
39 onDragStart: (event) =>39 onDragStart: (event) =>
assets/stylesheets/components/_content.scss+2−4
@@ -10,11 +10,9 @@ · 9 unmodified lines
10 pointer-events: none;10 pointer-events: none;
11 @extend %border-box;11 @extend %border-box;
12 12
13 ._app[data-sidebar="hidden"] & {
14 margin-left: 0;
15 }
16
17 @media #{$mediumScreen} { margin-left: $sidebarMediumWidth; }13 @media #{$mediumScreen} { margin-left: $sidebarMediumWidth; }
14
15 ._sidebar-hidden & { margin-left: $sidebarHiddenWidth; }
18}16}
19 17
20._content {18._content {
assets/stylesheets/components/_notice.scss+2−0
@@ -11,6 +11,8 @@ · 10 unmodified lines
11 11
12 @media #{$mediumScreen} { left: $sidebarMediumWidth; }12 @media #{$mediumScreen} { left: $sidebarMediumWidth; }
13 13
14 ._sidebar-hidden & { left: $sidebarHiddenWidth; }
15
14 &:not(._top) ~ ._container { padding-bottom: 2.5rem; }16 &:not(._top) ~ ._container { padding-bottom: 2.5rem; }
15 17
16 &._top {18 &._top {
assets/stylesheets/components/_path.scss+2−4
@@ -11,12 +11,10 @@ · 10 unmodified lines
11 background: $pathBackground;11 background: $pathBackground;
12 box-shadow: inset 0 1px $pathBorder;12 box-shadow: inset 0 1px $pathBorder;
13 13
14 ._app[data-sidebar="hidden"] & {
15 left: 0;
16 }
17
18 @media #{$mediumScreen} { left: $sidebarMediumWidth; }14 @media #{$mediumScreen} { left: $sidebarMediumWidth; }
19 15
16 ._sidebar-hidden & { left: $sidebarHiddenWidth; }
17
20 ~ ._container { padding-bottom: 2rem; }18 ~ ._container { padding-bottom: 2rem; }
21 a:focus { outline: 0; }19 a:focus { outline: 0; }
22}20}
assets/stylesheets/components/_sidebar.scss+18−5
@@ -34,7 +34,7 @@ · 33 unmodified lines
34 34
35 a:focus { outline: 0; }35 a:focus { outline: 0; }
36 36
37 ._app[data-sidebar="hidden"] & {37 ._sidebar-hidden & {
38 display: none;38 display: none;
39 }39 }
40}40}
@@ -49,11 +49,24 @@ · 8 unmodified lines
49 width: 3px;49 width: 3px;
50 cursor: col-resize;50 cursor: col-resize;
51 51
52 ._app[data-sidebar="hidden"] & {52 ._sidebar-hidden & {
53 border: 1px solid $headerBorder;53 left: 0;
54 background-color: $headerBackground;
55 margin-left: 0;54 margin-left: 0;
56 left: 1px;55 background: $headerBackground;
56 border-right: 1px solid $headerBorder;
57 width: 8px;
58
59 &:before {
60 content: '';
61 position: absolute;
62 top: 50%;
63 left: 3px;
64 margin-top: -.5rem;
65 width: 1px;
66 height: 1rem;
67 border-left: 1px solid $textColorLighter;
68 border-right: 1px solid $textColorLighter;
69 }
57 }70 }
58}71}
59 72
assets/stylesheets/global/_variables.scss+1−0
@@ -7,6 +7,7 @@ $maxWidth: 80rem; · 6 unmodified lines
7$headerHeight: 3rem;7$headerHeight: 3rem;
8$sidebarWidth: 18rem;8$sidebarWidth: 18rem;
9$sidebarMediumWidth: 16rem;9$sidebarMediumWidth: 16rem;
10$sidebarHiddenWidth: 9px;
10 11
11$contentBackground: #fff;12$contentBackground: #fff;
12$documentBackground: #fafafa;13$documentBackground: #fafafa;
assets/stylesheets/global/variables-dark.scss+1−0
@@ -7,6 +7,7 @@ $maxWidth: 80rem; · 6 unmodified lines
7$headerHeight: 3rem;7$headerHeight: 3rem;
8$sidebarWidth: 18rem;8$sidebarWidth: 18rem;
9$sidebarMediumWidth: 16rem;9$sidebarMediumWidth: 16rem;
10$sidebarHiddenWidth: 9px;
10 11
11$contentBackground: #303030;12$contentBackground: #303030;
12$documentBackground: #404040;13$documentBackground: #404040;
lib/app.rb+0−4
@@ -185,10 +185,6 @@ class App < Sinatra::Application · 184 unmodified lines
185 app_theme == 'dark'185 app_theme == 'dark'
186 end186 end
187 187
188 def app_sidebar
189 cookies[:sidebar].nil? ? 'visible' : cookies[:sidebar]
190 end
191
192 def redirect_via_js(path) # courtesy of HTML5 App Cache188 def redirect_via_js(path) # courtesy of HTML5 App Cache
193 response.set_cookie :initial_path, value: path, expires: Time.now + 15, path: '/'189 response.set_cookie :initial_path, value: path, expires: Time.now + 15, path: '/'
194 redirect '/', 302190 redirect '/', 302
views/app.erb+1−1
@@ -1,4 +1,4 @@
1<div class="_app<%= " #{app_layout}" if app_layout %>" data-sidebar="<%= "#{app_sidebar}" if app_sidebar %>">1<div class="_app<%= " #{app_layout}" if app_layout %>">
2 <header class="_header">2 <header class="_header">
3 <a class="_home-link"></a>3 <a class="_home-link"></a>
4 <a class="_menu-link"></a>4 <a class="_menu-link"></a>