aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/PropertiesButtons.tsx92
1 files changed, 48 insertions, 44 deletions
diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index 6105cc1b5..2e3668268 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -56,24 +56,25 @@ export class PropertiesButtons extends React.Component<{}, {}> {
propertyToggleBtn = (label: (on?: any) => string, property: string, tooltip: (on?: any) => string, icon: (on?: any) => any, onClick?: (dv: Opt<DocumentView>, doc: Doc, property: string) => void, useUserDoc?: boolean) => {
const targetDoc = useUserDoc ? Doc.UserDoc() : this.selectedDoc;
const onPropToggle = (dv: Opt<DocumentView>, doc: Doc, prop: string) => ((dv?.layoutDoc || doc)[prop] = (dv?.layoutDoc || doc)[prop] ? false : true);
- return !targetDoc ? null : <Toggle
- toggleStatus={BoolCast(targetDoc[property])}
- text={label(targetDoc?.[property])}
- color={StrCast(Doc.UserDoc().userColor)}
- icon={icon(targetDoc?.[property] as any)}
- iconPlacement={'left'}
- align={'flex-start'}
- fillWidth={true}
- toggleType={ToggleType.BUTTON}
- onClick={undoable(() => {
- if (SelectionManager.Views().length > 1) {
- SelectionManager.Views().forEach(dv => (onClick ?? onPropToggle)(dv, dv.rootDoc, property));
- } else if (targetDoc) (onClick ?? onPropToggle)(undefined, targetDoc, property);
- }, property)}
- />
+ return !targetDoc ? null : (
+ <Toggle
+ toggleStatus={BoolCast(targetDoc[property])}
+ text={label(targetDoc?.[property])}
+ color={StrCast(Doc.UserDoc().userColor)}
+ icon={icon(targetDoc?.[property] as any)}
+ iconPlacement={'left'}
+ align={'flex-start'}
+ fillWidth={true}
+ toggleType={ToggleType.BUTTON}
+ onClick={undoable(() => {
+ if (SelectionManager.Views().length > 1) {
+ SelectionManager.Views().forEach(dv => (onClick ?? onPropToggle)(dv, dv.rootDoc, property));
+ } else if (targetDoc) (onClick ?? onPropToggle)(undefined, targetDoc, property);
+ }, property)}
+ />
+ );
};
-
// this implments a container pattern by marking the targetDoc (collection) as a lightbox
// that always fits its contents to its container and that hides all other documents when
// a link is followed that targets a 'lightbox' destination
@@ -110,7 +111,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
(dv, doc) => {
const tdoc = dv?.rootDoc || doc;
const newtitle = !tdoc._layout_showTitle ? 'title' : tdoc._layout_showTitle === 'title' ? 'title:hover' : '';
- tdoc._layout_showTitle = newtitle;
+ tdoc._layout_showTitle = newtitle ? newtitle : undefined;
}
);
}
@@ -148,7 +149,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
@computed get clustersButton() {
return this.propertyToggleBtn(
- on => (on ?'DISABLE CLUSTERS' : 'HIGHLIGHT CLUSTERS'),
+ on => (on ? 'DISABLE CLUSTERS' : 'HIGHLIGHT CLUSTERS'),
'_freeform_useClusters',
on => `${on ? 'Hide' : 'Show'} clusters`,
on => <FaBraille />
@@ -163,12 +164,13 @@ export class PropertiesButtons extends React.Component<{}, {}> {
);
}
- @computed get forceActiveButton() { //select text
+ @computed get forceActiveButton() {
+ //select text
return this.propertyToggleBtn(
- on => on ? 'INACTIVE INTERACTION' : 'ACTIVE INTERACTION',
+ on => (on ? 'INACTIVE INTERACTION' : 'ACTIVE INTERACTION'),
'_forceActive',
on => `${on ? 'Select to activate' : 'Contents always active'} `,
- on => <MdTouchApp/> // 'eye'
+ on => <MdTouchApp /> // 'eye'
);
}
@@ -218,7 +220,8 @@ export class PropertiesButtons extends React.Component<{}, {}> {
}
@computed get captionButton() {
- return this.propertyToggleBtn( //DEVELOPER
+ return this.propertyToggleBtn(
+ //DEVELOPER
on => (on ? 'HIDE CAPTION' : 'SHOW CAPTION'), //'Caption',
'_layout_showCaption',
on => `${on ? 'Hide' : 'Show'} caption footer`,
@@ -227,17 +230,19 @@ export class PropertiesButtons extends React.Component<{}, {}> {
);
}
- @computed get chromeButton() { // developer -- removing UI decoration
+ @computed get chromeButton() {
+ // developer -- removing UI decoration
return this.propertyToggleBtn(
- on => on ? 'ENABLE UI CONTROLS' : 'DISABLE UI CONTROLS',
+ on => (on ? 'ENABLE UI CONTROLS' : 'DISABLE UI CONTROLS'),
'_chromeHidden',
on => `${on ? 'Show' : 'Hide'} editing UI`,
- on => on? <TbEditCircle/> : <TbEditCircleOff/> , // 'edit',
+ on => (on ? <TbEditCircle /> : <TbEditCircleOff />), // 'edit',
(dv, doc) => ((dv?.rootDoc || doc)._chromeHidden = !(dv?.rootDoc || doc)._chromeHidden)
);
}
- @computed get layout_autoHeightButton() { // store previous dimensions to store old values
+ @computed get layout_autoHeightButton() {
+ // store previous dimensions to store old values
return this.propertyToggleBtn(
on => 'Auto\xA0Size',
'_layout_autoHeight',
@@ -251,7 +256,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
on => (on ? 'HIDE GRID' : 'DISPLAY GRID'),
'_freeform_backgroundGrid',
on => `Display background grid in collection`,
- on => (on ? <MdGridOff /> :<MdGridOn /> ) //'border-all'
+ on => (on ? <MdGridOff /> : <MdGridOn />) //'border-all'
);
}
@@ -288,13 +293,14 @@ export class PropertiesButtons extends React.Component<{}, {}> {
// }
// );
// }
- @computed get snapButton() { // THESE ARE NOT COMING
+ @computed get snapButton() {
+ // THESE ARE NOT COMING
return this.propertyToggleBtn(
on => (on ? 'HIDE SNAP LINES' : 'SHOW SNAP LINES'),
'freeform_snapLines',
on => `Display snapping lines when objects are dragged`,
on => <TfiBarChart />, //'th',
- undefined,
+ undefined
);
}
@@ -346,11 +352,11 @@ export class PropertiesButtons extends React.Component<{}, {}> {
const followLoc = this.selectedDoc._followLinkLocation;
const linkedToLightboxView = () => LinkManager.Links(this.selectedDoc).some(link => LinkManager.getOppositeAnchor(link, this.selectedDoc)?._isLightbox);
- if (followLoc === OpenWhere.lightbox && !linkedToLightboxView()) return 'linkInPlace'
- else if (linkButton && followLoc === OpenWhere.addRight) return 'linkOnRight'
- else if (linkButton && this.selectedDoc._followLinkLocation === OpenWhere.lightbox && linkedToLightboxView()) return 'enterPortal'
- else if (ScriptCast(this.selectedDoc.onClick)?.script.originalScript.includes('toggleDetail')) return 'toggleDetail'
- else return 'nothing'
+ if (followLoc === OpenWhere.lightbox && !linkedToLightboxView()) return 'linkInPlace';
+ else if (linkButton && followLoc === OpenWhere.addRight) return 'linkOnRight';
+ else if (linkButton && this.selectedDoc._followLinkLocation === OpenWhere.lightbox && linkedToLightboxView()) return 'enterPortal';
+ else if (ScriptCast(this.selectedDoc.onClick)?.script.originalScript.includes('toggleDetail')) return 'toggleDetail';
+ else return 'nothing';
}
@computed
@@ -362,22 +368,20 @@ export class PropertiesButtons extends React.Component<{}, {}> {
['linkInPlace', 'Open Link in Lightbox'],
['linkOnRight', 'Open Link on Right'],
];
-
+
const items: IListItemProps[] = buttonList.map(value => {
- return (
- {
- text: value[1],
- val: value[1],
- }
- );
+ return {
+ text: value[1],
+ val: value[1],
+ };
});
- console.log("click val: ", this.onClickVal)
+ console.log('click val: ', this.onClickVal);
return !this.selectedDoc ? null : (
<Dropdown
- tooltip={'Choose onClick behavior'}
+ tooltip={'Choose onClick behavior'}
items={items}
selectedVal={this.onClickVal}
- setSelectedVal={(val) => this.handleOptionChange(val as string)}
+ setSelectedVal={val => this.handleOptionChange(val as string)}
title={'Choose onClick behaviour'}
color={StrCast(Doc.UserDoc().userColor)}
dropdownType={DropdownType.SELECT}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 09:26:36 +0000