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

R: Improve styling semantics pt2

Browse Source
This commit is contained in:
Ivan 2024-12-17 11:37:42 +03:00
parent d250a9fda0
commit 7e63103d6b
20 changed files with 85 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@ -21,7 +21,7 @@ function ToggleNavigation() {
data-tooltip-id={globals.tooltip}
data-tooltip-content={noNavigationAnimation ? 'Показать навигацию' : 'Скрыть навигацию'}
style={{
transitionProperty: 'height, width',
transitionProperty: 'height, width, background-color',
transitionDuration: `${PARAMETER.moveDuration}ms`,
height: noNavigationAnimation ? '1.2rem' : '3rem',
width: noNavigationAnimation ? '3rem' : '1.2rem'

2
rsconcept/frontend/src/components/select/SelectLocation.tsx
View File

@ -59,7 +59,7 @@ function SelectLocation({ value, folderTree, dense, prefix, onClick, className,
!dense && 'min-h-[2.0825rem] sm:min-h-[2.3125rem]',
'pr-3 py-1 flex items-center gap-2',
'cc-scroll-row',
'clr-hover',
'clr-hover cc-animate-color',
'cursor-pointer',
'leading-3 sm:leading-4',
activeNode === item && 'clr-selected'

1
rsconcept/frontend/src/components/ui/Button.tsx
View File

@ -43,6 +43,7 @@ function Button({
className={clsx(
'inline-flex gap-2 items-center justify-center',
'select-none disabled:cursor-auto',
'cc-animate-color',
{
'border rounded': !noBorder,
'px-1': dense,

5
rsconcept/frontend/src/components/ui/Checkbox.tsx
View File

@ -65,9 +65,10 @@ function Checkbox({
<div
className={clsx(
'max-w-[1rem] min-w-[1rem] h-4', // prettier: split lines
'border rounded-sm',
'border rounded-sm ',
'cc-animate-color',
{
'clr-primary': value !== false,
'bg-sec-600 text-sec-0': value !== false,
'bg-prim-100': value === false
}
)}

3
rsconcept/frontend/src/components/ui/CheckboxTristate.tsx
View File

@ -67,8 +67,9 @@ function CheckboxTristate({
className={clsx(
'w-4 h-4', // prettier: split lines
'border rounded-sm',
'cc-animate-color',
{
'clr-primary': value !== false,
'bg-sec-600 text-sec-0': value !== false,
'bg-prim-100': value === false
}
)}

8
rsconcept/frontend/src/components/ui/DataTable/PaginationTools.tsx
View File

@ -47,7 +47,7 @@ function PaginationTools<TData>({
<div className='flex'>
<button
type='button'
className='clr-hover clr-text-controls'
className='clr-hover clr-text-controls cc-animate-color'
onClick={() => table.setPageIndex(0)}
disabled={!table.getCanPreviousPage()}
>
@ -55,7 +55,7 @@ function PaginationTools<TData>({
</button>
<button
type='button'
className='clr-hover clr-text-controls'
className='clr-hover clr-text-controls cc-animate-color'
onClick={() => table.previousPage()}
disabled={!table.getCanPreviousPage()}
>
@ -75,7 +75,7 @@ function PaginationTools<TData>({
/>
<button
type='button'
className='clr-hover clr-text-controls'
className='clr-hover clr-text-controls cc-animate-color'
onClick={() => table.nextPage()}
disabled={!table.getCanNextPage()}
>
@ -83,7 +83,7 @@ function PaginationTools<TData>({
</button>
<button
type='button'
className='clr-hover clr-text-controls'
className='clr-hover clr-text-controls cc-animate-color'
onClick={() => table.setPageIndex(table.getPageCount() - 1)}
disabled={!table.getCanNextPage()}
>

3
rsconcept/frontend/src/components/ui/DataTable/TableBody.tsx
View File

@ -71,7 +71,8 @@ function TableBody<TData>({
<tr
key={row.id}
className={clsx(
'cc-scroll-row clr-hover',
'cc-scroll-row',
'clr-hover cc-animate-color',
!noHeader && 'scroll-mt-[calc(2px+2rem)]',
row.getIsSelected() ? 'clr-selected' : index % 2 === 0 ? 'bg-prim-200' : 'bg-prim-100'
)}

1
rsconcept/frontend/src/components/ui/DropdownButton.tsx
View File

@ -39,6 +39,7 @@ function DropdownButton({
'px-3 py-1 inline-flex items-center gap-2',
'text-left text-sm overflow-ellipsis whitespace-nowrap',
'disabled:clr-text-controls',
'cc-animate-color',
{
'clr-hover': onClick,
'cursor-pointer disabled:cursor-auto': onClick,

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

@ -9,7 +9,7 @@ function DropdownCheckbox({ setValue, disabled, ...restProps }: CheckboxProps) {
className={clsx(
'px-3 py-1',
'text-left overflow-ellipsis whitespace-nowrap',
'disabled:clr-text-controls',
'disabled:clr-text-controls cc-animate-color',
!!setValue && !disabled && 'clr-hover'
)}
>

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

@ -19,7 +19,7 @@ function Indicator({ icon, title, titleHtml, hideTitle, noPadding, className, ..
return (
<div
className={clsx(
'clr-btn-clear',
'clr-text-controls',
'outline-none',
{
'px-1 py-1': !noPadding

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

@ -35,7 +35,7 @@ function MiniButton({
tabIndex={tabIndex ?? -1}
className={clsx(
'rounded-lg',
'clr-btn-clear',
'clr-text-controls cc-animate-color',
'cursor-pointer disabled:cursor-auto',
{
'px-1 py-1': !noPadding,

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

@ -89,7 +89,7 @@ function SelectTree<ItemType>({
className={clsx(
'pr-3 pl-6 border-b',
'cc-scroll-row',
'bg-prim-200 clr-hover',
'bg-prim-200 clr-hover cc-animate-color',
'cursor-pointer',
value === item && 'clr-selected'
)}

1
rsconcept/frontend/src/components/ui/SelectorButton.tsx
View File

@ -41,6 +41,7 @@ function SelectorButton({
'text-sm font-controls select-none',
'text-btn clr-text-controls',
'disabled:cursor-auto cursor-pointer',
'cc-animate-color',
{
'clr-hover': transparent,
'border': !transparent

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

@ -24,7 +24,7 @@ function SubmitButton({ text = 'ОК', icon, disabled, loading, className, ...re
'px-3 py-1 flex gap-2 items-center justify-center',
'border',
'font-medium',
'clr-btn-primary',
'clr-btn-primary cc-animate-color',
'select-none disabled:cursor-auto',
loading && 'cursor-progress',
className

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

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

2
rsconcept/frontend/src/dialogs/DlgEditReference/WordformButton.tsx
View File

@ -21,7 +21,7 @@ function WordformButton({ text, example, grams, onSelectGrams, isSelected, ...re
'p-1',
'border rounded-none',
'cursor-pointer',
'clr-btn-clear clr-hover',
'clr-text-controls clr-hover cc-animate-color',
isSelected && 'clr-selected'
)}
{...restProps}

2
rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/RSLocalButton.tsx
View File

@ -33,7 +33,7 @@ function RSLocalButton({
'w-[1.7rem] sm:w-[2rem] h-5 sm:h-6',
'cursor-pointer disabled:cursor-default',
'rounded-none',
'clr-hover clr-btn-clear',
'clr-hover clr-text-controls cc-animate-color',
'font-math',
className
)}

2
rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/RSTokenButton.tsx
View File

@ -22,7 +22,7 @@ function RSTokenButton({ token, disabled, onInsert }: RSTokenButtonProps) {
'h-5 sm:h-6',
'px-1',
'outline-none',
'clr-hover clr-btn-clear',
'clr-hover clr-text-controls cc-animate-color',
'font-math',
'cursor-pointer disabled:cursor-default',
{

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

@ -34,51 +34,67 @@
}
.clr-btn-default {
color: var(--clr-prim-999);
background-color: var(--clr-prim-200);
}
.clr-primary,
.clr-btn-primary:hover,
.clr-btn-primary:focus-visible {
@apply transition;
color: var(--clr-sec-0);
background-color: var(--clr-sec-600);
&:disabled {
color: var(--clr-prim-800);
background-color: var(--clr-prim-200);
}
&:hover:not(:disabled) {
color: var(--clr-prim-999);
background-color: var(--clr-sec-100);
}
}
.clr-btn-primary {
color: var(--clr-prim-999);
background-color: var(--clr-sec-200);
&:disabled {
color: var(--clr-prim-800);
background-color: var(--clr-prim-200);
}
&:hover:not(:disabled),
&:focus-visible {
color: var(--clr-sec-0);
background-color: var(--clr-sec-600);
}
&:focus-visible,
.focus-frame:has(:focus-visible) {
outline-width: 2px;
outline-style: solid;
outline-color: var(--clr-sec-600);
}
}
:is(.clr-disabled, .clr-btn-default, .clr-btn-primary):disabled {
@apply transition;
.clr-btn-nav {
color: var(--clr-prim-800);
background-color: var(--clr-prim-200);
&:hover:not(:disabled) {
background-color: var(--clr-sec-100);
}
&:disabled {
color: var(--clr-prim-600);
}
}
:is(.clr-hover, .clr-btn-nav, .clr-btn-default):hover:not(:disabled) {
@apply transition;
.clr-hover:hover:not(:disabled) {
color: var(--clr-prim-999);
background-color: var(--clr-sec-100);
}
:is(.clr-outline, .clr-btn-primary, .focus-frame):focus-visible,
:is(.clr-outline, .focus-frame):focus-visible,
.focus-frame:has(:focus-visible) {
outline-width: 2px;
outline-style: solid;
outline-color: var(--clr-sec-600);
}
.clr-text-controls,
.clr-btn-nav,
.clr-btn-clear {
color: var(--clr-prim-800);
background-color: transparent;
&:disabled {
color: var(--clr-prim-600);
}
}
.clr-text-default,
input:disabled:not(::placeholder),
textarea:disabled:not(::placeholder) {
@ -87,6 +103,14 @@
color: var(--clr-prim-999);
}
.clr-text-controls {
color: var(--clr-prim-800);
background-color: transparent;
&:disabled {
color: var(--clr-prim-600);
}
}
.icon-primary {
:not([disabled]) > & {
color: var(--clr-sec-800);
@ -164,12 +188,6 @@
box-shadow: 0 1px 2px 0 var(--clr-prim-400);
}
.cc-animate-position {
transition-property: transform top left bottom right margin padding;
transition-timing-function: var(--transition-bezier);
transition-duration: var(--duration-move);
}
.cc-fade-in {
opacity: 1;
@ -182,6 +200,12 @@
}
}
.cc-animate-position {
transition-property: transform top left bottom right margin padding;
transition-timing-function: var(--transition-bezier);
transition-duration: var(--duration-move);
}
.cc-animate-modal {
clip-path: inset(0% 0% 0% 0%);
opacity: 1;
@ -195,4 +219,10 @@
opacity: 0;
}
}
.cc-animate-color {
transition-property: color, background-color;
transition-timing-function: var(--transition-bezier);
transition-duration: var(--duration-select);
}
}