diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/views/PropertiesButtons.tsx | 66 |
1 files changed, 33 insertions, 33 deletions
diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx index 3d61ee273..fc56ec861 100644 --- a/src/client/views/PropertiesButtons.tsx +++ b/src/client/views/PropertiesButtons.tsx @@ -25,7 +25,8 @@ import { JsxElement } from 'typescript'; 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' +import { TbHighlight, TbHighlightOff } from 'react-icons/tb'; +import { BiHide, BiShow } from 'react-icons/bi'; const higflyout = require('@hig/flyout'); export const { anchorPoints } = higflyout; export const Flyout = higflyout.default; @@ -51,11 +52,11 @@ export class PropertiesButtons extends React.Component<{}, {}> { 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]))) + 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' > + <div className="propertiesButtons-iconAndText"> <div className={`propertiesButtons-linkButton-empty toggle-${StrCast(targetDoc[property]).includes(':hover') ? 'hover' : targetDoc[property] ? 'on' : 'off'}`} onPointerDown={e => e.stopPropagation()} @@ -64,26 +65,22 @@ 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((targetDoc?.[property]) as any)} </div> - - <div className="propertiesButtons-label"> {label(targetDoc?.[property])}</div> + <div className="propertiesButtons-icon"> {icon(targetDoc?.[property] as any)} </div> + + <div className="propertiesButtons-label"> {label(targetDoc?.[property])}</div> {/* <FontAwesomeIcon className="documentdecorations-icon" size="lg" icon={icon(BoolCast(targetDoc?.[property])) as any} /> */} </div> - - </div> </Tooltip> ); }; - - @computed get titleButton() { return this.propertyToggleBtn( - on => !on ? 'SHOW TITLE' : (this.selectedDoc?.['_layout_showTitle']) === 'title:hover' ? 'REMOVE TITLE' : 'HOVER TITLE' , + 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/>, + 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' : ''; @@ -101,41 +98,44 @@ export class PropertiesButtons extends React.Component<{}, {}> { // // on => 'thumbtack' // ); // } - @computed get maskButton() { //highlight text while going down and reading through + @computed get maskButton() { + //highlight text while going down and reading through return this.propertyToggleBtn( - on => on ? 'PLAIN INK': 'HIGHLIGHTER MASK', + on => (on ? 'PLAIN INK' : 'HIGHLIGHTER MASK'), 'stroke_isInkMask', on => (on ? 'Make plain ink' : 'Make highlight mask'), - on => on ? <TbHighlightOff/> : <TbHighlight/>, // <FaHighlighter/>,// 'paint-brush', + 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 + + @computed get hideImageButton() { + // put in developer -- can trace on top of object and drawing is still there return this.propertyToggleBtn( - on => 'Background', + on => (on ? 'SHOW BACKGROUND IMAGE' : 'HIDE BACKGROUND IMAGE'), //'Background', '_hideImage', on => (on ? 'Show Image' : 'Show Background'), - on => <AiOutlinePicture/> //'portrait' + on => (on ? <BiShow /> : <BiHide />) //'portrait' ); } @computed get clustersButton() { return this.propertyToggleBtn( - on =>'Clusters', + on => 'Clusters', '_freeform_useClusters', on => `${on ? 'Hide' : 'Show'} clusters`, - on => <FaBraille/> + on => <FaBraille /> ); } - // @computed get panButton() { - // return this.propertyToggleBtn( - // 'Lock\xA0View', - // '_lockedTransform', - // on => `${on ? 'Unlock' : 'Lock'} panning of view`, - // on => 'lock' - // ); - // } + @computed get panButton() { + return this.propertyToggleBtn( + on => 'Lock\xA0View', + '_lockedTransform', + on => `${on ? 'Unlock' : 'Lock'} panning of view`, + on => 'lock' + ); + } + // @computed get forceActiveButton() { // return this.propertyToggleBtn( // 'Active', @@ -428,9 +428,9 @@ 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)} @@ -439,7 +439,7 @@ export class PropertiesButtons extends React.Component<{}, {}> { {toggle(this.isLightboxButton, { display: !isFreeForm && !isMap ? 'none' : '' })} {toggle(this.layout_autoHeightButton, { display: !isText && !isStacking && !isTree ? 'none' : '' })}*/} {toggle(this.maskButton, { display: !isInk ? 'none' : '' })} - {toggle(this.hideImageButton, { display: !isImage ? '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' : '' })} |