Skip to content

Improve main sidebar #1485

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tompng merged 4 commits into from
Dec 6, 2025
+524 −96
Merged

Improve main sidebar #1485

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
46dc18b
Redesign main sidebar and make them collapsible
st0012 Dec 4, 2025
c3387f5
Improve nested dropdown's style and animation
st0012 Dec 4, 2025
45e4ce5
Auto-collapse pages list in class/module pages
st0012 Dec 4, 2025
0f978f1
Small tweaks
st0012 Dec 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion lib/rdoc/generator/darkfish.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -314,6 +314,8 @@ def generate_index
# Generates a class file for +klass+

def generate_class(klass, template_file = nil)
# This is used to auto-collapse Pages section on class/module pages
@inside_class_file = true
current = klass

template_file ||= @template_dir + 'class.rhtml'
Expand All @@ -338,6 +340,8 @@ def generate_class(klass, template_file = nil)
here.local_variable_set(:asset_rel_prefix, asset_rel_prefix)
here
end
ensure
@inside_class_file = false
end

##
Expand Down Expand Up @@ -764,7 +768,7 @@ def generate_class_index_content(classes, rel_prefix)
end

def traverse_classes(klasses, grouped_classes, rel_prefix, solo = false)
content = +'<ul class="link-list">'
content = +'<ul class="link-list nav-list">'

klasses.each do |index_klass|
if children = grouped_classes[index_klass.full_name]
Expand Down
208 changes: 208 additions & 0 deletions lib/rdoc/generator/template/aliki/_icons.rhtml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,208 @@
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<!-- Chevron (right arrow) - used for expand/collapse -->
<symbol
id="icon-chevron"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<polyline points="9 18 15 12 9 6"></polyline>
</symbol>

<!-- File/Document - Pages section -->
<symbol
id="icon-file"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
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"
></path>

<polyline points="14 2 14 8 20 8"></polyline>
</symbol>

<!-- Layers/Stack - Classes and Modules section -->
<symbol
id="icon-layers"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<polygon points="12 2 2 7 12 12 22 7 12 2"></polygon>
<polyline points="2 17 12 22 22 17"></polyline>
<polyline points="2 12 12 17 22 12"></polyline>
</symbol>

<!-- Curly braces with C - Class Methods section -->
<symbol
id="icon-class-methods"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<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>
<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>

<text
x="12"
y="17"
text-anchor="middle"
font-size="13"
font-weight="bold"
fill="currentColor"
stroke="none"
>
C
</text>
</symbol>

<!-- Curly braces with I - Instance Methods section -->
<symbol
id="icon-instance-methods"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<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>
<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>

<text
x="12"
y="17"
text-anchor="middle"
font-size="13"
font-weight="bold"
fill="currentColor"
stroke="none"
>
I
</text>
</symbol>

<!-- Double chevrons up - Ancestors section -->
<symbol
id="icon-ancestors"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<polyline points="17 11 12 6 7 11"></polyline>
<polyline points="17 18 12 13 7 18"></polyline>
</symbol>

<!-- User with plus - Included Modules section -->
<symbol
id="icon-includes"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
<circle cx="8.5" cy="7" r="4"></circle>

<line
x1="20"
y1="8"
x2="20"
y2="14"
></line>

<line
x1="23"
y1="11"
x2="17"
y2="11"
></line>
</symbol>

<!-- User with check - Extended Modules section -->
<symbol
id="icon-extends"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
<circle cx="8.5" cy="7" r="4"></circle>
<polyline points="17 11 19 13 23 9"></polyline>
</symbol>

<!-- List - Sections section -->
<symbol
id="icon-list"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<line
x1="8"
y1="6"
x2="21"
y2="6"
></line>

<line
x1="8"
y1="12"
x2="21"
y2="12"
></line>

<line
x1="8"
y1="18"
x2="21"
y2="18"
></line>

<line
x1="3"
y1="6"
x2="3.01"
y2="6"
></line>

<line
x1="3"
y1="12"
x2="3.01"
y2="12"
></line>

<line
x1="3"
y1="18"
x2="3.01"
y2="18"
></line>
</symbol>
</svg>
14 changes: 12 additions & 2 deletions lib/rdoc/generator/template/aliki/_sidebar_ancestors.rhtml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,16 @@
<%- if klass.type == 'class' && (ancestors = klass.super_classes).any? %>
<div id="parent-class-section" class="nav-section">
<h3>Ancestors</h3>
<%= generate_ancestor_list(ancestors, klass) %>
<details class="nav-section-collapsible" open>
<summary class="nav-section-header">
<span class="nav-section-icon">
<svg><use href="#icon-ancestors"></use></svg>
</span>
<span class="nav-section-title">Ancestors</span>
<span class="nav-section-chevron">
<svg><use href="#icon-chevron"></use></svg>
</span>
</summary>
<%= generate_ancestor_list(ancestors, klass) %>
</details>
</div>
<%- end %>
14 changes: 12 additions & 2 deletions lib/rdoc/generator/template/aliki/_sidebar_classes.rhtml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,15 @@
<div id="classindex-section" class="nav-section">
<h3>Class and Module Index</h3>
<details class="nav-section-collapsible" open>
<summary class="nav-section-header">
<span class="nav-section-icon">
<svg><use href="#icon-layers"></use></svg>
</span>
<span class="nav-section-title">Classes and Modules</span>
<span class="nav-section-chevron">
<svg><use href="#icon-chevron"></use></svg>
</span>
</summary>

