Skip to content

Improve method source toggling #1176

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
merged 9 commits into from
Oct 10, 2024
Merged

Improve method source toggling #1176

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
6ea31eb
Move method source block to the top
st0012 Sep 8, 2024
86039f9
Update method toggle's interface
st0012 Sep 8, 2024
daf6b06
Use details tag for method toggling
st0012 Sep 8, 2024
1dd0278
Rename method-click-advice to method-source-toggle
st0012 Sep 8, 2024
e034046
Improve method controls' display on mobile
st0012 Sep 8, 2024
58dfe05
Add "Example" label to example code blocks
st0012 Sep 12, 2024
ae94708
Revert "Add "Example" label to example code blocks"
st0012 Oct 3, 2024
87c4307
Give source code blocks a different background color
st0012 Oct 3, 2024
fd9fbcf
Change targeted method's highlighting color to work better with the n…
st0012 Oct 3, 2024
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
55 changes: 28 additions & 27 deletions lib/rdoc/generator/template/darkfish/class.rhtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,35 +101,42 @@
<div id="<%= method.aref %>" class="method-detail <%= method.is_alias_for ? "method-alias" : '' %>">
<div class="method-header">
<%- if (call_seq = method.call_seq) then -%>
<%- call_seq.strip.split("\n").each_with_index do |call_seq, i| -%>
<div class="method-heading">
<span class="method-callseq">
<%= h(call_seq.strip.
gsub( /^\w+\./m, '')).
gsub(/(.*)[-=]&gt;/, '\1&rarr;') %>
</span>
<%- if i == 0 and method.token_stream then -%>
<span class="method-click-advice">click to toggle source</span>
<%- call_seq.strip.split("\n").each_with_index do |call_seq, i| -%>
<div class="method-heading">
<span class="method-callseq">
<%= h(call_seq.strip.
gsub( /^\w+\./m, '')).
gsub(/(.*)[-=]&gt;/, '\1&rarr;') %>
</span>
</div>
<%- end -%>
</div>
<%- end -%>
<%- elsif method.has_call_seq? then -%>
<div class="method-heading">
<span class="method-name"><%= h method.name %></span>
</div>
<div class="method-heading">
<span class="method-name"><%= h method.name %></span>
</div>
<%- else -%>
<div class="method-heading">
<span class="method-name"><%= h method.name %></span><span
class="method-args"><%= h method.param_seq %></span>
<%- if method.token_stream then -%>
<span class="method-click-advice">click to toggle source</span>
<%- end -%>
</div>
<div class="method-heading">
<span class="method-name"><%= h method.name %></span>
<span class="method-args"><%= h method.param_seq %></span>
</div>
<%- end -%>
</div>

<%- if method.token_stream -%>
<div class="method-controls">
<details class="method-source-toggle">
<summary>Source</summary>
</details>
</div>
<%- end -%>

<%- unless method.skip_description? then -%>
<div class="method-description">
<%- if method.token_stream then -%>
<div class="method-source-code" id="<%= method.html_name %>-source">
<pre><%= method.markup_code %></pre>
</div>
<%- end -%>
<%- if method.comment then -%>
<%= method.description.strip %>
<%- else -%>
Expand All @@ -144,12 +151,6 @@
%>
</div>
<%- end -%>

<%- if method.token_stream then -%>
<div class="method-source-code" id="<%= method.html_name %>-source">
<pre><%= method.markup_code %></pre>
</div>
<%- end -%>
</div>
<%- end -%>

Expand Down
38 changes: 20 additions & 18 deletions lib/rdoc/generator/template/darkfish/css/rdoc.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
--link-hover-color: #25a28a; /* A slightly brighter teal-green */
--border-color: #e0e0e0;
--sidebar-text-color: #2c3e50; /* Dark blue-gray for contrast */
--source-code-background-color: #e8f0eb;

/* Font family variables */
--font-primary: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
Expand Down Expand Up @@ -596,6 +597,10 @@ main .method-source-code {
transition-timing-function: ease-in-out;
}

main .method-source-code pre {
background: var(--source-code-background-color);
}

main .method-source-code.active-menu {
visibility: visible;
max-height: 100vh;
Expand All @@ -608,12 +613,15 @@ main .method-description .method-calls-super {

main .method-detail {
margin-bottom: 2.5em;
cursor: pointer;
}

main .method-detail:target {
margin-left: -10px;
border-left: 10px solid #f1edba;
border-left: 10px solid var(--source-code-background-color);
}

main .method-header {
display: inline-block;
}

main .method-heading {
Expand All @@ -623,23 +631,12 @@ main .method-heading {
font-weight: bold;
color: var(--text-color);
}
main .method-heading :link,
main .method-heading :visited {
color: inherit;
}
main .method-click-advice {
position: absolute;
top: 2px;
right: 5px;
font-size: 12px;
color: #9b9877;
visibility: hidden;
padding-right: 20px;

main .method-controls {
line-height: 20px;
background: url(../images/zoom.png) no-repeat right top;
}
main .method-header:hover .method-click-advice {
visibility: visible;
float: right;
color: var(--secondary-color);
cursor: pointer;
}

main .method-alias .method-heading {
Expand Down Expand Up @@ -744,6 +741,11 @@ main .attribute-access-type {
overflow-x: auto;
white-space: nowrap;
}

main .method-controls {
margin-top: 10px;
float: none;
}
}
/* @end */

2 changes: 1 addition & 1 deletion lib/rdoc/generator/template/darkfish/js/darkfish.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ function showSource( e ) {
};

function hookSourceViews() {
document.querySelectorAll('.method-heading').forEach(function (codeObject) {
document.querySelectorAll('.method-source-toggle').forEach(function (codeObject) {
codeObject.addEventListener('click', showSource);
});
};
Expand Down