aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/views/MainView.scss3
-rw-r--r--src/client/views/MainView.tsx4
-rw-r--r--src/client/views/PropertiesButtons.scss30
-rw-r--r--src/client/views/PropertiesButtons.tsx351
-rw-r--r--src/client/views/collections/collectionFreeForm/PropertiesView.scss2
-rw-r--r--src/client/views/collections/collectionFreeForm/PropertiesView.tsx176
6 files changed, 320 insertions, 246 deletions
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 66545ea1f..e7e5e837a 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 <div className="mainView-libraryFlyout">
<div className="mainView-contentArea" style={{ position: "relative", height: `100%`, width: "100%", overflow: "visible" }}>
- {this.flyoutWidth > 0 ? <div className="mainView-libraryFlyout-close"
+ {/* {this.flyoutWidth > 0 ? <div className="mainView-libraryFlyout-close"
onPointerDown={this.closeFlyout}>
<FontAwesomeIcon icon="times" color="black" size="lg" />
- </div> : null}
+ </div> : null} */}
<DocumentView
Document={this.sidebarContent}
diff --git a/src/client/views/PropertiesButtons.scss b/src/client/views/PropertiesButtons.scss
index 1cba252de..5edaa2168 100644
--- a/src/client/views/PropertiesButtons.scss
+++ b/src/client/views/PropertiesButtons.scss
@@ -21,9 +21,8 @@ $linkGap : 3px;
.propertiesButtons-linkButton-empty,
.propertiesButtons-linkButton-nonempty {
height: 30px;
- width: 30px;
- border-radius: 5px;
- opacity: 0.9;
+ width: 32px;
+ border-radius: 6px;
pointer-events: auto;
background-color: #121721;
color: #fcfbf7;
@@ -36,6 +35,7 @@ $linkGap : 3px;
justify-content: center;
align-items: center;
margin-right: 10px;
+ margin-left: 3.5px;
&:hover {
background: $main-accent;
@@ -68,23 +68,35 @@ $linkGap : 3px;
padding-right: 5px;
width: 25px;
border-radius: 5px;
- margin-right: 18px;
+ margin-right: 22px;
margin-bottom: 8px;
}
+.propertiesButtons-title {
+ background: #121721;
+ color: white;
+ font-size: 6px;
+ width: 40px;
+ padding: 5px;
+ height: 16px;
+ border-radius: 7px;
+ text-transform: uppercase;
+ text-align: center;
+ margin-top: -4px;
+}
+
.propertiesButtons-linker {
height: 30px;
- width: 30px;
+ width: 32px;
text-align: center;
- border-radius: 5px;
+ border-radius: 6px;
pointer-events: auto;
- // color: $dark-color;
- // border: $dark-color 1px solid;
- background-color: #252b33;
+ background-color: #121721;
color: #fcfbf7;
transition: 0.2s ease all;
margin-right: 5px;
padding-top: 5px;
+ margin-left: 3.5px;
&:hover {
background: $main-accent;
diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index d46c03470..37ee3d9e0 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -128,18 +128,22 @@ export class PropertiesButtons extends React.Component<{}, {}> {
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) : <Tooltip title={<><div className="dash-tooltip">{`${published ? "Push" : "Publish"} to Google Docs`}</div></>}>
- <div
- className="propertiesButtons-linker"
- style={{ animation }}
- onClick={async () => {
- await GoogleAuthenticationManager.Instance.fetchOrGenerateAccessToken();
- !published && runInAction(() => this.isAnimatingPulse = true);
- PropertiesButtons.hasPushedHack = false;
- targetDoc[Pushes] = NumCast(targetDoc[Pushes]) + 1;
- }}>
- <FontAwesomeIcon className="documentdecorations-icon" icon={published ? (this.pushIcon as any) : cloud} size={published ? "sm" : "xs"} />
- </div></Tooltip>;
+ return !targetDoc ? (null) : <Tooltip title={<><div className="dash-tooltip">{`${published ? "Push" : "Publish"} to Google Docs`}</div></>} placement="top">
+ <div>
+ <div
+ className="propertiesButtons-linker"
+ style={{ animation }}
+ onClick={async () => {
+ await GoogleAuthenticationManager.Instance.fetchOrGenerateAccessToken();
+ !published && runInAction(() => this.isAnimatingPulse = true);
+ PropertiesButtons.hasPushedHack = false;
+ targetDoc[Pushes] = NumCast(targetDoc[Pushes]) + 1;
+ }}>
+ <FontAwesomeIcon className="documentdecorations-icon" icon={published ? (this.pushIcon as any) : cloud} size={published ? "lg" : "sm"} />
+ </div>
+ <div className="propertiesButtons-title">Google</div>
+ </div>
+ </Tooltip>;
}
@computed
@@ -158,74 +162,88 @@ export class PropertiesButtons extends React.Component<{}, {}> {
})();
return !targetDoc || !dataDoc || !dataDoc[GoogleRef] ? (null) : <Tooltip
- title={<><div className="dash-tooltip">{title}</div></>}>
- <div className="propertiesButtons-linker"
- style={{ backgroundColor: this.pullColor }}
- onPointerEnter={action(e => {
- 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={<><div className="dash-tooltip">{title}</div></>} placement="top">
+ <div>
+ <div className="propertiesButtons-linker"
+ style={{ backgroundColor: this.pullColor }}
+ onPointerEnter={action(e => {
+ 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);
- }
- }}>
- <FontAwesomeIcon className="documentdecorations-icon" size="sm"
- style={{ WebkitAnimation: animation, MozAnimation: animation }}
- icon={(() => {
- 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);
}
- })()}
- />
- </div></Tooltip>;
+ }}>
+ <FontAwesomeIcon className="documentdecorations-icon" size="lg"
+ style={{ WebkitAnimation: animation, MozAnimation: animation }}
+ icon={(() => {
+ 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";
+ }
+ })()}
+ />
+ </div>
+ <div className="propertiesButtons-title">Fetch</div>
+ </div>
+ </Tooltip>;
}
@computed
get pinButton() {
const targetDoc = this.selectedDoc;
const isPinned = targetDoc && Doc.isDocPinned(targetDoc);
- return !targetDoc ? (null) : <Tooltip title={<><div className="dash-tooltip">{Doc.isDocPinned(targetDoc) ? "Unpin from presentation" : "Pin to presentation"}</div></>}>
- <div className="propertiesButtons-linker"
- style={{ backgroundColor: isPinned ? "white" : "", color: isPinned ? "black" : "white" }}
- onClick={e => DockedFrameRenderer.PinDoc(targetDoc, isPinned)}>
- <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="map-pin"
- />
- </div></Tooltip>;
+ return !targetDoc ? (null) : <Tooltip
+ title={<><div className="dash-tooltip">{Doc.isDocPinned(targetDoc) ? "Unpin from presentation" :
+ "Pin to presentation"}</div></>} placement="top">
+ <div>
+ <div className="propertiesButtons-linker"
+ style={{ backgroundColor: isPinned ? "white" : "", color: isPinned ? "black" : "white" }}
+ onClick={e => DockedFrameRenderer.PinDoc(targetDoc, isPinned)}>
+ <FontAwesomeIcon className="documentdecorations-icon" size="lg" icon="map-pin"
+ />
+ </div>
+
+ <div className="propertiesButtons-title">{Doc.isDocPinned(targetDoc) ? "Unpin" : "Pin"}</div>
+ </div>
+ </Tooltip>;
}
@computed
get metadataButton() {
//const view0 = this.view0;
if (this.selectedDoc) {
- return <Tooltip title={<><div className="dash-tooltip">Show metadata panel</div></>}>
+ return <Tooltip title={<><div className="dash-tooltip">Show metadata panel</div></>} placement="top">
<div className="propertiesButtons-linkFlyout">
<Flyout anchorPoint={anchorPoints.LEFT_TOP}
content={<MetadataEntryMenu docs={[this.selectedDoc]} suggestWithFunction /> /* tfs: @bcz This might need to be the data document? */}>
- <div className={"propertiesButtons-linkButton-" + "empty"} onPointerDown={e => e.stopPropagation()} >
- {<FontAwesomeIcon className="documentdecorations-icon" icon="tag" size="sm" />}
+ <div>
+ <div className={"propertiesButtons-linkButton-" + "empty"} onPointerDown={e => e.stopPropagation()} >
+ {<FontAwesomeIcon className="documentdecorations-icon" icon="tag" size="lg" />}
+ </div>
+ <div className="propertiesButtons-title">Metadata</div>
</div>
</Flyout>
</div></Tooltip>;
@@ -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) :
- <Tooltip title={<><div className="dash-tooltip">Customize layout</div></>}>
+ <Tooltip title={<><div className="dash-tooltip">Customize layout</div></>} placement="top">
<div className="propertiesButtons-linkFlyout">
<Flyout anchorPoint={anchorPoints.LEFT_TOP} //onOpen={action(() => this._aliasDown = true)} onClose={action(() => this._aliasDown = false)}
content={<TemplateMenu docViews={views.filter(v => v).map(v => v as DocumentView)} templates={templates} />}>
- <div className={"propertiesButtons-linkButton-empty"} >
- {<FontAwesomeIcon className="documentdecorations-icon" icon="edit" size="sm" />}
+ <div>
+ <div className={"propertiesButtons-linkButton-empty"} >
+ {<FontAwesomeIcon className="documentdecorations-icon" icon="edit" size="lg" />}
+ </div>
+ <div className="propertiesButtons-title">Layout</div>
</div>
</Flyout>
</div></Tooltip>;
@@ -292,12 +313,15 @@ export class PropertiesButtons extends React.Component<{}, {}> {
@computed
get copyButton() {
const targetDoc = this.selectedDoc;
- return !targetDoc ? (null) : <Tooltip title={<><div className="dash-tooltip">{"Tap or Drag to create an alias"}</div></>}>
- <div className={"propertiesButtons-linkButton-empty"}
- ref={this._dragRef}
- onPointerDown={this.onAliasButtonDown}
- onClick={this.onCopy}>
- {<FontAwesomeIcon className="documentdecorations-icon" icon="copy" size="sm" />}
+ return !targetDoc ? (null) : <Tooltip title={<><div className="dash-tooltip">{"Tap or Drag to create an alias"}</div></>} placement="top">
+ <div>
+ <div className={"propertiesButtons-linkButton-empty"}
+ ref={this._dragRef}
+ onPointerDown={this.onAliasButtonDown}
+ onClick={this.onCopy}>
+ {<FontAwesomeIcon className="documentdecorations-icon" icon="copy" size="lg" />}
+ </div>
+ <div className="propertiesButtons-title">Alias</div>
</div>
</Tooltip>;
}
@@ -312,11 +336,14 @@ export class PropertiesButtons extends React.Component<{}, {}> {
const targetDoc = this.selectedDoc;
return !targetDoc ? (null) : <Tooltip
title={<><div className="dash-tooltip">{this.selectedDoc?.lockedPosition ?
- "Unlock Position" : "Lock Position"}</div></>}>
- <div className={"propertiesButtons-linkButton-empty"}
- onPointerDown={this.onLock} >
- {<FontAwesomeIcon className="documentdecorations-icon"
- icon={BoolCast(this.selectedDoc?.lockedPosition) ? "unlock" : "lock"} size="sm" />}
+ "Unlock Position" : "Lock Position"}</div></>} placement="top">
+ <div>
+ <div className={"propertiesButtons-linkButton-empty"}
+ onPointerDown={this.onLock} >
+ {<FontAwesomeIcon className="documentdecorations-icon"
+ icon={BoolCast(this.selectedDoc?.lockedPosition) ? "unlock" : "lock"} size="lg" />}
+ </div>
+ <div className="propertiesButtons-title">Position </div>
</div>
</Tooltip>;
}
@@ -325,15 +352,18 @@ export class PropertiesButtons extends React.Component<{}, {}> {
get downloadButton() {
const targetDoc = this.selectedDoc;
return !targetDoc ? (null) : <Tooltip
- title={<><div className="dash-tooltip">{"Download Document"}</div></>}>
- <div className={"propertiesButtons-linkButton-empty"}
- onPointerDown={async () => {
- if (this.selectedDocumentView?.props.Document) {
- Doc.Zip(this.selectedDocumentView?.props.Document);
- }
- }}>
- {<FontAwesomeIcon className="propertiesButtons-icon"
- icon="download" size="sm" />}
+ title={<><div className="dash-tooltip">{"Download Document"}</div></>} placement="top">
+ <div>
+ <div className={"propertiesButtons-linkButton-empty"}
+ onPointerDown={async () => {
+ if (this.selectedDocumentView?.props.Document) {
+ Doc.Zip(this.selectedDocumentView?.props.Document);
+ }
+ }}>
+ {<FontAwesomeIcon className="propertiesButtons-icon"
+ icon="download" size="lg" />}
+ </div>
+ <div className="propertiesButtons-title"> downld </div>
</div>
</Tooltip>;
}
@@ -342,11 +372,14 @@ export class PropertiesButtons extends React.Component<{}, {}> {
get deleteButton() {
const targetDoc = this.selectedDoc;
return !targetDoc ? (null) : <Tooltip
- title={<><div className="dash-tooltip">{"Delete Document"}</div></>}>
- <div className={"propertiesButtons-linkButton-empty"}
- onPointerDown={this.deleteDocument}>
- {<FontAwesomeIcon className="propertiesButtons-icon"
- icon="trash-alt" size="sm" />}
+ title={<><div className="dash-tooltip">{"Delete Document"}</div></>} placement="top">
+ <div>
+ <div className={"propertiesButtons-linkButton-empty"}
+ onPointerDown={this.deleteDocument}>
+ {<FontAwesomeIcon className="propertiesButtons-icon"
+ icon="trash-alt" size="lg" />}
+ </div>
+ <div className="propertiesButtons-title"> delete </div>
</div>
</Tooltip>;
}
@@ -361,15 +394,18 @@ export class PropertiesButtons extends React.Component<{}, {}> {
get sharingButton() {
const targetDoc = this.selectedDoc;
return !targetDoc ? (null) : <Tooltip
- title={<><div className="dash-tooltip">{"Share Document"}</div></>}>
- <div className={"propertiesButtons-linkButton-empty"}
- onPointerDown={() => {
- if (this.selectedDocumentView) {
- SharingManager.Instance.open(this.selectedDocumentView);
- }
- }}>
- {<FontAwesomeIcon className="propertiesButtons-icon"
- icon="users" size="sm" />}
+ title={<><div className="dash-tooltip">{"Share Document"}</div></>} placement="top">
+ <div>
+ <div className={"propertiesButtons-linkButton-empty"}
+ onPointerDown={() => {
+ if (this.selectedDocumentView) {
+ SharingManager.Instance.open(this.selectedDocumentView);
+ }
+ }}>
+ {<FontAwesomeIcon className="propertiesButtons-icon"
+ icon="users" size="lg" />}
+ </div>
+ <div className="propertiesButtons-title"> share </div>
</div>
</Tooltip>;
}
@@ -377,15 +413,19 @@ export class PropertiesButtons extends React.Component<{}, {}> {
@computed
get onClickButton() {
if (this.selectedDoc) {
- return <Tooltip title={<><div className="dash-tooltip">Choose onClick behavior</div></>}>
- <div className="propertiesButtons-linkFlyout">
- <Flyout anchorPoint={anchorPoints.LEFT_TOP}
- content={this.onClickFlyout}>
- <div className={"propertiesButtons-linkButton-" + "empty"} onPointerDown={e => e.stopPropagation()} >
- {<FontAwesomeIcon className="documentdecorations-icon" icon="mouse-pointer" size="sm" />}
- </div>
- </Flyout>
- </div></Tooltip>;
+ return <Tooltip title={<><div className="dash-tooltip">Choose onClick behavior</div></>} placement="top">
+ <div>
+ <div className="propertiesButtons-linkFlyout">
+ <Flyout anchorPoint={anchorPoints.LEFT_TOP}
+ content={this.onClickFlyout}>
+ <div className={"propertiesButtons-linkButton-" + "empty"} onPointerDown={e => e.stopPropagation()} >
+ {<FontAwesomeIcon className="documentdecorations-icon" icon="mouse-pointer" size="lg" />}
+ </div>
+ </Flyout>
+ </div>
+ <div className="propertiesButtons-title"> onclick </div>
+ </div>
+ </Tooltip>;
} else {
return null;
}
@@ -472,15 +512,18 @@ export class PropertiesButtons extends React.Component<{}, {}> {
get googlePhotosButton() {
const targetDoc = this.selectedDoc;
return !targetDoc ? (null) : <Tooltip
- title={<><div className="dash-tooltip">{"Export to Google Photos"}</div></>}>
- <div className={"propertiesButtons-linkButton-empty"}
- onPointerDown={() => {
- if (this.selectedDocumentView) {
- GooglePhotos.Export.CollectionToAlbum({ collection: this.selectedDocumentView.Document }).then(console.log);
- }
- }}>
- {<FontAwesomeIcon className="documentdecorations-icon"
- icon="cloud-upload-alt" size="sm" />}
+ title={<><div className="dash-tooltip">{"Export to Google Photos"}</div></>} placement="top">
+ <div>
+ <div className={"propertiesButtons-linkButton-empty"}
+ onPointerDown={() => {
+ if (this.selectedDocumentView) {
+ GooglePhotos.Export.CollectionToAlbum({ collection: this.selectedDocumentView.Document }).then(console.log);
+ }
+ }}>
+ {<FontAwesomeIcon className="documentdecorations-icon"
+ icon="cloud-upload-alt" size="lg" />}
+ </div>
+ <div className="propertiesButtons-title"> google </div>
</div>
</Tooltip>;
}
@@ -489,13 +532,16 @@ export class PropertiesButtons extends React.Component<{}, {}> {
get clustersButton() {
const targetDoc = this.selectedDoc;
return !targetDoc ? (null) : <Tooltip
- title={<><div className="dash-tooltip">{this.selectedDoc?.useClusters ? "Stop Showing Clusters" : "Show Clusters"}</div></>}>
- <div className={"propertiesButtons-linkButton-empty"}
- style={{ backgroundColor: this.selectedDoc?.useClusters ? "#a0a0a0" : "" }}
- onPointerDown={this.changeClusters}>
- {<FontAwesomeIcon className="documentdecorations-icon"
- color={this.selectedDoc?.useClusters ? "black" : "white"}
- icon="braille" size="sm" />}
+ title={<><div className="dash-tooltip">{this.selectedDoc?.useClusters ? "Stop Showing Clusters" : "Show Clusters"}</div></>} placement="top">
+ <div>
+ <div className={"propertiesButtons-linkButton-empty"}
+ style={{ backgroundColor: this.selectedDoc?.useClusters ? "#a0a0a0" : "" }}
+ onPointerDown={this.changeClusters}>
+ {<FontAwesomeIcon className="documentdecorations-icon"
+ color={this.selectedDoc?.useClusters ? "black" : "white"}
+ icon="braille" size="lg" />}
+ </div>
+ <div className="propertiesButtons-title"> clusters </div>
</div>
</Tooltip>;
}
@@ -514,13 +560,16 @@ export class PropertiesButtons extends React.Component<{}, {}> {
get fitContentButton() {
const targetDoc = this.selectedDoc;
return !targetDoc ? (null) : <Tooltip
- title={<><div className="dash-tooltip">{this.selectedDoc?._fitToBox ? "Stop Fitting Content" : "Fit Content"}</div></>}>
- <div className={"propertiesButtons-linkButton-empty"}
- style={{ backgroundColor: this.selectedDoc?._fitToBox ? "#a0a0a0" : "" }}
- onPointerDown={this.changeFitToBox}>
- {<FontAwesomeIcon className="documentdecorations-icon"
- color={this.selectedDoc?._fitToBox ? "black" : "white"}
- icon="expand" size="sm" />}
+ title={<><div className="dash-tooltip">{this.selectedDoc?._fitToBox ? "Stop Fitting Content" : "Fit Content"}</div></>} placement="top">
+ <div>
+ <div className={"propertiesButtons-linkButton-empty"}
+ style={{ backgroundColor: this.selectedDoc?._fitToBox ? "#a0a0a0" : "" }}
+ onPointerDown={this.changeFitToBox}>
+ {<FontAwesomeIcon className="documentdecorations-icon"
+ color={this.selectedDoc?._fitToBox ? "black" : "white"}
+ icon="expand" size="lg" />}
+ </div>
+ <div className="propertiesButtons-title"> {this.selectedDoc?._fitToBox ? "unfit" : "fit"} </div>
</div>
</Tooltip>;
}
@@ -541,11 +590,14 @@ export class PropertiesButtons extends React.Component<{}, {}> {
get maskButton() {
const targetDoc = this.selectedDoc;
return !targetDoc ? (null) : <Tooltip
- title={<><div className="dash-tooltip">Make Mask</div></>}>
- <div className={"propertiesButtons-linkButton-empty"}
- onPointerDown={this.makeMask}>
- {<FontAwesomeIcon className="documentdecorations-icon"
- color="white" icon="paint-brush" size="sm" />}
+ title={<><div className="dash-tooltip">Make Mask</div></>} placement="top">
+ <div>
+ <div className={"propertiesButtons-linkButton-empty"}
+ onPointerDown={this.makeMask}>
+ {<FontAwesomeIcon className="documentdecorations-icon"
+ color="white" icon="paint-brush" size="lg" />}
+ </div>
+ <div className="propertiesButtons-title"> mask </div>
</div>
</Tooltip>;
}
@@ -553,13 +605,16 @@ export class PropertiesButtons extends React.Component<{}, {}> {
@computed
get contextButton() {
if (this.selectedDoc) {
- return <Tooltip title={<><div className="dash-tooltip">Show Context</div></>}>
- <div className={"propertiesButtons-linkButton-empty"}>
- <ParentDocSelector Document={this.selectedDoc} addDocTab={(doc, where) => {
- where === "onRight" ? CollectionDockingView.AddRightSplit(doc) :
- this.selectedDocumentView?.props.addDocTab(doc, "onRight");
- return true;
- }} />
+ return <Tooltip title={<><div className="dash-tooltip">Show Context</div></>} placement="top">
+ <div>
+ <div className={"propertiesButtons-linkButton-empty"}>
+ <ParentDocSelector Document={this.selectedDoc} addDocTab={(doc, where) => {
+ where === "onRight" ? CollectionDockingView.AddRightSplit(doc) :
+ this.selectedDocumentView?.props.addDocTab(doc, "onRight");
+ return true;
+ }} />
+ </div>
+ <div className="propertiesButtons-title"> context </div>
</div>
</Tooltip>;
} else {
@@ -622,9 +677,6 @@ export class PropertiesButtons extends React.Component<{}, {}> {
<div className="propertiesButtons-button">
{this.onClickButton}
</div>
- {/* <div className="propertiesButtons-button">
- {this.contextButton}
- </div> */}
<div className="propertiesButtons-button">
{this.sharingButton}
</div>
@@ -652,6 +704,9 @@ export class PropertiesButtons extends React.Component<{}, {}> {
<div className="propertiesButtons-button" style={{ display: !isInk ? "none" : "" }}>
{this.maskButton}
</div>
+ <div className="propertiesButtons-button">
+ {this.contextButton}
+ </div>
</div>
</div>;
}
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<PropertiesViewProps> {
@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<PropertiesViewProps> {
return <div className="propertiesView" style={{ width: this.props.width }}>
<div className="propertiesView-title" style={{ width: this.props.width }}>
No Document Selected
- <div className="propertiesView-title-icon" onPointerDown={this.props.onDown}>
- <FontAwesomeIcon icon="times" color="black" size="xs" />
- </div>
- </div>
+ </div>
</div>;
- }
- const novice = Doc.UserDoc().noviceMode;
+ } else {
+
+ const novice = Doc.UserDoc().noviceMode;
- return <div className="propertiesView" style={{ width: this.props.width }} >
- <div className="propertiesView-title" style={{ width: this.props.width }}>
- Properties
- <div className="propertiesView-title-icon" onPointerDown={this.props.onDown}>
+ return <div className="propertiesView" style={{
+ width: this.props.width,
+ // overflowY: this.inActions ? "visible" : "scroll"
+ }} >
+ <div className="propertiesView-title" style={{ width: this.props.width }}>
+ Properties
+ {/* <div className="propertiesView-title-icon" onPointerDown={this.props.onDown}>
<FontAwesomeIcon icon="times" color="black" size="sm" />
+ </div> */}
</div>
- </div>
- <div className="propertiesView-name">
- {this.editableTitle}
- </div>
- <div className="propertiesView-settings">
- <div className="propertiesView-settings-title"
- onPointerDown={() => runInAction(() => { this.openActions = !this.openActions; })}
- style={{ backgroundColor: this.openActions ? "black" : "" }}>
- Actions
+ <div className="propertiesView-name">
+ {this.editableTitle}
+ </div>
+ <div className="propertiesView-settings" onPointerEnter={() => runInAction(() => { this.inActions = true; })}
+ onPointerLeave={() => runInAction(() => { this.inActions = false; })}>
+ <div className="propertiesView-settings-title"
+ onPointerDown={() => runInAction(() => { this.openActions = !this.openActions; })}
+ style={{ backgroundColor: this.openActions ? "black" : "" }}>
+ Actions
<div className="propertiesView-settings-title-icon">
- <FontAwesomeIcon icon={this.openActions ? "caret-down" : "caret-right"} size="lg" color="white" />
+ <FontAwesomeIcon icon={this.openActions ? "caret-down" : "caret-right"} size="lg" color="white" />
+ </div>
</div>
+ {!this.openActions ? (null) :
+ <div className="propertiesView-settings-content">
+ <PropertiesButtons />
+ </div>}
</div>
- {!this.openActions ? (null) :
- <div className="propertiesView-settings-content">
- <PropertiesButtons />
- </div>}
- </div>
- <div className="propertiesView-sharing">
- <div className="propertiesView-sharing-title"
- onPointerDown={() => runInAction(() => { this.openSharing = !this.openSharing; })}
- style={{ backgroundColor: this.openSharing ? "black" : "" }}>
- Sharing {"&"} Permissions
+ <div className="propertiesView-sharing">
+ <div className="propertiesView-sharing-title"
+ onPointerDown={() => runInAction(() => { this.openSharing = !this.openSharing; })}
+ style={{ backgroundColor: this.openSharing ? "black" : "" }}>
+ Sharing {"&"} Permissions
<div className="propertiesView-sharing-title-icon">
- <FontAwesomeIcon icon={this.openSharing ? "caret-down" : "caret-right"} size="lg" color="white" />
+ <FontAwesomeIcon icon={this.openSharing ? "caret-down" : "caret-right"} size="lg" color="white" />
+ </div>
</div>
+ {!this.openSharing ? (null) :
+ <div className="propertiesView-sharing-content">
+ {this.sharingTable}
+ </div>}
</div>
- {!this.openSharing ? (null) :
- <div className="propertiesView-sharing-content">
- {this.sharingTable}
- </div>}
- </div>
- {!this.isInk ? (null) :
- <div className="propertiesView-appearance">
- <div className="propertiesView-appearance-title"
- onPointerDown={() => runInAction(() => { this.openAppearance = !this.openAppearance; })}
- style={{ backgroundColor: this.openAppearance ? "black" : "" }}>
- Appearance
+ {!this.isInk ? (null) :
+ <div className="propertiesView-appearance">
+ <div className="propertiesView-appearance-title"
+ onPointerDown={() => runInAction(() => { this.openAppearance = !this.openAppearance; })}
+ style={{ backgroundColor: this.openAppearance ? "black" : "" }}>
+ Appearance
<div className="propertiesView-appearance-title-icon">
- <FontAwesomeIcon icon={this.openAppearance ? "caret-down" : "caret-right"} size="lg" color="white" />
+ <FontAwesomeIcon icon={this.openAppearance ? "caret-down" : "caret-right"} size="lg" color="white" />
+ </div>
</div>
- </div>
- {!this.openAppearance ? (null) :
- <div className="propertiesView-appearance-content">
- {this.appearanceEditor}
- </div>}
- </div>}
+ {!this.openAppearance ? (null) :
+ <div className="propertiesView-appearance-content">
+ {this.appearanceEditor}
+ </div>}
+ </div>}
- {this.isInk ? <div className="propertiesView-transform">
- <div className="propertiesView-transform-title"
- onPointerDown={() => runInAction(() => { this.openTransform = !this.openTransform; })}
- style={{ backgroundColor: this.openTransform ? "black" : "" }}>
- Transform
+ {this.isInk ? <div className="propertiesView-transform">
+ <div className="propertiesView-transform-title"
+ onPointerDown={() => runInAction(() => { this.openTransform = !this.openTransform; })}
+ style={{ backgroundColor: this.openTransform ? "black" : "" }}>
+ Transform
<div className="propertiesView-transform-title-icon">
- <FontAwesomeIcon icon={this.openTransform ? "caret-down" : "caret-right"} size="lg" color="white" />
+ <FontAwesomeIcon icon={this.openTransform ? "caret-down" : "caret-right"} size="lg" color="white" />
+ </div>
</div>
- </div>
- {this.openTransform ? <div className="propertiesView-transform-content">
- {this.transformEditor}
+ {this.openTransform ? <div className="propertiesView-transform-content">
+ {this.transformEditor}
+ </div> : null}
</div> : null}
- </div> : null}
-
- <div className="propertiesView-fields">
- <div className="propertiesView-fields-title"
- onPointerDown={() => runInAction(() => { this.openFields = !this.openFields; })}
- style={{ backgroundColor: this.openFields ? "black" : "" }}>
- <div className="propertiesView-fields-title-name">
- Fields {"&"} Tags
+
+ <div className="propertiesView-fields">
+ <div className="propertiesView-fields-title"
+ onPointerDown={() => runInAction(() => { this.openFields = !this.openFields; })}
+ style={{ backgroundColor: this.openFields ? "black" : "" }}>
+ <div className="propertiesView-fields-title-name">
+ Fields {"&"} Tags
<div className="propertiesView-fields-title-icon">
- <FontAwesomeIcon icon={this.openFields ? "caret-down" : "caret-right"} size="lg" color="white" />
+ <FontAwesomeIcon icon={this.openFields ? "caret-down" : "caret-right"} size="lg" color="white" />
+ </div>
</div>
</div>
+ {!novice && this.openFields ? <div className="propertiesView-fields-checkbox">
+ {this.fieldsCheckbox}
+ <div className="propertiesView-fields-checkbox-text">Layout</div>
+ </div> : null}
+ {!this.openFields ? (null) :
+ <div className="propertiesView-fields-content">
+ {novice ? this.noviceFields : this.expandedField}
+ </div>}
</div>
- {!novice && this.openFields ? <div className="propertiesView-fields-checkbox">
- {this.fieldsCheckbox}
- <div className="propertiesView-fields-checkbox-text">Layout</div>
- </div> : null}
- {!this.openFields ? (null) :
- <div className="propertiesView-fields-content">
- {novice ? this.noviceFields : this.expandedField}
- </div>}
- </div>
- <div className="propertiesView-layout">
- <div className="propertiesView-layout-title"
- onPointerDown={() => runInAction(() => { this.openLayout = !this.openLayout; })}
- style={{ backgroundColor: this.openLayout ? "black" : "" }}>
- Layout
+ <div className="propertiesView-layout">
+ <div className="propertiesView-layout-title"
+ onPointerDown={() => runInAction(() => { this.openLayout = !this.openLayout; })}
+ style={{ backgroundColor: this.openLayout ? "black" : "" }}>
+ Layout
<div className="propertiesView-layout-title-icon" onPointerDown={() => runInAction(() => { this.openLayout = !this.openLayout; })}>
- <FontAwesomeIcon icon={this.openLayout ? "caret-down" : "caret-right"} size="lg" color="white" />
+ <FontAwesomeIcon icon={this.openLayout ? "caret-down" : "caret-right"} size="lg" color="white" />
+ </div>
</div>
+ {this.openLayout ? <div className="propertiesView-layout-content">{this.layoutPreview}</div> : null}
</div>
- {this.openLayout ? <div className="propertiesView-layout-content">{this.layoutPreview}</div> : null}
- </div>
- </div>;
+ </div>;
+
+ }
}
} \ No newline at end of file
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-08 22:34:30 +0000