aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/DocumentButtonBar.tsx46
-rw-r--r--src/client/views/PropertiesView.tsx6
-rw-r--r--src/client/views/collections/CollectionMenu.tsx9
-rw-r--r--src/client/views/collections/CollectionStackingView.tsx6
-rw-r--r--src/client/views/collections/TabDocView.tsx2
-rw-r--r--src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx2
-rw-r--r--src/client/views/collections/collectionFreeForm/MarqueeView.tsx1
-rw-r--r--src/client/views/nodes/PresBox.scss1
-rw-r--r--src/client/views/nodes/PresBox.tsx313
-rw-r--r--src/client/views/presentationview/PresElementBox.scss88
-rw-r--r--src/client/views/presentationview/PresElementBox.tsx92
11 files changed, 394 insertions, 172 deletions
diff --git a/src/client/views/DocumentButtonBar.tsx b/src/client/views/DocumentButtonBar.tsx
index 076502042..ed248c473 100644
--- a/src/client/views/DocumentButtonBar.tsx
+++ b/src/client/views/DocumentButtonBar.tsx
@@ -26,6 +26,7 @@ import { TemplateMenu } from "./TemplateMenu";
import React = require("react");
import { PresBox } from './nodes/PresBox';
import { undoBatch } from '../util/UndoManager';
+import { CollectionViewType } from './collections/CollectionView';
const higflyout = require("@hig/flyout");
export const { anchorPoints } = higflyout;
export const Flyout = higflyout.default;
@@ -186,7 +187,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
get pinButton() {
const targetDoc = this.view0?.props.Document;
const isPinned = targetDoc && Doc.isDocPinned(targetDoc);
- return !targetDoc ? (null) : <Tooltip title={<><div className="dash-tooltip">{"Pin to presentation"}</div></>}>
+ return !targetDoc ? (null) : <Tooltip title={<><div className="dash-tooltip">{SelectionManager.SelectedDocuments().length > 1 ? "Pin multiple documents to presentation" : "Pin to presentation"}</div></>}>
<div className="documentButtonBar-linker"
style={{ color: "white" }}
onClick={undoBatch(e => this.props.views().map(view => view && TabDocView.PinDoc(view.props.Document, false)))}>
@@ -194,25 +195,40 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
</div></Tooltip>;
}
+ @undoBatch
+ @action
+ pinWithView = (targetDoc: Doc) => {
+ if (targetDoc) {
+ TabDocView.PinDoc(targetDoc, false);
+ const activeDoc = PresBox.Instance.childDocs[PresBox.Instance.childDocs.length - 1];
+ if (targetDoc.type === DocumentType.PDF || targetDoc.type === DocumentType.RTF || targetDoc.type === DocumentType.WEB || targetDoc._viewType === CollectionViewType.Stacking) {
+ const scroll = targetDoc._scrollTop;
+ activeDoc.presPinView = true;
+ activeDoc.presPinViewScroll = scroll;
+ } else if ((targetDoc.type === DocumentType.COL && targetDoc._viewType === CollectionViewType.Freeform) || targetDoc.type === DocumentType.IMG) {
+ const x = targetDoc._panX;
+ const y = targetDoc._panY;
+ const scale = targetDoc._viewScale;
+ activeDoc.presPinView = true;
+ activeDoc.presPinViewX = x;
+ activeDoc.presPinViewY = y;
+ activeDoc.presPinViewScale = scale;
+ } else if (targetDoc.type === DocumentType.COMPARISON) {
+ const width = targetDoc._clipWidth;
+ activeDoc.presPinClipWidth = width;
+ activeDoc.presPinView = true;
+ }
+ }
+ }
+
@computed
get pinWithViewButton() {
const presPinWithViewIcon = <img src="/assets/pinWithView.png" style={{ margin: "auto", width: 17, transform: 'translate(0, 1px)' }} />;
const targetDoc = this.view0?.props.Document;
return !targetDoc ? (null) : <Tooltip title={<><div className="dash-tooltip">{"Pin with current view"}</div></>}>
- <div className="documentButtonBar-linker"
- onClick={undoBatch(e => {
- if (targetDoc) {
- TabDocView.PinDoc(targetDoc, false);
- const activeDoc = PresBox.Instance.childDocs[PresBox.Instance.childDocs.length - 1];
- const x = targetDoc._panX;
- const y = targetDoc._panY;
- const scale = targetDoc._viewScale;
- activeDoc.presPinView = true;
- activeDoc.presPinViewX = x;
- activeDoc.presPinViewY = y;
- activeDoc.presPinViewScale = scale;
- }
- })}>
+ <div
+ className="documentButtonBar-linker"
+ onClick={() => this.pinWithView(targetDoc)}>
{presPinWithViewIcon}
</div>
</Tooltip>;
diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index 39a4d293b..e93173c9e 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -1010,7 +1010,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
{PresBox.Instance.transitionDropdown}
</div> : null}
</div>}
- {!selectedItem || type === DocumentType.VID || type === DocumentType.AUDIO ? (null) : <div className="propertiesView-presTrails">
+ {/* {!selectedItem || type === DocumentType.VID || type === DocumentType.AUDIO ? (null) : <div className="propertiesView-presTrails">
<div className="propertiesView-presTrails-title"
onPointerDown={action(() => this.openPresProgressivize = !this.openPresProgressivize)}
style={{ backgroundColor: this.openPresProgressivize ? "black" : "" }}>
@@ -1022,8 +1022,8 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
{this.openPresProgressivize ? <div className="propertiesView-presTrails-content">
{PresBox.Instance.progressivizeDropdown}
</div> : null}
- </div>}
- {!selectedItem || (type !== DocumentType.COL && type !== DocumentType.VID && type !== DocumentType.AUDIO) ? (null) : <div className="propertiesView-presTrails">
+ </div>} */}
+ {!selectedItem || (type !== DocumentType.COL && type !== DocumentType.AUDIO) ? (null) : <div className="propertiesView-presTrails">
<div className="propertiesView-presTrails-title"
onPointerDown={action(() => { this.openSlideOptions = !this.openSlideOptions; })}
style={{ backgroundColor: this.openSlideOptions ? "black" : "" }}>
diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx
index 3f55cf103..34fb2bdee 100644
--- a/src/client/views/collections/CollectionMenu.tsx
+++ b/src/client/views/collections/CollectionMenu.tsx
@@ -344,7 +344,8 @@ export class CollectionViewBaseChrome extends React.Component<CollectionMenuProp
@computed get viewModes() {
const excludedViewTypes = Doc.UserDoc().noviceMode ? [CollectionViewType.Invalid, CollectionViewType.Docking, CollectionViewType.Pile, CollectionViewType.Map, CollectionViewType.Linear, CollectionViewType.Time] :
[CollectionViewType.Invalid, CollectionViewType.Docking, CollectionViewType.Pile, CollectionViewType.Linear];
- return <div className="collectionViewBaseChrome-viewModes" >
+ const isPres: boolean = (this.document && this.document.type === DocumentType.PRES);
+ return isPres ? (null) : (<div className="collectionViewBaseChrome-viewModes" >
<Tooltip title={<div className="dash-tooltip">drop document to apply or drag to create button</div>} placement="bottom">
<div className="commandEntry-outerDiv" ref={this._viewRef} onPointerDown={this.dragViewDown}>
<button className={"antimodeMenu-button"}>
@@ -367,7 +368,7 @@ export class CollectionViewBaseChrome extends React.Component<CollectionMenuProp
</select>
</div>
</Tooltip>
- </div>;
+ </div>);
}
@computed get selectedDocumentView() {
@@ -425,7 +426,7 @@ export class CollectionViewBaseChrome extends React.Component<CollectionMenuProp
const presPinWithViewIcon = <img src={`/assets/pinWithView.png`} style={{ margin: "auto", width: 19 }} />;
const targetDoc = this.selectedDoc;
{/* return (!targetDoc || (targetDoc._viewType !== CollectionViewType.Freeform && targetDoc.type !== DocumentType.IMG)) ? (null) : <Tooltip title={<><div className="dash-tooltip">{"Pin to presentation trail with current view"}</div></>} placement="top"> */ }
- return (targetDoc && (targetDoc._viewType === CollectionViewType.Freeform || targetDoc._viewType === CollectionViewType.Stacking || targetDoc.type === DocumentType.IMG || targetDoc.type === DocumentType.PDF || targetDoc.type === DocumentType.WEB || targetDoc.type === DocumentType.RTF || targetDoc.type === DocumentType.COMPARISON)) ? <Tooltip title={<><div className="dash-tooltip">{"Pin to presentation trail with current view"}</div></>} placement="top">
+ return (targetDoc && targetDoc.type !== DocumentType.PRES && (targetDoc._viewType === CollectionViewType.Freeform || targetDoc._viewType === CollectionViewType.Stacking || targetDoc.type === DocumentType.IMG || targetDoc.type === DocumentType.PDF || targetDoc.type === DocumentType.WEB || targetDoc.type === DocumentType.RTF || targetDoc.type === DocumentType.COMPARISON)) ? <Tooltip title={<><div className="dash-tooltip">{"Pin to presentation trail with current view"}</div></>} placement="top">
<button className="antimodeMenu-button" style={{ borderRight: "1px solid gray", borderLeft: "1px solid gray", justifyContent: 'center' }}
onClick={() => this.pinWithView(targetDoc)}>
{presPinWithViewIcon}
@@ -472,7 +473,7 @@ export class CollectionViewBaseChrome extends React.Component<CollectionMenuProp
@computed
get aliasButton() {
const targetDoc = this.selectedDoc;
- return !targetDoc ? (null) : <Tooltip title={<div className="dash-tooltip">{"Tap or Drag to create an alias"}</div>} placement="top">
+ return !targetDoc || targetDoc.type === DocumentType.PRES ? (null) : <Tooltip title={<div className="dash-tooltip">{"Tap or Drag to create an alias"}</div>} placement="top">
<button className="antimodeMenu-button" onPointerDown={this.onAliasButtonDown} onClick={this.onAlias} style={{ cursor: "drag" }}>
<FontAwesomeIcon className="documentdecorations-icon" icon="copy" size="lg" />
</button>
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index 2fedca711..4eb6ee03c 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -297,9 +297,11 @@ export class CollectionStackingView extends CollectionSubView<StackingDocument,
newDocs.map((doc, i) => {
targInd = targInd === -1 ? docs.length : targInd;
const srcInd = docs.indexOf(doc);
- if (targInd !== -1) targInd = i === 0 ? docs.indexOf(this.filteredChildren[targInd]) : docs.indexOf(newDocs[0]) + 1;
+ // if (i !== 0) console.log(docs.indexOf(newDocs[0])); //glr: for testing
+ if (targInd !== -1) targInd = i === 0 ? docs.indexOf(this.filteredChildren[targInd]) : docs.indexOf(newDocs[i - 1]) + 1;
+ // console.log("title: " + doc.title, "i: " + i, "targInd: " + targInd, "length: " + newDocs.length, "srcInd: " + srcInd); //glr: for testing
docs.splice(srcInd, 1);
- docs.splice((targInd > srcInd ? targInd - 1 : targInd) + plusOne, 0, doc);
+ docs.splice((targInd > srcInd ? targInd - 1 : targInd) + (i === 0 ? plusOne : 0), 0, doc);
});
}
}
diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx
index cd84d2d78..9e25bb607 100644
--- a/src/client/views/collections/TabDocView.tsx
+++ b/src/client/views/collections/TabDocView.tsx
@@ -144,7 +144,7 @@ export class TabDocView extends React.Component<TabDocViewProps> {
if (!curPresDocView) {
CollectionDockingView.AddSplit(curPres, "right");
}
- DocumentManager.Instance.jumpToDocument(doc, false, undefined, Cast(doc.context, Doc, null));
+ DocumentManager.Instance.jumpToDocument(doc, false, undefined);
}
}
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx b/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx
index fd4fa0c7e..d8e44e781 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx
@@ -54,7 +54,7 @@ export class MarqueeOptionsMenu extends AntimodeMenu<AntimodeMenuProps> {
<FontAwesomeIcon icon="font" size="lg" />
</button>
</Tooltip>,
- <Tooltip key="pinWithView" title={<><div className="dash-tooltip">Pin with selected view</div></>} placement="bottom">
+ <Tooltip key="pinWithView" title={<><div className="dash-tooltip">Pin the selected region to presentation</div></>} placement="bottom">
<button
className="antimodeMenu-button"
onPointerDown={this.pinWithView}>
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index 7c64fd429..42a601aa2 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -397,6 +397,7 @@ export class MarqueeView extends React.Component<SubCollectionViewProps & Marque
pinDoc.presentationTargetDoc = doc;
pinDoc.presMovement = PresMovement.Zoom;
pinDoc.context = curPres;
+ pinDoc.title = doc.title;
Doc.AddDocToList(curPres, "data", pinDoc);
if (curPres.expandBoolean) pinDoc.presExpandInlineButton = true;
if (!DocumentManager.Instance.getDocumentView(curPres)) {
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;
}
diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx
index 677d612b6..53b2433e8 100644
--- a/src/client/views/nodes/PresBox.tsx
+++ b/src/client/views/nodes/PresBox.tsx
@@ -38,12 +38,12 @@ export enum PresMovement {
}
export enum PresEffect {
- Fade = "fade",
- Flip = "flip",
- Rotate = "rotate",
- Bounce = "bounce",
- Roll = "roll",
- None = "none",
+ Fade = "Fade",
+ Flip = "Flip",
+ Rotate = "Rotate",
+ Bounce = "Bounce",
+ Roll = "Roll",
+ None = "None",
}
enum PresStatus {
@@ -52,6 +52,11 @@ enum PresStatus {
Edit = "edit"
}
+enum PresColors {
+ Active = "#AEDDF8",
+
+}
+
type PresBoxSchema = makeInterface<[typeof documentSchema]>;
const PresBoxDocument = makeInterface(documentSchema);
@@ -69,14 +74,15 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
@observable _sortedSelectedArray: Doc[] = [];
@observable _eleArray: HTMLElement[] = [];
@observable _dragArray: HTMLElement[] = [];
+ @observable _pathBoolean: boolean = false;
+ @observable _expandBoolean: boolean = false;
@observable private transitionTools: boolean = false;
@observable private newDocumentTools: boolean = false;
@observable private progressivizeTools: boolean = false;
- @observable private presentTools: boolean = false;
- @observable private pathBoolean: boolean = false;
@observable private openMovementDropdown: boolean = false;
@observable private openEffectDropdown: boolean = false;
+ @observable private presentTools: boolean = false;
@computed get childDocs() { return DocListCast(this.dataDoc[this.fieldKey]); }
@computed get itemIndex() { return NumCast(this.rootDoc._itemIndex); }
@computed get activeItem() { return Cast(this.childDocs[this.itemIndex], Doc, null); }
@@ -134,6 +140,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
this.layoutDoc.presStatus = PresStatus.Edit;
this.layoutDoc._gridGap = 0;
this.layoutDoc._yMargin = 0;
+ document.addEventListener("keydown", this.keyEvents, true);
this.turnOffEdit(true);
DocListCastAsync((Doc.UserDoc().myPresentations as Doc).data).then(pres =>
!pres?.includes(this.rootDoc) && Doc.AddDocToList(Doc.UserDoc().myPresentations as Doc, "data", this.rootDoc));
@@ -291,7 +298,14 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
};
// If openDocument is selected then it should open the document for the user
if (activeItem.openDocument) {
+ const presStatus = this.rootDoc.presStatus;
openInTab();
+ // this still needs some fixing
+ setTimeout(() => {
+ const presDocView = DocumentManager.Instance.getDocumentView(this.rootDoc);
+ if (presDocView) SelectionManager.SelectDoc(presDocView, false);
+ this.rootDoc.presStatus = presStatus;
+ }, 2000)
} else
//docToJump stayed same meaning, it was not in the group or was the last element in the group
if (activeItem.zoomProgressivize && this.rootDoc.presStatus !== PresStatus.Edit) {
@@ -466,20 +480,18 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
@action togglePath = (srcContext: Doc, off?: boolean) => {
if (off) {
- this.pathBoolean = false;
+ this._pathBoolean = false;
srcContext.presPathView = false;
} else {
- this.pathBoolean = !this.pathBoolean;
- srcContext.presPathView = this.pathBoolean;
+ runInAction(() => this._pathBoolean = !this._pathBoolean);
+ srcContext.presPathView = this._pathBoolean;
}
}
- @undoBatch
@action toggleExpandMode = () => {
- this.rootDoc.expandBoolean = !this.rootDoc.expandBoolean;
+ runInAction(() => this._expandBoolean = !this._expandBoolean);
this.childDocs.forEach((doc) => {
- if (this.rootDoc.expandBoolean) doc.presExpandInlineButton = true;
- else if (!this.rootDoc.expandBoolean) doc.presExpandInlineButton = false;
+ doc.presExpandInlineButton = this._expandBoolean;
});
}
@@ -554,22 +566,42 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
* When the movement dropdown is changes
*/
@undoBatch
- updateMovement = action((movement: any, activeItem: Doc, targetDoc: Doc) => {
- switch (movement) {
- case PresMovement.Zoom: //Pan and zoom
- activeItem.presMovement = PresMovement.Zoom;
- break;
- case PresMovement.Pan: //Pan
- activeItem.presMovement = PresMovement.Pan;
- break;
- case PresMovement.Jump: //Jump Cut
- activeItem.presJump = true;
- activeItem.presMovement = PresMovement.Jump;
- break;
- case PresMovement.None: default:
- activeItem.presMovement = PresMovement.None;
- break;
- }
+ updateMovement = action((movement: any, all?: boolean) => {
+ if (all) {
+ this.childDocs.forEach((doc) => {
+ switch (movement) {
+ case PresMovement.Zoom: //Pan and zoom
+ doc.presMovement = PresMovement.Zoom;
+ break;
+ case PresMovement.Pan: //Pan
+ doc.presMovement = PresMovement.Pan;
+ break;
+ case PresMovement.Jump: //Jump Cut
+ doc.presJump = true;
+ doc.presMovement = PresMovement.Jump;
+ break;
+ case PresMovement.None: default:
+ doc.presMovement = PresMovement.None;
+ break;
+ }
+ })
+ } else if (this._selectedArray) this._selectedArray.forEach((doc) => {
+ switch (movement) {
+ case PresMovement.Zoom: //Pan and zoom
+ doc.presMovement = PresMovement.Zoom;
+ break;
+ case PresMovement.Pan: //Pan
+ doc.presMovement = PresMovement.Pan;
+ break;
+ case PresMovement.Jump: //Jump Cut
+ doc.presJump = true;
+ doc.presMovement = PresMovement.Jump;
+ break;
+ case PresMovement.None: default:
+ doc.presMovement = PresMovement.None;
+ break;
+ }
+ })
});
setMovementName = action((movement: any, activeItem: Doc): string => {
@@ -589,9 +621,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
addDocumentFilter = (doc: Doc | Doc[]) => {
const docs = doc instanceof Doc ? [doc] : doc;
docs.forEach((doc, i) => {
- if (this.childDocs.includes(doc)) {
- if (docs.length === i + 1) return false;
- } else if (doc.type === DocumentType.LABEL) {
+ if (doc.type === DocumentType.LABEL) {
const audio = Cast(doc.annotationOn, Doc, null);
if (audio) {
audio.aliasOf instanceof Doc;
@@ -605,7 +635,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
} else {
doc.aliasOf instanceof Doc && (doc.presentationTargetDoc = doc.aliasOf);
!this.childDocs.includes(doc) && (doc.presMovement = PresMovement.Zoom);
- if (this.rootDoc.expandBoolean) doc.presExpandInlineButton = true;
+ if (this._expandBoolean) doc.presExpandInlineButton = true;
}
});
return true;
@@ -680,7 +710,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
// Key for when the presentaiton is active
@undoBatch
- keyEvents = action(async (e: KeyboardEvent) => {
+ keyEvents = action((e: KeyboardEvent) => {
if (e.target instanceof HTMLInputElement) return;
let handled = false;
const anchorNode = document.activeElement as HTMLDivElement;
@@ -708,7 +738,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
if (this.layoutDoc.presStatus === "manual") this.startAutoPres(this.itemIndex);
else if (this.layoutDoc.presStatus === "auto") if (this._presTimer) clearTimeout(this._presTimer);
handled = true;
- } if (e.keyCode === 8) { // delete selected items
+ } if (e.keyCode === 8) { // delete (backspace) selected items
if (this.layoutDoc.presStatus === "edit") {
runInAction(() => {
for (const doc of this._selectedArray) {
@@ -732,8 +762,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
} if ((e.keyCode === 39 || e.keyCode === 40) && e.shiftKey) { // left(37) / a(65) / up(38) to go back
if (this.layoutDoc.presStatus === "edit" && this._selectedArray.length > 0) {
const index = this.childDocs.indexOf(this._selectedArray[this._selectedArray.length]);
- if ((index - 1) > 0) {
- this._selectedArray.push(this.childDocs[index - 1]);
+ if ((index + 1) < this._selectedArray.length) {
+ this._selectedArray.push(this.childDocs[index + 1]);
}
}
handled = true;
@@ -743,7 +773,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
/**
*
*/
- @undoBatch
@action
viewPaths = () => {
const srcContext = Cast(this.rootDoc.presCollection, Doc, null);
@@ -823,23 +852,23 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
* 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();
- const activeItem: Doc = this.activeItem;
- const targetDoc: Doc = this.targetDoc;
- activeItem.presFadeButton = !activeItem.presFadeButton;
- if (!activeItem.presFadeButton) {
- if (targetDoc) {
- targetDoc.opacity = 1;
- }
- } else {
- activeItem.presHideAfterButton = false;
- if (this.rootDoc.presStatus !== "edit" && targetDoc) {
- targetDoc.opacity = 0.5;
- }
- }
- }
+ // @action
+ // onFadeDocumentAfterPresentedClick = (e: React.MouseEvent) => {
+ // e.stopPropagation();
+ // const activeItem: Doc = this.activeItem;
+ // const targetDoc: Doc = this.targetDoc;
+ // activeItem.presFadeButton = !activeItem.presFadeButton;
+ // if (!activeItem.presFadeButton) {
+ // if (targetDoc) {
+ // targetDoc.opacity = 1;
+ // }
+ // } else {
+ // activeItem.presHideAfterButton = false;
+ // if (this.rootDoc.presStatus !== "edit" && targetDoc) {
+ // targetDoc.opacity = 0.5;
+ // }
+ // }
+ // }
// Converts seconds to ms and updates presTransition
@undoBatch
@@ -848,7 +877,9 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
if (change) timeInMS += change;
if (timeInMS < 100) timeInMS = 100;
if (timeInMS > 10000) timeInMS = 10000;
- if (this.activeItem) this.activeItem.presTransition = timeInMS;
+ if (this._selectedArray) this._selectedArray.forEach((doc) => {
+ doc.presTransition = timeInMS;
+ })
}
// Converts seconds to ms and updates presDuration
@@ -858,9 +889,85 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
if (change) timeInMS += change;
if (timeInMS < 100) timeInMS = 100;
if (timeInMS > 20000) timeInMS = 20000;
- if (this.activeItem) this.activeItem.presDuration = timeInMS;
+ if (this._selectedArray) this._selectedArray.forEach((doc) => {
+ doc.presDuration = timeInMS;
+ })
}
+ @undoBatch
+ updateHideBefore = (activeItem: Doc) => {
+ activeItem.presHideTillShownButton = !activeItem.presHideTillShownButton;
+ this._selectedArray.forEach((doc) => {
+ doc.presHideTillShownButton = activeItem.presHideTillShownButton;
+ });
+ }
+
+ @undoBatch
+ updateHideAfter = (activeItem: Doc) => {
+ activeItem.presHideAfterButton = !activeItem.presHideAfterButton;
+ this._selectedArray.forEach((doc) => {
+ doc.presHideAfterButton = activeItem.presHideAfterButton;
+ });
+ }
+
+ @undoBatch
+ updateOpenDoc = (activeItem: Doc) => {
+ activeItem.openDocument = !activeItem.openDocument;
+ this._selectedArray.forEach((doc) => {
+ doc.openDocument = activeItem.openDocument;
+ });
+ }
+
+ @undoBatch
+ updateEffect = (effect: any, all?: boolean) => {
+ if (all) {
+ this.childDocs.forEach((doc) => {
+ const tagDoc = Cast(doc.presentationTargetDoc, Doc, null);
+ switch (effect) {
+ case PresEffect.Bounce:
+ tagDoc.presEffect = PresEffect.Bounce;
+ break;
+ case PresEffect.Fade:
+ tagDoc.presEffect = PresEffect.Fade;
+ break;
+ case PresEffect.Flip:
+ tagDoc.presEffect = PresEffect.Flip;
+ break;
+ case PresEffect.Roll:
+ tagDoc.presEffect = PresEffect.Roll;
+ break;
+ case PresEffect.Rotate:
+ tagDoc.presEffect = PresEffect.Rotate;
+ break;
+ case PresEffect.None: default:
+ tagDoc.presEffect = PresEffect.None;
+ break;
+ }
+ })
+ } else if (this._selectedArray) this._selectedArray.forEach((doc) => {
+ const tagDoc = Cast(doc.presentationTargetDoc, Doc, null);
+ switch (effect) {
+ case PresEffect.Bounce:
+ tagDoc.presEffect = PresEffect.Bounce;
+ break;
+ case PresEffect.Fade:
+ tagDoc.presEffect = PresEffect.Fade;
+ break;
+ case PresEffect.Flip:
+ tagDoc.presEffect = PresEffect.Flip;
+ break;
+ case PresEffect.Roll:
+ tagDoc.presEffect = PresEffect.Roll;
+ break;
+ case PresEffect.Rotate:
+ tagDoc.presEffect = PresEffect.Rotate;
+ break;
+ case PresEffect.None: default:
+ tagDoc.presEffect = PresEffect.None;
+ break;
+ }
+ })
+ }
@computed get transitionDropdown() {
const activeItem: Doc = this.activeItem;
@@ -879,10 +986,10 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
{this.setMovementName(activeItem.presMovement, activeItem)}
<FontAwesomeIcon className='presBox-dropdownIcon' style={{ gridColumn: 2, color: this.openMovementDropdown ? '#5B9FDD' : 'black' }} icon={"angle-down"} />
<div className={'presBox-dropdownOptions'} id={'presBoxMovementDropdown'} onPointerDown={e => e.stopPropagation()} style={{ display: this.openMovementDropdown ? "grid" : "none" }}>
- <div className={`presBox-dropdownOption ${activeItem.presMovement === PresMovement.None ? "active" : ""}`} onPointerDown={e => e.stopPropagation()} onClick={() => this.updateMovement(PresMovement.None, activeItem, targetDoc)}>None</div>
- <div className={`presBox-dropdownOption ${activeItem.presMovement === PresMovement.Zoom ? "active" : ""}`} onPointerDown={e => e.stopPropagation()} onClick={() => this.updateMovement(PresMovement.Zoom, activeItem, targetDoc)}>Pan and Zoom</div>
- <div className={`presBox-dropdownOption ${activeItem.presMovement === PresMovement.Pan ? "active" : ""}`} onPointerDown={e => e.stopPropagation()} onClick={() => this.updateMovement(PresMovement.Pan, activeItem, targetDoc)}>Pan</div>
- <div className={`presBox-dropdownOption ${activeItem.presMovement === PresMovement.Jump ? "active" : ""}`} onPointerDown={e => e.stopPropagation()} onClick={() => this.updateMovement(PresMovement.Jump, activeItem, targetDoc)}>Jump cut</div>
+ <div className={`presBox-dropdownOption ${activeItem.presMovement === PresMovement.None ? "active" : ""}`} onPointerDown={e => e.stopPropagation()} onClick={() => this.updateMovement(PresMovement.None)}>None</div>
+ <div className={`presBox-dropdownOption ${activeItem.presMovement === PresMovement.Zoom ? "active" : ""}`} onPointerDown={e => e.stopPropagation()} onClick={() => this.updateMovement(PresMovement.Zoom)}>Pan and Zoom</div>
+ <div className={`presBox-dropdownOption ${activeItem.presMovement === PresMovement.Pan ? "active" : ""}`} onPointerDown={e => e.stopPropagation()} onClick={() => this.updateMovement(PresMovement.Pan)}>Pan</div>
+ <div className={`presBox-dropdownOption ${activeItem.presMovement === PresMovement.Jump ? "active" : ""}`} onPointerDown={e => e.stopPropagation()} onClick={() => this.updateMovement(PresMovement.Jump)}>Jump cut</div>
</div>
</div>
<div className="ribbon-doubleButton" style={{ display: activeItem.presMovement === PresMovement.Pan || activeItem.presMovement === PresMovement.Zoom ? "inline-flex" : "none" }}>
@@ -911,9 +1018,9 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
<div className="ribbon-box">
Visibility {"&"} Duration
<div className="ribbon-doubleButton">
- <Tooltip title={<><div className="dash-tooltip">{"Hide before presented"}</div></>}><div className={`ribbon-toggle ${activeItem.presHideTillShownButton ? "active" : ""}`} onClick={undoBatch(() => activeItem.presHideTillShownButton = !activeItem.presHideTillShownButton)}>Hide before</div></Tooltip>
- <Tooltip title={<><div className="dash-tooltip">{"Hide after presented"}</div></>}><div className={`ribbon-toggle ${activeItem.presHideAfterButton ? "active" : ""}`} onClick={undoBatch(() => activeItem.presHideAfterButton = !activeItem.presHideAfterButton)}>Hide after</div></Tooltip>
- <Tooltip title={<><div className="dash-tooltip">{"Open document in a new tab"}</div></>}><div className="ribbon-toggle" style={{ backgroundColor: activeItem.openDocument ? "#aedef8" : "" }} onClick={undoBatch(() => activeItem.openDocument = !activeItem.openDocument)}>Open</div></Tooltip>
+ <Tooltip title={<><div className="dash-tooltip">{"Hide before presented"}</div></>}><div className={`ribbon-toggle ${activeItem.presHideTillShownButton ? "active" : ""}`} onClick={() => this.updateHideBefore(activeItem)}>Hide before</div></Tooltip>
+ <Tooltip title={<><div className="dash-tooltip">{"Hide after presented"}</div></>}><div className={`ribbon-toggle ${activeItem.presHideAfterButton ? "active" : ""}`} onClick={() => this.updateHideAfter(activeItem)}>Hide after</div></Tooltip>
+ <Tooltip title={<><div className="dash-tooltip">{"Open document in a new tab"}</div></>}><div className="ribbon-toggle" style={{ backgroundColor: activeItem.openDocument ? "#aedef8" : "" }} onClick={() => this.updateOpenDoc(activeItem)}>Open</div></Tooltip>
</div>
<div className="ribbon-doubleButton" >
<div className="presBox-subheading">Slide Duration</div>
@@ -945,12 +1052,12 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
{effect}
<FontAwesomeIcon className='presBox-dropdownIcon' style={{ gridColumn: 2, color: this.openEffectDropdown ? '#5B9FDD' : 'black' }} icon={"angle-down"} />
<div className={'presBox-dropdownOptions'} id={'presBoxMovementDropdown'} style={{ display: this.openEffectDropdown ? "grid" : "none" }} onPointerDown={e => e.stopPropagation()}>
- <div className={'presBox-dropdownOption'} onPointerDown={e => e.stopPropagation()} onClick={undoBatch(() => targetDoc.presEffect = 'None')}>None</div>
- <div className={'presBox-dropdownOption'} onPointerDown={e => e.stopPropagation()} onClick={undoBatch(() => targetDoc.presEffect = 'Fade')}>Fade In</div>
- <div className={'presBox-dropdownOption'} onPointerDown={e => e.stopPropagation()} onClick={undoBatch(() => targetDoc.presEffect = 'Flip')}>Flip</div>
- <div className={'presBox-dropdownOption'} onPointerDown={e => e.stopPropagation()} onClick={undoBatch(() => targetDoc.presEffect = 'Rotate')}>Rotate</div>
- <div className={'presBox-dropdownOption'} onPointerDown={e => e.stopPropagation()} onClick={undoBatch(() => targetDoc.presEffect = 'Bounce')}>Bounce</div>
- <div className={'presBox-dropdownOption'} onPointerDown={e => e.stopPropagation()} onClick={undoBatch(() => targetDoc.presEffect = 'Roll')}>Roll</div>
+ <div className={'presBox-dropdownOption'} onPointerDown={e => e.stopPropagation()} onClick={() => this.updateEffect(PresEffect.None)}>None</div>
+ <div className={'presBox-dropdownOption'} onPointerDown={e => e.stopPropagation()} onClick={() => this.updateEffect(PresEffect.Fade)}>Fade In</div>
+ <div className={'presBox-dropdownOption'} onPointerDown={e => e.stopPropagation()} onClick={() => this.updateEffect(PresEffect.Flip)}>Flip</div>
+ <div className={'presBox-dropdownOption'} onPointerDown={e => e.stopPropagation()} onClick={() => this.updateEffect(PresEffect.Rotate)}>Rotate</div>
+ <div className={'presBox-dropdownOption'} onPointerDown={e => e.stopPropagation()} onClick={() => this.updateEffect(PresEffect.Bounce)}>Bounce</div>
+ <div className={'presBox-dropdownOption'} onPointerDown={e => e.stopPropagation()} onClick={() => this.updateEffect(PresEffect.Roll)}>Roll</div>
</div>
</div>
<div className="ribbon-doubleButton" style={{ display: effect === 'None' ? "none" : "inline-flex" }}>
@@ -968,9 +1075,9 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
</div>
</div>
<div className="ribbon-final-box">
- <div className={this._selectedArray.length === 0 ? "ribbon-final-button" : "ribbon-final-button-hidden"} onClick={() => this.applyTo(this._selectedArray)}>
+ {/* <div className={this._selectedArray.length === 0 ? "ribbon-final-button" : "ribbon-final-button-hidden"} onClick={() => this.applyTo(this._selectedArray)}>
Apply to selected
- </div>
+ </div> */}
<div className="ribbon-final-button-hidden" onClick={() => this.applyTo(this.childDocs)}>
Apply to all
</div>
@@ -997,17 +1104,15 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
applyTo = (array: Doc[]) => {
const activeItem: Doc = this.activeItem;
const targetDoc: Doc = this.targetDoc;
+ this.updateMovement(activeItem.presMovement, true);
+ this.updateEffect(targetDoc.presEffect, 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.presEffect = targetDoc.presEffect;
tagDoc.presEffectDirection = targetDoc.presEffectDirection;
- tagDoc.presMovement = targetDoc.presMovement;
- curDoc.presMovement = activeItem.presMovement;
- this.updateMovement(activeItem.presMovement, curDoc, tagDoc);
curDoc.presHideTillShownButton = activeItem.presHideTillShownButton;
curDoc.presHideAfterButton = activeItem.presHideAfterButton;
}
@@ -1022,12 +1127,12 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
<div>
<div className={'presBox-ribbon'} onClick={e => e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}>
<div className="ribbon-box">
- <div className="ribbon-doubleButton" style={{ display: targetDoc.type === DocumentType.VID || targetDoc.type === DocumentType.AUDIO ? "inline-flex" : "none" }}>
+ <div className="ribbon-doubleButton" style={{ display: targetDoc.type === DocumentType.AUDIO ? "inline-flex" : "none" }}>
<div className="ribbon-toggle" style={{ backgroundColor: activeItem.playAuto ? "#aedef8" : "" }} onClick={() => activeItem.playAuto = !activeItem.playAuto}>Play automatically</div>
<div className="ribbon-toggle" style={{ display: "flex", backgroundColor: activeItem.playAuto ? "" : "#aedef8" }} onClick={() => activeItem.playAuto = !activeItem.playAuto}>Play on next</div>
</div>
- {targetDoc.type === DocumentType.VID ? <div className="ribbon-toggle" style={{ backgroundColor: activeItem.presVidFullScreen ? "#aedef8" : "" }} onClick={() => activeItem.presVidFullScreen = !activeItem.presVidFullScreen}>Full screen</div> : (null)}
- {targetDoc.type === DocumentType.VID || targetDoc.type === DocumentType.AUDIO ? <div className="ribbon-doubleButton" style={{ marginRight: 10 }}>
+ {/* {targetDoc.type === DocumentType.VID ? <div className="ribbon-toggle" style={{ backgroundColor: activeItem.presVidFullScreen ? "#aedef8" : "" }} onClick={() => activeItem.presVidFullScreen = !activeItem.presVidFullScreen}>Full screen</div> : (null)} */}
+ {targetDoc.type === DocumentType.AUDIO ? <div className="ribbon-doubleButton" style={{ marginRight: 10 }}>
<div className="presBox-subheading">Start time</div>
<div className="ribbon-property" style={{ paddingRight: 0, paddingLeft: 0 }}>
<input className="presBox-input"
@@ -1036,7 +1141,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
onChange={action((e: React.ChangeEvent<HTMLInputElement>) => { activeItem.presStartTime = Number(e.target.value); })} />
</div>
</div> : (null)}
- {targetDoc.type === DocumentType.VID || targetDoc.type === DocumentType.AUDIO ? <div className="ribbon-doubleButton" style={{ marginRight: 10 }}>
+ {targetDoc.type === DocumentType.AUDIO ? <div className="ribbon-doubleButton" style={{ marginRight: 10 }}>
<div className="presBox-subheading">End time</div>
<div className="ribbon-property" style={{ paddingRight: 0, paddingLeft: 0 }}>
<input className="presBox-input"
@@ -1678,6 +1783,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
const propIcon = CurrentUserUtils.propertiesWidth > 0 ? "angle-double-right" : "angle-double-left";
const propTitle = CurrentUserUtils.propertiesWidth > 0 ? "Close Presentation Panel" : "Open Presentation Panel";
const mode = StrCast(this.rootDoc._viewType) as CollectionViewType;
+ const isMini: boolean = this.toolbarWidth <= 100;
return (mode === CollectionViewType.Carousel3D) ? (null) : (
<div id="toolbarContainer" className={'presBox-toolbar'} style={{ display: this.layoutDoc.presStatus === "edit" ? "inline-flex" : "none" }}>
{/* <Tooltip title={<><div className="dash-tooltip">{"Add new slide"}</div></>}><div className={`toolbar-button ${this.newDocumentTools ? "active" : ""}`} onClick={action(() => this.newDocumentTools = !this.newDocumentTools)}>
@@ -1685,23 +1791,29 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
<FontAwesomeIcon className={`dropdown ${this.newDocumentTools ? "active" : ""}`} icon={"angle-down"} />
</div></Tooltip> */}
<Tooltip title={<><div className="dash-tooltip">{"View paths"}</div></>}>
- <div style={{ opacity: this.childDocs.length > 1 ? 1 : 0.3 }} className={`toolbar-button ${this.pathBoolean ? "active" : ""}`} onClick={this.childDocs.length > 1 ? this.viewPaths : undefined}>
+ <div style={{ opacity: this.childDocs.length > 1 ? 1 : 0.3, color: this._pathBoolean ? '#AEDDF8' : 'white', width: isMini ? "100%" : undefined }} className={"toolbar-button"} onClick={this.childDocs.length > 1 ? this.viewPaths : undefined}>
<FontAwesomeIcon icon={"exchange-alt"} />
</div>
</Tooltip>
- <div className="toolbar-divider" />
- <Tooltip title={<><div className="dash-tooltip">{this.rootDoc.expandBoolean ? "Minimize all" : "Expand all"}</div></>}>
- <div className={`toolbar-button ${this.rootDoc.expandBoolean ? "active" : ""}`} onClick={this.toggleExpandMode}>
- {/* <FontAwesomeIcon icon={this.rootDoc.expandBoolean ? "eye-slash" : "eye"} /> */}
- <FontAwesomeIcon icon={"eye"} />
- </div>
- </Tooltip>
- <div className="toolbar-divider" />
- <Tooltip title={<><div className="dash-tooltip">{propTitle}</div></>}>
- <div className="toolbar-button" style={{ position: 'absolute', right: 4, fontSize: 16 }} onClick={this.toggleProperties}>
- <FontAwesomeIcon className={"toolbar-thumbtack"} icon={propIcon} style={{ color: CurrentUserUtils.propertiesWidth > 0 ? '#AEDDF8' : 'white' }} />
- </div>
- </Tooltip>
+ {isMini ? (null) :
+ <>
+ <div className="toolbar-divider" />
+ <Tooltip title={<><div className="dash-tooltip">{this._expandBoolean ? "Minimize all" : "Expand all"}</div></>}>
+ <div className={"toolbar-button"}
+ style={{ color: this._expandBoolean ? '#AEDDF8' : 'white' }}
+ onClick={this.toggleExpandMode}>
+ {/* <FontAwesomeIcon icon={this.rootDoc.expandBoolean ? "eye-slash" : "eye"} /> */}
+ <FontAwesomeIcon icon={"eye"} />
+ </div>
+ </Tooltip>
+ <div className="toolbar-divider" />
+ <Tooltip title={<><div className="dash-tooltip">{propTitle}</div></>}>
+ <div className="toolbar-button" style={{ position: 'absolute', right: 4, fontSize: 16 }} onClick={this.toggleProperties}>
+ <FontAwesomeIcon className={"toolbar-thumbtack"} icon={propIcon} style={{ color: CurrentUserUtils.propertiesWidth > 0 ? '#AEDDF8' : 'white' }} />
+ </div>
+ </Tooltip>
+ </>
+ }
</div>
);
}
@@ -1713,23 +1825,24 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
*/
@computed get topPanel() {
const mode = StrCast(this.rootDoc._viewType) as CollectionViewType;
+ const isMini: boolean = this.toolbarWidth <= 100;
return (
<div className="presBox-buttons" style={{ display: this.rootDoc._chromeStatus === "disabled" ? "none" : undefined }}>
- <select className="presBox-viewPicker"
+ {isMini ? (null) : <select className="presBox-viewPicker"
style={{ display: this.layoutDoc.presStatus === "edit" ? "block" : "none" }}
onPointerDown={e => e.stopPropagation()}
onChange={this.viewChanged}
value={mode}>
<option onPointerDown={e => e.stopPropagation()} value={CollectionViewType.Stacking}>List</option>
<option onPointerDown={e => e.stopPropagation()} value={CollectionViewType.Carousel3D}>3D Carousel</option>
- </select>
+ </select>}
<div className="presBox-presentPanel" style={{ opacity: this.childDocs.length > 0 ? 1 : 0.3 }}>
<span className={`presBox-button ${this.layoutDoc.presStatus === "edit" ? "present" : ""}`}>
<div className="presBox-button-left" onClick={() => (this.childDocs.length > 0) && (this.layoutDoc.presStatus = "manual")}>
<FontAwesomeIcon icon={"play-circle"} />
<div style={{ display: this.props.PanelWidth() > 200 ? "inline-flex" : "none" }}>&nbsp; Present</div>
</div>
- {(mode === CollectionViewType.Carousel3D) ? (null) : <div className={`presBox-button-right ${this.presentTools ? "active" : ""}`}
+ {(mode === CollectionViewType.Carousel3D || isMini) ? (null) : <div className={`presBox-button-right ${this.presentTools ? "active" : ""}`}
onClick={(action(() => {
if (this.childDocs.length > 0) this.presentTools = !this.presentTools;
}))}>
@@ -1900,7 +2013,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
}
Scripting.addGlobal(function lookupPresBoxField(container: Doc, field: string, data: Doc) {
if (field === 'indexInPres') return DocListCast(container[StrCast(container.presentationFieldKey)]).indexOf(data);
- if (field === 'presCollapsedHeight') return container._viewType === CollectionViewType.Stacking ? 30 : 26;
+ if (field === 'presCollapsedHeight') return container._viewType === CollectionViewType.Stacking ? 35 : 31;
if (field === 'presStatus') return container.presStatus;
if (field === '_itemIndex') return container._itemIndex;
if (field === 'presBox') return container;
diff --git a/src/client/views/presentationview/PresElementBox.scss b/src/client/views/presentationview/PresElementBox.scss
index f1bdb7737..00ba5f9bb 100644
--- a/src/client/views/presentationview/PresElementBox.scss
+++ b/src/client/views/presentationview/PresElementBox.scss
@@ -25,7 +25,7 @@ $slide-active: #5B9FDD;
align-items: center;
.presItem-number {
- margin-top: 7px;
+ margin-top: 3.5px;
font-size: 12px;
font-weight: 700;
text-align: center;
@@ -36,7 +36,6 @@ $slide-active: #5B9FDD;
overflow: hidden;
}
-
}
.presItem-slide {
@@ -46,17 +45,18 @@ $slide-active: #5B9FDD;
height: calc(100% - 7px);
width: calc(100% - 5px);
display: grid;
- grid-template-rows: 23px auto;
+ grid-template-rows: 16px 10px auto;
grid-template-columns: max-content max-content max-content max-content auto;
.presItem-name {
+ min-width: 20px;
z-index: 300;
+ top: 2px;
align-self: center;
- font-size: 13px;
+ font-size: 11px;
font-family: Roboto;
font-weight: 500;
position: relative;
- top: 1px;
padding-left: 10px;
padding-right: 10px;
letter-spacing: normal;
@@ -64,22 +64,44 @@ $slide-active: #5B9FDD;
text-overflow: ellipsis;
overflow: hidden;
white-space: pre;
+ transition: 500ms;
+ }
+
+ .presItem-docName {
+ min-width: 20px;
+ z-index: 300;
+ align-self: center;
+ font-size: 9px;
+ font-family: Roboto;
+ font-weight: 300;
+ position: relative;
+ padding-left: 10px;
+ padding-right: 10px;
+ letter-spacing: normal;
+ width: max-content;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: pre;
+ transition: 500ms;
+ grid-row: 2;
+ grid-column: 1/6;
}
.presItem-time {
align-self: center;
position: relative;
- top: 2px;
padding-right: 10px;
+ top: 1px;
font-size: 10;
font-weight: 300;
font-family: Roboto;
z-index: 300;
letter-spacing: normal;
}
-
+
.presItem-embedded {
overflow: hidden;
+ grid-row: 3;
grid-column: 1/8;
position: relative;
display: flex;
@@ -90,7 +112,7 @@ $slide-active: #5B9FDD;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
-
+
.presItem-embeddedMask {
width: 100%;
height: 100%;
@@ -106,6 +128,7 @@ $slide-active: #5B9FDD;
.presItem-slideButtons {
display: flex;
grid-column: 7;
+ grid-row: 1/3;
width: 60px;
justify-self: right;
justify-content: flex-end;
@@ -115,10 +138,10 @@ $slide-active: #5B9FDD;
position: relative;
border-radius: 100%;
z-index: 300;
- width: 15px;
- height: 15px;
+ width: 18px;
+ height: 18px;
display: flex;
- font-size: 10px;
+ font-size: 12px;
justify-self: center;
align-self: center;
background-color: rgba(0, 0, 0, 0.5);
@@ -131,17 +154,52 @@ $slide-active: #5B9FDD;
.slideButton:hover {
background-color: rgba(0, 0, 0, 1);
- transform: scale(1.15);
+ transform: scale(1.2);
}
}
}
+
+
.presItem-slide.active {
box-shadow: 0 0 0px 1.5px $dark-blue;
}
-// .presItem-slide:hover {
-// background: $slide-hover;
-// }
+.presItem-multiDrag {
+ font-family: Roboto;
+ font-weight: 600;
+ color: white;
+ text-align: center;
+ justify-content: center;
+ align-content: center;
+ width: 100px;
+ height: 30px;
+ position: absolute;
+ background-color: $dark-blue;
+ z-index: 4000;
+ border-radius: 10px;
+ box-shadow: black 0.4vw 0.4vw 0.8vw;
+ line-height: 30px;
+}
+
+.presItem-miniSlide {
+ font-weight: 700;
+ font-size: 12;
+ grid-column: 1/8;
+ align-self: center;
+ justify-self: center;
+ background-color: #d5dce2;
+ width: 26px;
+ text-align: center;
+ height: 26px;
+ line-height: 28px;
+ border-radius: 100%;
+}
+.presItem-miniSlide.active {
+ box-shadow: 0 0 0px 1.5px $dark-blue;
+}
+// .presItem-slide:hover {
+// background: $slide-hover;
+// } \ No newline at end of file
diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx
index aea00f812..9e1a7b615 100644
--- a/src/client/views/presentationview/PresElementBox.tsx
+++ b/src/client/views/presentationview/PresElementBox.tsx
@@ -22,6 +22,7 @@ import { undoBatch } from "../../util/UndoManager";
import { EditableView } from "../EditableView";
import { DocUtils } from "../../documents/Documents";
import { DateField } from "../../../fields/DateField";
+import { DocumentManager } from "../../util/DocumentManager";
export const presSchema = createSchema({
presentationTargetDoc: Doc,
@@ -142,7 +143,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
e.stopPropagation();
e.preventDefault();
if (element && !(e.ctrlKey || e.metaKey)) {
- if (PresBox.Instance._eleArray.includes(this._itemRef.current!)) {
+ if (PresBox.Instance._selectedArray.includes(this.rootDoc)) {
setupMoveUpEvents(this, e, this.startDrag, emptyFunction, emptyFunction);
} else {
PresBox.Instance._selectedArray = [];
@@ -161,26 +162,30 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
e.preventDefault();
}
- @action
- stopDrag = (e: PointerEvent) => {
- this._dragging = false;
- e.stopPropagation();
- e.preventDefault();
- }
-
startDrag = (e: PointerEvent, down: number[], delta: number[]) => {
+ const miniView: boolean = this.toolbarWidth <= 100;
const activeItem = this.rootDoc;
+ const dragArray = PresBox.Instance._dragArray;
const dragData = new DragManager.DocumentDragData(PresBox.Instance.sortArray().map(doc => doc));
const dragItem: HTMLElement[] = [];
- PresBox.Instance._dragArray.map(ele => {
- const doc = ele;
- doc.className = "presItem-slide";
+ if (dragArray.length === 1) {
+ const doc = dragArray[0];
+ doc.className = miniView ? "presItem-miniSlide" : "presItem-slide";
+ dragItem.push(doc);
+ } else if (dragArray.length >= 1) {
+ const doc = document.createElement('div');
+ doc.className = "presItem-multiDrag";
+ doc.innerText = "Move " + dragArray.length + " slides";
+ doc.style.position = 'absolute';
+ doc.style.top = (e.clientY) + 'px';
+ doc.style.left = (e.clientX - 50) + 'px';
dragItem.push(doc);
- });
- const dropEvent = () => runInAction(() => this._dragging = false);
+ }
+
+ // const dropEvent = () => runInAction(() => this._dragging = false);
if (activeItem) {
- DragManager.StartDocumentDrag(dragItem.map(ele => ele), dragData, e.clientX, e.clientY, undefined, dropEvent);
- runInAction(() => this._dragging = true);
+ DragManager.StartDocumentDrag(dragItem.map(ele => ele), dragData, e.clientX, e.clientY, undefined);
+ // runInAction(() => this._dragging = true);
return true;
}
return false;
@@ -233,15 +238,18 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
@action
onSetValue = (value: string) => {
- this.rootDoc.title = value;
+ const length: number = value.length;
+ const spaces: string = new Array(value.length + 1).join(" ");
+ if (length === 0 || value === spaces) this.rootDoc.title = "-untitled-";
+ else this.rootDoc.title = value;
return true;
}
@action
clearArrays = () => {
PresBox.Instance._eleArray = [];
- PresBox.Instance._eleArray.push(this._itemRef.current!);
PresBox.Instance._dragArray = [];
+ PresBox.Instance._eleArray.push(this._itemRef.current!);
PresBox.Instance._dragArray.push(this._dragRef.current!);
}
@@ -271,11 +279,20 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
}
}
+ @computed
+ get toolbarWidth(): number {
+ const presBoxDocView = DocumentManager.Instance.getDocumentView(this.presBox)
+ let width: number = NumCast(this.presBox._width);
+ if (presBoxDocView) width = presBoxDocView.props.PanelWidth();
+ return width;
+ }
+
@computed get mainItem() {
const isSelected: boolean = PresBox.Instance._selectedArray.includes(this.rootDoc);
- const toolbarWidth: number = PresBox.Instance.toolbarWidth;
- const showMore: boolean = PresBox.Instance.toolbarWidth >= 300;
- const targetDoc: Doc = Cast(this.rootDoc.presentationTargetDoc, Doc, null);
+ const toolbarWidth: number = this.toolbarWidth;
+ const showMore: boolean = this.toolbarWidth >= 300;
+ const miniView: boolean = this.toolbarWidth <= 100;
+ const targetDoc: Doc = this.targetDoc;
const activeItem: Doc = this.rootDoc;
return (
<div className={`presItem-container`} key={this.props.Document[Id] + this.indexInPres}
@@ -306,21 +323,26 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
onPointerDown={this.headerDown}
onPointerUp={this.headerUp}
>
- <div className="presItem-number">
- {`${this.indexInPres + 1}.`}
- </div>
- <div ref={this._dragRef} className={`presItem-slide ${isSelected ? "active" : ""}`}>
- <div className="presItem-name" style={{ maxWidth: showMore ? (toolbarWidth - 175) : toolbarWidth - 85 }}>
+ {miniView ?
+ <div className={`presItem-miniSlide ${isSelected ? "active" : ""}`} ref={miniView ? this._dragRef : null}>
+ {`${this.indexInPres + 1}.`}
+ </div>
+ :
+ <div className="presItem-number">
+ {`${this.indexInPres + 1}.`}
+ </div>}
+ {miniView ? (null) : <div ref={miniView ? null : this._dragRef} className={`presItem-slide ${isSelected ? "active" : ""}`}>
+ <div className="presItem-name" style={{ maxWidth: showMore ? (toolbarWidth - 175) : toolbarWidth - 85, cursor: isSelected ? 'text' : 'grab' }}>
{isSelected ? <EditableView
ref={this._titleRef}
- contents={this.rootDoc.title}
- GetValue={() => StrCast(this.rootDoc.title)}
- SetValue={action((value: string) => {
+ contents={activeItem.title}
+ GetValue={() => StrCast(activeItem.title)}
+ SetValue={undoBatch(action((value: string) => {
this.onSetValue(value);
return true;
- })}
+ }))}
/> :
- this.rootDoc.title
+ activeItem.title
}
</div>
<Tooltip title={<><div className="dash-tooltip">{"Movement speed"}</div></>}><div className="presItem-time" style={{ display: showMore ? "block" : "none" }}>{this.transition}</div></Tooltip>
@@ -331,6 +353,13 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
onClick={() => this.updateView(targetDoc, activeItem)}
style={{ fontWeight: 700, display: activeItem.presPinView ? "flex" : "none" }}>V</div>
</Tooltip>
+ {/* <Tooltip title={<><div className="dash-tooltip">{"Group with up"}</div></>}>
+ <div className="slideButton"
+ onClick={() => activeItem.groupWithUp = !activeItem.groupWithUp}
+ style={{ fontWeight: 700, display: activeItem.presPinView ? "flex" : "none" }}>
+ <FontAwesomeIcon icon={""} onPointerDown={e => e.stopPropagation()} />
+ </div>
+ </Tooltip> */}
<Tooltip title={<><div className="dash-tooltip">{this.rootDoc.presExpandInlineButton ? "Minimize" : "Expand"}</div></>}><div className={"slideButton"} onClick={e => { e.stopPropagation(); this.presExpandDocumentClick(); }}>
<FontAwesomeIcon icon={this.rootDoc.presExpandInlineButton ? "eye-slash" : "eye"} onPointerDown={e => e.stopPropagation()} />
</div></Tooltip>
@@ -340,8 +369,9 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
<FontAwesomeIcon icon={"trash"} onPointerDown={e => e.stopPropagation()} />
</div></Tooltip>
</div>
+ <div className="presItem-docName" style={{ maxWidth: showMore ? (toolbarWidth - 175) : toolbarWidth - 85 }}>{activeItem.presPinView ? (<><i>View of </i> {targetDoc.title}</>) : targetDoc.title}</div>
{this.renderEmbeddedInline}
- </div>
+ </div>}
</div >);
}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-13 12:48:01 +0000