Skip to content

Commit 46dc18b

Browse files
st0012st0012
committed
Redesign main sidebar and make them collapsible
1 parent f85cf5c commit 46dc18b

File tree

12 files changed

+519
-74
lines changed

12 files changed

+519
-74
lines changed

‎lib/rdoc/generator/template/aliki/_icons.rhtml‎

Lines changed: 208 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,208 @@
1+
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
2+
<!-- Chevron (right arrow) - used for expand/collapse -->
3+
<symbol
4+
id="icon-chevron"
5+
viewBox="0 0 24 24"
6+
fill="none"
7+
stroke="currentColor"
8+
stroke-width="2"
9+
stroke-linecap="round"
10+
stroke-linejoin="round"
11+
>
12+
<polyline points="9 18 15 12 9 6"></polyline>
13+
</symbol>
14+
15+
<!-- File/Document - Pages section -->
16+
<symbol
17+
id="icon-file"
18+
viewBox="0 0 24 24"
19+
fill="none"
20+
stroke="currentColor"
21+
stroke-width="2"
22+
stroke-linecap="round"
23+
stroke-linejoin="round"
24+
>
25+
<path
26+
d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"
27+
></path>
28+
29+
<polyline points="14 2 14 8 20 8"></polyline>
30+
</symbol>
31+
32+
<!-- Layers/Stack - Classes and Modules section -->
33+
<symbol
34+
id="icon-layers"
35+
viewBox="0 0 24 24"
36+
fill="none"
37+
stroke="currentColor"
38+
stroke-width="2"
39+
stroke-linecap="round"
40+
stroke-linejoin="round"
41+
>
42+
<polygon points="12 2 2 7 12 12 22 7 12 2"></polygon>
43+
<polyline points="2 17 12 22 22 17"></polyline>
44+
<polyline points="2 12 12 17 22 12"></polyline>
45+
</symbol>
46+
47+
<!-- Curly braces with C - Class Methods section -->
48+
<symbol
49+
id="icon-class-methods"
50+
viewBox="0 0 24 24"
51+
fill="none"
52+
stroke="currentColor"
53+
stroke-width="2"
54+
stroke-linecap="round"
55+
stroke-linejoin="round"
56+
>
57+
<path d="M6 3C3.5 3 2 4.5 2 7v3c0 1.5-1 2-1 2s1 .5 1 2v5c0 2.5 1.5 4 4 4"></path>
58+
<path d="M18 3c2.5 0 4 1.5 4 4v3c0 1.5 1 2 1 2s-1 .5-1 2v5c0 2.5-1.5 4-4 4"></path>
59+
60+
<text
61+
x="12"
62+
y="17"
63+
text-anchor="middle"
64+
font-size="13"
65+
font-weight="bold"
66+
fill="currentColor"
67+
stroke="none"
68+
>
69+
C
70+
</text>
71+
</symbol>
72+
73+
<!-- Curly braces with I - Instance Methods section -->
74+
<symbol
75+
id="icon-instance-methods"
76+
viewBox="0 0 24 24"
77+
fill="none"
78+
stroke="currentColor"
79+
stroke-width="2"
80+
stroke-linecap="round"
81+
stroke-linejoin="round"
82+
>
83+
<path d="M6 3C3.5 3 2 4.5 2 7v3c0 1.5-1 2-1 2s1 .5 1 2v5c0 2.5 1.5 4 4 4"></path>
84+
<path d="M18 3c2.5 0 4 1.5 4 4v3c0 1.5 1 2 1 2s-1 .5-1 2v5c0 2.5-1.5 4-4 4"></path>
85+
86+
<text
87+
x="12"
88+
y="17"
89+
text-anchor="middle"
90+
font-size="13"
91+
font-weight="bold"
92+
fill="currentColor"
93+
stroke="none"
94+
>
95+
I
96+
</text>
97+
</symbol>
98+
99+
<!-- Double chevrons up - Ancestors section -->
100+
<symbol
101+
id="icon-ancestors"
102+
viewBox="0 0 24 24"
103+
fill="none"
104+
stroke="currentColor"
105+
stroke-width="2"
106+
stroke-linecap="round"
107+
stroke-linejoin="round"
108+
>
109+
<polyline points="17 11 12 6 7 11"></polyline>
110+
<polyline points="17 18 12 13 7 18"></polyline>
111+
</symbol>
112+
113+
<!-- User with plus - Included Modules section -->
114+
<symbol
115+
id="icon-includes"
116+
viewBox="0 0 24 24"
117+
fill="none"
118+
stroke="currentColor"
119+
stroke-width="2"
120+
stroke-linecap="round"
121+
stroke-linejoin="round"
122+
>
123+
<path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
124+
<circle cx="8.5" cy="7" r="4"></circle>
125+
126+
<line
127+
x1="20"
128+
y1="8"
129+
x2="20"
130+
y2="14"
131+
></line>
132+
133+
<line
134+
x1="23"
135+
y1="11"
136+
x2="17"
137+
y2="11"
138+
></line>
139+
</symbol>
140+
141+
<!-- User with check - Extended Modules section -->
142+
<symbol
143+
id="icon-extends"
144+
viewBox="0 0 24 24"
145+
fill="none"
146+
stroke="currentColor"
147+
stroke-width="2"
148+
stroke-linecap="round"
149+
stroke-linejoin="round"
150+
>
151+
<path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
152+
<circle cx="8.5" cy="7" r="4"></circle>
153+
<polyline points="17 11 19 13 23 9"></polyline>
154+
</symbol>
155+
156+
<!-- List - Sections section -->
157+
<symbol
158+
id="icon-list"
159+
viewBox="0 0 24 24"
160+
fill="none"
161+
stroke="currentColor"
162+
stroke-width="2"
163+
stroke-linecap="round"
164+
stroke-linejoin="round"
165+
>
166+
<line
167+
x1="8"
168+
y1="6"
169+
x2="21"
170+
y2="6"
171+
></line>
172+
173+
<line
174+
x1="8"
175+
y1="12"
176+
x2="21"
177+
y2="12"
178+
></line>
179+
180+
<line
181+
x1="8"
182+
y1="18"
183+
x2="21"
184+
y2="18"
185+
></line>
186+
187+
<line
188+
x1="3"
189+
y1="6"
190+
x2="3.01"
191+
y2="6"
192+
></line>
193+
194+
<line
195+
x1="3"
196+
y1="12"
197+
x2="3.01"
198+
y2="12"
199+
></line>
200+
201+
<line
202+
x1="3"
203+
y1="18"
204+
x2="3.01"
205+
y2="18"
206+
></line>
207+
</symbol>
208+
</svg>

