Skip to content
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

Design review fixes for UI #4019

Draft
wants to merge 9 commits into
base: master
Choose a base branch
from
Draft

Design review fixes for UI #4019

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
e922b17
fix: version button layout
berezinant Feb 3, 2025
55a1d20
fix: not active tag style in firefox
berezinant Feb 3, 2025
0a730c4
fix: removed unused assets copies
berezinant Feb 5, 2025
f81ff96
fix: proper hover for platform tags
berezinant Feb 5, 2025
37bdb86
fix: outline position for header elements
berezinant Feb 5, 2025
0ec867b
fix: dropdown list edge cases
berezinant Feb 11, 2025
38d1013
fix: selected option style in dropdown
berezinant Feb 13, 2025
191f159
fix: misc outline and focus fixes
berezinant Feb 13, 2025
77d46a8
fix: toc icons positioning
berezinant Feb 14, 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
3 changes: 3 additions & 0 deletions dokka-subprojects/plugin-base-frontend/src/main/components/search/search.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,9 @@ $secondary-font-color: rgba(255, 255, 255, 0.7);
#pages-search {
width: 52px;
height: 52px;

border-radius: 0;
outline-offset: -4px;
}
}

Expand Down
3 changes: 3 additions & 0 deletions dokka-subprojects/plugin-base-frontend/src/main/ui-kit/_assets/check.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions dokka-subprojects/plugin-base-frontend/src/main/ui-kit/_tokens/colors.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
:root {
// Interface
--color-key-blue: rgb(48, 127, 255); //#307FFF;
--color-key-blue-hover: #458cff;
--color-key-blue-50: rgb(48, 127, 255, 0.5);
--color-background-nav: rgb(39, 40, 44);
--color-background-nav-dt: rgb(50, 50, 55);
Expand Down
3 changes: 0 additions & 3 deletions ...a-subprojects/plugin-base-frontend/src/main/ui-kit/button/assets/arrow-down.svg
View file
Open in desktop

This file was deleted.

3 changes: 2 additions & 1 deletion dokka-subprojects/plugin-base-frontend/src/main/ui-kit/button/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,7 @@

&_dropdown {
padding: var(--size-s2);
padding-left: 12px;

font: var(--font-text-s);

Expand Down Expand Up @@ -103,7 +104,7 @@

&:hover,
.theme-dark &:hover {
background-color: lighten(rgb(48, 127, 255), 10%); // color-key-blue
background-color: var(--color-key-blue-hover);
}

&::after {
Expand Down
39 changes: 36 additions & 3 deletions dokka-subprojects/plugin-base-frontend/src/main/ui-kit/dropdown/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,9 +99,11 @@
&--option {
position: relative;

display: block;
display: flex;

align-items: center;

padding: var(--size-s2) var(--size-s3);
padding: var(--size-s2) 12px;

list-style-type: none;

Expand All @@ -114,6 +116,7 @@
background-color: var(--color-background-nav-dt);

font: var(--font-text-m);
gap: 8px;

&:hover {
background-color: lighten(rgb(50, 50, 55), 10%); // color-background-nav-dt
Expand All @@ -123,6 +126,8 @@
z-index: 1;

outline: var(--focus-outline);

outline-offset: -4px;
}

&:visited {
Expand All @@ -133,7 +138,7 @@
background-color: var(--color-key-blue);

&:hover {
background-color: lighten(rgb(48, 127, 255), 10%); // color-key-blue
background-color: var(--color-key-blue-hover);
}
}

Expand All @@ -144,6 +149,7 @@

&:focus-visible {
outline: var(--focus-outline);
outline-offset: -4px;
}
}

Expand All @@ -156,6 +162,26 @@
}
}

&--option-icon {
display: inline-block;

flex-shrink: 0;

width: var(--size-m1);
height: var(--size-m1);

&_selected {
background-image: url('../_assets/check.svg');
}
}

&--option-text {
display: inline-block;
overflow: hidden;

text-overflow: ellipsis;
}

&--overlay {
position: absolute;
z-index: 4;
Expand Down Expand Up @@ -211,5 +237,12 @@
margin-top: 12px;
}
}

& .button {
@media (width < $breakpoint-desktop-min) {
border-radius: 0;
outline-offset: -4px;
}
}
}
}
8 changes: 8 additions & 0 deletions dokka-subprojects/plugin-base-frontend/src/main/ui-kit/filter-section/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,13 +48,21 @@
}

&--dropdown-toggle {
position: relative;

background-image: url('../_assets/filter.svg');
background-repeat: no-repeat;
background-position: 50% 50%;

&::after {
display: none;
}

@media (width < $breakpoint-desktop-min) {
border-radius: 0;

outline-offset: -4px;
}
}
}
}
Expand Down
3 changes: 0 additions & 3 deletions dokka-subprojects/plugin-base-frontend/src/main/ui-kit/icon/assets/arrow-down.svg
View file
Open in desktop

This file was deleted.

3 changes: 0 additions & 3 deletions dokka-subprojects/plugin-base-frontend/src/main/ui-kit/icon/assets/placeholder.svg
View file
Open in desktop

