diff --git a/assets/javascripts/app/settings.coffee b/assets/javascripts/app/settings.coffee index a2aad287..f9b26552 100644 --- a/assets/javascripts/app/settings.coffee +++ b/assets/javascripts/app/settings.coffee @@ -1,6 +1,7 @@ class app.Settings DOCS_KEY = 'docs' DARK_KEY = 'dark' + SEPIA_KEY = 'sepia' LAYOUT_KEY = 'layout' SIZE_KEY = 'size' TIPS_KEY = 'tips' @@ -57,6 +58,10 @@ class app.Settings @store.set DARK_KEY, !!value return + setSepia: (value) -> + @store.set SEPIA_KEY, !!value + return + setLayout: (name, enable) -> layout = (@store.get(LAYOUT_KEY) || '').split(' ') $.arrayDelete(layout, '') diff --git a/assets/javascripts/templates/sidebar_tmpl.coffee b/assets/javascripts/templates/sidebar_tmpl.coffee index f37dabcc..d48a3d13 100644 --- a/assets/javascripts/templates/sidebar_tmpl.coffee +++ b/assets/javascripts/templates/sidebar_tmpl.coffee @@ -68,8 +68,18 @@ sidebarFooter = (html) -> """
#{html}
""" templates.sidebarSettings = -> sidebarFooter """ - + +
+ +
+ Default + Sepia + Dark +
+
+ + """ templates.sidebarSave = -> diff --git a/assets/javascripts/views/layout/document.coffee b/assets/javascripts/views/layout/document.coffee index 69b513a1..11bea88d 100644 --- a/assets/javascripts/views/layout/document.coffee +++ b/assets/javascripts/views/layout/document.coffee @@ -38,6 +38,20 @@ class app.views.Document extends app.View app.appCache?.updateInBackground() return + toggleColor: (theme) -> + # TODO + switch theme + when "dark" then newcss="/assets/application-dark.css" + when "sepia" then newcss="/assets/application-sepia.css" + when "default" then newcss="/assets/application.css" + else newcss="/assets/application.css" + css = $('link[rel="stylesheet"][data-alt]') + css.setAttribute('href', newcss) + app.settings.setDark(newcss.indexOf('dark') > 0) + app.settings.setSepia(newcss.indexOf('sepia') > 0) + app.appCache?.updateInBackground() + return + toggleLayout: -> wantsMaxWidth = !app.el.classList.contains(MAX_WIDTH_CLASS) app.el.classList[if wantsMaxWidth then 'add' else 'remove'](MAX_WIDTH_CLASS) diff --git a/assets/javascripts/views/sidebar/sidebar.coffee b/assets/javascripts/views/sidebar/sidebar.coffee index 96c1f87a..ecb89865 100644 --- a/assets/javascripts/views/sidebar/sidebar.coffee +++ b/assets/javascripts/views/sidebar/sidebar.coffee @@ -90,6 +90,17 @@ class app.views.Sidebar extends app.View @el.scrollTop = 0 return + hideAssetsMenu: -> + console.log("HIDE COLOR MENU") + dropdowns = document.getElementsByClassName("dropdown-content") + i = 0 + while i < dropdowns.length + openDropdown = dropdowns[i] + if openDropdown.classList.contains('show') + openDropdown.classList.remove 'show' + i++ + return + onFocus: (event) => $.scrollTo event.target, @el, 'continuous', bottomGap: 2 unless event.target is @el return @@ -99,10 +110,15 @@ class app.views.Sidebar extends app.View if event.target.hasAttribute? 'data-reset-list' $.stopEvent(event) @reset() + else if event.target.hasAttribute? 'data-theme' + $.stopEvent(event) + # document.activeElement?.blur() + document.getElementById("myDropdown").classList.toggle("show"); else if event.target.hasAttribute? 'data-light' $.stopEvent(event) document.activeElement?.blur() - app.document.toggleLight() + app.document.toggleColor(event.target.getAttribute('data-style')) + @hideAssetsMenu() else if event.target.hasAttribute? 'data-layout' $.stopEvent(event) document.activeElement?.blur() @@ -116,6 +132,8 @@ class app.views.Sidebar extends app.View @showDocPicker() else if @view is @docPicker @showDocList() unless $.hasChild @el, event.target + else if !event.target.matches('.dropbtn') + @hideAssetsMenu() return onAltR: => diff --git a/assets/stylesheets/application-sepia.css.scss b/assets/stylesheets/application-sepia.css.scss new file mode 100644 index 00000000..ef1990e7 --- /dev/null +++ b/assets/stylesheets/application-sepia.css.scss @@ -0,0 +1,94 @@ +//= depend_on icons.png +//= depend_on icons@2x.png +//= depend_on docs.png +//= depend_on docs@2x.png + +//= require vendor/open-sans + +/*! + * Copyright 2013-2016 Thibaut Courouble and other contributors + * + * This source code is licensed under the terms of the Mozilla + * Public License, v. 2.0, a copy of which may be obtained at: + * http://mozilla.org/MPL/2.0/ + */ + +@import 'global/variables-sepia', + 'global/icons', + 'global/classes', + 'global/base'; + +@import 'components/app', + 'components/header', + 'components/notif', + 'components/sidebar', + 'components/content', + 'components/page', + 'components/fail', + 'components/path', + 'components/notice', + 'components/prism', + 'components/mobile'; + +@import 'pages/simple', + 'pages/angular', + 'pages/angularjs', + 'pages/apache', + 'pages/async', + 'pages/bootstrap', + 'pages/c', + 'pages/cakephp', + 'pages/clojure', + 'pages/coffeescript', + 'pages/cordova', + 'pages/crystal', + 'pages/d3', + 'pages/dojo', + 'pages/drupal', + 'pages/elixir', + 'pages/ember', + 'pages/erlang', + 'pages/express', + 'pages/git', + 'pages/github', + 'pages/go', + 'pages/haskell', + 'pages/jquery', + 'pages/knockout', + 'pages/kotlin', + 'pages/laravel', + 'pages/love', + 'pages/lua', + 'pages/mdn', + 'pages/meteor', + 'pages/modernizr', + 'pages/moment', + 'pages/nginx', + 'pages/node', + 'pages/npm', + 'pages/perl', + 'pages/phalcon', + 'pages/phaser', + 'pages/php', + 'pages/phpunit', + 'pages/postgres', + 'pages/ramda', + 'pages/rdoc', + 'pages/react', + 'pages/redis', + 'pages/requirejs', + 'pages/rethinkdb', + 'pages/rfc', + 'pages/rubydoc', + 'pages/rust', + 'pages/socketio', + 'pages/sphinx', + 'pages/sphinx_simple', + 'pages/support_tables', + 'pages/tcl_tk', + 'pages/tensorflow', + 'pages/underscore', + 'pages/vagrant', + 'pages/vue', + 'pages/yard', + 'pages/yii'; diff --git a/assets/stylesheets/components/_sidebar.scss b/assets/stylesheets/components/_sidebar.scss index 61dda752..500e43d2 100644 --- a/assets/stylesheets/components/_sidebar.scss +++ b/assets/stylesheets/components/_sidebar.scss @@ -501,3 +501,53 @@ &:before { @extend %icon-check; } } } + + + + + /* Dropdown Button */ +/*.dropbtn { + background-color: #4CAF50; + color: white; + padding: 16px; + font-size: 16px; + border: none; + cursor: pointer; +}*/ + +/* Dropdown button on hover & focus */ +/*.dropbtn:hover, .dropbtn:focus { + background-color: #3e8e41; +}*/ + +/* The container
- needed to position the dropdown content */ +.dropdown { + float: right; + position: relative; + display: inline-block; +} + +/* Dropdown Content (Hidden by Default) */ +.dropdown-content { + display: none; + position: absolute; + bottom: 90%; + right: 10%; + background-color: #f9f9f9; + min-width: 160px; + box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); +} + +/* Links inside the dropdown */ +.dropdown-content a { + color: black; + padding: 12px 16px; + text-decoration: none; + display: block; +} + +/* Change color of dropdown links on hover */ +.dropdown-content a:hover {background-color: #f1f1f1} + +/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */ +.show {display:block;} \ No newline at end of file diff --git a/assets/stylesheets/global/_variables-sepia.scss b/assets/stylesheets/global/_variables-sepia.scss new file mode 100644 index 00000000..c6f99ce3 --- /dev/null +++ b/assets/stylesheets/global/_variables-sepia.scss @@ -0,0 +1,90 @@ +$baseFont: 'Open Sans', Helvetica, Arial, sans-serif; +$monoFont: Consolas, 'Liberation Mono', Menlo, Courier, monospace; + +$style: 'sepia'; + +$maxWidth: 80rem; +$headerHeight: 3rem; +$sidebarWidth: 18rem; +$sidebarMediumWidth: 16rem; +$sidebarHiddenWidth: 9px; + +$contentBackground: #EFE0B9; +$documentBackground: #fafafa; + +$textColor: #2A2C05; +$textColorLight: #666; +$textColorLighter: #888; + +$inputFocusBorder: #35b5f4; + +$focusBackground: #e5e5e5; +$focusBorder: #d4d4d4; +$focusText: #000; + +$loadingText: #ccc; +$splashText: #ccc; + +$selectionBackground: #398df0; +$selectionBorder: #196fc2; +$selectionText: #fff; + +$highlightBackground: #fffdcd; + +$linkColor: #2A2C05; +$linkColorHover: #E4B04A; +$linkTextDecoration: underline; + +$headerBackground: #E4B04A; +$headerBorder: #d9d9d9; + +$sidebarBackground: #E4B04A; +$sidebarBorder: #e3e3e3; + +$scrollbarColor: #d2d2d2; +$scrollbarColorHover: #aaa; + +$pathBackground: $sidebarBackground; +$pathBorder: $sidebarBorder; + +$noticeBackground: #faf9e2; +$noticeBorder: #e2e2c1; + +$boxBackground: #fafafa; +$boxBorder: #d8d8d8; +$boxBorderLight: #e5e5e5; +$boxHeaderColor: $textColor; +$boxHeaderBackground: #f5f5f5; + +$noteBackground: #f8f8dd; +$noteBorder: #d3d952; + +$noteGreenBackground: #B7521E; +$noteGreenBorder: #89da70; + +$noteBlueBackground: #d4f3fd; +$noteBlueBorder: #94bbeb; + +$noteOrangeBackground: #fbe6d1; +$noteOrangeBorder: #ec8b01; + +$noteRedBackground: #fed5d3; +$noteRedBorder: #dc7874; + +$labelBackground: #f4f4f4; + +$notifBackground: rgba(#333, .85); +$notifBorder: none; +$notifColor: #fff; +$notifColorLight: #ccc; + +$tipBackground: rgba(#fffdcd, .95); +$tipBorder: 1px solid #e7dca9; + +$mediumScreen: '(max-width: 800px)'; + +$contentZ: 1; +$sidebarZ: 2; +$headerZ: 3; +$noticeZ: 4; +$hoverZ: 5; diff --git a/lib/app.rb b/lib/app.rb index 66c0001a..7a076d49 100644 --- a/lib/app.rb +++ b/lib/app.rb @@ -168,17 +168,14 @@ class App < Sinatra::Application end def main_stylesheet_path - stylesheet_paths[dark_theme? ? :dark : :default] - end - - def alternate_stylesheet_path - stylesheet_paths[dark_theme? ? :default : :dark] + dark_theme? || sepia_theme? ? (dark_theme? ? stylesheet_paths[:dark] : stylesheet_paths[:sepia]) : stylesheet_paths[:default] end def stylesheet_paths @stylesheet_paths ||= { default: stylesheet_path('application'), - dark: stylesheet_path('application-dark') + dark: stylesheet_path('application-dark'), + sepia: stylesheet_path('application-sepia') } end @@ -191,13 +188,18 @@ class App < Sinatra::Application end def app_theme - @app_theme ||= cookies[:dark].nil? ? 'default' : 'dark' + cookies[:dark].nil? ? (cookies[:sepia].nil? ? theme = 'default' : theme = 'sepia') : theme = 'dark' + @app_theme = theme end def dark_theme? app_theme == 'dark' end + def sepia_theme? + app_theme == 'sepia' + 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/public/docs/docs.json b/public/docs/docs.json index 0637a088..e28467f9 100644 --- a/public/docs/docs.json +++ b/public/docs/docs.json @@ -1 +1 @@ -[] \ No newline at end of file +[{"name":"CSS","slug":"css","type":"mdn","mtime":1475424166,"db_size":7213186},{"name":"DOM","slug":"dom","type":"mdn","mtime":1475434383,"db_size":23492066},{"name":"DOM Events","slug":"dom_events","type":"mdn","mtime":1475425514,"db_size":1781128},{"name":"HTML","slug":"html","type":"mdn","mtime":1475421949,"db_size":2405298},{"name":"HTTP","slug":"http","type":"rfc","mtime":1475421783,"db_size":1478765},{"name":"JavaScript","slug":"javascript","type":"mdn","mtime":1475425795,"db_size":6014032}] \ No newline at end of file diff --git a/views/index.erb b/views/index.erb index 53cdc96c..0afde32d 100644 --- a/views/index.erb +++ b/views/index.erb @@ -26,7 +26,7 @@ - + <%= javascript_tag 'application', asset_host: false %> <%= javascript_tag 'docs' %><% unless App.production? %> <%= javascript_tag 'debug' %><% end %>