diff options
| -rw-r--r-- | src/client/views/PropertiesButtons.tsx | 233 |
1 files changed, 123 insertions, 110 deletions
diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx index fc56ec861..749b33539 100644 --- a/src/client/views/PropertiesButtons.tsx +++ b/src/client/views/PropertiesButtons.tsx @@ -22,11 +22,15 @@ import { pasteImageBitmap } from './nodes/WebBoxRenderer'; import './PropertiesButtons.scss'; import React = require('react'); 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 { FaBraille, FaHighlighter, FaLock, FaLockOpen, FaThumbtack } from 'react-icons/fa'; +import { AiOutlineApple, AiOutlineColumnWidth, AiOutlinePicture } from 'react-icons/ai'; +import { MdClosedCaption, MdClosedCaptionDisabled, MdGridOff, MdGridOn, MdSubtitles, MdSubtitlesOff } from 'react-icons/md'; +import { TbHandOff, TbHandStop, TbHighlight, TbHighlightOff } from 'react-icons/tb'; import { BiHide, BiShow } from 'react-icons/bi'; +import { BsGrid3X3GapFill } from 'react-icons/bs'; +import { TfiBarChart } from 'react-icons/tfi'; +import { CiGrid31 } from 'react-icons/ci'; +import { RxWidth } from 'react-icons/rx'; const higflyout = require('@hig/flyout'); export const { anchorPoints } = higflyout; export const Flyout = higflyout.default; @@ -77,7 +81,7 @@ export class PropertiesButtons extends React.Component<{}, {}> { @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' ? 'HIDE TITLE' : 'HOVER TITLE'), '_layout_showTitle', on => 'Switch between title styles', on => (on ? <MdSubtitlesOff /> : <MdSubtitles />), // {currentIcon}, //(on ? <MdSubtitles/> :) , //,'text-width', on ? <MdSubtitles/> : <MdSubtitlesOff/>, @@ -89,15 +93,16 @@ export class PropertiesButtons extends React.Component<{}, {}> { ); } - // @computed get lockButton() { - // return this.propertyToggleBtn( - // 'No\xA0Drag', - // '_lockedPosition', - // on => `${on ? 'Unlock' : 'Lock'} position to prevent dragging`, - // on => <AiOutlineApple/> - // // on => 'thumbtack' - // ); - // } + @computed get lockButton() { + return this.propertyToggleBtn( + on => (on ? 'UNLOCK' : 'LOCK'), // 'No\xA0Drag', + '_lockedPosition', + on => `${on ? 'Unlock' : 'Lock'} position to prevent dragging`, + on => (on ? <FaLockOpen /> : <FaLock />) + // on => 'thumbtack' + ); + } + @computed get maskButton() { //highlight text while going down and reading through return this.propertyToggleBtn( @@ -129,35 +134,37 @@ export class PropertiesButtons extends React.Component<{}, {}> { } @computed get panButton() { return this.propertyToggleBtn( - on => 'Lock\xA0View', + on => (on ? 'ENABLE PANNING' : 'DISABLE PANNING'), //'Lock\xA0View', '_lockedTransform', on => `${on ? 'Unlock' : 'Lock'} panning of view`, - on => 'lock' + on => (on ? <TbHandStop /> : <TbHandOff />) //'lock' ); } - // @computed get forceActiveButton() { + // @computed get forceActiveButton() { // WHAT HAPPENS HERE // return this.propertyToggleBtn( - // 'Active', + // on => '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' - // ); - // } + + @computed get fitContentButton() { + return this.propertyToggleBtn( + on => (on ? 'PREVIOUS VIEW' : 'VIEW ALL'), //'View All', + '_freeform_fitContentsToBox', + on => `${on ? "Don't" : 'Do'} fit content to container visible area`, + on => (on ? <CiGrid31 /> : <BsGrid3X3GapFill />) //'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() { + // @computed get isLightboxButton() { WHAT IS THIS // return this.propertyToggleBtn( - // 'Lightbox', + // on => 'Lightbox', // 'isLightbox', // on => `${on ? 'Set' : 'Remove'} lightbox flag`, // on => 'window-restore', @@ -178,26 +185,29 @@ export class PropertiesButtons extends React.Component<{}, {}> { // } // ); // } - // @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() { + + @computed get layout_fitWidthButton() { + return this.propertyToggleBtn( + on => (on ? 'RESTRICT WIDTH' : 'FIT WIDTH'), //'Fit\xA0Width', + '_layout_fitWidth', + on => `${on ? "Don't" : 'Do'} fit content to width of container`, + on => (on ? <AiOutlineColumnWidth /> : <RxWidth />) // 'arrows-alt-h' + ); + } + + @computed get captionButton() { + return this.propertyToggleBtn( + on => (on ? 'HIDE CAPTION' : 'SHOW CAPTION'), //'Caption', + '_layout_showCaption', + on => `${on ? 'Hide' : 'Show'} caption footer`, + on => (on ? <MdClosedCaptionDisabled /> : <MdClosedCaption />), //'closed-captioning', + (dv, doc) => ((dv?.rootDoc || doc)._layout_showCaption = (dv?.rootDoc || doc)._layout_showCaption === undefined ? 'caption' : undefined) + ); + } + + // @computed get chromeButton() { // WHAT // return this.propertyToggleBtn( - // 'Controls', + // on => 'Controls', // '_chromeHidden', // on => `${on ? 'Show' : 'Hide'} editing UI`, // on => 'edit', @@ -205,25 +215,27 @@ export class PropertiesButtons extends React.Component<{}, {}> { // ); // } - // @computed get layout_autoHeightButton() { + // @computed get layout_autoHeightButton() { // shouldn't be here unless you can set it back to its original size // return this.propertyToggleBtn( - // 'Auto\xA0Size', + // on => '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() { + + @computed get gridButton() { + return this.propertyToggleBtn( + on => (on ? 'HIDE GRID' : 'DISPLAY GRID'), + '_freeform_backgroundGrid', + on => `Display background grid in collection`, + on => (on ? <MdGridOn /> : <MdGridOff />) //'border-all' + ); + } + + // @computed get groupButton() { WHERE ARE YOU // return this.propertyToggleBtn( - // 'Group', + // on => 'Group', // 'isGroup', // on => `Display collection as a Group`, // on => 'object-group', @@ -233,6 +245,7 @@ export class PropertiesButtons extends React.Component<{}, {}> { // } // ); // } + // @computed get freezeThumb() { // return this.propertyToggleBtn( // 'FreezeThumb', @@ -253,12 +266,12 @@ export class PropertiesButtons extends React.Component<{}, {}> { // } // ); // } - // @computed get snapButton() { + // @computed get snapButton() { // THESE ARE NOT COMING // return this.propertyToggleBtn( - // 'Snap\xA0Lines', + // on => (on ? 'HIDE SNAP LINES' : 'SHOW SNAP LINES'), // 'freeform_snapLines', // on => `Display snapping lines when objects are dragged`, - // on => 'th', + // on => <TfiBarChart />, //'th', // undefined, // true // ); @@ -281,23 +294,23 @@ export class PropertiesButtons extends React.Component<{}, {}> { // </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 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) => { @@ -386,26 +399,26 @@ export class PropertiesButtons extends React.Component<{}, {}> { </div> ); } - @computed - get onPerspectiveFlyout() { - const excludedViewTypes = [CollectionViewType.Invalid, CollectionViewType.Docking, CollectionViewType.Pile, CollectionViewType.StackedTimeline, CollectionViewType.Linear]; + // @computed WHERE IS THIS + // get onPerspectiveFlyout() { + // const excludedViewTypes = [CollectionViewType.Invalid, CollectionViewType.Docking, CollectionViewType.Pile, CollectionViewType.StackedTimeline, CollectionViewType.Linear]; - const makeLabel = (value: string, label: string) => ( - <div className="radio" key={label}> - <label> - <input type="radio" value={value} checked={(this.selectedDoc?._type_collection ?? 'invalid') === value} onChange={this.handlePerspectiveChange} /> - {label} - </label> - </div> - ); - return ( - <form> - {Object.values(CollectionViewType) - .filter(type => !excludedViewTypes.includes(type)) - .map(type => makeLabel(type, type))} - </form> - ); - } + // const makeLabel = (value: string, label: string) => ( + // <div className="radio" key={label}> + // <label> + // <input type="radio" value={value} checked={(this.selectedDoc?._type_collection ?? 'invalid') === value} onChange={this.handlePerspectiveChange} /> + // {label} + // </label> + // </div> + // ); + // return ( + // <form> + // {Object.values(CollectionViewType) + // .filter(type => !excludedViewTypes.includes(type)) + // .map(type => makeLabel(type, type))} + // </form> + // ); + // } render() { const layoutField = this.selectedDoc?.[Doc.LayoutFieldKey(this.selectedDoc)]; @@ -429,24 +442,24 @@ export class PropertiesButtons extends React.Component<{}, {}> { return !this.selectedDoc ? null : ( <div className="propertiesButtons"> {toggle(this.titleButton)} - {/* {toggle(this.captionButton)} */} - {/* {toggle(this.lockButton)} */} - {/*{toggle(this.onClickButton)} + {toggle(this.captionButton)} + {toggle(this.lockButton)} + {/* {toggle(this.onClickButton)} */} {toggle(this.layout_fitWidthButton)} - {toggle(this.freezeThumb)} - {toggle(this.forceActiveButton)} + {/* {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.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.chromeButton, { display: !isCollection || isNovice ? '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' : '' })} */} + {/* {toggle(this.groupButton, { display: isTabView || !isCollection ? 'none' : '' })} */} + {/* {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.panButton, { display: !isFreeForm ? 'none' : '' })} + {/* {toggle(this.perspectiveButton, { display: !isCollection || isNovice ? 'none' : '' })} */} </div> ); } |