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

R: Simplify inline styles pt3

Browse Source
This commit is contained in:
Ivan 2025-03-13 14:40:56 +03:00
parent a60f63455c
commit ed89591af9
17 changed files with 60 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
rsconcept/frontend/src/app/application-layout.tsx
View File

@ -27,7 +27,7 @@ export function ApplicationLayout() {
<NavigationState>
<div className='min-w-80 antialiased h-full max-w-480 mx-auto'>
<ToasterThemed
className={clsx('text-[14px]', noNavigationAnimation ? 'mt-6' : 'mt-14')}
className={clsx('text-[14px]/[20px]', noNavigationAnimation ? 'mt-6' : 'mt-14')}
autoClose={3000}
draggable={false}
pauseOnFocusLoss={false}

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

@ -40,7 +40,7 @@ export function Dropdown({
<div
tabIndex={-1}
className={clsx(
'cc-dropdown grid bg-prim-0 border rounded-md shadow-lg text-sm',
'cc-dropdown isolate z-topmost absolute grid bg-prim-0 border rounded-md shadow-lg text-sm',
stretchLeft ? 'right-0' : 'left-0',
stretchTop ? 'bottom-0' : 'top-full',
isOpen && 'open',

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

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

7
rsconcept/frontend/src/features/help/items/ui/help-rseditor.tsx
View File

@ -18,7 +18,6 @@ import {
IconTree,
IconTypeGraph
} from '@/components/icons';
import { APP_COLORS } from '@/styling/colors';
import { LinkTopic } from '../../components/link-topic';
import { HelpTopic } from '../../models/help-topic';
@ -69,15 +68,15 @@ export function HelpRSEditor() {
<IconChild className='inline-icon' /> отображение наследованных
</li>
<li>
<span style={{ backgroundColor: APP_COLORS.bgSelected }}>текущая конституента</span>
<span className='bg-sec-200'>текущая конституента</span>
</li>
<li>
<span style={{ backgroundColor: APP_COLORS.bgGreen50 }}>
<span className='bg-(--acc-bg-green50)'>
<LinkTopic text='основа' topic={HelpTopic.CC_RELATIONS} /> текущей
</span>
</li>
<li>
<span style={{ backgroundColor: APP_COLORS.bgOrange50 }}>
<span className='bg-(--acc-bg-orange50)'>
<LinkTopic text='порожденные' topic={HelpTopic.CC_RELATIONS} /> текущей
</span>
</li>

3
rsconcept/frontend/src/features/help/items/ui/help-rsgraph-term.tsx
View File

@ -19,7 +19,6 @@ import {
IconText,
IconTypeGraph
} from '@/components/icons';
import { APP_COLORS } from '@/styling/colors';
import { LinkTopic } from '../../components/link-topic';
import { HelpTopic } from '../../models/help-topic';
@ -49,7 +48,7 @@ export function HelpRSGraphTerm() {
<h1>Изменение узлов</h1>
<li>Клик на узел – выделение</li>
<li>
Левый клик – выбор <span style={{ color: APP_COLORS.fgPurple }}>фокус-конституенты</span>
Левый клик – выбор <span className='text-(--acc-fg-purple)'>фокус-конституенты</span>
</li>
<li>
<IconReset className='inline-icon' /> Esc – сбросить выделение

8
rsconcept/frontend/src/features/help/items/ui/help-type-graph.tsx
View File

@ -1,5 +1,3 @@
import { APP_COLORS } from '@/styling/colors';
import { LinkTopic } from '../../components/link-topic';
import { HelpTopic } from '../../models/help-topic';
@ -21,13 +19,13 @@ export function HelpTypeGraph() {
<h2>Виды узлов</h2>
<li>
<span style={{ backgroundColor: APP_COLORS.bgControls }}>ступень-основание</span>
<span className='bg-prim-200'>ступень-основание</span>
</li>
<li>
<span style={{ backgroundColor: APP_COLORS.bgTeal }}>ступень-булеан</span>
<span className='bg-(--acc-bg-teal)'>ступень-булеан</span>
</li>
<li>
<span style={{ backgroundColor: APP_COLORS.bgOrange }}>ступень декартова произведения</span>
<span className='bg-(--acc-bg-orange)'>ступень декартова произведения</span>
</li>
</div>
);

18
rsconcept/frontend/src/features/library/pages/library-page/view-side-location.tsx
View File

@ -1,4 +1,5 @@
import { toast } from 'react-toastify';
import clsx from 'clsx';
import { useAuthSuspense } from '@/features/auth';
import { HelpTopic } from '@/features/help';
@ -6,9 +7,8 @@ import { BadgeHelp } from '@/features/help/components';
import { MiniButton } from '@/components/control';
import { IconFolderEdit, IconFolderTree } from '@/components/icons';
import { useWindowSize } from '@/hooks/use-window-size';
import { useFitHeight } from '@/stores/app-layout';
import { PARAMETER, prefixes } from '@/utils/constants';
import { prefixes } from '@/utils/constants';
import { infoMsg } from '@/utils/labels';
import { useLibrary } from '../../backend/use-library';
@ -25,7 +25,6 @@ interface ViewSideLocationProps {
export function ViewSideLocation({ isVisible, onRenameLocation }: ViewSideLocationProps) {
const { user, isAnonymous } = useAuthSuspense();
const { items } = useLibrary();
const { isSmall } = useWindowSize();
const location = useLibrarySearchStore(state => state.location);
const setLocation = useLibrarySearchStore(state => state.setLocation);
@ -62,15 +61,10 @@ export function ViewSideLocation({ isVisible, onRenameLocation }: ViewSideLocati
return (
<div
className='max-w-40 sm:max-w-60 flex flex-col text:xs sm:text-sm select-none'
style={{
transitionProperty: 'width, min-width, opacity',
transitionDuration: `${PARAMETER.moveDuration}ms`,
transitionTimingFunction: 'ease-out',
minWidth: isVisible ? (isSmall ? '10rem' : '15rem') : '0',
width: isVisible ? '100%' : '0',
opacity: isVisible ? 1 : 0
}}
className={clsx(
'max-w-40 sm:max-w-60 flex flex-col text:xs sm:text-sm select-none cc-side-location',
isVisible && 'open min-w-[10rem] sm:min-w-[15rem]'
)}
>
<div className='h-8 flex justify-between items-center pr-1 pl-0.5'>
<BadgeHelp topic={HelpTopic.UI_LIBRARY} contentClass='text-sm' offset={5} place='right-start' />

8
rsconcept/frontend/src/features/oss/dialogs/dlg-edit-operation/tab-synthesis.tsx
View File

@ -7,7 +7,6 @@ import { PickSubstitutions } from '@/features/rsform/components';
import { TextArea } from '@/components/input';
import { useDialogsStore } from '@/stores/dialogs';
import { APP_COLORS } from '@/styling/colors';
import { type IOperationUpdateDTO } from '../../backend/types';
import { SubstitutionValidator } from '../../models/oss-api';
@ -45,12 +44,7 @@ export function TabSynthesis() {
)}
/>
<TextArea
disabled
value={validator.msg}
rows={4}
style={{ borderColor: isCorrect ? undefined : APP_COLORS.fgRed, borderWidth: isCorrect ? undefined : '2px' }}
/>
<TextArea disabled value={validator.msg} rows={4} className={isCorrect ? '' : 'border-(--acc-fg-red) border-2'} />
</div>
);
}

13
rsconcept/frontend/src/features/oss/pages/oss-page/editor-oss-graph/graph/node-core.tsx
View File

@ -1,5 +1,7 @@
'use client';
import clsx from 'clsx';
import { IconConsolidation, IconRSForm } from '@/components/icons';
import { Indicator } from '@/components/view';
import { globalIDs } from '@/utils/constants';
@ -52,13 +54,10 @@ export function NodeCore({ node }: NodeCoreProps) {
) : null}
<div
className='text-center line-clamp-2'
style={{
fontSize: longLabel ? '12px' : '14px',
lineHeight: longLabel ? '16px' : '20px',
paddingLeft: '4px',
paddingRight: longLabel ? '10px' : '4px'
}}
className={clsx(
'text-center line-clamp-2 pl-[4px]',
longLabel ? 'text-[12px]/[16px] pr-[10px]' : 'text-[14px]/[20px] pr-[4px]'
)}
>
{node.data.label}
</div>

7
rsconcept/frontend/src/features/rsform/components/badge-grammeme.tsx
View File

@ -1,5 +1,3 @@
import { APP_COLORS } from '@/styling/colors';
import { colorFgGrammeme } from '../colors';
import { labelGrammeme } from '../labels';
import { type GramData } from '../models/language';
@ -15,11 +13,10 @@ interface BadgeGrammemeProps {
export function BadgeGrammeme({ grammeme }: BadgeGrammemeProps) {
return (
<div
className='min-w-12 px-1 border rounded-md text-sm font-medium text-center whitespace-nowrap'
className='min-w-12 px-1 border rounded-md text-sm font-medium text-center whitespace-nowrap bg-prim-0'
style={{
borderColor: colorFgGrammeme(grammeme),
color: colorFgGrammeme(grammeme),
backgroundColor: APP_COLORS.bgInput
color: colorFgGrammeme(grammeme)
}}
>
{labelGrammeme(grammeme)}

24
rsconcept/frontend/src/features/rsform/dialogs/dlg-show-ast/graph/ast-node.tsx
View File

@ -1,16 +1,12 @@
'use client';
import { Handle, Position } from 'reactflow';
import { APP_COLORS } from '@/styling/colors';
import clsx from 'clsx';
import { colorBgSyntaxTree } from '../../../colors';
import { labelSyntaxTree } from '../../../labels';
import { type ISyntaxTreeNode } from '../../../models/rslang';
const FONT_SIZE_MAX = 14;
const FONT_SIZE_MED = 12;
const LABEL_THRESHOLD = 3;
/**
@ -30,24 +26,20 @@ export function ASTNode(node: ASTNodeInternal) {
return (
<>
<Handle type='target' position={Position.Top} style={{ opacity: 0 }} />
<Handle type='target' position={Position.Top} className='opacity-0' />
<div
className='w-full h-full cursor-default flex items-center justify-center rounded-full'
style={{ backgroundColor: colorBgSyntaxTree(node.data) }}
/>
<Handle type='source' position={Position.Bottom} style={{ opacity: 0 }} />
<Handle type='source' position={Position.Bottom} className='opacity-0' />
<div
className='font-math mt-1 w-fit text-center translate-x-[calc(-50%+20px)]'
style={{ fontSize: label.length > LABEL_THRESHOLD ? FONT_SIZE_MED : FONT_SIZE_MAX }}
className={clsx(
'font-math mt-1 w-fit text-center translate-x-[calc(-50%+20px)]',
label.length > LABEL_THRESHOLD ? 'text-[12px]/[16px]' : 'text-[14px]/[20px]'
)}
>
<div className='absolute top-0 left-0 text-center w-full'>{label}</div>
<div
aria-hidden='true'
style={{
WebkitTextStrokeWidth: 2,
WebkitTextStrokeColor: APP_COLORS.bgDefault
}}
>
<div aria-hidden className='cc-ast-label-outline'>
{label}
</div>
</div>

10
rsconcept/frontend/src/features/rsform/dialogs/dlg-show-type-graph/graph/mgraph-node.tsx
View File

@ -2,7 +2,6 @@
import { Handle, Position } from 'reactflow';
import { APP_COLORS } from '@/styling/colors';
import { globalIDs } from '@/utils/constants';
import { colorBgTMGraphNode } from '../../../colors';
@ -28,15 +27,10 @@ export function MGraphNode(node: MGraphNodeInternal) {
<>
<Handle type='source' position={Position.Top} className='opacity-0' />
<div
className='w-full h-full cursor-default flex items-center justify-center rounded-full'
className='cc-node-label w-full h-full cursor-default flex items-center justify-center rounded-full'
data-tooltip-id={globalIDs.tooltip}
data-tooltip-html={tooltipText}
style={{
backgroundColor: colorBgTMGraphNode(node.data),
fontWeight: 600,
WebkitTextStrokeWidth: '0.6px',
WebkitTextStrokeColor: APP_COLORS.bgDefault
}}
style={{ backgroundColor: colorBgTMGraphNode(node.data) }}
>
{node.data.rank === 0 ? node.data.text : node.data.annotations.length > 0 ? node.data.annotations.length : ''}
</div>

1
rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-rsexpression/rs-edit-controls.tsx
View File

@ -98,6 +98,7 @@ export function RSEditorControls({ isOpen, disabled, onEdit }: RSEditorControlsP
'select-none',
isOpen && 'open'
)}
aria-hidden={!isOpen}
>
{MAIN_FIRST_ROW.map(token => (
<RSTokenButton key={`${prefixes.rsedit_btn}${token}`} token={token} onInsert={onEdit} disabled={disabled} />

6
rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-term-graph/graph/tg-node.tsx
View File

@ -54,7 +54,7 @@ export function TGNode(node: TGNodeInternal) {
className={clsx(
'w-full h-full cursor-default flex items-center justify-center rounded-full',
isFocused && 'border-2 border-sec-200',
label.length > LABEL_THRESHOLD ? 'text-[12px]' : 'text-[14px]'
label.length > LABEL_THRESHOLD ? 'text-[12px]/[16px]' : 'text-[14px]/[20px]'
)}
style={{
backgroundColor: node.selected
@ -76,7 +76,7 @@ export function TGNode(node: TGNodeInternal) {
<div
className={clsx(
'mt-1 w-[150px] px-1 text-center translate-x-[calc(-50%+20px)]',
description.length > DESCRIPTION_THRESHOLD ? 'text-[10px]' : 'text-[12px]'
description.length > DESCRIPTION_THRESHOLD ? 'text-[10px]/[12px]' : 'text-[12px]/[16px]'
)}
onContextMenu={handleContextMenu}
onDoubleClick={handleDoubleClick}
@ -84,7 +84,7 @@ export function TGNode(node: TGNodeInternal) {
<div className='absolute top-0 px-1 left-0 text-center w-full line-clamp-3 hover:line-clamp-none'>
{description}
</div>
<div aria-hidden='true' className='line-clamp-3 hover:line-clamp-none cc-text-outline'>
<div aria-hidden className='line-clamp-3 hover:line-clamp-none cc-text-outline'>
{description}
</div>
</div>

1
rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-term-graph/view-hidden.tsx
View File

@ -70,6 +70,7 @@ export function ViewHidden({ items }: ViewHiddenProps) {
'cc-scroll-y',
!isFolded && 'open'
)}
aria-hidden={isFolded}
style={{ maxHeight: hiddenHeight }}
>
{items.map(cstID => {

24
rsconcept/frontend/src/styling/components.css
View File

@ -21,7 +21,6 @@
}
@utility cc-tree-item {
position: relative;
padding-left: 1.5rem;
padding-right: 0.75rem;
@ -80,10 +79,12 @@
-webkit-text-stroke-color: var(--clr-prim-100);
}
@utility cc-dropdown {
position: absolute;
z-index: var(--z-index-topmost);
@utility cc-ast-label-outline {
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: var(--clr-prim-100);
}
@utility cc-dropdown {
transition-property: clip-path, transform;
transition-duration: var(--duration-dropdown);
transition-timing-function: var(--ease-in-out);
@ -97,6 +98,21 @@
}
}
@utility cc-side-location {
transition-property: width, min-width, opacity;
transition-duration: var(--duration-move);
transition-timing-function: var(--ease-bezier);
opacity: 0;
width: 0;
min-width: 0;
&.open {
opacity: 1;
width: 100%;
}
}
@utility cc-view-hidden-header {
transition-property: transform;
transition-duration: var(--duration-dropdown);

4
rsconcept/frontend/src/styling/setup.css
View File

@ -169,7 +169,3 @@
@utility border {
border-radius: 0.25rem;
}
@utility sticky {
z-index: 20;
}