ConceptProd/Portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

F: Improve animations and styling

Browse Source
This commit is contained in:
Ivan 2025-02-22 16:12:29 +03:00
parent 6e1d99122e
commit d123d96ea3
10 changed files with 25 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
rsconcept/frontend/src/app/ApplicationLayout.tsx
View File

@ -27,7 +27,7 @@ export function ApplicationLayout() {
<NavigationState>
<div className='min-w-[20rem] antialiased h-full max-w-[120rem] mx-auto'>
<ToasterThemed
className='text-[14px] cc-animate-position'
className='text-[14px]'
style={{ marginTop: noNavigationAnimation ? '1.5rem' : '3.5rem' }}
autoClose={3000}
draggable={false}

5
rsconcept/frontend/src/app/Navigation/Navigation.tsx
View File

@ -42,9 +42,10 @@ export function Navigation() {
'cc-shadow-border'
)}
style={{
transitionProperty: 'height, translate',
willChange: 'max-height, translate',
transitionProperty: 'max-height, translate',
transitionDuration: `${PARAMETER.moveDuration}ms`,
height: noNavigationAnimation ? '0rem' : '3rem',
maxHeight: noNavigationAnimation ? '0rem' : '3rem',
translate: noNavigationAnimation ? '0 -1.5rem' : '0'
}}
>

7
rsconcept/frontend/src/app/Navigation/ToggleNavigation.tsx
View File

