diff options
| -rw-r--r-- | src/client/views/PropertiesButtons.tsx | 435 | ||||
| -rw-r--r-- | src/client/views/PropertiesView.tsx | 4 |
2 files changed, 224 insertions, 215 deletions
diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx index 76828a576..2c88eacc6 100644 --- a/src/client/views/PropertiesButtons.tsx +++ b/src/client/views/PropertiesButtons.tsx @@ -1,5 +1,5 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { Tooltip } from '@material-ui/core'; +import { Icon, Tooltip } from '@material-ui/core'; import { action, computed, observable } from 'mobx'; import { observer } from 'mobx-react'; import { Doc, DocListCast, Opt } from '../../fields/Doc'; @@ -21,6 +21,9 @@ import { DocumentView, OpenWhere } from './nodes/DocumentView'; import { pasteImageBitmap } from './nodes/WebBoxRenderer'; import './PropertiesButtons.scss'; import React = require('react'); +import { JsxElement } from 'typescript'; +import { FaThumbtack } from 'react-icons/fa'; +import { AiOutlineApple } from 'react-icons/ai'; const higflyout = require('@hig/flyout'); export const { anchorPoints } = higflyout; export const Flyout = higflyout.default; @@ -30,6 +33,7 @@ enum UtilityButtonState { OpenRight, OpenExternally, } + @observer export class PropertiesButtons extends React.Component<{}, {}> { @observable public static Instance: PropertiesButtons; @@ -41,7 +45,7 @@ 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) => string, onClick?: (dv: Opt<DocumentView>, doc: Doc, property: string) => void, useUserDoc?: boolean) => { + propertyToggleBtn = (label: string, property: string, tooltip: (on?: any) => string, icon: (on: boolean) => 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 : ( @@ -55,7 +59,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)}> - <FontAwesomeIcon className="documentdecorations-icon" size="lg" icon={icon(BoolCast(targetDoc?.[property])) as any} /> + {icon((BoolCast(targetDoc?.[property])) as any)} + + {/* <FontAwesomeIcon className="documentdecorations-icon" size="lg" icon={icon(BoolCast(targetDoc?.[property])) as any} /> */} </div> <div className="propertiesButtons-title">{label}</div> </div> @@ -67,216 +73,217 @@ export class PropertiesButtons extends React.Component<{}, {}> { 'No\xA0Drag', '_lockedPosition', on => `${on ? 'Unlock' : 'Lock'} position to prevent dragging`, - on => 'thumbtack' - ); - } - @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() { - return this.propertyToggleBtn( - 'Background', - '_hideImage', - on => (on ? 'Show Image' : 'Show Background'), - on => 'portrait' - ); - } - @computed get clustersButton() { - return this.propertyToggleBtn( - 'Clusters', - '_freeform_useClusters', - on => `${on ? 'Hide' : 'Show'} clusters`, - on => 'braille' - ); - } - @computed get panButton() { - return this.propertyToggleBtn( - 'Lock\xA0View', - '_lockedTransform', - on => `${on ? 'Unlock' : 'Lock'} panning of view`, - on => 'lock' - ); - } - @computed get forceActiveButton() { - return this.propertyToggleBtn( - 'Active', - '_forceActive', - on => `${on ? 'Select to activate' : 'Contents always active'} `, - on => 'eye' - ); - } - @computed get fitContentButton() { - return this.propertyToggleBtn( - 'View All', - '_freeform_fitContentsToBox', - on => `${on ? "Don't" : 'Do'} fit content to container visible area`, - on => 'object-group' - ); - } - // 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 - @computed get isLightboxButton() { - return this.propertyToggleBtn( - 'Lightbox', - 'isLightbox', - on => `${on ? 'Set' : 'Remove'} lightbox flag`, - on => 'window-restore', - onClick => { - SelectionManager.Views().forEach(dv => { - const containerDoc = dv.rootDoc; - //containerDoc.followAllLinks = - // containerDoc.noShadow = - // containerDoc.disableDocBrushing = - // containerDoc._forceActive = - //containerDoc._freeform_fitContentsToBox = - containerDoc._isLightbox = !containerDoc._isLightbox; - //containerDoc._xPadding = containerDoc._yPadding = containerDoc._isLightbox ? 10 : undefined; - const containerContents = DocListCast(dv.dataDoc[dv.props.fieldKey ?? Doc.LayoutFieldKey(containerDoc)]); - //dv.rootDoc.onClick = ScriptField.MakeScript('{self.data = undefined; documentView.select(false)}', { documentView: 'any' }); - containerContents.forEach(doc => LinkManager.Links(doc).forEach(link => (link.layout_linkDisplay = false))); - }); - } - ); - } - @computed get layout_fitWidthButton() { - return this.propertyToggleBtn( - 'Fit\xA0Width', - '_layout_fitWidth', - on => `${on ? "Don't" : 'Do'} fit content to width of container`, - on => 'arrows-alt-h' - ); - } - @computed get captionButton() { - return this.propertyToggleBtn( - 'Caption', - '_layout_showCaption', - on => `${on ? 'Hide' : 'Show'} caption footer`, - on => 'closed-captioning', - (dv, doc) => ((dv?.rootDoc || doc)._layout_showCaption = (dv?.rootDoc || doc)._layout_showCaption === undefined ? 'caption' : undefined) - ); - } - @computed get chromeButton() { - return this.propertyToggleBtn( - 'Controls', - '_chromeHidden', - on => `${on ? 'Show' : 'Hide'} editing UI`, - on => 'edit', - (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', - '_layout_autoHeight', - on => `Automatical vertical sizing to show all content`, - on => 'arrows-alt-v' - ); - } - @computed get gridButton() { - return this.propertyToggleBtn( - 'Grid', - '_freeform_backgroundGrid', - on => `Display background grid in collection`, - on => 'border-all' - ); - } - @computed get groupButton() { - return this.propertyToggleBtn( - 'Group', - 'isGroup', - on => `Display collection as a Group`, - on => 'object-group', - (dv, doc) => { - doc.isGroup = !doc.isGroup; - doc.forceActive = doc.isGroup; - } - ); - } - @computed get freezeThumb() { - return this.propertyToggleBtn( - 'FreezeThumb', - '_thumb-frozen', - on => `${on ? 'Freeze' : 'Unfreeze'} thumbnail`, - on => 'snowflake', - (dv, doc) => { - if (doc['thumb-frozen']) doc['thumb-frozen'] = undefined; - else { - document.body.focus(); // so that we can access the clipboard without an error - setTimeout(() => - pasteImageBitmap((data_url: any, error: any) => { - error && console.log(error); - data_url && Utils.convertDataUri(data_url, doc[Id] + '-thumb-frozen', true).then(returnedfilename => (doc['thumb-frozen'] = new ImageField(returnedfilename))); - }) - ); - } - } - ); - } - @computed get snapButton() { - return this.propertyToggleBtn( - 'Snap\xA0Lines', - 'freeform_snapLines', - on => `Display snapping lines when objects are dragged`, - on => 'th', - undefined, - true + on => <AiOutlineApple/> + // on => 'thumbtack' ); } + // @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() { + // return this.propertyToggleBtn( + // 'Background', + // '_hideImage', + // on => (on ? 'Show Image' : 'Show Background'), + // on => 'portrait' + // ); + // } + // @computed get clustersButton() { + // return this.propertyToggleBtn( + // 'Clusters', + // '_freeform_useClusters', + // on => `${on ? 'Hide' : 'Show'} clusters`, + // on => 'braille' + // ); + // } + // @computed get panButton() { + // return this.propertyToggleBtn( + // 'Lock\xA0View', + // '_lockedTransform', + // on => `${on ? 'Unlock' : 'Lock'} panning of view`, + // on => 'lock' + // ); + // } + // @computed get forceActiveButton() { + // return this.propertyToggleBtn( + // 'Active', + // '_forceActive', + // on => `${on ? 'Select to activate' : 'Contents always active'} `, + // on => 'eye' + // ); + // } + // @computed get fitContentButton() { + // return this.propertyToggleBtn( + // 'View All', + // '_freeform_fitContentsToBox', + // on => `${on ? "Don't" : 'Do'} fit content to container visible area`, + // on => 'object-group' + // ); + // } + // // 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 + // @computed get isLightboxButton() { + // return this.propertyToggleBtn( + // 'Lightbox', + // 'isLightbox', + // on => `${on ? 'Set' : 'Remove'} lightbox flag`, + // on => 'window-restore', + // onClick => { + // SelectionManager.Views().forEach(dv => { + // const containerDoc = dv.rootDoc; + // //containerDoc.followAllLinks = + // // containerDoc.noShadow = + // // containerDoc.disableDocBrushing = + // // containerDoc._forceActive = + // //containerDoc._freeform_fitContentsToBox = + // containerDoc._isLightbox = !containerDoc._isLightbox; + // //containerDoc._xPadding = containerDoc._yPadding = containerDoc._isLightbox ? 10 : undefined; + // const containerContents = DocListCast(dv.dataDoc[dv.props.fieldKey ?? Doc.LayoutFieldKey(containerDoc)]); + // //dv.rootDoc.onClick = ScriptField.MakeScript('{self.data = undefined; documentView.select(false)}', { documentView: 'any' }); + // containerContents.forEach(doc => LinkManager.Links(doc).forEach(link => (link.layout_linkDisplay = false))); + // }); + // } + // ); + // } + // @computed get layout_fitWidthButton() { + // return this.propertyToggleBtn( + // 'Fit\xA0Width', + // '_layout_fitWidth', + // on => `${on ? "Don't" : 'Do'} fit content to width of container`, + // on => 'arrows-alt-h' + // ); + // } + // @computed get captionButton() { + // return this.propertyToggleBtn( + // 'Caption', + // '_layout_showCaption', + // on => `${on ? 'Hide' : 'Show'} caption footer`, + // on => 'closed-captioning', + // (dv, doc) => ((dv?.rootDoc || doc)._layout_showCaption = (dv?.rootDoc || doc)._layout_showCaption === undefined ? 'caption' : undefined) + // ); + // } + // @computed get chromeButton() { + // return this.propertyToggleBtn( + // 'Controls', + // '_chromeHidden', + // on => `${on ? 'Show' : 'Hide'} editing UI`, + // on => 'edit', + // (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', + // '_layout_autoHeight', + // on => `Automatical vertical sizing to show all content`, + // on => 'arrows-alt-v' + // ); + // } + // @computed get gridButton() { + // return this.propertyToggleBtn( + // 'Grid', + // '_freeform_backgroundGrid', + // on => `Display background grid in collection`, + // on => 'border-all' + // ); + // } + // @computed get groupButton() { + // return this.propertyToggleBtn( + // 'Group', + // 'isGroup', + // on => `Display collection as a Group`, + // on => 'object-group', + // (dv, doc) => { + // doc.isGroup = !doc.isGroup; + // doc.forceActive = doc.isGroup; + // } + // ); + // } + // @computed get freezeThumb() { + // return this.propertyToggleBtn( + // 'FreezeThumb', + // '_thumb-frozen', + // on => `${on ? 'Freeze' : 'Unfreeze'} thumbnail`, + // on => 'snowflake', + // (dv, doc) => { + // if (doc['thumb-frozen']) doc['thumb-frozen'] = undefined; + // else { + // document.body.focus(); // so that we can access the clipboard without an error + // setTimeout(() => + // pasteImageBitmap((data_url: any, error: any) => { + // error && console.log(error); + // data_url && Utils.convertDataUri(data_url, doc[Id] + '-thumb-frozen', true).then(returnedfilename => (doc['thumb-frozen'] = new ImageField(returnedfilename))); + // }) + // ); + // } + // } + // ); + // } + // @computed get snapButton() { + // return this.propertyToggleBtn( + // 'Snap\xA0Lines', + // 'freeform_snapLines', + // on => `Display snapping lines when objects are dragged`, + // on => 'th', + // undefined, + // true + // ); + // } - @computed - get onClickButton() { - return !this.selectedDoc ? null : ( - <Tooltip title={<div className="dash-tooltip">Choose onClick behavior</div>} placement="top"> - <div> - <div className="propertiesButtons-linkFlyout"> - <Flyout anchorPoint={anchorPoints.LEFT_TOP} content={this.onClickFlyout}> - <div className={'propertiesButtons-linkButton-empty'} onPointerDown={e => e.stopPropagation()}> - <FontAwesomeIcon className="documentdecorations-icon" icon="mouse-pointer" size="lg" /> - </div> - </Flyout> - </div> - <div className="propertiesButtons-title"> onclick </div> - </div> - </Tooltip> - ); - } - @computed - get perspectiveButton() { - return !this.selectedDoc ? null : ( - <Tooltip title={<div className="dash-tooltip">Choose view perspective</div>} placement="top"> - <div> - <div className="propertiesButtons-linkFlyout"> - <Flyout anchorPoint={anchorPoints.LEFT_TOP} content={this.onPerspectiveFlyout}> - <div className={'propertiesButtons-linkButton-empty'} onPointerDown={e => e.stopPropagation()}> - <FontAwesomeIcon className="documentdecorations-icon" icon="mouse-pointer" size="lg" /> - </div> - </Flyout> - </div> - <div className="propertiesButtons-title"> Perspective </div> - </div> - </Tooltip> - ); - } + // @computed + // get onClickButton() { + // return !this.selectedDoc ? null : ( + // <Tooltip title={<div className="dash-tooltip">Choose onClick behavior</div>} placement="top"> + // <div> + // <div className="propertiesButtons-linkFlyout"> + // <Flyout anchorPoint={anchorPoints.LEFT_TOP} content={this.onClickFlyout}> + // <div className={'propertiesButtons-linkButton-empty'} onPointerDown={e => e.stopPropagation()}> + // <FontAwesomeIcon className="documentdecorations-icon" icon="mouse-pointer" size="lg" /> + // </div> + // </Flyout> + // </div> + // <div className="propertiesButtons-title"> onclick </div> + // </div> + // </Tooltip> + // ); + // } + // @computed + // get perspectiveButton() { + // return !this.selectedDoc ? null : ( + // <Tooltip title={<div className="dash-tooltip">Choose view perspective</div>} placement="top"> + // <div> + // <div className="propertiesButtons-linkFlyout"> + // <Flyout anchorPoint={anchorPoints.LEFT_TOP} content={this.onPerspectiveFlyout}> + // <div className={'propertiesButtons-linkButton-empty'} onPointerDown={e => e.stopPropagation()}> + // <FontAwesomeIcon className="documentdecorations-icon" icon="mouse-pointer" size="lg" /> + // </div> + // </Flyout> + // </div> + // <div className="propertiesButtons-title"> Perspective </div> + // </div> + // </Tooltip> + // ); + // } @undoBatch handlePerspectiveChange = (e: any) => { @@ -407,10 +414,10 @@ 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.titleButton)} + {toggle(this.captionButton)} */} {toggle(this.lockButton)} - {toggle(this.onClickButton)} + {/* {toggle(this.onClickButton)} {toggle(this.layout_fitWidthButton)} {toggle(this.freezeThumb)} {toggle(this.forceActiveButton)} @@ -425,7 +432,7 @@ export class PropertiesButtons extends React.Component<{}, {}> { {toggle(this.snapButton, { display: !isCollection ? 'none' : '' })} {toggle(this.clustersButton, { display: !isFreeForm ? 'none' : '' })} {toggle(this.panButton, { display: !isFreeForm ? 'none' : '' })} - {toggle(this.perspectiveButton, { display: !isCollection || isNovice ? 'none' : '' })} + {toggle(this.perspectiveButton, { display: !isCollection || isNovice ? 'none' : '' })} */} </div> ); } diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx index c5dd0eaf5..5ba71b815 100644 --- a/src/client/views/PropertiesView.tsx +++ b/src/client/views/PropertiesView.tsx @@ -486,7 +486,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { const documentType = StrCast(this.selectedDoc?.type) //console.log("this is tyoe " + typezzz) var currentType: string = ""; - var currentTypeComponent = <BsFillFileEarmarkImageFill/>; + var currentTypeComponent = <BsFillFileEarmarkImageFill/>; currentType = documentType // currentTypeComponent = //c @@ -511,8 +511,10 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { <div className = "propertiesView-wordType">Type</div> <div className= "currentType"> + {/* <Icon iconName = "AiFillFileText"></Icon> */} {/* <IconButton icon={StrCast(this.selectedDoc?.systemIcon)}></IconButton> */} + {/* {currentTypeComponent} */} {currentType} </div> </div> |