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 --- src/client/views/PropertiesView.tsx | 743 ++++++++++++++++++------------------ 1 file changed, 371 insertions(+), 372 deletions(-) (limited to 'src/client/views/PropertiesView.tsx') diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx index 09aac053a..e86506f92 100644 --- a/src/client/views/PropertiesView.tsx +++ b/src/client/views/PropertiesView.tsx @@ -35,6 +35,8 @@ import { PropertiesDocBacklinksSelector } from './PropertiesDocBacklinksSelector import { PropertiesDocContextSelector } from './PropertiesDocContextSelector'; import './PropertiesView.scss'; import { DefaultStyleProvider } from './StyleProvider'; +import { Button, EditableText, NumberDropdown, Size, Slider, Type } from 'browndash-components'; +import { PropertiesSection } from './PropertiesSection'; const higflyout = require('@hig/flyout'); export const { anchorPoints } = higflyout; export const Flyout = higflyout.default; @@ -332,7 +334,7 @@ export class PropertiesView extends React.Component { return ( Notify with message}>
- +
); @@ -435,29 +437,57 @@ export class PropertiesView extends React.Component { @action toggleCheckbox = () => (this.layoutFields = !this.layoutFields); + @computed get color() { + return StrCast(Doc.UserDoc().userColor); + } + + @computed get backgroundColor() { + return StrCast(Doc.UserDoc().userBackgroundColor); + } + + @computed get variantColor() { + return StrCast(Doc.UserDoc().userVariantColor); + } + @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); + SelectionManager.Views().forEach(dv => titles.add(StrCast(dv.rootDoc.title))); return ( -
- title} SetValue={this.setTitle} /> -
+ + ); + } + + @computed get type() { + const type = StrCast(this.selectedDoc?.type); + return ( + - */} + return +
+ {!Doc.noviceMode ? ( +
+ (this.layoutDocAcls = !this.layoutDocAcls))} checked={this.layoutDocAcls} /> +
Layout
- {this.sharingTable} -
- )} - - ); + ) : null} + {/*
{"Re-distribute sharing settings"}
}> + + */} + + {this.sharingTable} + } + isOpen={this.openSharing} + setIsOpen={(bool) => this.openSharing = bool} + /> } /** @@ -964,111 +1003,71 @@ export class PropertiesView extends React.Component { }; @computed get filtersSubMenu() { - return ( -
-
(this.openFilters = !this.openFilters))} style={{ backgroundColor: this.openFilters ? 'black' : '' }}> - Filters -
- -
-
- {!this.openFilters ? null : ( -
- -
- )} -
- ); + return + + } + isOpen={this.openFilters} + setIsOpen={(bool) => this.openFilters = bool} + /> } @computed get inkSubMenu() { return ( <> - {!this.isInk ? null : ( -
-
(this.openAppearance = !this.openAppearance))} style={{ backgroundColor: this.openAppearance ? 'black' : '' }}> - Appearance -
- -
-
- {!this.openAppearance ? null :
{this.appearanceEditor}
} -
- )} - -
-
(this.openTransform = !this.openTransform))} style={{ backgroundColor: this.openTransform ? 'black' : '' }}> - Transform -
- -
-
- {this.openTransform ?
{this.transformEditor}
: null} -
+ this.openAppearance = bool} + /> + this.openTransform = bool} + /> ); } @computed get fieldsSubMenu() { - return ( -
-
(this.openFields = !this.openFields))} style={{ backgroundColor: this.openFields ? 'black' : '' }}> - Fields {'&'} Tags -
- -
-
- {!Doc.noviceMode && this.openFields ? ( -
- {this.fieldsCheckbox} -
Layout
-
- ) : null} - {!this.openFields ? null :
{Doc.noviceMode ? this.noviceFields : this.expandedField}
} -
- ); + return { + Doc.noviceMode ? this.noviceFields : this.expandedField} + } + isOpen={this.openFields} + setIsOpen={(bool) => this.openFields = bool} + /> } @computed get contextsSubMenu() { - return ( -
-
(this.openContexts = !this.openContexts))} style={{ backgroundColor: this.openContexts ? 'black' : '' }}> - Other Contexts -
- -
-
- {this.openContexts ?
{this.contexts}
: null} -
- ); + return this.openContexts = bool} + /> } @computed get linksSubMenu() { - return ( -
-
(this.openLinks = !this.openLinks))} style={{ backgroundColor: this.openLinks ? 'black' : '' }}> - Linked To -
- -
-
- {this.openLinks ?
{this.links}
: null} -
- ); + return this.openLinks = bool} + /> } @computed get layoutSubMenu() { - return ( -
-
(this.openLayout = !this.openLayout))} style={{ backgroundColor: this.openLayout ? 'black' : '' }}> - Layout -
- -
-
- {this.openLayout ?
{this.layoutPreview}
: null} -
- ); + return this.openLayout = bool} + /> } @computed get description() { @@ -1269,6 +1268,226 @@ export class PropertiesView extends React.Component { if (scale > 1) scale = 1; this.sourceAnchor && (this.sourceAnchor.followLinkZoomScale = scale); }; + + @computed get linkProperties() { + const zoom = Number((NumCast(this.sourceAnchor?.followLinkZoomScale, 1) * 100).toPrecision(3)); + const targZoom = this.sourceAnchor?.followLinkZoom; + const indent = 30; + const hasSelectedAnchor = LinkManager.Links(this.sourceAnchor).includes(LinkManager.currentLink!); + + return <> +
+
+

Relationship

+ {this.editRelationship} +
+
+

Description

+ {this.editDescription} +
+
+

Show link

+ +
+
+

Auto-move anchors

+ +
+
+

Display arrow

+ +
+
+ {!hasSelectedAnchor ? null : ( +
+
+

Follow by

+ +
+
+

Animation

+ +
+ {this.animationDirection(PresEffectDirection.Left, 'angle-right', 1, 2, {})} + {this.animationDirection(PresEffectDirection.Right, 'angle-left', 3, 2, {})} + {this.animationDirection(PresEffectDirection.Top, 'angle-down', 2, 1, {})} + {this.animationDirection(PresEffectDirection.Bottom, 'angle-up', 2, 3, {})} + {this.animationDirection(PresEffectDirection.Center, '', 2, 2, { width: 10, height: 10, alignSelf: 'center' })} +
+
+ {PresBox.inputter( + '0.1', + '0.1', + '10', + NumCast(this.sourceAnchor?.followLinkTransitionTime) / 1000, + true, + (val: string) => PresBox.SetTransitionTime(val, (timeInMS: number) => this.sourceAnchor && (this.sourceAnchor.followLinkTransitionTime = timeInMS)), + indent + )}{' '} +
+
Fast
+
Slow
+
{' '} +
+

Play Target Audio

+ +
+
+

Zoom Text Selections

+ +
+
+

Toggle Follow to Outer Context

+ +
+
+

Toggle Target (Show/Hide)

+ +
+
+

Ease Transitions

+ +
+
+

Capture Offset to Target

+ +
+
+

Center Target (no zoom)

+ +
+
+

Zoom %

+
+ +
+
this.setZoom(String(zoom), 0.1))}> + +
+
this.setZoom(String(zoom), -0.1))}> + +
+
+
+ +
+ {!targZoom ? null : PresBox.inputter('0', '1', '100', zoom, true, this.setZoom, 30)} +
+
0%
+
100%
+
{' '} +
+ )} + + } /** * Handles adding and removing members from the sharing panel @@ -1283,9 +1502,6 @@ export class PropertiesView extends React.Component { render() { const isNovice = Doc.noviceMode; - const zoom = Number((NumCast(this.sourceAnchor?.followLinkZoomScale, 1) * 100).toPrecision(3)); - const targZoom = this.sourceAnchor?.followLinkZoom; - const indent = 30; const hasSelectedAnchor = LinkManager.Links(this.sourceAnchor).includes(LinkManager.currentLink!); if (!this.selectedDoc && !this.isPres) { return ( @@ -1301,243 +1517,26 @@ export class PropertiesView extends React.Component {
Properties
{this.editableTitle}
- +
{this.type}
{this.contextsSubMenu} - {this.linksSubMenu} {!this.selectedDoc || !LinkManager.currentLink || (!hasSelectedAnchor && this.selectedDoc !== LinkManager.currentLink) ? null : ( - <> -
-
-

Relationship

- {this.editRelationship} -
-
-

Description

- {this.editDescription} -
-
-

Show link

- -
-
-

Auto-move anchors

- -
-
-

Display arrow

- -
-
- {!hasSelectedAnchor ? null : ( -
-
-

Follow by

- -
-
-

Animation

- -
- {this.animationDirection(PresEffectDirection.Left, 'angle-right', 1, 2, {})} - {this.animationDirection(PresEffectDirection.Right, 'angle-left', 3, 2, {})} - {this.animationDirection(PresEffectDirection.Top, 'angle-down', 2, 1, {})} - {this.animationDirection(PresEffectDirection.Bottom, 'angle-up', 2, 3, {})} - {this.animationDirection(PresEffectDirection.Center, '', 2, 2, { width: 10, height: 10, alignSelf: 'center' })} -
-
- {PresBox.inputter( - '0.1', - '0.1', - '10', - NumCast(this.sourceAnchor?.followLinkTransitionTime) / 1000, - true, - (val: string) => PresBox.SetTransitionTime(val, (timeInMS: number) => this.sourceAnchor && (this.sourceAnchor.followLinkTransitionTime = timeInMS)), - indent - )}{' '} -
-
Fast
-
Slow
-
{' '} -
-

Play Target Audio

- -
-
-

Zoom Text Selections

- -
-
-

Toggle Follow to Outer Context

- -
-
-

Toggle Target (Show/Hide)

- -
-
-

Ease Transitions

- -
-
-

Capture Offset to Target

- -
-
-

Center Target (no zoom)

- -
-
-

Zoom %

-
- -
-
this.setZoom(String(zoom), 0.1))}> - -
-
this.setZoom(String(zoom), -0.1))}> - -
-
-
- -
- {!targZoom ? null : PresBox.inputter('0', '1', '100', zoom, true, this.setZoom, 30)} -
-
0%
-
100%
-
{' '} -
- )} - + this.linkProperties )} - {this.inkSubMenu} - {this.optionsSubMenu} - {this.fieldsSubMenu} - {isNovice ? null : this.sharingSubMenu} - {isNovice ? null : this.filtersSubMenu} - {isNovice ? null : this.layoutSubMenu}
); @@ -1549,7 +1548,7 @@ export class PropertiesView extends React.Component { : PresBox.targetRenderedDoc(PresBox.Instance.activeItem)?.type; return (
-
+
Presentation
@@ -1564,7 +1563,7 @@ export class PropertiesView extends React.Component {
(this.openPresTransitions = !this.openPresTransitions))} style={{ backgroundColor: this.openPresTransitions ? 'black' : '' }}>     Transitions
- +
{this.openPresTransitions ?
{PresBox.Instance.transitionDropdown}
: null} @@ -1578,7 +1577,7 @@ export class PropertiesView extends React.Component { style={{ backgroundColor: this.openPresTransitions ? 'black' : '' }}>     Visibilty
- +
{this.openPresVisibilityAndDuration ?
{PresBox.Instance.visibiltyDurationDropdown}
: null} @@ -1589,7 +1588,7 @@ export class PropertiesView extends React.Component {
(this.openPresProgressivize = !this.openPresProgressivize))} style={{ backgroundColor: this.openPresTransitions ? 'black' : '' }}>     Progressivize
- +
{this.openPresProgressivize ?
{PresBox.Instance.progressivizeDropdown}
: null} @@ -1600,7 +1599,7 @@ export class PropertiesView extends React.Component {
(this.openSlideOptions = !this.openSlideOptions))} style={{ backgroundColor: this.openSlideOptions ? 'black' : '' }}>     {type === DocumentType.AUDIO ? 'Audio Options' : 'Video Options'}
- +
{this.openSlideOptions ?
{PresBox.Instance.mediaOptionsDropdown}
: null} -- cgit v1.2.3-70-g09d2