@ -22,7 +22,8 @@ export function ToggleNavigation() {
!noNavigation && 'flex-col-reverse'
)}
style={{
transitionProperty: 'height, width, background-color',
willChange: 'height, width',
transitionProperty: 'height, width',
transitionDuration: `${PARAMETER.moveDuration}ms`,
height: noNavigationAnimation ? '2rem' : '3rem',
width: noNavigationAnimation ? '3rem' : '2rem'
@ -32,7 +33,7 @@ export function ToggleNavigation() {
<button
tabIndex={-1}
type='button'
className='p-1'
className='p-1 cursor-pointer'
onClick={toggleDarkMode}
data-tooltip-id={globalIDs.tooltip}
data-tooltip-content={darkMode ? 'Тема: Темная' : 'Тема: Светлая'}
@ -44,7 +45,7 @@ export function ToggleNavigation() {
<button
tabIndex={-1}
type='button'
className='p-1'
className='p-1 cursor-pointer'
onClick={toggleNoNavigation}
data-tooltip-id={globalIDs.tooltip}
data-tooltip-content={noNavigationAnimation ? 'Показать навигацию' : 'Скрыть навигацию'}

1
rsconcept/frontend/src/components/Dropdown/Dropdown.tsx
View File

@ -46,6 +46,7 @@ export function Dropdown({
className
)}
style={{
willChange: 'clip-path, transform',
transitionProperty: 'clip-path, transform',
transitionDuration: `${PARAMETER.dropdownDuration}ms`,
transitionTimingFunction: 'ease-in-out',

5
rsconcept/frontend/src/components/Input/SelectTree.tsx
View File

@ -98,11 +98,12 @@ export function SelectTree<ItemType>({
onClick={event => handleSetValue(event, item)}
style={{
borderBottomWidth: isActive ? '1px' : '0px',
transitionProperty: 'height, opacity, padding',
willChange: 'max-height, opacity, padding',
transitionProperty: 'max-height, opacity, padding',
transitionDuration: `${PARAMETER.moveDuration}ms`,
paddingTop: isActive ? '0.25rem' : '0',
paddingBottom: isActive ? '0.25rem' : '0',
height: isActive ? 'min-content' : '0',
maxHeight: isActive ? '1.75rem' : '0',
opacity: isActive ? '1' : '0'
}}
>

1
rsconcept/frontend/src/features/help/pages/ManualsPage/TopicsDropdown.tsx
View File

@ -66,6 +66,7 @@ export function TopicsDropdown({ activeTopic, onChangeTopic }: TopicsDropdownPro
)}
style={{
maxHeight: treeHeight,
willChange: 'clip-path',
transitionProperty: 'clip-path',
transitionDuration: `${PARAMETER.moveDuration}ms`,
clipPath: menu.isOpen ? 'inset(0% 0% 0% 0%)' : 'inset(0% 100% 0% 0%)'

4
rsconcept/frontend/src/features/library/components/MiniSelectorOSS.tsx
View File

@ -13,13 +13,13 @@ import { type ILibraryItemReference } from '../models/library';
interface MiniSelectorOSSProps extends Styling {
items: ILibraryItemReference[];
onSelect: (event: React.MouseEvent<Element>, newValue: ILibraryItemReference) => void;
onSelect: (event: React.MouseEvent<HTMLElement>, newValue: ILibraryItemReference) => void;
}
export function MiniSelectorOSS({ items, onSelect, className, ...restProps }: MiniSelectorOSSProps) {
const ossMenu = useDropdown();
function onToggle(event: React.MouseEvent<Element>) {
function onToggle(event: React.MouseEvent<HTMLElement>) {
if (items.length > 1) {
ossMenu.toggle();
} else {

7
rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorRSExpression/RSEditControls.tsx
View File

@ -98,11 +98,12 @@ export function RSEditorControls({ isOpen, disabled, onEdit }: RSEditorControlsP
'select-none'
)}
style={{
transitionProperty: 'clipPath, height',
transitionDuration: `${PARAMETER.moveDuration}ms`,
clipPath: isOpen ? 'inset(0% 0% 0% 0%)' : 'inset(0% 0% 100% 0%)',
marginTop: isOpen ? '0.25rem' : '0rem',
height: isOpen ? 'max-content' : '0rem'
willChange: 'max-height',
transitionProperty: 'max-height',
transitionDuration: `${PARAMETER.moveDuration}ms`,
maxHeight: isOpen ? '4.5rem' : '0rem'
}}
>
{MAIN_FIRST_ROW.map(token => (

6
rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorTermGraph/ViewHidden.tsx
View File

@ -62,11 +62,10 @@ export function ViewHidden({ items, selected, toggleSelection, setFocus, schema,
<div
className='w-fit select-none'
style={{
transitionProperty: 'margin, translate',
transitionProperty: 'translate',
transitionDuration: `${PARAMETER.fastAnimation}ms`,
transitionTimingFunction: 'ease-out',
marginLeft: isFolded ? '0.75rem' : '0',
translate: isFolded ? '0' : 'calc(6.5rem - 50%)'
translate: isFolded ? '0.75rem' : 'calc(6.5rem - 50%)'
}}
>
{`Скрытые [${localSelected.length} | ${items.length}]`}
@ -84,6 +83,7 @@ export function ViewHidden({ items, selected, toggleSelection, setFocus, schema,
style={{
pointerEvents: isFolded ? 'none' : 'auto',
maxHeight: hiddenHeight,
willChange: 'clip-path',
transitionProperty: 'clip-path',
transitionDuration: `${PARAMETER.fastAnimation}ms`,
transitionTimingFunction: 'ease-out',

5
rsconcept/frontend/src/features/rsform/pages/RSFormPage/ViewConstituents/ViewConstituents.tsx
View File

@ -41,11 +41,12 @@ export function ViewConstituents({ isBottom, isMounted }: ViewConstituentsProps)
}
)}
style={{
transitionProperty: 'opacity, width',
willChange: 'opacity, max-width',
transitionProperty: 'opacity, max-width',
transitionDuration: `${2 * PARAMETER.moveDuration}ms`,
transitionTimingFunction: 'ease-in-out',
opacity: isMounted ? 1 : 0,
width: isMounted ? 'fit-content' : '0'
maxWidth: isMounted ? '100%' : '0'
}}
>
<ConstituentsSearch