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