ConceptProd/ConceptPortal-public
1
0
Fork 0
mirror of https://github.com/IRBorisov/ConceptPortal.git synced 2025-06-25 20:40:36 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

F: Improve hover buttons design

Browse Source
This commit is contained in:
Ivan 2025-06-17 22:28:56 +03:00
parent aaf4bf275e
commit 4759abd03f
12 changed files with 24 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
rsconcept/frontend/src/components/control/button.tsx
View File

@ -40,7 +40,7 @@ export function Button({
className={cn(
'inline-flex gap-2 items-center justify-center',
'font-medium select-none disabled:cursor-auto disabled:opacity-75',
'bg-secondary text-secondary-foreground cc-hover cc-animate-color',
'bg-secondary text-secondary-foreground cc-hover-bg cc-animate-color',
dense ? 'px-1' : 'px-3 py-1',
loading ? 'cursor-progress' : 'cursor-pointer',
noOutline ? 'outline-hidden focus-visible:bg-selected' : 'focus-outline',

2
rsconcept/frontend/src/components/control/mini-button.tsx
View File

@ -41,7 +41,7 @@ export function MiniButton({
'rounded-lg',
'cc-controls cc-animate-background',
'cursor-pointer disabled:cursor-auto',
noHover ? 'outline-hidden' : 'cc-hover',
noHover ? 'outline-hidden' : 'cc-hover-bg',
!noPadding && 'px-1 py-1',
className
)}

2
rsconcept/frontend/src/components/control/selector-button.tsx
View File

@ -32,7 +32,7 @@ export function SelectorButton({
'text-sm font-controls select-none',
'text-btn cc-controls',
'disabled:cursor-auto cursor-pointer',
'cc-hover cc-animate-color',
'cc-hover-text cc-animate-color',
className
)}
data-tooltip-id={!!title || !!titleHtml ? globalIDs.tooltip : undefined}

10
rsconcept/frontend/src/components/data-table/pagination-tools.tsx
View File

@ -36,7 +36,7 @@ export function PaginationTools<TData>({
<button
type='button'
aria-label='Первая страница'
className='cc-hover cc-controls cc-animate-color focus-outline'
className='cc-hover-bg cc-controls cc-animate-color focus-outline'
onClick={() => table.setPageIndex(0)}
disabled={!table.getCanPreviousPage()}
>
@ -45,7 +45,7 @@ export function PaginationTools<TData>({
<button
type='button'
aria-label='Предыдущая страница'
className='cc-hover cc-controls cc-animate-color focus-outline'
className='cc-hover-bg cc-controls cc-animate-color focus-outline'
onClick={() => table.previousPage()}
disabled={!table.getCanPreviousPage()}
>
@ -55,7 +55,7 @@ export function PaginationTools<TData>({
id={id ? `${id}__page` : undefined}
title='Номер страницы. Выделите для ручного ввода'
aria-label='Номер страницы'
className='w-6 text-center bg-transparent focus-outline'
className='w-6 text-center bg-transparent focus-outline rounded-md'
value={table.getState().pagination.pageIndex + 1}
onChange={event => {
const page = event.target.value ? Number(event.target.value) - 1 : 0;
@ -67,7 +67,7 @@ export function PaginationTools<TData>({
<button
type='button'
aria-label='Следующая страница'
className='cc-hover cc-controls cc-animate-color focus-outline'
className='cc-hover-bg cc-controls cc-animate-color focus-outline'
onClick={() => table.nextPage()}
disabled={!table.getCanNextPage()}
>
@ -76,7 +76,7 @@ export function PaginationTools<TData>({
<button
type='button'
aria-label='Последняя страница'
className='cc-hover cc-controls cc-animate-color focus-outline'
className='cc-hover-bg cc-controls cc-animate-color focus-outline'
onClick={() => table.setPageIndex(table.getPageCount() - 1)}
disabled={!table.getCanNextPage()}
>

2
rsconcept/frontend/src/components/data-table/table-row.tsx
View File

@ -70,7 +70,7 @@ export function TableRow<TData>({
<tr
className={cn(
'cc-scroll-row',
'cc-hover cc-animate-background duration-fade',
'cc-hover-bg cc-animate-background duration-fade',
!noHeader && 'scroll-mt-[calc(2px+2rem)]',
table.options.enableRowSelection && row.getIsSelected()
? 'cc-selected'

2
rsconcept/frontend/src/components/dropdown/dropdown-button.tsx
View File

@ -38,7 +38,7 @@ export function DropdownButton({
'text-left text-sm text-ellipsis whitespace-nowrap',
'disabled:cc-controls disabled:opacity-75',
'focus-outline cc-animate-background',
!!onClick ? 'cc-hover cursor-pointer disabled:cursor-auto' : 'bg-secondary text-secondary-foreground',
!!onClick ? 'cc-hover-bg cursor-pointer disabled:cursor-auto' : 'bg-secondary text-secondary-foreground',
className
)}
data-tooltip-id={!!title || !!titleHtml ? globalIDs.tooltip : undefined}

2
rsconcept/frontend/src/components/input/select-tree.tsx
View File

@ -90,7 +90,7 @@ export function SelectTree<ItemType>({
<div
key={`${prefix}${index}`}
className={clsx(
'cc-tree-item relative cc-scroll-row cc-hover',
'cc-tree-item relative cc-scroll-row cc-hover-bg',
isActive ? 'max-h-7 py-1 border-b' : 'max-h-0 opacity-0 pointer-events-none',
value === item && 'cc-selected'
)}

2
rsconcept/frontend/src/components/tabs/tab-label.tsx
View File

@ -33,7 +33,7 @@ export function TabLabel({
'text-sm whitespace-nowrap font-controls',
'select-none',
'outline-hidden',
!disabled && 'hover:cursor-pointer cc-hover',
!disabled && 'hover:cursor-pointer cc-hover-bg',
disabled && 'text-muted-foreground',
className
)}

2
rsconcept/frontend/src/features/library/components/select-location.tsx
View File

@ -62,7 +62,7 @@ export function SelectLocation({ value, dense, prefix, onClick, className, style
!dense && 'h-7 sm:h-8',
'pr-3 py-1 flex items-center gap-2',
'cc-scroll-row',
'cc-hover cc-animate-color duration-fade',
'cc-hover-bg cc-animate-color duration-fade',
'cursor-pointer',
'leading-3 sm:leading-4',
activeNode === item && 'cc-selected'

4
rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-rsexpression/rs-local-button.tsx
View File

@ -33,8 +33,8 @@ export function RSLocalButton({
className={clsx(
'w-7 sm:w-8 h-5 sm:h-6',
'cursor-pointer disabled:cursor-default',
'rounded-none',
'cc-hover cc-controls cc-animate-color',
'rounded-md',
'cc-hover-text cc-controls cc-animate-color',
'font-math',
className
)}

4
rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-rsexpression/rs-token-button.tsx
View File

@ -20,9 +20,9 @@ export function RSTokenButton({ token, disabled, onInsert }: RSTokenButtonProps)
onClick={() => onInsert(token)}
className={clsx(
'h-5 sm:h-6',
'px-1',
'px-1 rounded-md',
'outline-hidden',
'cc-hover cc-controls cc-animate-color',
'cc-hover-text cc-controls cc-animate-color',
'font-math',
'cursor-pointer disabled:cursor-default',
label.length > 3 ? 'w-14.5 md:w-18' : 'w-7.25 md:w-9'

8
rsconcept/frontend/src/styling/utilities.css
View File

@ -20,12 +20,18 @@
background-color: var(--color-selected);
}
@utility cc-hover {
@utility cc-hover-bg {
&:hover:not(:disabled) {
background-color: var(--color-accent);
}
}
@utility cc-hover-text {
&:hover:not(:disabled) {
color: var(--color-foreground);
}
}
@utility focus-outline {
--focus-color: var(--color-ring);