From 8019926f41d0be85a21dfa9ad0d1a0d9e7160935 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Mon, 3 Aug 2020 18:10:55 -0500 Subject: menu buttons and other UI changes --- src/client/views/MainView.scss | 3 +- src/client/views/MainView.tsx | 4 +- src/client/views/PropertiesButtons.scss | 30 +- src/client/views/PropertiesButtons.tsx | 351 ++++++++++++--------- .../collectionFreeForm/PropertiesView.scss | 2 +- .../collectionFreeForm/PropertiesView.tsx | 176 ++++++----- 6 files changed, 320 insertions(+), 246 deletions(-) (limited to 'src') diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss index a57d22afd..e9e700ba8 100644 --- a/src/client/views/MainView.scss +++ b/src/client/views/MainView.scss @@ -155,7 +155,7 @@ .mainView-menuPanel { width: 60px; - background-color: black; + background-color: #121721; height: 100%; //overflow-y: scroll; //overflow-x: hidden; @@ -165,6 +165,7 @@ padding: 7px; padding-left: 7px; width: 100%; + background: black; .mainView-menuPanel-button-wrap { width: 45px; diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index ca5154ef7..93cc95ba4 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -415,10 +415,10 @@ export class MainView extends React.Component { if (!this.sidebarContent) return null; return
- {this.flyoutWidth > 0 ?
0 ?
-
: null} +
: null} */} { const targetDoc = this.selectedDoc; const published = targetDoc && Doc.GetProto(targetDoc)[GoogleRef] !== undefined; const animation = this.isAnimatingPulse ? "shadow-pulse 1s linear infinite" : "none"; - return !targetDoc ? (null) :
{`${published ? "Push" : "Publish"} to Google Docs`}
}> -
{ - await GoogleAuthenticationManager.Instance.fetchOrGenerateAccessToken(); - !published && runInAction(() => this.isAnimatingPulse = true); - PropertiesButtons.hasPushedHack = false; - targetDoc[Pushes] = NumCast(targetDoc[Pushes]) + 1; - }}> - -
; + return !targetDoc ? (null) :
{`${published ? "Push" : "Publish"} to Google Docs`}
} placement="top"> +
+
{ + await GoogleAuthenticationManager.Instance.fetchOrGenerateAccessToken(); + !published && runInAction(() => this.isAnimatingPulse = true); + PropertiesButtons.hasPushedHack = false; + targetDoc[Pushes] = NumCast(targetDoc[Pushes]) + 1; + }}> + +
+
Google
+
+ ; } @computed @@ -158,74 +162,88 @@ export class PropertiesButtons extends React.Component<{}, {}> { })(); return !targetDoc || !dataDoc || !dataDoc[GoogleRef] ? (null) :
{title}
}> -
{ - if (e.altKey) { - this.openHover = UtilityButtonState.OpenExternally; - } else if (e.shiftKey) { - this.openHover = UtilityButtonState.OpenRight; - } - })} - onPointerLeave={action(() => this.openHover = UtilityButtonState.Default)} - onClick={async e => { - const googleDocUrl = `https://docs.google.com/document/d/${dataDoc[GoogleRef]}/edit`; - if (e.shiftKey) { - e.preventDefault(); - let googleDoc = await Cast(dataDoc.googleDoc, Doc); - if (!googleDoc) { - const options = { _width: 600, _nativeWidth: 960, _nativeHeight: 800, isAnnotating: false, UseCors: false }; - googleDoc = Docs.Create.WebDocument(googleDocUrl, options); - dataDoc.googleDoc = googleDoc; + title={<>
{title}
} placement="top"> +
+
{ + if (e.altKey) { + this.openHover = UtilityButtonState.OpenExternally; + } else if (e.shiftKey) { + this.openHover = UtilityButtonState.OpenRight; } - CollectionDockingView.AddRightSplit(googleDoc); - } else if (e.altKey) { - e.preventDefault(); - window.open(googleDocUrl); - } else { - this.clearPullColor(); - PropertiesButtons.hasPulledHack = false; - targetDoc[Pulls] = NumCast(targetDoc[Pulls]) + 1; - dataDoc.unchanged && runInAction(() => this.isAnimatingFetch = true); - } - }}> - { - switch (this.openHover) { - default: - case UtilityButtonState.Default: return dataDoc.unchanged === false ? (this.pullIcon as any) : fetch; - case UtilityButtonState.OpenRight: return "arrow-alt-circle-right"; - case UtilityButtonState.OpenExternally: return "share"; + })} + onPointerLeave={action(() => this.openHover = UtilityButtonState.Default)} + onClick={async e => { + const googleDocUrl = `https://docs.google.com/document/d/${dataDoc[GoogleRef]}/edit`; + if (e.shiftKey) { + e.preventDefault(); + let googleDoc = await Cast(dataDoc.googleDoc, Doc); + if (!googleDoc) { + const options = { _width: 600, _nativeWidth: 960, _nativeHeight: 800, isAnnotating: false, UseCors: false }; + googleDoc = Docs.Create.WebDocument(googleDocUrl, options); + dataDoc.googleDoc = googleDoc; + } + CollectionDockingView.AddRightSplit(googleDoc); + } else if (e.altKey) { + e.preventDefault(); + window.open(googleDocUrl); + } else { + this.clearPullColor(); + PropertiesButtons.hasPulledHack = false; + targetDoc[Pulls] = NumCast(targetDoc[Pulls]) + 1; + dataDoc.unchanged && runInAction(() => this.isAnimatingFetch = true); } - })()} - /> -
; + }}> + { + switch (this.openHover) { + default: + case UtilityButtonState.Default: return dataDoc.unchanged === false ? (this.pullIcon as any) : fetch; + case UtilityButtonState.OpenRight: return "arrow-alt-circle-right"; + case UtilityButtonState.OpenExternally: return "share"; + } + })()} + /> +
+
Fetch
+
+ ; } @computed get pinButton() { const targetDoc = this.selectedDoc; const isPinned = targetDoc && Doc.isDocPinned(targetDoc); - return !targetDoc ? (null) :
{Doc.isDocPinned(targetDoc) ? "Unpin from presentation" : "Pin to presentation"}
}> -
DockedFrameRenderer.PinDoc(targetDoc, isPinned)}> - -
; + return !targetDoc ? (null) :
{Doc.isDocPinned(targetDoc) ? "Unpin from presentation" : + "Pin to presentation"}
} placement="top"> +
+
DockedFrameRenderer.PinDoc(targetDoc, isPinned)}> + +
+ +
{Doc.isDocPinned(targetDoc) ? "Unpin" : "Pin"}
+
+ ; } @computed get metadataButton() { //const view0 = this.view0; if (this.selectedDoc) { - return
Show metadata panel
}> + return
Show metadata panel
} placement="top">
/* tfs: @bcz This might need to be the data document? */}> -
e.stopPropagation()} > - {} +
+
e.stopPropagation()} > + {} +
+
Metadata
; @@ -264,12 +282,15 @@ export class PropertiesButtons extends React.Component<{}, {}> { Array.from(Object.values(Templates.TemplateList)).map(template => templates.set(template, views.reduce((checked, doc) => checked || doc?.props.Document["_show" + template.Name] ? true : false, false as boolean))); return !docView ? (null) : -
Customize layout
}> +
Customize layout
} placement="top">
this._aliasDown = true)} onClose={action(() => this._aliasDown = false)} content={ v).map(v => v as DocumentView)} templates={templates} />}> -
- {} +
+
+ {} +
+
Layout
; @@ -292,12 +313,15 @@ export class PropertiesButtons extends React.Component<{}, {}> { @computed get copyButton() { const targetDoc = this.selectedDoc; - return !targetDoc ? (null) :
{"Tap or Drag to create an alias"}
}> -
- {} + return !targetDoc ? (null) :
{"Tap or Drag to create an alias"}
} placement="top"> +
+
+ {} +
+
Alias
; } @@ -312,11 +336,14 @@ export class PropertiesButtons extends React.Component<{}, {}> { const targetDoc = this.selectedDoc; return !targetDoc ? (null) :
{this.selectedDoc?.lockedPosition ? - "Unlock Position" : "Lock Position"}
}> -
- {} + "Unlock Position" : "Lock Position"}
} placement="top"> +
+
+ {} +
+
Position
; } @@ -325,15 +352,18 @@ export class PropertiesButtons extends React.Component<{}, {}> { get downloadButton() { const targetDoc = this.selectedDoc; return !targetDoc ? (null) :
{"Download Document"}
}> -
{ - if (this.selectedDocumentView?.props.Document) { - Doc.Zip(this.selectedDocumentView?.props.Document); - } - }}> - {} + title={<>
{"Download Document"}
} placement="top"> +
+
{ + if (this.selectedDocumentView?.props.Document) { + Doc.Zip(this.selectedDocumentView?.props.Document); + } + }}> + {} +
+
downld
; } @@ -342,11 +372,14 @@ export class PropertiesButtons extends React.Component<{}, {}> { get deleteButton() { const targetDoc = this.selectedDoc; return !targetDoc ? (null) :
{"Delete Document"}
}> -
- {} + title={<>
{"Delete Document"}
} placement="top"> +
+
+ {} +
+
delete
; } @@ -361,15 +394,18 @@ export class PropertiesButtons extends React.Component<{}, {}> { get sharingButton() { const targetDoc = this.selectedDoc; return !targetDoc ? (null) :
{"Share Document"}
}> -
{ - if (this.selectedDocumentView) { - SharingManager.Instance.open(this.selectedDocumentView); - } - }}> - {} + title={<>
{"Share Document"}
} placement="top"> +
+
{ + if (this.selectedDocumentView) { + SharingManager.Instance.open(this.selectedDocumentView); + } + }}> + {} +
+
share
; } @@ -377,15 +413,19 @@ export class PropertiesButtons extends React.Component<{}, {}> { @computed get onClickButton() { if (this.selectedDoc) { - return
Choose onClick behavior
}> -
- -
e.stopPropagation()} > - {} -
- -
; + return
Choose onClick behavior
} placement="top"> +
+
+ +
e.stopPropagation()} > + {} +
+ +
+
onclick
+
+ ; } else { return null; } @@ -472,15 +512,18 @@ export class PropertiesButtons extends React.Component<{}, {}> { get googlePhotosButton() { const targetDoc = this.selectedDoc; return !targetDoc ? (null) :
{"Export to Google Photos"}
}> -
{ - if (this.selectedDocumentView) { - GooglePhotos.Export.CollectionToAlbum({ collection: this.selectedDocumentView.Document }).then(console.log); - } - }}> - {} + title={<>
{"Export to Google Photos"}
} placement="top"> +
+
{ + if (this.selectedDocumentView) { + GooglePhotos.Export.CollectionToAlbum({ collection: this.selectedDocumentView.Document }).then(console.log); + } + }}> + {} +
+
google
; } @@ -489,13 +532,16 @@ export class PropertiesButtons extends React.Component<{}, {}> { get clustersButton() { const targetDoc = this.selectedDoc; return !targetDoc ? (null) :
{this.selectedDoc?.useClusters ? "Stop Showing Clusters" : "Show Clusters"}
}> -
- {} + title={<>
{this.selectedDoc?.useClusters ? "Stop Showing Clusters" : "Show Clusters"}
} placement="top"> +
+
+ {} +
+
clusters
; } @@ -514,13 +560,16 @@ export class PropertiesButtons extends React.Component<{}, {}> { get fitContentButton() { const targetDoc = this.selectedDoc; return !targetDoc ? (null) :
{this.selectedDoc?._fitToBox ? "Stop Fitting Content" : "Fit Content"}
}> -
- {} + title={<>
{this.selectedDoc?._fitToBox ? "Stop Fitting Content" : "Fit Content"}
} placement="top"> +
+
+ {} +
+
{this.selectedDoc?._fitToBox ? "unfit" : "fit"}
; } @@ -541,11 +590,14 @@ export class PropertiesButtons extends React.Component<{}, {}> { get maskButton() { const targetDoc = this.selectedDoc; return !targetDoc ? (null) :
Make Mask
}> -
- {} + title={<>
Make Mask
} placement="top"> +
+
+ {} +
+
mask
; } @@ -553,13 +605,16 @@ export class PropertiesButtons extends React.Component<{}, {}> { @computed get contextButton() { if (this.selectedDoc) { - return
Show Context
}> -
- { - where === "onRight" ? CollectionDockingView.AddRightSplit(doc) : - this.selectedDocumentView?.props.addDocTab(doc, "onRight"); - return true; - }} /> + return
Show Context
} placement="top"> +
+
+ { + where === "onRight" ? CollectionDockingView.AddRightSplit(doc) : + this.selectedDocumentView?.props.addDocTab(doc, "onRight"); + return true; + }} /> +
+
context
; } else { @@ -622,9 +677,6 @@ export class PropertiesButtons extends React.Component<{}, {}> {
{this.onClickButton}
- {/*
- {this.contextButton} -
*/}
{this.sharingButton}
@@ -652,6 +704,9 @@ export class PropertiesButtons extends React.Component<{}, {}> {
{this.maskButton}
+
+ {this.contextButton} +
; } diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss index 7df56115f..aede3842e 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.scss +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss @@ -41,7 +41,7 @@ font-size: 12.5px; &:hover { - cursor: pointer; + cursor: text; } } diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx index f5e0cd077..9c5b8f81d 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx @@ -59,6 +59,8 @@ export class PropertiesView extends React.Component { @observable openAppearance: boolean = true; @observable openTransform: boolean = true; + @observable inActions: boolean = false; + @computed get isInk() { return this.selectedDoc?.type === DocumentType.INK; } @action @@ -736,115 +738,119 @@ export class PropertiesView extends React.Component { return
No Document Selected -
- -
-
+
; - } - const novice = Doc.UserDoc().noviceMode; + } else { + + const novice = Doc.UserDoc().noviceMode; - return
-
- Properties -
+ return
+
+ Properties + {/*
+
*/}
-
-
- {this.editableTitle} -
-
-
runInAction(() => { this.openActions = !this.openActions; })} - style={{ backgroundColor: this.openActions ? "black" : "" }}> - Actions +
+ {this.editableTitle} +
+
runInAction(() => { this.inActions = true; })} + onPointerLeave={() => runInAction(() => { this.inActions = false; })}> +
runInAction(() => { this.openActions = !this.openActions; })} + style={{ backgroundColor: this.openActions ? "black" : "" }}> + Actions
- + +
+ {!this.openActions ? (null) : +
+ +
}
- {!this.openActions ? (null) : -
- -
} -
-
-
runInAction(() => { this.openSharing = !this.openSharing; })} - style={{ backgroundColor: this.openSharing ? "black" : "" }}> - Sharing {"&"} Permissions +
+
runInAction(() => { this.openSharing = !this.openSharing; })} + style={{ backgroundColor: this.openSharing ? "black" : "" }}> + Sharing {"&"} Permissions
- + +
+ {!this.openSharing ? (null) : +
+ {this.sharingTable} +
}
- {!this.openSharing ? (null) : -
- {this.sharingTable} -
} -
- {!this.isInk ? (null) : -
-
runInAction(() => { this.openAppearance = !this.openAppearance; })} - style={{ backgroundColor: this.openAppearance ? "black" : "" }}> - Appearance + {!this.isInk ? (null) : +
+
runInAction(() => { this.openAppearance = !this.openAppearance; })} + style={{ backgroundColor: this.openAppearance ? "black" : "" }}> + Appearance
- + +
-
- {!this.openAppearance ? (null) : -
- {this.appearanceEditor} -
} -
} + {!this.openAppearance ? (null) : +
+ {this.appearanceEditor} +
} +
} - {this.isInk ?
-
runInAction(() => { this.openTransform = !this.openTransform; })} - style={{ backgroundColor: this.openTransform ? "black" : "" }}> - Transform + {this.isInk ?
+
runInAction(() => { this.openTransform = !this.openTransform; })} + style={{ backgroundColor: this.openTransform ? "black" : "" }}> + Transform
- + +
-
- {this.openTransform ?
- {this.transformEditor} + {this.openTransform ?
+ {this.transformEditor} +
: null}
: null} -
: null} - -
-
runInAction(() => { this.openFields = !this.openFields; })} - style={{ backgroundColor: this.openFields ? "black" : "" }}> -
- Fields {"&"} Tags + +
+
runInAction(() => { this.openFields = !this.openFields; })} + style={{ backgroundColor: this.openFields ? "black" : "" }}> +
+ Fields {"&"} Tags
- + +
+ {!novice && this.openFields ?
+ {this.fieldsCheckbox} +
Layout
+
: null} + {!this.openFields ? (null) : +
+ {novice ? this.noviceFields : this.expandedField} +
}
- {!novice && this.openFields ?
- {this.fieldsCheckbox} -
Layout
-
: null} - {!this.openFields ? (null) : -
- {novice ? this.noviceFields : this.expandedField} -
} -
-
-
runInAction(() => { this.openLayout = !this.openLayout; })} - style={{ backgroundColor: this.openLayout ? "black" : "" }}> - Layout +
+
runInAction(() => { this.openLayout = !this.openLayout; })} + style={{ backgroundColor: this.openLayout ? "black" : "" }}> + Layout
runInAction(() => { this.openLayout = !this.openLayout; })}> - + +
+ {this.openLayout ?
{this.layoutPreview}
: null}
- {this.openLayout ?
{this.layoutPreview}
: null} -
-
; +
; + + } } } \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 9248a73a6ae2adf9ddacb07396c4633178352267 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Mon, 3 Aug 2020 20:00:08 -0500 Subject: color consistencies and top menu fix for view types --- src/client/views/Main.scss | 6 +++--- src/client/views/PropertiesButtons.scss | 4 ++-- src/client/views/collections/CollectionMenu.tsx | 6 ++++-- src/client/views/collections/collectionFreeForm/PropertiesView.tsx | 2 +- src/client/views/nodes/DocumentView.tsx | 2 +- 5 files changed, 11 insertions(+), 9 deletions(-) (limited to 'src') diff --git a/src/client/views/Main.scss b/src/client/views/Main.scss index a2a9ceca5..97ed0a901 100644 --- a/src/client/views/Main.scss +++ b/src/client/views/Main.scss @@ -26,7 +26,7 @@ body { height: 100%; border-radius: inherit; position: inherit; - // background: inherit; + // background: inherit; } p { @@ -37,7 +37,7 @@ p { ::-webkit-scrollbar { -webkit-appearance: none; height: 8px; - width: 8px; + width: 8px; } ::-webkit-scrollbar-thumb { @@ -47,7 +47,7 @@ p { // button stuff button { - background: $dark-color; + background: black; outline: none; border: 0px; color: $light-color; diff --git a/src/client/views/PropertiesButtons.scss b/src/client/views/PropertiesButtons.scss index 5edaa2168..6199d34d0 100644 --- a/src/client/views/PropertiesButtons.scss +++ b/src/client/views/PropertiesButtons.scss @@ -77,8 +77,8 @@ $linkGap : 3px; color: white; font-size: 6px; width: 40px; - padding: 5px; - height: 16px; + padding: 3px; + height: 13px; border-radius: 7px; text-transform: uppercase; text-align: center; diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx index a7d2c07fa..20df22846 100644 --- a/src/client/views/collections/CollectionMenu.tsx +++ b/src/client/views/collections/CollectionMenu.tsx @@ -236,7 +236,7 @@ export class CollectionViewBaseChrome extends React.Component); case CollectionViewType.Stacking: return (); case CollectionViewType.Schema: return (); @@ -586,12 +586,14 @@ export class CollectionFreeFormViewChrome extends React.Component; } + @observable viewType = this.selectedDoc?._viewType; + render() { return !this.props.docView.layoutDoc ? (null) :
{this.props.docView.props.renderDepth !== 0 || this.isText ? (null) : Toggle Mini Map
} placement="bottom"> -
+
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx index 9c5b8f81d..f04c5159c 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx @@ -238,7 +238,7 @@ export class PropertiesView extends React.Component { rootSelected={returnFalse} treeViewDoc={undefined} backgroundColor={() => "lightgrey"} - fitToBox={false} + fitToBox={true} FreezeDimensions={true} NativeWidth={layoutDoc.type === StrCast(Doc.LayoutField(layoutDoc)).includes("FormattedTextBox") ? this.rtfWidth : returnZero} diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 81738f234..38670817b 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -749,7 +749,7 @@ export class DocumentView extends DocComponent(Docu moreItems.push({ description: "Download document", icon: "download", event: async () => Doc.Zip(this.props.Document) }); moreItems.push({ description: "Share", event: () => SharingManager.Instance.open(this), icon: "users" }); //moreItems.push({ description: this.Document.lockedPosition ? "Unlock Position" : "Lock Position", event: this.toggleLockPosition, icon: BoolCast(this.Document.lockedPosition) ? "unlock" : "lock" }); - moreItems.push({ description: "Create an Alias", event: () => this.onCopy(), icon: "copy" }); + //moreItems.push({ description: "Create an Alias", event: () => this.onCopy(), icon: "copy" }); if (!Doc.UserDoc().noviceMode) { moreItems.push({ description: "Make View of Metadata Field", event: () => Doc.MakeMetadataFieldTemplate(this.props.Document, this.props.DataDoc), icon: "concierge-bell" }); moreItems.push({ description: `${this.Document._chromeStatus !== "disabled" ? "Hide" : "Show"} Chrome`, event: () => this.Document._chromeStatus = (this.Document._chromeStatus !== "disabled" ? "disabled" : "enabled"), icon: "project-diagram" }); -- cgit v1.2.3-70-g09d2 From 8192e058495155a056b83b701c90ac56115dda32 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Mon, 3 Aug 2020 20:09:36 -0500 Subject: flyout undo fix --- src/client/views/MainView.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'src') diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index e7e5e837a..a544c52d2 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -485,7 +485,7 @@ export class MainView extends React.Component { } - @action @undoBatch + @action closeFlyout = () => { this._lastButton && (this._lastButton.color = "white"); this._lastButton && (this._lastButton._backgroundColor = ""); @@ -496,7 +496,7 @@ export class MainView extends React.Component { get groupManager() { return GroupManager.Instance; } _lastButton: Doc | undefined; - @action @undoBatch + @action selectMenu = (button: Doc, str: string) => { this._lastButton && (this._lastButton.color = "white"); this._lastButton && (this._lastButton._backgroundColor = ""); @@ -525,7 +525,7 @@ export class MainView extends React.Component { return true; } - @action @undoBatch + @action closeProperties = () => { CurrentUserUtils.propertiesWidth = 0; } -- cgit v1.2.3-70-g09d2 From 4051758f3cef5e353cb24c699f4594fa4be81758 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Tue, 4 Aug 2020 13:10:13 -0500 Subject: several UI changes and consistency updates around the system --- src/client/views/ContextMenu.scss | 5 ++++- src/client/views/DocumentButtonBar.scss | 8 ++++++-- src/client/views/DocumentButtonBar.tsx | 2 +- src/client/views/MainView.tsx | 4 ++-- src/client/views/PropertiesButtons.tsx | 2 +- src/client/views/collections/CollectionLinearView.scss | 2 +- src/client/views/collections/CollectionMenu.tsx | 2 +- src/client/views/collections/CollectionTreeView.scss | 15 +++++++++++---- .../collections/collectionFreeForm/PropertiesView.scss | 11 +++++++++++ .../collections/collectionFreeForm/PropertiesView.tsx | 4 ++-- src/client/views/linking/LinkEditor.scss | 3 ++- src/client/views/linking/LinkEditor.tsx | 6 +++--- src/client/views/nodes/DocumentLinksButton.scss | 8 +++++++- src/client/views/nodes/DocumentLinksButton.tsx | 8 ++++---- src/client/views/nodes/FontIconBox.scss | 5 +++++ src/client/views/nodes/FontIconBox.tsx | 18 ++++++++---------- 16 files changed, 69 insertions(+), 34 deletions(-) (limited to 'src') diff --git a/src/client/views/ContextMenu.scss b/src/client/views/ContextMenu.scss index 86e0a568a..7467bc043 100644 --- a/src/client/views/ContextMenu.scss +++ b/src/client/views/ContextMenu.scss @@ -7,7 +7,7 @@ box-shadow: $intermediate-color 0.2vw 0.2vw 0.4vw; flex-direction: column; background: whitesmoke; - padding-top: 10px; + padding-top: 10px; padding-bottom: 10px; border-radius: 15px; border: solid #BBBBBBBB 1px; @@ -72,6 +72,7 @@ margin-left: 5px; } } + .contextMenu-description { // width: 11vw; //10vw background: whitesmoke; @@ -100,6 +101,8 @@ border-color: $intermediate-color; // rgb(187, 186, 186); border-bottom-style: solid; border-top-style: solid; + + cursor: pointer; } .contextMenu-itemSelected { diff --git a/src/client/views/DocumentButtonBar.scss b/src/client/views/DocumentButtonBar.scss index c2ca93900..09ae14016 100644 --- a/src/client/views/DocumentButtonBar.scss +++ b/src/client/views/DocumentButtonBar.scss @@ -64,9 +64,13 @@ $linkGap : 3px; text-align: center; border-radius: 50%; pointer-events: auto; - color: $dark-color; - border: $dark-color 1px solid; + background-color: $dark-color; + border: none; transition: 0.2s ease all; + + &:hover { + background-color: $main-accent; + } } .documentButtonBar-linker:hover { diff --git a/src/client/views/DocumentButtonBar.tsx b/src/client/views/DocumentButtonBar.tsx index d45531b76..8748b1880 100644 --- a/src/client/views/DocumentButtonBar.tsx +++ b/src/client/views/DocumentButtonBar.tsx @@ -198,7 +198,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV const isPinned = targetDoc && Doc.isDocPinned(targetDoc); return !targetDoc ? (null) :
{Doc.isDocPinned(targetDoc) ? "Unpin from presentation" : "Pin to presentation"}
}>
DockedFrameRenderer.PinDoc(targetDoc, isPinned)}> diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index a544c52d2..e9b9be49d 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -553,7 +553,7 @@ export class MainView extends React.Component {
{this.flyoutWidth !== 0 ?
+ style={{ backgroundColor: '#8c8b8b' }}>
- +
: null}
{ title={<>
{this.selectedDoc?._fitToBox ? "Stop Fitting Content" : "Fit Content"}
} placement="top">
{ { button['target-docFilters'] = this.target._docFilters instanceof ObjectField ? ObjectField.MakeCopy(this.target._docFilters as any as ObjectField) : ""; }, }; - @computed get _freeform_commands() { return Doc.UserDoc().noviceMode ? [this._viewCommand, this._saveFilterCommand] : [this._viewCommand, this._saveFilterCommand, this._contentCommand, this._templateCommand, this._narrativeCommand]; } + @computed get _freeform_commands() { return Doc.UserDoc().noviceMode ? [this._viewCommand] : [this._viewCommand, this._saveFilterCommand, this._contentCommand, this._templateCommand, this._narrativeCommand]; } @computed get _stacking_commands() { return Doc.UserDoc().noviceMode ? undefined : [this._contentCommand, this._templateCommand]; } @computed get _masonry_commands() { return Doc.UserDoc().noviceMode ? undefined : [this._contentCommand, this._templateCommand]; } @computed get _schema_commands() { return Doc.UserDoc().noviceMode ? undefined : [this._templateCommand, this._narrativeCommand]; } diff --git a/src/client/views/collections/CollectionTreeView.scss b/src/client/views/collections/CollectionTreeView.scss index 50f0534bd..c9bf82406 100644 --- a/src/client/views/collections/CollectionTreeView.scss +++ b/src/client/views/collections/CollectionTreeView.scss @@ -22,7 +22,7 @@ ul { list-style: none; padding-left: 20px; - margin-bottom: 1px;// otherwise vertical scrollbars may pop up for no apparent reason.... + margin-bottom: 1px; // otherwise vertical scrollbars may pop up for no apparent reason.... } @@ -35,7 +35,7 @@ width: 15px; color: $intermediate-color; margin-top: 3px; - transform: scale(1.3, 1.3); + transform: scale(1.3, 1.3); border: #80808030 1px solid; border-radius: 4px; } @@ -67,8 +67,10 @@ margin-left: 3px; display: none; } + .collectionTreeView-keyHeader:hover { background: #797777; + cursor: pointer; } .collectionTreeView-subtitle { @@ -89,8 +91,10 @@ height: 17px; width: 15px; } + .treeViewItem-openRight:hover { background: #797777; + cursor: pointer; } .treeViewItem-border { @@ -106,10 +110,12 @@ .editableView-container-editing-oneLine { min-width: 15px; } + .documentView-node-topmost { width: unset; } - > svg { + + >svg { display: none; } @@ -119,7 +125,8 @@ .collectionTreeView-keyHeader { display: inherit; } - > svg { + + >svg { display: inherit; } diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss index aede3842e..9560de2f5 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.scss +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss @@ -641,4 +641,15 @@ margin-top: 2px; } } +} + +.editable-title { + border: none; + padding: 6px; + padding-bottom: 2px; + + + &:hover { + border: 0.75px solid rgb(122, 28, 28); + } } \ No newline at end of file diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx index f04c5159c..e2e026ca2 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx @@ -358,13 +358,13 @@ export class PropertiesView extends React.Component { } @computed get editableTitle() { - return StrCast(this.selectedDoc?.title)} - SetValue={this.setTitle} />; + SetValue={this.setTitle} />
; } @undoBatch diff --git a/src/client/views/linking/LinkEditor.scss b/src/client/views/linking/LinkEditor.scss index d26b7920a..7e6999cdc 100644 --- a/src/client/views/linking/LinkEditor.scss +++ b/src/client/views/linking/LinkEditor.scss @@ -89,7 +89,7 @@ /* float: right; */ border-radius: 7px; font-size: 9px; - background-color: black; + background: black; /* padding: 3px; */ padding-top: 4px; padding-left: 7px; @@ -100,6 +100,7 @@ &:hover { cursor: pointer; + background: grey; } } } diff --git a/src/client/views/linking/LinkEditor.tsx b/src/client/views/linking/LinkEditor.tsx index 660afd4b9..75fc8bf85 100644 --- a/src/client/views/linking/LinkEditor.tsx +++ b/src/client/views/linking/LinkEditor.tsx @@ -287,7 +287,7 @@ export class LinkEditor extends React.Component { @observable openDropdown: boolean = false; @observable showInfo: boolean = false; @computed get infoIcon() { if (this.showInfo) { return "chevron-up"; } return "chevron-down"; } - @observable private buttonColor: string = "black"; + @observable private buttonColor: string = ""; //@observable description = this.props.linkDoc.description ? StrCast(this.props.linkDoc.description) : "DESCRIPTION"; @@ -303,7 +303,7 @@ export class LinkEditor extends React.Component { if (LinkManager.currentLink) { LinkManager.currentLink.description = value; this.buttonColor = "rgb(62, 133, 55)"; - setTimeout(action(() => this.buttonColor = "black"), 750); + setTimeout(action(() => this.buttonColor = ""), 750); return true; } } @@ -345,7 +345,7 @@ export class LinkEditor extends React.Component { >
Set
; } diff --git a/src/client/views/nodes/DocumentLinksButton.scss b/src/client/views/nodes/DocumentLinksButton.scss index 97e714cd5..9328fb96b 100644 --- a/src/client/views/nodes/DocumentLinksButton.scss +++ b/src/client/views/nodes/DocumentLinksButton.scss @@ -28,7 +28,13 @@ } .documentLinksButton { - background-color: $link-color; + background-color: black; + + &:hover { + background: $main-accent; + transform: scale(1.05); + cursor: pointer; + } } .documentLinksButton-endLink { diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx index 4713ce447..7899ff0f0 100644 --- a/src/client/views/nodes/DocumentLinksButton.tsx +++ b/src/client/views/nodes/DocumentLinksButton.tsx @@ -181,7 +181,7 @@ export class DocumentLinksButton extends React.Component
- {DocumentLinksButton.StartLink && this.props.InMenu && !this.props.StartLink && - DocumentLinksButton.StartLink !== this.props.View ?
; return (!links.length) && !this.props.AlwaysOn ? (null) : - this.props.InMenu ? + this.props.InMenu && (DocumentLinksButton.StartLink || this.props.StartLink) ?
{title}
}> {linkButton} : !!!DocumentLinksButton.EditLink && !this.props.InMenu ? diff --git a/src/client/views/nodes/FontIconBox.scss b/src/client/views/nodes/FontIconBox.scss index 5bdafd857..9709e1dbd 100644 --- a/src/client/views/nodes/FontIconBox.scss +++ b/src/client/views/nodes/FontIconBox.scss @@ -15,12 +15,17 @@ .menuButton-round { border-radius: 100%; + background-color: black; .fontIconBox-label { margin-left: -10px; // button padding is 10px; bottom: 0; position: absolute; } + + &:hover { + background-color: #aaaaa3; + } } .menuButton-square { diff --git a/src/client/views/nodes/FontIconBox.tsx b/src/client/views/nodes/FontIconBox.tsx index eff5a4160..c0eb78d98 100644 --- a/src/client/views/nodes/FontIconBox.tsx +++ b/src/client/views/nodes/FontIconBox.tsx @@ -63,16 +63,14 @@ export class FontIconBox extends DocComponent( const color = StrCast(this.layoutDoc.color, this._foregroundColor); const backgroundColor = StrCast(this.layoutDoc._backgroundColor, StrCast(this.rootDoc.backgroundColor, this.props.backgroundColor?.(this.rootDoc))); const shape = StrCast(this.layoutDoc.iconShape, "round"); - const button = <> - - ; + const button = ; return !this.layoutDoc.toolTip ? button : {StrCast(this.layoutDoc.toolTip)}
}> {button} -- cgit v1.2.3-70-g09d2 From a9bfba81c25df304d00111c0cd8dccf7571a8418 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Tue, 4 Aug 2020 15:00:45 -0500 Subject: adding inking commands for images, pdf, etc in top menu on select --- src/client/views/collections/CollectionMenu.tsx | 29 +++++++++++++++++++------ 1 file changed, 22 insertions(+), 7 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx index 53c2495d0..ce5283928 100644 --- a/src/client/views/collections/CollectionMenu.tsx +++ b/src/client/views/collections/CollectionMenu.tsx @@ -236,7 +236,7 @@ export class CollectionViewBaseChrome extends React.Component); case CollectionViewType.Stacking: return (); case CollectionViewType.Schema: return (); @@ -247,6 +247,21 @@ export class CollectionViewBaseChrome extends React.Component); } } + + @computed get otherSubChrome() { + const docType = this.props.docView.Document.type; + switch (docType) { + default: return (null); + case DocumentType.IMG: return (); + case DocumentType.PDF: return (); + case DocumentType.INK: return (); + case DocumentType.WEB: return (); + case DocumentType.VID: return (); + case DocumentType.RTF: return (); + } + } + + private dropDisposer?: DragManager.DragDropDisposer; protected createDropTarget = (ele: HTMLDivElement) => { this.dropDisposer?.(); @@ -392,7 +407,7 @@ export class CollectionDockingChrome extends React.Component { +export class CollectionFreeFormViewChrome extends React.Component { public static Instance: CollectionFreeFormViewChrome; constructor(props: any) { super(props); @@ -591,31 +606,31 @@ export class CollectionFreeFormViewChrome extends React.Component - {this.props.docView.props.renderDepth !== 0 || this.isText ? (null) : + {this.props.docView.props.renderDepth !== 0 || this.isText || this.props.isDoc ? (null) : Toggle Mini Map
} placement="bottom">
} - {!this.isText ? Back Frame
} placement="bottom"> + {!this.isText && !this.props.isDoc ? Back Frame
} placement="bottom">
: null} - {!this.isText ? Toggle View All
} placement="bottom"> + {!this.isText && !this.props.isDoc ? Toggle View All
} placement="bottom">
this.document.editing = !this.document.editing)} > {NumCast(this.document.currentFrame)}
: null} - {!this.isText ? Forward Frame
} placement="bottom"> + {!this.isText && !this.props.isDoc ? Forward Frame
} placement="bottom">
: null} - {!this.props.isOverlay || this.document.type !== DocumentType.WEB || this.isText ? (null) : + {!this.props.isOverlay || this.document.type !== DocumentType.WEB || this.isText || this.props.isDoc ? (null) : Use Hypothesis
} placement="bottom"> + + + + + +
-
-
- - - - - - - + {this.settingsContent === "password" ? +
+ + + + {this.errorText ?
{this.errorText}
: undefined} + {this.successText ?
{this.successText}
: undefined} + + forgot password? + +
+ : undefined} + {this.settingsContent === "data" ? +
+

WARNING:
+ THIS WILL ERASE ALL YOUR CURRENT DOCUMENTS STORED ON DASH. IF YOU WISH TO PROCEED, CLICK THE BUTTON BELOW.

+ +
+ : undefined} +
+ +
; + + + const passwordContent =
+
+ + + +
+
+ {this.errorText ?
{this.errorText}
: undefined} + {this.successText ?
{this.successText}
: undefined} + + forgot password? +
+
; + + const modesContent =
+ +
+ this.togglePlaygroundMode()))} + />
Playground Mode
+
+
; + + const accountsContent =
+ + + +
; + + const colorBox = ; + + const colorFlyout =
+ +
+
e.stopPropagation()} > +
- {this.settingsContent === "password" ? -
- - - - {this.errorText ?
{this.errorText}
: undefined} - {this.successText ?
{this.successText}
: undefined} - - forgot password? - -
- : undefined} - {this.settingsContent === "data" ? -
-

WARNING:
- THIS WILL ERASE ALL YOUR CURRENT DOCUMENTS STORED ON DASH. IF YOU WISH TO PROCEED, CLICK THE BUTTON BELOW.

- -
- : undefined}
+ +
; + const preferencesContent =
+
+
Background Color
{colorFlyout}
- ); +
+
Default Font
+ + +
+
; + + return (
+
+
Settings
+ +
+ +
+
+
+
+
Password
+
{passwordContent}
+
+
+
Modes
+
{modesContent}
+
+
+
Accounts
+
{accountsContent}
+
+
+
Preferences
+
{preferencesContent}
+
+
+
); } render() { @@ -160,6 +302,8 @@ export default class SettingsManager extends React.Component<{}> { isDisplayed={this.isOpen} interactive={true} closeOnExternalClick={this.close} + width={600} + height={340} /> ); } diff --git a/src/client/views/MainViewModal.tsx b/src/client/views/MainViewModal.tsx index 66ea2dbf8..c7b752b60 100644 --- a/src/client/views/MainViewModal.tsx +++ b/src/client/views/MainViewModal.tsx @@ -10,6 +10,8 @@ export interface MainViewOverlayProps { overlayStyle?: React.CSSProperties; dialogueBoxDisplayedOpacity?: number; overlayDisplayedOpacity?: number; + width?: number; + height?: number; closeOnExternalClick?: () => void; // the close method of a MainViewModal, triggered if there is a click on the overlay (closing the modal) } @@ -21,13 +23,17 @@ export default class MainViewModal extends React.Component const dialogueOpacity = p.dialogueBoxDisplayedOpacity || 1; const overlayOpacity = p.overlayDisplayedOpacity || 0.4; return !p.isDisplayed ? (null) : ( -
+
{p.contents}
Date: Tue, 4 Aug 2020 22:53:44 -0500 Subject: finishing touches on settings --- src/client/util/CurrentUserUtils.ts | 1 + src/client/util/SettingsManager.scss | 71 +++++++------------------- src/client/util/SettingsManager.tsx | 98 ++++++++++++------------------------ src/client/views/MainView.tsx | 4 ++ 4 files changed, 54 insertions(+), 120 deletions(-) (limited to 'src') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 8023df8b4..95e02b5fd 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -890,6 +890,7 @@ export class CurrentUserUtils { doc.fontFamily = StrCast(doc.fontFamily, "Arial"); doc.fontColor = StrCast(doc.fontColor, "black"); doc.fontHighlight = StrCast(doc.fontHighlight, ""); + doc.defaultColor = StrCast(doc.defaultColor, "white"); doc["constants-snapThreshold"] = NumCast(doc["constants-snapThreshold"], 10); // doc["constants-dragThreshold"] = NumCast(doc["constants-dragThreshold"], 4); // Utils.DRAG_THRESHOLD = NumCast(doc["constants-dragThreshold"]); diff --git a/src/client/util/SettingsManager.scss b/src/client/util/SettingsManager.scss index 075879198..2a4a4241c 100644 --- a/src/client/util/SettingsManager.scss +++ b/src/client/util/SettingsManager.scss @@ -93,6 +93,10 @@ margin-right: 65px; color: black; border-radius: 5px; + + &:hover{ + cursor: pointer; + } } .modes-playground { @@ -100,6 +104,9 @@ .playground-check { margin-right: 5px; + &:hover{ + cursor: pointer; + } } .playground-text { @@ -112,6 +119,10 @@ margin-top: 2px; margin-right: 25px; + &:hover{ + cursor: pointer; + } + .colorFlyout-button { width: 20px; height: 20px; @@ -151,6 +162,9 @@ font-size: 9; margin-right: 6; border-radius: 5px; + &:hover{ + cursor: pointer; + } } .size-select { @@ -158,6 +172,9 @@ color: black; font-size: 9; border-radius: 5px; + &:hover{ + cursor: pointer; + } } } } @@ -190,10 +207,6 @@ cursor: pointer; } - // .settings-heading { - // letter-spacing: .5em; - // } - .settings-content { background: #e4e4e4; border-radius: 6px; @@ -206,56 +219,6 @@ margin-bottom: 10px; } - // .settings-body { - // display: flex; - // justify-content: space-between; - // margin-top: -10; - - // .settings-type { - // display: flex; - // flex-direction: column; - // flex-basis: 45%; - - // } - - // .settings-content { - // background: whitesmoke; - // border-radius: 6px; - - // // padding-left: 1em; - // // padding-right: 1em; - // // display: flex; - // // flex-direction: column; - // // flex-basis: 70%; - // // justify-content: space-around; - // // text-align: left; - - // ::placeholder { - // color: $intermediate-color; - // } - - // input { - // border-radius: 5px; - // border: none; - // padding: 4px; - // min-width: 100%; - // margin: 2px 0; - // } - - // .error-text { - // color: #C40233; - // } - - // .success-text { - // color: #009F6B; - // } - - // p { - // padding: 0 0 .1em .2em; - // } - - // } - // } .error-text { color: #C40233; diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx index 9282559e2..a12cc2cb6 100644 --- a/src/client/util/SettingsManager.tsx +++ b/src/client/util/SettingsManager.tsx @@ -1,4 +1,4 @@ -import { observable, runInAction, action } from "mobx"; +import { observable, runInAction, action, computed } from "mobx"; import * as React from "react"; import MainViewModal from "../views/MainViewModal"; import { observer } from "mobx-react"; @@ -15,7 +15,7 @@ import GroupManager from "./GroupManager"; import HypothesisAuthenticationManager from "../apis/HypothesisAuthenticationManager"; import GoogleAuthenticationManager from "../apis/GoogleAuthenticationManager"; import { DocServer } from "../DocServer"; -import { BoolCast } from "../../fields/Types"; +import { BoolCast, StrCast, NumCast } from "../../fields/Types"; import { undoBatch } from "./UndoManager"; import { ColorState, SketchPicker } from "react-color"; const higflyout = require("@hig/flyout"); @@ -40,7 +40,7 @@ export default class SettingsManager extends React.Component<{}> { private new_confirm_ref = React.createRef(); - @observable private backgroundColor = "white"; + @computed get backgroundColor() { return Doc.UserDoc().defaultColor; } public open = action(() => { SelectionManager.DeselectAll(); @@ -125,57 +125,25 @@ export default class SettingsManager extends React.Component<{}> { } } + @action + changeFontFamily = (e: any) => { + Doc.UserDoc().fontFamily = e.currentTarget.value; + } + + @action + changeFontSize = (e: any) => { + Doc.UserDoc().fontSize = e.currentTarget.value; + } + @action @undoBatch switchColor = (color: ColorState) => { const val = String(color.hex); - this.backgroundColor = val; + Doc.UserDoc().defaultColor = val; return true; } private get settingsInterface() { - const oldSettings =
-
-

Settings

-
- -
-
-
-
- - - - - - - -
- {this.settingsContent === "password" ? -
- - - - {this.errorText ?
{this.errorText}
: undefined} - {this.successText ?
{this.successText}
: undefined} - - forgot password? - -
- : undefined} - {this.settingsContent === "data" ? -
-

WARNING:
- THIS WILL ERASE ALL YOUR CURRENT DOCUMENTS STORED ON DASH. IF YOU WISH TO PROCEED, CLICK THE BUTTON BELOW.

- -
- : undefined} -
- -
; - const passwordContent =
@@ -220,20 +188,23 @@ export default class SettingsManager extends React.Component<{}> { presetColors={['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505', '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF', '#f1efeb', 'transparent']} - color={this.backgroundColor} />; + color={StrCast(this.backgroundColor)} />; const colorFlyout =
-
e.stopPropagation()} > - +
; + const fontFamilies: string[] = ["Times New Roman", "Arial", "Georgia", "Comic Sans MS", "Tahoma", "Impact", "Crimson Text"]; + const fontSizes: number[] = [7, 8, 9, 10, 12, 14, 16, 18, 20, 24, 32, 48, 72]; + const preferencesContent =
Background Color
{colorFlyout} @@ -241,25 +212,20 @@ export default class SettingsManager extends React.Component<{}> {
Default Font
; diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index e9b9be49d..bbf36a04f 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -313,6 +313,10 @@ export class MainView extends React.Component { defaultBackgroundColors = (doc: Opt) => { if (this.panelContent === doc?.title) return "lightgrey"; + + if (doc?.type === DocumentType.COL) { + return StrCast(Doc.UserDoc().defaultColor); + } if (this.darkScheme) { switch (doc?.type) { case DocumentType.FONTICON: return "white"; -- cgit v1.2.3-70-g09d2 From c78fdc76a7aec8ed37e8a97c9ddafbf88d5a0392 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Tue, 4 Aug 2020 23:12:04 -0500 Subject: ink flyouts for colors --- .../collectionFreeForm/PropertiesView.tsx | 31 +++++++++++++--------- 1 file changed, 19 insertions(+), 12 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx index e2e026ca2..a6b1849b1 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx @@ -27,6 +27,9 @@ import { ColorState, SketchPicker } from "react-color"; import AntimodeMenu from "../../AntimodeMenu"; import "./FormatShapePane.scss"; import { discovery_v1 } from "googleapis"; +const higflyout = require("@hig/flyout"); +export const { anchorPoints } = higflyout; +export const Flyout = higflyout.default; interface PropertiesViewProps { @@ -582,14 +585,18 @@ export class PropertiesView extends React.Component { set colorFil(value) { value && (this._lastFill = value); this.selectedDoc && (this.selectedDoc.fillColor = value ? value : undefined); } set colorStk(value) { value && (this._lastLine = value); this.selectedDoc && (this.selectedDoc.color = value ? value : undefined); } - colorButton(value: string, setter: () => {}) { - return
setter()))}> -
- {value === "" || value === "transparent" ?

☒

: ""} -
; + colorButton(value: string, type: string, setter: () => {}) { + return +
setter()))}> +
+ {value === "" || value === "transparent" ?

☒

: ""} +
+ ; + } @undoBatch @@ -615,8 +622,8 @@ export class PropertiesView extends React.Component { color={type === "stk" ? this.colorStk : this.colorFil} />; } - @computed get fillButton() { return this.colorButton(this.colorFil, () => { this._fillBtn = !this._fillBtn; this._lineBtn = false; return true; }); } - @computed get lineButton() { return this.colorButton(this.colorStk, () => { this._lineBtn = !this._lineBtn; this._fillBtn = false; return true; }); } + @computed get fillButton() { return this.colorButton(this.colorFil, "fill", () => { this._fillBtn = !this._fillBtn; this._lineBtn = false; return true; }); } + @computed get lineButton() { return this.colorButton(this.colorStk, "line", () => { this._lineBtn = !this._lineBtn; this._fillBtn = false; return true; }); } @computed get fillPicker() { return this.colorPicker((color: string) => this.colorFil = color, "fil"); } @computed get linePicker() { return this.colorPicker((color: string) => this.colorStk = color, "stk"); } @@ -633,8 +640,8 @@ export class PropertiesView extends React.Component {
{this.lineButton}
- {this._fillBtn ? this.fillPicker : ""} - {this._lineBtn ? this.linePicker : ""} + {/* {this._fillBtn ? this.fillPicker : ""} + {this._lineBtn ? this.linePicker : ""} */}
; } -- cgit v1.2.3-70-g09d2 From 6028a6f6c87b793d0ea87f9e05a07fa094a4745b Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Wed, 5 Aug 2020 01:10:31 -0500 Subject: fixes for stacking view --- src/client/views/collections/CollectionMenu.tsx | 17 +++++++++++++++++ .../collections/CollectionStackingViewFieldColumn.tsx | 2 +- 2 files changed, 18 insertions(+), 1 deletion(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx index ce5283928..511735f2d 100644 --- a/src/client/views/collections/CollectionMenu.tsx +++ b/src/client/views/collections/CollectionMenu.tsx @@ -668,6 +668,23 @@ export class CollectionStackingViewChrome extends React.Component => { value = value.toLowerCase(); const docs = DocListCast(this.document[this.props.fieldKey]); + + if (Doc.UserDoc().noviceMode) { + if (docs instanceof Doc) { + const keys = Object.keys(docs).filter(key => key.indexOf("title") >= 0 || key.indexOf("author") >= 0 || + key.indexOf("creationDate") >= 0 || key.indexOf("lastModified") >= 0 || + (key[0].toUpperCase() === key[0] && key.substring(0, 3) !== "ACL")); + return keys.filter(key => key.toLowerCase().startsWith(value)); + } else { + const keys = new Set(); + docs.forEach(doc => Doc.allKeys(doc).forEach(key => keys.add(key))); + const noviceKeys = Array.from(keys).filter(key => key.indexOf("title") >= 0 || + key.indexOf("author") >= 0 || key.indexOf("creationDate") >= 0 || + key.indexOf("lastModified") >= 0 || (key[0].toUpperCase() === key[0] && key.substring(0, 3) !== "ACL")); + return noviceKeys.filter(key => key.toLowerCase().startsWith(value)); + } + } + if (docs instanceof Doc) { return Object.keys(docs).filter(key => key.toLowerCase().startsWith(value)); } else { diff --git a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx index 4042a070d..fb75b8b61 100644 --- a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx +++ b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx @@ -368,7 +368,7 @@ export class CollectionStackingViewFieldColumn extends React.Component {(chromeStatus !== 'view-mode' && chromeStatus !== 'disabled') ?
+ style={{ width: style.columnWidth / style.numGroupColumns, marginBottom: 70 }}>
: null}
-- cgit v1.2.3-70-g09d2 From 0d6a6991ae39406f80530bcaaa6e5b328bd64b67 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Wed, 5 Aug 2020 12:59:07 -0500 Subject: UI changes and bug fixes found with UV --- src/client/util/CurrentUserUtils.ts | 3 ++- src/client/util/SettingsManager.scss | 20 ++++++++++++---- src/client/util/SettingsManager.tsx | 13 +++++----- src/client/views/MainView.tsx | 7 ++++++ src/client/views/MainViewModal.tsx | 6 +---- src/client/views/PropertiesButtons.tsx | 28 +++++++++++++++++----- src/client/views/collections/CollectionMenu.tsx | 9 +++---- .../collectionFreeForm/PropertiesView.tsx | 3 +-- 8 files changed, 60 insertions(+), 29 deletions(-) (limited to 'src') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 95e02b5fd..630952ccf 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -8,7 +8,7 @@ import { Doc, DocListCast, DocListCastAsync, DataSym } from "../../fields/Doc"; import { List } from "../../fields/List"; import { listSpec } from "../../fields/Schema"; import { ScriptField, ComputedField } from "../../fields/ScriptField"; -import { Cast, PromiseValue, StrCast, NumCast } from "../../fields/Types"; +import { Cast, PromiseValue, StrCast, NumCast, BoolCast } from "../../fields/Types"; import { nullAudio } from "../../fields/URLField"; import { DragManager } from "./DragManager"; import { Scripting } from "./Scripting"; @@ -891,6 +891,7 @@ export class CurrentUserUtils { doc.fontColor = StrCast(doc.fontColor, "black"); doc.fontHighlight = StrCast(doc.fontHighlight, ""); doc.defaultColor = StrCast(doc.defaultColor, "white"); + doc.noviceMode = BoolCast(doc.noviceMode, true); doc["constants-snapThreshold"] = NumCast(doc["constants-snapThreshold"], 10); // doc["constants-dragThreshold"] = NumCast(doc["constants-dragThreshold"], 4); // Utils.DRAG_THRESHOLD = NumCast(doc["constants-dragThreshold"]); diff --git a/src/client/util/SettingsManager.scss b/src/client/util/SettingsManager.scss index 2a4a4241c..41bce8a1b 100644 --- a/src/client/util/SettingsManager.scss +++ b/src/client/util/SettingsManager.scss @@ -25,8 +25,15 @@ .settings-title { font-size: 25px; font-weight: bold; + padding-right: 10px; + color: black; +} + +.settings-username { + font-size: 14px; padding-right: 15px; color: black; + margin-top: 10px; } .settings-section { @@ -94,7 +101,7 @@ color: black; border-radius: 5px; - &:hover{ + &:hover { cursor: pointer; } } @@ -104,7 +111,8 @@ .playground-check { margin-right: 5px; - &:hover{ + + &:hover { cursor: pointer; } } @@ -119,7 +127,7 @@ margin-top: 2px; margin-right: 25px; - &:hover{ + &:hover { cursor: pointer; } @@ -162,7 +170,8 @@ font-size: 9; margin-right: 6; border-radius: 5px; - &:hover{ + + &:hover { cursor: pointer; } } @@ -172,7 +181,8 @@ color: black; font-size: 9; border-radius: 5px; - &:hover{ + + &:hover { cursor: pointer; } } diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx index a12cc2cb6..fce28a466 100644 --- a/src/client/util/SettingsManager.tsx +++ b/src/client/util/SettingsManager.tsx @@ -147,9 +147,9 @@ export default class SettingsManager extends React.Component<{}> { const passwordContent =
- - - + + +
{this.errorText ?
{this.errorText}
: undefined} @@ -233,7 +233,9 @@ export default class SettingsManager extends React.Component<{}> { return (
Settings
-
@@ -268,8 +270,7 @@ export default class SettingsManager extends React.Component<{}> { isDisplayed={this.isOpen} interactive={true} closeOnExternalClick={this.close} - width={600} - height={340} + dialogueBoxStyle={{ width: "600px", height: "340px" }} /> ); } diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index bbf36a04f..4bbcddd79 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -315,6 +315,12 @@ export class MainView extends React.Component { if (this.panelContent === doc?.title) return "lightgrey"; if (doc?.type === DocumentType.COL) { + if (doc.title === "Basic Item Creators" || doc.title === "sidebar-tools" + || doc.title === "sidebar-recentlyClosed" || doc.title === "sidebar-catalog" + || doc.title === "Mobile Uploads" || doc.title === "COLLECTION_PROTO" + || doc.title === "Advanced Item Prototypes" || doc.title === "all Creators") { + return "lightgrey"; + } return StrCast(Doc.UserDoc().defaultColor); } if (this.darkScheme) { @@ -450,6 +456,7 @@ export class MainView extends React.Component { ContainingCollectionView={undefined} ContainingCollectionDoc={undefined} relative={true} + forcedBackgroundColor={() => "lightgrey"} />
{this.docButtons}
; diff --git a/src/client/views/MainViewModal.tsx b/src/client/views/MainViewModal.tsx index c7b752b60..19387f619 100644 --- a/src/client/views/MainViewModal.tsx +++ b/src/client/views/MainViewModal.tsx @@ -10,8 +10,6 @@ export interface MainViewOverlayProps { overlayStyle?: React.CSSProperties; dialogueBoxDisplayedOpacity?: number; overlayDisplayedOpacity?: number; - width?: number; - height?: number; closeOnExternalClick?: () => void; // the close method of a MainViewModal, triggered if there is a click on the overlay (closing the modal) } @@ -31,9 +29,7 @@ export default class MainViewModal extends React.Component style={{ borderColor: "black", ...(p.dialogueBoxStyle || {}), - opacity: p.isDisplayed ? dialogueOpacity : 0, - width: this.props.width ? this.props.width : "auto", - height: this.props.height ? this.props.height : "auto" + opacity: p.isDisplayed ? dialogueOpacity : 0 }} >{p.contents}
{ } }}> { switch (this.openHover) { @@ -207,7 +208,7 @@ export class PropertiesButtons extends React.Component<{}, {}> { })()} />
-
Fetch
+
Fetch
; } @@ -226,7 +227,11 @@ export class PropertiesButtons extends React.Component<{}, {}> { />
-
{Doc.isDocPinned(targetDoc) ? "Unpin" : "Pin"}
+
{Doc.isDocPinned(targetDoc) ? "Unpin" : "Pin"}
; } @@ -339,11 +344,16 @@ export class PropertiesButtons extends React.Component<{}, {}> { "Unlock Position" : "Lock Position"}
} placement="top">
{}
-
Position
+
Position
; } @@ -535,13 +545,16 @@ export class PropertiesButtons extends React.Component<{}, {}> { title={<>
{this.selectedDoc?.useClusters ? "Stop Showing Clusters" : "Show Clusters"}
} placement="top">
{}
-
clusters
+
clusters
; } @@ -569,7 +582,10 @@ export class PropertiesButtons extends React.Component<{}, {}> { color={this.selectedDoc?._fitToBox ? "black" : "white"} icon="expand" size="lg" />}
-
{this.selectedDoc?._fitToBox ? "unfit" : "fit"}
+
{this.selectedDoc?._fitToBox ? "unfit" : "fit"}
; } diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx index 511735f2d..6eed4eba1 100644 --- a/src/client/views/collections/CollectionMenu.tsx +++ b/src/client/views/collections/CollectionMenu.tsx @@ -673,15 +673,16 @@ export class CollectionStackingViewChrome extends React.Component key.indexOf("title") >= 0 || key.indexOf("author") >= 0 || key.indexOf("creationDate") >= 0 || key.indexOf("lastModified") >= 0 || - (key[0].toUpperCase() === key[0] && key.substring(0, 3) !== "ACL")); - return keys.filter(key => key.toLowerCase().startsWith(value)); + (key[0].toUpperCase() === key[0] && key.substring(0, 3) !== "ACL" && key !== "UseCors" && key[0] !== "_")); + return keys.filter(key => key.toLowerCase().indexOf(value.toLowerCase()) > -1); } else { const keys = new Set(); docs.forEach(doc => Doc.allKeys(doc).forEach(key => keys.add(key))); const noviceKeys = Array.from(keys).filter(key => key.indexOf("title") >= 0 || key.indexOf("author") >= 0 || key.indexOf("creationDate") >= 0 || - key.indexOf("lastModified") >= 0 || (key[0].toUpperCase() === key[0] && key.substring(0, 3) !== "ACL")); - return noviceKeys.filter(key => key.toLowerCase().startsWith(value)); + key.indexOf("lastModified") >= 0 || (key[0].toUpperCase() === key[0] && + key.substring(0, 3) !== "ACL" && key !== "UseCors" && key[0] !== "_")); + return noviceKeys.filter(key => key.toLowerCase().indexOf(value.toLowerCase()) > -1); } } diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx index a6b1849b1..7f21c63da 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx @@ -161,7 +161,7 @@ export class PropertiesView extends React.Component { doc && Object.keys(doc).forEach(key => !(key in ids) && doc[key] !== ComputedField.undefined && (ids[key] = key)); const rows: JSX.Element[] = []; for (const key of Object.keys(ids).slice().sort()) { - if ((key[0] === key[0].toUpperCase() && key.substring(0, 3) !== "ACL") + if ((key[0] === key[0].toUpperCase() && key.substring(0, 3) !== "ACL" && key !== "UseCors") || key[0] === "#" || key === "author" || key === "creationDate" || key.indexOf("lastModified") !== -1) { @@ -354,7 +354,6 @@ export class PropertiesView extends React.Component { />; } - @undoBatch @action toggleCheckbox = () => { this.layoutFields = !this.layoutFields; -- cgit v1.2.3-70-g09d2 From 38b33d2891a5e07de450015bcf4d34ae334c292d Mon Sep 17 00:00:00 2001 From: bobzel Date: Wed, 5 Aug 2020 16:15:48 -0400 Subject: fixed display of fontsizes in richtexts dropdownmenu --- src/client/util/SettingsManager.tsx | 6 +++--- src/client/views/nodes/formattedText/RichTextMenu.tsx | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) (limited to 'src') diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx index fce28a466..68ed32c0f 100644 --- a/src/client/util/SettingsManager.tsx +++ b/src/client/util/SettingsManager.tsx @@ -203,7 +203,7 @@ export default class SettingsManager extends React.Component<{}> {
; const fontFamilies: string[] = ["Times New Roman", "Arial", "Georgia", "Comic Sans MS", "Tahoma", "Impact", "Crimson Text"]; - const fontSizes: number[] = [7, 8, 9, 10, 12, 14, 16, 18, 20, 24, 32, 48, 72]; + const fontSizes: string[] = ["7pt", "8pt", "9pt", "10pt", "12pt", "14pt", "16pt", "18pt", "20pt", "24pt", "32pt", "48pt", "72pt"]; const preferencesContent =
@@ -222,8 +222,8 @@ export default class SettingsManager extends React.Component<{}> { diff --git a/src/client/views/nodes/formattedText/RichTextMenu.tsx b/src/client/views/nodes/formattedText/RichTextMenu.tsx index 6e268be48..f040cd26d 100644 --- a/src/client/views/nodes/formattedText/RichTextMenu.tsx +++ b/src/client/views/nodes/formattedText/RichTextMenu.tsx @@ -274,7 +274,7 @@ export default class RichTextMenu extends AntimodeMenu { } !activeFamilies.length && (activeFamilies.push(StrCast(this.TextView.layoutDoc._fontFamily, StrCast(Doc.UserDoc().fontFamily)))); !activeSizes.length && (activeSizes.push(StrCast(this.TextView.layoutDoc._fontSize, StrCast(Doc.UserDoc().fontSize)))); - !activeColors.length && (activeSizes.push(StrCast(this.TextView.layoutDoc.color, StrCast(Doc.UserDoc().fontColor)))); + !activeColors.length && (activeColors.push(StrCast(this.TextView.layoutDoc.color, StrCast(Doc.UserDoc().fontColor)))); } !activeFamilies.length && (activeFamilies.push(StrCast(Doc.UserDoc().fontFamily))); !activeSizes.length && (activeSizes.push(StrCast(Doc.UserDoc().fontSize))); -- cgit v1.2.3-70-g09d2 From 61f7a79a23adcf258ea0cf4e18fce699b6976734 Mon Sep 17 00:00:00 2001 From: bobzel Date: Wed, 5 Aug 2020 16:29:26 -0400 Subject: from last --- .../views/collections/collectionFreeForm/CollectionFreeFormView.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src') diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index badbc48a1..ee6ca1a22 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -1257,7 +1257,7 @@ export class CollectionFreeFormView extends CollectionSubView Cast(Doc.UserDoc().emptyCollection, Doc, null)._backgroundColor = StrCast(this.layoutDoc._backgroundColor), icon: "palette" }); + optionItems.push({ description: "Use Background Color as Default", event: () => Cast(Doc.UserDoc().emptyCollection, Doc, null)._backgroundColor = StrCast(this.layoutDoc._backgroundColor), icon: "palette" }); if (!Doc.UserDoc().noviceMode) { optionItems.push({ description: (!this.layoutDoc._nativeWidth || !this.layoutDoc._nativeHeight ? "Freeze" : "Unfreeze") + " Aspect", event: this.toggleNativeDimensions, icon: "snowflake" }); optionItems.push({ description: `${this.Document._freeformLOD ? "Enable LOD" : "Disable LOD"}`, event: () => this.Document._freeformLOD = !this.Document._freeformLOD, icon: "table" }); -- cgit v1.2.3-70-g09d2 From 94a97864c657a546965df32fa30900600fa8084b Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Wed, 5 Aug 2020 15:42:51 -0500 Subject: UI consistencies --- src/client/views/MainView.scss | 4 +++- src/client/views/MainView.tsx | 7 ++++--- .../views/collections/collectionFreeForm/PropertiesView.scss | 3 ++- src/client/views/collections/collectionFreeForm/PropertiesView.tsx | 1 + 4 files changed, 10 insertions(+), 5 deletions(-) (limited to 'src') diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss index e9e700ba8..388d4b369 100644 --- a/src/client/views/MainView.scss +++ b/src/client/views/MainView.scss @@ -103,7 +103,8 @@ } .mainView-propertiesDragger { - background-color: rgb(140, 139, 139); + //background-color: rgb(140, 139, 139); + background-color: lightgrey; height: 55px; width: 17px; position: absolute; @@ -298,6 +299,7 @@ position: absolute; z-index: 2; touch-action: none; + background-color: lightgrey; cursor: grab; .mainView-libraryHandle-icon { diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 4bbcddd79..a6a33d9f7 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -564,7 +564,8 @@ export class MainView extends React.Component {
{this.flyoutWidth !== 0 ?
+ //style={{ backgroundColor: '#8c8b8b' }} + >
- +
: null}
-
+
} {this.propertiesWidth() < 10 ? (null) : diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss index 9560de2f5..71b6d3ce9 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.scss +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss @@ -596,6 +596,7 @@ display: flex; margin-bottom: 3px; + margin-left: 4px; .arrows-head { @@ -629,7 +630,7 @@ .dashed { display: flex; - margin-left: 74px; + margin-left: 64px; margin-bottom: 6px; .dashed-title { diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx index 8b78a05fe..a67f53cea 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx @@ -267,6 +267,7 @@ export class PropertiesView extends React.Component { bringToFront={returnFalse} ContentScaling={returnOne} dontRegisterView={true} + dropAction={undefined} />
; } else { -- cgit v1.2.3-70-g09d2