aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/views/PropertiesButtons.tsx102
-rw-r--r--src/client/views/PropertiesView.tsx5
2 files changed, 59 insertions, 48 deletions
diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index 247368685..3d61ee273 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -22,8 +22,10 @@ import { pasteImageBitmap } from './nodes/WebBoxRenderer';
import './PropertiesButtons.scss';
import React = require('react');
import { JsxElement } from 'typescript';
-import { FaBraille, FaThumbtack } from 'react-icons/fa';
-import { AiOutlineApple } from 'react-icons/ai';
+import { FaBraille, FaHighlighter, FaThumbtack } from 'react-icons/fa';
+import { AiOutlineApple, AiOutlinePicture } from 'react-icons/ai';
+import { MdSubtitles, MdSubtitlesOff } from 'react-icons/md';
+import {TbHighlight, TbHighlightOff} from 'react-icons/tb'
const higflyout = require('@hig/flyout');
export const { anchorPoints } = higflyout;
export const Flyout = higflyout.default;
@@ -45,9 +47,12 @@ export class PropertiesButtons extends React.Component<{}, {}> {
return !SelectionManager.SelectedSchemaDoc() && SelectionManager.Views().lastElement()?.topMost;
}
- propertyToggleBtn = (label: string, property: string, tooltip: (on?: any) => string, icon: (on: boolean) => any, onClick?: (dv: Opt<DocumentView>, doc: Doc, property: string) => void, useUserDoc?: boolean) => {
+ 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);
+
+ console.log("current icon " + icon((targetDoc?.[property])))
+
return !targetDoc ? null : (
<Tooltip title={<div className={`dash-tooltip`}>{tooltip(targetDoc?.[property])} </div>} placement="top">
<div className = 'propertiesButtons-iconAndText' >
@@ -59,9 +64,9 @@ export class PropertiesButtons extends React.Component<{}, {}> {
SelectionManager.Views().forEach(dv => (onClick ?? onPropToggle)(dv, dv.rootDoc, property));
} else if (targetDoc) (onClick ?? onPropToggle)(undefined, targetDoc, property);
}, property)}>
- <div className = "propertiesButtons-icon"> {icon((BoolCast(targetDoc?.[property])) as any)} </div>
+ <div className = "propertiesButtons-icon"> {icon((targetDoc?.[property]) as any)} </div>
- <div className="propertiesButtons-label"> {label}</div>
+ <div className="propertiesButtons-label"> {label(targetDoc?.[property])}</div>
{/* <FontAwesomeIcon className="documentdecorations-icon" size="lg" icon={icon(BoolCast(targetDoc?.[property])) as any} /> */}
</div>
@@ -70,35 +75,54 @@ export class PropertiesButtons extends React.Component<{}, {}> {
</Tooltip>
);
};
- @computed get lockButton() {
+
+
+
+ @computed get titleButton() {
return this.propertyToggleBtn(
- 'No\xA0Drag',
- '_lockedPosition',
- on => `${on ? 'Unlock' : 'Lock'} position to prevent dragging`,
- on => <AiOutlineApple/>
- // on => 'thumbtack'
+ on => !on ? 'SHOW TITLE' : (this.selectedDoc?.['_layout_showTitle']) === 'title:hover' ? 'REMOVE TITLE' : 'HOVER TITLE' ,
+ '_layout_showTitle',
+ on => 'Switch between title styles',
+ on => on ? <MdSubtitlesOff/> : <MdSubtitles/>, // {currentIcon}, //(on ? <MdSubtitles/> :) , //,'text-width', on ? <MdSubtitles/> : <MdSubtitlesOff/>,
+ (dv, doc) => {
+ const tdoc = dv?.rootDoc || doc;
+ const newtitle = !tdoc._layout_showTitle ? 'title' : tdoc._layout_showTitle === 'title' ? 'title:hover' : '';
+ tdoc._layout_showTitle = newtitle;
+ }
);
}
- // @computed get maskButton() {
- // return this.propertyToggleBtn(
- // 'Mask',
- // 'stroke_isInkMask',
- // on => (on ? 'Make plain ink' : 'Make highlight mask'),
- // on => 'paint-brush',
- // (dv, doc) => InkingStroke.toggleMask(dv?.layoutDoc || doc)
- // );
- // }
- // @computed get hideImageButton() {
+
+ // @computed get lockButton() {
// return this.propertyToggleBtn(
- // 'Background',
- // '_hideImage',
- // on => (on ? 'Show Image' : 'Show Background'),
- // on => 'portrait'
+ // 'No\xA0Drag',
+ // '_lockedPosition',
+ // on => `${on ? 'Unlock' : 'Lock'} position to prevent dragging`,
+ // on => <AiOutlineApple/>
+ // // on => 'thumbtack'
// );
// }
+ @computed get maskButton() { //highlight text while going down and reading through
+ return this.propertyToggleBtn(
+ on => on ? 'PLAIN INK': 'HIGHLIGHTER MASK',
+ 'stroke_isInkMask',
+ on => (on ? 'Make plain ink' : 'Make highlight mask'),
+ on => on ? <TbHighlightOff/> : <TbHighlight/>, // <FaHighlighter/>,// 'paint-brush',
+ (dv, doc) => InkingStroke.toggleMask(dv?.layoutDoc || doc)
+ );
+ }
+
+ @computed get hideImageButton() { // put in developer -- can trace on top of object and drawing is still there
+ return this.propertyToggleBtn(
+ on => 'Background',
+ '_hideImage',
+ on => (on ? 'Show Image' : 'Show Background'),
+ on => <AiOutlinePicture/> //'portrait'
+ );
+ }
+
@computed get clustersButton() {
return this.propertyToggleBtn(
- 'Clusters',
+ on =>'Clusters',
'_freeform_useClusters',
on => `${on ? 'Hide' : 'Show'} clusters`,
on => <FaBraille/>
@@ -180,19 +204,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
// (dv, doc) => ((dv?.rootDoc || doc)._chromeHidden = !(dv?.rootDoc || doc)._chromeHidden)
// );
// }
- // @computed get titleButton() {
- // return this.propertyToggleBtn(
- // 'Title',
- // '_layout_showTitle',
- // on => 'Switch between title styles',
- // on => 'text-width',
- // (dv, doc) => {
- // const tdoc = dv?.rootDoc || doc;
- // const newtitle = !tdoc._layout_showTitle ? 'title' : tdoc._layout_showTitle === 'title' ? 'title:hover' : '';
- // tdoc._layout_showTitle = newtitle;
- // }
- // );
- // }
+
// @computed get layout_autoHeightButton() {
// return this.propertyToggleBtn(
// 'Auto\xA0Size',
@@ -416,19 +428,19 @@ export class PropertiesButtons extends React.Component<{}, {}> {
const isNovice = Doc.noviceMode;
return !this.selectedDoc ? null : (
<div className="propertiesButtons">
- {/* {toggle(this.titleButton)}
- {toggle(this.captionButton)} */}
- {toggle(this.lockButton)}
+ {toggle(this.titleButton)}
+ {/* {toggle(this.captionButton)} */}
+ {/* {toggle(this.lockButton)} */}
{/*{toggle(this.onClickButton)}
{toggle(this.layout_fitWidthButton)}
{toggle(this.freezeThumb)}
{toggle(this.forceActiveButton)}
{toggle(this.fitContentButton, { display: !isFreeForm && !isMap ? 'none' : '' })}
{toggle(this.isLightboxButton, { display: !isFreeForm && !isMap ? 'none' : '' })}
- {toggle(this.layout_autoHeightButton, { display: !isText && !isStacking && !isTree ? 'none' : '' })}
+ {toggle(this.layout_autoHeightButton, { display: !isText && !isStacking && !isTree ? 'none' : '' })}*/}
{toggle(this.maskButton, { display: !isInk ? 'none' : '' })}
- {toggle(this.hideImageButton, { display: !isImage ? 'none' : '' })}
- {toggle(this.chromeButton, { display: !isCollection || isNovice ? 'none' : '' })}
+ {toggle(this.hideImageButton, { display: !isImage ? 'none' : '' })}
+ {/* {toggle(this.chromeButton, { display: !isCollection || isNovice ? 'none' : '' })}
{toggle(this.gridButton, { display: !isCollection ? 'none' : '' })}
{toggle(this.groupButton, { display: isTabView || !isCollection ? 'none' : '' })}
{toggle(this.snapButton, { display: !isCollection ? 'none' : '' })} */}
diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index d956c874c..8d496e992 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -1201,13 +1201,12 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
}
@computed get linksSubMenu() {
- // this.linkCount
- // this.links
+ // onPointerDown={action(() => (this.openLinks = !this.openLinks))}
return (
<div className="propertiesView-contexts">
- <div className="propertiesView-contexts-title" onPointerDown={action(() => (this.openLinks = !this.openLinks))} style={{ backgroundColor: this.openLinks ? 'black' : '' }}>
+ <div className="propertiesView-contexts-title" onDoubleClick={action(() => (this.openContexts = !this.openContexts, this.openOptions = !this.openOptions, this.openTransform = !this.openTransform))} onClick={action(() => (this.openLinks = !this.openLinks))} style={{ backgroundColor: this.openLinks ? 'black' : '' }}>
Linked To
<div className="propertiesView-contexts-title-icon">
<FontAwesomeIcon icon={this.openLinks ? 'caret-down' : 'caret-right'} size="lg" color="white" />
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-09 01:33:39 +0000