From 07f5aa61cd2f17cd72940a01ff5d9c7734349ffe Mon Sep 17 00:00:00 2001 From: berezinant Date: Wed, 21 Aug 2024 10:01:14 +0200 Subject: [PATCH] feat: implemented checkbox --- .../src/main/ui-kit/_assets/checkbox-off.svg | 3 ++ .../src/main/ui-kit/_assets/checkbox-on.svg | 3 ++ .../src/main/ui-kit/checkbox/styles.scss | 34 +++++++++++++++---- .../main/ui-kit/dropdown/dropdown.stories.ftl | 25 +++++++++----- .../src/main/ui-kit/dropdown/index.ts | 4 +-- .../src/main/ui-kit/dropdown/styles.scss | 14 +------- .../base/renderers/html/htmlPreprocessors.kt | 2 ++ .../includes/source_set_selector.ftl | 33 ++++-------------- .../dokka/ui-kit/assets/checkbox-off.svg | 3 ++ .../dokka/ui-kit/assets/checkbox-on.svg | 3 ++ .../main/resources/dokka/ui-kit/ui-kit.css | 29 +++++++++------- .../resources/dokka/ui-kit/ui-kit.min.css | 4 +-- .../main/resources/dokka/ui-kit/ui-kit.min.js | 2 +- 13 files changed, 85 insertions(+), 74 deletions(-) create mode 100644 dokka-subprojects/plugin-base-frontend/src/main/ui-kit/_assets/checkbox-off.svg create mode 100644 dokka-subprojects/plugin-base-frontend/src/main/ui-kit/_assets/checkbox-on.svg create mode 100644 dokka-subprojects/plugin-base/src/main/resources/dokka/ui-kit/assets/checkbox-off.svg create mode 100644 dokka-subprojects/plugin-base/src/main/resources/dokka/ui-kit/assets/checkbox-on.svg diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/_assets/checkbox-off.svg b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/_assets/checkbox-off.svg new file mode 100644 index 0000000000..a5117e8d9a --- /dev/null +++ b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/_assets/checkbox-off.svg @@ -0,0 +1,3 @@ + + + diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/_assets/checkbox-on.svg b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/_assets/checkbox-on.svg new file mode 100644 index 0000000000..71891d57dd --- /dev/null +++ b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/_assets/checkbox-on.svg @@ -0,0 +1,3 @@ + + + diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/checkbox/styles.scss b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/checkbox/styles.scss index 45f8a7b4ad..17e10c3a3d 100644 --- a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/checkbox/styles.scss +++ b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/checkbox/styles.scss @@ -8,15 +8,35 @@ display: inline-block; - width: 18px; - height: 18px; - cursor: pointer; - input[type='checkbox'] { - width: 0; - height: 0; + &--input { + position: absolute; + appearance: none; + + visibility: hidden; + } + + &--icon { + position: absolute; + + width: var(--size-m1); + height: var(--size-m1); + + margin-left: calc(-1 * var(--size-m2)); + + background-image: url('../_assets/checkbox-off.svg'); + } + + &--input:checked + &--icon { + background-image: url('../_assets/checkbox-on.svg'); + } + + &--input:disabled + &--icon { + opacity: 0.2; + } - opacity: 0; + &--input:focus-visible { + outline: 4px solid var(--color-key-blue-05); } } diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/dropdown/dropdown.stories.ftl b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/dropdown/dropdown.stories.ftl index d3d17889f9..22818717b0 100644 --- a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/dropdown/dropdown.stories.ftl +++ b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/dropdown/dropdown.stories.ftl @@ -6,15 +6,22 @@ aria-expanded="false" > \ No newline at end of file diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/dropdown/index.ts b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/dropdown/index.ts index 4c11784dd2..4f68189244 100644 --- a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/dropdown/index.ts +++ b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/dropdown/index.ts @@ -53,14 +53,14 @@ document.addEventListener('DOMContentLoaded', () => { function onToggleOption(event: PointerEvent): void { const target = event.target as HTMLButtonElement; target.classList.toggle('dropdown--option_active'); - target.querySelector('.dropdown--checkbox')?.toggleAttribute('checked'); + target.querySelector('.checkbox--input')?.toggleAttribute('checked'); } function onToggleOptionByKey(event: KeyboardEvent): void { const target = event.target as HTMLButtonElement; if (event.key === 'Enter' || event.key === ' ') { target.classList.toggle('dropdown--option_active'); - target.querySelector('.dropdown--checkbox')?.toggleAttribute('checked'); + target.querySelector('.checkbox--input')?.toggleAttribute('checked'); } } diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/dropdown/styles.scss b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/dropdown/styles.scss index f7a3cdd25f..557fc0de19 100644 --- a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/dropdown/styles.scss +++ b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/dropdown/styles.scss @@ -24,7 +24,7 @@ min-width: 272px; max-width: 360px; max-height: 400px; - padding: 0; + padding: 12px 0; border: 1px solid lighten(rgb(50, 50, 55), 15%); // color-background-nav-dt background-color: var(--color-background-nav-dt); @@ -88,16 +88,4 @@ } } } - - &--checkbox { - position: absolute; - - top: 50%; - - left: 12px; - - margin-top: -9px; - - pointer-events: none; - } } diff --git a/dokka-subprojects/plugin-base/src/main/kotlin/org/jetbrains/dokka/base/renderers/html/htmlPreprocessors.kt b/dokka-subprojects/plugin-base/src/main/kotlin/org/jetbrains/dokka/base/renderers/html/htmlPreprocessors.kt index fa6a4a6a45..f31d9999ad 100644 --- a/dokka-subprojects/plugin-base/src/main/kotlin/org/jetbrains/dokka/base/renderers/html/htmlPreprocessors.kt +++ b/dokka-subprojects/plugin-base/src/main/kotlin/org/jetbrains/dokka/base/renderers/html/htmlPreprocessors.kt @@ -107,6 +107,8 @@ public object AssetsInstaller : PageTransformer { // ui-kit assets "ui-kit/assets/arrow-down.svg", "ui-kit/assets/burger.svg", + "ui-kit/assets/checkbox-off.svg", + "ui-kit/assets/checkbox-on.svg", "ui-kit/assets/homepage.svg", "ui-kit/assets/theme-toggle.svg", "ui-kit/assets/placeholder.svg", diff --git a/dokka-subprojects/plugin-base/src/main/resources/dokka/templates/includes/source_set_selector.ftl b/dokka-subprojects/plugin-base/src/main/resources/dokka/templates/includes/source_set_selector.ftl index 97241ce10f..79f371748a 100644 --- a/dokka-subprojects/plugin-base/src/main/resources/dokka/templates/includes/source_set_selector.ftl +++ b/dokka-subprojects/plugin-base/src/main/resources/dokka/templates/includes/source_set_selector.ftl @@ -5,14 +5,6 @@ - <#list sourceSets as ss> - - - <#list sourceSets as ss> - -