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

F: Improve navigation toggles

Browse Source
This commit is contained in:
Ivan 2024-12-20 11:54:10 +03:00
parent 48ce020c8f
commit f5b26db1ff
4 changed files with 6 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
rsconcept/frontend/src/app/Navigation/NavigationButton.tsx
View File

@ -31,9 +31,8 @@ function NavigationButton({
className={clsx( className={clsx(
'mr-1 h-full', // prettier: split lines 'mr-1 h-full', // prettier: split lines
'flex items-center gap-1', 'flex items-center gap-1',
'clr-btn-nav cc-animate-color', 'clr-btn-nav cc-animate-color duration-500',
'rounded-xl', 'rounded-xl',
'transition duration-500',
'font-controls whitespace-nowrap', 'font-controls whitespace-nowrap',
{ {
'px-2': text, 'px-2': text,

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

@ -12,7 +12,7 @@ function ToggleNavigation() {
className={clsx( className={clsx(
'absolute top-0 right-0 z-navigation', 'absolute top-0 right-0 z-navigation',
'min-h-[2rem] min-w-[2rem]', 'min-h-[2rem] min-w-[2rem]',
'flex items-center justify-center gap-1', 'flex items-end justify-center gap-1',
'select-none', 'select-none',
!noNavigation && 'flex-col-reverse' !noNavigation && 'flex-col-reverse'
)} )}
@ -27,7 +27,7 @@ function ToggleNavigation() {
<button <button
tabIndex={-1} tabIndex={-1}
type='button' type='button'
className='p-1 rounded-full' className='p-1'
onClick={toggleDarkMode} onClick={toggleDarkMode}
data-tooltip-id={globals.tooltip} data-tooltip-id={globals.tooltip}
data-tooltip-content={darkMode ? 'Тема: Темная' : 'Тема: Светлая'} data-tooltip-content={darkMode ? 'Тема: Темная' : 'Тема: Светлая'}
@ -39,7 +39,7 @@ function ToggleNavigation() {
<button <button
tabIndex={-1} tabIndex={-1}
type='button' type='button'
className='p-1 rounded-full' className='p-1'
onClick={toggleNoNavigation} onClick={toggleNoNavigation}
data-tooltip-id={globals.tooltip} data-tooltip-id={globals.tooltip}
data-tooltip-content={noNavigationAnimation ? 'Показать навигацию' : 'Скрыть навигацию'} data-tooltip-content={noNavigationAnimation ? 'Показать навигацию' : 'Скрыть навигацию'}

2
rsconcept/frontend/src/components/ui/TabLabel.tsx
View File

@ -20,7 +20,7 @@ function TabLabel({ label, title, titleHtml, hideTitle, className, ...otherProps
className={clsx( className={clsx(
'min-w-[5.5rem] h-full', 'min-w-[5.5rem] h-full',
'px-2 py-1 flex justify-center', 'px-2 py-1 flex justify-center',
'clr-hover cc-animate-color', 'clr-hover cc-animate-color duration-150',
'text-sm whitespace-nowrap font-controls', 'text-sm whitespace-nowrap font-controls',
'select-none hover:cursor-pointer', 'select-none hover:cursor-pointer',
'outline-none', 'outline-none',

2
rsconcept/frontend/src/styling/styles.css
View File

@ -223,6 +223,6 @@
.cc-animate-color { .cc-animate-color {
transition-property: color, background-color; transition-property: color, background-color;
transition-timing-function: var(--transition-bezier); transition-timing-function: var(--transition-bezier);
transition-duration: var(--duration-select); transition-duration: var(--duration-fade);
} }
} }