History

Improve doc picker for versioned docs

Ref #25.

Thibaut Courouble committed 10 years ago

Commit 26858601 parent 6ed39944 files · +59 −31Browse files

Unified · Split

4 files
  1. assets/javascripts/templates/sidebar_tmpl.coffee +9 −4
  2. assets/javascripts/views/list/list_fold.coffee +2 −2
  3. assets/javascripts/views/sidebar/doc_picker.coffee +27 −5
  4. assets/stylesheets/components/_sidebar.scss +21 −20
assets/javascripts/templates/sidebar_tmpl.coffee+9−4
@@ -35,14 +35,19 @@ templates.sidebarPageLink = (count) -> · 34 unmodified lines
35 """<span class="_list-item _list-pagelink">Show more\u2026 (#{count})</span>"""35 """<span class="_list-item _list-pagelink">Show more\u2026 (#{count})</span>"""
36 36
37templates.sidebarLabel = (doc, options = {}) ->37templates.sidebarLabel = (doc, options = {}) ->
38 label = """<label class="_list-item _list-label _icon-#{doc.icon}"""38 label = """<label class="_list-item"""
39 label += ' _list-label-off' unless options.checked39 label += " _icon-#{doc.icon}" unless doc.version
40 label += """"><input type="checkbox" name="#{doc.slug}" class="_list-checkbox" """40 label += """"><input type="checkbox" name="#{doc.slug}" class="_list-checkbox" """
41 label += 'checked' if options.checked41 label += "checked" if options.checked
42 label += ">#{doc.name}"42 label += ">#{doc.name}"
43 label += " (#{doc.version})" if doc.version43 label += " #{doc.version}" if doc.version
44 label + "</label>"44 label + "</label>"
45 45
46templates.sidebarVersionedDoc = (doc, versions, options = {}) ->
47 html = """<div class="_list-item _list-dir _list-rdir _icon-#{doc.icon}"""
48 html += " open" if options.open
49 html + """"><span class="_list-arrow"></span>#{doc.name}</div><div class="_list _list-sub">#{versions}</div>"""
50
46templates.sidebarDisabledList = (options) ->51templates.sidebarDisabledList = (options) ->
47 """<div class="_disabled-list">#{templates.render 'sidebarDoc', options.docs, disabled: true}</div>"""52 """<div class="_disabled-list">#{templates.render 'sidebarDoc', options.docs, disabled: true}</div>"""
48 53
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) -> super13 constructor: (@el, @options = {}) -> 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 @open el63 if @options.toggleOnclick then @toggle(el) else @open(el)
64 return64 return
assets/javascripts/views/sidebar/doc_picker.coffee+27−5
@@ -1,5 +1,5 @@
1class app.views.DocPicker extends app.View1class app.views.DocPicker extends app.View
2 @className: '_list'2 @className: '_list _list-picker'
3 3
4 @elements:4 @elements:
5 saveLink: '._sidebar-footer-save'5 saveLink: '._sidebar-footer-save'
@@ -10,6 +10,10 @@ class app.views.DocPicker extends app.View · 4 unmodified lines
10 @shortcuts:10 @shortcuts:
11 enter: 'onEnter'11 enter: 'onEnter'
12 12
13 init: ->
14 @addSubview @listFold = new app.views.ListFold(@el, toggleOnclick: true)
15 return
16
13 activate: ->17 activate: ->
14 if super18 if super
15 @render()19 @render()
@@ -26,11 +30,17 @@ class app.views.DocPicker extends app.View · 10 unmodified lines
26 return30 return
27 31
28 render: ->32 render: ->
29 @html @tmpl('sidebarLabel', app.docs.all(), checked: true) +33 html = ''
30 @tmpl('sidebarLabel', app.disabledDocs.all()) +34 docs = app.docs.all().concat(app.disabledDocs.all()...)
31 @tmpl('sidebarPickerNote') +35
32 @tmpl('sidebarSave')36 while doc = docs.shift()
37 if doc.version
38 [docs, versions] = @extractVersions(docs, doc)
39 html += @tmpl('sidebarVersionedDoc', doc, @renderVersions(versions), open: app.docs.contains(doc))
40 else
41 html += @tmpl('sidebarLabel', doc, checked: app.docs.contains(doc))
33 42
43 @html html + @tmpl('sidebarPickerNote') + @tmpl('sidebarSave')
34 @refreshElements()44 @refreshElements()
35 45
36 @delay -> # trigger animation46 @delay -> # trigger animation
@@ -38,6 +48,18 @@ class app.views.DocPicker extends app.View · 1 unmodified line
38 @addClass '_in'48 @addClass '_in'
39 return49 return
40 50
51 renderVersions: (docs) ->
52 html = ''
53 html += @tmpl('sidebarLabel', doc, checked: app.docs.contains(doc)) for doc in docs
54 html
55
56 extractVersions: (originalDocs, version) ->
57 docs = []
58 versions = [version]
59 for doc in originalDocs
60 (if doc.name is version.name then versions else docs).push(doc)
61 [docs, versions]
62
41 empty: ->63 empty: ->
42 @resetClass()64 @resetClass()
43 super65 super
assets/stylesheets/components/_sidebar.scss+21−20
@@ -150,7 +150,7 @@ · 149 unmodified lines
150// List hierarchy150// List hierarchy
151//151//
152 152
153._list-dir,153._list-dir:not(._list-rdir),
154%_list-dir {154%_list-dir {
155 padding-left: 2.25rem;155 padding-left: 2.25rem;
156}156}
@@ -172,6 +172,11 @@ · 15 unmodified lines
172 172
173 &:hover { opacity: .65; }173 &:hover { opacity: .65; }
174 174
175 ._list-rdir > & {
176 left: auto;
177 right: .25rem;
178 }
179
175 &:before {180 &:before {
176 @if $style == 'dark' {181 @if $style == 'dark' {
177 @extend %icon, %icon-dir-white;182 @extend %icon, %icon-dir-white;
@@ -187,7 +192,11 @@ · 9 unmodified lines
187}192}
188 193
189._list-sub {194._list-sub {
190 > ._list-item { padding-left: 2.75rem; }195 display: none;
196
197 .open + & { display: block; }
198 > ._list-item { padding-left: 2.375rem; }
199 > ._list-dir, > ._list-sub > ._list-item { padding-left: 2.75rem; }
191 > ._list-item:before { content: none; }200 > ._list-item:before { content: none; }
192 > ._list-dir { line-height: 1.375rem; }201 > ._list-dir { line-height: 1.375rem; }
193 202
@@ -288,32 +297,24 @@ · 94 unmodified lines
288// List picker297// List picker
289//298//
290 299
300._list-picker {
301 opacity: 0;
302 transition: .2s;
303
304 &._in { opacity: 1; }
305 ._list-item { cursor: pointer; }
306 ._list-sub > ._list-item { padding-left: 2.375rem; }
307}
308
291._list-checkbox {309._list-checkbox {
292 position: absolute;310 position: absolute;
293 top: .5rem;311 top: .5rem;
294 right: -1rem;312 right: .75rem;
295 width: 1rem;313 width: 1rem;
296 height: 1rem;314 height: 1rem;
297 transition: .2s;315 transition: .2s;
298}316}
299 317
300._list-label {
301 cursor: pointer;
302 transition: .2s;
303 @extend %_list-dir;
304
305 ._in > & { padding-left: .75rem; }
306 ._in > & > ._list-checkbox { right: .5rem }
307}
308
309._list-label-off {
310 opacity: 0;
311 padding-left: .75rem;
312
313 ._in > & { opacity: 1; }
314 > ._list-checkbox { right: .5rem; }
315}
316
317._list-link {318._list-link {
318 display: block;319 display: block;
319 margin-top: .75rem;320 margin-top: .75rem;