Skip to content

Commit bda3290

Browse files
ThibautThibaut
committed
Use an SVG icon for "dir" and "path" icons
1 parent 68c0308 commit bda3290

17 files changed

Lines changed: 39 additions & 43 deletions

File tree

‎assets/images/icons.png‎

-189 Bytes
Loading

‎assets/images/[email protected]‎

-483 Bytes
Loading

‎assets/javascripts/templates/path_tmpl.coffee‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1+
arrow = """<svg class="_path-arrow"><use xlink:href="#dir"/></svg>"""
2+
13
app.templates.path = (doc, type, entry) ->
24
html = """<a href="#{doc.fullPath()}" class="_path-item _icon-#{doc.icon}">#{doc.fullName}</a>"""
3-
html += """<a href="proxy.php?url=https%3A%2F%2Fgithub.com%2F%3Cspan+class%3D"pl-s1">#{type.fullPath()}" class="_path-item">#{type.name}</a>""" if type
4-
html += """<span class="_path-item">#{$.escape entry.name}</span>""" if entry
5+
html += """#{arrow}<a href="proxy.php?url=https%3A%2F%2Fgithub.com%2F%3Cspan+class%3D"pl-s1">#{type.fullPath()}" class="_path-item">#{type.name}</a>""" if type
6+
html += """#{arrow}<span class="_path-item">#{$.escape entry.name}</span>""" if entry
57
html

‎assets/javascripts/templates/sidebar_tmpl.coffee‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,22 @@
11
templates = app.templates
22

3+
arrow = """<svg class="_list-arrow"><use xlink:href="#dir"/></svg>"""
4+
35
templates.sidebarDoc = (doc, options = {}) ->
46
link = """<a href="#{doc.fullPath()}" class="_list-item _icon-#{doc.icon} """
57
link += if options.disabled then '_list-disabled' else '_list-dir'
68
link += """" data-slug="#{doc.slug}" title="#{doc.fullName}" tabindex="-1">"""
79
if options.disabled
810
link += """<span class="_list-enable" data-enable="#{doc.slug}">Enable</span>"""
911
else
10-
link += """<span class="_list-arrow"></span>"""
12+
link += arrow
1113
link += """<span class="_list-count">#{doc.release}</span>""" if doc.release
1214
link += """<span class="_list-text">#{doc.name}"""
1315
link += " #{doc.version}" if options.fullName or options.disabled and doc.version
1416
link + "</span></a>"
1517

1618
templates.sidebarType = (type) ->
17-
"""<a href="proxy.php?url=https%3A%2F%2Fgithub.com%2F%3Cspan+class%3D"pl-s1">#{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="proxy.php?url=https%3A%2F%2Fgithub.com%2F%3Cspan+class%3D"pl-s1">#{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>"""
1820

1921
templates.sidebarEntry = (entry) ->
2022
"""<a href="#{entry.fullPath()}" class="_list-item _list-hover" tabindex="-1">#{$.escape entry.name}</a>"""
@@ -47,16 +49,16 @@ templates.sidebarLabel = (doc, options = {}) ->
4749
templates.sidebarVersionedDoc = (doc, versions, options = {}) ->
4850
html = """<div class="_list-item _list-dir _list-rdir _icon-#{doc.icon}"""
4951
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>"""
5153

5254
templates.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>"""
5456

5557
templates.sidebarDisabledList = (html) ->
5658
"""<div class="_disabled-list">#{html}</div>"""
5759

5860
templates.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>"""
6062

6163
templates.docPickerNote = """
6264
<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‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@ class app.views.ListFold extends app.View
5555
return if event.which isnt 1 or event.metaKey or event.ctrlKey
5656
return unless event.pageY # ignore fabricated clicks
5757
el = event.target
58+
el = el.parentElement if el.parentElement.tagName.toUpperCase() is 'SVG'
5859

5960
if el.classList.contains @constructor.handleClass
6061
$.stopEvent(event)

‎assets/stylesheets/components/_path.scss‎

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@
2323
position: relative;
2424
display: inline-block;
2525
vertical-align: top;
26-
margin: 0 1rem 0 0;
2726
padding: 0 .375rem;
2827
color: $textColor;
2928
text-decoration: none;
@@ -36,16 +35,13 @@
3635
margin: .5rem .375rem 0 0;
3736
@extend %doc-icon;
3837
}
38+
}
3939

40-
& + &:after {
41-
content: '';
42-
position: absolute;
43-
top: 50%;
44-
right: 100%;
45-
width: 1rem;
46-
height: 1rem;
47-
margin: -.5rem 0 0 0;
48-
pointer-events: none;
49-
@extend %icon, %icon-path;
50-
}
40+
._path-arrow {
41+
display: inline-block;
42+
vertical-align: top;
43+
width: .75rem;
44+
height: .75rem;
45+
margin: .625rem .25rem;
46+
fill: #888;
5147
}

‎assets/stylesheets/components/_sidebar.scss‎

Lines changed: 11 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -162,7 +162,7 @@
162162

163163
._list-dir:not(._list-rdir),
164164
%_list-dir {
165-
padding-left: 2.25rem;
165+
padding-left: 2.125rem;
166166
}
167167

168168
._list-disabled {
@@ -176,29 +176,26 @@
176176
position: absolute;
177177
top: 0;
178178
left: .25rem;
179-
padding: .5rem;
179+
padding: .5rem .375rem .5rem .5rem;
180+
width: 1rem;
181+
height: 1rem;
180182
cursor: pointer;
183+
fill: black;
181184
opacity: .4;
182185

186+
@if $style == 'dark' { fill: white; }
187+
183188
&:hover { opacity: .65; }
184189

185190
._list-rdir > & {
186191
left: auto;
187192
right: .25rem;
188193
}
189194

190-
&:before {
191-
@if $style == 'dark' {
192-
@extend %icon, %icon-dir-white;
193-
} @else {
194-
@extend %icon, %icon-dir;
195-
}
196-
197-
.open > &, .open-title > & {
198-
-webkit-transform: rotate(90deg);
199-
transform: rotate(90deg);
200-
}
201-
}
195+
.open > &, .open-title > & {
196+
-webkit-transform: rotate(90deg);
197+
transform: rotate(90deg);
198+
}
202199
}
203200

204201
._list-sub {

‎assets/stylesheets/global/_icons.scss‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
width: 1rem;
55
height: 1rem;
66
background-image: image-url('icons.png');
7-
background-size: 4rem 3rem;
7+
background-size: 4rem 2rem;
88
}
99

1010
%doc-icon {
@@ -33,17 +33,14 @@
3333
}
3434
}
3535

36-
%icon-dir { background-position: 0 0; }
36+
%icon-clipboard { background-position: 0 0; }
3737
%icon-search { background-position: -1rem 0; }
3838
%icon-link { background-position: -2.25rem -.25rem; }
3939
%icon-clear { background-position: -3rem 0; }
40-
%icon-path { background-position: 0 -1rem; }
40+
%icon-clipboard-white { background-position: 0 -1rem; }
4141
%icon-search-white { background-position: -1rem -1rem; }
42-
%icon-dir-white { background-position: -2rem -1rem; }
42+
%icon-close-white { background-position: -2rem -1rem; }
4343
%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; }
4744

4845
._icon-jest:before { background-position: 0 0; }
4946
._icon-liquid:before { background-position: -1rem 0; }

‎public/icons/ui/dir-white/SOURCE‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎public/icons/ui/dir-white/dir-white.png‎

-125 Bytes
Binary file not shown.

0 commit comments

Comments
 (0)