diff options
Diffstat (limited to 'src/client/views/PropertiesButtons.tsx')
| -rw-r--r-- | src/client/views/PropertiesButtons.tsx | 320 |
1 files changed, 208 insertions, 112 deletions
diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx index b0f9d5a7e..6105cc1b5 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,16 @@ import { DocumentView, OpenWhere } from './nodes/DocumentView'; import { pasteImageBitmap } from './nodes/WebBoxRenderer'; import './PropertiesButtons.scss'; import React = require('react'); +import { JsxElement } from 'typescript'; +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, MdTouchApp } from 'react-icons/md'; +import { TbEditCircle, TbEditCircleOff, 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'; import { Dropdown, DropdownType, IListItemProps, Toggle, ToggleType, Type } from 'browndash-components'; const higflyout = require('@hig/flyout'); export const { anchorPoints } = higflyout; @@ -31,6 +41,7 @@ enum UtilityButtonState { OpenRight, OpenExternally, } + @observer export class PropertiesButtons extends React.Component<{}, {}> { @observable public static Instance: PropertiesButtons; @@ -42,14 +53,14 @@ 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: (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={tooltip(targetDoc?.[property])} + text={label(targetDoc?.[property])} color={StrCast(Doc.UserDoc().userColor)} - icon={<FontAwesomeIcon className="documentdecorations-icon" size="lg" icon={icon(BoolCast(targetDoc?.[property])) as any} />} + icon={icon(targetDoc?.[property] as any)} iconPlacement={'left'} align={'flex-start'} fillWidth={true} @@ -62,188 +73,274 @@ export class PropertiesButtons extends React.Component<{}, {}> { /> }; + + // 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( + on => '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.layout_disableBrushing = + // 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.link_displayLine = false))); + }); + } + ); + } + + @computed get titleButton() { + return this.propertyToggleBtn( + 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/>, + (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 lockButton() { return this.propertyToggleBtn( - 'No\xA0Drag', + on => (on ? 'UNLOCK' : 'LOCK'), // 'No\xA0Drag', '_lockedPosition', on => `${on ? 'Unlock' : 'Lock'} position to prevent dragging`, - on => 'thumbtack' + on => (on ? <FaLockOpen /> : <FaLock />) + // on => 'thumbtack' ); } + @computed get maskButton() { + //highlight text while going down and reading through return this.propertyToggleBtn( - 'Mask', + on => (on ? 'PLAIN INK' : 'HIGHLIGHTER MASK'), 'stroke_isInkMask', on => (on ? 'Make plain ink' : 'Make highlight mask'), - on => '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 return this.propertyToggleBtn( - 'Background', + on => (on ? 'SHOW BACKGROUND IMAGE' : 'HIDE BACKGROUND IMAGE'), //'Background', '_hideImage', on => (on ? 'Show Image' : 'Show Background'), - on => 'portrait' + on => (on ? <BiShow /> : <BiHide />) //'portrait' ); } + @computed get clustersButton() { return this.propertyToggleBtn( - 'Clusters', + on => (on ?'DISABLE CLUSTERS' : 'HIGHLIGHT CLUSTERS'), '_freeform_useClusters', on => `${on ? 'Hide' : 'Show'} clusters`, - on => 'braille' + on => <FaBraille /> ); } @computed get panButton() { return this.propertyToggleBtn( - '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() { //select text return this.propertyToggleBtn( - 'Active', + on => on ? 'INACTIVE INTERACTION' : 'ACTIVE INTERACTION', '_forceActive', on => `${on ? 'Select to activate' : 'Contents always active'} `, - on => 'eye' + on => <MdTouchApp/> // 'eye' ); } + @computed get fitContentButton() { return this.propertyToggleBtn( - 'View All', + on => (on ? 'PREVIOUS VIEW' : 'VIEW ALL'), //'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.layout_disableBrushing = - // 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.link_displayLine = false))); - }); - } + 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() { // developer + // return this.propertyToggleBtn( + // on => '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', + on => (on ? 'RESTRICT WIDTH' : 'FIT WIDTH'), //'Fit\xA0Width', '_layout_fitWidth', on => `${on ? "Don't" : 'Do'} fit content to width of container`, - on => 'arrows-alt-h' + on => (on ? <AiOutlineColumnWidth /> : <RxWidth />) // 'arrows-alt-h' ); } + @computed get captionButton() { - return this.propertyToggleBtn( - 'Caption', + return this.propertyToggleBtn( //DEVELOPER + on => (on ? 'HIDE CAPTION' : 'SHOW CAPTION'), //'Caption', '_layout_showCaption', on => `${on ? 'Hide' : 'Show'} caption footer`, - on => 'closed-captioning', + on => (on ? <MdClosedCaptionDisabled /> : <MdClosedCaption />), //'closed-captioning', (dv, doc) => ((dv?.rootDoc || doc)._layout_showCaption = (dv?.rootDoc || doc)._layout_showCaption === undefined ? 'caption' : undefined) ); } - @computed get chromeButton() { + + @computed get chromeButton() { // developer -- removing UI decoration return this.propertyToggleBtn( - 'Controls', + on => on ? 'ENABLE UI CONTROLS' : 'DISABLE UI CONTROLS', '_chromeHidden', on => `${on ? 'Show' : 'Hide'} editing UI`, - on => 'edit', + on => on? <TbEditCircle/> : <TbEditCircleOff/> , // '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() { + + @computed get layout_autoHeightButton() { // store previous dimensions to store old values 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', + on => (on ? 'HIDE GRID' : 'DISPLAY GRID'), '_freeform_backgroundGrid', on => `Display background grid in collection`, - on => 'border-all' + on => (on ? <MdGridOff /> :<MdGridOn /> ) //'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; - doc.dragWhenActive = 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() { + + // @computed get groupButton() { //developer + // return this.propertyToggleBtn( + // on => '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() { // 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 ); } + // @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() { // gone + // 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) => { + this.selectedDoc && (this.selectedDoc._type_collection = e.target.value); + SelectionManager.Views() + .filter(dv => dv.docView) + .map(dv => dv.docView!) + .forEach(docView => (docView.layoutDoc._type_collection = e.target.value)); + }; @computed get onClickVal() { const linkButton = IsFollowLinkScript(this.selectedDoc.onClick); const followLoc = this.selectedDoc._followLinkLocation; @@ -381,7 +478,6 @@ export class PropertiesButtons extends React.Component<{}, {}> { ); } - render() { const layoutField = this.selectedDoc?.[Doc.LayoutFieldKey(this.selectedDoc)]; const isText = layoutField instanceof RichTextField; @@ -406,18 +502,18 @@ export class PropertiesButtons extends React.Component<{}, {}> { {toggle(this.titleButton)} {toggle(this.captionButton)} {toggle(this.lockButton)} - {toggle(this.onClickButton)} + {/* {toggle(this.onClickButton)} */} {toggle(this.layout_fitWidthButton)} - {toggle(this.freezeThumb)} + {/* {toggle(this.freezeThumb)} */} {toggle(this.forceActiveButton)} {toggle(this.fitContentButton, { display: !isFreeForm && !isMap ? 'none' : '' })} - {toggle(this.isLightboxButton, { display: !isFreeForm && !isMap ? '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.gridButton, { display: !isCollection ? 'none' : '' })} - {toggle(this.groupButton, { display: isTabView || !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' : '' })} |