Implement dark theme

Closes #73.

Thibaut committed 11 years ago

Commit 649b7b51 parent 200dd0b41 files · +296 −5Browse files

Showing the changes to assets/javascripts (5 of 41 files). Show all

Unified · Split

5 files

 class app.Settings
   SETTINGS_KEY = 'settings'
   DOCS_KEY = 'docs'
+  DARK_KEY = 'dark'
   @defaults: ->
     count: 0
   setDocs: (docs) ->
     try
-      Cookies.set DOCS_KEY, docs.join('/'),
+      Cookies.set DOCS_KEY, docs.join('/'), path: '/', expires: 1e8
-        path: '/'
+    catch
-        expires: 1e8
+    return
+  setDark: (value) ->
+    try
+      if value
+        Cookies.set DARK_KEY, '1', path: '/', expires: 1e8
+      else
+        Cookies.expire DARK_KEY
     catch
     return
   reset: ->
     try Cookies.expire DOCS_KEY
+    try Cookies.expire DARK_KEY
     try @store.del(SETTINGS_KEY)
     return

 [
-  [ "2015-01-13",
+  [ "2015-02-08",
+    "New dark theme\nClick the icon in the bottom left corner to activate.\n<a href=\"https://github.com/Thibaut/devdocs/issues\" target=\"_blank\">Feedback</a> welcome :)"
+  ], [
+    "2015-01-13",
     "<a href=\"/offline\">Offline mode</a> has landed!\nIf you notice any bugs, please report them on <a href=\"https://github.com/Thibaut/devdocs/issues\" target=\"_blank\">GitHub</a>."
   ], [
     "2014-12-21",

 sidebarFooter = (html) -> """<div class="_sidebar-footer">#{html}</div>"""
 templates.sidebarSettings = ->
-  sidebarFooter """<a class="_sidebar-footer-link _sidebar-footer-edit" data-pick-docs>Select documentation</a>"""
+  sidebarFooter """
+    <a class="_sidebar-footer-link _sidebar-footer-light" title="Toggle light" data-light></a>
+    <a class="_sidebar-footer-link _sidebar-footer-edit" data-pick-docs>Select documentation</a>
+  """
 templates.sidebarSave = ->
   sidebarFooter """<a class="_sidebar-footer-link _sidebar-footer-save">Save</a>"""

@@ -17,6 +17,14 @@ class app.views.Document extends app.View · 16 unmodified lines
17	@activate()	17	@activate()
18	return	18	return
19		19
		20	toggleLight: ->
		21	css = $('link[rel="stylesheet"][data-alt]')
		22	alt = css.getAttribute('data-alt')
		23	css.setAttribute('data-alt', css.getAttribute('href'))
		24	css.setAttribute('href', alt)
		25	app.settings.setDark(alt.indexOf('dark') > 0)
		26	return
		27
20	setTitle: (title) ->	28	setTitle: (title) ->
21	@el.title = if title then "DevDocs/#{title}" else 'DevDocs'	29	@el.title = if title then "DevDocs/#{title}" else 'DevDocs'
22		30

     if event.target.hasAttribute? 'data-reset-list'
       $.stopEvent(event)
       @reset()
+    else if event.target.hasAttribute? 'data-light'
+      $.stopEvent(event)
+      app.document.toggleLight()
     return
   onGlobalClick: (event) =>

Keyboard shortcuts