‎lib/rdoc/generator/template/aliki/_sidebar_ancestors.rhtml‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,16 @@
11
<%- if klass.type == 'class' && (ancestors = klass.super_classes).any? %>
22
<div id="parent-class-section" class="nav-section">
3-
<h3>Ancestors</h3>
4-
<%= generate_ancestor_list(ancestors, klass) %>
3+
<details class="nav-section-collapsible" open>
4+
<summary class="nav-section-header">
5+
<span class="nav-section-icon">
6+
<svg><use href="#icon-ancestors"></use></svg>
7+
</span>
8+
<span class="nav-section-title">Ancestors</span>
9+
<span class="nav-section-chevron">
10+
<svg><use href="#icon-chevron"></use></svg>
11+
</span>
12+
</summary>
13+
<%= generate_ancestor_list(ancestors, klass) %>
14+
</details>
515
</div>
616
<%- end %>

‎lib/rdoc/generator/template/aliki/_sidebar_classes.rhtml‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,15 @@
11
<div id="classindex-section" class="nav-section">
2-
<h3>Class and Module Index</h3>
2+
<details class="nav-section-collapsible" open>
3+
<summary class="nav-section-header">
4+
<span class="nav-section-icon">
5+
<svg><use href="#icon-layers"></use></svg>
6+
</span>
7+
<span class="nav-section-title">Classes and Modules</span>
8+
<span class="nav-section-chevron">
9+
<svg><use href="#icon-chevron"></use></svg>
10+
</span>
11+
</summary>
312

4-
<%= generate_class_index_content(@classes, rel_prefix) %>
13+
<%= generate_class_index_content(@classes, rel_prefix) %>
14+
</details>
515
</div>

‎lib/rdoc/generator/template/aliki/_sidebar_extends.rhtml‎

Lines changed: 20 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,25 @@
11
<%- unless klass.extends.empty? then %>
22
<div id="extends-section" class="nav-section">
3-
<h3>Extended With Modules</h3>
3+
<details class="nav-section-collapsible" open>
4+
<summary class="nav-section-header">
5+
<span class="nav-section-icon">
6+
<svg><use href="#icon-extends"></use></svg>
7+
</span>
8+
<span class="nav-section-title">Extended With Modules</span>
9+
<span class="nav-section-chevron">
10+
<svg><use href="#icon-chevron"></use></svg>
11+
</span>
12+
</summary>
413

