From 7ba42015e6cc197393254205459d94d681e26f61 Mon Sep 17 00:00:00 2001 From: eperelm2 Date: Tue, 6 Jun 2023 17:28:13 -0400 Subject: started changing top section of prop menu --- src/client/views/PropertiesView.scss | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) (limited to 'src/client/views/PropertiesView.scss') diff --git a/src/client/views/PropertiesView.scss b/src/client/views/PropertiesView.scss index 897be9a32..5e6bd85e6 100644 --- a/src/client/views/PropertiesView.scss +++ b/src/client/views/PropertiesView.scss @@ -15,13 +15,14 @@ overflow-y: auto; .propertiesView-title { - text-align: center; + text-align: left; padding-top: 12px; - padding-bottom: 12px; + // padding-bottom: 12px; + padding-left: 10px; display: flex; - font-size: 18px; + font-size: 25px; font-weight: bold; - justify-content: center; + // justify-content: center; .propertiesView-title-icon { width: 20px; @@ -830,8 +831,16 @@ } } +.propertiesView-wordTitle{ + color:silver; + font-weight:200; +} + .editable-title { border: solid 1px #323232; + padding-left: 5px; + padding-top: 4px; + border-radius: 4px; height: fit-content; &:hover { -- cgit v1.2.3-70-g09d2 From 6707f6ad559b463e514bdbbd634ded25bae4a5f7 Mon Sep 17 00:00:00 2001 From: eperelm2 Date: Wed, 7 Jun 2023 13:35:24 -0400 Subject: got types but trying to get icon --- src/client/documents/DocumentTypes.ts | 2 +- src/client/documents/Documents.ts | 3 +- src/client/views/PropertiesView.scss | 27 ++++++++++++++++- src/client/views/PropertiesView.tsx | 55 ++++++++++++++++++++++++++++++++--- 4 files changed, 80 insertions(+), 7 deletions(-) (limited to 'src/client/views/PropertiesView.scss') diff --git a/src/client/documents/DocumentTypes.ts b/src/client/documents/DocumentTypes.ts index cdc8c275c..bd71281fa 100644 --- a/src/client/documents/DocumentTypes.ts +++ b/src/client/documents/DocumentTypes.ts @@ -2,7 +2,7 @@ export enum DocumentType { NONE = 'none', // core data types - RTF = 'rtf', + RTF = 'rich text', IMG = 'image', WEB = 'web', COL = 'collection', diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 515a870b5..f877f2598 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -430,7 +430,8 @@ export namespace Docs { nativeHeightUnfrozen: true, layout_forceReflow: true, defaultDoubleClick: 'ignore', - }, + systemIcon: 'AiFillFileText' + }, }, ], [ diff --git a/src/client/views/PropertiesView.scss b/src/client/views/PropertiesView.scss index 5e6bd85e6..b3d16d82a 100644 --- a/src/client/views/PropertiesView.scss +++ b/src/client/views/PropertiesView.scss @@ -41,7 +41,7 @@ } .propertiesView-name { - border-bottom: 1px solid black; + // border-bottom: 1px solid black; padding: 8.5px; font-size: 12.5px; @@ -50,6 +50,11 @@ } } + .propertiesView-type{ + padding: 8.5px; + font-size: 12.5px; + } + .propertiesView-settings { //border-bottom: 1px solid black; //padding: 8.5px; @@ -848,6 +853,26 @@ } } +.propertiesView-wordType{ + color:silver; + font-weight:200; +} + +.currentType{ + text-decoration: underline; + display: flex; + align-items:center; + // border: solid 1px #323232; + // padding-left: 5px; + // padding-top: 4px; + // border-radius: 4px; + // height: fit-content; +} + +.currentType-icon{ + margin-right:5px; +} + .properties-flyout { grid-column: 2/4; } diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx index 3c473498e..c5dd0eaf5 100644 --- a/src/client/views/PropertiesView.tsx +++ b/src/client/views/PropertiesView.tsx @@ -2,7 +2,7 @@ import React = require('react'); import { IconLookup } from '@fortawesome/fontawesome-svg-core'; import { faAnchor, faArrowRight, faWindowMaximize } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { Checkbox, Tooltip } from '@material-ui/core'; +import { Checkbox, Icon, Tooltip } from '@material-ui/core'; import { intersection } from 'lodash'; import { action, computed, Lambda, observable } from 'mobx'; import { observer } from 'mobx-react'; @@ -34,6 +34,13 @@ import { PropertiesDocBacklinksSelector } from './PropertiesDocBacklinksSelector import { PropertiesDocContextSelector } from './PropertiesDocContextSelector'; import './PropertiesView.scss'; import { DefaultStyleProvider } from './StyleProvider'; +import { RichTextField } from '../../fields/RichTextField'; +import { AiFillFileText } from "react-icons/ai" +import {BsCollectionFill, BsFillFileEarmarkImageFill} from "react-icons/bs" +import { CgBrowser} from "react-icons/cg" +import { ImageField, VideoField, WebField } from '../../fields/URLField'; +import { FaFileVideo } from 'react-icons/fa'; +import { IconButton } from 'browndash-components'; const higflyout = require('@hig/flyout'); export const { anchorPoints } = higflyout; export const Flyout = higflyout.default; @@ -255,10 +262,7 @@ export class PropertiesView extends React.Component { } @computed get links() { - console.log("this is selected doc" + this.selectedDoc) - // console.log("this is selected doc" + this.selectedDoc) const selAnchor = this.selectedDocumentView?.anchorViewDoc ?? LinkManager.currentLinkAnchor ?? this.selectedDoc; - console.log("this is selAnchor" + selAnchor) return !selAnchor ? null : ; } @@ -462,6 +466,7 @@ export class PropertiesView extends React.Component { }; @computed get editableTitle() { + const titles = new Set(); SelectionManager.Views().forEach(dv => titles.add(StrCast(dv.rootDoc.title))); const title = Array.from(titles.keys()).length > 1 ? '--multiple selected--' : StrCast(this.selectedDoc?.title); @@ -476,6 +481,45 @@ export class PropertiesView extends React.Component { ); } + @computed get currentType() { + // const layoutField = this.selectedDoc?.[Doc.LayoutFieldKey(this.selectedDoc)]; + const documentType = StrCast(this.selectedDoc?.type) + //console.log("this is tyoe " + typezzz) + var currentType: string = ""; + var currentTypeComponent = ; + + currentType = documentType + // currentTypeComponent = //c + //}// else if (layoutField instanceof ImageField){ + // currentType = 'Image' + // currentTypeComponent = + // } else if(layoutField instanceof WebField){ + // currentType = 'Website' + // currentTypeComponent = + // } else if (layoutField instanceof VideoField){ + // currentType = 'Video' + // currentTypeComponent = + // } + + // else{ + // currentType = 'Collection' + // currentTypeComponent = + // } + + return ( +
+
Type
+ +
+ {/* */} + {/* */} + {currentType} +
+
+ + ) + } + @undoBatch @action setTitle = (value: string) => { @@ -1420,6 +1464,9 @@ export class PropertiesView extends React.Component {
{this.editableTitle}
+
{this.currentType}
+ + {this.contextsSubMenu} {this.linksSubMenu} -- cgit v1.2.3-70-g09d2 From 6de23b772d7d40d75d60abd3343c1f6fd684b06f Mon Sep 17 00:00:00 2001 From: eperelm2 Date: Mon, 12 Jun 2023 14:05:37 -0400 Subject: fixing options --- src/client/documents/Documents.ts | 4 +- src/client/views/MainView.scss | 4 +- src/client/views/PropertiesButtons.scss | 98 +++++++++++++++++++++------------ src/client/views/PropertiesButtons.tsx | 36 ++++++------ src/client/views/PropertiesView.scss | 4 +- 5 files changed, 88 insertions(+), 58 deletions(-) (limited to 'src/client/views/PropertiesView.scss') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 478209fe9..e9cae76e4 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -575,7 +575,7 @@ export namespace Docs { DocumentType.EQUATION, { layout: { view: EquationBox, dataField: 'text' }, - options: { nativeDimModifiable: true, fontSize: '14px', layout_hideResizeHandles: true, layout_hideDecorationTitle: true, }, ///systemIcon: 'BsSuperscript' + BsSubscript + options: { nativeDimModifiable: true, fontSize: '14px', layout_hideResizeHandles: true, layout_hideDecorationTitle: true, systemIcon: 'BsCalculatorFill' }, ///systemIcon: 'BsSuperscript' + BsSubscript }, ], [ @@ -691,7 +691,7 @@ export namespace Docs { { data: '', layout: { view: PhysicsSimulationBox, dataField: defaultDataKey, _width: 1000, _height: 800 }, - options: { _height: 100, layout_forceReflow: true, nativeHeightUnfrozen: true, mass1: '', mass2: '', nativeDimModifiable: true, position: '', acceleration: '', pendulum: '', spring: '', wedge: '', simulation: '', review: '' }, + options: { _height: 100, layout_forceReflow: true, nativeHeightUnfrozen: true, mass1: '', mass2: '', nativeDimModifiable: true, position: '', acceleration: '', pendulum: '', spring: '', wedge: '', simulation: '', review: '', systemIcon: 'BsShareFill' }, }, ], ]); diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss index b95ce0e99..eee9066b5 100644 --- a/src/client/views/MainView.scss +++ b/src/client/views/MainView.scss @@ -198,10 +198,10 @@ h1, left: 0; position: absolute; z-index: 2; - background-color: $light-gray; + background-color: linen;//$light-gray; .editable-title { - background-color: $light-gray; + background-color: linen;//$light-gray; } } } diff --git a/src/client/views/PropertiesButtons.scss b/src/client/views/PropertiesButtons.scss index 36b2df73e..f571dcf25 100644 --- a/src/client/views/PropertiesButtons.scss +++ b/src/client/views/PropertiesButtons.scss @@ -20,22 +20,31 @@ $linkGap : 3px; .propertiesButtons-linkButton-empty, .propertiesButtons-linkButton-nonempty { - height: 25px; - width: 29px; - border-radius: 6px; - pointer-events: auto; - background-color: $dark-gray; - color: #fcfbf7; - text-transform: uppercase; - letter-spacing: 2px; - font-size: 75%; - transition: transform 0.2s; - text-align: center; + // margin-right: 7px; + // margin-left: 8px; + height: 28px; + width: 226px;//29px; display: flex; - justify-content: center; align-items: center; - margin-right: 10px; - margin-left: 4px; + // height: 25px; + // width: 230px;//29px; + // display: flex; + // align-items: center; + // border-radius: 6px; + pointer-events: auto; + // background-color: $dark-gray; + // color: #fcfbf7; + // text-transform: uppercase; + // letter-spacing: 2px; + // font-size: 75%; + transition: transform 0.2s; + // text-align: center; + + + // justify-content: center; + + // margin-right: 10px; + // margin-left: 4px; &:hover { background: $medium-gray; @@ -52,19 +61,24 @@ $linkGap : 3px; color: $black; } .propertiesButtons-linkButton-empty.toggle-off { - background-color: $dark-gray; - color: white; + background-color: white;//$dark-gray; + color: black; //white; +} + +.propertiesButtons-icon { + margin-left:8px; } .propertiesButtons { - margin-top: 3px; - grid-column: 1/4; - width: 100%; - height: auto; - display: flex; - flex-direction: row; - flex-wrap: wrap; - padding-bottom: 5.5px; + position:relative; + // margin-top: 3px; +// // grid-column: 1/4; +// width: 100%; +// height: auto; +// display: flex; +// // flex-direction: row; +// // flex-wrap: wrap; +// padding-bottom: 5.5px; } .onClickFlyout-editScript { @@ -110,18 +124,32 @@ $linkGap : 3px; } } -.propertiesButtons-title { - background: $dark-gray; - color: $white; - font-size: 6px; - width: 37px; - padding: 3px; - height: 12px; - border-radius: 7px; +// .propertiesButtons-iconAndText{ +// height: 28px; +// width: 220px;//29px; +// display: flex; +// align-items: center; +// background-color: white; +// } + +.propertiesButtons-label { text-transform: uppercase; - text-align: center; - margin-top: -4px; -} + margin-left: 8px; + // margin-right: 50 px; +} + +// .propertiesButtons-title { +// background: pink; //$dark-gray; +// color: $white; +// font-size: 6px; +// width: 37px; +// padding: 3px; +// height: 12px; +// border-radius: 7px; +// text-transform: uppercase; +// text-align: center; +// margin-top: -4px; +// } .propertiesButtons-linker { height: 25px; diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx index 2c88eacc6..247368685 100644 --- a/src/client/views/PropertiesButtons.tsx +++ b/src/client/views/PropertiesButtons.tsx @@ -22,7 +22,7 @@ import { pasteImageBitmap } from './nodes/WebBoxRenderer'; import './PropertiesButtons.scss'; import React = require('react'); import { JsxElement } from 'typescript'; -import { FaThumbtack } from 'react-icons/fa'; +import { FaBraille, FaThumbtack } from 'react-icons/fa'; import { AiOutlineApple } from 'react-icons/ai'; const higflyout = require('@hig/flyout'); export const { anchorPoints } = higflyout; @@ -50,7 +50,7 @@ export class PropertiesButtons extends React.Component<{}, {}> { const onPropToggle = (dv: Opt, doc: Doc, prop: string) => ((dv?.layoutDoc || doc)[prop] = (dv?.layoutDoc || doc)[prop] ? false : true); return !targetDoc ? null : ( {tooltip(targetDoc?.[property])} } placement="top"> -
+
e.stopPropagation()} @@ -59,11 +59,13 @@ 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)}> - {icon((BoolCast(targetDoc?.[property])) as any)} - +
{icon((BoolCast(targetDoc?.[property])) as any)}
+ +
{label}
{/* */}
-
{label}
+ +
); @@ -94,14 +96,14 @@ export class PropertiesButtons extends React.Component<{}, {}> { // on => 'portrait' // ); // } - // @computed get clustersButton() { - // return this.propertyToggleBtn( - // 'Clusters', - // '_freeform_useClusters', - // on => `${on ? 'Hide' : 'Show'} clusters`, - // on => 'braille' - // ); - // } + @computed get clustersButton() { + return this.propertyToggleBtn( + 'Clusters', + '_freeform_useClusters', + on => `${on ? 'Hide' : 'Show'} clusters`, + on => + ); + } // @computed get panButton() { // return this.propertyToggleBtn( // 'Lock\xA0View', @@ -416,8 +418,8 @@ export class PropertiesButtons extends React.Component<{}, {}> {
{/* {toggle(this.titleButton)} {toggle(this.captionButton)} */} - {toggle(this.lockButton)} - {/* {toggle(this.onClickButton)} + {toggle(this.lockButton)} + {/*{toggle(this.onClickButton)} {toggle(this.layout_fitWidthButton)} {toggle(this.freezeThumb)} {toggle(this.forceActiveButton)} @@ -429,9 +431,9 @@ export class PropertiesButtons extends React.Component<{}, {}> { {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.snapButton, { display: !isCollection ? 'none' : '' })} */} {toggle(this.clustersButton, { display: !isFreeForm ? 'none' : '' })} - {toggle(this.panButton, { display: !isFreeForm ? 'none' : '' })} + {/* {toggle(this.panButton, { display: !isFreeForm ? 'none' : '' })} {toggle(this.perspectiveButton, { display: !isCollection || isNovice ? 'none' : '' })} */}
); diff --git a/src/client/views/PropertiesView.scss b/src/client/views/PropertiesView.scss index b3d16d82a..49f2fc6fe 100644 --- a/src/client/views/PropertiesView.scss +++ b/src/client/views/PropertiesView.scss @@ -837,7 +837,7 @@ } .propertiesView-wordTitle{ - color:silver; + color:darkslategray; font-weight:200; } @@ -854,7 +854,7 @@ } .propertiesView-wordType{ - color:silver; + color:darkslategray; font-weight:200; } -- cgit v1.2.3-70-g09d2 From 50ee9be87269ced48f0c0c8867316c9ff0b4258b Mon Sep 17 00:00:00 2001 From: eperelm2 Date: Tue, 20 Jun 2023 11:55:32 -0400 Subject: fixing buttons tues morn --- src/client/views/MainView.tsx | 2 +- src/client/views/PropertiesButtons.tsx | 96 +++++++++++++++++----------------- src/client/views/PropertiesView.scss | 11 ++++ src/client/views/PropertiesView.tsx | 53 +++++++++---------- 4 files changed, 85 insertions(+), 77 deletions(-) (limited to 'src/client/views/PropertiesView.scss') 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 : ( -
+
)} 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, 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(targetDoc?.[property])}
} 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 ? : ) //'border-all' + on => (on ? : ) //'border-all' ); } @@ -294,23 +294,23 @@ export class PropertiesButtons extends React.Component<{}, {}> { // // ); // } - @computed - get perspectiveButton() { - return !this.selectedDoc ? null : ( - Choose view perspective
} placement="top"> -
-
- -
e.stopPropagation()}> - -
- -
-
Perspective
-
- - ); - } + // @computed + // get perspectiveButton() { //WHERE ARE YOU + // return !this.selectedDoc ? null : ( + // Choose view perspective} placement="top"> + //
+ //
+ // + //
e.stopPropagation()}> + // + //
+ // + //
+ //
Perspective
+ //
+ // + // ); + // } @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 { @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 { } @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 { ); } - @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 (
-
( this.doubleClickClose, this.openLinks = true))} onClick={action(() => (this.openLinks = !this.openLinks))} style={{ backgroundColor: this.openLinks ? 'black' : '' }}> +
Linked To
@@ -1492,9 +1482,16 @@ export class PropertiesView extends React.Component { minWidth: this.props.width, //overflowY: this.scrolling ? "scroll" : "visible" }}> -
- Properties +
+
+ Properties +
+
window.open('https://brown-dash.github.io/Dash-Documentation/')}> +
+
+ +
{this.editableTitle}
{this.currentType}
-- cgit v1.2.3-70-g09d2 From 5b7a0804fa2bd4b956b3617501619737814bd28b Mon Sep 17 00:00:00 2001 From: eperelm2 Date: Fri, 30 Jun 2023 14:47:41 -0400 Subject: contexts work now --- src/client/views/PropertiesDocContextSelector.tsx | 3 +++ src/client/views/PropertiesView.scss | 14 +++++++++++--- src/client/views/PropertiesView.tsx | 16 ++++++++++------ 3 files changed, 24 insertions(+), 9 deletions(-) (limited to 'src/client/views/PropertiesView.scss') diff --git a/src/client/views/PropertiesDocContextSelector.tsx b/src/client/views/PropertiesDocContextSelector.tsx index e1279c9a7..ea3bb434b 100644 --- a/src/client/views/PropertiesDocContextSelector.tsx +++ b/src/client/views/PropertiesDocContextSelector.tsx @@ -19,6 +19,7 @@ type PropertiesDocContextSelectorProps = { @observer export class PropertiesDocContextSelector extends React.Component { + @computed get _docs() { if (!this.props.DocView) return []; const target = this.props.DocView.props.Document; @@ -39,6 +40,8 @@ export class PropertiesDocContextSelector extends React.Component()) .keys() ); + console.log("embeddings " + embeddings.length); + return doclayouts .filter(doc => !Doc.AreProtosEqual(doc, CollectionDockingView.Instance?.props.Document)) .filter(doc => !Doc.IsSystem(doc)) diff --git a/src/client/views/PropertiesView.scss b/src/client/views/PropertiesView.scss index a9577b232..023e08e6a 100644 --- a/src/client/views/PropertiesView.scss +++ b/src/client/views/PropertiesView.scss @@ -443,12 +443,20 @@ .propertiesView-fields-checkbox { float: right; height: 20px; - margin-top: -9px; + margin-top: -4px; + //margin-top: -9px; + display: flex; + flex-direction: column; + align-items: center; + color:black; + // justify-content: center; .propertiesView-fields-checkbox-text { font-size: 7px; - margin-top: -10px; - margin-left: 6px; + text-align: center; + margin-right: 6px; + margin-top: -10px; + // margin-left: 6px; } } diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx index 60e93cdfd..585076b67 100644 --- a/src/client/views/PropertiesView.tsx +++ b/src/client/views/PropertiesView.tsx @@ -198,7 +198,7 @@ export class PropertiesView extends React.Component { }); rows.push( -
+
''} SetValue={this.setKeyValue} />
); @@ -257,9 +257,12 @@ export class PropertiesView extends React.Component { } @computed get contextCount(){ - if (this.selectedDoc != undefined){ - const aliases = DocListCast(this.selectedDoc.aliases) - return aliases.length + console.log("in context count"); + if (this.selectedDocumentView){ + const target = (this.selectedDocumentView.props.Document) + const embeddings = DocListCast(target.proto_embeddings) + console.log(embeddings.length -1 ); + return (embeddings.length - 1) } else{ return 0; } @@ -462,6 +465,7 @@ export class PropertiesView extends React.Component { } @computed get fieldsCheckbox() { + // color= "primary" return ; } @@ -1301,7 +1305,7 @@ export class PropertiesView extends React.Component { {!Doc.noviceMode && this.openFields ? (
{this.fieldsCheckbox} -
Layout
+
Embedding
) : null} {!this.openFields ? null :
{Doc.noviceMode ? this.noviceFields : this.expandedField}
} @@ -1342,7 +1346,7 @@ export class PropertiesView extends React.Component {
- {!this.openContexts ? null : this.contextCount > 0 ?
{this.contexts}
:
There are no other contexts.
} + {!this.openContexts ? null : this.contextCount > 0 ?
{this.contexts}
:
There are no other contexts.
}
); } -- cgit v1.2.3-70-g09d2