aboutsummaryrefslogtreecommitdiff
path: root/src/client/views
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views')
-rw-r--r--src/client/views/DocumentButtonBar.tsx46
-rw-r--r--src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx2
-rw-r--r--src/client/views/nodes/PresBox.scss1
-rw-r--r--src/client/views/nodes/PresBox.tsx78
-rw-r--r--src/client/views/presentationview/PresElementBox.scss77
-rw-r--r--src/client/views/presentationview/PresElementBox.tsx75
6 files changed, 194 insertions, 85 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/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/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 3b7794815..e819cd9c6 100644
--- a/src/client/views/nodes/PresBox.tsx
+++ b/src/client/views/nodes/PresBox.tsx
@@ -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); }
@@ -442,7 +448,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
}
}
};
- this.layoutDoc.presStatus = PresStatus.Auto;
+ this.layoutDoc.presStatus = PresStatus.Autoplay;
this.startPresentation(startSlide);
this.gotoDocument(startSlide, this.itemIndex);
load();
@@ -450,7 +456,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
@action
pauseAutoPres = () => {
- if (this.layoutDoc.presStatus === PresStatus.Auto) {
+ if (this.layoutDoc.presStatus === PresStatus.Autoplay) {
if (this._presTimer) clearTimeout(this._presTimer);
this.layoutDoc.presStatus = PresStatus.Manual;
this.layoutDoc.presLoop = false;
@@ -466,20 +472,21 @@ 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;
+ undoBatch(() => {
+ 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;
});
}
@@ -589,9 +596,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 +610,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;
@@ -743,7 +748,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
/**
*
*/
- @undoBatch
@action
viewPaths = () => {
const srcContext = Cast(this.rootDoc.presCollection, Doc, null);
@@ -1678,6 +1682,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 +1690,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 +1724,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 +1912,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..60fe33f3f 100644
--- a/src/client/views/presentationview/PresElementBox.scss
+++ b/src/client/views/presentationview/PresElementBox.scss
@@ -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: 1px;
align-self: center;
- font-size: 13px;
+ font-size: 12px;
font-family: Roboto;
font-weight: 500;
position: relative;
- top: 1px;
padding-left: 10px;
padding-right: 10px;
letter-spacing: normal;
@@ -64,13 +64,35 @@ $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-style: italic;
+ 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;
@@ -80,6 +102,7 @@ $slide-active: #5B9FDD;
.presItem-embedded {
overflow: hidden;
+ grid-row: 3;
grid-column: 1/8;
position: relative;
display: flex;
@@ -106,6 +129,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 +139,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,15 +155,50 @@ $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-multiDrag {
+ font-family: Roboto;
+ font-weight: 600;
+ color: white;
+ text-align: center;
+ justify-content: center;
+ align-content: center;
+ width: 100px;
+ height: 40px;
+ position: absolute;
+ background-color: $dark-blue;
+ z-index: 4000;
+ border-radius: 10px;
+ box-shadow: black 0.4vw 0.4vw 0.8vw;
+
+}
+
+.presItem-miniSlide {
+ font-weight: 700;
+ grid-column: 1/8;
+ align-self: center;
+ justify-self: center;
+ background-color: #d5dce2;
+ width: 28px;
+ text-align: center;
+ height: 28px;
+ border-radius: 5px;
+}
+
+.presItem-miniSlide.active {
+ box-shadow: 0 0 0px 1.5px $dark-blue;
+}
+
// .presItem-slide:hover {
// background: $slide-hover;
// }
diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx
index aea00f812..61d6e9027 100644
--- a/src/client/views/presentationview/PresElementBox.tsx
+++ b/src/client/views/presentationview/PresElementBox.tsx
@@ -161,26 +161,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 = PresBox.Instance.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 +237,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!);
}
@@ -275,7 +282,8 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
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 miniView: boolean = PresBox.Instance.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 +314,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" : ""}`}>
+ {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 }}>
{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 +344,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 +360,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 ? "View of " + 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 17:18:58 +0000