History

Fully implement offline docs table

Thibaut committed 11 years ago

Commit f2111241 parent eb58c015 files · +54 −45Browse files

Unified · Split

5 files
  1. assets/javascripts/collections/docs.coffee +1 −1
  2. assets/javascripts/models/doc.coffee +1 −1
  3. assets/javascripts/templates/pages/offline_tmpl.coffee +33 −8
  4. assets/javascripts/views/content/offline_page.coffee +8 −6
  5. assets/stylesheets/components/_content.scss +11 −29
assets/javascripts/collections/docs.coffee+1−1
@@ -48,5 +48,5 @@ class app.collections.Docs extends app.Collection · 47 unmodified lines
48 app.db.versions @models, (statuses) ->48 app.db.versions @models, (statuses) ->
49 if statuses49 if statuses
50 for key, value of statuses50 for key, value of statuses
51 statuses[key] = downloaded: !!value, version: value51 statuses[key] = downloaded: !!value, mtime: value
52 callback(statuses)52 callback(statuses)
assets/javascripts/models/doc.coffee+1−1
@@ -128,5 +128,5 @@ class app.models.Doc extends app.Model · 127 unmodified lines
128 128
129 getDownloadStatus: (callback) ->129 getDownloadStatus: (callback) ->
130 app.db.version @, (value) ->130 app.db.version @, (value) ->
131 callback downloaded: !!value, version: value131 callback downloaded: !!value, mtime: value
132 return132 return
assets/javascripts/templates/pages/offline_tmpl.coffee+33−8
@@ -1,6 +1,14 @@
1app.templates.offlinePage = (docs) -> """1app.templates.offlinePage = (docs) -> """
2 <h1 class="_lined-heading">Offline Documentation</h1>2 <h1 class="_lined-heading">Offline Documentation</h1>
3 <table class="_docs">#{docs}</table>3 <table class="_docs">
4 <tr>
5 <th>Documentation</th>
6 <th class="_docs-size">Size</th>
7 <th>Status</th>
8 <th>Action</th>
9 </tr>
10 #{docs}
11 </table>
4 <h1 class="_lined-heading">Questions & Answers</h1>12 <h1 class="_lined-heading">Questions & Answers</h1>
5 <dl>13 <dl>
6 <dt>How does this work?14 <dt>How does this work?
@@ -29,11 +37,28 @@ canICloseTheTab = -> · 22 unmodified lines
29 The current tab will continue to work, though (provided you downloaded all the documentations you want to use beforehand). """37 The current tab will continue to work, though (provided you downloaded all the documentations you want to use beforehand). """
30 38
31app.templates.offlineDoc = (doc, status) ->39app.templates.offlineDoc = (doc, status) ->
32 html = """<tr data-slug="#{doc.slug}">"""40 outdated = status.downloaded and status.mtime isnt doc.mtime
33 html += """<th class="_icon-#{doc.slug}">#{doc.name}</th>"""41
34 html += if status.downloaded42 html = """
35 """<td><a data-del>Delete</a></td>"""43 <tr data-slug="#{doc.slug}"#{if outdated then ' class="_highlight"' else ''}>
44 <td class="_docs-name _icon-#{doc.slug}">#{doc.name}</td>
45 <td class="_docs-size">#{Math.ceil(doc.db_size / 100000) / 10} MB</td>
46 """
47
48 html += if !status.downloaded
49 """
50 <td>-</td>
51 <td><a data-dl>Download</a></td>
52 """
53 else if outdated
54 """
55 <td>Outdated</td>
56 <td><a data-dl>Update</a> - <a data-del>Delete</a></td>
57 """
36 else58 else
37 """<td><a data-dl>Download</a></td>"""59 """
38 html += """</tr>"""60 <td>Up-to-date</td>
39 html61 <td><a data-del>Delete</a></td>
62 """
63
64 html + '</tr>'
assets/javascripts/views/content/offline_page.coffee+8−6
@@ -39,25 +39,27 @@ class app.views.OfflinePage extends app.View · 38 unmodified lines
39 return39 return
40 40
41 onClick: (event) =>41 onClick: (event) =>
42 if event.target.hasAttribute('data-dl')42 link = event.target
43
44 if link.hasAttribute('data-dl')
43 action = 'download'45 action = 'download'
44 else if event.target.hasAttribute('data-del')46 else if link.hasAttribute('data-del')
45 action = 'undownload'47 action = 'undownload'
46 48
47 if action49 if action
48 $.stopEvent(event)50 $.stopEvent(event)
49 doc = @docByEl(event.target)51 doc = @docByEl(link)
50 doc[action](@onDownloadSuccess.bind(@, doc), @onDownloadError.bind(@, doc))52 doc[action](@onDownloadSuccess.bind(@, doc), @onDownloadError.bind(@, doc))
51 @docEl(doc).classList.add("#{action}ing")53 link.parentNode.innerHTML = "#{link.textContent.replace(/e$/, '')}ing…"
52 return54 return
53 55
54 onDownloadSuccess: (doc) ->56 onDownloadSuccess: (doc) ->
55 doc.getDownloadStatus (status) =>57 doc.getDownloadStatus (status) =>
56 @docEl(doc).outerHTML = @renderDoc(doc, status)58 @docEl(doc).outerHTML = @renderDoc(doc, status)
59 $.highlight @docEl(doc), className: '_highlight'
57 return60 return
58 61
59 onDownloadError: (doc) ->62 onDownloadError: (doc) ->
60 el = @docEl(doc)63 el = @docEl(doc)
61 el.className = ''64 el.lastElementChild.textContent = 'Error'
62 el.classList.add('error')
63 return65 return
assets/stylesheets/components/_content.scss+11−29
@@ -250,43 +250,25 @@ · 249 unmodified lines
250 width: 100%;250 width: 100%;
251 line-height: 1.5rem;251 line-height: 1.5rem;
252 252
253 th {253 th, td {
254 max-width: 0;254 width: 1%;
255 padding-left: .5rem;
256 padding-right: .5rem;
257 white-space: nowrap;255 white-space: nowrap;
258 font-weight: normal;
259 256
260 &:before {257 &:first-child { width: auto; }
261 float: left;258 &:last-child { width: 12rem; }
262 margin: .25rem .5rem .25rem 0;
263 @extend %icon;
264 }
265 }259 }
266 260
267 td:last-child { text-align: right; }
268 td > a { cursor: pointer; }261 td > a { cursor: pointer; }
262}
269 263
270 tr.downloading > td:last-child {264._docs-name:before {
271 > a { display: none; }265 float: left;
272 &:before { content: 'Downloading…' }266 margin: .25rem .5rem .25rem 0;
273 }267 @extend %icon;
274
275 tr.undownloading > td:last-child {
276 > a { display: none; }
277 &:before { content: 'Deleting…' }
278 }
279
280 tr.error > td:last-child {
281 > a { display: none; }
282
283 &:before {
284 content: 'Error';
285 color: red;
286 }
287 }
288}268}
289 269
270._docs-size { text-align: right; }
271
290//272//
291// News273// News
292//274//