History

Use an SVG icon for "dir" and "path" icons

Thibaut Courouble committed 9 years ago

Commit bda32901 parent 68c030817 files · +31 −35Browse files

Unified · Split

17 files
  1. assets/images/icons.png +0 −0
  2. assets/images/icons@2x.png +0 −0
  3. assets/javascripts/templates/path_tmpl.coffee +4 −2
  4. assets/javascripts/templates/sidebar_tmpl.coffee +7 −5
  5. assets/javascripts/views/list/list_fold.coffee +1 −0
  6. assets/stylesheets/components/_path.scss +8 −12
  7. assets/stylesheets/components/_sidebar.scss +11 −14
  8. assets/stylesheets/global/_icons.scss +4 −7
  9. public/icons/ui/dir-white/SOURCE +0 −1
  10. public/icons/ui/dir-white/dir-white.png +0 −0
  11. public/icons/ui/dir-white/dir-white@2x.png +0 −0
  12. public/icons/ui/dir/SOURCE +0 −1
  13. public/icons/ui/dir/dir.png +0 −0
  14. public/icons/ui/dir/dir@2x.png +0 −0
  15. public/icons/ui/path/16.png +0 −0
  16. public/icons/ui/path/16@2x.png +0 −0
  17. views/app.erb +4 −1
assets/images/icons.png+0−0

Binary file not shown.

assets/images/icons@2x.png+0−0

Binary file not shown.

