Prevent text selections on control elements

This commit is contained in:
IRBorisov 2023-08-16 10:46:22 +03:00
parent d50afb290e
commit 101631a8be
9 changed files with 31 additions and 10 deletions

View File

@ -27,7 +27,7 @@ function Button({
disabled={disabled ?? loading} disabled={disabled ?? loading}
onClick={onClick} onClick={onClick}
title={tooltip} title={tooltip}
className={`inline-flex items-center gap-2 align-middle justify-center ${padding} ${borderClass} ${colorClass} ${widthClass} ${cursor}`} className={`inline-flex items-center gap-2 align-middle justify-center select-none ${padding} ${borderClass} ${colorClass} ${widthClass} ${cursor}`}
{...props} {...props}
> >
{icon && <span>{icon}</span>} {icon && <span>{icon}</span>}

View File

@ -8,7 +8,7 @@ interface SubmitButtonProps {
function SubmitButton({ text = 'ОК', icon, disabled, loading = false }: SubmitButtonProps) { function SubmitButton({ text = 'ОК', icon, disabled, loading = false }: SubmitButtonProps) {
return ( return (
<button type='submit' <button type='submit'
className={`px-4 py-2 inline-flex items-center gap-2 align-middle justify-center font-bold disabled:cursor-not-allowed border rounded clr-btn-primary ${loading ? ' cursor-progress' : ''}`} className={`px-4 py-2 inline-flex items-center gap-2 align-middle justify-center font-bold select-none disabled:cursor-not-allowed border rounded clr-btn-primary ${loading ? ' cursor-progress' : ''}`}
disabled={disabled ?? loading} disabled={disabled ?? loading}
> >
{icon && <span>{icon}</span>} {icon && <span>{icon}</span>}

View File

@ -10,7 +10,7 @@ function Footer() {
<div className='px-4 underline whitespace-nowrap'> <div className='px-4 underline whitespace-nowrap'>
<Link to='/manuals' tabIndex={-1}>Справка</Link> <br/> <Link to='/manuals' tabIndex={-1}>Справка</Link> <br/>
<Link to='/library?filter=common' tabIndex={-1}>Библиотека КС</Link> <br/> <Link to='/library?filter=common' tabIndex={-1}>Библиотека КС</Link> <br/>
<a href={urls.gitrepo} className='flex'> <a href={urls.gitrepo} className='flex' tabIndex={-1}>
<GithubIcon /> <GithubIcon />
<span className='ml-1'>Репозиторий</span> <span className='ml-1'>Репозиторий</span>
</a> </a>

View File

@ -35,7 +35,7 @@ function Navigation () {
</button>} </button>}
{!noNavigation && {!noNavigation &&
<div className='pr-6 pl-2 py-2.5 h-[4rem] flex items-center justify-between border-b-2 clr-nav rounded-none'> <div className='pr-6 pl-2 py-2.5 h-[4rem] flex items-center justify-between border-b-2 clr-nav rounded-none'>
<div className='flex items-start justify-start '> <div className='flex items-start justify-start select-none'>
<Logo title='КонцептПортал' /> <Logo title='КонцептПортал' />
<TopSearch /> <TopSearch />
</div> </div>

View File

@ -247,7 +247,7 @@ function EditorItems({ onOpenEdit, onCreateCst, onDeleteCst }: EditorItemsProps)
return ( return (
<div className='w-full'> <div className='w-full'>
<div <div
className={'flex justify-start w-full gap-1 px-2 py-1 border-y items-center h-[2.2rem] clr-app' + className={'flex justify-start w-full gap-1 px-2 py-1 border-y items-center h-[2.2rem] select-none clr-app' +
(!noNavigation ? ' sticky z-10 top-[0rem]' : ' sticky z-10 top-[0rem]')} (!noNavigation ? ' sticky z-10 top-[0rem]' : ' sticky z-10 top-[0rem]')}
> >
<div className='mr-3 whitespace-nowrap'> <div className='mr-3 whitespace-nowrap'>

View File

@ -212,6 +212,11 @@ function EditorTermGraph({ onOpenEdit }: EditorTermGraphProps) {
focusOnSelect: false focusOnSelect: false
}); });
const allSelected: string[] = useMemo(
() => {
return [ ... selectedDismissed.map(id => String(id)), ... selections];
}, [selectedDismissed, selections]);
const handleRecreate = useCallback( const handleRecreate = useCallback(
() => { () => {
graphRef.current?.resetControls(); graphRef.current?.resetControls();
@ -239,6 +244,12 @@ function EditorTermGraph({ onOpenEdit }: EditorTermGraphProps) {
if (onNodeClick) onNodeClick(node); if (onNodeClick) onNodeClick(node);
}, [onNodeClick, selections, onOpenEdit]); }, [onNodeClick, selections, onOpenEdit]);
const handleCanvasClick = useCallback(
(event: MouseEvent) => {
setSelectedDismissed([]);
if (onCanvasClick) onCanvasClick(event);
}, [onCanvasClick]);
function getOptions() { function getOptions() {
return { return {
noHermits: noHermits, noHermits: noHermits,
@ -301,7 +312,7 @@ function EditorTermGraph({ onOpenEdit }: EditorTermGraphProps) {
initial={getOptions()} initial={getOptions()}
onConfirm={handleChangeOptions} onConfirm={handleChangeOptions}
/>} />}
<div className='flex flex-col py-2 border-t border-r w-[14.7rem] pr-2 text-sm' style={{height: canvasHeight}}> <div className='flex flex-col py-2 border-t border-r w-[14.7rem] pr-2 text-sm select-none' style={{height: canvasHeight}}>
{hoverCst && {hoverCst &&
<div className='relative'> <div className='relative'>
<InfoConstituenta <InfoConstituenta
@ -309,6 +320,16 @@ function EditorTermGraph({ onOpenEdit }: EditorTermGraphProps) {
className='absolute top-0 left-0 z-50 w-[25rem] min-h-[11rem] overflow-y-auto border h-fit clr-app px-3' className='absolute top-0 left-0 z-50 w-[25rem] min-h-[11rem] overflow-y-auto border h-fit clr-app px-3'
/> />
</div>} </div>}
<div className='mr-3 whitespace-nowrap'>
Выбраны
<span className='ml-2'>
<b>{allSelected.length}</b> из {schema?.stats?.count_all ?? 0}
</span>
</div>
<Divider margins='mt-3 mb-2' />
<div className='flex items-center w-full gap-1'> <div className='flex items-center w-full gap-1'>
<Button <Button
icon={<FilterCogIcon size={7} />} icon={<FilterCogIcon size={7} />}
@ -421,7 +442,7 @@ function EditorTermGraph({ onOpenEdit }: EditorTermGraphProps) {
selections={selections} selections={selections}
actives={actives} actives={actives}
onNodeClick={handleNodeClick} onNodeClick={handleNodeClick}
onCanvasClick={onCanvasClick} onCanvasClick={handleCanvasClick}
onNodePointerOver={handleHoverIn} onNodePointerOver={handleHoverIn}
onNodePointerOut={handleHoverOut} onNodePointerOut={handleHoverOut}
cameraMode={ orbit ? 'orbit' : is3D ? 'rotate' : 'pan'} cameraMode={ orbit ? 'orbit' : is3D ? 'rotate' : 'pan'}

View File

@ -223,7 +223,7 @@ function RSTabs() {
defaultFocus={true} defaultFocus={true}
selectedTabClassName='font-bold' selectedTabClassName='font-bold'
> >
<TabList className='flex items-start w-fit clr-bg-pop'> <TabList className='flex items-start select-none w-fit clr-bg-pop'>
<RSTabsMenu <RSTabsMenu
onDestroy={onDestroySchema} onDestroy={onDestroySchema}
showCloneDialog={() => setShowClone(true)} showCloneDialog={() => setShowClone(true)}

View File

@ -24,7 +24,7 @@ function StatusBar({ isModified, constituenta, parseData }: StatusBarProps) {
const data = mapStatusInfo.get(status)!; const data = mapStatusInfo.get(status)!;
return ( return (
<div title={data.tooltip} <div title={data.tooltip}
className={`text-sm h-[1.6rem] w-[10rem] font-semibold inline-flex border items-center justify-center align-middle ${data.color}`}> className={`text-sm h-[1.6rem] w-[10rem] font-semibold inline-flex border items-center select-none justify-center align-middle ${data.color}`}>
Статус: [ {data.text} ] Статус: [ {data.text} ]
</div> </div>
) )

View File

@ -158,7 +158,7 @@ function ViewSideConstituents({ expression, baseHeight, activeID, onOpenEdit }:
onChange={setFilterMatch} onChange={setFilterMatch}
/> />
<input type='text' <input type='text'
className='w-full px-2 bg-white outline-none hover:text-clip clr-bg-pop clr-border' className='w-full px-2 bg-white outline-none select-none hover:text-clip clr-bg-pop clr-border'
placeholder='наберите текст фильтра' placeholder='наберите текст фильтра'
value={filterText} value={filterText}
onChange={event => setFilterText(event.target.value)} onChange={event => setFilterText(event.target.value)}