Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit fa53db2

Browse files
jotheprojothepro
committed
improved tabs extension
- animated tab transitions - fixed height for all tab containers - improved visual design
1 parent 3831e5c commit fa53db2

File tree

6 files changed

+298
-277
lines changed

6 files changed

+298
-277
lines changed

‎README.md‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -87,15 +87,11 @@ You can even install the theme system-wide by running `make install`. The files
8787

8888
There is two layout options. Choose one of them and configure Doxygen accordingly:
8989

90-
<div class="darkmode_inverted_image">
91-
92-
![Available theme variants](img/theme-variants.drawio.svg)
93-
94-
</div>
95-
9690
<div class="tabbed">
9791

98-
- <b class="tab-title">1️⃣ Base Theme </b>
92+
- <b class="tab-title">Base Theme</b><div class="darkmode_inverted_image">
93+
![](img/theme-variants-base.drawio.svg){}
94+
</div>
9995
Comes with the typical Doxygen titlebar. Optionally the treeview in the sidebar can be enabled.
10096

10197
Required files: `doxygen-awesome.css`
@@ -109,7 +105,9 @@ There is two layout options. Choose one of them and configure Doxygen accordingl
109105
HTML_COLORSTYLE = LIGHT # required with Doxygen >= 1.9.5
110106
```
111107
112-
- <b class="tab-title">2️⃣ Sidebar-Only Theme </b>
108+
- <b class="tab-title">Sidebar-Only Theme</b><div class="darkmode_inverted_image">
109+
![](img/theme-variants-sidebar-only.drawio.svg)
110+
</div>
113111
Hides the top titlebar to give more space to the content. The treeview must be enabled in order for this theme to work.
114112
115113
Required files: `doxygen-awesome.css`, `doxygen-awesome-sidebar-only.css`
@@ -127,6 +125,8 @@ There is two layout options. Choose one of them and configure Doxygen accordingl
127125
128126
</div>
129127
128+
<br>
129+
130130
**Caution**:
131131
- This theme is not compatible with the `FULL_SIDEBAR = YES` option provided by Doxygen!
132132
- `HTML_COLORSTYLE` must be set to `LIGHT` since Doxygen 1.9.5!

‎doxygen-awesome-tabs.js‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,13 +32,14 @@ class DoxygenAwesomeTabs {
3232
static init() {
3333
window.addEventListener("load", () => {
3434
document.querySelectorAll(".tabbed:not(:empty)").forEach((tabbed, tabbedIndex) => {
35-
let tabLinkList = []
35+
let tabLinkList = []
3636
tabbed.querySelectorAll("li").forEach((tab, tabIndex) => {
3737
tab.id = "tab_" + tabbedIndex + "_" + tabIndex
3838
let header = tab.querySelector(".tab-title")
3939
let tabLink = document.createElement("button")
4040
tabLink.classList.add("tab-button")
4141
tabLink.appendChild(header)
42+
header.title = header.textContent
4243
tabLink.addEventListener("click", () => {
4344
tabbed.querySelectorAll("li").forEach((tab) => {
4445
tab.classList.remove("selected")
@@ -64,7 +65,26 @@ class DoxygenAwesomeTabs {
6465
})
6566
tabsOverviewContainer.appendChild(tabsOverview)
6667
tabbed.before(tabsOverviewContainer)
68+
69+
function resize() {
70+
let maxTabHeight = 0
71+
tabbed.querySelectorAll("li").forEach((tab, tabIndex) => {
72+
let visibility = tab.style.display
73+
tab.style.display = "block"
74+
maxTabHeight = Math.max(tab.offsetHeight, maxTabHeight)
75+
tab.style.display = visibility
76+
})
77+
tabbed.style.height = `${maxTabHeight + 10}px`
78+
}
79+
80+
resize()
81+
new ResizeObserver(resize).observe(tabbed)
6782
})
6883
})
84+
85+
}
86+
87+
static resize(tabbed) {
88+
6989
}
7090
}

‎doxygen-awesome.css‎

Lines changed: 50 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -169,6 +169,8 @@ html {
169169
--webkit-scrollbar-size: 7px;
170170
--webkit-scrollbar-padding: 4px;
171171
--webkit-scrollbar-color: var(--separator-color);
172+
173+
--animation-duration: .12s
172174
}
173175

174176
@media screen and (max-width: 767px) {
@@ -1174,7 +1176,7 @@ div.toc li a.aboveActive {
11741176
margin-right: var(--spacing-small);
11751177
margin-bottom: calc(var(--navigation-font-size) / 4);
11761178
transform: rotate(-90deg);
1177-
transition: transform 0.25s ease-out;
1179+
transition: transform var(--animation-duration) ease-out;
11781180
}
11791181

11801182
div.contents .toc.interactive.open > h3::before {
@@ -1231,9 +1233,13 @@ div.fragment, pre.fragment {
12311233
.contents > div.fragment,
12321234
.textblock > div.fragment,
12331235
.textblock > pre.fragment,
1236+
.textblock > .tabbed > ul > li > div.fragment,
1237+
.textblock > .tabbed > ul > li > pre.fragment,
12341238
.contents > .doxygen-awesome-fragment-wrapper > div.fragment,
12351239
.textblock > .doxygen-awesome-fragment-wrapper > div.fragment,
1236-
.textblock > .doxygen-awesome-fragment-wrapper > pre.fragment {
1240+
.textblock > .doxygen-awesome-fragment-wrapper > pre.fragment,
1241+
.textblock > .tabbed > ul > li > .doxygen-awesome-fragment-wrapper > div.fragment,
1242+
.textblock > .tabbed > ul > li > .doxygen-awesome-fragment-wrapper > pre.fragment {
12371243
margin: var(--spacing-medium) calc(0px - var(--spacing-large));
12381244
border-radius: 0;
12391245
border-left: 0;
@@ -1867,7 +1873,7 @@ div.dynheader img[src="closed.png"] {
18671873
display: block;
18681874
float: left;
18691875
margin-left: -10px;
1870-
transition: transform 0.25s ease-out;
1876+
transition: transform var(--animation-duration) ease-out;
18711877
}
18721878

18731879
table.memberdecls img {
@@ -2345,7 +2351,7 @@ doxygen-awesome-dark-mode-toggle {
23452351
}
23462352

23472353
doxygen-awesome-dark-mode-toggle > svg {
2348-
transition: transform .1s ease-in-out;
2354+
transition: transform var(--animation-duration) ease-in-out;
23492355
}
23502356

23512357
doxygen-awesome-dark-mode-toggle:active > svg {
@@ -2430,7 +2436,7 @@ a.anchorlink {
24302436
text-decoration: none;
24312437
opacity: .15;
24322438
display: none;
2433-
transition: opacity .1s ease-in-out, color .1s ease-in-out;
2439+
transition: opacity var(--animation-duration) ease-in-out, color var(--animation-duration) ease-in-out;
24342440
}
24352441

24362442
a.anchorlink svg {
@@ -2454,15 +2460,10 @@ h2:hover a.anchorlink, h1:hover a.anchorlink, h3:hover a.anchorlink, h4:hover a.
24542460
Optional tab feature
24552461
*/
24562462

2457-
.tabbed {
2458-
margin: var(--spacing-medium) auto;
2459-
}
2460-
24612463
.tabbed ul {
24622464
padding-inline-start: 0px;
24632465
margin: 0;
24642466
padding: var(--spacing-small) 0;
2465-
border-bottom: 1px solid var(--separator-color);
24662467
}
24672468

24682469
.tabbed li {
@@ -2485,24 +2486,46 @@ h2:hover a.anchorlink, h1:hover a.anchorlink, h3:hover a.anchorlink, h4:hover a.
24852486
flex-direction: row;
24862487
}
24872488

2489+
@media screen and (max-width: 900px) {
2490+
.tabs-overview-container {
2491+
margin: 0 calc(0px - var(--spacing-large));
2492+
}
2493+
.tabs-overview {
2494+
padding: 0 var(--spacing-large)
2495+
}
2496+
}
2497+
24882498
.tabs-overview button.tab-button {
24892499
color: var(--page-foreground-color);
24902500
margin: 0;
24912501
border: none;
24922502
background: transparent;
2493-
padding: var(--spacing-small) 0;
2503+
padding: calc(var(--spacing-large) / 2) 0;
24942504
display: inline-block;
24952505
font-size: var(--page-font-size);
24962506
cursor: pointer;
24972507
box-shadow: 0 1px 0 0 var(--separator-color);
24982508
position: relative;
2509+
2510+
-webkit-tap-highlight-color: transparent;
2511+
}
2512+
2513+
.tabs-overview button.tab-button .tab-title::before {
2514+
display: block;
2515+
content: attr(title);
2516+
font-weight: 600;
2517+
height: 0;
2518+
overflow: hidden;
2519+
visibility: hidden;
24992520
}
25002521

25012522
.tabs-overview button.tab-button .tab-title {
25022523
float: left;
25032524
white-space: nowrap;
2504-
padding: var(--spacing-small) var(--spacing-large);
2525+
font-weight: normal;
2526+
padding: calc(var(--spacing-large) / 2) var(--spacing-large);
25052527
border-radius: var(--border-radius-medium);
2528+
transition: background-color var(--animation-duration) ease-in-out, font-weight var(--animation-duration) ease-in-out;
25062529
}
25072530

25082531
.tabs-overview button.tab-button:not(:last-child) .tab-title {
@@ -2514,18 +2537,27 @@ h2:hover a.anchorlink, h1:hover a.anchorlink, h3:hover a.anchorlink, h4:hover a.
25142537
box-shadow: none;
25152538
}
25162539

2517-
.tabs-overview button.tab-button.active {
2518-
color: var(--primary-color);
2540+
.tabs-overview button.tab-button.active .tab-title {
2541+
font-weight: 600;
25192542
}
25202543

2521-
.tabs-overview button.tab-button.active::after {
2544+
.tabs-overview button.tab-button::after {
25222545
content: '';
25232546
display: block;
25242547
position: absolute;
2525-
left: 0px;
2548+
left: 0;
25262549
bottom: 0;
2527-
right: 0px;
2528-
height: 3px;
2550+
right: 0;
2551+
height: 0;
2552+
width: 0%;
2553+
margin: 0 auto;
25292554
border-radius: var(--border-radius-small) var(--border-radius-small) 0 0;
25302555
background-color: var(--primary-color);
2556+
transition: width var(--animation-duration) ease-in-out, height var(--animation-duration) ease-in-out;
2557+
}
2558+
2559+
.tabs-overview button.tab-button.active::after {
2560+
width: 100%;
2561+
box-sizing: border-box;
2562+
height: 3px;
25312563
}

‎img/theme-variants-base.drawio.svg‎

Lines changed: 117 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)