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

assets/images/icons.png +0 −0
assets/images/icons@2x.png +0 −0
assets/javascripts/templates/path_tmpl.coffee +4 −2
assets/javascripts/templates/sidebar_tmpl.coffee +7 −5
assets/javascripts/views/list/list_fold.coffee +1 −0
assets/stylesheets/components/_path.scss +8 −12
assets/stylesheets/components/_sidebar.scss +11 −14
assets/stylesheets/global/_icons.scss +4 −7
public/icons/ui/dir-white/SOURCE +0 −1
public/icons/ui/dir-white/dir-white.png +0 −0
public/icons/ui/dir-white/dir-white@2x.png +0 −0
public/icons/ui/dir/SOURCE +0 −1
public/icons/ui/dir/dir.png +0 −0
public/icons/ui/dir/dir@2x.png +0 −0
public/icons/ui/path/16.png +0 −0
public/icons/ui/path/16@2x.png +0 −0
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 @@
	1	+arrow = """<svg class="_path-arrow"><use xlink:href="#dir"/></svg>"""
	2	+
1	3	app.templates.path = (doc, type, entry) ->
2	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 type
4		− html += """<span class="_path-item">#{$.escape entry.name}</span>""" if entry
	5	+ html += """#{arrow}<a href="#{type.fullPath()}" class="_path-item">#{type.name}</a>""" if type
	6	+ html += """#{arrow}<span class="_path-item">#{$.escape entry.name}</span>""" if entry
5	7	html

assets/javascripts/templates/sidebar_tmpl.coffee+7−5

@@ -1,5 +1,7 @@
1	1	templates = app.templates
2	2
	3	+arrow = """<svg class="_list-arrow"><use xlink:href="#dir"/></svg>"""
	4	+
3	5	templates.sidebarDoc = (doc, options = {}) ->
4	6	link = """<a href="#{doc.fullPath()}" class="_list-item _icon-#{doc.icon} """
5	7	link += if options.disabled then '_list-disabled' else '_list-dir'
@@ -7,14 +9,14 @@ templates.sidebarDoc = (doc, options = {}) -> · 1 unmodified line
7	9	if options.disabled
8	10	link += """<span class="_list-enable" data-enable="#{doc.slug}">Enable</span>"""
9	11	else
10		− link += """<span class="_list-arrow"></span>"""
	12	+ link += arrow
11	13	link += """<span class="_list-count">#{doc.release}</span>""" if doc.release
12	14	link += """<span class="_list-text">#{doc.name}"""
13	15	link += " #{doc.version}" if options.fullName or options.disabled and doc.version
14	16	link + "</span></a>"
15	17
16	18	templates.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
19	21	templates.sidebarEntry = (entry) ->
20	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
47	49	templates.sidebarVersionedDoc = (doc, versions, options = {}) ->
48	50	html = """<div class="_list-item _list-dir _list-rdir _icon-#{doc.icon}"""
49	51	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
52	54	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>"""
54	56
55	57	templates.sidebarDisabledList = (html) ->
56	58	"""<div class="_disabled-list">#{html}</div>"""
57	59
58	60	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>"""
60	62
61	63	templates.docPickerNote = """
62	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	55	return if event.which isnt 1 or event.metaKey or event.ctrlKey
56	56	return unless event.pageY # ignore fabricated clicks
57	57	el = event.target
	58	+ el = el.parentElement if el.parentElement.tagName.toUpperCase() is 'SVG'
58	59
59	60	if el.classList.contains @constructor.handleClass
60	61	$.stopEvent(event)

assets/stylesheets/components/_path.scss+8−12

@@ -23,7 +23,6 @@ · 22 unmodified lines
23	23	position: relative;
24	24	display: inline-block;
25	25	vertical-align: top;
26		− margin: 0 1rem 0 0;
27	26	padding: 0 .375rem;
28	27	color: $textColor;
29	28	text-decoration: none;
@@ -36,16 +35,13 @@ · 6 unmodified lines
36	35	margin: .5rem .375rem 0 0;
37	36	@extend %doc-icon;
38	37	}
	38	+}
39	39
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;
51	47	}

assets/stylesheets/components/_sidebar.scss+11−14

@@ -162,7 +162,7 @@ · 161 unmodified lines
162	162
163	163	._list-dir:not(._list-rdir),
164	164	%_list-dir {
165		− padding-left: 2.25rem;
	165	+ padding-left: 2.125rem;
166	166	}
167	167
168	168	._list-disabled {
@@ -176,10 +176,15 @@ · 7 unmodified lines
176	176	position: absolute;
177	177	top: 0;
178	178	left: .25rem;
179		− padding: .5rem;
	179	+ padding: .5rem .375rem .5rem .5rem;
	180	+ width: 1rem;
	181	+ height: 1rem;
180	182	cursor: pointer;
	183	+ fill: black;
181	184	opacity: .4;
182	185
	186	+ @if $style == 'dark' { fill: white; }
	187	+
183	188	&:hover { opacity: .65; }
184	189
185	190	._list-rdir > & {
@@ -187,18 +192,10 @@ · 1 unmodified line
187	192	right: .25rem;
188	193	}
189	194
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	+ }
202	199	}
203	200
204	201	._list-sub {

assets/stylesheets/global/_icons.scss+4−7

@@ -4,7 +4,7 @@ · 3 unmodified lines
4	4	width: 1rem;
5	5	height: 1rem;
6	6	background-image: image-url('icons.png');
7		− background-size: 4rem 3rem;
	7	+ background-size: 4rem 2rem;
8	8	}
9	9
10	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	37	%icon-search { background-position: -1rem 0; }
38	38	%icon-link { background-position: -2.25rem -.25rem; }
39	39	%icon-clear { background-position: -3rem 0; }
40		−%icon-path { background-position: 0 -1rem; }
	40	+%icon-clipboard-white { background-position: 0 -1rem; }
41	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	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	45	._icon-jest:before { background-position: 0 0; }
49	46	._icon-liquid:before { background-position: -1rem 0; }

public/icons/ui/dir-white/SOURCE+0−1

@@ -1 +0,0 @@
1		−http://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 @@
1		−http://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	30	<div class="_list" role="navigation">
31	31	<% unless @doc %>
32	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	34	<% end %>
35	35	<% end %>
36	36	</div>
@@ -55,6 +55,9 @@ · 18 unmodified lines
55	55	</div>
56	56	</form>
57	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	61	<style data-size="<%= app_size %>" data-resizer>
59	62	._container { margin-left: <%= app_size %>; }
60	63	._header, ._list, ._sidebar-footer { width: <%= app_size %>; }