diff options
| -rw-r--r-- | src/client/views/MainView.tsx | 2 | ||||
| -rw-r--r-- | src/client/views/PropertiesButtons.tsx | 96 | ||||
| -rw-r--r-- | src/client/views/PropertiesView.scss | 11 | ||||
| -rw-r--r-- | src/client/views/PropertiesView.tsx | 53 |
4 files changed, 85 insertions, 77 deletions
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 50f451c0a..541b74722 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -810,7 +810,7 @@ export class MainView extends React.Component { {this.dockingContent} {this._hideUI ? null : ( - <div className="mainView-propertiesDragger" key="props" onPointerDown={this.onPropertiesPointerDown} style={{ right: this.propertiesWidth() - 1 }}> + <div className="mainView-propertiesDragger" key="props" onPointerDown={this.onPropertiesPointerDown} style={{ right: this.propertiesWidth() - 1, background : 'linen' }}> <FontAwesomeIcon icon={this.propertiesWidth() < 10 ? 'chevron-left' : 'chevron-right'} color={this.colorScheme === ColorScheme.Dark ? Colors.WHITE : Colors.BLACK} size="sm" /> </div> )} diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx index 749b33539..7527a0793 100644 --- a/src/client/views/PropertiesButtons.tsx +++ b/src/client/views/PropertiesButtons.tsx @@ -56,7 +56,7 @@ 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"> @@ -141,14 +141,14 @@ export class PropertiesButtons extends React.Component<{}, {}> { ); } - // @computed get forceActiveButton() { // WHAT HAPPENS HERE - // return this.propertyToggleBtn( - // on => 'Active', - // '_forceActive', - // on => `${on ? 'Select to activate' : 'Contents always active'} `, - // on => 'eye' - // ); - // } + @computed get forceActiveButton() { //select text + return this.propertyToggleBtn( + on => 'Active', + '_forceActive', + on => `${on ? 'Select to activate' : 'Contents always active'} `, + on => 'eye' + ); + } @computed get fitContentButton() { return this.propertyToggleBtn( @@ -162,7 +162,7 @@ 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() { WHAT IS THIS + // @computed get isLightboxButton() { // developer // return this.propertyToggleBtn( // on => 'Lightbox', // 'isLightbox', @@ -205,31 +205,31 @@ export class PropertiesButtons extends React.Component<{}, {}> { ); } - // @computed get chromeButton() { // WHAT - // return this.propertyToggleBtn( - // on => 'Controls', - // '_chromeHidden', - // on => `${on ? 'Show' : 'Hide'} editing UI`, - // on => 'edit', - // (dv, doc) => ((dv?.rootDoc || doc)._chromeHidden = !(dv?.rootDoc || doc)._chromeHidden) - // ); - // } + @computed get chromeButton() { // developer -- removing UI decoration + return this.propertyToggleBtn( + on => 'Controls', + '_chromeHidden', + on => `${on ? 'Show' : 'Hide'} editing UI`, + on => 'edit', + (dv, doc) => ((dv?.rootDoc || doc)._chromeHidden = !(dv?.rootDoc || doc)._chromeHidden) + ); + } - // @computed get layout_autoHeightButton() { // shouldn't be here unless you can set it back to its original size - // return this.propertyToggleBtn( - // on => 'Auto\xA0Size', - // '_layout_autoHeight', - // on => `Automatical vertical sizing to show all content`, - // on => 'arrows-alt-v' - // ); - // } + @computed get layout_autoHeightButton() { // shouldn't be here unless you can set it back to its original size + return this.propertyToggleBtn( + on => 'Auto\xA0Size', + '_layout_autoHeight', + on => `Automatical vertical sizing to show all content`, + on => 'arrows-alt-v' + ); + } @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' + on => (on ? <MdGridOff /> :<MdGridOn /> ) //'border-all' ); } @@ -294,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() { //WHERE ARE YOU + // 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) => { @@ -447,13 +447,13 @@ export class PropertiesButtons extends React.Component<{}, {}> { {/* {toggle(this.onClickButton)} */} {toggle(this.layout_fitWidthButton)} {/* {toggle(this.freezeThumb)} */} - {/* {toggle(this.forceActiveButton)} */} + {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.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' : '' })} */} diff --git a/src/client/views/PropertiesView.scss b/src/client/views/PropertiesView.scss index 49f2fc6fe..a9577b232 100644 --- a/src/client/views/PropertiesView.scss +++ b/src/client/views/PropertiesView.scss @@ -14,6 +14,10 @@ overflow-x: hidden; overflow-y: auto; + .propertiesView-propAndInfoGrouping{ + display: flex; + } + .propertiesView-title { text-align: left; padding-top: 12px; @@ -40,6 +44,13 @@ } } + .propertiesView-info{ + margin-top: 20; + margin-right: 10; + float: right; + font-size: 20; + } + .propertiesView-name { // border-bottom: 1px solid black; padding: 8.5px; diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx index 9c327b3f1..6b208f25e 100644 --- a/src/client/views/PropertiesView.tsx +++ b/src/client/views/PropertiesView.tsx @@ -1,6 +1,6 @@ import React = require('react'); import { IconLookup } from '@fortawesome/fontawesome-svg-core'; -import { faAnchor, faArrowRight, faWindowMaximize } from '@fortawesome/free-solid-svg-icons'; +import { faAnchor, faArrowRight, faListNumeric, faWindowMaximize } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Checkbox, Icon, Tooltip } from '@material-ui/core'; import { intersection } from 'lodash'; @@ -37,6 +37,7 @@ import { DefaultStyleProvider } from './StyleProvider'; import { RichTextField } from '../../fields/RichTextField'; import { AiFillFileText } from "react-icons/ai" //* as Icons from "react-icons/ai" // import * as Icons from "react-icons/bs" //{BsCollectionFill, BsFillFileEarmarkImageFill} from "react-icons/bs" +import { GrCircleInformation } from 'react-icons/gr' import { CgBrowser} from "react-icons/cg" import { ImageField, VideoField, WebField } from '../../fields/URLField'; import { FaFileVideo } from 'react-icons/fa'; //* as Icons from "react-icons/fa"; // @@ -114,6 +115,9 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { @observable inOptions: boolean = false; @observable _controlButton: boolean = false; + + @observable allClose: boolean = false; + componentDidMount() { this.selectedDocListenerDisposer?.(); // this.selectedDocListenerDisposer = autorun(() => this.openFilters && this.selectedDoc && this.checkFilterDoc()); @@ -504,7 +508,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { } @computed get currentType() { - console.log("current type " + this.selectedDoc?.type) + // console.log("current type " + this.selectedDoc?.type) const documentType = StrCast(this.selectedDoc?.type) var currentType: string = documentType; @@ -1201,37 +1205,23 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { ); } - @computed get doubleClickClose() { - //action(() => (this.openContexts = false, this.openOptions = false, this.openTransform = !this.openTransform)) - //console.log(this.openContexts + " hello " + this.openOptions + this.openTransform + this.openLinks + this.openFields) - if (this.openContexts || this.openOptions || this.openTransform || this.openLinks || this.openFields){ - this.openContexts = false; - this.openOptions = false; - this.openTransform = false; - this.openLinks = false; - this.openFields = false; - - } else if (!this.openContexts && !this.openOptions && !this.openTransform && !this.openLinks && !this.openFields){ - this.openContexts = true; - this.openOptions = true; - this.openTransform = true; - this.openLinks = true; - this.openFields = true; - } - - return ( - console.log("made") - ) - } +// create observable with current property +// if everyother one is closed, set allClsoe = true +// on double click close all except current +// if everything is closed on double clikc then open everythigng + +// if everythign is closed except current property ==> double click = open all +// else ==> double click = close except current property @computed get linksSubMenu() { // onPointerDown={action(() => (this.openLinks = !this.openLinks))} - + //(this.openContexts = false, this.openOptions = false, this.openTransform = false))} onClick={action(() => (this.openLinks = !this.openLinks)) + //this.allClose == false ? (this.openContexts = false , this.allClose = true ): (this.openContexts = true, this.allClose = false) return ( <div className="propertiesView-contexts"> - <div className="propertiesView-contexts-title" onDoubleClick={action(() => ( this.doubleClickClose, this.openLinks = true))} onClick={action(() => (this.openLinks = !this.openLinks))} style={{ backgroundColor: this.openLinks ? 'black' : '' }}> + <div className="propertiesView-contexts-title" style={{ backgroundColor: this.openLinks ? 'black' : '' }}> Linked To <div className="propertiesView-contexts-title-icon"> <FontAwesomeIcon icon={this.openLinks ? 'caret-down' : 'caret-right'} size="lg" color="white" /> @@ -1492,9 +1482,16 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { minWidth: this.props.width, //overflowY: this.scrolling ? "scroll" : "visible" }}> - <div className="propertiesView-title" style={{ width: this.props.width }}> - Properties + <div className = "propertiesView-propAndInfoGrouping"> + <div className="propertiesView-title" style={{ width: this.props.width }}> + Properties + </div> + <div className = "propertiesView-info" onClick={() => window.open('https://brown-dash.github.io/Dash-Documentation/')}> + <GrCircleInformation/> </div> + </div> + + <div className="propertiesView-name">{this.editableTitle}</div> <div className = "propertiesView-type"> {this.currentType} </div> |