From 31495ff5a9ed51a2bed27adbc983d23d7c4c79df Mon Sep 17 00:00:00 2001 From: Thibaut Courouble Date: Sun, 17 Apr 2016 14:37:03 -0400 Subject: [PATCH] Tweak dbclick-to-toggle-sidebar code --- assets/javascripts/app/app.coffee | 8 ------- assets/javascripts/app/settings.coffee | 22 +++++++++--------- .../javascripts/views/layout/document.coffee | 10 +++++++- .../javascripts/views/layout/resizer.coffee | 6 ++--- assets/stylesheets/components/_content.scss | 6 ++--- assets/stylesheets/components/_notice.scss | 2 ++ assets/stylesheets/components/_path.scss | 6 ++--- assets/stylesheets/components/_sidebar.scss | 23 +++++++++++++++---- assets/stylesheets/global/_variables.scss | 1 + assets/stylesheets/global/variables-dark.scss | 1 + lib/app.rb | 4 ---- views/app.erb | 2 +- 12 files changed, 50 insertions(+), 41 deletions(-) diff --git a/assets/javascripts/app/app.coffee b/assets/javascripts/app/app.coffee index adc11817..4910f1a7 100644 --- a/assets/javascripts/app/app.coffee +++ b/assets/javascripts/app/app.coffee @@ -179,14 +179,6 @@ # enabled because it doesn't support caching URLs that use CORS. @config[if @appCache and @settings.hasDocs() then 'index_path' else 'docs_host'] - toggleSidebar: -> - state = @el.getAttribute('data-sidebar') - newState = if state == 'visible' then 'hidden' else 'visible' - @el.setAttribute('data-sidebar', newState) - @settings.setSidebar(newState) - @appCache?.updateInBackground() - return - onBootError: (args...) -> @trigger 'bootError' @hideLoading() diff --git a/assets/javascripts/app/settings.coffee b/assets/javascripts/app/settings.coffee index 2f52fc22..1cd5c48d 100644 --- a/assets/javascripts/app/settings.coffee +++ b/assets/javascripts/app/settings.coffee @@ -4,7 +4,6 @@ class app.Settings DARK_KEY = 'dark' LAYOUT_KEY = 'layout' SIZE_KEY = 'size' - SIDEBAR_KEY = 'sidebar' @defaults: count: 0 @@ -63,10 +62,18 @@ class app.Settings catch return - setLayout: (value) -> + setLayout: (name, enable) -> try - if value - Cookies.set LAYOUT_KEY, value, path: '/', expires: 1e8 + layout = (Cookies.get(LAYOUT_KEY) || '').split(' ') + $.arrayDelete(layout, '') + + if enable + layout.push(name) if layout.indexOf(name) is -1 + else + $.arrayDelete(layout, name) + + if layout.length > 0 + Cookies.set LAYOUT_KEY, layout.join(' '), path: '/', expires: 1e8 else Cookies.expire LAYOUT_KEY catch @@ -78,17 +85,10 @@ class app.Settings catch return - setSidebar: (value) -> - try - Cookies.set SIDEBAR_KEY, value, path: '/', expires: 1e8 - catch - return - reset: -> try Cookies.expire DOCS_KEY try Cookies.expire DARK_KEY try Cookies.expire LAYOUT_KEY try Cookies.expire SIZE_KEY - try Cookies.expire SIDEBAR_KEY try @store.del(SETTINGS_KEY) return diff --git a/assets/javascripts/views/layout/document.coffee b/assets/javascripts/views/layout/document.coffee index c6f4eae0..6d7e5d9a 100644 --- a/assets/javascripts/views/layout/document.coffee +++ b/assets/javascripts/views/layout/document.coffee @@ -1,5 +1,6 @@ class app.views.Document extends app.View MAX_WIDTH_CLASS = '_max-width' + HIDE_SIDEBAR_CLASS = '_sidebar-hidden' @el: document @@ -34,7 +35,14 @@ class app.views.Document extends app.View toggleLayout: -> wantsMaxWidth = !app.el.classList.contains(MAX_WIDTH_CLASS) app.el.classList[if wantsMaxWidth then 'add' else 'remove'](MAX_WIDTH_CLASS) - app.settings.setLayout(if wantsMaxWidth then MAX_WIDTH_CLASS else false) + app.settings.setLayout(MAX_WIDTH_CLASS, wantsMaxWidth) + app.appCache?.updateInBackground() + return + + toggleSidebar: -> + sidebarHidden = app.el.classList.contains(HIDE_SIDEBAR_CLASS) + app.el.classList[if sidebarHidden then 'remove' else 'add'](HIDE_SIDEBAR_CLASS) + app.settings.setLayout(HIDE_SIDEBAR_CLASS, !sidebarHidden) app.appCache?.updateInBackground() return diff --git a/assets/javascripts/views/layout/resizer.coffee b/assets/javascripts/views/layout/resizer.coffee index 184963a0..7cb3e4ed 100644 --- a/assets/javascripts/views/layout/resizer.coffee +++ b/assets/javascripts/views/layout/resizer.coffee @@ -4,7 +4,7 @@ class app.views.Resizer extends app.View @events: dragstart: 'onDragStart' dragend: 'onDragEnd' - dblclick: 'onDbLClick' + dblclick: 'onDblClick' @isSupported: -> 'ondragstart' of document.createElement('div') and !app.isMobile() @@ -32,8 +32,8 @@ class app.views.Resizer extends app.View app.appCache?.updateInBackground() return - onDbLClick: (event) => - app.toggleSidebar() + onDblClick: (event) -> + app.document.toggleSidebar() return onDragStart: (event) => diff --git a/assets/stylesheets/components/_content.scss b/assets/stylesheets/components/_content.scss index 2fdc78bb..c82117e6 100644 --- a/assets/stylesheets/components/_content.scss +++ b/assets/stylesheets/components/_content.scss @@ -10,11 +10,9 @@ pointer-events: none; @extend %border-box; - ._app[data-sidebar="hidden"] & { - margin-left: 0; - } - @media #{$mediumScreen} { margin-left: $sidebarMediumWidth; } + + ._sidebar-hidden & { margin-left: $sidebarHiddenWidth; } } ._content { diff --git a/assets/stylesheets/components/_notice.scss b/assets/stylesheets/components/_notice.scss index 74749dbf..56991951 100644 --- a/assets/stylesheets/components/_notice.scss +++ b/assets/stylesheets/components/_notice.scss @@ -11,6 +11,8 @@ @media #{$mediumScreen} { left: $sidebarMediumWidth; } + ._sidebar-hidden & { left: $sidebarHiddenWidth; } + &:not(._top) ~ ._container { padding-bottom: 2.5rem; } &._top { diff --git a/assets/stylesheets/components/_path.scss b/assets/stylesheets/components/_path.scss index ee7f7dd8..4fa2856c 100644 --- a/assets/stylesheets/components/_path.scss +++ b/assets/stylesheets/components/_path.scss @@ -11,12 +11,10 @@ background: $pathBackground; box-shadow: inset 0 1px $pathBorder; - ._app[data-sidebar="hidden"] & { - left: 0; - } - @media #{$mediumScreen} { left: $sidebarMediumWidth; } + ._sidebar-hidden & { left: $sidebarHiddenWidth; } + ~ ._container { padding-bottom: 2rem; } a:focus { outline: 0; } } diff --git a/assets/stylesheets/components/_sidebar.scss b/assets/stylesheets/components/_sidebar.scss index a82546a7..32876f56 100644 --- a/assets/stylesheets/components/_sidebar.scss +++ b/assets/stylesheets/components/_sidebar.scss @@ -34,7 +34,7 @@ a:focus { outline: 0; } - ._app[data-sidebar="hidden"] & { + ._sidebar-hidden & { display: none; } } @@ -49,11 +49,24 @@ width: 3px; cursor: col-resize; - ._app[data-sidebar="hidden"] & { - border: 1px solid $headerBorder; - background-color: $headerBackground; + ._sidebar-hidden & { + left: 0; margin-left: 0; - left: 1px; + background: $headerBackground; + border-right: 1px solid $headerBorder; + width: 8px; + + &:before { + content: ''; + position: absolute; + top: 50%; + left: 3px; + margin-top: -.5rem; + width: 1px; + height: 1rem; + border-left: 1px solid $textColorLighter; + border-right: 1px solid $textColorLighter; + } } } diff --git a/assets/stylesheets/global/_variables.scss b/assets/stylesheets/global/_variables.scss index 5758fad1..0a8c9991 100644 --- a/assets/stylesheets/global/_variables.scss +++ b/assets/stylesheets/global/_variables.scss @@ -7,6 +7,7 @@ $maxWidth: 80rem; $headerHeight: 3rem; $sidebarWidth: 18rem; $sidebarMediumWidth: 16rem; +$sidebarHiddenWidth: 9px; $contentBackground: #fff; $documentBackground: #fafafa; diff --git a/assets/stylesheets/global/variables-dark.scss b/assets/stylesheets/global/variables-dark.scss index 213ce75f..3ae98d8a 100644 --- a/assets/stylesheets/global/variables-dark.scss +++ b/assets/stylesheets/global/variables-dark.scss @@ -7,6 +7,7 @@ $maxWidth: 80rem; $headerHeight: 3rem; $sidebarWidth: 18rem; $sidebarMediumWidth: 16rem; +$sidebarHiddenWidth: 9px; $contentBackground: #303030; $documentBackground: #404040; diff --git a/lib/app.rb b/lib/app.rb index 2c9d8279..9c619944 100644 --- a/lib/app.rb +++ b/lib/app.rb @@ -185,10 +185,6 @@ class App < Sinatra::Application app_theme == 'dark' end - def app_sidebar - cookies[:sidebar].nil? ? 'visible' : cookies[:sidebar] - end - def redirect_via_js(path) # courtesy of HTML5 App Cache response.set_cookie :initial_path, value: path, expires: Time.now + 15, path: '/' redirect '/', 302 diff --git a/views/app.erb b/views/app.erb index 6244b5db..9563d4e6 100644 --- a/views/app.erb +++ b/views/app.erb @@ -1,4 +1,4 @@ -
" data-sidebar="<%= "#{app_sidebar}" if app_sidebar %>"> +
">