From dc60c79f811de490a2986526320536c5940e79b9 Mon Sep 17 00:00:00 2001 From: Ivan <8611739+IRBorisov@users.noreply.github.com> Date: Thu, 12 Sep 2024 11:17:01 +0300 Subject: [PATCH] M: Minor UI improvements --- .../src/components/ui/DividerAnimated.tsx | 29 +++++++++ .../frontend/src/components/ui/Tooltip.tsx | 4 +- .../src/context/ConceptOptionsContext.tsx | 7 +-- .../src/pages/OssPage/MenuOssTabs.tsx | 5 +- .../EditorRSFormCard/ToolbarVersioning.tsx | 2 +- .../src/pages/RSFormPage/MenuRSTabs.tsx | 9 ++- rsconcept/frontend/src/styling/setup.css | 27 +++++++- rsconcept/frontend/src/styling/styles.css | 63 +++++++------------ 8 files changed, 95 insertions(+), 51 deletions(-) create mode 100644 rsconcept/frontend/src/components/ui/DividerAnimated.tsx diff --git a/rsconcept/frontend/src/components/ui/DividerAnimated.tsx b/rsconcept/frontend/src/components/ui/DividerAnimated.tsx new file mode 100644 index 00000000..90063af6 --- /dev/null +++ b/rsconcept/frontend/src/components/ui/DividerAnimated.tsx @@ -0,0 +1,29 @@ +import clsx from 'clsx'; +import { motion } from 'framer-motion'; + +import { CProps } from '@/components/props'; +import { animateDropdownItem } from '@/styling/animations'; + +interface DividerAnimatedProps extends CProps.Styling { + vertical?: boolean; + margins?: string; +} + +function DividerAnimated({ vertical, margins = 'mx-2', className, ...restProps }: DividerAnimatedProps) { + return ( + + ); +} + +export default DividerAnimated; diff --git a/rsconcept/frontend/src/components/ui/Tooltip.tsx b/rsconcept/frontend/src/components/ui/Tooltip.tsx index bf504644..6421e021 100644 --- a/rsconcept/frontend/src/components/ui/Tooltip.tsx +++ b/rsconcept/frontend/src/components/ui/Tooltip.tsx @@ -36,12 +36,12 @@ function Tooltip({ 'max-h-[calc(100svh-6rem)]', 'overflow-y-auto overflow-x-hidden sm:overflow-hidden overscroll-contain', 'border shadow-md', - 'text-balance', + 'text-pretty', layer, className )} classNameArrow={layer} - style={{ ...{ paddingTop: '2px', paddingBottom: '2px' }, ...style }} + style={{ ...{ paddingTop: '2px', paddingBottom: '2px', paddingLeft: '8px', paddingRight: '8px' }, ...style }} variant={darkMode ? 'dark' : 'light'} place={place} {...restProps} diff --git a/rsconcept/frontend/src/context/ConceptOptionsContext.tsx b/rsconcept/frontend/src/context/ConceptOptionsContext.tsx index 914f2cd4..94697905 100644 --- a/rsconcept/frontend/src/context/ConceptOptionsContext.tsx +++ b/rsconcept/frontend/src/context/ConceptOptionsContext.tsx @@ -1,6 +1,5 @@ 'use client'; -import clsx from 'clsx'; import { createContext, useCallback, useContext, useLayoutEffect, useMemo, useState } from 'react'; import Tooltip from '@/components/ui/Tooltip'; @@ -147,17 +146,17 @@ export const OptionsState = ({ children }: OptionsStateProps) => { > <> {children} diff --git a/rsconcept/frontend/src/pages/OssPage/MenuOssTabs.tsx b/rsconcept/frontend/src/pages/OssPage/MenuOssTabs.tsx index cd6f8e00..38fc8f3a 100644 --- a/rsconcept/frontend/src/pages/OssPage/MenuOssTabs.tsx +++ b/rsconcept/frontend/src/pages/OssPage/MenuOssTabs.tsx @@ -15,6 +15,7 @@ import { IconShare } from '@/components/Icons'; import Button from '@/components/ui/Button'; +import DividerAnimated from '@/components/ui/DividerAnimated'; import Dropdown from '@/components/ui/Dropdown'; import DropdownButton from '@/components/ui/DropdownButton'; import { useAccessMode } from '@/context/AccessModeContext'; @@ -94,9 +95,11 @@ function MenuOssTabs({ onDestroy }: MenuOssTabsProps) { onClick={handleDelete} /> ) : null} + + + {user ? ( } onClick={handleCreateNew} diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorRSFormCard/ToolbarVersioning.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorRSFormCard/ToolbarVersioning.tsx index 56b81e20..1199ff56 100644 --- a/rsconcept/frontend/src/pages/RSFormPage/EditorRSFormCard/ToolbarVersioning.tsx +++ b/rsconcept/frontend/src/pages/RSFormPage/EditorRSFormCard/ToolbarVersioning.tsx @@ -20,7 +20,7 @@ function ToolbarVersioning({ blockReload }: ToolbarVersioningProps) { прикрепленную к операционной схеме' : !controller.isContentEditable ? 'Откатить к версии' : 'Переключитесь на
неактуальную версию' diff --git a/rsconcept/frontend/src/pages/RSFormPage/MenuRSTabs.tsx b/rsconcept/frontend/src/pages/RSFormPage/MenuRSTabs.tsx index 688c490f..995baf46 100644 --- a/rsconcept/frontend/src/pages/RSFormPage/MenuRSTabs.tsx +++ b/rsconcept/frontend/src/pages/RSFormPage/MenuRSTabs.tsx @@ -27,6 +27,7 @@ import { IconUpload } from '@/components/Icons'; import Button from '@/components/ui/Button'; +import DividerAnimated from '@/components/ui/DividerAnimated'; import Dropdown from '@/components/ui/Dropdown'; import DropdownButton from '@/components/ui/DropdownButton'; import { useAccessMode } from '@/context/AccessModeContext'; @@ -184,9 +185,11 @@ function MenuRSTabs({ onDestroy }: MenuRSTabsProps) { onClick={handleDelete} /> ) : null} + + + {user ? ( } onClick={handleCreateNew} @@ -235,8 +238,10 @@ function MenuRSTabs({ onDestroy }: MenuRSTabsProps) { disabled={!controller.isContentEditable || controller.isProcessing} onClick={handleInlineSynthesis} /> + + + } diff --git a/rsconcept/frontend/src/styling/setup.css b/rsconcept/frontend/src/styling/setup.css index f6fab3f5..b2625adf 100644 --- a/rsconcept/frontend/src/styling/setup.css +++ b/rsconcept/frontend/src/styling/setup.css @@ -141,7 +141,32 @@ div:not(.dense) > p { @apply rounded; } - :is(.sticky) { + .border, + .border-x, + .border-y, + .border-b, + .border-t, + .border-l, + .border-r, + .border-2, + .border-x-2, + .border-y-2, + .border-b-2, + .border-t-2, + .border-l-2, + .border-r-2, + .divide-x, + .divide-y, + .divide-x-2, + .divide-y-2 { + border-color: var(--cl-bg-40); + @apply divide-inherit; + .dark & { + border-color: var(--cd-bg-40); + } + } + + .sticky { z-index: 20; } } diff --git a/rsconcept/frontend/src/styling/styles.css b/rsconcept/frontend/src/styling/styles.css index cf3958b4..3d9bd351 100644 --- a/rsconcept/frontend/src/styling/styles.css +++ b/rsconcept/frontend/src/styling/styles.css @@ -21,35 +21,8 @@ } @layer components { - :is( - .clr-border, - .border, - .border-x, - .border-y, - .border-b, - .border-t, - .border-l, - .border-r, - .border-2, - .border-x-2, - .border-y-2, - .border-b-2, - .border-t-2, - .border-l-2, - .border-r-2, - .divide-x, - .divide-y, - .divide-x-2, - .divide-y-2 - ) { - border-color: var(--cl-bg-40); - @apply divide-inherit; - .dark & { - border-color: var(--cd-bg-40); - } - } - - :is(.clr-app, .clr-btn-nav) { + .clr-app, + .clr-btn-nav { background-color: var(--cl-bg-100); .dark & { background-color: var(--cd-bg-100); @@ -86,14 +59,18 @@ } } - :is(.clr-controls, .clr-tab, .clr-btn-default) { + .clr-controls, + .clr-tab, + .clr-btn-default { background-color: var(--cl-bg-80); .dark & { background-color: var(--cd-bg-80); } } - :is(.clr-primary, .clr-btn-primary:hover, .clr-btn-primary:focus-visible) { + .clr-primary, + .clr-btn-primary:hover, + .clr-btn-primary:focus-visible { @apply transition; color: var(--cl-prim-fg-100); background-color: var(--cl-prim-bg-100); @@ -103,7 +80,8 @@ } } - :is(.clr-selected, .clr-btn-primary) { + .clr-selected, + .clr-btn-primary { color: var(--cl-fg-100); background-color: var(--cl-prim-bg-80); .dark & { @@ -142,14 +120,17 @@ } } - :is(.clr-text-primary, .clr-text-url) { + .clr-text-primary, + .clr-text-url { color: var(--cl-prim-fg-80); .dark & { color: var(--cd-prim-fg-80); } } - :is(.clr-text-controls, .clr-btn-nav, .clr-btn-clear) { + .clr-text-controls, + .clr-btn-nav, + .clr-btn-clear { color: var(--cl-fg-80); &:disabled { color: var(--cl-fg-60); @@ -169,7 +150,9 @@ } } - :is(.clr-text-default, input:disabled:not(::placeholder), textarea:disabled:not(::placeholder)) { + .clr-text-default, + input:disabled:not(::placeholder), + textarea:disabled:not(::placeholder) { opacity: 1; -webkit-text-fill-color: var(--cl-fg-100); color: var(--cl-fg-100); @@ -225,11 +208,6 @@ @apply top-[1.9rem] pt-1 right-1/2 translate-x-1/2; } - .cc-modal-blur { - opacity: 0.3; - backdrop-filter: blur(2px); - } - .cc-label { @apply text-sm font-medium cursor-default select-text whitespace-nowrap; } @@ -261,6 +239,11 @@ backdrop-filter: blur(3px); } + .cc-modal-blur { + opacity: 0.3; + backdrop-filter: blur(2px); + } + .cc-shadow-border { @apply shadow-sm shadow-[var(--cl-bg-40)] dark:shadow-[var(--cd-bg-40)]; }