From 65940c176cca651bf4bfface9be5d86d49c881c6 Mon Sep 17 00:00:00 2001 From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com> Date: Tue, 20 Oct 2020 18:21:05 +0800 Subject: presBox updates for pull drag changes + renaming marquee options + fixes --- src/client/views/nodes/PresBox.scss | 1 + 1 file changed, 1 insertion(+) (limited to 'src/client/views/nodes/PresBox.scss') diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss index 9a8b861ba..961d1707b 100644 --- a/src/client/views/nodes/PresBox.scss +++ b/src/client/views/nodes/PresBox.scss @@ -56,6 +56,7 @@ $light-background: #ececec; letter-spacing: 0; display: flex; align-items: center; + justify-content: center; transition: 0.5s; } -- cgit v1.2.3-70-g09d2 From acf01146d0a0b77bec5add3d94ac5905bd9b5f1b Mon Sep 17 00:00:00 2001 From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com> Date: Sat, 24 Oct 2020 12:49:11 +0800 Subject: commits for merge - console + presBox + audio --- src/client/views/nodes/AudioBox.tsx | 1 + src/client/views/nodes/PresBox.scss | 2 ++ src/client/views/nodes/PresBox.tsx | 20 +++++++++++++------- 3 files changed, 16 insertions(+), 7 deletions(-) (limited to 'src/client/views/nodes/PresBox.scss') diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index cba65f663..ddcf49d07 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -149,6 +149,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent { + console.log("playLink", "Doc: " + doc.title); let link = false; !Doc.AreProtosEqual(doc, this.props.Document) && DocListCast(this.props.Document.links).forEach(l => { if (l.anchor1 === doc || l.anchor2 === doc) { diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss index 961d1707b..07cf63532 100644 --- a/src/client/views/nodes/PresBox.scss +++ b/src/client/views/nodes/PresBox.scss @@ -62,6 +62,8 @@ $light-background: #ececec; .toolbar-button.active { color: $light-blue; + background-color: white; + border-radius: 100%; } .toolbar-transitionButtons { diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index 47dd83d7b..82a0b6764 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -120,6 +120,7 @@ export class PresBox extends ViewBoxBaseComponent @computed get isPres(): boolean { document.removeEventListener("keydown", this.keyEvents, true); if (this.selectedDoc?.type === DocumentType.PRES) { + document.removeEventListener("keydown", this.keyEvents, true); document.addEventListener("keydown", this.keyEvents, true); return true; } @@ -143,6 +144,7 @@ export class PresBox extends ViewBoxBaseComponent this.layoutDoc.presStatus = PresStatus.Edit; this.layoutDoc._gridGap = 0; this.layoutDoc._yMargin = 0; + document.removeEventListener("keydown", this.keyEvents, true); document.addEventListener("keydown", this.keyEvents, true); this._presKeyEventsActive = true; this.turnOffEdit(true); @@ -152,6 +154,7 @@ export class PresBox extends ViewBoxBaseComponent updateCurrentPresentation = () => { Doc.UserDoc().activePresentation = this.rootDoc; + document.removeEventListener("keydown", this.keyEvents, true); document.addEventListener("keydown", this.keyEvents, true); this.selectPres(); PresBox.Instance = this; @@ -300,6 +303,8 @@ export class PresBox extends ViewBoxBaseComponent const openInTab = () => { collectionDocView ? collectionDocView.props.addDocTab(activeItem, "replace") : this.props.addDocTab(activeItem, "replace:left"); }; + const tabMap = CollectionDockingView.Instance.tabMap; + console.log(tabMap); // If openDocument is selected then it should open the document for the user if (activeItem.openDocument) { const presStatus = this.rootDoc.presStatus; @@ -639,7 +644,7 @@ export class PresBox extends ViewBoxBaseComponent selectElement = (doc: Doc) => { this.gotoDocument(this.childDocs.indexOf(doc), NumCast(this.itemIndex)); if (doc.presPinView || doc.presentationTargetDoc === this.layoutDoc.presCollection) setTimeout(() => this.updateCurrentPresentation(), 0); - else this.selectPres(); + else this.updateCurrentPresentation(); } //Command click @@ -768,6 +773,7 @@ export class PresBox extends ViewBoxBaseComponent @computed get order() { const order: JSX.Element[] = []; const docs: Doc[] = []; + const number: number[] = []; this.childDocs.filter(doc => Cast(doc.presentationTargetDoc, Doc, null)).forEach((doc, index) => { const tagDoc = Cast(doc.presentationTargetDoc, Doc, null); const srcContext = Cast(tagDoc.context, Doc, null); @@ -780,7 +786,7 @@ export class PresBox extends ViewBoxBaseComponent if (docs.includes(tagDoc)) { docs.push(tagDoc); order.push( -
+
{index + 1}
); } else { @@ -1820,13 +1826,13 @@ export class PresBox extends ViewBoxBaseComponent const isMini: boolean = this.toolbarWidth <= 100; const presKeyEvents: boolean = (this.isPres && this._presKeyEventsActive && this.rootDoc === Doc.UserDoc().activePresentation); return (mode === CollectionViewType.Carousel3D) ? (null) : ( -
+
{/*
{"Add new slide"}
}>
this.newDocumentTools = !this.newDocumentTools)}>
*/}
{"View paths"}
}> -
1 ? 1 : 0.3, color: this._pathBoolean ? '#AEDDF8' : 'white', width: isMini ? "100%" : undefined }} className={"toolbar-button"} onClick={this.childDocs.length > 1 ? this.viewPaths : undefined}> +
1 ? 1 : 0.3, color: this._pathBoolean ? '#5B9FDD' : 'white', width: isMini ? "100%" : undefined }} className={"toolbar-button"} onClick={this.childDocs.length > 1 ? this.viewPaths : undefined}>
@@ -1835,7 +1841,7 @@ export class PresBox extends ViewBoxBaseComponent
{this._expandBoolean ? "Minimize all" : "Expand all"}
}>
{/* */} @@ -1844,12 +1850,12 @@ export class PresBox extends ViewBoxBaseComponent
{presKeyEvents ? "Key are active" : "Keys are not active - click anywhere on the presentation trail to activate keys"}
}>
- +
{propTitle}
}>
- 0 ? '#AEDDF8' : 'white' }} /> + 0 ? '#5B9FDD' : 'white' }} />
-- cgit v1.2.3-70-g09d2 From 3def219d20179486fe3427c957f680e5d1d705df Mon Sep 17 00:00:00 2001 From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com> Date: Sun, 1 Nov 2020 22:54:08 +0800 Subject: removed console.log + click to return to slide 1 --- .../collectionFreeForm/CollectionFreeFormView.tsx | 25 ------------------- src/client/views/nodes/PresBox.scss | 1 + src/client/views/nodes/PresBox.tsx | 29 ++++++++-------------- 3 files changed, 12 insertions(+), 43 deletions(-) (limited to 'src/client/views/nodes/PresBox.scss') diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 6f8c13794..eb278681d 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -1657,30 +1657,6 @@ class CollectionFreeFormViewPannableContents extends React.Component; } - @computed get presPathsOutsideCollection() { - const presPaths = "presPaths" + (this.props.presPaths ? "" : "-hidden"); - return !PresBox.Instance || !this.props.presPaths ? (null) : <> -
{PresBox.Instance.order}
- - - - - - - - - - - - - {PresBox.Instance.paths} - - ; - } - render() { // trace(); const freeformclass = "collectionfreeformview" + (this.props.viewDefDivClick ? "-viewDef" : "-none"); @@ -1708,7 +1684,6 @@ class CollectionFreeFormViewPannableContents extends React.Component - {/*
{this.presPathsOutsideCollection}
*/} ); } } \ No newline at end of file diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss index 07cf63532..a89bc73c6 100644 --- a/src/client/views/nodes/PresBox.scss +++ b/src/client/views/nodes/PresBox.scss @@ -1000,6 +1000,7 @@ $light-background: #ececec; transition: all 0.2s; .presPanel-button-text { + cursor: pointer; display: flex; height: 20; width: max-content; diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index c96fad28c..a31e92807 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -28,6 +28,7 @@ import { AudioBox } from "./AudioBox"; import { CollectionFreeFormDocumentView } from "./CollectionFreeFormDocumentView"; import { FieldView, FieldViewProps } from './FieldView'; import "./PresBox.scss"; +import Color = require("color"); export enum PresMovement { Zoom = "zoom", @@ -746,8 +747,7 @@ export class PresBox extends ViewBoxBaseComponent break; case "Down": case "ArrowDown": case "Right": case "ArrowRight": - if (this.itemIndex >= this.childDocs.length - 1) return; - if (e.shiftKey) { // TODO: update to work properly + if (e.shiftKey && this.itemIndex < this.childDocs.length - 1) { // TODO: update to work properly this.rootDoc._itemIndex = NumCast(this.rootDoc._itemIndex) + 1; this._selectedArray.set(this.childDocs[this.rootDoc._itemIndex], undefined); } else { @@ -758,8 +758,7 @@ export class PresBox extends ViewBoxBaseComponent break; case "Up": case "ArrowUp": case "Left": case "ArrowLeft": - if (this.itemIndex === 0) return; - if (e.shiftKey) { // TODO: update to work properly + if (e.shiftKey && this.itemIndex !== 0) { // TODO: update to work properly this.rootDoc._itemIndex = NumCast(this.rootDoc._itemIndex) - 1; this._selectedArray.set(this.childDocs[this.rootDoc._itemIndex], undefined); } else { @@ -823,7 +822,6 @@ export class PresBox extends ViewBoxBaseComponent const gap = 2; if (presCollection === srcContext) { // Case A: Document is contained within the collection - console.log(`-------Case A: ${index}-------`); if (docs.includes(tagDoc)) { const prevOccurances: number = this.getAllIndexes(docs, tagDoc).length; docs.push(tagDoc); @@ -846,7 +844,6 @@ export class PresBox extends ViewBoxBaseComponent } } else if (doc.presPinView && presCollection === tagDoc && dv) { // Case B: Document is presPinView and is presCollection - console.log(`-------Case B: ${index}-------`); const scale: number = 1 / NumCast(doc.presPinViewScale); const height: number = dv.props.PanelHeight() * scale; const width: number = dv.props.PanelWidth() * scale; @@ -868,14 +865,6 @@ export class PresBox extends ViewBoxBaseComponent
); - } else { - // Case C: Document is not contained within presCollection - console.log(`-------Case C: ${index}-------`); - docs.push(tagDoc); - order.push( -
-
{index + 1}
-
); } }); return order; @@ -891,15 +880,16 @@ export class PresBox extends ViewBoxBaseComponent */ @computed get paths() { let pathPoints = ""; + const presCollection = Cast(this.rootDoc.presCollection, Doc, null); this.childDocs.forEach((doc, index) => { const tagDoc = Cast(doc.presentationTargetDoc, Doc, null); const srcContext = Cast(tagDoc?.context, Doc, null); - if (tagDoc && this.rootDoc.presCollection === srcContext) { + if (tagDoc && presCollection === srcContext) { const n1x = NumCast(tagDoc.x) + (NumCast(tagDoc._width) / 2); const n1y = NumCast(tagDoc.y) + (NumCast(tagDoc._height) / 2); if (index = 0) pathPoints = n1x + "," + n1y; else pathPoints = pathPoints + " " + n1x + "," + n1y; - } else if (doc.presPinView) { + } else if (doc.presPinView && presCollection === tagDoc) { const n1x = NumCast(doc.presPinViewX); const n1y = NumCast(doc.presPinViewY); if (index = 0) pathPoints = n1x + "," + n1y; @@ -2040,7 +2030,10 @@ export class PresBox extends ViewBoxBaseComponent
{this.layoutDoc.presStatus === PresStatus.Autoplay ? "Pause" : "Autoplay"}
}>
{ this.next(); if (this._presTimer) { clearTimeout(this._presTimer); this.layoutDoc.presStatus = PresStatus.Manual; } }}>
-
250 ? "inline-flex" : "none" }}> +
this.gotoDocument(0)} + style={{ display: this.props.PanelWidth() > 250 ? "inline-flex" : "none" }}> Slide {this.itemIndex + 1} / {this.childDocs.length} {this.playButtonFrames}
@@ -2074,7 +2067,7 @@ export class PresBox extends ViewBoxBaseComponent
{this.layoutDoc.presStatus === PresStatus.Autoplay ? "Pause" : "Autoplay"}
}>
{ this.next(); if (this._presTimer) { clearTimeout(this._presTimer); this.layoutDoc.presStatus = PresStatus.Manual; } }}>
-
+
this.gotoDocument(0)}> Slide {this.itemIndex + 1} / {this.childDocs.length} {this.playButtonFrames}
-- cgit v1.2.3-70-g09d2 From 894454b283b513689b8758a752a73bdd90393f0c Mon Sep 17 00:00:00 2001 From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com> Date: Fri, 6 Nov 2020 23:18:17 +0800 Subject: Cleaned up code (1) Updated to use enums for PresEffect (Directions) and PresColor (2) Made update pres selection work with applying to selected items (3) Removed Effects + Movement from when targetDoc === presCollection --- .../views/nodes/CollectionFreeFormDocumentView.tsx | 22 +-- src/client/views/nodes/PresBox.scss | 1 + src/client/views/nodes/PresBox.tsx | 194 +++++++++++++-------- 3 files changed, 133 insertions(+), 84 deletions(-) (limited to 'src/client/views/nodes/PresBox.scss') diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index 7d5c224bd..c87239ee9 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -16,7 +16,7 @@ import { ComputedField } from "../../../fields/ScriptField"; import { listSpec } from "../../../fields/Schema"; import { DocumentType } from "../../documents/DocumentTypes"; import { Zoom, Fade, Flip, Rotate, Bounce, Roll, LightSpeed } from 'react-reveal'; -import { PresBox } from "./PresBox"; +import { PresBox, PresEffect } from "./PresBox"; import { InkingStroke } from "../InkingStroke"; export interface CollectionFreeFormDocumentViewProps extends DocumentViewProps { @@ -212,23 +212,23 @@ export class CollectionFreeFormDocumentView extends DocComponent; if (PresBox.Instance && this.layoutDoc === PresBox.Instance.childDocs[PresBox.Instance.itemIndex]?.presentationTargetDoc) { const effectProps = { - left: this.layoutDoc.presEffectDirection === 'left', - right: this.layoutDoc.presEffectDirection === 'right', - top: this.layoutDoc.presEffectDirection === 'top', - bottom: this.layoutDoc.presEffectDirection === 'bottom', + left: this.layoutDoc.presEffectDirection === PresEffect.Left, + right: this.layoutDoc.presEffectDirection === PresEffect.Right, + top: this.layoutDoc.presEffectDirection === PresEffect.Top, + bottom: this.layoutDoc.presEffectDirection === PresEffect.Bottom, opposite: true, delay: this.layoutDoc.presTransition, // when: this.layoutDoc === PresBox.Instance.childDocs[PresBox.Instance.itemIndex]?.presentationTargetDoc, }; switch (this.layoutDoc.presEffect) { case "Zoom": return ({node}); break; - case "Fade": return ({node}); break; - case "Flip": return ({node}); break; - case "Rotate": return ({node}); break; - case "Bounce": return ({node}); break; - case "Roll": return ({node}); break; + case PresEffect.Fade: return ({node}); break; + case PresEffect.Flip: return ({node}); break; + case PresEffect.Rotate: return ({node}); break; + case PresEffect.Bounce: return ({node}); break; + case PresEffect.Roll: return ({node}); break; case "LightSpeed": return ({node}); break; - case "None": return node; break; + case PresEffect.None: return node; break; default: return node; break; } } else { diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss index a89bc73c6..5f4f571f3 100644 --- a/src/client/views/nodes/PresBox.scss +++ b/src/client/views/nodes/PresBox.scss @@ -1053,6 +1053,7 @@ $light-background: #ececec; .presPanel-button:hover { background-color: #5a5a5a; + transform: scale(1.2); } .presPanel-button-text:hover { diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index 190af34b9..9c263148b 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -11,7 +11,7 @@ import { List } from "../../../fields/List"; import { PrefetchProxy } from "../../../fields/Proxy"; import { listSpec, makeInterface } from "../../../fields/Schema"; import { ScriptField } from "../../../fields/ScriptField"; -import { Cast, NumCast, StrCast } from "../../../fields/Types"; +import { BoolCast, Cast, NumCast, StrCast } from "../../../fields/Types"; import { returnFalse, returnOne, returnZero } from "../../../Utils"; import { Docs } from "../../documents/Documents"; import { DocumentType } from "../../documents/DocumentTypes"; @@ -38,12 +38,17 @@ export enum PresMovement { } export enum PresEffect { - Fade = "Fade", + Fade = "Fade in", Flip = "Flip", Rotate = "Rotate", Bounce = "Bounce", Roll = "Roll", None = "None", + Left = "left", + Right = "right", + Center = "center", + Top = "top", + Bottom = "bottom" } enum PresStatus { @@ -52,7 +57,7 @@ enum PresStatus { Edit = "edit" } -enum PresColors { +enum PresColor { LightBlue = "#AEDDF8", DarkBlue = "#5B9FDD", LightBackground = "#ececec", @@ -421,20 +426,23 @@ export class PresBox extends ViewBoxBaseComponent if (tagDoc) tagDoc.opacity = 1; const itemIndexes: number[] = this.getAllIndexes(this.tagDocs, tagDoc); const curInd: number = itemIndexes.indexOf(index); - if (itemIndexes.length > 1 && curDoc.presHideBefore && curInd !== 0) { } - else if (curDoc.presHideBefore) { - if (index > this.itemIndex) { - tagDoc.opacity = 0; - } else if (!curDoc.presHideAfter) { - tagDoc.opacity = 1; + if (tagDoc === this.layoutDoc.presCollection) { tagDoc.opacity = 1 } + else { + if (itemIndexes.length > 1 && curDoc.presHideBefore && curInd !== 0) { } + else if (curDoc.presHideBefore) { + if (index > this.itemIndex) { + tagDoc.opacity = 0; + } else if (!curDoc.presHideAfter) { + tagDoc.opacity = 1; + } } - } - if (itemIndexes.length > 1 && curDoc.presHideAfter && curInd !== (itemIndexes.length - 1)) { } - else if (curDoc.presHideAfter) { - if (index < this.itemIndex) { - tagDoc.opacity = 0; - } else if (!curDoc.presHideBefore) { - tagDoc.opacity = 1; + if (itemIndexes.length > 1 && curDoc.presHideAfter && curInd !== (itemIndexes.length - 1)) { } + else if (curDoc.presHideAfter) { + if (index < this.itemIndex) { + tagDoc.opacity = 0; + } else if (!curDoc.presHideBefore) { + tagDoc.opacity = 1; + } } } }); @@ -990,6 +998,32 @@ export class PresBox extends ViewBoxBaseComponent }); } + @undoBatch + @action + updateEffectDirection = (effect: any, all?: boolean) => { + const array: any[] = all ? this.childDocs : Array.from(this._selectedArray.keys()); + array.forEach((doc) => { + const tagDoc = Cast(doc.presentationTargetDoc, Doc, null); + switch (effect) { + case PresEffect.Left: + tagDoc.presEffectDirection = PresEffect.Left; + break; + case PresEffect.Right: + tagDoc.presEffectDirection = PresEffect.Right; + break; + case PresEffect.Top: + tagDoc.presEffectDirection = PresEffect.Top; + break; + case PresEffect.Bottom: + tagDoc.presEffectDirection = PresEffect.Bottom; + break; + case PresEffect.Center: default: + tagDoc.presEffectDirection = PresEffect.Center; + break; + } + }); + } + @undoBatch @action updateEffect = (effect: any, all?: boolean) => { @@ -1024,6 +1058,8 @@ export class PresBox extends ViewBoxBaseComponent @computed get transitionDropdown() { const activeItem: Doc = this.activeItem; const targetDoc: Doc = this.targetDoc; + const isPresCollection: boolean = (targetDoc === this.layoutDoc.presCollection); + const isPinWithView: boolean = BoolCast(activeItem.presPinView); if (activeItem && targetDoc) { const transitionSpeed = activeItem.presTransition ? NumCast(activeItem.presTransition) / 1000 : 0.5; let duration = activeItem.presDuration ? NumCast(activeItem.presDuration) / 1000 : 2; @@ -1034,16 +1070,22 @@ export class PresBox extends ViewBoxBaseComponent
e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onClick={action(e => { e.stopPropagation(); this.openMovementDropdown = false; this.openEffectDropdown = false; })}>
Movement -
{ e.stopPropagation(); this.openMovementDropdown = !this.openMovementDropdown; })} style={{ borderBottomLeftRadius: this.openMovementDropdown ? 0 : 5, border: this.openMovementDropdown ? 'solid 2px #5B9FDD' : 'solid 1px black' }}> - {this.setMovementName(activeItem.presMovement, activeItem)} - -
e.stopPropagation()} style={{ display: this.openMovementDropdown ? "grid" : "none" }}> -
e.stopPropagation()} onClick={() => this.updateMovement(PresMovement.None)}>None
-
e.stopPropagation()} onClick={() => this.updateMovement(PresMovement.Zoom)}>Pan {"&"} Zoom
-
e.stopPropagation()} onClick={() => this.updateMovement(PresMovement.Pan)}>Pan
-
e.stopPropagation()} onClick={() => this.updateMovement(PresMovement.Jump)}>Jump cut
+ {isPresCollection || (isPresCollection && isPinWithView) ? +
+ {this.scrollable ? "Scroll to pinned view" : !isPinWithView ? "No movement" : "Pan & Zoom to pinned view"}
-
+ : +
{ e.stopPropagation(); this.openMovementDropdown = !this.openMovementDropdown; })} style={{ borderBottomLeftRadius: this.openMovementDropdown ? 0 : 5, border: this.openMovementDropdown ? `solid 2px ${PresColor.DarkBlue}` : 'solid 1px black' }}> + {this.setMovementName(activeItem.presMovement, activeItem)} + +
e.stopPropagation()} style={{ display: this.openMovementDropdown ? "grid" : "none" }}> +
e.stopPropagation()} onClick={() => this.updateMovement(PresMovement.None)}>None
+
e.stopPropagation()} onClick={() => this.updateMovement(PresMovement.Zoom)}>Pan {"&"} Zoom
+
e.stopPropagation()} onClick={() => this.updateMovement(PresMovement.Pan)}>Pan
+
e.stopPropagation()} onClick={() => this.updateMovement(PresMovement.Jump)}>Jump cut
+
+
+ }
Transition Speed
@@ -1078,9 +1120,9 @@ export class PresBox extends ViewBoxBaseComponent
Visibility {"&"} Duration
-
{"Hide before presented"}
}>
this.updateHideBefore(activeItem)}>Hide before
 -
{"Hide after presented"}
}>
this.updateHideAfter(activeItem)}>Hide after
 -
{"Open document in a new tab"}
}>
this.updateOpenDoc(activeItem)}>Open
 + {isPresCollection ? (null) :
{"Hide before presented"}
}>
this.updateHideBefore(activeItem)}>Hide before
} + {isPresCollection ? (null) :
{"Hide after presented"}
}>
this.updateHideAfter(activeItem)}>Hide after
} +
{"Open document in a new tab"}
}>
this.updateOpenDoc(activeItem)}>Open
Slide Duration
@@ -1111,11 +1153,11 @@ export class PresBox extends ViewBoxBaseComponent
Long
-
+ {isPresCollection ? (null) :
Effects -
{ e.stopPropagation(); this.openEffectDropdown = !this.openEffectDropdown; })} style={{ borderBottomLeftRadius: this.openEffectDropdown ? 0 : 5, border: this.openEffectDropdown ? 'solid 2px #5B9FDD' : 'solid 1px black' }}> +
{ e.stopPropagation(); this.openEffectDropdown = !this.openEffectDropdown; })} style={{ borderBottomLeftRadius: this.openEffectDropdown ? 0 : 5, border: this.openEffectDropdown ? `solid 2px ${PresColor.DarkBlue}` : 'solid 1px black' }}> {effect} - +
e.stopPropagation()}>
e.stopPropagation()} onClick={() => this.updateEffect(PresEffect.None)}>None
e.stopPropagation()} onClick={() => this.updateEffect(PresEffect.Fade)}>Fade In
@@ -1132,13 +1174,13 @@ export class PresBox extends ViewBoxBaseComponent
-
{"Enter from left"}
}>
targetDoc.presEffectDirection = 'left')}>
 -
{"Enter from right"}
}>
targetDoc.presEffectDirection = 'right')}>
 -
{"Enter from top"}
}>
targetDoc.presEffectDirection = 'top')}>
 -
{"Enter from bottom"}
}>
targetDoc.presEffectDirection = 'bottom')}>
 -
{"Enter from center"}
}>
targetDoc.presEffectDirection = false)}>
 +
{"Enter from left"}
}>
this.updateEffectDirection(PresEffect.Left)}>
 +
{"Enter from right"}
}>
this.updateEffectDirection(PresEffect.Right)}>
 +
{"Enter from top"}
}>
this.updateEffectDirection(PresEffect.Top)}>
 +
{"Enter from bottom"}
}>
this.updateEffectDirection(PresEffect.Bottom)}>
 +
{"Enter from center"}
}>
this.updateEffectDirection(PresEffect.Center)}>
-
+
}
this.applyTo(this.childDocs)}> Apply to all @@ -1168,13 +1210,13 @@ export class PresBox extends ViewBoxBaseComponent const targetDoc: Doc = this.targetDoc; this.updateMovement(activeItem.presMovement, true); this.updateEffect(targetDoc.presEffect, true); + this.updateEffectDirection(targetDoc.presEffectDirection, true) array.forEach((doc) => { const curDoc = Cast(doc, Doc, null); const tagDoc = Cast(curDoc.presentationTargetDoc, Doc, null); if (tagDoc && targetDoc) { curDoc.presTransition = activeItem.presTransition; curDoc.presDuration = activeItem.presDuration; - tagDoc.presEffectDirection = targetDoc.presEffectDirection; curDoc.presHideBefore = activeItem.presHideBefore; curDoc.presHideAfter = activeItem.presHideAfter; } @@ -1190,10 +1232,10 @@ export class PresBox extends ViewBoxBaseComponent
e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}>
-
activeItem.playAuto = !activeItem.playAuto}>Play automatically
-
activeItem.playAuto = !activeItem.playAuto}>Play on next
+
activeItem.playAuto = !activeItem.playAuto}>Play automatically
+
activeItem.playAuto = !activeItem.playAuto}>Play on next
- {/* {targetDoc.type === DocumentType.VID ?
activeItem.presVidFullScreen = !activeItem.presVidFullScreen}>Full screen
: (null)} */} + {/* {targetDoc.type === DocumentType.VID ?
activeItem.presVidFullScreen = !activeItem.presVidFullScreen}>Full screen
: (null)} */} {targetDoc.type === DocumentType.AUDIO ?
Start time
@@ -1214,7 +1256,7 @@ export class PresBox extends ViewBoxBaseComponent
: (null)} {this.panable || this.scrollable || this.targetDoc.type === DocumentType.COMPARISON ? 'Pinned view' : (null)}
-
{activeItem.presPinView ? "Turn off pin with view" : "Turn on pin with view"}
}>
{activeItem.presPinView ? "Turn off pin with view" : "Turn on pin with view"}
}>
{ activeItem.presPinView = !activeItem.presPinView; targetDoc.presPinView = activeItem.presPinView; @@ -1315,15 +1357,15 @@ export class PresBox extends ViewBoxBaseComponent
e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}>
-
{ this.layout = 'blank'; this.createNewSlide(this.layout); })} /> -
{ this.layout = 'title'; this.createNewSlide(this.layout); })}> +
{ this.layout = 'blank'; this.createNewSlide(this.layout); })} /> +
{ this.layout = 'title'; this.createNewSlide(this.layout); })}>
Title
Subtitle
-
{ this.layout = 'header'; this.createNewSlide(this.layout); })}> +
{ this.layout = 'header'; this.createNewSlide(this.layout); })}>
Section header
-
{ this.layout = 'content'; this.createNewSlide(this.layout); })}> +
{ this.layout = 'content'; this.createNewSlide(this.layout); })}>
Title
Text goes here
@@ -1355,26 +1397,26 @@ export class PresBox extends ViewBoxBaseComponent
Choose type:
-
this.addFreeform = !this.addFreeform)}>Text
-
this.addFreeform = !this.addFreeform)}>Freeform
+
this.addFreeform = !this.addFreeform)}>Text
+
this.addFreeform = !this.addFreeform)}>Freeform
Preset layouts:
-
this.layout = 'blank')} /> -
this.layout = 'title')}> +
this.layout = 'blank')} /> +
this.layout = 'title')}>
Title
Subtitle
-
this.layout = 'header')}> +
this.layout = 'header')}>
Section header
-
this.layout = 'content')}> +
this.layout = 'content')}>
Title
Text goes here
-
this.layout = 'twoColumns')}> +
this.layout = 'twoColumns')}>
Title
Column one text
Column two text
@@ -1533,8 +1575,8 @@ export class PresBox extends ViewBoxBaseComponent {/*
{this.stringType} selected
-
Contents
-
Edit
+
Contents
+
Edit
Active text color
@@ -1549,12 +1591,12 @@ export class PresBox extends ViewBoxBaseComponent
{this.viewedColorPicker}
-
Zoom
-
Edit
+
Zoom
+
Edit
-
Scroll
-
Edit
+
Scroll
+
Edit
*/}
@@ -1564,7 +1606,7 @@ export class PresBox extends ViewBoxBaseComponent
{ e.stopPropagation(); this.prevKeyframe(targetDoc, activeItem); }}>
-
targetDoc.editing = !targetDoc.editing)} > {NumCast(targetDoc._currentFrame)}
@@ -1578,7 +1620,7 @@ export class PresBox extends ViewBoxBaseComponent {this.frameListHeader} {this.frameList}
-
console.log(" TODO: play frames")}>Play
+
console.log(" TODO: play frames")}>Play
@@ -1794,7 +1836,7 @@ export class PresBox extends ViewBoxBaseComponent tags.push(
{this.checkMovementLists(doc, doc["x-indexed"], doc["y-indexed"])}
); } tags.push( -
{ if (NumCast(targetDoc._currentFrame) < NumCast(doc.appearFrame)) doc.opacity = 0; }} onPointerOver={() => { if (NumCast(targetDoc._currentFrame) < NumCast(doc.appearFrame)) doc.opacity = 0.5; }} onClick={e => { this.toggleDisplayMovement(doc); e.stopPropagation(); }} style={{ backgroundColor: doc.displayMovement ? "#aedff8" : "#c8c8c8", top: NumCast(doc.y), left: NumCast(doc.x) }}> +
{ if (NumCast(targetDoc._currentFrame) < NumCast(doc.appearFrame)) doc.opacity = 0; }} onPointerOver={() => { if (NumCast(targetDoc._currentFrame) < NumCast(doc.appearFrame)) doc.opacity = 0.5; }} onClick={e => { this.toggleDisplayMovement(doc); e.stopPropagation(); }} style={{ backgroundColor: doc.displayMovement ? PresColor.LightBlue : "#c8c8c8", top: NumCast(doc.y), left: NumCast(doc.x) }}>
{ e.stopPropagation(); this.prevAppearFrame(doc, index); }} />
{doc.appearFrame}
{ e.stopPropagation(); this.nextAppearFrame(doc, index); }} />
@@ -1884,7 +1926,7 @@ export class PresBox extends ViewBoxBaseComponent
*/}
{"View paths"}
}> -
1 ? 1 : 0.3, color: this._pathBoolean ? PresColors.DarkBlue : 'white', width: isMini ? "100%" : undefined }} className={"toolbar-button"} onClick={this.childDocs.length > 1 ? this.viewPaths : undefined}> +
1 ? 1 : 0.3, color: this._pathBoolean ? PresColor.DarkBlue : 'white', width: isMini ? "100%" : undefined }} className={"toolbar-button"} onClick={this.childDocs.length > 1 ? this.viewPaths : undefined}>
@@ -1901,12 +1943,12 @@ export class PresBox extends ViewBoxBaseComponent
*/}
{presKeyEvents ? "Keys are active" : "Keys are not active - click anywhere on the presentation trail to activate keys"}
}>
- +
{propTitle}
}>
- 0 ? PresColors.DarkBlue : 'white' }} /> + 0 ? PresColor.DarkBlue : 'white' }} />
@@ -2033,14 +2075,17 @@ export class PresBox extends ViewBoxBaseComponent } @computed get playButtons() { + const presEnd: boolean = !this.layoutDoc.presLoop && (this.itemIndex === this.childDocs.length - 1); + const presStart: boolean = !this.layoutDoc.presLoop && (this.itemIndex === 0); // Case 1: There are still other frames and should go through all frames before going to next slide return (
-
{"Loop"}
}>
this.layoutDoc.presLoop = !this.layoutDoc.presLoop}>
 +
{"Loop"}
}>
this.layoutDoc.presLoop = !this.layoutDoc.presLoop}>
-
{ this.back(); if (this._presTimer) { clearTimeout(this._presTimer); this.layoutDoc.presStatus = PresStatus.Manual; } }}>
+
{ this.back(); if (this._presTimer) { clearTimeout(this._presTimer); this.layoutDoc.presStatus = PresStatus.Manual; } }}>
{this.layoutDoc.presStatus === PresStatus.Autoplay ? "Pause" : "Autoplay"}
}>
 -
{ this.next(); if (this._presTimer) { clearTimeout(this._presTimer); this.layoutDoc.presStatus = PresStatus.Manual; } }}>
+
{ this.next(); if (this._presTimer) { clearTimeout(this._presTimer); this.layoutDoc.presStatus = PresStatus.Manual; } }}>
+
{"Click to return to 1st slide"}
}>
this.gotoDocument(0)}>1
this.gotoDocument(0)} @@ -2069,16 +2114,19 @@ export class PresBox extends ViewBoxBaseComponent this.childDocs.slice(); const mode = StrCast(this.rootDoc._viewType) as CollectionViewType; const presKeyEvents: boolean = (this.isPres && this._presKeyEventsActive && this.rootDoc === Doc.UserDoc().activePresentation); + const presEnd: boolean = !this.layoutDoc.presLoop && (this.itemIndex === this.childDocs.length - 1); + const presStart: boolean = !this.layoutDoc.presLoop && (this.itemIndex === 0); return CurrentUserUtils.OverlayDocs.includes(this.rootDoc) ?
-
-
{"Loop"}
}>
this.layoutDoc.presLoop = !this.layoutDoc.presLoop}>
 +