assets/javascripts/templates/path_tmpl.coffee+4−2
@@ -1,5 +1,7 @@
1arrow = """<svg class="_path-arrow"><use xlink:href="#dir"/></svg>"""
2
1app.templates.path = (doc, type, entry) ->3app.templates.path = (doc, type, entry) ->
2 html = """<a href="#{doc.fullPath()}" class="_path-item _icon-#{doc.icon}">#{doc.fullName}</a>"""4 html = """<a href="#{doc.fullPath()}" class="_path-item _icon-#{doc.icon}">#{doc.fullName}</a>"""
3 html += """<a href="#{type.fullPath()}" class="_path-item">#{type.name}</a>""" if type5 html += """#{arrow}<a href="#{type.fullPath()}" class="_path-item">#{type.name}</a>""" if type
4 html += """<span class="_path-item">#{$.escape entry.name}</span>""" if entry6 html += """#{arrow}<span class="_path-item">#{$.escape entry.name}</span>""" if entry
5 html7 html
assets/javascripts/templates/sidebar_tmpl.coffee+7−5
@@ -1,5 +1,7 @@
1templates = app.templates1templates = app.templates
2 2
3arrow = """<svg class="_list-arrow"><use xlink:href="#dir"/></svg>"""
4
3templates.sidebarDoc = (doc, options = {}) ->5templates.sidebarDoc = (doc, options = {}) ->
4 link = """<a href="#{doc.fullPath()}" class="_list-item _icon-#{doc.icon} """6 link = """<a href="#{doc.fullPath()}" class="_list-item _icon-#{doc.icon} """
5 link += if options.disabled then '_list-disabled' else '_list-dir'7 link += if options.disabled then '_list-disabled' else '_list-dir'
@@ -7,14 +9,14 @@ templates.sidebarDoc = (doc, options = {}) -> · 1 unmodified line
7 if options.disabled9 if options.disabled
8 link += """<span class="_list-enable" data-enable="#{doc.slug}">Enable</span>"""10 link += """<span class="_list-enable" data-enable="#{doc.slug}">Enable</span>"""
9 else11 else
10 link += """<span class="_list-arrow"></span>"""12 link += arrow
11 link += """<span class="_list-count">#{doc.release}</span>""" if doc.release13 link += """<span class="_list-count">#{doc.release}</span>""" if doc.release
12 link += """<span class="_list-text">#{doc.name}"""14 link += """<span class="_list-text">#{doc.name}"""
13 link += " #{doc.version}" if options.fullName or options.disabled and doc.version15 link += " #{doc.version}" if options.fullName or options.disabled and doc.version
14 link + "</span></a>"16 link + "</span></a>"
15 17
16templates.sidebarType = (type) ->18templates.sidebarType = (type) ->
17 """<a href="#{type.fullPath()}" class="_list-item _list-dir" data-slug="#{type.slug}" tabindex="-1"><span class="_list-arrow"></span><span class="_list-count">#{type.count}</span><span class="_list-text">#{$.escape type.name}</span></a>"""19 """<a href="#{type.fullPath()}" class="_list-item _list-dir" data-slug="#{type.slug}" tabindex="-1">#{arrow}<span class="_list-count">#{type.count}</span><span class="_list-text">#{$.escape type.name}</span></a>"""
18 20
19templates.sidebarEntry = (entry) ->21templates.sidebarEntry = (entry) ->
20 """<a href="#{entry.fullPath()}" class="_list-item _list-hover" tabindex="-1">#{$.escape entry.name}</a>"""22 """<a href="#{entry.fullPath()}" class="_list-item _list-hover" tabindex="-1">#{$.escape entry.name}</a>"""
@@ -47,16 +49,16 @@ templates.sidebarLabel = (doc, options = {}) -> · 26 unmodified lines
47templates.sidebarVersionedDoc = (doc, versions, options = {}) ->49templates.sidebarVersionedDoc = (doc, versions, options = {}) ->
48 html = """<div class="_list-item _list-dir _list-rdir _icon-#{doc.icon}"""50 html = """<div class="_list-item _list-dir _list-rdir _icon-#{doc.icon}"""
49 html += " open" if options.open51 html += " open" if options.open
50 html + """" tabindex="0"><span class="_list-arrow"></span>#{doc.name}</div><div class="_list _list-sub">#{versions}</div>"""52 html + """" tabindex="0">#{arrow}#{doc.name}</div><div class="_list _list-sub">#{versions}</div>"""
51 53
52templates.sidebarDisabled = (options) ->54templates.sidebarDisabled = (options) ->
53 """<h6 class="_list-title"><span class="_list-arrow"></span>Disabled (#{options.count})</h6>"""55 """<h6 class="_list-title">#{arrow}Disabled (#{options.count})</h6>"""
54 56
55templates.sidebarDisabledList = (html) ->57templates.sidebarDisabledList = (html) ->
56 """<div class="_disabled-list">#{html}</div>"""58 """<div class="_disabled-list">#{html}</div>"""
57 59
58templates.sidebarDisabledVersionedDoc = (doc, versions) ->60templates.sidebarDisabledVersionedDoc = (doc, versions) ->
59 """<a class="_list-item _list-dir _icon-#{doc.icon} _list-disabled" data-slug="#{doc.slug_without_version}" tabindex="-1"><span class="_list-arrow"></span>#{doc.name}</a><div class="_list _list-sub">#{versions}</div>"""61 """<a class="_list-item _list-dir _icon-#{doc.icon} _list-disabled" data-slug="#{doc.slug_without_version}" tabindex="-1">#{arrow}#{doc.name}</a><div class="_list _list-sub">#{versions}</div>"""
60 62
61templates.docPickerNote = """63templates.docPickerNote = """
62 <div class="_list-note">Tip: for faster and better search results, select only the docs you need.</div>64 <div class="_list-note">Tip: for faster and better search results, select only the docs you need.</div>
assets/javascripts/views/list/list_fold.coffee+1−0
@@ -55,6 +55,7 @@ class app.views.ListFold extends app.View · 54 unmodified lines
55 return if event.which isnt 1 or event.metaKey or event.ctrlKey55 return if event.which isnt 1 or event.metaKey or event.ctrlKey
56 return unless event.pageY # ignore fabricated clicks56 return unless event.pageY # ignore fabricated clicks
57 el = event.target57 el = event.target
58 el = el.parentElement if el.parentElement.tagName.toUpperCase() is 'SVG'
58 59
59 if el.classList.contains @constructor.handleClass60 if el.classList.contains @constructor.handleClass
60 $.stopEvent(event)61 $.stopEvent(event)
assets/stylesheets/components/_path.scss+8−12
@@ -23,7 +23,6 @@ · 22 unmodified lines
23 position: relative;23 position: relative;
24 display: inline-block;24 display: inline-block;
25 vertical-align: top;25 vertical-align: top;
26 margin: 0 1rem 0 0;
27 padding: 0 .375rem;26 padding: 0 .375rem;
28 color: $textColor;27 color: $textColor;
29 text-decoration: none;28 text-decoration: none;
@@ -36,16 +35,13 @@ · 6 unmodified lines
36 margin: .5rem .375rem 0 0;35 margin: .5rem .375rem 0 0;
37 @extend %doc-icon;36 @extend %doc-icon;
38 }37 }
38}
39 39
40 & + &:after {40._path-arrow {
41 content: '';41 display: inline-block;
42 position: absolute;42 vertical-align: top;
43 top: 50%;43 width: .75rem;
44 right: 100%;44 height: .75rem;
45 width: 1rem;45 margin: .625rem .25rem;
46 height: 1rem;46 fill: #888;
47 margin: -.5rem 0 0 0;
48 pointer-events: none;
49 @extend %icon, %icon-path;
50 }
51}47}
assets/stylesheets/components/_sidebar.scss+11−14
@@ -162,7 +162,7 @@ · 161 unmodified lines
162 162
163._list-dir:not(._list-rdir),163._list-dir:not(._list-rdir),
164%_list-dir {164%_list-dir {
165 padding-left: 2.25rem;165 padding-left: 2.125rem;
166}166}
167 167
168._list-disabled {168._list-disabled {
@@ -176,10 +176,15 @@ · 7 unmodified lines
176 position: absolute;176 position: absolute;
177 top: 0;177 top: 0;
178 left: .25rem;178 left: .25rem;
179 padding: .5rem;179 padding: .5rem .375rem .5rem .5rem;
180 width: 1rem;
181 height: 1rem;
180 cursor: pointer;182 cursor: pointer;
183 fill: black;
181 opacity: .4;184 opacity: .4;
182 185
186 @if $style == 'dark' { fill: white; }
187
183 &:hover { opacity: .65; }188 &:hover { opacity: .65; }
184 189
185 ._list-rdir > & {190 ._list-rdir > & {
@@ -187,18 +192,10 @@ · 1 unmodified line
187 right: .25rem;192 right: .25rem;
188 }193 }
189 194
190 &:before {195 .open > &, .open-title > & {
191 @if $style == 'dark' {196 -webkit-transform: rotate(90deg);
192 @extend %icon, %icon-dir-white;197 transform: rotate(90deg);
193 } @else {198 }
194 @extend %icon, %icon-dir;
195 }
196
197 .open > &, .open-title > & {
198 -webkit-transform: rotate(90deg);
199 transform: rotate(90deg);
200 }
201 }
202}199}
203 200
204._list-sub {201._list-sub {
assets/stylesheets/global/_icons.scss+4−7
@@ -4,7 +4,7 @@ · 3 unmodified lines
4 width: 1rem;4 width: 1rem;
5 height: 1rem;5 height: 1rem;
6 background-image: image-url('icons.png');6 background-image: image-url('icons.png');
7 background-size: 4rem 3rem;7 background-size: 4rem 2rem;
8}8}
9 9
10%doc-icon {10%doc-icon {
@@ -33,17 +33,14 @@ · 22 unmodified lines
33 }33 }
34}34}
35 35
36%icon-dir { background-position: 0 0; }36%icon-clipboard { background-position: 0 0; }
37%icon-search { background-position: -1rem 0; }37%icon-search { background-position: -1rem 0; }
38%icon-link { background-position: -2.25rem -.25rem; }38%icon-link { background-position: -2.25rem -.25rem; }
39%icon-clear { background-position: -3rem 0; }39%icon-clear { background-position: -3rem 0; }
40%icon-path { background-position: 0 -1rem; }40%icon-clipboard-white { background-position: 0 -1rem; }
41%icon-search-white { background-position: -1rem -1rem; }41%icon-search-white { background-position: -1rem -1rem; }
42%icon-dir-white { background-position: -2rem -1rem; }42%icon-close-white { background-position: -2rem -1rem; }
43%icon-link-white { background-position: -3.25rem -1.25rem; }43%icon-link-white { background-position: -3.25rem -1.25rem; }
44%icon-clipboard { background-position: 0 -2rem; }
45%icon-clipboard-white { background-position: -1rem -2rem; }
46%icon-close-white { background-position: -2rem -2rem; }
47 44
48._icon-jest:before { background-position: 0 0; }45._icon-jest:before { background-position: 0 0; }
49._icon-liquid:before { background-position: -1rem 0; }46._icon-liquid:before { background-position: -1rem 0; }
public/icons/ui/dir-white/SOURCE+0−1
@@ -1 +0,0 @@
1http://gemicon.net/
public/icons/ui/dir-white/dir-white.png+0−0

