Added Sepia theme

pull/537/head
ismarS 8 years ago
parent e4bcfef354
commit 64aa261a54

@ -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, '')

@ -68,8 +68,18 @@ sidebarFooter = (html) -> """<div class="_sidebar-footer">#{html}</div>"""
templates.sidebarSettings = ->
sidebarFooter """
<button type="button" class="_sidebar-footer-link _sidebar-footer-edit" data-pick-docs>Select documentation</button>
<button type="button" class="_sidebar-footer-link _sidebar-footer-light" title="Toggle light" data-light>Toggle light</button>
<div class="dropdown">
<button type="button" class="_sidebar-footer-link _sidebar-footer-light dropbtn" title="Toggle light" data-theme>Toggle light</button>
<div id="myDropdown" class="dropdown-content">
<a href="#" data-light data-style="default">Default</a>
<a href="#" data-light data-style="sepia">Sepia</a>
<a href="#" data-light data-style="dark">Dark</a>
</div>
</div>
<button type="button" class="_sidebar-footer-link _sidebar-footer-layout" title="Toggle layout" data-layout>Toggle layout</button>
"""
templates.sidebarSave = ->

@ -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)

@ -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: =>

@ -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';

@ -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 <div> - 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;}

@ -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;

@ -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

@ -1 +1 @@
[]
[{"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}]

@ -26,7 +26,7 @@
<link rel="apple-touch-icon" sizes="144x144" href="<%= App.cdn_origin %>/images/apple-icon-144.png">
<link rel="apple-touch-icon" sizes="152x152" href="<%= App.cdn_origin %>/images/apple-icon-152.png">
<link rel="apple-touch-icon" sizes="160x160" href="<%= App.cdn_origin %>/images/apple-icon-160.png">
<link rel="stylesheet" href="<%= main_stylesheet_path %>" data-alt="<%= alternate_stylesheet_path %>">
<link rel="stylesheet" href="<%= main_stylesheet_path %>" data-alt>
<%= javascript_tag 'application', asset_host: false %>
<%= javascript_tag 'docs' %><% unless App.production? %>
<%= javascript_tag 'debug' %><% end %>

Loading…
Cancel
Save