diff options
Diffstat (limited to 'src/client/views/PropertiesButtons.tsx')
| -rw-r--r-- | src/client/views/PropertiesButtons.tsx | 141 |
1 files changed, 100 insertions, 41 deletions
diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx index 7a9820a35..6105cc1b5 100644 --- a/src/client/views/PropertiesButtons.tsx +++ b/src/client/views/PropertiesButtons.tsx @@ -31,6 +31,7 @@ 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; export const Flyout = higflyout.default; @@ -55,29 +56,51 @@ export class PropertiesButtons extends React.Component<{}, {}> { 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={label(targetDoc?.[property])} + color={StrCast(Doc.UserDoc().userColor)} + icon={icon(targetDoc?.[property] as any)} + iconPlacement={'left'} + align={'flex-start'} + fillWidth={true} + toggleType={ToggleType.BUTTON} + onClick={undoable(() => { + if (SelectionManager.Views().length > 1) { + SelectionManager.Views().forEach(dv => (onClick ?? onPropToggle)(dv, dv.rootDoc, property)); + } else if (targetDoc) (onClick ?? onPropToggle)(undefined, targetDoc, property); + }, 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-linkButton-empty toggle-${StrCast(targetDoc[property]).includes(':hover') ? 'hover' : targetDoc[property] ? 'on' : 'off'}`} - onPointerDown={e => e.stopPropagation()} - onClick={undoable(() => { - if (SelectionManager.Views().length > 1) { - 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> - {/* <FontAwesomeIcon className="documentdecorations-icon" size="lg" icon={icon(BoolCast(targetDoc?.[property])) as any} /> */} - </div> - - </Tooltip> + // 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'), @@ -318,6 +341,63 @@ export class PropertiesButtons extends React.Component<{}, {}> { .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; + const linkedToLightboxView = () => LinkManager.Links(this.selectedDoc).some(link => LinkManager.getOppositeAnchor(link, this.selectedDoc)?._isLightbox); + + if (followLoc === OpenWhere.lightbox && !linkedToLightboxView()) return 'linkInPlace' + else if (linkButton && followLoc === OpenWhere.addRight) return 'linkOnRight' + else if (linkButton && this.selectedDoc._followLinkLocation === OpenWhere.lightbox && linkedToLightboxView()) return 'enterPortal' + else if (ScriptCast(this.selectedDoc.onClick)?.script.originalScript.includes('toggleDetail')) return 'toggleDetail' + else return 'nothing' + } + + @computed + get onClickButton() { + const buttonList = [ + ['nothing', 'Select Document'], + ['enterPortal', 'Enter Portal'], + ['toggleDetail', 'Toggle Detail'], + ['linkInPlace', 'Open Link in Lightbox'], + ['linkOnRight', 'Open Link on Right'], + ]; + + const items: IListItemProps[] = buttonList.map(value => { + return ( + { + text: value[1], + val: value[1], + } + ); + }); + console.log("click val: ", this.onClickVal) + return !this.selectedDoc ? null : ( + <Dropdown + tooltip={'Choose onClick behavior'} + items={items} + selectedVal={this.onClickVal} + setSelectedVal={(val) => this.handleOptionChange(val as string)} + title={'Choose onClick behaviour'} + color={StrCast(Doc.UserDoc().userColor)} + dropdownType={DropdownType.SELECT} + type={Type.SEC} + fillWidth + /> + // <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> + ); + } @undoBatch @action @@ -397,26 +477,6 @@ export class PropertiesButtons extends React.Component<{}, {}> { </div> ); } - // @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> - // ); - // } render() { const layoutField = this.selectedDoc?.[Doc.LayoutFieldKey(this.selectedDoc)]; @@ -457,7 +517,6 @@ 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' : '' })} */} </div> ); } |