From ecdaf1f81103f69986fe26f419afc5746bfb751c Mon Sep 17 00:00:00 2001 From: Ruslan Bagautdinov Date: Fri, 5 Jul 2024 14:57:22 +0300 Subject: [PATCH 01/22] fix: mobile: hide mini-toc and change margins --- demo/package-lock.json | 19 ++++++++++------- src/components/DocPage/DocPage.scss | 32 +++++++++++++++++------------ 2 files changed, 31 insertions(+), 20 deletions(-) diff --git a/demo/package-lock.json b/demo/package-lock.json index b1af6af8..d2072b94 100644 --- a/demo/package-lock.json +++ b/demo/package-lock.json @@ -38,17 +38,20 @@ } }, "..": { - "version": "3.10.0-beta.0", + "name": "@diplodoc/components", + "version": "4.7.0", "license": "MIT", "dependencies": { + "@gravity-ui/components": "^3.6.0", "@gravity-ui/icons": "^2.5.0", - "@gravity-ui/uikit": "^6.0.0", + "@gravity-ui/uikit": "^6.2.0", "@popperjs/core": "^2.11.2", "bem-cn-lite": "4.1.0", "i18next": "^19.9.2", "langs": "^2.0.0", "lodash": "^4.17.21", "mark.ts": "^1.0.5", + "react-gtm-module": "^2.0.11", "react-hotkeys-hook": "^3.3.1", "react-i18next": "11.15.6", "react-popper": "^2.2.5", @@ -64,12 +67,13 @@ "@types/lodash": "4.14.179", "@types/react": "^18.2.21", "@types/react-dom": "^18.2.7", + "@types/react-gtm-module": "^2.0.3", "autoprefixer": "^10.4.15", "esbuild": "^0.19.2", "esbuild-sass-plugin": "^2.13.0", "eslint": "^8.48.0", "husky": "^8.0.3", - "lint-staged": "^14.0.1", + "lint-staged": "^12.5.0", "npm-run-all": "^4.1.5", "postcss": "^8.4.28", "postcss-preset-env": "^9.1.2", @@ -77,7 +81,6 @@ "prop-types": "^15.8.1", "react": "^18.2.0", "react-dom": "^18.2.0", - "rimraf": "^5.0.1", "sass": "^1.66.1", "stylelint": "^15.10.3", "svgo": "2.8.0", @@ -18708,17 +18711,19 @@ "@diplodoc/components": { "version": "file:..", "requires": { + "@gravity-ui/components": "^3.6.0", "@gravity-ui/eslint-config": "^2.2.0", "@gravity-ui/icons": "^2.5.0", "@gravity-ui/prettier-config": "^1.0.1", "@gravity-ui/stylelint-config": "^3.0.0", "@gravity-ui/tsconfig": "^1.0.0", - "@gravity-ui/uikit": "^6.0.0", + "@gravity-ui/uikit": "^6.2.0", "@popperjs/core": "^2.11.2", "@types/langs": "^2.0.1", "@types/lodash": "4.14.179", "@types/react": "^18.2.21", "@types/react-dom": "^18.2.7", + "@types/react-gtm-module": "^2.0.3", "autoprefixer": "^10.4.15", "bem-cn-lite": "4.1.0", "esbuild": "^0.19.2", @@ -18727,7 +18732,7 @@ "husky": "^8.0.3", "i18next": "^19.9.2", "langs": "^2.0.0", - "lint-staged": "^14.0.1", + "lint-staged": "^12.5.0", "lodash": "^4.17.21", "mark.ts": "^1.0.5", "npm-run-all": "^4.1.5", @@ -18737,10 +18742,10 @@ "prop-types": "^15.8.1", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-gtm-module": "^2.0.11", "react-hotkeys-hook": "^3.3.1", "react-i18next": "11.15.6", "react-popper": "^2.2.5", - "rimraf": "^5.0.1", "sass": "^1.66.1", "scroll-into-view-if-needed": "2.2.29", "stylelint": "^15.10.3", diff --git a/src/components/DocPage/DocPage.scss b/src/components/DocPage/DocPage.scss index 5aff0a1c..4ab689d0 100644 --- a/src/components/DocPage/DocPage.scss +++ b/src/components/DocPage/DocPage.scss @@ -57,7 +57,7 @@ $importantBackgroundColor: rgba(235, 50, 38, 0.08); } &__controls { - display: flex; + display: none; top: 0; align-items: center; height: 40px; @@ -80,6 +80,8 @@ $importantBackgroundColor: rgba(235, 50, 38, 0.08); } @media (min-width: map-get($screenBreakpoints, 'md')) { + display: flex; + &_vertical { top: calc(6px + var(--dc-header-height, #{$headerHeight})); justify-content: center; @@ -145,9 +147,13 @@ $importantBackgroundColor: rgba(235, 50, 38, 0.08); } &__title { - margin-bottom: 12px; + margin-top: 20px; @include text-size(display-2); + + @media (min-width: map-get($screenBreakpoints, 'md')) { + margin-bottom: 12px; + } } &__content { @@ -228,9 +234,9 @@ $importantBackgroundColor: rgba(235, 50, 38, 0.08); &__breadcrumbs { padding: 0 20px; } - + /* CHECK display: block; temporarily hidden */ &__content-mini-toc { - display: block; + display: none; } &__toc-nav-panel { @@ -327,7 +333,7 @@ $importantBackgroundColor: rgba(235, 50, 38, 0.08); } & > p { - margin: 0 0 10px 0; + margin: 0 0 10px; &:first-child { &::before { @@ -348,10 +354,10 @@ $importantBackgroundColor: rgba(235, 50, 38, 0.08); } $colors: ( - dc-accent-info: $infoColor, - dc-accent-tip: $tipColor, - dc-accent-alert: $importantColor, - dc-accent-warning: $warningColor + dc-accent-info: $infoColor, + dc-accent-tip: $tipColor, + dc-accent-alert: $importantColor, + dc-accent-warning: $warningColor, ); @each $type, $color in $colors { @@ -365,10 +371,10 @@ $importantBackgroundColor: rgba(235, 50, 38, 0.08); } $backgroundColors: ( - dc-accent-info: $infoBackgroundColor, - dc-accent-tip: $tipBackgroundColor, - dc-accent-alert: $importantBackgroundColor, - dc-accent-warning: $warningBackgroundColor + dc-accent-info: $infoBackgroundColor, + dc-accent-tip: $tipBackgroundColor, + dc-accent-alert: $importantBackgroundColor, + dc-accent-warning: $warningBackgroundColor, ); @each $type, $color in $backgroundColors { From a4de78cf191393917d0091192fc6ed213b24541c Mon Sep 17 00:00:00 2001 From: Ruslan Bagautdinov Date: Tue, 9 Jul 2024 16:37:29 +0300 Subject: [PATCH 02/22] create SubNavigation in storybook --- src/components/MiniToc/MiniToc.scss | 8 ++ .../SubNavigation/SubNavigation.tsx | 72 ++++++++++++++++++ .../SubNavigation/subnavigation.scss | 74 +++++++++++++++++++ 3 files changed, 154 insertions(+) create mode 100644 src/components/SubNavigation/SubNavigation.tsx create mode 100644 src/components/SubNavigation/subnavigation.scss diff --git a/src/components/MiniToc/MiniToc.scss b/src/components/MiniToc/MiniToc.scss index 25d7f371..7a199c61 100644 --- a/src/components/MiniToc/MiniToc.scss +++ b/src/components/MiniToc/MiniToc.scss @@ -19,6 +19,14 @@ ); overflow-y: auto; overflow-x: hidden; + + // TODO: проверить + @media (max-width: map-get($screenBreakpoints, 'md')) { + height: fit-content; + max-height: calc( + 80vh - var(--dc-header-height, #{$headerHeight}) - #{$miniTocOffset} - var(--dc-subheader-height) + ); + } } &__section { diff --git a/src/components/SubNavigation/SubNavigation.tsx b/src/components/SubNavigation/SubNavigation.tsx new file mode 100644 index 00000000..68e33ea5 --- /dev/null +++ b/src/components/SubNavigation/SubNavigation.tsx @@ -0,0 +1,72 @@ +import React from 'react'; + +// import {DocHeadingItem, MiniToc, Router} from '@diplodoc/components'; +import {ArrowShapeTurnUpRight, SquareListUl} from '@gravity-ui/icons'; +import {Button} from '@gravity-ui/uikit'; +import block from 'bem-cn-lite'; + +import './subnavigation.scss'; + +const b = block('dc-subnavigation'); + +// interface SubNavigationProps { +// children?: ReactElement; +// } + +export const SubNavigation = () => { + // const headings: DocHeadingItem[] = [ + // {title: 'Title 0', href: '', level: 0}, + // {title: 'Title 1', href: '', level: 1}, + // {title: 'Title 1', href: '', level: 1}, + // {title: 'Title 2', href: '', level: 2}, + // {title: 'Title 2', href: '', level: 2}, + // {title: 'Title 2', href: '', level: 2}, + // {title: 'Title 2', href: '', level: 2}, + // {title: 'Title 2', href: '', level: 2}, + // {title: 'Title 2', href: '', level: 2}, + // {title: 'Title 2', href: '', level: 2}, + // {title: 'Title 2', href: '', level: 2}, + // {title: 'Title 2', href: '', level: 2}, + // {title: 'Title 2', href: '', level: 2}, + // ]; + // const router: Router = {pathname: ''}; + + return ( + <> +
+
+ +
+ +
+ Типы данных + +
+
+ +
+
+ {/*
+ +
*/} + + ); +}; + +// const SubNavigationDemo = () => { +// return ; +// }; + +// export default { +// title: 'Components/SubNavigation', +// component: SubNavigationDemo, +// parameters: { +// layout: 'fullscreen', +// }, +// }; + +// export const SubNavigation = {}; diff --git a/src/components/SubNavigation/subnavigation.scss b/src/components/SubNavigation/subnavigation.scss new file mode 100644 index 00000000..151e32ae --- /dev/null +++ b/src/components/SubNavigation/subnavigation.scss @@ -0,0 +1,74 @@ +@import '../../../../src/styles/variables'; +@import '../../../../src/styles/mixins'; +@import "../../../../src/themes/common/index.scss"; + +.dc-subnavigation { + display: flex; + + width: calc(100vw - 12px - 12px); + height: 44px; + padding: 4px 12px; + + gap: 4px; + + background: #FFFFFF; // !TEMP + border-bottom: 1px solid var(--g-color-line-brand, #0000001A); + + &__left { + flex: 1 0 0; + } + + &__link { + display: flex; + align-items: center; + + gap: 4px; + + color: var(--g-color-text-primary, rgba(0, 0, 0, 0.85)); + + text-decoration: none; + } + + &__icon { + display: flex; + justify-content: center; + align-items: center; + + padding: 12px; + } + + &__title { + font-family: inherit; // TODO: проверить + // font-family: "YS Text"; // ? + @include text-size(subheader-2); + font-weight: 400; + } + + &__button { + padding: 12px; + box-sizing: content-box; + } +} + +.mini-toc-wrapper { + display: flex; + flex-direction: column; + align-items: flex-start; + + width: 100vw; + padding: 12px 16px 16px 16px; + box-sizing: border-box; + + background: var(--g-color-base-background, #FFF); + box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.15); + + .dc-mini-toc { + @media (max-width: map-get($screenBreakpoints, 'md')) { + height: fit-content; + max-height: calc( + 80vh - var(--dc-header-height, #{$headerHeight}) - #{$miniTocOffset} - var(--dc-subheader-height) + ); + overflow: auto; + } + } +} From b99395392f573a98539c63bc7a181505b1c6666c Mon Sep 17 00:00:00 2001 From: Ruslan Bagautdinov Date: Tue, 9 Jul 2024 19:25:02 +0300 Subject: [PATCH 03/22] show SubNavigation and MiniToc on mobile The SubHeader was displayed on the page. The behavior of MiniToc in the mobile has been changed, and the element is now displayed on the page (also correctly) --- src/components/DocLayout/DocLayout.scss | 11 +- src/components/DocPage/DocPage.scss | 16 +++ src/components/DocPage/DocPage.tsx | 2 + src/components/MiniToc/MiniToc.scss | 4 + .../SubNavigation/SubNavigation.tsx | 103 ++++++++---------- .../SubNavigation/SubNavigationStorybook.tsx | 72 ++++++++++++ src/components/SubNavigation/index.ts | 2 + .../SubNavigation/subnavigation.scss | 13 ++- 8 files changed, 161 insertions(+), 62 deletions(-) create mode 100644 src/components/SubNavigation/SubNavigationStorybook.tsx create mode 100644 src/components/SubNavigation/index.ts diff --git a/src/components/DocLayout/DocLayout.scss b/src/components/DocLayout/DocLayout.scss index d623134d..f4223bcf 100644 --- a/src/components/DocLayout/DocLayout.scss +++ b/src/components/DocLayout/DocLayout.scss @@ -82,7 +82,16 @@ flex-direction: column-reverse; &__right { - display: none; + // display: none; + position: sticky; + top: 63px; // TODO: calc with header height + left: 0; + + height: fit-content; + width: fit-content; + padding: 0; + + background: #FFF; // TODO: var bg } &__left { diff --git a/src/components/DocPage/DocPage.scss b/src/components/DocPage/DocPage.scss index 4ab689d0..894f6a28 100644 --- a/src/components/DocPage/DocPage.scss +++ b/src/components/DocPage/DocPage.scss @@ -27,6 +27,22 @@ $importantBackgroundColor: rgba(235, 50, 38, 0.08); @include text-size(body-1); + @media (max-width: map-get($screenBreakpoints, 'md') - 1) { + position: relative; + top: 0; + + display: flex; + flex-direction: column; + align-items: flex-start; + + box-sizing: border-box; + width: 100vw; + padding: 12px 16px 16px 16px; + + background: var(--g-color-base-background, #FFF); + box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.15); + } + @media screen and (min-width: 1280px) { & { width: 200px; diff --git a/src/components/DocPage/DocPage.tsx b/src/components/DocPage/DocPage.tsx index fd7bf48e..ca7468d0 100644 --- a/src/components/DocPage/DocPage.tsx +++ b/src/components/DocPage/DocPage.tsx @@ -28,6 +28,7 @@ import {Feedback, FeedbackView} from '../Feedback'; import {HTML} from '../HTML'; import {MiniToc} from '../MiniToc'; import {SearchBar, withHighlightedSearchWords} from '../SearchBar'; +import { SubNavigation } from '../SubNavigation'; import {TocNavPanel} from '../TocNavPanel'; import UpdatedAtDate from '../UpdatedAtDate/UpdatedAtDate'; @@ -195,6 +196,7 @@ class DocPage extends React.Component { {/* This key allows recalculating the offset for the mini-toc for Safari */} + {/* DELETE MOKC ITEM */}
{ - // const headings: DocHeadingItem[] = [ - // {title: 'Title 0', href: '', level: 0}, - // {title: 'Title 1', href: '', level: 1}, - // {title: 'Title 1', href: '', level: 1}, - // {title: 'Title 2', href: '', level: 2}, - // {title: 'Title 2', href: '', level: 2}, - // {title: 'Title 2', href: '', level: 2}, - // {title: 'Title 2', href: '', level: 2}, - // {title: 'Title 2', href: '', level: 2}, - // {title: 'Title 2', href: '', level: 2}, - // {title: 'Title 2', href: '', level: 2}, - // {title: 'Title 2', href: '', level: 2}, - // {title: 'Title 2', href: '', level: 2}, - // {title: 'Title 2', href: '', level: 2}, - // ]; - // const router: Router = {pathname: ''}; +export interface SubNavigationProps { + title: string; +} +export const SubNavigation = (props: SubNavigationProps) => { return ( - <> -
- -
- -
+
+ - {/*
- -
*/} - +
+ +
+
); }; -// const SubNavigationDemo = () => { -// return ; -// }; +// export const MiniTocMobile = () => { +// const headings: DocHeadingItem[] = [ +// {title: 'Title 0', href: '', level: 0}, +// {title: 'Title 1', href: '', level: 1}, +// {title: 'Title 1', href: '', level: 1}, +// {title: 'Title 2', href: '', level: 2}, +// {title: 'Title 2', href: '', level: 2}, +// {title: 'Title 2', href: '', level: 2}, +// {title: 'Title 2', href: '', level: 2}, +// {title: 'Title 2', href: '', level: 2}, +// {title: 'Title 2', href: '', level: 2}, +// {title: 'Title 2', href: '', level: 2}, +// {title: 'Title 2', href: '', level: 2}, +// {title: 'Title 2', href: '', level: 2}, +// {title: 'Title 2', href: '', level: 2}, +// ]; +// const router: Router = {pathname: ''}; -// export default { -// title: 'Components/SubNavigation', -// component: SubNavigationDemo, -// parameters: { -// layout: 'fullscreen', -// }, -// }; +// return ( +//
+// +//
+// ) +// } -// export const SubNavigation = {}; +export default SubNavigation; diff --git a/src/components/SubNavigation/SubNavigationStorybook.tsx b/src/components/SubNavigation/SubNavigationStorybook.tsx new file mode 100644 index 00000000..71bbb3c9 --- /dev/null +++ b/src/components/SubNavigation/SubNavigationStorybook.tsx @@ -0,0 +1,72 @@ +// import React from 'react'; + +// import {DocHeadingItem, MiniToc, Router} from '@diplodoc/components'; +// import {ArrowShapeTurnUpRight, SquareListUl} from '@gravity-ui/icons'; +// import {Button} from '@gravity-ui/uikit'; +// import block from 'bem-cn-lite'; + +// import './SubNavigation.scss'; + +// const b = block('dc-subnavigation'); + +// // interface SubNavigationProps { +// // children?: ReactElement; +// // } + +// export const SubNavigationOriginal = () => { +// const headings: DocHeadingItem[] = [ +// {title: 'Title 0', href: '', level: 0}, +// {title: 'Title 1', href: '', level: 1}, +// {title: 'Title 1', href: '', level: 1}, +// {title: 'Title 2', href: '', level: 2}, +// {title: 'Title 2', href: '', level: 2}, +// {title: 'Title 2', href: '', level: 2}, +// {title: 'Title 2', href: '', level: 2}, +// {title: 'Title 2', href: '', level: 2}, +// {title: 'Title 2', href: '', level: 2}, +// {title: 'Title 2', href: '', level: 2}, +// {title: 'Title 2', href: '', level: 2}, +// {title: 'Title 2', href: '', level: 2}, +// {title: 'Title 2', href: '', level: 2}, +// ]; +// const router: Router = {pathname: ''}; + +// return ( +// <> +//
+// +//
+// +//
+//
+//
+// +//
+// +// ); +// }; + +// const SubNavigationDemo = () => { +// return ; +// }; + +// export default { +// title: 'Components/SubNavigation', +// component: SubNavigationDemo, +// parameters: { +// layout: 'fullscreen', +// }, +// }; + +// export const SubNavigation = {}; diff --git a/src/components/SubNavigation/index.ts b/src/components/SubNavigation/index.ts new file mode 100644 index 00000000..49a548a7 --- /dev/null +++ b/src/components/SubNavigation/index.ts @@ -0,0 +1,2 @@ +export * from './SubNavigation'; +export {default as SubNavigation} from './SubNavigation'; diff --git a/src/components/SubNavigation/subnavigation.scss b/src/components/SubNavigation/subnavigation.scss index 151e32ae..b67de600 100644 --- a/src/components/SubNavigation/subnavigation.scss +++ b/src/components/SubNavigation/subnavigation.scss @@ -1,6 +1,6 @@ -@import '../../../../src/styles/variables'; -@import '../../../../src/styles/mixins'; -@import "../../../../src/themes/common/index.scss"; +@import "../../styles/variables"; +@import "../../styles/mixins"; +@import "../../themes/common/index.scss"; .dc-subnavigation { display: flex; @@ -11,8 +11,9 @@ gap: 4px; - background: #FFFFFF; // !TEMP - border-bottom: 1px solid var(--g-color-line-brand, #0000001A); + background: #FFFFFF; // !TEMP + // border-bottom: 1px solid var(--g-color-line-brand, #0000001A); + border-bottom: 1px solid var(--g-color-private-black-100, #0000001A); &__left { flex: 1 0 0; @@ -54,9 +55,9 @@ display: flex; flex-direction: column; align-items: flex-start; + padding: 12px 16px 16px 16px; width: 100vw; - padding: 12px 16px 16px 16px; box-sizing: border-box; background: var(--g-color-base-background, #FFF); From 6870de031ee985fefbba1e5a06006f07ca0d4c07 Mon Sep 17 00:00:00 2001 From: Ruslan Bagautdinov Date: Wed, 10 Jul 2024 19:42:40 +0300 Subject: [PATCH 04/22] refactor components --- src/components/DocLayout/DocLayout.scss | 9 +-- .../DocLeadingPage/DocLeadingPage.scss | 8 ++ src/components/DocPage/DocPage.scss | 9 ++- src/components/DocPage/DocPage.tsx | 6 +- src/components/MiniToc/MiniToc.scss | 8 +- .../SubNavigation/SubNavigation.tsx | 78 +++++++++---------- .../SubNavigation/subnavigation.scss | 59 +++++++------- 7 files changed, 90 insertions(+), 87 deletions(-) diff --git a/src/components/DocLayout/DocLayout.scss b/src/components/DocLayout/DocLayout.scss index f4223bcf..e53ceebe 100644 --- a/src/components/DocLayout/DocLayout.scss +++ b/src/components/DocLayout/DocLayout.scss @@ -82,16 +82,14 @@ flex-direction: column-reverse; &__right { - // display: none; position: sticky; - top: 63px; // TODO: calc with header height + top: calc(var(--dc-header-height) - 1px); left: 0; + z-index: 119; height: fit-content; - width: fit-content; + width: 100%; padding: 0; - - background: #FFF; // TODO: var bg } &__left { @@ -102,6 +100,7 @@ position: static; width: auto; height: auto; + padding: 0 20px; .dc-toc { /* stylelint-disable-next-line declaration-no-important */ diff --git a/src/components/DocLeadingPage/DocLeadingPage.scss b/src/components/DocLeadingPage/DocLeadingPage.scss index 60845b62..cb602e78 100644 --- a/src/components/DocLeadingPage/DocLeadingPage.scss +++ b/src/components/DocLeadingPage/DocLeadingPage.scss @@ -20,6 +20,10 @@ margin: 40px 0 $normalOffset; @include text-size(display-2); + + @media (max-width: map-get($screenBreakpoints, 'md') - 1) { + margin-top: 20px; + } } &__description { @@ -43,6 +47,10 @@ flex-direction: row; margin-top: 70px; margin-bottom: -$blockMarginBottomLarge; + + @media (max-width: map-get($screenBreakpoints, 'md') - 1) { + margin-top: 20px; + } } } diff --git a/src/components/DocPage/DocPage.scss b/src/components/DocPage/DocPage.scss index 894f6a28..be03be2e 100644 --- a/src/components/DocPage/DocPage.scss +++ b/src/components/DocPage/DocPage.scss @@ -30,17 +30,22 @@ $importantBackgroundColor: rgba(235, 50, 38, 0.08); @media (max-width: map-get($screenBreakpoints, 'md') - 1) { position: relative; top: 0; + z-index: 118; display: flex; flex-direction: column; align-items: flex-start; box-sizing: border-box; - width: 100vw; + width: 100%; padding: 12px 16px 16px 16px; background: var(--g-color-base-background, #FFF); box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.15); + + &_hidden-mini-toc { + padding: 0; + } } @media screen and (min-width: 1280px) { @@ -77,7 +82,7 @@ $importantBackgroundColor: rgba(235, 50, 38, 0.08); top: 0; align-items: center; height: 40px; - z-index: 102; + z-index: 121; position: absolute; right: 7px; diff --git a/src/components/DocPage/DocPage.tsx b/src/components/DocPage/DocPage.tsx index ca7468d0..7039b5f6 100644 --- a/src/components/DocPage/DocPage.tsx +++ b/src/components/DocPage/DocPage.tsx @@ -165,7 +165,7 @@ class DocPage extends React.Component { headerHeight={headerHeight} className={b(modes)} fullScreen={fullScreen} - hideRight={hideMiniToc} + hideRight={false} //hideMiniToc} tocTitleIcon={tocTitleIcon} wideFormat={wideFormat} hideTocHeader={hideTocHeader} @@ -196,9 +196,9 @@ class DocPage extends React.Component { {/* This key allows recalculating the offset for the mini-toc for Safari */} - {/* DELETE MOKC ITEM */} +
{hideMiniToc ? null : this.renderAsideMiniToc()} diff --git a/src/components/MiniToc/MiniToc.scss b/src/components/MiniToc/MiniToc.scss index 2d4b8d97..7ac56f1f 100644 --- a/src/components/MiniToc/MiniToc.scss +++ b/src/components/MiniToc/MiniToc.scss @@ -10,7 +10,7 @@ color: var(--g-color-text-primary); margin-bottom: 12px; - @media (max-width: map-get($screenBreakpoints, 'md')) { + @media (max-width: map-get($screenBreakpoints, 'md') - 1) { margin-bottom: 8px; } } @@ -21,11 +21,9 @@ height: calc( 100vh - var(--dc-header-height, #{$headerHeight}) - #{$miniTocOffset} - var(--dc-subheader-height) ); - overflow-y: auto; - overflow-x: hidden; + overflow: hidden auto; - // TODO: проверить - @media (max-width: map-get($screenBreakpoints, 'md')) { + @media (max-width: map-get($screenBreakpoints, 'md') - 1) { height: fit-content; max-height: calc( 80vh - var(--dc-header-height, #{$headerHeight}) - #{$miniTocOffset} - var(--dc-subheader-height) diff --git a/src/components/SubNavigation/SubNavigation.tsx b/src/components/SubNavigation/SubNavigation.tsx index 44d3615f..383b5bcb 100644 --- a/src/components/SubNavigation/SubNavigation.tsx +++ b/src/components/SubNavigation/SubNavigation.tsx @@ -1,65 +1,65 @@ -import React from 'react'; +import React, { useCallback, useMemo } from 'react'; import {ArrowShapeTurnUpRight, SquareListUl} from '@gravity-ui/icons'; import {Button} from '@gravity-ui/uikit'; import block from 'bem-cn-lite'; -// import { DocHeadingItem, Router } from 'src/models'; - -// import { MiniToc } from '../MiniToc'; import './SubNavigation.scss'; const b = block('dc-subnavigation'); +export type ShareData = { + title: string | undefined; + url?: string; +} export interface SubNavigationProps { - title: string; + title: string | undefined; + // shareData: ShareData; } +export const SubNavigation = ({ + title, + // shareData +}: SubNavigationProps) => { + const shareData = useMemo(() => { + return { + title, + // url: window.location.href // ? + }; + }, [title]); + + const shareHandler = useCallback(() => { + if (navigator && navigator.share) { + navigator.share(shareData) + .then(() => {}) + .catch((error) => console.error("Error sharing", error)); + } else { + console.log("Share not supported", shareData); // ? + } + }, [shareData]); + + const openMiniTocHandler = useCallback(() => { + + }, []) -export const SubNavigation = (props: SubNavigationProps) => { return (
-
- + {/* -
- + {/*
*/} + {/*
*/} + -
+ {/*
*/}
); }; -// export const MiniTocMobile = () => { -// const headings: DocHeadingItem[] = [ -// {title: 'Title 0', href: '', level: 0}, -// {title: 'Title 1', href: '', level: 1}, -// {title: 'Title 1', href: '', level: 1}, -// {title: 'Title 2', href: '', level: 2}, -// {title: 'Title 2', href: '', level: 2}, -// {title: 'Title 2', href: '', level: 2}, -// {title: 'Title 2', href: '', level: 2}, -// {title: 'Title 2', href: '', level: 2}, -// {title: 'Title 2', href: '', level: 2}, -// {title: 'Title 2', href: '', level: 2}, -// {title: 'Title 2', href: '', level: 2}, -// {title: 'Title 2', href: '', level: 2}, -// {title: 'Title 2', href: '', level: 2}, -// ]; -// const router: Router = {pathname: ''}; - -// return ( -//
-// -//
-// ) -// } - export default SubNavigation; diff --git a/src/components/SubNavigation/subnavigation.scss b/src/components/SubNavigation/subnavigation.scss index b67de600..06912a15 100644 --- a/src/components/SubNavigation/subnavigation.scss +++ b/src/components/SubNavigation/subnavigation.scss @@ -3,31 +3,47 @@ @import "../../themes/common/index.scss"; .dc-subnavigation { + position: relative; + z-index: 119; + display: flex; - width: calc(100vw - 12px - 12px); + width: calc(100% - 12px - 12px); height: 44px; padding: 4px 12px; gap: 4px; - background: #FFFFFF; // !TEMP - // border-bottom: 1px solid var(--g-color-line-brand, #0000001A); - border-bottom: 1px solid var(--g-color-private-black-100, #0000001A); + background: var(--g-color-base-background, #FFF); + border-bottom: 1px solid var(--g-color-line-generic, #0000001A); &__left { - flex: 1 0 0; - } - - &__link { display: flex; align-items: center; + justify-content: flex-start; + flex: 1 0 0; + width: 100%; + padding: 0; gap: 4px; + text-decoration: none; + color: var(--g-color-text-primary, rgba(0, 0, 0, 0.85)); + background: none; + border-radius: var(--g-border-radius-xs, 3px); + border: none; + outline: none; - text-decoration: none; + &:hover { + background: var(--g-color-base-simple-hover, rgba(0, 0, 0, 0.05)); + } + + &:focus-visible { + outline: var(--g-color-line-focus, rgb(78, 121, 235)); + outline-width: 2px; + outline-style: solid; + } } &__icon { @@ -39,7 +55,7 @@ } &__title { - font-family: inherit; // TODO: проверить + font-family: inherit; // TODO: ask about font-family // font-family: "YS Text"; // ? @include text-size(subheader-2); font-weight: 400; @@ -50,26 +66,3 @@ box-sizing: content-box; } } - -.mini-toc-wrapper { - display: flex; - flex-direction: column; - align-items: flex-start; - padding: 12px 16px 16px 16px; - - width: 100vw; - box-sizing: border-box; - - background: var(--g-color-base-background, #FFF); - box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.15); - - .dc-mini-toc { - @media (max-width: map-get($screenBreakpoints, 'md')) { - height: fit-content; - max-height: calc( - 80vh - var(--dc-header-height, #{$headerHeight}) - #{$miniTocOffset} - var(--dc-subheader-height) - ); - overflow: auto; - } - } -} From fb85e37bb7623ed63cdf3d9778caa40cbcb4172f Mon Sep 17 00:00:00 2001 From: Ruslan Bagautdinov Date: Thu, 11 Jul 2024 16:38:34 +0300 Subject: [PATCH 05/22] SubNavigation slides up when scrolling the page --- src/components/DocPage/DocPage.scss | 5 +- .../SubNavigation/SubNavigation.tsx | 72 ++++++++++++++----- .../SubNavigation/subnavigation.scss | 32 ++++++++- 3 files changed, 88 insertions(+), 21 deletions(-) diff --git a/src/components/DocPage/DocPage.scss b/src/components/DocPage/DocPage.scss index be03be2e..a2521206 100644 --- a/src/components/DocPage/DocPage.scss +++ b/src/components/DocPage/DocPage.scss @@ -28,8 +28,8 @@ $importantBackgroundColor: rgba(235, 50, 38, 0.08); @include text-size(body-1); @media (max-width: map-get($screenBreakpoints, 'md') - 1) { - position: relative; - top: 0; + position: absolute; + top: var(--dc-subheader-height); z-index: 118; display: flex; @@ -249,6 +249,7 @@ $importantBackgroundColor: rgba(235, 50, 38, 0.08); @media (max-width: map-get($screenBreakpoints, 'md') - 1) { &__main { + margin-top: var(--dc-subheader-height); padding: 0 20px; } diff --git a/src/components/SubNavigation/SubNavigation.tsx b/src/components/SubNavigation/SubNavigation.tsx index 383b5bcb..bb986b09 100644 --- a/src/components/SubNavigation/SubNavigation.tsx +++ b/src/components/SubNavigation/SubNavigation.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useMemo } from 'react'; +import React, { useCallback, useEffect, useMemo, useState } from 'react'; import {ArrowShapeTurnUpRight, SquareListUl} from '@gravity-ui/icons'; import {Button} from '@gravity-ui/uikit'; @@ -16,10 +16,52 @@ export interface SubNavigationProps { title: string | undefined; // shareData: ShareData; } + export const SubNavigation = ({ title, // shareData }: SubNavigationProps) => { + const [visibility, setVisibility] = useState(true); + const [hiddingInterval, setHiddingInterval] = useState(undefined); + const [lastScrollY, setLastScrollY] = useState(window.screenY); + + const controlVisibility = useCallback(() => { + if (lastScrollY === 0) { + setLastScrollY(window.scrollY); + setVisibility(true); + return; + } + + if (window.scrollY > lastScrollY) { + if (hiddingInterval) { + return; + } + + setVisibility(false); + + setHiddingInterval(setTimeout(() => { + clearTimeout(hiddingInterval); + setHiddingInterval(undefined); + }, 1000)) + } else if (window.scrollY < lastScrollY) { + setVisibility(true); + } else { + return; + } + + setLastScrollY(window.scrollY); + }, [lastScrollY, hiddingInterval, setLastScrollY, setVisibility, setHiddingInterval]); + + + useEffect(() => { + window.addEventListener('scroll', controlVisibility); + + return () => { + window.removeEventListener('scroll', controlVisibility); + }; + }, [controlVisibility]); + + const shareData = useMemo(() => { return { title, @@ -42,22 +84,18 @@ export const SubNavigation = ({ }, []) return ( -
- {/*
*/} - - {/*
*/} - {/*
*/} - - {/*
*/} +
+ +
); }; diff --git a/src/components/SubNavigation/subnavigation.scss b/src/components/SubNavigation/subnavigation.scss index 06912a15..5b07bce2 100644 --- a/src/components/SubNavigation/subnavigation.scss +++ b/src/components/SubNavigation/subnavigation.scss @@ -1,9 +1,8 @@ @import "../../styles/variables"; @import "../../styles/mixins"; -@import "../../themes/common/index.scss"; .dc-subnavigation { - position: relative; + position: absolute; z-index: 119; display: flex; @@ -17,6 +16,10 @@ background: var(--g-color-base-background, #FFF); border-bottom: 1px solid var(--g-color-line-generic, #0000001A); + @media (min-width: map-get($screenBreakpoints, 'md')) { + display: none; + } + &__left { display: flex; align-items: center; @@ -35,10 +38,20 @@ border: none; outline: none; + transition: transform .1s ease-out, color .15s linear; + transform: scale(1); + + touch-action: manipulation; + &:hover { background: var(--g-color-base-simple-hover, rgba(0, 0, 0, 0.05)); } + &:active { + transition: none; + transform: scale(0.98); + } + &:focus-visible { outline: var(--g-color-line-focus, rgb(78, 121, 235)); outline-width: 2px; @@ -65,4 +78,19 @@ padding: 12px; box-sizing: content-box; } + + transition: margin-top 1s 0.2s; + transition-duration: 1s; + transition-delay: 0.1s; + + &_hidden { + margin-top: calc(0px - var(--dc-header-height)); + } + + &_visible { + margin-top: 0; + transition-duration: 0.75s; + transition-delay: 0s; + } } + From 5252aea41a717e2d65411050a3ca98bf36976f69 Mon Sep 17 00:00:00 2001 From: Ruslan Bagautdinov Date: Mon, 15 Jul 2024 16:04:12 +0300 Subject: [PATCH 06/22] feat: create mobile mini-toc and subnavigation --- src/components/DocLayout/DocLayout.scss | 4 + src/components/DocPage/DocPage.scss | 16 ++- src/components/DocPage/DocPage.tsx | 40 +++++++- .../SubNavigation/SubNavigation.tsx | 98 ++++++++++++------- .../SubNavigation/subnavigation.scss | 30 +++--- 5 files changed, 142 insertions(+), 46 deletions(-) diff --git a/src/components/DocLayout/DocLayout.scss b/src/components/DocLayout/DocLayout.scss index e53ceebe..44516ff3 100644 --- a/src/components/DocLayout/DocLayout.scss +++ b/src/components/DocLayout/DocLayout.scss @@ -81,6 +81,10 @@ @media (max-width: map-get($screenBreakpoints, 'md') - 1) { flex-direction: column-reverse; + &__center + &__right:has(> .dc-subnavigation_invisible) { + margin-top: calc(0px - var(--dc-subheader-height)); + } + &__right { position: sticky; top: calc(var(--dc-header-height) - 1px); diff --git a/src/components/DocPage/DocPage.scss b/src/components/DocPage/DocPage.scss index a2521206..45e63e8f 100644 --- a/src/components/DocPage/DocPage.scss +++ b/src/components/DocPage/DocPage.scss @@ -37,15 +37,29 @@ $importantBackgroundColor: rgba(235, 50, 38, 0.08); align-items: flex-start; box-sizing: border-box; + max-height: 0px; width: 100%; - padding: 12px 16px 16px 16px; + padding: 0 16px 0 16px; background: var(--g-color-base-background, #FFF); box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.15); + transition: max-height 300ms 0s;; + + overflow-y: hidden; + + &_open-mini-toc { + max-height: 80vh; + } + &_hidden-mini-toc { padding: 0; } + + &-mini-toc { + width: 100%; + padding: 16px 0 16px 0; + } } @media screen and (min-width: 1280px) { diff --git a/src/components/DocPage/DocPage.tsx b/src/components/DocPage/DocPage.tsx index 7039b5f6..2e25e655 100644 --- a/src/components/DocPage/DocPage.tsx +++ b/src/components/DocPage/DocPage.tsx @@ -85,6 +85,7 @@ export interface DocPageProps extends DocPageData, DocSettings { type DocPageInnerProps = InnerProps; type DocPageState = { + mobileMiniTocOpen: boolean; loading: boolean; keyDOM: number; showNotification: boolean; @@ -101,6 +102,7 @@ class DocPage extends React.Component { super(props); this.state = { + mobileMiniTocOpen: false, loading: props.singlePage, keyDOM: getRandomKey(), showNotification: true, @@ -156,6 +158,7 @@ class DocPage extends React.Component { 'full-screen': fullScreen, 'hidden-mini-toc': hideMiniToc, 'single-page': singlePage, + 'open-mini-toc': this.state.mobileMiniTocOpen }; return ( @@ -195,8 +198,13 @@ class DocPage extends React.Component { {this.renderSinglePageControls()} + {/* This key allows recalculating the offset for the mini-toc for Safari */} -
{ ); } + // TODO: изменить логику добавления и удаления слушателя событий + // нужно вешать слушатель только раз и удалять его только демонтаже компонента + // можно использовать useEffect и передачу коллбека с удалением слушателя + private openMiniTocHandler = () => { + this.setState({ mobileMiniTocOpen: !this.state.mobileMiniTocOpen }); + + if (!this.state.mobileMiniTocOpen) { + document.addEventListener('click', this.clickOutsideMiniToc, true); + } + } + + private clickOutsideMiniToc = (event: MouseEvent) => { + if ( + !event.composedPath().some( + (item, index, array) => { + const el = (item as HTMLElement) + const classes = ( + index !== array.length - 1 && + el.tagName !== "HTML" + ) ? el.classList : null + + return classes?.contains("dc-doc-layout__right") + } + ) + ) { + this.setState({ mobileMiniTocOpen: false }); + document.removeEventListener('click', this.clickOutsideMiniToc, true); + } + } + private handleBodyMutation = (mutationsList: MutationRecord[]) => { const {onContentMutation, onContentLoaded} = this.props; diff --git a/src/components/SubNavigation/SubNavigation.tsx b/src/components/SubNavigation/SubNavigation.tsx index bb986b09..c655d589 100644 --- a/src/components/SubNavigation/SubNavigation.tsx +++ b/src/components/SubNavigation/SubNavigation.tsx @@ -12,62 +12,60 @@ export type ShareData = { title: string | undefined; url?: string; } + export interface SubNavigationProps { title: string | undefined; + hideMiniToc: boolean; + miniTocOpened: boolean; + openMiniTocHandler: () => void ; // shareData: ShareData; } export const SubNavigation = ({ title, + hideMiniToc, + miniTocOpened, // shareData + openMiniTocHandler }: SubNavigationProps) => { const [visibility, setVisibility] = useState(true); - const [hiddingInterval, setHiddingInterval] = useState(undefined); + const [hiddingTimeout, setHiddingTimeout] = useState(undefined); const [lastScrollY, setLastScrollY] = useState(window.screenY); + const shareData = useMemo(() => { + return { + title, + // url: window.location.href // ? + }; + }, [title]); + const controlVisibility = useCallback(() => { - if (lastScrollY === 0) { - setLastScrollY(window.scrollY); + if (miniTocOpened) { setVisibility(true); return; } + if (lastScrollY === 0) { + setVisibility(true); + } + if (window.scrollY > lastScrollY) { - if (hiddingInterval) { + if (hiddingTimeout) { return; } setVisibility(false); - setHiddingInterval(setTimeout(() => { - clearTimeout(hiddingInterval); - setHiddingInterval(undefined); - }, 1000)) + setHiddingTimeout(setTimeout(() => { + clearTimeout(hiddingTimeout); + setHiddingTimeout(undefined); + }, 300)) } else if (window.scrollY < lastScrollY) { setVisibility(true); - } else { - return; } setLastScrollY(window.scrollY); - }, [lastScrollY, hiddingInterval, setLastScrollY, setVisibility, setHiddingInterval]); - - - useEffect(() => { - window.addEventListener('scroll', controlVisibility); - - return () => { - window.removeEventListener('scroll', controlVisibility); - }; - }, [controlVisibility]); - - - const shareData = useMemo(() => { - return { - title, - // url: window.location.href // ? - }; - }, [title]); + }, [miniTocOpened, lastScrollY, hiddingTimeout, setLastScrollY, setVisibility, setHiddingTimeout]); const shareHandler = useCallback(() => { if (navigator && navigator.share) { @@ -79,19 +77,53 @@ export const SubNavigation = ({ } }, [shareData]); - const openMiniTocHandler = useCallback(() => { + useEffect(() => { + if (window.scrollY === 0) { + return + } + setHiddingTimeout(setTimeout(() => { + setHiddingTimeout(undefined); + }, 100)) }, []) + useEffect(() => { + window.addEventListener('scroll', controlVisibility); + + return () => { + window.removeEventListener('scroll', controlVisibility); + }; + }, [controlVisibility]); + return ( -
- - -//
-//
-//
-// -//
-// -// ); -// }; - -// const SubNavigationDemo = () => { -// return ; -// }; - -// export default { -// title: 'Components/SubNavigation', -// component: SubNavigationDemo, -// parameters: { -// layout: 'fullscreen', -// }, -// }; - -// export const SubNavigation = {}; diff --git a/src/themes/common/index.scss b/src/themes/common/index.scss index d8cc549a..836a5047 100644 --- a/src/themes/common/index.scss +++ b/src/themes/common/index.scss @@ -16,7 +16,7 @@ --dc-text-highlight: var(--g-color-base-warning-heavy); --dc-text-highlight-selected: #ffab3b; --dc-header-height: 0px; - --dc-subheader-height: 40px; + --dc-subheader-height: 44px; --dc-error-image-403: url('data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='); --dc-error-image-404: url('data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='); From 5b4d9913cd02a6906efcc10bd18161a41651864b Mon Sep 17 00:00:00 2001 From: Ruslan Bagautdinov Date: Tue, 16 Jul 2024 12:41:26 +0300 Subject: [PATCH 08/22] fix: change subheader-height to correct --- src/components/DocPage/DocPage.scss | 2 +- src/themes/common/index.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/DocPage/DocPage.scss b/src/components/DocPage/DocPage.scss index 45e63e8f..c631c417 100644 --- a/src/components/DocPage/DocPage.scss +++ b/src/components/DocPage/DocPage.scss @@ -30,7 +30,7 @@ $importantBackgroundColor: rgba(235, 50, 38, 0.08); @media (max-width: map-get($screenBreakpoints, 'md') - 1) { position: absolute; top: var(--dc-subheader-height); - z-index: 118; + z-index: 117; display: flex; flex-direction: column; diff --git a/src/themes/common/index.scss b/src/themes/common/index.scss index 836a5047..e8a3c139 100644 --- a/src/themes/common/index.scss +++ b/src/themes/common/index.scss @@ -16,7 +16,7 @@ --dc-text-highlight: var(--g-color-base-warning-heavy); --dc-text-highlight-selected: #ffab3b; --dc-header-height: 0px; - --dc-subheader-height: 44px; + --dc-subheader-height: 52px; --dc-error-image-403: url('data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='); --dc-error-image-404: url('data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='); From 19c6b5bf24d67910710383ae20109fb1eb42b1e0 Mon Sep 17 00:00:00 2001 From: Ruslan Bagautdinov Date: Tue, 16 Jul 2024 14:11:31 +0300 Subject: [PATCH 09/22] fix: share button in docs without header --- src/components/SubNavigation/subnavigation.scss | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/src/components/SubNavigation/subnavigation.scss b/src/components/SubNavigation/subnavigation.scss index 2270dbfb..8ff39d1a 100644 --- a/src/components/SubNavigation/subnavigation.scss +++ b/src/components/SubNavigation/subnavigation.scss @@ -77,15 +77,11 @@ font-weight: 400; } - // &__button { - // padding: 12px; - // box-sizing: content-box; - // } - transition: margin-top 300ms 0s; &_hidden { - margin-top: calc(0px - var(--dc-header-height)); + --dc-header-height: 64px; + margin-top: calc(0px - var(--dc-header-height, 64px)); } &_visible { From 0aeca292c936fea4702286f3bbef6964afaff3aa Mon Sep 17 00:00:00 2001 From: Ruslan Bagautdinov Date: Tue, 16 Jul 2024 14:32:14 +0300 Subject: [PATCH 10/22] fix: Node.JS.Timeout error --- src/components/SubNavigation/SubNavigation.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/SubNavigation/SubNavigation.tsx b/src/components/SubNavigation/SubNavigation.tsx index d76894e4..ab84a72b 100644 --- a/src/components/SubNavigation/SubNavigation.tsx +++ b/src/components/SubNavigation/SubNavigation.tsx @@ -31,7 +31,7 @@ export const SubNavigation = ({ closeMiniToc, }: SubNavigationProps) => { const [visibility, setVisibility] = useState(true); - const [hiddingTimeout, setHiddingTimeout] = useState(undefined); + const [hiddingTimeout, setHiddingTimeout] = useState(undefined); const [lastScrollY, setLastScrollY] = useState(window.screenY); const shareData = useMemo(() => { @@ -82,7 +82,7 @@ export const SubNavigation = ({ setVisibility(false); setHiddingTimeout( - setTimeout(() => { + window.setTimeout(() => { clearTimeout(hiddingTimeout); setHiddingTimeout(undefined); }, 300), @@ -118,7 +118,7 @@ export const SubNavigation = ({ } setHiddingTimeout( - setTimeout(() => { + window.setTimeout(() => { setHiddingTimeout(undefined); }, 100), ); From 897ba70674c5dad51569dfd220ee55c32fb3d0ef Mon Sep 17 00:00:00 2001 From: Ruslan Bagautdinov Date: Tue, 16 Jul 2024 15:05:50 +0300 Subject: [PATCH 11/22] fix: style fixes --- src/components/DocLayout/DocLayout.scss | 2 +- src/components/SubNavigation/subnavigation.scss | 14 ++++++-------- 2 files changed, 7 insertions(+), 9 deletions(-) diff --git a/src/components/DocLayout/DocLayout.scss b/src/components/DocLayout/DocLayout.scss index 44516ff3..7690e681 100644 --- a/src/components/DocLayout/DocLayout.scss +++ b/src/components/DocLayout/DocLayout.scss @@ -82,7 +82,7 @@ flex-direction: column-reverse; &__center + &__right:has(> .dc-subnavigation_invisible) { - margin-top: calc(0px - var(--dc-subheader-height)); + margin-top: calc(0px - var(--dc-subheader-height, 52px)); } &__right { diff --git a/src/components/SubNavigation/subnavigation.scss b/src/components/SubNavigation/subnavigation.scss index 8ff39d1a..e16d011b 100644 --- a/src/components/SubNavigation/subnavigation.scss +++ b/src/components/SubNavigation/subnavigation.scss @@ -1,5 +1,5 @@ -@import "../../styles/variables"; -@import "../../styles/mixins"; +@import '../../styles/variables'; +@import '../../styles/mixins'; .dc-subnavigation { position: absolute; @@ -13,8 +13,8 @@ gap: 4px; - background: var(--g-color-base-background, #FFF); - border-bottom: 1px solid var(--g-color-line-generic, #0000001A); + background: var(--g-color-base-background, #fff); + border-bottom: 1px solid var(--g-color-line-generic, #0000001a); @media (min-width: map-get($screenBreakpoints, 'md')) { display: none; @@ -38,7 +38,7 @@ border: none; outline: none; - transition: transform .1s ease-out, color .15s linear; + transition: transform 0.1s ease-out, color 0.15s linear; transform: scale(1); touch-action: manipulation; @@ -72,7 +72,6 @@ } &__title { - font-family: inherit; @include text-size(subheader-2); font-weight: 400; } @@ -95,6 +94,5 @@ &_invisible &__button { margin-top: 8px; - } + } } - From 7e18af612979dc46537b1c174418fe0a88f2af1c Mon Sep 17 00:00:00 2001 From: Ruslan Bagautdinov Date: Tue, 16 Jul 2024 15:12:53 +0300 Subject: [PATCH 12/22] feat: share a page --- src/components/SubNavigation/SubNavigation.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/components/SubNavigation/SubNavigation.tsx b/src/components/SubNavigation/SubNavigation.tsx index ab84a72b..6a99a5fb 100644 --- a/src/components/SubNavigation/SubNavigation.tsx +++ b/src/components/SubNavigation/SubNavigation.tsx @@ -19,14 +19,12 @@ export interface SubNavigationProps { miniTocOpened: boolean; toggleMiniTocOpen: () => void; closeMiniToc: () => void; - // shareData: ShareData; } export const SubNavigation = ({ title, hideMiniToc, miniTocOpened, - // shareData toggleMiniTocOpen, closeMiniToc, }: SubNavigationProps) => { @@ -37,7 +35,7 @@ export const SubNavigation = ({ const shareData = useMemo(() => { return { title, - // url: window.location.href // ? + url: window.location.href }; }, [title]); @@ -108,7 +106,7 @@ export const SubNavigation = ({ .then(() => {}) .catch((error) => console.error('Error sharing', error)); } else { - console.log('Share not supported', shareData); // ? + console.log('Share not supported', shareData); } }, [shareData]); From aff7c9110f13401fdd54fb52a4ae6079d4b200b9 Mon Sep 17 00:00:00 2001 From: Ruslan Bagautdinov Date: Tue, 16 Jul 2024 15:15:44 +0300 Subject: [PATCH 13/22] fix: prettier errors --- src/components/SubNavigation/SubNavigation.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/SubNavigation/SubNavigation.tsx b/src/components/SubNavigation/SubNavigation.tsx index 6a99a5fb..0f72f41a 100644 --- a/src/components/SubNavigation/SubNavigation.tsx +++ b/src/components/SubNavigation/SubNavigation.tsx @@ -35,7 +35,7 @@ export const SubNavigation = ({ const shareData = useMemo(() => { return { title, - url: window.location.href + url: window.location.href, }; }, [title]); From cf7d863e7750d021b942195dedb9b6eff8bc31ea Mon Sep 17 00:00:00 2001 From: Ruslan Bagautdinov Date: Tue, 16 Jul 2024 16:58:13 +0300 Subject: [PATCH 14/22] fix: imrove code --- src/components/DocPage/DocPage.tsx | 1 - src/components/SubNavigation/SubNavigation.tsx | 11 +++++++++++ 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/src/components/DocPage/DocPage.tsx b/src/components/DocPage/DocPage.tsx index ad4886da..1c363aff 100644 --- a/src/components/DocPage/DocPage.tsx +++ b/src/components/DocPage/DocPage.tsx @@ -168,7 +168,6 @@ class DocPage extends React.Component { headerHeight={headerHeight} className={b(modes)} fullScreen={fullScreen} - hideRight={false} //hideMiniToc} tocTitleIcon={tocTitleIcon} wideFormat={wideFormat} hideTocHeader={hideTocHeader} diff --git a/src/components/SubNavigation/SubNavigation.tsx b/src/components/SubNavigation/SubNavigation.tsx index 0f72f41a..3bbc64ef 100644 --- a/src/components/SubNavigation/SubNavigation.tsx +++ b/src/components/SubNavigation/SubNavigation.tsx @@ -41,6 +41,9 @@ export const SubNavigation = ({ const clickOutsideMiniToc = useCallback( (event: MouseEvent) => { + event.preventDefault(); + event.stopPropagation(); + /* * func "composedPath" returns an array in which the last two elements are "HTML" and "#document", * which do not have the classList property, so they are subtracted before checking by slice() @@ -123,6 +126,10 @@ export const SubNavigation = ({ }, []); useEffect(() => { + if (!window) { + return () => {}; + } + window.addEventListener('scroll', controlVisibility); return () => { @@ -131,6 +138,10 @@ export const SubNavigation = ({ }, [controlVisibility]); useEffect(() => { + if (!document) { + return () => {}; + } + document.addEventListener('click', clickOutsideMiniToc, true); return () => { From ef1025c8e7149c3bb130ddd4e16392a0904a5a1f Mon Sep 17 00:00:00 2001 From: Ruslan Bagautdinov Date: Tue, 16 Jul 2024 18:41:39 +0300 Subject: [PATCH 15/22] fix: delete unnecessary --- src/components/SubNavigation/SubNavigation.tsx | 8 -------- 1 file changed, 8 deletions(-) diff --git a/src/components/SubNavigation/SubNavigation.tsx b/src/components/SubNavigation/SubNavigation.tsx index 3bbc64ef..d1df4df3 100644 --- a/src/components/SubNavigation/SubNavigation.tsx +++ b/src/components/SubNavigation/SubNavigation.tsx @@ -126,10 +126,6 @@ export const SubNavigation = ({ }, []); useEffect(() => { - if (!window) { - return () => {}; - } - window.addEventListener('scroll', controlVisibility); return () => { @@ -138,10 +134,6 @@ export const SubNavigation = ({ }, [controlVisibility]); useEffect(() => { - if (!document) { - return () => {}; - } - document.addEventListener('click', clickOutsideMiniToc, true); return () => { From f3c024a60000f1d434f24a88fe9e77c1f3cba2f7 Mon Sep 17 00:00:00 2001 From: Ruslan Bagautdinov Date: Tue, 16 Jul 2024 18:45:28 +0300 Subject: [PATCH 16/22] fix: window.clearTimeout --- src/components/SubNavigation/SubNavigation.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/SubNavigation/SubNavigation.tsx b/src/components/SubNavigation/SubNavigation.tsx index d1df4df3..4b13d65d 100644 --- a/src/components/SubNavigation/SubNavigation.tsx +++ b/src/components/SubNavigation/SubNavigation.tsx @@ -84,7 +84,7 @@ export const SubNavigation = ({ setHiddingTimeout( window.setTimeout(() => { - clearTimeout(hiddingTimeout); + window.clearTimeout(hiddingTimeout); setHiddingTimeout(undefined); }, 300), ); From 8a79d8f4de522ce912c0d79cc04032667b79fe13 Mon Sep 17 00:00:00 2001 From: Ruslan Bagautdinov Date: Tue, 16 Jul 2024 19:25:15 +0300 Subject: [PATCH 17/22] fix: separate business-logic from SubNavigation --- .../SubNavigation/SubNavigation.tsx | 78 +++++++++++-------- 1 file changed, 45 insertions(+), 33 deletions(-) diff --git a/src/components/SubNavigation/SubNavigation.tsx b/src/components/SubNavigation/SubNavigation.tsx index 4b13d65d..ecc4c0e8 100644 --- a/src/components/SubNavigation/SubNavigation.tsx +++ b/src/components/SubNavigation/SubNavigation.tsx @@ -13,32 +13,11 @@ export type ShareData = { url?: string; }; -export interface SubNavigationProps { - title: string | undefined; - hideMiniToc: boolean; - miniTocOpened: boolean; - toggleMiniTocOpen: () => void; - closeMiniToc: () => void; -} - -export const SubNavigation = ({ - title, - hideMiniToc, - miniTocOpened, - toggleMiniTocOpen, - closeMiniToc, -}: SubNavigationProps) => { +const useVisibility = (miniTocOpened: boolean, closeMiniToc: () => void) => { const [visibility, setVisibility] = useState(true); const [hiddingTimeout, setHiddingTimeout] = useState(undefined); const [lastScrollY, setLastScrollY] = useState(window.screenY); - const shareData = useMemo(() => { - return { - title, - url: window.location.href, - }; - }, [title]); - const clickOutsideMiniToc = useCallback( (event: MouseEvent) => { event.preventDefault(); @@ -102,17 +81,6 @@ export const SubNavigation = ({ setHiddingTimeout, ]); - const shareHandler = useCallback(() => { - if (navigator && navigator.share) { - navigator - .share(shareData) - .then(() => {}) - .catch((error) => console.error('Error sharing', error)); - } else { - console.log('Share not supported', shareData); - } - }, [shareData]); - useEffect(() => { if (window.scrollY === 0) { return; @@ -120,6 +88,7 @@ export const SubNavigation = ({ setHiddingTimeout( window.setTimeout(() => { + setLastScrollY(window.scrollY); setHiddingTimeout(undefined); }, 100), ); @@ -141,6 +110,49 @@ export const SubNavigation = ({ }; }, [clickOutsideMiniToc]); + return visibility; +}; + +const useShareHandler = (title: string | undefined) => { + const shareData = useMemo(() => { + return { + title, + url: window.location.href, + }; + }, [title]); + + const shareHandler = useCallback(() => { + if (navigator && navigator.share) { + navigator + .share(shareData) + .then(() => {}) + .catch((error) => console.error('Error sharing', error)); + } else { + console.log('Share not supported', shareData); + } + }, [shareData]); + + return shareHandler; +}; + +export interface SubNavigationProps { + title: string | undefined; + hideMiniToc: boolean; + miniTocOpened: boolean; + toggleMiniTocOpen: () => void; + closeMiniToc: () => void; +} + +export const SubNavigation = ({ + title, + hideMiniToc, + miniTocOpened, + toggleMiniTocOpen, + closeMiniToc, +}: SubNavigationProps) => { + const visibility = useVisibility(miniTocOpened, closeMiniToc); + const shareHandler = useShareHandler(title); + return (
Date: Wed, 17 Jul 2024 12:57:14 +0300 Subject: [PATCH 18/22] fix: click outside menu broke another interectives --- src/components/SubNavigation/SubNavigation.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/components/SubNavigation/SubNavigation.tsx b/src/components/SubNavigation/SubNavigation.tsx index ecc4c0e8..1f7bee6f 100644 --- a/src/components/SubNavigation/SubNavigation.tsx +++ b/src/components/SubNavigation/SubNavigation.tsx @@ -20,9 +20,6 @@ const useVisibility = (miniTocOpened: boolean, closeMiniToc: () => void) => { const clickOutsideMiniToc = useCallback( (event: MouseEvent) => { - event.preventDefault(); - event.stopPropagation(); - /* * func "composedPath" returns an array in which the last two elements are "HTML" and "#document", * which do not have the classList property, so they are subtracted before checking by slice() From 2a85535c2108ac0f0012f53056122d173097553f Mon Sep 17 00:00:00 2001 From: Ruslan Bagautdinov Date: Thu, 18 Jul 2024 11:41:59 +0300 Subject: [PATCH 19/22] fix: rename SubNavigation.scss --- src/components/SubNavigation/subnavigation.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/SubNavigation/subnavigation.scss b/src/components/SubNavigation/subnavigation.scss index e16d011b..91da8e24 100644 --- a/src/components/SubNavigation/subnavigation.scss +++ b/src/components/SubNavigation/subnavigation.scss @@ -6,7 +6,6 @@ z-index: 119; display: flex; - width: calc(100% - 12px - 12px); height: 44px; padding: 4px 12px; From 8c86c04e44135099215e02f5358fbe04fc4007b2 Mon Sep 17 00:00:00 2001 From: Ruslan Bagautdinov Date: Thu, 18 Jul 2024 12:12:28 +0300 Subject: [PATCH 20/22] fix: trimEnd in SubNavigation.tsx --- src/components/SubNavigation/SubNavigation.tsx | 2 +- src/components/SubNavigation/subnavigation.scss | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/SubNavigation/SubNavigation.tsx b/src/components/SubNavigation/SubNavigation.tsx index 1f7bee6f..ab4846f3 100644 --- a/src/components/SubNavigation/SubNavigation.tsx +++ b/src/components/SubNavigation/SubNavigation.tsx @@ -168,7 +168,7 @@ export const SubNavigation = ({
{title && title.length > 30 - ? title.substring(0, 30).trimEnd().concat('...') + ? title.substring(0, 30).trim().concat('...') : title ?? ''} diff --git a/src/components/SubNavigation/subnavigation.scss b/src/components/SubNavigation/subnavigation.scss index 91da8e24..e16d011b 100644 --- a/src/components/SubNavigation/subnavigation.scss +++ b/src/components/SubNavigation/subnavigation.scss @@ -6,6 +6,7 @@ z-index: 119; display: flex; + width: calc(100% - 12px - 12px); height: 44px; padding: 4px 12px; From 46eaa9dfea922e3be0ea5ea13f3b83a2636c70fe Mon Sep 17 00:00:00 2001 From: Ruslan Bagautdinov Date: Thu, 18 Jul 2024 16:59:57 +0300 Subject: [PATCH 21/22] update browserlist-db --- package-lock.json | 28 +--------------------------- 1 file changed, 1 insertion(+), 27 deletions(-) diff --git a/package-lock.json b/package-lock.json index c0b7f6a2..09e7e81c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2887,26 +2887,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/caniuse-lite": { - "version": "1.0.30001527", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001527.tgz", - "integrity": "sha512-YkJi7RwPgWtXVSgK4lG9AHH57nSzvvOp9MesgXmw4Q7n0C3H04L0foHqfxcmSAm5AcWb8dW9AYj2tR7/5GnddQ==", - "dev": true, - "funding": [ - { - "type": "opencollective", - "url": "https://opencollective.com/browserslist" - }, - { - "type": "tidelift", - "url": "https://tidelift.com/funding/github/npm/caniuse-lite" - }, - { - "type": "github", - "url": "https://github.com/sponsors/ai" - } - ] - }, "node_modules/chalk": { "version": "2.4.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", @@ -10804,12 +10784,6 @@ "type-fest": "^1.2.1" } }, - "caniuse-lite": { - "version": "1.0.30001527", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001527.tgz", - "integrity": "sha512-YkJi7RwPgWtXVSgK4lG9AHH57nSzvvOp9MesgXmw4Q7n0C3H04L0foHqfxcmSAm5AcWb8dW9AYj2tR7/5GnddQ==", - "dev": true - }, "chalk": { "version": "2.4.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", @@ -15184,4 +15158,4 @@ "dev": true } } -} +} \ No newline at end of file From b49e35859c8819b7d270d046f83a3b96f74ae2fc Mon Sep 17 00:00:00 2001 From: Ruslan Bagautdinov Date: Thu, 18 Jul 2024 18:02:42 +0300 Subject: [PATCH 22/22] fix: package-lock.json --- package-lock.json | 28 +++++++++++++++++++++++++++- 1 file changed, 27 insertions(+), 1 deletion(-) diff --git a/package-lock.json b/package-lock.json index 09e7e81c..c0b7f6a2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2887,6 +2887,26 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/caniuse-lite": { + "version": "1.0.30001527", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001527.tgz", + "integrity": "sha512-YkJi7RwPgWtXVSgK4lG9AHH57nSzvvOp9MesgXmw4Q7n0C3H04L0foHqfxcmSAm5AcWb8dW9AYj2tR7/5GnddQ==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/browserslist" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/caniuse-lite" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ] + }, "node_modules/chalk": { "version": "2.4.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", @@ -10784,6 +10804,12 @@ "type-fest": "^1.2.1" } }, + "caniuse-lite": { + "version": "1.0.30001527", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001527.tgz", + "integrity": "sha512-YkJi7RwPgWtXVSgK4lG9AHH57nSzvvOp9MesgXmw4Q7n0C3H04L0foHqfxcmSAm5AcWb8dW9AYj2tR7/5GnddQ==", + "dev": true + }, "chalk": { "version": "2.4.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", @@ -15158,4 +15184,4 @@ "dev": true } } -} \ No newline at end of file +}