This file was deleted.

5 changes: 5 additions & 0 deletions dokka-subprojects/plugin-base-frontend/src/main/ui-kit/library-name/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@
@import '../_tokens/index';

.library-name--link {
position: relative;

display: flex;
align-items: center;

Expand All @@ -24,6 +26,9 @@
height: 52px;

margin-left: 12px;

border-radius: 0;
outline-offset: -4px;
}
}

Expand Down
3 changes: 2 additions & 1 deletion dokka-subprojects/plugin-base-frontend/src/main/ui-kit/library-version/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,9 @@
align-items: center;

height: 52px;
padding-top: 0;

padding-left: 12px;
padding-left: 8px;

background-color: var(--color-text);
}
Expand Down
Empty file removed ...ubprojects/plugin-base-frontend/src/main/ui-kit/navbar-button/assets/burger.svg
View file
Open in desktop
Empty file.
Empty file removed ...ubprojects/plugin-base-frontend/src/main/ui-kit/navbar-button/assets/filter.svg
View file
Open in desktop
Empty file.
4 changes: 4 additions & 0 deletions dokka-subprojects/plugin-base-frontend/src/main/ui-kit/navbar-button/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,10 @@
@media (width < $breakpoint-desktop-min) {
width: 52px;
height: 52px;

border-radius: 0;

outline-offset: -4px;
}
}

Expand Down
25 changes: 22 additions & 3 deletions dokka-subprojects/plugin-base-frontend/src/main/ui-kit/platform-tag/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@
.platform-tag {
--platform-tag-color: #bababb;

position: relative;

padding: 10px 12px;

cursor: pointer;
Expand All @@ -20,9 +22,13 @@
}

button.platform-tag {
position: relative;

cursor: pointer;

&:focus-visible {
z-index: 1;

outline: var(--focus-outline);
}
}
Expand Down Expand Up @@ -72,8 +78,7 @@ button.platform-tag {

@media (hover: hover) {
.filter-section .platform-tag[data-active]:hover {
color: #fff;
background-color: rgba(186, 186, 187, 0.7);
background-image: linear-gradient(var(--color-b08), var(--color-b08), var(--color-b08));
}
}

Expand All @@ -83,10 +88,24 @@ button.platform-tag {
}

.filter-section .platform-tag:not([data-active]) {
text-decoration: line-through;
text-decoration: none;

color: var(--color-w50);
background-color: var(--color-w10);

&::after {
position: absolute;
z-index: 1;
top: 20px;
right: 12px;
left: 12px;

height: 1px;

content: '';

background-color: currentColor;
}
}

.platform-tags .platform-tag::before {
Expand Down
13 changes: 9 additions & 4 deletions dokka-subprojects/plugin-base-frontend/src/main/ui-kit/toc-tree/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@
position: absolute;

display: inline-flex;
align-items: center;
align-items: flex-start;
flex-shrink: 0;
justify-content: flex-end;

Expand All @@ -61,6 +61,9 @@
background-color: inherit;

&::after {
position: relative;
top: 8px;

width: 24px;
height: 24px;

Expand Down Expand Up @@ -164,13 +167,13 @@
display: grid;
grid-template-columns: 16px auto; /* first is the icon, then name */
grid-gap: 6px;

align-items: center;
}

&--icon {
width: 16px;
height: 16px;

line-height: 32px;
}

&--icon.class::before {
Expand Down Expand Up @@ -245,7 +248,7 @@
background-color: var(--color-key-blue);

&:hover {
background-color: #578af7;
background-color: var(--color-key-blue-hover);
}

&::after {
Expand All @@ -259,6 +262,8 @@

box-sizing: border-box;
width: var(--sidebar-width);
min-width: 200px;
max-width: 400px;

border-right: 1px solid rgba(39, 40, 44, 0.2);

Expand Down
1 change: 1 addition & 0 deletions .../plugin-base/src/main/kotlin/org/jetbrains/dokka/base/renderers/html/htmlPreprocessors.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,6 +111,7 @@ public object AssetsInstaller : PageTransformer {
"ui-kit/assets/annotation.svg",
"ui-kit/assets/arrow-down.svg",
"ui-kit/assets/burger.svg",
"ui-kit/assets/check.svg",
"ui-kit/assets/checkbox-off.svg",
"ui-kit/assets/checkbox-on.svg",
"ui-kit/assets/class-kotlin.svg",
Expand Down
2 changes: 1 addition & 1 deletion dokka-subprojects/plugin-base/src/main/resources/dokka/templates/includes/header.ftl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<#macro display>
<nav class="navigation theme-dark" id="navigation-wrapper">
<@template_cmd name="pathToRoot">
<a class="library-name--link" href="${pathToRoot}index.html">
<a class="library-name--link" href="${pathToRoot}index.html" tabindex="1">
<@template_cmd name="projectName">
${projectName}
</@template_cmd>
Expand Down
3 changes: 3 additions & 0 deletions dokka-subprojects/plugin-base/src/main/resources/dokka/ui-kit/assets/check.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Loading