mirror/spacedrive
1
0
Fork 0
mirror of https://github.com/spacedriveapp/spacedrive.git synced 2026-05-18 21:36:56 -04:00
Code Issues Packages Projects Releases Wiki Activity

[ENG-666] Index rules UI tweak (#885)

Browse Source 
* props & ui tweak

* margin tweak
This commit is contained in:
ameer2468
2023-05-30 15:47:32 +03:00
committed by GitHub
parent bfe5a09204
commit a12720d5a8
2 changed files with 11 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
interface/app/$libraryId/settings/library/locations/AddLocationDialog.tsx
View File

@@ -229,6 +229,8 @@ export const AddLocationDialog = ({
field={field}
label="File indexing rules:"
className="relative flex flex-col"
rulesContainerClass="grid grid-cols-2 gap-1"
ruleButtonClass="w-full"
/>
)}
control={form.control}

13
interface/app/$libraryId/settings/library/locations/IndexerRuleEditor/index.tsx
View File

@@ -20,11 +20,15 @@ export interface IndexerRuleEditorProps<T extends IndexerRuleIdFieldType> {
infoText?: string;
editable?: boolean;
className?: string;
ruleButtonClass?: string;
rulesContainerClass?: string;
}
export default function IndexerRuleEditor<T extends IndexerRuleIdFieldType>({
infoText,
editable,
ruleButtonClass,
rulesContainerClass,
...props
}: IndexerRuleEditorProps<T>) {
const listIndexerRules = useLibraryQuery(['locations.indexer_rules.list']);
@@ -64,8 +68,8 @@ export default function IndexerRuleEditor<T extends IndexerRuleIdFieldType>({
return (
<div className={props.className} onClick={() => setSelectedRule(undefined)}>
<div className={'flex items-start justify-between'}>
<div className="grow">
<Label className="mb-2">{props.label || 'Indexer rules'}</Label>
<div className="mb-1 grow">
<Label>{props.label || 'Indexer rules'}</Label>
{infoText && <InfoText className="mb-4">{infoText}</InfoText>}
</div>
{editable && (
@@ -95,7 +99,7 @@ export default function IndexerRuleEditor<T extends IndexerRuleIdFieldType>({
)}
</div>
<div className="flex flex-wrap justify-center gap-1">
<div className={clsx(rulesContainerClass, 'flex flex-wrap gap-1')}>
{indexRules ? (
indexRules.map((rule) => (
<RuleButton
@@ -116,7 +120,8 @@ export default function IndexerRuleEditor<T extends IndexerRuleIdFieldType>({
className={clsx(
!(editable && rule.default) && 'cursor-pointer',
editable || 'select-none',
selectedRule?.id === rule.id ? 'bg-app-darkBox' : 'bg-app-input'
selectedRule?.id === rule.id ? 'bg-app-darkBox' : 'bg-app-input',
ruleButtonClass
)}
/>
))