diff --git a/src/components/common/NodeHorizontalCard/styles.module.scss b/src/components/common/NodeHorizontalCard/styles.module.scss index 6eb626c4..32007320 100644 --- a/src/components/common/NodeHorizontalCard/styles.module.scss +++ b/src/components/common/NodeHorizontalCard/styles.module.scss @@ -27,8 +27,8 @@ &.new { &::after { content: ' '; - width: 8px; - height: 8px; + width: 12px; + height: 12px; border-radius: 100%; background: $color_danger; box-shadow: $content_bg 0 0 0 5px; diff --git a/src/components/common/SubTitle/index.tsx b/src/components/common/SubTitle/index.tsx index e24510ea..ebfd8961 100644 --- a/src/components/common/SubTitle/index.tsx +++ b/src/components/common/SubTitle/index.tsx @@ -13,11 +13,9 @@ interface Props extends DivProps { const SubTitle: FC = ({ isLoading, children, ...rest }) => (
- - - {children} - - + + {children} +
); diff --git a/src/components/common/SubTitle/styles.module.scss b/src/components/common/SubTitle/styles.module.scss index c3a36b26..98651785 100644 --- a/src/components/common/SubTitle/styles.module.scss +++ b/src/components/common/SubTitle/styles.module.scss @@ -1,25 +1,7 @@ -@import 'src/styles/variables.scss'; +@import "src/styles/variables.scss"; .title { font: $font_12_semibold; text-transform: uppercase; - display: flex; - flex-direction: row; - align-items: center; - gap: $gap / 2; - color: var(--gray_75); - - a { - text-decoration: none; - color: inherit; - } - - &::after { - content: ' '; - display: flex; - height: 2px; - background-color: var(--gray_90); - flex: 1; - border-radius: 2px; - } + opacity: 0.3; } diff --git a/src/components/node/NodeRelated/styles.module.scss b/src/components/node/NodeRelated/styles.module.scss index 7a26a31a..1d4de34d 100644 --- a/src/components/node/NodeRelated/styles.module.scss +++ b/src/components/node/NodeRelated/styles.module.scss @@ -29,6 +29,11 @@ .title { padding-left: 5px; + + a { + text-decoration: none; + color: inherit; + } } .text { diff --git a/src/constants/dom/index.ts b/src/constants/dom/index.ts index 3d9462a8..be18c3a4 100644 --- a/src/constants/dom/index.ts +++ b/src/constants/dom/index.ts @@ -5,5 +5,3 @@ export const isTablet = () => { return window.innerWidth < 599; }; - -export const headerHeight = 64; // px diff --git a/src/containers/flow/FlowGrid/components/FlowCell/components/FlowCellMenu/index.tsx b/src/containers/flow/FlowGrid/components/FlowCell/components/FlowCellMenu/index.tsx index 365a29a3..b188e600 100644 --- a/src/containers/flow/FlowGrid/components/FlowCell/components/FlowCellMenu/index.tsx +++ b/src/containers/flow/FlowGrid/components/FlowCell/components/FlowCellMenu/index.tsx @@ -23,7 +23,6 @@ interface Props { const FlowCellMenu: FC = ({ onClose, - currentView, hasDescription, toggleViewDescription, descriptionEnabled, @@ -60,7 +59,7 @@ const FlowCellMenu: FC = ({ /> - {hasDescription && currentView !== 'single' && ( + {hasDescription && ( = ({ children, heading, color, ...rest }) => { - const colorIsBright = !!color && getLuminance(color) > 0.4; - - const textColor = colorIsBright - ? desaturate(darken(color, 0.5), 0.1) - : undefined; - - return ( -
- {heading &&
{heading}
} - {formatText(children)} -
- ); -}; +const FlowCellText: FC = ({ children, heading, ...rest }) => ( +
+ {heading &&
{heading}
} + {formatText(children)} +
+); export { FlowCellText }; diff --git a/src/containers/flow/FlowGrid/components/FlowCell/components/FlowCellText/styles.module.scss b/src/containers/flow/FlowGrid/components/FlowCell/components/FlowCellText/styles.module.scss index 6fbd4a2f..7a421447 100644 --- a/src/containers/flow/FlowGrid/components/FlowCell/components/FlowCellText/styles.module.scss +++ b/src/containers/flow/FlowGrid/components/FlowCell/components/FlowCellText/styles.module.scss @@ -1,24 +1,10 @@ -@import 'src/styles/variables'; +@import "src/styles/variables"; .text { - @include blur; - + padding: $gap; line-height: 1.3em; - display: flex; - flex-direction: column; - min-height: 0; -} - -.description { - mask-image: linear-gradient( - to bottom, - rgba(255, 255, 255, 1) 50%, - rgba(0, 0, 0, 0) 95% - ); - flex: 1; - overflow: hidden; } .heading { - margin-bottom: 0.25em; + margin-bottom: 0.4em; } diff --git a/src/containers/flow/FlowGrid/components/FlowCell/index.tsx b/src/containers/flow/FlowGrid/components/FlowCell/index.tsx index c83da0f1..25e9d158 100644 --- a/src/containers/flow/FlowGrid/components/FlowCell/index.tsx +++ b/src/containers/flow/FlowGrid/components/FlowCell/index.tsx @@ -1,4 +1,4 @@ -import { FC, useCallback, useMemo } from 'react'; +import { FC, useMemo } from 'react'; import classNames from 'classnames'; @@ -9,8 +9,6 @@ import { useWindowSize } from '~/hooks/dom/useWindowSize'; import { useFlowCellControls } from '~/hooks/flow/useFlowCellControls'; import { FlowDisplay, INode } from '~/types'; -import { isFullyVisible } from '../../../../../utils/dom'; - import { CellShade } from './components/CellShade'; import { FlowCellImage } from './components/FlowCellImage'; import { FlowCellMenu } from './components/FlowCellMenu'; @@ -27,7 +25,7 @@ interface Props { text?: string; flow: FlowDisplay; canEdit?: boolean; - onChange: (id: INode['id'], flow: FlowDisplay) => void; + onChangeCellView: (id: INode['id'], flow: FlowDisplay) => void; } const FlowCell: FC = ({ @@ -39,7 +37,7 @@ const FlowCell: FC = ({ text, title, canEdit = false, - onChange, + onChangeCellView, }) => { const { isTablet } = useWindowSize(); @@ -47,30 +45,6 @@ const FlowCell: FC = ({ ((!!flow.display && flow.display !== 'single') || !image) && flow.show_description && !!text; - - const { - isActive: isMenuActive, - activate, - ref, - deactivate, - } = useClickOutsideFocus(); - - const onChangeWithScroll = useCallback( - (...args) => { - onChange(...args); - - setTimeout(() => { - if (!isFullyVisible(ref.current)) { - ref.current?.scrollIntoView({ - behavior: 'auto', - block: 'center', - }); - } - }, 0); - }, - [onChange, ref], - ); - const { hasDescription, setViewHorizontal, @@ -78,7 +52,13 @@ const FlowCell: FC = ({ setViewQuadro, setViewSingle, toggleViewDescription, - } = useFlowCellControls(id, text, flow, onChangeWithScroll); + } = useFlowCellControls(id, text, flow, onChangeCellView); + const { + isActive: isMenuActive, + activate, + ref, + deactivate, + } = useClickOutsideFocus(); const shadeSize = useMemo(() => { const min = isTablet ? 10 : 15; @@ -131,9 +111,8 @@ const FlowCell: FC = ({ {title}} - color={color} > - {text} + {text!} )} @@ -145,7 +124,7 @@ const FlowCell: FC = ({ /> )} - {!!title && !withText && ( + {!!title && ( = observer( text={node.description} title={node.title} canEdit={fetched && isUser && canEditNode(node, user)} - onChange={onChangeCellView} + onChangeCellView={onChangeCellView} /> ))} diff --git a/src/containers/flow/FlowGrid/styles.module.scss b/src/containers/flow/FlowGrid/styles.module.scss index b3af5556..ea6378f4 100644 --- a/src/containers/flow/FlowGrid/styles.module.scss +++ b/src/containers/flow/FlowGrid/styles.module.scss @@ -1,5 +1,11 @@ @import 'src/styles/variables'; +@mixin mobile { + @media (max-width: $cell * 2) { + @content; + } +} + .cell { &.horizontal, &.quadro { diff --git a/src/containers/flow/FlowStamp/components/FlowRecent/index.tsx b/src/containers/flow/FlowStamp/components/FlowRecent/index.tsx new file mode 100644 index 00000000..f46249d0 --- /dev/null +++ b/src/containers/flow/FlowStamp/components/FlowRecent/index.tsx @@ -0,0 +1,33 @@ +import { FC } from 'react'; + +import { NodeHorizontalCard } from '~/components/common/NodeHorizontalCard'; +import { IFlowNode } from '~/types'; + +import styles from './styles.module.scss'; + +interface Props { + recent: IFlowNode[]; + updated: IFlowNode[]; +} + +const FlowRecent: FC = ({ recent, updated }) => { + return ( + <> +
+ {updated && + updated.map((node) => ( + + ))} +
+ +
+ {recent && + recent.map((node) => ( + + ))} +
+ + ); +}; + +export { FlowRecent }; diff --git a/src/containers/flow/FlowStamp/components/FlowRecent/styles.module.scss b/src/containers/flow/FlowStamp/components/FlowRecent/styles.module.scss new file mode 100644 index 00000000..4925f482 --- /dev/null +++ b/src/containers/flow/FlowStamp/components/FlowRecent/styles.module.scss @@ -0,0 +1,7 @@ +@import 'src/styles/variables'; + +.recent { + @container sizer (width < #{$flow_hide_recents}) { + display: none; + } +} diff --git a/src/containers/flow/FlowStamp/index.tsx b/src/containers/flow/FlowStamp/index.tsx index 03f271a8..3569fd7c 100644 --- a/src/containers/flow/FlowStamp/index.tsx +++ b/src/containers/flow/FlowStamp/index.tsx @@ -2,15 +2,17 @@ import { FC, FormEvent, useCallback, useMemo } from 'react'; import classNames from 'classnames'; -import { Card } from '~/components/common/Card'; +import { Group } from '~/components/common/Group'; import { Icon } from '~/components/common/Icon'; -import { NodeHorizontalCard } from '~/components/common/NodeHorizontalCard'; -import { SubTitle } from '~/components/common/SubTitle'; +import { Superpower } from '~/components/common/Superpower'; import { InputText } from '~/components/input/InputText'; +import { Toggle } from '~/components/input/Toggle'; +import { experimentalFeatures } from '~/constants/features'; import styles from '~/containers/flow/FlowStamp/styles.module.scss'; import { useFlowContext } from '~/utils/providers/FlowProvider'; import { useSearchContext } from '~/utils/providers/SearchProvider'; +import { FlowRecent } from './components/FlowRecent'; import { FlowSearchResults } from './components/FlowSearchResults'; interface Props { @@ -62,55 +64,60 @@ const FlowStamp: FC = ({ isFluid, onToggleLayout }) => { return (
- -
- - -
+
+ + {searchText ? ( - - Результаты поиска +
+
+
+ Результаты поиска + +
+ +
+ +
+
+
+ ) : ( +
+
+ Что нового? + +
- +
- - ) : ( - - Что нового? +
+ )} - {updates.length > 0 && ( -
- {updates.map((node) => ( - - ))} -
- )} - - {recent.length > 0 && ( -
- {recent.map((node) => ( - - ))} -
- )} -
+ {experimentalFeatures.liquidFlow && ( + +
+ + +
Жидкое течение
+
+
+
)}
); diff --git a/src/containers/flow/FlowStamp/styles.module.scss b/src/containers/flow/FlowStamp/styles.module.scss index 8dd15e59..550094c3 100644 --- a/src/containers/flow/FlowStamp/styles.module.scss +++ b/src/containers/flow/FlowStamp/styles.module.scss @@ -1,24 +1,22 @@ -@import '~/styles/variables'; +@import '../../../styles/variables'; .wrap { display: flex; flex-direction: column; width: 100%; - gap: $gap; -} - -.search { - background-color: var(--content_bg_lighter); + border-radius: $radius; } .grid { + @include outer_shadow(); display: flex; justify-content: stretch; flex-direction: column; flex: 1; + border-radius: $radius; + position: relative; + background: $content_bg; overflow: hidden; - gap: $gap; - padding: $gap; &::after { content: ''; @@ -35,25 +33,49 @@ display: none; } } - - &.noUpdates { - @container sizer (width < #{$flow_hide_recents}) { - display: none; - } - } -} - -.items.recent { - @container sizer (width < #{$flow_hide_recents}) { - display: none; - background-color: red; - } } .items { + padding: 0 $gap 0 $gap; flex: 1; display: flex; flex-direction: column; + overflow: hidden; +} + +.label { + display: flex; + flex-direction: row; + min-width: 0; + padding: $gap; + border-radius: $radius; + + @include title_with_line(); + + color: transparentize(white, $amount: 0.8); + + &_search { + color: white; + padding-left: $gap * 1.2; + } + + & > :global(.line) { + margin-right: $gap; + } +} + +.label_text { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.search { + @include outer_shadow(); + + background: $content_bg_lighter; + padding: $gap; + border-radius: $radius; } .search_icon { @@ -67,3 +89,34 @@ stroke-width: 0.5; transition: opacity 0.25s; } + +.toggles { + & > div { + padding: $gap; + font: $font_14_semibold; + } + + &__label { + cursor: pointer; + } +} + +.fluid_toggle { + @include desktop { + display: none; + } +} + +.whatsnew { + @container sizer (width < #{$flow_hide_recents}) { + display: none; + } +} + +.search_results { + overflow: auto; + + @include tablet { + margin-top: $gap; + } +} diff --git a/src/layouts/FlowLayout/styles.module.scss b/src/layouts/FlowLayout/styles.module.scss index fbc432c3..4a9bec2f 100644 --- a/src/layouts/FlowLayout/styles.module.scss +++ b/src/layouts/FlowLayout/styles.module.scss @@ -30,7 +30,7 @@ $cols: math.div($content_width, $cell); min-height: 200px; @include flow_grid() { - grid-template-rows: min(50vh, 33cqw); + grid-template-rows: 40vh; } @include flow_breakpoint(5); diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss index 8f50e794..a7086215 100644 --- a/src/styles/_fonts.scss +++ b/src/styles/_fonts.scss @@ -1,3 +1,4 @@ + $bold: 700; $semibold: 600; $regular: 400; @@ -5,20 +6,10 @@ $medium: 500; $light: 300; $extra_light: 200; -$font: - Montserrat, - -apple-system, - BlinkMacSystemFont, - 'Segoe UI', - Roboto, - 'Helvetica Neue', - Arial, - 'Noto Sans', - sans-serif, - 'Apple Color Emoji', - 'Segoe UI Emoji', - 'Segoe UI Symbol', - 'Noto Color Emoji'; + +$font: Montserrat, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, +'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', +'Noto Color Emoji'; $font_48_semibold: $semibold 48px $font; $font_48_bold: $bold 48px $font; @@ -48,6 +39,5 @@ $font_8_regular: $regular 8px $font; $font_8_semibold: $semibold 8px $font; $font_cell_title: $font_24_semibold; -$font_cell_title_compact: $font_18_semibold; $font_hero_title: $bold 40px $font; $font_boris: $bold 72px $font; diff --git a/src/styles/themes/_default.scss b/src/styles/themes/_default.scss index ea630d2e..dea7ea0e 100644 --- a/src/styles/themes/_default.scss +++ b/src/styles/themes/_default.scss @@ -63,8 +63,10 @@ $_brown: #23201f; --content_bg_success: #{transparentize($_wisegreen, 0.7)}; --content_bg_info: #{transparentize($_blue, 0.5)}; --content_bg_danger: #{transparentize($_red, 0.5)}; - --content_bg_backdrop: url('/images/noise.png') - #{transparentize($_brown, 0.3)}; + --content_bg_backdrop: url('/images/noise.png') #{transparentize( + $_brown, + 0.3 + )}; --content_bg_hero: url('/images/noise.png') #{transparentize($_brown, 0.6)}; // white shades (move to --vars) diff --git a/src/styles/themes/_horizon.scss b/src/styles/themes/_horizon.scss index 4d36e19b..4707b2f8 100644 --- a/src/styles/themes/_horizon.scss +++ b/src/styles/themes/_horizon.scss @@ -85,8 +85,10 @@ $_ocean: #25b0bc; --gray_90: #{transparentize(white, 0.95)}; // page background - --page-background: 50% 50% / cover no-repeat url('/images/horizon_bg.svg') - #{darken($_cold, 4%)} fixed; + --page-background: 50% 50% / cover no-repeat url('/images/horizon_bg.svg') #{darken( + $_cold, + 4% + )} fixed; --page-background-top: linear-gradient( #{$_accent} -150%, #{transparentize($_ocean, 0.99)} 100px, diff --git a/src/utils/dom.ts b/src/utils/dom.ts index 473877d0..dd0b9d4d 100644 --- a/src/utils/dom.ts +++ b/src/utils/dom.ts @@ -10,7 +10,6 @@ import { COMMENT_BLOCK_TYPES, ICommentBlock, } from '~/constants/comment'; -import { headerHeight } from '~/constants/dom'; import { IFile, ValueOf } from '~/types'; import { CONFIG } from '~/utils/config'; import { @@ -214,14 +213,3 @@ export const sizeOf = (bytes: number): string => { (bytes / Math.pow(1024, e)).toFixed(2) + ' ' + ' KMGTP'.charAt(e) + 'B' ); }; - -/** Tells if element is in view */ -export const isFullyVisible = (element?: HTMLElement): boolean => { - if (!element) { - return false; - } - - const rect = element.getBoundingClientRect(); - - return rect?.top > headerHeight && rect?.bottom < window.innerHeight; -};