From a7e960fd5de9d6da07cdbce9e475a6ddfdf7967f Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Wed, 12 Aug 2020 01:29:51 -0500 Subject: select fixes --- src/client/views/collections/collectionFreeForm/PropertiesView.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/client/views/collections/collectionFreeForm/PropertiesView.tsx') diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx index c7edd67b3..850324cc3 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx @@ -316,7 +316,7 @@ export class PropertiesView extends React.Component { */ getPermissionsSelect(user: string, permission: string) { return { document.removeEventListener("keydown", this.keyEvents, true); }} - onChange={action((e: React.ChangeEvent) => { if (Number(e.target.value) >= 0 && Number(e.target.value) <= 10 && !isNaN(Number(e.target.value)) || e.target.value === '') this.setTransitionTime(e.target.value) })} /> s + onChange={action((e: React.ChangeEvent) => { this.setTransitionTime(e.target.value) })} /> s
-
this.setTransitionTime(String(duration), 1000)}> +
this.setTransitionTime(String(transitionSpeed), 1000)}>
-
this.setTransitionTime(String(duration), -1000)}> +
this.setTransitionTime(String(transitionSpeed), -1000)}>
@@ -765,9 +787,9 @@ export class PresBox extends ViewBoxBaseComponent
Slide Duration
{ document.removeEventListener("keydown", this.keyEvents, true); }} - onChange={action((e: React.ChangeEvent) => { if (Number(e.target.value) >= 0 && Number(e.target.value) <= 20 && !isNaN(Number(e.target.value)) || e.target.value === '') this.setDurationTime(e.target.value) })} /> s + onChange={action((e: React.ChangeEvent) => { this.setDurationTime(e.target.value) })} /> s
this.setDurationTime(String(duration), 1000)}> @@ -787,9 +809,9 @@ export class PresBox extends ViewBoxBaseComponent
Effects -
{ e.stopPropagation(); this.openEffectDropdown = !this.openEffectDropdown })} style={{ borderBottomLeftRadius: this.openMovementDropdown ? 0 : 5 }}> +
{ e.stopPropagation(); this.openEffectDropdown = !this.openEffectDropdown })} style={{ borderBottomLeftRadius: this.openEffectDropdown ? 0 : 5, border: this.openEffectDropdown ? 'solid 2px #5B9FDD' : 'solid 1px black' }}> {effect} - +
e.stopPropagation()}>
e.stopPropagation()} onClick={() => targetDoc.presEffect = 'None'}>None
e.stopPropagation()} onClick={() => targetDoc.presEffect = 'Fade'}>Fade In
@@ -850,6 +872,10 @@ export class PresBox extends ViewBoxBaseComponent tagDoc.presTransition = targetDoc.presTransition; tagDoc.presDuration = targetDoc.presDuration; tagDoc.presEffect = targetDoc.presEffect; + tagDoc.presEffectDirection = targetDoc.presEffectDirection; + curDoc.presMovement = activeItem.presMovement; + curDoc.presHideTillShownButton = activeItem.presHideTillShownButton; + curDoc.presHideAfterButton = activeItem.presHideAfterButton; } }); } @@ -882,9 +908,41 @@ export class PresBox extends ViewBoxBaseComponent } }}>Presentation pin view
-
-
Store original website
+
+
+
Pan X
+
+ { document.removeEventListener("keydown", this.keyEvents, true); }} + onChange={action((e: React.ChangeEvent) => { let val = e.target.value; activeItem.presPinViewX = Number(val); })} /> +
+
+
+
Pan Y
+
+ { document.removeEventListener("keydown", this.keyEvents, true); }} + onChange={action((e: React.ChangeEvent) => { let val = e.target.value; activeItem.presPinViewY = Number(val) })} /> +
+
+
+
Scale
+
+ { document.removeEventListener("keydown", this.keyEvents, true); }} + onChange={action((e: React.ChangeEvent) => { let val = e.target.value; activeItem.presPinViewScale = Number(val) })} /> +
+
+ {/*
+
Store original website
+
*/}
@@ -909,11 +967,6 @@ export class PresBox extends ViewBoxBaseComponent
Title
Text goes here
- {/*
runInAction(() => { this.layout = 'twoColumns'; this.createNewSlide(this.layout); })}> -
Title
-
Column one text
-
Column two text
-
*/}
@@ -1043,7 +1096,7 @@ export class PresBox extends ViewBoxBaseComponent @computed get presentDropdown() { return (
e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}> -
+
this.updateMinimize()}> Minimize
{ this.layoutDoc.presStatus = "manual"; this.turnOffEdit(); }))}> @@ -1065,7 +1118,7 @@ export class PresBox extends ViewBoxBaseComponent CollectionFreeFormDocumentView.setupKeyframes(childDocs, 0); } CollectionFreeFormDocumentView.updateScrollframe(tagDoc, currentFrame); - CollectionFreeFormDocumentView.updateKeyframe(childDocs, currentFrame || 0); + CollectionFreeFormDocumentView.updateKeyframe(childDocs, currentFrame || 0, tagDoc); tagDoc.currentFrame = Math.max(0, (currentFrame || 0) + 1); tagDoc.lastFrame = Math.max(NumCast(tagDoc.currentFrame), NumCast(tagDoc.lastFrame)); if (activeItem.zoomProgressivize) { @@ -1116,38 +1169,52 @@ export class PresBox extends ViewBoxBaseComponent case DocumentType.AUDIO: type = "Audio"; break; case DocumentType.VID: type = "Video"; break; case DocumentType.IMG: type = "Image"; break; + case DocumentType.WEB: type = "Web page"; break; default: type = "Other node"; break; } } return type; } + @observable private openActiveColorPicker: boolean = false; + @observable private openViewedColorPicker: boolean = false; + + + @computed get progressivizeDropdown() { const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null); - + const activeFontColor = targetDoc["pres-text-color"] ? StrCast(targetDoc["pres-text-color"]) : "Black"; + const viewedFontColor = targetDoc["pres-text-viewed-color"] ? StrCast(targetDoc["pres-text-viewed-color"]) : "Black"; if (activeItem && targetDoc) { return (
e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}>
{this.stringType} selected -
-
Child documents
-
Edit
+
+
Contents
+
Edit
+
+
+
Active text color
+
{ console.log("hi"); this.openActiveColorPicker = !this.openActiveColorPicker })}> +
-
-
Internal zoom
-
Viewfinder
- {/*
Snapshot
*/} + {this.activeColorPicker} +
+
Viewed font color
+
this.openViewedColorPicker = !this.openViewedColorPicker)}> +
- {/*
-
Text progressivize
-
Edit
+ {this.viewedColorPicker} + {/*
+
Zoom
+
Edit
*/} -
-
Scroll progressivize
-
Edit
+
+
Scroll
+
Edit
@@ -1157,7 +1224,7 @@ export class PresBox extends ViewBoxBaseComponent
{ e.stopPropagation(); this.prevKeyframe(targetDoc, activeItem); }}>
-
targetDoc.editing = !targetDoc.editing)} > {NumCast(targetDoc.currentFrame)}
@@ -1167,7 +1234,7 @@ export class PresBox extends ViewBoxBaseComponent
{"Last frame"}
}>
{NumCast(targetDoc.lastFrame)}
-
console.log(" TODO: play frames")}>Play
+
console.log(" TODO: play frames")}>Play
@@ -1175,6 +1242,45 @@ export class PresBox extends ViewBoxBaseComponent } } + @undoBatch + @action + switchActive = (color: ColorState) => { + const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); + const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null); + const val = String(color.hex); + targetDoc["pres-text-color"] = val; + return true; + } + @undoBatch + @action + switchPresented = (color: ColorState) => { + const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); + const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null); + const val = String(color.hex); + targetDoc["pres-text-viewed-color"] = val; + return true; + } + + @computed get activeColorPicker() { + const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); + const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null); + if (this.openActiveColorPicker) return ; + } + + @computed get viewedColorPicker() { + const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); + const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null); + if (this.openViewedColorPicker) return ; + } + turnOffEdit = () => { this.childDocs.forEach((doc) => { doc.editSnapZoomProgressivize = false; @@ -1184,31 +1290,16 @@ export class PresBox extends ViewBoxBaseComponent targetDoc.editSnapZoomProgressivize = false; targetDoc.editZoomProgressivize = false; targetDoc.editScrollProgressivize = false; - if (doc.type === DocumentType.WEB) { - doc.presWebsite = doc.data; - } }); } - //Toggle whether the user edits or not - @action - editSnapZoomProgressivize = (e: React.MouseEvent) => { - const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); - const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); - if (!targetDoc.editSnapZoomProgressivize) { - targetDoc.editSnapZoomProgressivize = true; - } else { - targetDoc.editSnapZoomProgressivize = false; - } - - } - //Toggle whether the user edits or not @action editZoomProgressivize = (e: React.MouseEvent) => { const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); if (!targetDoc.editZoomProgressivize) { + if (!activeItem.zoomProgressivize) activeItem.zoomProgressivize = true; targetDoc.zoomProgressivize = true; targetDoc.editZoomProgressivize = true; activeItem.editZoomProgressivize = true; } else { @@ -1223,6 +1314,7 @@ export class PresBox extends ViewBoxBaseComponent const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); if (!targetDoc.editScrollProgressivize) { + if (!targetDoc.scrollProgressivize) { targetDoc.scrollProgressivize = true; activeItem.scrollProgressivize = true; } targetDoc.editScrollProgressivize = true; } else { targetDoc.editScrollProgressivize = false; @@ -1261,44 +1353,17 @@ export class PresBox extends ViewBoxBaseComponent } } - //Progressivize Text nodes - @action - editTextProgressivize = (e: React.MouseEvent) => { - const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); - const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); - targetDoc.currentFrame = targetDoc.lastFrame; - if (targetDoc?.editTextProgressivize) { - targetDoc.editTextProgressivize = false; - } else { - targetDoc.editTextProgressivize = true; - } - } - - @action - progressivizeText = (e: React.MouseEvent) => { - e.stopPropagation(); - const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); - activeItem.presProgressivize = !activeItem.presProgressivize; - const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); - const docs = DocListCast(targetDoc[Doc.LayoutFieldKey(targetDoc)]); - targetDoc.presProgressivize = !targetDoc.presProgressivize; - if (activeItem.presProgressivize) { - targetDoc.currentFrame = 0; - CollectionFreeFormDocumentView.setupKeyframes(docs, docs.length, true); - targetDoc.lastFrame = docs.length - 1; - } - } - //Progressivize Child Docs @action editProgressivize = (e: React.MouseEvent) => { const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); targetDoc.currentFrame = targetDoc.lastFrame; - if (targetDoc?.editProgressivize) { - targetDoc.editProgressivize = false; - } else { + if (!targetDoc.editProgressivize) { + if (!activeItem.presProgressivize) { activeItem.presProgressivize = true; targetDoc.presProgressivize = true; } targetDoc.editProgressivize = true; + } else { + targetDoc.editProgressivize = false; } } @@ -1309,6 +1374,7 @@ export class PresBox extends ViewBoxBaseComponent const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); const docs = DocListCast(targetDoc[Doc.LayoutFieldKey(targetDoc)]); if (!activeItem.presProgressivize) { + targetDoc.editing = false; activeItem.presProgressivize = true; targetDoc.presProgressivize = true; targetDoc.currentFrame = 0; @@ -1318,11 +1384,9 @@ export class PresBox extends ViewBoxBaseComponent targetDoc.editProgressivize = false; activeItem.presProgressivize = false; targetDoc.presProgressivize = false; - // docs.forEach((doc, index) => { - // doc.appearFrame = 0; - // }); targetDoc.currentFrame = 0; targetDoc.lastFrame = 0; + targetDoc.editing = true; } } @@ -1360,15 +1424,15 @@ export class PresBox extends ViewBoxBaseComponent } @action - checkList = (doc: Doc, list: any) => { + checkList = (doc: Doc, list: any): number => { const x: List = list; - if (x && x.length >= NumCast(doc.currentFrame) + 1) { + if (x && x.length >= NumCast(doc!.currentFrame) + 1) { return x[NumCast(doc.currentFrame)]; - } else if (doc && x) { + } else if (x) { x.length = NumCast(doc.currentFrame) + 1; x[NumCast(doc.currentFrame)] = x[NumCast(doc.currentFrame) - 1]; return x[NumCast(doc.currentFrame)]; - } + } else return 100; } @computed get progressivizeChildDocs() { @@ -1451,8 +1515,18 @@ export class PresBox extends ViewBoxBaseComponent return width; } + @action + toggleProperties = () => { + if (CurrentUserUtils.propertiesWidth > 0) { + CurrentUserUtils.propertiesWidth = 0; + } else { + CurrentUserUtils.propertiesWidth = 250; + } + } + @computed get toolbar() { - const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); + const propIcon = CurrentUserUtils.propertiesWidth > 0 ? "angle-double-right" : "angle-double-left"; + const propTitle = CurrentUserUtils.propertiesWidth > 0 ? "Close Presentation Panel" : "Open Presentation Panel"; return (
{"Add new slide"}
}>
this.newDocumentTools = !this.newDocumentTools)}> @@ -1471,6 +1545,11 @@ export class PresBox extends ViewBoxBaseComponent
+
{propTitle}
}> +
+ 0 ? '#AEDDF8' : 'white' }} /> +
+
); } diff --git a/src/client/views/presentationview/PresElementBox.scss b/src/client/views/presentationview/PresElementBox.scss index 1e776384a..6ee190b82 100644 --- a/src/client/views/presentationview/PresElementBox.scss +++ b/src/client/views/presentationview/PresElementBox.scss @@ -3,6 +3,7 @@ $dark-blue: #5B9FDD; $light-background: #ececec; .presElementBox-item { + cursor: grab; display: grid; grid-template-columns: max-content max-content max-content max-content; background-color: #d5dce2; @@ -161,6 +162,7 @@ $light-background: #ececec; } .presElementBox-closeIcon { + cursor: pointer; position: absolute; border-radius: 100%; z-index: 300; @@ -177,6 +179,7 @@ $light-background: #ececec; } .presElementBox-expand { + cursor: pointer; position: absolute; border-radius: 100%; z-index: 300; @@ -193,6 +196,7 @@ $light-background: #ececec; } .presElementBox-expand-selected { + cursor: pointer; position: absolute; border-radius: 100%; right: 3px; diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx index 42b43b402..a25a8ee33 100644 --- a/src/client/views/presentationview/PresElementBox.tsx +++ b/src/client/views/presentationview/PresElementBox.tsx @@ -19,6 +19,7 @@ import { PresBox } from "../nodes/PresBox"; import { DocumentType } from "../../documents/DocumentTypes"; import { Tooltip } from "@material-ui/core"; import { DragManager } from "../../util/DragManager"; +import { CurrentUserUtils } from "../../util/CurrentUserUtils"; export const presSchema = createSchema({ presentationTargetDoc: Doc, @@ -58,111 +59,6 @@ export class PresElementBox extends ViewBoxBaseComponent { - e.stopPropagation(); - this.rootDoc.presHideTillShownButton = !this.rootDoc.presHideTillShownButton; - if (!this.rootDoc.presHideTillShownButton) { - if (this.indexInPres >= this.itemIndex && this.targetDoc) { - this.targetDoc.opacity = 1; - } - } else { - if (this.presStatus !== "edit" && this.indexInPres > this.itemIndex && this.targetDoc) { - this.targetDoc.opacity = 0; - } - } - } - - /** - * The function that is called on click to turn Hiding document after presented option on/off. - * It also makes sure that the option swithches from fade-after to this one, since both - * can't coexist. - */ - @action - onHideDocumentAfterPresentedClick = (e: React.MouseEvent) => { - e.stopPropagation(); - this.rootDoc.presHideAfterButton = !this.rootDoc.presHideAfterButton; - if (!this.rootDoc.presHideAfterButton) { - if (this.indexInPres <= this.itemIndex && this.targetDoc) { - this.targetDoc.opacity = 1; - } - } else { - if (this.rootDoc.presFadeButton) this.rootDoc.presFadeButton = false; - if (this.presStatus !== "edit" && this.indexInPres < this.itemIndex && this.targetDoc) { - this.targetDoc.opacity = 0; - } - } - } - - @action - progressivize = (e: React.MouseEvent) => { - e.stopPropagation(); - this.rootDoc.presProgressivize = !this.rootDoc.presProgressivize; - const rootTarget = Cast(this.rootDoc.presentationTargetDoc, Doc, null); - const docs = rootTarget.type === DocumentType.COL ? DocListCast(rootTarget[Doc.LayoutFieldKey(rootTarget)]) : - DocListCast(rootTarget[Doc.LayoutFieldKey(rootTarget) + "-annotations"]); - if (this.rootDoc.presProgressivize) { - rootTarget.currentFrame = 0; - CollectionFreeFormDocumentView.setupKeyframes(docs, docs.length, true); - rootTarget.lastFrame = docs.length - 1; - } - } - - /** - * The function that is called on click to turn fading document after presented option on/off. - * It also makes sure that the option swithches from hide-after to this one, since both - * can't coexist. - */ - @action - onFadeDocumentAfterPresentedClick = (e: React.MouseEvent) => { - e.stopPropagation(); - this.rootDoc.presFadeButton = !this.rootDoc.presFadeButton; - if (!this.rootDoc.presFadeButton) { - if (this.indexInPres <= this.itemIndex && this.targetDoc) { - this.targetDoc.opacity = 1; - } - } else { - this.rootDoc.presHideAfterButton = false; - if (this.presStatus !== "edit" && (this.indexInPres < this.itemIndex) && this.targetDoc) { - this.targetDoc.opacity = 0.5; - } - } - } - - /** - * The function that is called on click to turn navigation option of docs on/off. - */ - @action - onNavigateDocumentClick = (e: React.MouseEvent) => { - e.stopPropagation(); - this.rootDoc.presNavButton = !this.rootDoc.presNavButton; - if (this.rootDoc.presNavButton) { - this.rootDoc.presZoomButton = false; - if (this.itemIndex === this.indexInPres) { - this.props.focus(this.rootDoc); - } - } - } - - /** - * The function that is called on click to turn zoom option of docs on/off. - */ - @action - onZoomDocumentClick = (e: React.MouseEvent) => { - e.stopPropagation(); - - this.rootDoc.presZoomButton = !this.rootDoc.presZoomButton; - if (this.rootDoc.presZoomButton) { - this.rootDoc.presNavButton = false; - if (this.itemIndex === this.indexInPres) { - this.props.focus(this.rootDoc); - } - } - } /** * Returns a local transformed coordinate array for given coordinates. */ @@ -235,12 +131,11 @@ export class PresElementBox extends ViewBoxBaseComponent) => { - const element1 = document.elementFromPoint(e.clientX, e.clientY)?.parentElement; const element = e.target as any; e.stopPropagation(); e.preventDefault(); - if (element) { - if (PresBox.Instance._eleArray.includes(element)) { + if (element && !(e.ctrlKey || e.metaKey)) { + if (PresBox.Instance._eleArray.includes(this._itemRef.current!)) { setupMoveUpEvents(this, e, this.startDrag, emptyFunction, emptyFunction); } else { PresBox.Instance._selectedArray = []; @@ -303,8 +198,14 @@ export class PresElementBox extends ViewBoxBaseComponent { + if (CurrentUserUtils.propertiesWidth === 0) { + CurrentUserUtils.propertiesWidth = 250; + } + } + render() { - const treecontainer = this.props.ContainingCollectionDoc?._viewType === CollectionViewType.Tree; const className = "presElementBox-item" + (PresBox.Instance._selectedArray.includes(this.rootDoc) ? " presElementBox-active" : ""); const pbi = "presElementBox-interaction"; return !(this.rootDoc instanceof Doc) || this.targetDoc instanceof Promise ? (null) : ( @@ -329,6 +230,14 @@ export class PresElementBox extends ViewBoxBaseComponent { + this.toggleProperties(); + this.props.focus(this.rootDoc); + PresBox.Instance._eleArray = []; + PresBox.Instance._eleArray.push(this._itemRef.current!); + PresBox.Instance._dragArray = []; + PresBox.Instance._dragArray.push(this._dragRef.current!); + }} onPointerDown={this.headerDown} onPointerUp={this.headerUp} > @@ -357,14 +266,6 @@ export class PresElementBox extends ViewBoxBaseComponent
-
- - - - - - -
{this.renderEmbeddedInline}
); diff --git a/src/server/ApiManagers/UploadManager.ts b/src/server/ApiManagers/UploadManager.ts index bd8fe97eb..e088cd2c4 100644 --- a/src/server/ApiManagers/UploadManager.ts +++ b/src/server/ApiManagers/UploadManager.ts @@ -279,7 +279,7 @@ function delay(ms: number) { * * On failure, returns undefined. */ -async function captureYoutubeScreenshot(targetUrl: string){ +async function captureYoutubeScreenshot(targetUrl: string) { // const browser = await launch({ args: ['--no-sandbox', '--disable-setuid-sandbox'] }); // const page = await browser.newPage(); // // await page.setViewport({ width: 1920, height: 1080 }); -- cgit v1.2.3-70-g09d2