Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit c37f669

Browse files
berezinantberezinant
committedDec 9, 2024··
feat: reworked footer
1 parent 2b63314 commit c37f669

File tree

16 files changed

+268
-87
lines changed

16 files changed

+268
-87
lines changed
 

‎dokka-subprojects/plugin-base-frontend/src/main/ui-kit/_assets/go-to-top-icon.svg

+4
Loading

‎dokka-subprojects/plugin-base-frontend/src/main/ui-kit/footer/index.ts

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
/*
2+
* Copyright 2014-2024 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license.
3+
*/
4+
import './styles.scss';

‎dokka-subprojects/plugin-base-frontend/src/main/ui-kit/footer/styles.scss

+83
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
/*!
2+
* Copyright 2014-2024 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license.
3+
*/
4+
@import '../_tokens/index';
5+
6+
.footer {
7+
position: relative;
8+
9+
display: flex;
10+
align-items: center;
11+
justify-content: space-between;
12+
13+
min-height: var(--footer-height);
14+
margin-top: auto;
15+
16+
padding: 0 var(--size-m3);
17+
18+
letter-spacing: 0.15px;
19+
20+
color: var(--color-text-light);
21+
background-color: var(--footer-background);
22+
23+
font: var(--font-text-s);
24+
25+
&--button {
26+
z-index: 0;
27+
28+
display: inline-flex;
29+
align-items: center;
30+
31+
flex-shrink: 0;
32+
justify-content: center;
33+
34+
width: 40px;
35+
height: 40px;
36+
padding: 0;
37+
38+
cursor: pointer;
39+
40+
border: none;
41+
border-radius: var(--size-s1);
42+
background-color: transparent;
43+
background-repeat: no-repeat;
44+
background-position: 50% 50%;
45+
background-size: 24px 24px;
46+
47+
font-size: 0;
48+
line-height: 0;
49+
50+
@media (hover: hover) {
51+
&:hover {
52+
background-color: var(--color-b08);
53+
}
54+
}
55+
56+
&:active {
57+
background-color: var(--color-w10);
58+
}
59+
60+
&:focus-visible {
61+
outline: var(--focus-outline);
62+
}
63+
64+
@media (width < $breakpoint-desktop-min) {
65+
width: 52px;
66+
height: 52px;
67+
}
68+
69+
&_go-to-top {
70+
background-image: url('../_assets/go-to-top-icon.svg');
71+
}
72+
}
73+
74+
&--link {
75+
color: inherit;
76+
77+
border-bottom: 1px solid var(--color-text-light);
78+
}
79+
80+
&--content {
81+
text-align: right;
82+
}
83+
}

‎dokka-subprojects/plugin-base-frontend/src/main/ui-kit/index.ts

+2
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import * as button from './button/index';
55
import * as checkbox from './checkbox/index';
66
import * as dropdown from './dropdown/index';
77
import * as filterSection from './filter-section/index';
8+
import * as footer from './footer/index';
89
import * as icon from './icon/index';
910
import * as libraryName from './library-name/index';
1011
import * as libraryVersion from './library-version/index';
@@ -23,6 +24,7 @@ export {
2324
checkbox,
2425
dropdown,
2526
filterSection,
27+
footer,
2628
icon,
2729
libraryName,
2830
libraryVersion,

‎dokka-subprojects/plugin-base-frontend/src/main/ui-kit/navbar-button/styles.scss

+4
Original file line numberDiff line numberDiff line change
@@ -85,3 +85,7 @@
8585

8686
background-image: url('../_assets/burger.svg');
8787
}
88+
89+
.navigation-controls--btn_go-to-top {
90+
background-image: url('../_assets/go-to-top-icon.svg');
91+
}

‎dokka-subprojects/plugin-base/src/main/kotlin/org/jetbrains/dokka/base/renderers/html/htmlPreprocessors.kt