5-
<ul class="link-list">
6-
<%- klass.extends.each do |ext| %>
7-
<%- unless String === ext.module then %>
8-
<li><a class="extend" href="<%= klass.aref_to ext.module.path %>"><%= ext.module.full_name %></a></li>
9-
<%- else %>
10-
<li><span class="extend"><%= ext.name %></span></li>
11-
<%- end %>
12-
<%- end %>
13-
</ul>
14+
<ul class="nav-list">
15+
<%- klass.extends.each do |ext| %>
16+
<%- unless String === ext.module then %>
17+
<li><a class="extend" href="<%= klass.aref_to ext.module.path %>"><%= ext.module.full_name %></a></li>
18+
<%- else %>
19+
<li><span class="extend"><%= ext.name %></span></li>
20+
<%- end %>
21+
<%- end %>
22+
</ul>
23+
</details>
1424
</div>
1525
<%- end %>

‎lib/rdoc/generator/template/aliki/_sidebar_includes.rhtml‎

Lines changed: 20 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,25 @@
11
<%- unless klass.includes.empty? then %>
22
<div id="includes-section" class="nav-section">
3-
<h3>Included Modules</h3>
3+
<details class="nav-section-collapsible" open>
4+
<summary class="nav-section-header">
5+
<span class="nav-section-icon">
6+
<svg><use href="#icon-includes"></use></svg>
7+
</span>
8+
<span class="nav-section-title">Included Modules</span>
9+
<span class="nav-section-chevron">
10+
<svg><use href="#icon-chevron"></use></svg>
11+
</span>
12+
</summary>
413

5-
<ul class="link-list">
6-
<%- klass.includes.each do |inc| %>
7-
<%- unless String === inc.module then %>
8-
<li><a class="include" href="<%= klass.aref_to inc.module.path %>"><%= inc.module.full_name %></a></li>
9-
<%- else %>
10-
<li><span class="include"><%= inc.name %></span></li>
11-
<%- end %>
12-
<%- end %>
13-
</ul>
14+
<ul class="nav-list">
15+
<%- klass.includes.each do |inc| %>
16+
<%- unless String === inc.module then %>
17+
<li><a class="include" href="<%= klass.aref_to inc.module.path %>"><%= inc.module.full_name %></a></li>
18+
<%- else %>
19+
<li><span class="include"><%= inc.name %></span></li>
20+
<%- end %>
21+
<%- end %>
22+
</ul>
23+
</details>
1424
</div>
1525
<%- end %>

‎lib/rdoc/generator/template/aliki/_sidebar_methods.rhtml‎

Lines changed: 32 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,41 @@
11
<% if (class_methods = klass.class_method_list.sort).any? %>
22
<div class="nav-section">
3-
<h3>Class Methods</h3>
4-
<ul class="link-list" role="directory">
5-
<%- class_methods.each do |meth| %>
6-
<li <%- if meth.calls_super %>class="calls-super" <%- end %>><a href="#<%= meth.aref %>"><%= h meth.name -%></a></li>
7-
<%- end %>
8-
</ul>
3+
<details class="nav-section-collapsible" open>
4+
<summary class="nav-section-header">
5+
<span class="nav-section-icon">
6+
<svg><use href="#icon-class-methods"></use></svg>
7+
</span>
8+
<span class="nav-section-title">Class Methods</span>
9+
<span class="nav-section-chevron">
10+
<svg><use href="#icon-chevron"></use></svg>
11+
</span>
12+
</summary>
13+
<ul class="nav-list" role="directory">
14+
<%- class_methods.each do |meth| %>
15+
<li <%- if meth.calls_super %>class="calls-super" <%- end %>><a href="#<%= meth.aref %>"><%= h meth.name -%></a></li>
16+
<%- end %>
17+
</ul>
18+
</details>
919
</div>
1020
<% end %>
1121

1222
<% if (instance_methods = klass.instance_methods.sort).any? %>
1323
<div class="nav-section">
14-
<h3>Instance Methods</h3>
15-
<ul class="link-list" role="directory">
16-
<%- instance_methods.each do |meth| %>
17-
<li <%- if meth.calls_super %>class="calls-super" <%- end %>><a href="#<%= meth.aref %>"><%= h meth.name -%></a></li>
18-
<%- end %>
19-
</ul>
24+
<details class="nav-section-collapsible" open>
25+
<summary class="nav-section-header">
26+
<span class="nav-section-icon">
27+
<svg><use href="#icon-instance-methods"></use></svg>
28+
</span>
29+
<span class="nav-section-title">Instance Methods</span>
30+
<span class="nav-section-chevron">
31+
<svg><use href="#icon-chevron"></use></svg>
32+
</span>
33+
</summary>
34+
<ul class="nav-list" role="directory">
35+
<%- instance_methods.each do |meth| %>
36+
<li <%- if meth.calls_super %>class="calls-super" <%- end %>><a href="#<%= meth.aref %>"><%= h meth.name -%></a></li>
37+
<%- end %>
38+
</ul>
39+
</details>
2040
</div>
2141
<% end %>

0 commit comments

Comments
 (0)