+
{"Loop"}
}>
this.layoutDoc.presLoop = !this.layoutDoc.presLoop}>
-
{ this.back(); if (this._presTimer) { clearTimeout(this._presTimer); this.layoutDoc.presStatus = PresStatus.Manual; } }}>
+
{ this.back(); if (this._presTimer) { clearTimeout(this._presTimer); this.layoutDoc.presStatus = PresStatus.Manual; } }}>
{this.layoutDoc.presStatus === PresStatus.Autoplay ? "Pause" : "Autoplay"}
}>
 -
{ this.next(); if (this._presTimer) { clearTimeout(this._presTimer); this.layoutDoc.presStatus = PresStatus.Manual; } }}>
+
{ this.next(); if (this._presTimer) { clearTimeout(this._presTimer); this.layoutDoc.presStatus = PresStatus.Manual; } }}>
-
this.gotoDocument(0)}> +
{"Click to return to 1st slide"}
}>
this.gotoDocument(0)}>1
 +
Slide {this.itemIndex + 1} / {this.childDocs.length} {this.playButtonFrames}
-- cgit v1.2.3-70-g09d2 From 70d6aebaa5187332a6593a87aede54cd5d47a757 Mon Sep 17 00:00:00 2001 From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com> Date: Sat, 7 Nov 2020 00:19:29 +0800 Subject: Made pres. trails *more compatible with dark mode * not fully compatible - but much better in the pres. properties --- src/client/views/nodes/PresBox.scss | 3 ++- src/client/views/nodes/PresBox.tsx | 22 +++++++++++----------- 2 files changed, 13 insertions(+), 12 deletions(-) (limited to 'src/client/views/nodes/PresBox.scss') diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss index 5f4f571f3..de2aee8fa 100644 --- a/src/client/views/nodes/PresBox.scss +++ b/src/client/views/nodes/PresBox.scss @@ -131,7 +131,6 @@ $light-background: #ececec; position: relative; display: inline; font-family: Roboto; - color: black; z-index: 100; transition: 0.7s; @@ -512,6 +511,7 @@ $light-background: #ececec; background-color: $light-background; border: solid 1px rgba(0, 0, 0, 0.5); display: flex; + color: black; margin-top: 5px; margin-bottom: 5px; border-radius: 5px; @@ -572,6 +572,7 @@ $light-background: #ececec; border-radius: 5px; font-size: 10; height: 25; + color: black; padding-left: 5px; align-items: center; margin-top: 5px; diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index 9c263148b..52e09a469 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -1159,12 +1159,12 @@ export class PresBox extends ViewBoxBaseComponent {effect}
e.stopPropagation()}> -
e.stopPropagation()} onClick={() => this.updateEffect(PresEffect.None)}>None
-
e.stopPropagation()} onClick={() => this.updateEffect(PresEffect.Fade)}>Fade In
-
e.stopPropagation()} onClick={() => this.updateEffect(PresEffect.Flip)}>Flip
-
e.stopPropagation()} onClick={() => this.updateEffect(PresEffect.Rotate)}>Rotate
-
e.stopPropagation()} onClick={() => this.updateEffect(PresEffect.Bounce)}>Bounce
-
e.stopPropagation()} onClick={() => this.updateEffect(PresEffect.Roll)}>Roll
+
e.stopPropagation()} onClick={() => this.updateEffect(PresEffect.None)}>None
+
e.stopPropagation()} onClick={() => this.updateEffect(PresEffect.Fade)}>Fade In
+
e.stopPropagation()} onClick={() => this.updateEffect(PresEffect.Flip)}>Flip
+
e.stopPropagation()} onClick={() => this.updateEffect(PresEffect.Rotate)}>Rotate
+
e.stopPropagation()} onClick={() => this.updateEffect(PresEffect.Bounce)}>Bounce
+
e.stopPropagation()} onClick={() => this.updateEffect(PresEffect.Roll)}>Roll
@@ -1174,11 +1174,11 @@ export class PresBox extends ViewBoxBaseComponent
-
{"Enter from left"}
}>
this.updateEffectDirection(PresEffect.Left)}>
 -
{"Enter from right"}
}>
this.updateEffectDirection(PresEffect.Right)}>
 -
{"Enter from top"}
}>
this.updateEffectDirection(PresEffect.Top)}>
 -
{"Enter from bottom"}
}>
this.updateEffectDirection(PresEffect.Bottom)}>
 -
{"Enter from center"}
}>
this.updateEffectDirection(PresEffect.Center)}>
 +
{"Enter from left"}
}>
this.updateEffectDirection(PresEffect.Left)}>
 +
{"Enter from right"}
}>
this.updateEffectDirection(PresEffect.Right)}>
 +
{"Enter from top"}
}>
this.updateEffectDirection(PresEffect.Top)}>
 +
{"Enter from bottom"}
}>
this.updateEffectDirection(PresEffect.Bottom)}>
 +
{"Enter from center"}
}>
this.updateEffectDirection(PresEffect.Center)}>
}
-- cgit v1.2.3-70-g09d2