Binary file not shown.

public/icons/ui/dir-white/dir-white@2x.png+0−0

Binary file not shown.

public/icons/ui/dir/SOURCE+0−1
@@ -1 +0,0 @@
1http://gemicon.net/
public/icons/ui/dir/dir.png+0−0

Binary file not shown.

public/icons/ui/dir/dir@2x.png+0−0

Binary file not shown.

public/icons/ui/path/16.png+0−0

Binary file not shown.

public/icons/ui/path/16@2x.png+0−0

Binary file not shown.

views/app.erb+4−1
@@ -30,7 +30,7 @@ · 29 unmodified lines
30 <div class="_list" role="navigation">30 <div class="_list" role="navigation">
31 <% unless @doc %>31 <% unless @doc %>
32 <% App.docs.each do |slug, doc| %>32 <% App.docs.each do |slug, doc| %>
33 <a href="/<%= slug %>/" class="_list-item"><span class="_list-arrow"></span><%= doc['full_name'] %></a>33 <a href="/<%= slug %>/" class="_list-item"><%= doc['full_name'] %></a>
34 <% end %>34 <% end %>
35 <% end %>35 <% end %>
36 </div>36 </div>
@@ -55,6 +55,9 @@ · 18 unmodified lines
55 </div>55 </div>
56 </form>56 </form>
57</div>57</div>
58<svg style="display:none">
59 <symbol id="dir"><svg viewBox="0 0 20 20"><path d="M15 10c0 .3-.305.515-.305.515l-8.56 5.303c-.625.41-1.135.106-1.135-.67V4.853c0-.777.51-1.078 1.135-.67l8.56 5.305S15 9.702 15 10z"/></svg></symbol>
60</svg>
58<style data-size="<%= app_size %>" data-resizer>61<style data-size="<%= app_size %>" data-resizer>
59 ._container { margin-left: <%= app_size %>; }62 ._container { margin-left: <%= app_size %>; }
60 ._header, ._list, ._sidebar-footer { width: <%= app_size %>; }63 ._header, ._list, ._sidebar-footer { width: <%= app_size %>; }