History

Improve doc list for versioned docs

Ref #25.

Thibaut Courouble committed 10 years ago

Commit 2ece8d11 parent 26858606 files · +37 −11Browse files

Unified · Split

6 files
  1. assets/javascripts/templates/sidebar_tmpl.coffee +10 −5
  2. assets/javascripts/views/list/list_focus.coffee +8 −2
  3. assets/javascripts/views/list/list_fold.coffee +2 −2
  4. assets/javascripts/views/sidebar/doc_list.coffee +15 −1
  5. assets/javascripts/views/sidebar/doc_picker.coffee +1 −1
  6. assets/stylesheets/components/_sidebar.scss +1 −0
assets/javascripts/templates/sidebar_tmpl.coffee+10−5
@@ -3,13 +3,15 @@ templates = app.templates · 2 unmodified lines
3templates.sidebarDoc = (doc, options = {}) ->3templates.sidebarDoc = (doc, options = {}) ->
4 link = """<a href="#{doc.fullPath()}" class="_list-item _icon-#{doc.icon} """4 link = """<a href="#{doc.fullPath()}" class="_list-item _icon-#{doc.icon} """
5 link += if options.disabled then '_list-disabled' else '_list-dir'5 link += if options.disabled then '_list-disabled' else '_list-dir'
6 link += """" data-slug="#{doc.slug}" title="#{doc.name}">"""6 link += """" data-slug="#{doc.slug}" title="#{doc.name} #{doc.version || ''}">"""
7 if options.disabled7 if options.disabled
8 link += """<span class="_list-enable" data-enable="#{doc.slug}">Enable</span>"""8 link += """<span class="_list-enable" data-enable="#{doc.slug}">Enable</span>"""
9 else9 else
10 link += """<span class="_list-arrow"></span>"""10 link += """<span class="_list-arrow"></span>"""
11 link += """<span class="_list-count">#{doc.release}</span>""" if doc.release11 link += """<span class="_list-count">#{doc.release}</span>""" if doc.release
12 link + "#{doc.name}</a>"12 link += "#{doc.name}"
13 link += " #{doc.version}" if options.disabled and doc.version
14 link + "</a>"
13 15
14templates.sidebarType = (type) ->16templates.sidebarType = (type) ->
15 """<a href="#{type.fullPath()}" class="_list-item _list-dir" data-slug="#{type.slug}"><span class="_list-arrow"></span><span class="_list-count">#{type.count}</span>#{type.name}</a>"""17 """<a href="#{type.fullPath()}" class="_list-item _list-dir" data-slug="#{type.slug}"><span class="_list-arrow"></span><span class="_list-count">#{type.count}</span>#{type.name}</a>"""
@@ -48,12 +50,15 @@ templates.sidebarVersionedDoc = (doc, versions, options = {}) -> · 32 unmodified lines
48 html += " open" if options.open50 html += " open" if options.open
49 html + """"><span class="_list-arrow"></span>#{doc.name}</div><div class="_list _list-sub">#{versions}</div>"""51 html + """"><span class="_list-arrow"></span>#{doc.name}</div><div class="_list _list-sub">#{versions}</div>"""
50 52
51templates.sidebarDisabledList = (options) ->
52 """<div class="_disabled-list">#{templates.render 'sidebarDoc', options.docs, disabled: true}</div>"""
53
54templates.sidebarDisabled = (options) ->53templates.sidebarDisabled = (options) ->
55 """<h6 class="_list-title"><span class="_list-arrow"></span>Disabled (#{options.count})</h6>"""54 """<h6 class="_list-title"><span class="_list-arrow"></span>Disabled (#{options.count})</h6>"""
56 55
56templates.sidebarDisabledList = (html) ->
57 """<div class="_disabled-list">#{html}</div>"""
58
59templates.sidebarDisabledVersionedDoc = (doc, versions) ->
60 """<a class="_list-item _list-dir _icon-#{doc.icon} _list-disabled"><span class="_list-arrow"></span>#{doc.name}</a><div class="_list _list-sub">#{versions}</div>"""
61
57templates.sidebarPickerNote = """62templates.sidebarPickerNote = """
58 <div class="_list-note">Tip: for faster and better search results, select only the docs you need.</div>63 <div class="_list-note">Tip: for faster and better search results, select only the docs you need.</div>
59 <a href="https://trello.com/b/6BmTulfx/devdocs-documentation" class="_list-link" target="_blank">Vote for new documentation</a>64 <a href="https://trello.com/b/6BmTulfx/devdocs-documentation" class="_list-link" target="_blank">Vote for new documentation</a>
assets/javascripts/views/list/list_focus.coffee+8−2
@@ -38,7 +38,10 @@ class app.views.ListFocus extends app.View · 37 unmodified lines
38 $.click(next)38 $.click(next)
39 @findNext cursor39 @findNext cursor
40 else if next.tagName is 'DIV' # sub-list40 else if next.tagName is 'DIV' # sub-list
41 @findFirst(next) or @findNext(next)41 if cursor.className.indexOf('open') >= 0
42 @findFirst(next) or @findNext(next)
43 else
44 @findNext(next)
42 else if next.tagName is 'H6' # title45 else if next.tagName is 'H6' # title
43 @findNext(next)46 @findNext(next)
44 else if cursor.parentElement isnt @el47 else if cursor.parentElement isnt @el
@@ -61,7 +64,10 @@ class app.views.ListFocus extends app.View · 16 unmodified lines
61 $.click(prev)64 $.click(prev)
62 @findPrev cursor65 @findPrev cursor
63 else if prev.tagName is 'DIV' # sub-list66 else if prev.tagName is 'DIV' # sub-list
64 @findLast(prev) or @findPrev(prev)67 if prev.previousSibling.className.indexOf('open') >= 0
68 @findLast(prev) or @findPrev(prev)
69 else
70 @findPrev(prev)
65 else if prev.tagName is 'H6' # title71 else if prev.tagName is 'H6' # title
66 @findPrev(prev)72 @findPrev(prev)
67 else if cursor.parentElement isnt @el73 else if cursor.parentElement isnt @el
assets/javascripts/views/list/list_fold.coffee+2−2
@@ -10,7 +10,7 @@ class app.views.ListFold extends app.View · 9 unmodified lines
10 left: 'onLeft'10 left: 'onLeft'
11 right: 'onRight'11 right: 'onRight'
12 12
13 constructor: (@el, @options = {}) -> super13 constructor: (@el) -> super
14 14
15 open: (el) ->15 open: (el) ->
16 if el and not el.classList.contains @constructor.activeClass16 if el and not el.classList.contains @constructor.activeClass
@@ -60,5 +60,5 @@ class app.views.ListFold extends app.View · 43 unmodified lines
60 $.stopEvent(event)60 $.stopEvent(event)
61 @toggle el.parentElement61 @toggle el.parentElement
62 else if el.classList.contains @constructor.targetClass62 else if el.classList.contains @constructor.targetClass
63 if @options.toggleOnclick then @toggle(el) else @open(el)63 if el.hasAttribute('href') then @open(el) else @toggle(el)
64 return64 return
assets/javascripts/views/sidebar/doc_list.coffee+15−1
@@ -54,7 +54,21 @@ class app.views.DocList extends app.View · 53 unmodified lines
54 return54 return
55 55
56 appendDisabledList: ->56 appendDisabledList: ->
57 @append @tmpl('sidebarDisabledList', docs: app.disabledDocs.all())57 html = ''
58 docs = [].concat(app.disabledDocs.all()...)
59
60 while doc = docs.shift()
61 if doc.version
62 versions = ''
63 loop
64 versions += @tmpl('sidebarDoc', doc, disabled: true)
65 break if docs[0].name isnt doc.name
66 doc = docs.shift()
67 html += @tmpl('sidebarDisabledVersionedDoc', doc, versions)
68 else
69 html += @tmpl('sidebarDoc', doc, disabled: true)
70
71 @append @tmpl('sidebarDisabledList', html)
58 @disabledTitle.classList.add('open-title')72 @disabledTitle.classList.add('open-title')
59 @refreshElements()73 @refreshElements()
60 return74 return
assets/javascripts/views/sidebar/doc_picker.coffee+1−1
@@ -11,7 +11,7 @@ class app.views.DocPicker extends app.View · 10 unmodified lines
11 enter: 'onEnter'11 enter: 'onEnter'
12 12
13 init: ->13 init: ->
14 @addSubview @listFold = new app.views.ListFold(@el, toggleOnclick: true)14 @addSubview @listFold = new app.views.ListFold(@el)
15 return15 return
16 16
17 activate: ->17 activate: ->
assets/stylesheets/components/_sidebar.scss+1−0
@@ -197,6 +197,7 @@ · 196 unmodified lines
197 .open + & { display: block; }197 .open + & { display: block; }
198 > ._list-item { padding-left: 2.375rem; }198 > ._list-item { padding-left: 2.375rem; }
199 > ._list-dir, > ._list-sub > ._list-item { padding-left: 2.75rem; }199 > ._list-dir, > ._list-sub > ._list-item { padding-left: 2.75rem; }
200 > ._list-disabled { padding-left: 3.875rem; }
200 > ._list-item:before { content: none; }201 > ._list-item:before { content: none; }
201 > ._list-dir { line-height: 1.375rem; }202 > ._list-dir { line-height: 1.375rem; }
202 203