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 From 54308259a8cd3ac98aaee550ea01ad97f17172e6 Mon Sep 17 00:00:00 2001 From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com> Date: Mon, 17 Jul 2023 23:11:35 -0400 Subject: so many updates --- deploy/index.html | 7 +- deploy/loader.css | 5 +- package-lock.json | 232 +++---- package.json | 2 +- src/client/documents/Documents.ts | 6 +- src/client/util/CurrentUserUtils.ts | 63 +- src/client/util/DropConverter.ts | 2 +- src/client/util/ReportManager.tsx | 4 +- src/client/util/SettingsManager.scss | 93 +-- src/client/util/SettingsManager.tsx | 186 ++++-- src/client/views/AntimodeMenu.scss | 32 +- src/client/views/AntimodeMenu.tsx | 5 + src/client/views/DashboardView.scss | 22 + src/client/views/DashboardView.tsx | 98 ++- src/client/views/EditableView.tsx | 75 ++- src/client/views/GestureOverlay.tsx | 2 +- src/client/views/MainView.scss | 20 - src/client/views/MainView.tsx | 13 +- src/client/views/MainViewModal.scss | 6 +- src/client/views/MainViewModal.tsx | 7 +- src/client/views/PropertiesButtons.scss | 8 +- src/client/views/PropertiesButtons.tsx | 98 ++- .../views/PropertiesDocBacklinksSelector.scss | 2 +- .../views/PropertiesDocBacklinksSelector.tsx | 2 +- src/client/views/PropertiesDocContextSelector.tsx | 1 + src/client/views/PropertiesSection.scss | 24 + src/client/views/PropertiesSection.tsx | 51 ++ src/client/views/PropertiesView.scss | 364 +--------- src/client/views/PropertiesView.tsx | 743 ++++++++++----------- src/client/views/StyleProvider.tsx | 10 +- src/client/views/UndoStack.scss | 9 +- src/client/views/UndoStack.tsx | 48 +- src/client/views/collections/CollectionMenu.scss | 651 +----------------- src/client/views/collections/CollectionMenu.tsx | 51 +- .../views/collections/CollectionTreeView.tsx | 2 + src/client/views/collections/TabDocView.scss | 17 - src/client/views/collections/TabDocView.tsx | 103 ++- src/client/views/collections/TreeView.scss | 36 +- src/client/views/collections/TreeView.tsx | 35 +- .../collectionFreeForm/MarqueeOptionsMenu.tsx | 69 +- .../collectionLinear/CollectionLinearView.tsx | 51 +- src/client/views/global/globalScripts.ts | 49 +- src/client/views/linking/LinkPopup.scss | 5 - src/client/views/linking/LinkPopup.tsx | 4 +- src/client/views/nodes/DocumentContentsView.tsx | 2 +- src/client/views/nodes/DocumentView.tsx | 4 +- .../views/nodes/FontIconBox/ButtonInterface.ts | 12 + .../views/nodes/FontIconBox/FontIconBadge.scss | 11 + .../views/nodes/FontIconBox/FontIconBadge.tsx | 37 + .../views/nodes/FontIconBox/FontIconBox.scss | 438 ++++++++++++ src/client/views/nodes/FontIconBox/FontIconBox.tsx | 412 ++++++++++++ src/client/views/nodes/button/FontIconBox.scss | 438 ------------ src/client/views/nodes/button/FontIconBox.tsx | 385 ----------- src/client/views/pdf/AnchorMenu.tsx | 121 ++-- src/client/views/search/SearchBox.scss | 3 +- src/client/views/search/SearchBox.tsx | 7 +- src/client/views/selectedDoc/SelectedDocView.scss | 3 + src/client/views/selectedDoc/SelectedDocView.tsx | 47 ++ src/client/views/selectedDoc/index.ts | 1 + src/client/views/topbar/TopBar.tsx | 36 +- 60 files changed, 2279 insertions(+), 2991 deletions(-) create mode 100644 src/client/views/PropertiesSection.scss create mode 100644 src/client/views/PropertiesSection.tsx create mode 100644 src/client/views/nodes/FontIconBox/ButtonInterface.ts create mode 100644 src/client/views/nodes/FontIconBox/FontIconBadge.scss create mode 100644 src/client/views/nodes/FontIconBox/FontIconBadge.tsx create mode 100644 src/client/views/nodes/FontIconBox/FontIconBox.scss create mode 100644 src/client/views/nodes/FontIconBox/FontIconBox.tsx delete mode 100644 src/client/views/nodes/button/FontIconBox.scss delete mode 100644 src/client/views/nodes/button/FontIconBox.tsx create mode 100644 src/client/views/selectedDoc/SelectedDocView.scss create mode 100644 src/client/views/selectedDoc/SelectedDocView.tsx create mode 100644 src/client/views/selectedDoc/index.ts (limited to 'src/client/views/PropertiesView.scss') diff --git a/deploy/index.html b/deploy/index.html index f8003f126..c8ad2a8d4 100644 --- a/deploy/index.html +++ b/deploy/index.html @@ -5,7 +5,7 @@ Docs.Create.StackingDocument(items??[], opts), reqdStackOpts, menuBtns, { dropConverter: "convertToButtons(dragData)" }); @@ -609,7 +609,7 @@ export class CurrentUserUtils { const btns = btnDescs.map(desc => dockBtn({_width: 30, _height: 30, defaultDoubleClick: 'ignore', undoIgnoreFields: new List(['opacity']), _dragOnlyWithinContainer: true, ...desc.opts}, desc.scripts)); const dockBtnsReqdOpts:DocumentOptions = { title: "docked buttons", _height: 40, flexGap: 0, layout_boxShadow: "standard", childDragAction: 'move', - childDontRegisterViews: true, linearView_IsExpanded: true, linearView_Expandable: true, ignoreClick: true + childDontRegisterViews: true, linearView_IsOpen: true, linearView_Expandable: true, ignoreClick: true }; reaction(() => UndoManager.redoStack.slice(), () => Doc.GetProto(btns.find(btn => btn.title === "Redo")!).opacity = UndoManager.CanRedo() ? 1 : 0.4, { fireImmediately: true }); reaction(() => UndoManager.undoStack.slice(), () => Doc.GetProto(btns.find(btn => btn.title === "Undo")!).opacity = UndoManager.CanUndo() ? 1 : 0.4, { fireImmediately: true }); @@ -625,12 +625,12 @@ export class CurrentUserUtils { } static viewTools(): Button[] { return [ - { title: "Snap\xA0Lines", icon: "th", toolTip: "Show Snap Lines", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"snaplines", funcs: {}, scripts: { onClick: 'showFreeform(self.toolType, _readOnly_)'}}, // Only when floating document is selected in freeform - { title: "Grid", icon: "border-all", toolTip: "Show Grid", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"grid", funcs: {}, scripts: { onClick: 'showFreeform(self.toolType, _readOnly_)'}}, // Only when floating document is selected in freeform - { title: "View\xA0All", icon: "object-group", toolTip: "Fit all Docs to View",btnType: ButtonType.ToggleButton, expertMode: false, toolType:"viewAll", funcs: {}, scripts: { onClick: 'showFreeform(self.toolType, _readOnly_)'}}, // Only when floating document is selected in freeform - { title: "Clusters", icon: "braille", toolTip: "Show Doc Clusters", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"clusters", funcs: {}, scripts: { onClick: 'showFreeform(self.toolType, _readOnly_)'}}, // Only when floating document is selected in freeform - { title: "Cards", icon: "brain", toolTip: "Flashcards", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"flashcards", funcs: {}, scripts: { onClick: 'showFreeform(self.toolType, _readOnly_)'}}, // Only when floating document is selected in freeform - { title: "Arrange",icon:"arrow-down-short-wide",toolTip:"Toggle Auto Arrange", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"arrange", funcs: {hidden: 'IsNoviceMode()'}, scripts: { onClick: 'showFreeform(self.toolType, _readOnly_)'}}, // Only when floating document is selected in freeform + { title: "Snap", icon: "th", toolTip: "Show Snap Lines", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"snaplines", funcs: {}, scripts: { onClick: '{ return showFreeform(self.toolType, _readOnly_);}'}}, // Only when floating document is selected in freeform + { title: "Grid", icon: "border-all", toolTip: "Show Grid", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"grid", funcs: {}, scripts: { onClick: '{ return showFreeform(self.toolType, _readOnly_);}'}}, // Only when floating document is selected in freeform + { title: "View All", icon: "object-group", toolTip: "Fit all Docs to View",btnType: ButtonType.ToggleButton, expertMode: false, toolType:"viewAll", funcs: {}, scripts: { onClick: '{ return showFreeform(self.toolType, _readOnly_);}'}}, // Only when floating document is selected in freeform + { title: "Clusters", icon: "braille", toolTip: "Show Doc Clusters", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"clusters", funcs: {}, scripts: { onClick: '{ return showFreeform(self.toolType, _readOnly_);}'}}, // Only when floating document is selected in freeform + { title: "Cards", icon: "brain", toolTip: "Flashcards", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"flashcards", funcs: {}, scripts: { onClick: '{ return showFreeform(self.toolType, _readOnly_);}'}}, // Only when floating document is selected in freeform + { title: "Arrange",icon:"arrow-down-short-wide",toolTip:"Toggle Auto Arrange", btnType: ButtonType.ToggleButton, expertMode: false, toolType:"arrange", funcs: {hidden: 'IsNoviceMode()'}, scripts: { onClick: '{ return showFreeform(self.toolType, _readOnly_);}'}}, // Only when floating document is selected in freeform ] } static textTools():Button[] { @@ -645,9 +645,13 @@ export class CurrentUserUtils { { title: "Under", toolTip: "Underline (Ctrl+U)", btnType: ButtonType.ToggleButton, icon: "underline", toolType:"underline", scripts: {onClick: '{ return toggleCharStyle(self.toolType, _readOnly_);}'} }, { title: "Bullets", toolTip: "Bullet List", btnType: ButtonType.ToggleButton, icon: "list", toolType:"bullet", scripts: {onClick: '{ return toggleCharStyle(self.toolType, _readOnly_);}'} }, { title: "#", toolTip: "Number List", btnType: ButtonType.ToggleButton, icon: "list-ol", toolType:"decimal", scripts: {onClick: '{ return toggleCharStyle(self.toolType, _readOnly_);}'} }, - { title: "Left", toolTip: "Left align (Cmd-[)", btnType: ButtonType.ToggleButton, icon: "align-left", toolType:"left", scripts: {onClick: '{ return toggleCharStyle(self.toolType, _readOnly_);}' }}, - { title: "Center", toolTip: "Center align (Cmd-\\)",btnType: ButtonType.ToggleButton, icon: "align-center",toolType:"center", scripts: {onClick: '{ return toggleCharStyle(self.toolType, _readOnly_);}'} }, - { title: "Right", toolTip: "Right align (Cmd-])", btnType: ButtonType.ToggleButton, icon: "align-right", toolType:"right", scripts: {onClick: '{ return toggleCharStyle(self.toolType, _readOnly_);}'} }, + { title: "Alignment",toolTip: "Alignment", btnType: ButtonType.MultiToggleButton, toolType:"alignment", ignoreClick: true, scripts: {script: '{ return setFontAttr(self.toolType, value, _readOnly_);}'}, + subMenu: [ + { title: "Left", toolTip: "Left align (Cmd-[)", btnType: ButtonType.ToggleButton, icon: "align-left", toolType:"left", scripts: {onClick: '{ return toggleCharStyle(self.toolType, _readOnly_);}' }}, + { title: "Center", toolTip: "Center align (Cmd-\\)",btnType: ButtonType.ToggleButton, icon: "align-center",toolType:"center", scripts: {onClick: '{ return toggleCharStyle(self.toolType, _readOnly_);}'} }, + { title: "Right", toolTip: "Right align (Cmd-])", btnType: ButtonType.ToggleButton, icon: "align-right", toolType:"right", scripts: {onClick: '{ return toggleCharStyle(self.toolType, _readOnly_);}'} }, + ] + }, { title: "Dictate", toolTip: "Dictate", btnType: ButtonType.ToggleButton, icon: "microphone", toolType:"dictation", scripts: {onClick: '{ return toggleCharStyle(self.toolType, _readOnly_);}'}}, { title: "NoLink", toolTip: "Auto Link", btnType: ButtonType.ToggleButton, icon: "link", toolType:"noAutoLink", expertMode:true, scripts: {onClick: '{ return toggleCharStyle(self.toolType, _readOnly_);}'}, funcs: {hidden: 'IsNoviceMode()'}}, // { title: "Strikethrough", tooltip: "Strikethrough", btnType: ButtonType.ToggleButton, icon: "strikethrough", scripts: {onClick:: 'toggleStrikethrough()'}}, @@ -695,17 +699,17 @@ export class CurrentUserUtils { title: "Perspective", toolTip: "View", btnType: ButtonType.DropdownList, ignoreClick: true, width: 100, scripts: { script: 'setView(value, _readOnly_)'}}, { title: "Pin", icon: "map-pin", toolTip: "Pin View to Trail", btnType: ButtonType.ClickButton, expertMode: false, width: 30, scripts: { onClick: 'pinWithView(altKey)'}}, { title: "Fill", icon: "fill-drip", toolTip: "Background Fill Color",btnType: ButtonType.ColorButton, expertMode: false, ignoreClick: true, width: 30, scripts: { script: 'return setBackgroundColor(value, _readOnly_)'}}, // Only when a document is selected - { title: "Header", icon: "heading", toolTip: "Header Color", btnType: ButtonType.ColorButton, expertMode: false, ignoreClick: true, scripts: { script: 'return setHeaderColor(value, _readOnly_)'}}, - { title: "Overlay", icon: "layer-group", toolTip: "Overlay", btnType: ButtonType.ToggleButton, expertMode: false, toolType:CollectionViewType.Freeform, funcs: {hidden: '!SelectionManager_selectedDocType(self.toolType, self.expertMode, true)'}, scripts: { onClick: 'toggleOverlay(_readOnly_)'}}, // Only when floating document is selected in freeform + { title: "Header", icon: "heading", toolTip: "Header Color", btnType: ButtonType.ColorButton, expertMode: true, ignoreClick: true, scripts: { script: 'return setHeaderColor(value, _readOnly_)'}}, + { title: "Overlay", icon: "layer-group", toolTip: "Overlay", btnType: ButtonType.ToggleButton, expertMode: true, toolType:CollectionViewType.Freeform, funcs: {hidden: '!SelectionManager_selectedDocType(self.toolType, self.expertMode, true)'}, scripts: { onClick: 'return { toggleOverlay(_readOnly_); }'}}, // Only when floating document is selected in freeform { title: "Back", icon: "chevron-left", toolTip: "Prev Animation Frame", btnType: ButtonType.ClickButton, expertMode: true, toolType:CollectionViewType.Freeform, funcs: {hidden: '!SelectionManager_selectedDocType(self.toolType, self.expertMode)'}, width: 30, scripts: { onClick: 'prevKeyFrame(_readOnly_)'}}, { title: "Num", icon:"", toolTip: "Frame Number (click to toggle edit mode)", btnType: ButtonType.TextButton, expertMode: true, toolType:CollectionViewType.Freeform, funcs: {hidden: '!SelectionManager_selectedDocType(self.toolType, self.expertMode)', buttonText: 'selectedDocs()?.lastElement()?.currentFrame?.toString()'}, width: 20, scripts: { onClick: '{ return curKeyFrame(_readOnly_);}'}}, { title: "Fwd", icon: "chevron-right", toolTip: "Next Animation Frame", btnType: ButtonType.ClickButton, expertMode: true, toolType:CollectionViewType.Freeform, funcs: {hidden: '!SelectionManager_selectedDocType(self.toolType, self.expertMode)'}, width: 30, scripts: { onClick: 'nextKeyFrame(_readOnly_)'}}, - { title: "Text", icon: "Text", toolTip: "Text functions", subMenu: CurrentUserUtils.textTools(), expertMode: false, toolType:DocumentType.RTF, funcs: { linearView_IsExpanded: `SelectionManager_selectedDocType(self.toolType, self.expertMode)`} }, // Always available - { title: "Ink", icon: "Ink", toolTip: "Ink functions", subMenu: CurrentUserUtils.inkTools(), expertMode: false, toolType:DocumentType.INK, funcs: { linearView_IsExpanded: `SelectionManager_selectedDocType(self.toolType, self.expertMode)`}, scripts: { onClick: 'setInkToolDefaults()'} }, // Always available - { title: "Doc", icon: "Doc", toolTip: "Freeform Doc tools", subMenu: CurrentUserUtils.freeTools(), expertMode: false, toolType:CollectionViewType.Freeform, funcs: {hidden: `!SelectionManager_selectedDocType(self.toolType, self.expertMode, true)`, linearView_IsExpanded: `SelectionManager_selectedDocType(self.toolType, self.expertMode)`} }, // Always available - { title: "View", icon: "View", toolTip: "View tools", subMenu: CurrentUserUtils.viewTools(), expertMode: false, toolType:CollectionViewType.Freeform, funcs: {hidden: `!SelectionManager_selectedDocType(self.toolType, self.expertMode)`, linearView_IsExpanded: `SelectionManager_selectedDocType(self.toolType, self.expertMode)`} }, // Always available - { title: "Web", icon: "Web", toolTip: "Web functions", subMenu: CurrentUserUtils.webTools(), expertMode: false, toolType:DocumentType.WEB, funcs: {hidden: `!SelectionManager_selectedDocType(self.toolType, self.expertMode)`, linearView_IsExpanded: `SelectionManager_selectedDocType(self.toolType, self.expertMode)`} }, // Only when Web is selected - { title: "Schema", icon: "Schema",linearBtnWidth:58,toolTip: "Schema functions",subMenu: CurrentUserUtils.schemaTools(), expertMode: false, toolType:CollectionViewType.Schema, funcs: {hidden: `!SelectionManager_selectedDocType(self.toolType, self.expertMode)`, linearView_IsExpanded: `SelectionManager_selectedDocType(self.toolType, self.expertMode)`} } // Only when Schema is selected + { title: "Text", icon: "Text", toolTip: "Text functions", subMenu: CurrentUserUtils.textTools(), expertMode: false, toolType:DocumentType.RTF, funcs: { linearView_IsOpen: `SelectionManager_selectedDocType(self.toolType, self.expertMode)`} }, // Always available + { title: "Ink", icon: "Ink", toolTip: "Ink functions", subMenu: CurrentUserUtils.inkTools(), expertMode: false, toolType:DocumentType.INK, funcs: { linearView_IsOpen: `SelectionManager_selectedDocType(self.toolType, self.expertMode)`}, scripts: { onClick: 'setInkToolDefaults()'} }, // Always available + { title: "Doc", icon: "Doc", toolTip: "Freeform Doc tools", subMenu: CurrentUserUtils.freeTools(), expertMode: false, toolType:CollectionViewType.Freeform, funcs: {hidden: `!SelectionManager_selectedDocType(self.toolType, self.expertMode, true)`, linearView_IsOpen: `SelectionManager_selectedDocType(self.toolType, self.expertMode)`} }, // Always available + { title: "View", icon: "View", toolTip: "View tools", subMenu: CurrentUserUtils.viewTools(), expertMode: false, toolType:CollectionViewType.Freeform, funcs: {hidden: `!SelectionManager_selectedDocType(self.toolType, self.expertMode)`, linearView_IsOpen: `SelectionManager_selectedDocType(self.toolType, self.expertMode)`} }, // Always available + { title: "Web", icon: "Web", toolTip: "Web functions", subMenu: CurrentUserUtils.webTools(), expertMode: false, toolType:DocumentType.WEB, funcs: {hidden: `!SelectionManager_selectedDocType(self.toolType, self.expertMode)`, linearView_IsOpen: `SelectionManager_selectedDocType(self.toolType, self.expertMode)`} }, // Only when Web is selected + { title: "Schema", icon: "Schema",linearBtnWidth:58,toolTip: "Schema functions",subMenu: CurrentUserUtils.schemaTools(), expertMode: false, toolType:CollectionViewType.Schema, funcs: {hidden: `!SelectionManager_selectedDocType(self.toolType, self.expertMode)`, linearView_IsOpen: `SelectionManager_selectedDocType(self.toolType, self.expertMode)`} } // Only when Schema is selected ]; } @@ -713,7 +717,6 @@ export class CurrentUserUtils { static setupContextMenuButton(params:Button, btnDoc?:Doc) { const reqdOpts:DocumentOptions = { ...OmitKeys(params, ["scripts", "funcs", "subMenu"]).omit, - backgroundColor: params.backgroundColor ??"transparent", /// a bit hacky. if an onClick is specified, then assume a toggle uses onClick to get the backgroundColor (see below). Otherwise, assume a transparent background color: Colors.WHITE, isSystem: true, _nativeWidth: params.width ?? 30, _width: params.width ?? 30, _height: 30, _nativeHeight: 30, linearBtnWidth: params.linearBtnWidth, @@ -722,21 +725,20 @@ export class CurrentUserUtils { }; const reqdFuncs:{[key:string]:any} = { ...params.funcs, - backgroundColor: params.btnType === ButtonType.ToggleButton ? params.scripts?.onClick:undefined /// a bit hacky. if onClick is set, then we assume it returns a color value when queried with '_readOnly_'. This will be true for toggle buttons, but not generally } return DocUtils.AssignScripts(DocUtils.AssignOpts(btnDoc, reqdOpts) ?? Docs.Create.FontIconDocument(reqdOpts), params.scripts, reqdFuncs); } /// Initializes all the default buttons for the top bar context menu static setupContextMenuButtons(doc: Doc, field="myContextMenuBtns") { - const reqdCtxtOpts:DocumentOptions = { title: "context menu buttons", undoIgnoreFields:new List(['width', "linearView_IsExpanded"]), flexGap: 0, childDragAction: 'embed', childDontRegisterViews: true, linearView_IsExpanded: true, ignoreClick: true, linearView_Expandable: false, _height: 35 }; + const reqdCtxtOpts:DocumentOptions = { title: "context menu buttons", undoIgnoreFields:new List(['width', "linearView_IsOpen"]), flexGap: 0, childDragAction: 'embed', childDontRegisterViews: true, linearView_IsOpen: true, ignoreClick: true, linearView_Expandable: false, _height: 35 }; const ctxtMenuBtnsDoc = DocUtils.AssignDocField(doc, field, (opts, items) => this.linearButtonList(opts, items??[]), reqdCtxtOpts, undefined); const ctxtMenuBtns = CurrentUserUtils.contextMenuTools().map(params => { const menuBtnDoc = DocListCast(ctxtMenuBtnsDoc?.data).find(doc => doc.title === params.title); - if (!params.subMenu) { + if (!params.subMenu) { // button does not have a sub menu return this.setupContextMenuButton(params, menuBtnDoc); - } else { - const reqdSubMenuOpts = { ...OmitKeys(params, ["scripts", "funcs", "subMenu"]).omit, undoIgnoreFields: new List(['width', "linearView_IsExpanded"]), + } else { // linear view + const reqdSubMenuOpts = { ...OmitKeys(params, ["scripts", "funcs", "subMenu"]).omit, undoIgnoreFields: new List(['width', "linearView_IsOpen"]), childDontRegisterViews: true, flexGap: 0, _height: 30, ignoreClick: params.scripts?.onClick ? false : true, linearView_SubMenu: true, linearView_Expandable: true, }; const items = params.subMenu?.map(sub => @@ -847,6 +849,11 @@ export class CurrentUserUtils { doc.fontHighlight ?? (doc.fontHighlight = ""); doc.defaultAclPrivate ?? (doc.defaultAclPrivate = false); doc.savedFilters ?? (doc.savedFilters = new List()); + doc.userBackgroundColor ?? (doc.userBackgroundColor = Colors.DARK_GRAY); + addStyleSheetRule(SettingsManager._settingsStyle, 'lm_header', { background: `${doc.userBackgroundColor} !important` }); + doc.userVariantColor ?? (doc.userVariantColor = Colors.MEDIUM_BLUE); + doc.userColor ?? (doc.userColor = Colors.LIGHT_GRAY); + doc.userTheme ?? (doc.userTheme = ColorScheme.Dark); doc.filterDocCount = 0; doc.treeViewFreezeChildren = "remove|add"; this.setupLinkDocs(doc, linkDatabaseId); diff --git a/src/client/util/DropConverter.ts b/src/client/util/DropConverter.ts index 47997cc5c..f235be192 100644 --- a/src/client/util/DropConverter.ts +++ b/src/client/util/DropConverter.ts @@ -9,7 +9,7 @@ import { RichTextField } from '../../fields/RichTextField'; import { ImageField } from '../../fields/URLField'; import { ScriptingGlobals } from './ScriptingGlobals'; import { listSpec } from '../../fields/Schema'; -import { ButtonType } from '../views/nodes/button/FontIconBox'; +import { ButtonType } from '../views/nodes/FontIconBox/FontIconBox'; export function MakeTemplate(doc: Doc, first: boolean = true, rename: Opt = undefined, templateField: string = '') { if (templateField) Doc.GetProto(doc).title = templateField; /// the title determines which field is being templated diff --git a/src/client/util/ReportManager.tsx b/src/client/util/ReportManager.tsx index 4c1020455..89c17e42f 100644 --- a/src/client/util/ReportManager.tsx +++ b/src/client/util/ReportManager.tsx @@ -11,7 +11,7 @@ import { GoogleAuthenticationManager } from '../apis/GoogleAuthenticationManager import { DocServer } from '../DocServer'; import { Networking } from '../Network'; import { MainViewModal } from '../views/MainViewModal'; -import { FontIconBox } from '../views/nodes/button/FontIconBox'; +import { FontIconBox } from '../views/nodes/FontIconBox/FontIconBox'; import { DragManager } from './DragManager'; import { GroupManager } from './GroupManager'; import './SettingsManager.scss'; @@ -290,7 +290,7 @@ export class ReportManager extends React.Component<{}> { isDisplayed={this.isOpen} interactive={true} closeOnExternalClick={this.close} - dialogueBoxStyle={{ width: 'auto', height: '500px', background: Cast(Doc.SharingDoc().userColor, 'string', null) }} + dialogueBoxStyle={{ width: 'auto', height: '500px', background: Cast(Doc.UserDoc().userColor, 'string', null) }} /> ); } diff --git a/src/client/util/SettingsManager.scss b/src/client/util/SettingsManager.scss index c41adfdd7..bca649bc3 100644 --- a/src/client/util/SettingsManager.scss +++ b/src/client/util/SettingsManager.scss @@ -2,41 +2,20 @@ .settings-interface { //background-color: whitesmoke !important; - color: grey; width: 450px; - - button { - background: #315a96; - outline: none; - border-radius: 5px; - border: 0px; - color: #fcfbf7; - text-transform: uppercase; - letter-spacing: 2px; - font-size: 75%; - padding: 10px; - margin: 10px; - transition: transform 0.2s; - margin: 2px; - } } .settings-title { font-size: 25px; font-weight: bold; padding-right: 10px; - color: black; } .settings-username { font-size: 12px; padding-right: 15px; - color: black; margin-top: 10px; margin-bottom: 10px; - /* right: 135; */ - // position: absolute; - // left: 243; } .settings-section { @@ -49,7 +28,6 @@ font-size: 16; font-weight: bold; text-align: left; - color: black; width: 80; margin-right: 50px; } @@ -61,45 +39,10 @@ .password-content { display: flex; + width: 100%; flex-direction: column; align-items: flex-start; - - .password-content-inputs { - display: flex; - flex-direction: column; - width: 100%; - font-size: 10px; - align-items: flex-start; - - .password-inputs { - border: 1px solid rgb(160, 160, 160); - margin-bottom: 15px; - width: 130; - color: $medium-gray; - border-radius: 5px; - padding: 7px; - } - } - - .password-content-buttons { - display: flex; - gap: 5px; - justify-content: center; - align-items: flex-start; - flex-direction: column; - - .password-submit { - //margin-left: 85px; - margin-top: 5px; - } - - .password-forgot { - //margin-left: 65px; - //margin-top: -20px; - font-size: 12px; - white-space: nowrap; - } - } + gap: 5px; } .accounts-content { @@ -115,7 +58,6 @@ width: 80%; height: 35px; margin-right: 10px; - color: black; border-radius: 5px; &:hover { @@ -139,12 +81,6 @@ } } - .playground-text { - color: black; - margin-right: 10px; - margin-top: 2; - } - .acl-text { color: black; margin-top: 2; @@ -176,7 +112,6 @@ .appearances-content { display: flex; - color: black; font-size: 10px; .preferences-color { @@ -201,7 +136,6 @@ margin-top: 2px; .preferences-font-text { - color: black; margin-top: 4; margin-right: 4; margin-bottom: 2px; @@ -216,7 +150,6 @@ .font-select { height: 35px; - color: black; font-size: 9; margin-right: 6; border-radius: 5px; @@ -229,7 +162,6 @@ .size-select { height: 35px; - color: black; font-size: 9; border-radius: 5px; width: 30%; @@ -241,7 +173,6 @@ } .preferences-check { - color: black; margin-right: 4; margin-bottom: -3; margin-left: 5; @@ -265,7 +196,6 @@ .settings-content { - background: #e4e4e4; padding: 10px; width: 500px; flex: 1 1 auto; @@ -296,7 +226,6 @@ } h1 { - color: #121721; text-transform: uppercase; letter-spacing: 2px; font-size: 19; @@ -325,7 +254,6 @@ .padding { padding: 0 0 0 20px; - color: black; } } } @@ -336,16 +264,11 @@ min-height: 250px; height: 100%; width: 100%; - - .settings-content { - background-color: $off-white; - } } .settings-panel { position: relative; min-width: 150px; - background-color: $light-blue; .settings-user { position: absolute; @@ -370,16 +293,11 @@ .settings-tabs { // font-size: 16px; font-weight: 600; - color: black; .tab-control { padding: 10px; border-bottom: 1px solid #9f9e9e; cursor: pointer; - - &.active { - background-color: #fdfdfd; - } } } @@ -398,16 +316,18 @@ .tab-content { display: flex; + flex-flow: row wrap; + gap: 10px; + overflow: hidden; .tab-column { - flex: 0 0 50%; + flex: 0 0 calc(50% - 10px); flex-direction: column; display: flex; justify-content: flex-start; align-items: flex-start; .tab-column-title { - color: $dark-gray; font-size: 16px; font-weight: bold; margin-bottom: 10px; @@ -420,6 +340,7 @@ align-items: flex-start; flex-direction: column; gap: 10px; + width: 100%; } } } diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx index 09d6d034f..b6df5f26a 100644 --- a/src/client/util/SettingsManager.tsx +++ b/src/client/util/SettingsManager.tsx @@ -11,12 +11,12 @@ import { GoogleAuthenticationManager } from '../apis/GoogleAuthenticationManager import { DocServer } from '../DocServer'; import { Networking } from '../Network'; import { MainViewModal } from '../views/MainViewModal'; -import { FontIconBox } from '../views/nodes/button/FontIconBox'; +import { FontIconBox } from '../views/nodes/FontIconBox/FontIconBox'; import { DragManager } from './DragManager'; import { GroupManager } from './GroupManager'; import './SettingsManager.scss'; import { undoBatch } from './UndoManager'; -import { Button, ColorPicker, Dropdown, DropdownType, Group, Size, Toggle, ToggleType, Type } from 'browndash-components'; +import { Button, ColorPicker, Dropdown, DropdownType, EditableText, Group, NumberDropdown, Size, Toggle, ToggleType, Type } from 'browndash-components'; import { BsGoogle } from 'react-icons/bs' import { FaFillDrip, FaPalette } from 'react-icons/fa' const higflyout = require('@hig/flyout'); @@ -24,9 +24,10 @@ export const { anchorPoints } = higflyout; export const Flyout = higflyout.default; export enum ColorScheme { - Dark = '-Dark', - Light = '-Light', - System = '-MatchSystem', + Dark = 'Dark', + Light = 'Light', + System = 'Match System', + Custom = 'Custom' } export enum freeformScrollMode { @@ -53,8 +54,8 @@ export class SettingsManager extends React.Component<{}> { @computed get backgroundColor() { return Doc.UserDoc().activeCollectionBackground; } - @computed get colorScheme() { - return Doc.ActiveDashboard?.colorScheme; + @computed get userTheme() { + return Doc.UserDoc().userTheme; } constructor(props: {}) { @@ -76,14 +77,31 @@ export class SettingsManager extends React.Component<{}> { } }; + @computed get userColor() { + return StrCast(Doc.UserDoc().userColor) + } + + @computed get userVariantColor() { + return StrCast(Doc.UserDoc().userVariantColor) + } + + @computed get userBackgroundColor() { + return StrCast(Doc.UserDoc().userBackgroundColor) + } + @undoBatch selectUserMode = action((mode: string) => (Doc.noviceMode = mode === 'Novice')); @undoBatch changelayout_showTitle = action((e: React.ChangeEvent) => (Doc.UserDoc().layout_showTitle = (e.currentTarget as any).value ? 'title' : undefined)); @undoBatch changeFontFamily = action((font: string) => (Doc.UserDoc().fontFamily = font)); @undoBatch changeFontSize = action((val: number) => (Doc.UserDoc().fontSize = val)); - @undoBatch switchActiveBackgroundColor = action((color: string) => (Doc.UserDoc().activeCollectionBackground = color)); + @undoBatch switchUserBackgroundColor = action((color: string) => { + Doc.UserDoc().userBackgroundColor = color; + addStyleSheetRule(SettingsManager._settingsStyle, 'lm_header', { background: `${color} !important` }); + }); @undoBatch switchUserColor = action((color: string) => { - Doc.SharingDoc().userColor = undefined; - Doc.GetProto(Doc.SharingDoc()).userColor = color; + Doc.UserDoc().userColor = color; + }); + @undoBatch switchUserVariantColor = action((color: string) => { + Doc.UserDoc().userVariantColor = color; }); @undoBatch playgroundModeToggle = action(() => { this.playgroundMode = !this.playgroundMode; @@ -96,22 +114,24 @@ export class SettingsManager extends React.Component<{}> { @undoBatch @action changeColorScheme = action((scheme: string) => { - const activeDashboard = Doc.ActiveDashboard; - if (!activeDashboard) return; + Doc.UserDoc().userTheme = scheme; switch (scheme) { case ColorScheme.Light: - activeDashboard.colorScheme = ColorScheme.Light - addStyleSheetRule(SettingsManager._settingsStyle, 'lm_header', { background: '#d3d3d3 !important' }); + this.switchUserColor("#323232") + this.switchUserBackgroundColor("#DFDFDF") + this.switchUserVariantColor("#BDDDF5") break; case ColorScheme.Dark: - activeDashboard.colorScheme = ColorScheme.Dark; - addStyleSheetRule(SettingsManager._settingsStyle, 'lm_header', { background: 'black !important' }); + this.switchUserColor("#DFDFDF") + this.switchUserBackgroundColor("#323232") + this.switchUserVariantColor("#4476F7") + break; + case ColorScheme.Custom: break; case ColorScheme.System: default: - activeDashboard.colorScheme = ColorScheme.System; window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => { - activeDashboard.colorScheme = e.matches ? ColorScheme.Dark : ColorScheme.Light; // undefined means ColorScheme.Light until all CSS is updated with values for each color scheme (e.g., see MainView.scss, DocumentDecorations.scss) + e.matches ? ColorScheme.Dark : ColorScheme.Light; // undefined means ColorScheme.Light until all CSS is updated with values for each color scheme (e.g., see MainView.scss, DocumentDecorations.scss) }); break; } @@ -120,18 +140,16 @@ export class SettingsManager extends React.Component<{}> { @computed get colorsContent() { - const colorSchemes = [ColorScheme.Light, ColorScheme.Dark, ColorScheme.System]; - const schemeMap = ['Light', 'Dark', 'Match System']; - + const colorSchemes = [ColorScheme.Light, ColorScheme.Dark, ColorScheme.Custom, ColorScheme.System]; + const schemeMap = ['Light', 'Dark', 'Custom', 'Match System']; + const userTheme = StrCast(Doc.UserDoc().userTheme); return ( -
- } selectedColor={StrCast(Doc.UserDoc().activeCollectionBackground)} setSelectedColor={this.switchActiveBackgroundColor}/> - } selectedColor={StrCast(Doc.SharingDoc().userColor)} setSelectedColor={this.switchUserColor}/> +
this.changeColorScheme(scheme as string)} items={colorSchemes.map((scheme, i) => ( { @@ -140,8 +158,14 @@ export class SettingsManager extends React.Component<{}> { } ))} dropdownType={DropdownType.SELECT} - color={StrCast(Doc.SharingDoc().userColor)} + color={this.userColor} + fillWidth /> + {userTheme === ColorScheme.Custom && + } selectedColor={this.userColor} setSelectedColor={this.switchUserColor}/> + } selectedColor={this.userBackgroundColor} setSelectedColor={this.switchUserBackgroundColor}/> + } selectedColor={this.userVariantColor} setSelectedColor={this.switchUserVariantColor}/> + }
); } @@ -155,7 +179,7 @@ export class SettingsManager extends React.Component<{}> { toggleType={ToggleType.SWITCH} onClick={e => (Doc.UserDoc().layout_showTitle = Doc.UserDoc().layout_showTitle ? undefined : 'author_date')} toggleStatus={Doc.UserDoc().layout_showTitle !== undefined} size={Size.XSMALL} - color={StrCast(Doc.SharingDoc().userColor)} + color={this.userColor} /> { onClick={e => (Doc.UserDoc()['documentLinksButton-fullMenu'] = !Doc.UserDoc()['documentLinksButton-fullMenu'])} toggleStatus={BoolCast(Doc.UserDoc()['documentLinksButton-fullMenu'])} size={Size.XSMALL} - color={StrCast(Doc.SharingDoc().userColor)} + color={this.userColor} /> { onClick={e => FontIconBox.SetShowLabels(!FontIconBox.GetShowLabels())} toggleStatus={FontIconBox.GetShowLabels()} size={Size.XSMALL} - color={StrCast(Doc.SharingDoc().userColor)} + color={this.userColor} /> { onClick={e => FontIconBox.SetRecognizeGestures(!FontIconBox.GetRecognizeGestures())} toggleStatus={FontIconBox.GetRecognizeGestures()} size={Size.XSMALL} - color={StrCast(Doc.SharingDoc().userColor)} + color={this.userColor} /> { onClick={e => (Doc.UserDoc().activeInkHideTextLabels = !Doc.UserDoc().activeInkHideTextLabels)} toggleStatus={BoolCast(Doc.UserDoc().activeInkHideTextLabels)} size={Size.XSMALL} - color={StrCast(Doc.SharingDoc().userColor)} + color={this.userColor} /> { onClick={e => (Doc.UserDoc().openInkInLightbox = !Doc.UserDoc().openInkInLightbox)} toggleStatus={BoolCast(Doc.UserDoc().openInkInLightbox)} size={Size.XSMALL} - color={StrCast(Doc.SharingDoc().userColor)} + color={this.userColor} />
@@ -238,6 +262,15 @@ export class SettingsManager extends React.Component<{}> {
{/* */} + {}} + /> { return { @@ -252,7 +285,8 @@ export class SettingsManager extends React.Component<{}> { type={Type.TERT} selectedVal={StrCast(Doc.UserDoc().fontFamily)} setSelectedVal={(val) => {this.changeFontFamily(val as string)}} - color={StrCast(Doc.SharingDoc().userColor)} + color={this.userColor} + fillWidth />
@@ -262,8 +296,7 @@ export class SettingsManager extends React.Component<{}> { } @action - changeVal = (e: React.ChangeEvent, pass: string) => { - const value = (e.target as any).value; + changeVal = (value: string, pass: string) => { switch (pass) { case 'curr': this.curr_password = value; @@ -280,16 +313,33 @@ export class SettingsManager extends React.Component<{}> { @computed get passwordContent() { return (
-
- this.changeVal(e, 'curr')} /> - this.changeVal(e, 'new')} /> - this.changeVal(e, 'conf')} /> -
-
- {!this.passwordResultText ? null :
{this.passwordResultText}
} -
+ this.changeVal(val as string, 'curr')} + fillWidth + password + /> + this.changeVal(val as string, 'new')} + fillWidth + password + /> + this.changeVal(val as string, 'conf')} + fillWidth + password + /> + {!this.passwordResultText ? null :
{this.passwordResultText}
} +
); } @@ -346,14 +396,15 @@ export class SettingsManager extends React.Component<{}> { dropdownType={DropdownType.SELECT} type={Type.TERT} placement='bottom-start' - color={StrCast(Doc.SharingDoc().userColor)} + color={this.userColor} + fillWidth />
@@ -379,7 +430,7 @@ export class SettingsManager extends React.Component<{}> { dropdownType={DropdownType.SELECT} type={Type.TERT} placement='bottom-start' - color={StrCast(Doc.SharingDoc().userColor)} + color={this.userColor} />
@@ -390,12 +441,12 @@ export class SettingsManager extends React.Component<{}> { text={"Manage Groups"} type={Type.TERT} onClick={() => GroupManager.Instance?.open()} - color={StrCast(Doc.SharingDoc().userColor)} + color={this.userColor} /> (Doc.defaultAclPrivate = !Doc.defaultAclPrivate))}/>
@@ -414,23 +465,35 @@ export class SettingsManager extends React.Component<{}> { { title: 'Appearance', ele: this.appearanceContent }, { title: 'Text', ele: this.textContent }, ]; - return (
-
+
- {tabs.map(tab => ( -
(this.activeTab = tab.title))}> - {tab.title} -
- ))} + {tabs.map(tab => { + const isActive = this.activeTab === tab.title + return ( +
(this.activeTab = tab.title)) + }> + {tab.title} +
+ ) + })}
-
{Doc.CurrentUserEmail}
+
{Doc.CurrentUserEmail}
@@ -439,12 +502,13 @@ export class SettingsManager extends React.Component<{}> {
-
+
{tabs.map(tab => (
{tab.ele} @@ -462,7 +526,7 @@ export class SettingsManager extends React.Component<{}> { isDisplayed={this.isOpen} interactive={true} closeOnExternalClick={this.close} - dialogueBoxStyle={{ width: 'fit-content', height: '300px', background: Cast(Doc.SharingDoc().userColor, 'string', null) }} + dialogueBoxStyle={{ width: 'fit-content', height: '300px', background: Cast(Doc.UserDoc().userColor, 'string', null) }} /> ); } diff --git a/src/client/views/AntimodeMenu.scss b/src/client/views/AntimodeMenu.scss index 8a0e5480e..b205a0f1e 100644 --- a/src/client/views/AntimodeMenu.scss +++ b/src/client/views/AntimodeMenu.scss @@ -5,11 +5,15 @@ position: absolute; z-index: 10001; height: $antimodemenu-height; - background: $dark-gray; - border-bottom: $standard-border; + width: fit-content; + border-radius: $standard-border-radius; + overflow: hidden; // box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25); // border-radius: 0px 6px 6px 6px; display: flex; + justify-content: center; + align-items: center; + gap: 3px; &.with-rows { flex-direction: column @@ -20,30 +24,6 @@ height: 35px; } - .antimodeMenu-button { - background-color: transparent; - width: 35px; - height: 35px; - padding: 5; - text-align: center; - display: flex; - justify-content: center; - align-items: center; - position: relative; - - .svg { - margin: 0; - } - - &.active { - background-color: #121212; - } - } - - .antimodeMenu-button:hover { - background-color: rgba(0, 0, 0, 0.4); - } - .antimodeMenu-dragger { height: 100%; transition: width .2s; diff --git a/src/client/views/AntimodeMenu.tsx b/src/client/views/AntimodeMenu.tsx index de1207ce4..c41ea7053 100644 --- a/src/client/views/AntimodeMenu.tsx +++ b/src/client/views/AntimodeMenu.tsx @@ -1,6 +1,8 @@ import React = require('react'); import { observable, action, runInAction } from 'mobx'; import './AntimodeMenu.scss'; +import { StrCast } from '../../fields/Types'; +import { Doc } from '../../fields/Doc'; export interface AntimodeMenuProps {} /** @@ -148,6 +150,7 @@ export abstract class AntimodeMenu extends React.Co left: this._left, top: this._top, opacity: this._opacity, + background: StrCast(Doc.UserDoc().userBackgroundColor), transitionProperty: this._transitionProperty, transitionDuration: this._transitionDuration, transitionDelay: this._transitionDelay, @@ -173,6 +176,7 @@ export abstract class AntimodeMenu extends React.Co height: 'inherit', width: 200, opacity: this._opacity, + background: StrCast(Doc.UserDoc().userBackgroundColor), transitionProperty: this._transitionProperty, transitionDuration: this._transitionDuration, transitionDelay: this._transitionDelay, @@ -195,6 +199,7 @@ export abstract class AntimodeMenu extends React.Co left: this._left, top: this._top, opacity: this._opacity, + background: StrCast(Doc.UserDoc().userBackgroundColor), transitionProperty: this._transitionProperty, transitionDuration: this._transitionDuration, transitionDelay: this._transitionDelay, diff --git a/src/client/views/DashboardView.scss b/src/client/views/DashboardView.scss index b8a6f6c05..b95312ea0 100644 --- a/src/client/views/DashboardView.scss +++ b/src/client/views/DashboardView.scss @@ -14,6 +14,7 @@ flex-direction: column; width: 250px; min-width: 250px; + gap: 5px; } .all-dashboards { @@ -56,15 +57,26 @@ display: flex; justify-content: center; align-items: center; + position: relative; &:hover { color: $light-blue; border: solid 2px $light-blue; } + + .background { + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 0; + z-index: -1; + } } .dashboard-container { border-radius: 10px; + position: relative; cursor: pointer; width: 250px; height: 200px; @@ -99,10 +111,20 @@ .more { z-index: 100; } + + .background { + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 0; + z-index: -1; + } } .new-dashboard { color: $dark-gray; + padding: 10px; display: flex; width: 100%; height: 100%; diff --git a/src/client/views/DashboardView.tsx b/src/client/views/DashboardView.tsx index 3bd6ac61c..dd1079d88 100644 --- a/src/client/views/DashboardView.tsx +++ b/src/client/views/DashboardView.tsx @@ -1,5 +1,5 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { Button, ColorPicker, FontSize, IconButton, Size, Type } from 'browndash-components'; +import { Button, ColorPicker, EditableText, FontSize, IconButton, Size, Type } from 'browndash-components'; import { action, computed, observable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; @@ -24,7 +24,7 @@ import { ContextMenu } from './ContextMenu'; import './DashboardView.scss'; import { Colors } from './global/globalEnums'; import { MainViewModal } from './MainViewModal'; -import { ButtonType } from './nodes/button/FontIconBox'; +import { ButtonType } from './nodes/FontIconBox/FontIconBox'; import { FaPlus } from 'react-icons/fa'; enum DashboardGroup { @@ -43,13 +43,16 @@ export class DashboardView extends React.Component { @observable private selectedDashboardGroup = DashboardGroup.MyDashboards; @observable private newDashboardName: string | undefined = undefined; - @observable private newDashboardColor: string | undefined = undefined; + @observable private newDashboardColor: string | undefined = "#AFAFAF"; @action abortCreateNewDashboard = () => { this.newDashboardName = undefined; }; @action setNewDashboardName(name: string) { this.newDashboardName = name; } + @action setNewDashboardColor(color: string) { + this.newDashboardColor = color; + } @action selectDashboardGroup = (group: DashboardGroup) => { @@ -95,23 +98,33 @@ export class DashboardView extends React.Component { const dashboardCount = DocListCast(Doc.MyDashboards.data).length + 1; const placeholder = `Dashboard ${dashboardCount}`; return ( -
+
Create New Dashboard
-
- Title - this.setNewDashboardName((e.target as any).value)} /> -
-
- Background - { - this.newDashboardColor = color; - }} - /> -
+ this.setNewDashboardName(val as string)} + fillWidth + /> + { + this.setNewDashboardColor(color); + }} + />
-
); @@ -150,32 +163,49 @@ export class DashboardView extends React.Component { }; render() { + const color = StrCast(Doc.UserDoc().userColor) + const variant = StrCast(Doc.UserDoc().userVariantColor) return ( <>
-
-
-
this.selectDashboardGroup(DashboardGroup.MyDashboards)}> - My Dashboards -
-
this.selectDashboardGroup(DashboardGroup.SharedDashboards)}> - Shared Dashboards -
+
{this.getDashboards().map(dashboard => { const href = ImageCast(dashboard.thumb)?.url.href; return ( -
this.onContextMenu(dashboard, e)} onClick={e => this.clickDashboard(e, dashboard)}> +
this.onContextMenu(dashboard, e)} onClick={e => this.clickDashboard(e, dashboard)}>
- e.stopPropagation()} defaultValue={StrCast(dashboard.title)} onChange={e => (Doc.GetProto(dashboard).title = (e.target as any).value)} /> + (Doc.GetProto(dashboard).title = val)} + /> {this.selectedDashboardGroup === DashboardGroup.SharedDashboards && this.isUnviewedSharedDashboard(dashboard) ?
unviewed
:
}
-
+
); })} @@ -200,6 +234,10 @@ export class DashboardView extends React.Component { this.setNewDashboardName(''); }}> + +
diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx index 7043edcee..4deed5ed9 100644 --- a/src/client/views/EditableView.tsx +++ b/src/client/views/EditableView.tsx @@ -6,6 +6,7 @@ import { ObjectField } from '../../fields/ObjectField'; import './EditableView.scss'; import { DocumentIconContainer } from './nodes/DocumentIcon'; import { OverlayView } from './OverlayView'; +import { EditableText } from 'browndash-components'; export interface EditableProps { /** @@ -231,39 +232,49 @@ export class EditableView extends React.Component { onChange: this.props.autosuggestProps.onChange, }} /> - ) : this.props.oneLine !== false && this.props.GetValue()?.toString().indexOf('\n') === -1 ? ( - (this._inputref = r)} - style={{ display: this.props.display, overflow: 'auto', fontSize: this.props.fontSize, minWidth: 20, background: this.props.background }} - placeholder={this.props.placeholder} - onBlur={e => this.finalizeEdit(e.currentTarget.value, false, true, false)} - defaultValue={this.props.GetValue()} - autoFocus={true} - onChange={this.onChange} - onKeyDown={this.onKeyDown} - onKeyPress={this.stopPropagation} - onPointerDown={this.stopPropagation} - onClick={this.stopPropagation} - onPointerUp={this.stopPropagation} + ) : - ) : ( -