+1-2
Original file line numberDiff line numberDiff line change
@@ -123,6 +123,7 @@ public object AssetsInstaller : PageTransformer {
123123
"ui-kit/assets/field-variable.svg",
124124
"ui-kit/assets/filter.svg",
125125
"ui-kit/assets/function.svg",
126+
"ui-kit/assets/go-to-top-icon.svg",
126127
"ui-kit/assets/homepage.svg",
127128
"ui-kit/assets/interface-kotlin.svg",
128129
"ui-kit/assets/interface.svg",
@@ -135,8 +136,6 @@ public object AssetsInstaller : PageTransformer {
135136
"images/anchor-copy-button.svg",
136137
"images/copy-icon.svg",
137138
"images/copy-successful-icon.svg",
138-
"images/footer-go-to-link.svg",
139-
"images/go-to-top-icon.svg",
140139
"images/logo-icon.svg",
141140
)
142141

‎dokka-subprojects/plugin-base/src/main/resources/dokka/images/footer-go-to-link.svg

-3
This file was deleted.

‎dokka-subprojects/plugin-base/src/main/resources/dokka/images/go-to-top-icon.svg

-4
This file was deleted.

‎dokka-subprojects/plugin-base/src/main/resources/dokka/styles/style.css

-63
Original file line numberDiff line numberDiff line change
@@ -872,66 +872,3 @@ Just in case of possible performance degradation it excluding tabs with briefs o
872872
div.runnablesample {
873873
height: fit-content;
874874
}
875-
876-
/* --- footer --- */
877-
.footer {
878-
clear: both;
879-
display: flex;
880-
align-items: center;
881-
position: relative;
882-
min-height: var(--footer-height);
883-
font-size: 12px;
884-
line-height: 16px;
885-
letter-spacing: 0.2px;
886-
color: var(--footer-font-color);
887-
margin-top: auto;
888-
background-color: var(--footer-background);
889-
}
890-
891-
.footer--button {
892-
display: flex;
893-
align-items: center;
894-
justify-content: center;
895-
width: 40px;
896-
height: 40px;
897-
border-radius: 50%;
898-
background-color: var(--footer-go-to-top-color);
899-
background-repeat: no-repeat;
900-
background-position: 50% 50%;
901-
padding: 0;
902-
border: none;
903-
cursor: pointer;
904-
font-size: 0;
905-
line-height: 0;
906-
transition: background-color 200ms ease-in-out;
907-
will-change: background-color;
908-
}
909-
910-
.footer--button:hover {
911-
opacity: 0.9;
912-
}
913-
914-
.footer--button_go-to-top {
915-
background-image: url("../images/go-to-top-icon.svg");
916-
margin-left: var(--horizontal-spacing-for-content);
917-
margin-right: 8px;
918-
}
919-
920-
.footer--link {
921-
display: inline-flex;
922-
align-items: center;
923-
color: var(--breadcrumb-font-color);
924-
}
925-
926-
.footer--link_external:after {
927-
content: '';
928-
width: 12px;
929-
height: 12px;
930-
margin-left: 4px;
931-
margin-right: var(--horizontal-spacing-for-content);
932-
background-image: url("../images/footer-go-to-link.svg");
933-
background-repeat: no-repeat;
934-
background-position: 50% 50%;
935-
}
936-
937-
/* /--- footer --- */

‎dokka-subprojects/plugin-base/src/main/resources/dokka/templates/includes/footer.ftl

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
<#macro display>
22
<div class="footer">
33
<a href="#content" id="go-to-top-link" class="footer--button footer--button_go-to-top"></a>
4-
<span>${footerMessage}</span>
5-
<span class="pull-right">
4+
<div class="footer--content">
65
<span>Generated by </span>
76
<a class="footer--link footer--link_external" href="https://github.com/Kotlin/dokka">
8-
<span>dokka</span>
7+
Dokka
98
</a>
10-
</span>
9+
<div>${footerMessage}</div>
10+
</div>
1111
</div>
1212
</#macro>

‎dokka-subprojects/plugin-base/src/main/resources/dokka/templates/includes/header.ftl

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<@template_cmd name="pathToRoot">
55
<a class="library-name--link" href="${pathToRoot}index.html">
66
<@template_cmd name="projectName">
7-
${projectName}
7+
${projectName} project name with a very long text
88
</@template_cmd>
99
</a>
1010
</@template_cmd>

‎dokka-subprojects/plugin-base/src/main/resources/dokka/ui-kit/ui-kit.css

+149
Original file line numberDiff line numberDiff line change
@@ -750,6 +750,151 @@
750750
--rotate-transition:transform 200ms ease-in-out;
751751
}
752752