<%= generate_class_index_content(@classes, rel_prefix) %>
<%= generate_class_index_content(@classes, rel_prefix) %>
</details>
</div>
30 changes: 20 additions & 10 deletions lib/rdoc/generator/template/aliki/_sidebar_extends.rhtml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,25 @@
<%- unless klass.extends.empty? then %>
<div id="extends-section" class="nav-section">
<h3>Extended With Modules</h3>
<details class="nav-section-collapsible" open>
<summary class="nav-section-header">
<span class="nav-section-icon">
<svg><use href="#icon-extends"></use></svg>
</span>
<span class="nav-section-title">Extended With Modules</span>
<span class="nav-section-chevron">
<svg><use href="#icon-chevron"></use></svg>
</span>
</summary>

<ul class="link-list">
<%- klass.extends.each do |ext| %>
<%- unless String === ext.module then %>
<li><a class="extend" href="<%= klass.aref_to ext.module.path %>"><%= ext.module.full_name %></a></li>
<%- else %>
<li><span class="extend"><%= ext.name %></span></li>
<%- end %>
<%- end %>
</ul>
<ul class="nav-list">
<%- klass.extends.each do |ext| %>
<%- unless String === ext.module then %>
<li><a class="extend" href="<%= klass.aref_to ext.module.path %>"><%= ext.module.full_name %></a></li>
<%- else %>
<li><span class="extend"><%= ext.name %></span></li>
<%- end %>
<%- end %>
</ul>
</details>
</div>
<%- end %>
30 changes: 20 additions & 10 deletions lib/rdoc/generator/template/aliki/_sidebar_includes.rhtml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,25 @@
<%- unless klass.includes.empty? then %>
<div id="includes-section" class="nav-section">
<h3>Included Modules</h3>
<details class="nav-section-collapsible" open>
<summary class="nav-section-header">
<span class="nav-section-icon">
<svg><use href="#icon-includes"></use></svg>
</span>
<span class="nav-section-title">Included Modules</span>
<span class="nav-section-chevron">
<svg><use href="#icon-chevron"></use></svg>
</span>
</summary>

<ul class="link-list">
<%- klass.includes.each do |inc| %>
<%- unless String === inc.module then %>
<li><a class="include" href="<%= klass.aref_to inc.module.path %>"><%= inc.module.full_name %></a></li>
<%- else %>
<li><span class="include"><%= inc.name %></span></li>
<%- end %>
<%- end %>
</ul>
<ul class="nav-list">
<%- klass.includes.each do |inc| %>
<%- unless String === inc.module then %>
<li><a class="include" href="<%= klass.aref_to inc.module.path %>"><%= inc.module.full_name %></a></li>
<%- else %>
<li><span class="include"><%= inc.name %></span></li>
<%- end %>
<%- end %>
</ul>
</details>
</div>
<%- end %>
44 changes: 32 additions & 12 deletions lib/rdoc/generator/template/aliki/_sidebar_methods.rhtml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,41 @@
<% if (class_methods = klass.class_method_list.sort).any? %>
<div class="nav-section">
<h3>Class Methods</h3>
<ul class="link-list" role="directory">
<%- class_methods.each do |meth| %>
<li <%- if meth.calls_super %>class="calls-super" <%- end %>><a href="#<%= meth.aref %>"><%= h meth.name -%></a></li>
<%- end %>
</ul>
<details class="nav-section-collapsible" open>
<summary class="nav-section-header">
<span class="nav-section-icon">
<svg><use href="#icon-class-methods"></use></svg>
</span>
<span class="nav-section-title">Class Methods</span>
<span class="nav-section-chevron">
<svg><use href="#icon-chevron"></use></svg>
</span>
</summary>
<ul class="nav-list" role="directory">
<%- class_methods.each do |meth| %>
<li <%- if meth.calls_super %>class="calls-super" <%- end %>><a href="#<%= meth.aref %>"><%= h meth.name -%></a></li>
<%- end %>
</ul>
</details>
</div>
<% end %>

<% if (instance_methods = klass.instance_methods.sort).any? %>
<div class="nav-section">
<h3>Instance Methods</h3>
<ul class="link-list" role="directory">
<%- instance_methods.each do |meth| %>
<li <%- if meth.calls_super %>class="calls-super" <%- end %>><a href="#<%= meth.aref %>"><%= h meth.name -%></a></li>
<%- end %>
</ul>
<details class="nav-section-collapsible" open>
<summary class="nav-section-header">
<span class="nav-section-icon">
<svg><use href="#icon-instance-methods"></use></svg>
</span>
<span class="nav-section-title">Instance Methods</span>
<span class="nav-section-chevron">
<svg><use href="#icon-chevron"></use></svg>
</span>
</summary>
<ul class="nav-list" role="directory">
<%- instance_methods.each do |meth| %>
<li <%- if meth.calls_super %>class="calls-super" <%- end %>><a href="#<%= meth.aref %>"><%= h meth.name -%></a></li>
<%- end %>
</ul>
</details>
</div>
<% end %>
Loading