753+
.footer {
754+
align-items: center;
755+
background-color: var(--footer-background);
756+
color: rgba(0, 0, 0, 0.7);
757+
color: var(--color-text-light);
758+
display: flex;
759+
font: 400 14px/20px JetBrains Sans, Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, Oxygen, Droid Sans, Helvetica Neue, Arial;
760+
font: var(--font-text-s);
761+
justify-content: space-between;
762+
letter-spacing: 0.15px;
763+
margin-top: auto;
764+
min-height: var(--footer-height);
765+
padding: 0 48px;
766+
padding: 0 var(--size-m3);
767+
position: relative;
768+
}
769+
770+
.footer--button {
771+
align-items: center;
772+
background-color: transparent;
773+
background-position: 50% 50%;
774+
background-repeat: no-repeat;
775+
background-size: 24px 24px;
776+
border: none;
777+
border-radius: 4px;
778+
border-radius: var(--size-s1);
779+
cursor: pointer;
780+
display: inline-flex;
781+
flex-shrink: 0;
782+
font-size: 0;
783+
height: 40px;
784+
justify-content: center;
785+
line-height: 0;
786+
padding: 0;
787+
width: 40px;
788+
z-index: 0;
789+
}
790+
791+
@media (hover: hover) {
792+
.footer--button:hover {
793+
background-color: rgba(0, 0, 0, 0.08);
794+
background-color: var(--color-b08);
795+
}
796+
}
797+
.footer--button:active {
798+
background-color: hsla(0, 0%, 100%, 0.1);
799+
background-color: var(--color-w10);
800+
}
801+
802+
.footer--button.focus-visible {
803+
outline: var(--focus-outline);
804+
}
805+
806+
.footer--button:focus-visible {
807+
outline: var(--focus-outline);
808+
}
809+
810+
@media (max-width: 899px) {
811+
.footer--button {
812+
height: 52px;
813+
width: 52px;
814+
}
815+
}
816+
.footer--button_go-to-top {
817+
background-image: url(assets/go-to-top-icon.svg);
818+
}
819+
820+
.footer--link {
821+
border-bottom: 1px solid rgba(0, 0, 0, 0.7);
822+
border-bottom: 1px solid var(--color-text-light);
823+
color: inherit;
824+
}
825+
826+
.footer--content {
827+
text-align: right;
828+
}
829+
:root {
830+
--breakpoint-desktop-min:900px;
831+
--breakpoint-tablet-max:899px;
832+
--breakpoint-tablet-min:440px;
833+
--breakpoint-mobile-max:439px;
834+
--breakpoint-mobile-min:360px;
835+
--color-key-blue:#307fff;
836+
--color-key-blue-50:rgba(48,127,255,.5);
837+
--color-background-nav:#27282c;
838+
--color-background-nav-dt:#323237;
839+
--color-background-page:#fff;
840+
--color-background-page-dt:#262628;
841+
--color-background-footer:#ebebeb;
842+
--color-background-footer-dt:#323237;
843+
--color-text:#000;
844+
--color-text-dt:hsla(0,0%,100%,.96);
845+
--color-text-light:rgba(0,0,0,.7);
846+
--color-text-light-dt:hsla(0,0%,100%,.7);
847+
--color-w05:hsla(0,0%,100%,.05);
848+
--color-w08:hsla(0,0%,100%,.08);
849+
--color-w10:hsla(0,0%,100%,.1);
850+
--color-w16:hsla(0,0%,100%,.16);
851+
--color-w50:hsla(0,0%,100%,.5);
852+
--color-w70:hsla(0,0%,100%,.7);
853+
--color-w80:hsla(0,0%,100%,.8);
854+
--color-w100:#fff;
855+
--color-b05:rgba(0,0,0,.05);
856+
--color-b08:rgba(0,0,0,.08);
857+
--color-b20:rgba(0,0,0,.2);
858+
--color-b50:rgba(0,0,0,.5);
859+
--color-b70:rgba(0,0,0,.7);
860+
--color-cd-punctuation:#999;
861+
--color-cd-keyword:#0033b3;
862+
--color-cd-keyword-alternative:#cc7832;
863+
--color-cd-builtin:#067d17;
864+
--color-cd-builtin-alternative:#e7bf6a;
865+
--color-cd-function:#00627a;
866+
--color-cd-function-alternative:#ffc66d;
867+
--color-cd-operator:#9a6e3a;
868+
--color-cd-operator-alternative:#a9b7c6;
869+
--color-cd-body:#000;
870+
--color-cd-body-alternative:#a9b7c6;
871+
--color-generic:#539df3;
872+
--color-jvm:#4dbb5f;
873+
--color-js:#ffc700;
874+
--color-wasm:#fff;
875+
--size-s1:4px;
876+
--size-s2:8px;
877+
--size-s3:16px;
878+
--size-m1:24px;
879+
--size-m2:32px;
880+
--size-m3:48px;
881+
--size-l1:64px;
882+
--size-l2:72px;
883+
--size-ta1:40px;
884+
--size-ta2:52px;
885+
--font-family-default:JetBrains Sans,Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Droid Sans,Helvetica Neue,Arial,sans-serif;
886+
--font-family-mono:JetBrains Mono,SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;
887+
--font-h1:600 44px/44px var(--font-family-default);
888+
--font-h2:600 32px/32px var(--font-family-default);
889+
--font-h3:600 24px/24px var(--font-family-default);
890+
--font-h4:600 16px/24px var(--font-family-default);
891+
--font-text-m:400 16px/24px var(--font-family-default);
892+
--font-text-s:400 14px/20px var(--font-family-default);
893+
--font-code:400 16px/24px var(--font-family-mono);
894+
--hover-transition:background-color 200ms ease-in-out;
895+
--rotate-transition:transform 200ms ease-in-out;
896+
}
897+
753898
.ui-kit-icon {
754899
background-color: transparent;
755900
background-position: 50% 50%;
@@ -1235,6 +1380,10 @@
12351380
background-image: url(assets/burger.svg);
12361381
margin-left: auto;
12371382
}
1383+
1384+
.navigation-controls--btn_go-to-top {
1385+
background-image: url(assets/go-to-top-icon.svg);
1386+
}
12381387
:root {
12391388
--breakpoint-desktop-min:900px;
12401389
--breakpoint-tablet-max:899px;

‎dokka-subprojects/plugin-base/src/main/resources/dokka/ui-kit/ui-kit.min.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dokka-subprojects/plugin-base/src/main/resources/dokka/ui-kit/ui-kit.min.js

+2-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dokka-subprojects/plugin-base/src/test/kotlin/renderers/html/NavigationIconTest.kt

+9-8
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ class NavigationIconTest : BaseAbstractTest() {
4141
.filterKeys { it.startsWith("ui-kit/assets") }
4242
.keys.sorted()
4343

44-
assertEquals(25, navIconAssets.size)
44+
assertEquals(26, navIconAssets.size)
4545
assertEquals("ui-kit/assets/abstract-class-kotlin.svg", navIconAssets[0])
4646
assertEquals("ui-kit/assets/abstract-class.svg", navIconAssets[1])
4747
assertEquals("ui-kit/assets/annotation-kotlin.svg", navIconAssets[2])
@@ -60,13 +60,14 @@ class NavigationIconTest : BaseAbstractTest() {
6060
assertEquals("ui-kit/assets/field-variable.svg", navIconAssets[15])
6161
assertEquals("ui-kit/assets/filter.svg", navIconAssets[16])
6262
assertEquals("ui-kit/assets/function.svg", navIconAssets[17])
63-
assertEquals("ui-kit/assets/homepage.svg", navIconAssets[18])
64-
assertEquals("ui-kit/assets/interface-kotlin.svg", navIconAssets[19])
65-
assertEquals("ui-kit/assets/interface.svg", navIconAssets[20])
66-
assertEquals("ui-kit/assets/object.svg", navIconAssets[21])
67-
assertEquals("ui-kit/assets/placeholder.svg", navIconAssets[22])
68-
assertEquals("ui-kit/assets/theme-toggle.svg", navIconAssets[23])
69-
assertEquals("ui-kit/assets/typealias-kotlin.svg", navIconAssets[24])
63+
assertEquals("ui-kit/assets/go-to-top-icon.svg", navIconAssets[18])
64+
assertEquals("ui-kit/assets/homepage.svg", navIconAssets[19])
65+
assertEquals("ui-kit/assets/interface-kotlin.svg", navIconAssets[20])
66+
assertEquals("ui-kit/assets/interface.svg", navIconAssets[21])
67+
assertEquals("ui-kit/assets/object.svg", navIconAssets[22])
68+
assertEquals("ui-kit/assets/placeholder.svg", navIconAssets[23])
69+
assertEquals("ui-kit/assets/theme-toggle.svg", navIconAssets[24])
70+
assertEquals("ui-kit/assets/typealias-kotlin.svg", navIconAssets[25])
7071
}
7172
}
7273
}

0 commit comments

Comments
 (0)
Please sign in to comment.