aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/documents/Documents.ts1
-rw-r--r--src/client/util/DocumentManager.ts2
-rw-r--r--src/client/views/MainView.tsx5
-rw-r--r--src/client/views/collections/CollectionStackingView.tsx2
-rw-r--r--src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx3
-rw-r--r--src/client/views/nodes/PresBox.scss75
-rw-r--r--src/client/views/nodes/PresBox.tsx148
-rw-r--r--src/client/views/presentationview/PresElementBox.scss118
-rw-r--r--src/client/views/presentationview/PresElementBox.tsx39
9 files changed, 311 insertions, 82 deletions
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index f81c25bab..0e44a46d9 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -130,6 +130,7 @@ export interface DocumentOptions {
currentFrame?: number; // the current frame of a frame-based collection (e.g., progressive slide)
lastFrame?: number; // the last frame of a frame-based collection (e.g., progressive slide)
activeFrame?: number; // the active frame of a document in a frame base collection
+ presTransition?: number; //the time taken for the transition TO a document
borderRounding?: string;
boxShadow?: string;
dontRegisterChildViews?: boolean;
diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts
index 1fa5faeb3..e43c3acb9 100644
--- a/src/client/util/DocumentManager.ts
+++ b/src/client/util/DocumentManager.ts
@@ -174,7 +174,7 @@ export class DocumentManager {
const targetDocContextView = getFirstDocView(targetDocContext);
targetDocContext._scrollY = 0; // this will force PDFs to activate and load their annotations / allow scrolling
if (targetDocContextView) { // we found a context view and aren't forced to create a new one ... focus on the context first..
- targetDocContext._viewTransition = "transform 500ms";
+ targetDocContext._viewTransition = "transform 10000ms";
targetDocContextView.props.focus(targetDocContextView.props.Document, willZoom);
// now find the target document within the context
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 15f818d1f..e961e2e5c 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -5,7 +5,8 @@ import {
faQuestionCircle, faArrowLeft, faArrowRight, faArrowDown, faArrowUp, faBolt, faBullseye, faCaretUp, faCat, faCheck, faChevronRight, faClipboard, faClone, faCloudUploadAlt,
faCommentAlt, faCompressArrowsAlt, faCut, faEllipsisV, faEraser, faExclamation, faFileAlt, faFileAudio, faFilePdf, faFilm, faFilter, faFont, faGlobeAsia, faHighlighter,
faLongArrowAltRight, faMicrophone, faMousePointer, faMusic, faObjectGroup, faPause, faPen, faPenNib, faPhone, faPlay, faPortrait, faRedoAlt, faStamp, faStickyNote, faTimesCircle,
- faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faArrowsAlt, faQuoteLeft, faSortAmountDown, faAlignLeft, faAlignCenter, faAlignRight
+ faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faArrowsAlt, faQuoteLeft, faSortAmountDown, faAlignLeft, faAlignCenter, faAlignRight,
+ faAngleDown, faAngleUp, faSearchPlus
} from '@fortawesome/free-solid-svg-icons';
import { ANTIMODEMENU_HEIGHT } from './globalCssVariables.scss';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -143,7 +144,7 @@ export class MainView extends React.Component {
faQuestionCircle, faArrowLeft, faArrowRight, faArrowDown, faArrowUp, faBolt, faBullseye, faCaretUp, faCat, faCheck, faChevronRight, faClipboard, faClone, faCloudUploadAlt,
faCommentAlt, faCompressArrowsAlt, faCut, faEllipsisV, faEraser, faExclamation, faFileAlt, faFileAudio, faFilePdf, faFilm, faFilter, faFont, faGlobeAsia, faHighlighter,
faLongArrowAltRight, faMicrophone, faMousePointer, faMusic, faObjectGroup, faPause, faPen, faPenNib, faPhone, faPlay, faPortrait, faRedoAlt, faStamp, faStickyNote, faTrashAlt, faAngleRight, faBell,
- faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faArrowsAlt, faQuoteLeft, faSortAmountDown, faAlignLeft, faAlignCenter, faAlignRight);
+ faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faArrowsAlt, faQuoteLeft, faSortAmountDown, faAlignLeft, faAlignCenter, faAlignRight, faAngleDown, faAngleUp, faSearchPlus);
this.initEventListeners();
this.initAuthenticationRouters();
}
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index 9d8790dda..ced234850 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -184,7 +184,7 @@ export class CollectionStackingView extends CollectionSubView(StackingDocument)
if (found) {
const top = found.getBoundingClientRect().top;
const localTop = this.props.ScreenToLocalTransform().transformPoint(0, top);
- smoothScroll(500, this._mainCont!, localTop[1] + this._mainCont!.scrollTop);
+ smoothScroll(doc.presTransition ? Number(doc.presTransition) : 500, this._mainCont!, localTop[1] + this._mainCont!.scrollTop);
}
afterFocus && setTimeout(() => {
if (afterFocus?.()) { }
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index b81e400b3..9069097e6 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -907,7 +907,8 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
// !doc.z && NumCast(this.layoutDoc.scale) < 1 && this.scaleAtPt(DocumentView._focusHack, 1); // [NumCast(doc.x), NumCast(doc.y)], 1);
// } else {
if (DocListCast(this.dataDoc[this.props.fieldKey]).includes(doc)) {
- if (!doc.z) this.setPan(newPanX, newPanY, "transform 500ms", true); // docs that are floating in their collection can't be panned to from their collection -- need to propagate the pan to a parent freeform somehow
+ // glr: freeform transform speed can be set through user by adjusting for presentation transform
+ if (!doc.z) this.setPan(newPanX, newPanY, doc.presTransition ? `transform ${doc.presTransition}ms` : "transform 500ms", true); // docs that are floating in their collection can't be panned to from their collection -- need to propagate the pan to a parent freeform somehow
}
Doc.BrushDoc(this.props.Document);
this.props.focus(this.props.Document);
diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss
index 9f6af1bde..9c2daf5d3 100644
--- a/src/client/views/nodes/PresBox.scss
+++ b/src/client/views/nodes/PresBox.scss
@@ -1,5 +1,6 @@
.presBox-cont {
position: absolute;
+ display: block;
pointer-events: inherit;
z-index: 2;
box-shadow: #AAAAAA .2vw .2vw .4vw;
@@ -12,12 +13,82 @@
transition: 0.7s opacity ease;
.presBox-listCont {
- position: absolute;
+ position: relative;
height: calc(100% - 25px);
width: 100%;
+ margin-top: 10px;
+ }
+
+ .presBox-highlight {
+ position: absolute;
+ top: 0;
+ height: 0;
+ width: 100%;
+ margin-top: 10px;
+ background-color: #ffe4b3;
+ }
+
+ .presBox-toolbar {
+ position: relative;
+ display: inline-flex;
+ align-items: center;
+ height: 30px;
+ width: 100%;
+ color: white;
+ background-color: #323232;
+
+ .toolbar-button {
+ margin-left: 10px;
+ margin-right: 10px;
+ letter-spacing: 0;
+ display: flex;
+ align-items: center;
+
+ .toolbar-dropdown {
+ margin-left: 5px;
+ }
+
+ .toolbar-transitionTools {
+ display: none;
+ }
+
+ .toolbar-transitionTools.active {
+ position: absolute;
+ display: block;
+ top: 30px;
+ transform: translate(-10px, 0px);
+ border-top: solid 3px grey;
+ background-color: #323232;
+ width: 105px;
+ height: max-content;
+ z-index: 100;
+
+ .toolbar-transitionButtons {
+ display: block;
+
+ .toolbar-transition {
+ display: flex;
+ font-size: 10;
+ width: 100;
+ background-color: rgba(0, 0, 0, 0);
+ min-width: max-content;
+
+ .toolbar-icon {
+ margin-right: 5px;
+ }
+ }
+ }
+ }
+ }
+
+ .toolbar-divider {
+ border-left: 1px solid white;
+ height: 80%;
+ }
}
.presBox-buttons {
+ position: relative;
width: 100%;
background: gray;
padding-top: 5px;
@@ -126,4 +197,4 @@
.select {
font-size: 100%;
}
-} \ No newline at end of file
+}
diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx
index 8818d375e..736551443 100644
--- a/src/client/views/nodes/PresBox.tsx
+++ b/src/client/views/nodes/PresBox.tsx
@@ -9,7 +9,7 @@ import { returnFalse, returnOne } from "../../../Utils";
import { documentSchema } from "../../../fields/documentSchemas";
import { DocumentManager } from "../../util/DocumentManager";
import { undoBatch } from "../../util/UndoManager";
-import { CollectionDockingView } from "../collections/CollectionDockingView";
+import { CollectionDockingView, DockedFrameRenderer } from "../collections/CollectionDockingView";
import { CollectionView, CollectionViewType } from "../collections/CollectionView";
import { FieldView, FieldViewProps } from './FieldView';
import "./PresBox.scss";
@@ -20,6 +20,8 @@ import { PrefetchProxy } from "../../../fields/Proxy";
import { ScriptField } from "../../../fields/ScriptField";
import { Scripting } from "../../util/Scripting";
import { InkingStroke } from "../InkingStroke";
+import { HighlightSpanKind } from "typescript";
+import { SearchUtil } from "../../util/SearchUtil";
type PresBoxSchema = makeInterface<[typeof documentSchema]>;
const PresBoxDocument = makeInterface(documentSchema);
@@ -35,7 +37,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
super(props);
if (!this.presElement) { // create exactly one presElmentBox template to use by any and all presentations.
Doc.UserDoc().presElement = new PrefetchProxy(Docs.Create.PresElementBoxDocument({
- title: "pres element template", backgroundColor: "transparent", _xMargin: 5, _height: 46, isTemplateDoc: true, isTemplateForField: "data"
+ title: "pres element template", backgroundColor: "transparent", _xMargin: 0, _height: 20, isTemplateDoc: true, isTemplateForField: "data"
}));
// this script will be called by each presElement to get rendering-specific info that the PresBox knows about but which isn't written to the PresElement
// this is a design choice -- we could write this data to the presElements which would require a reaction to keep it up to date, and it would prevent
@@ -209,7 +211,23 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
this.layoutDoc.presStatus = true;
this.startPresentation(index);
}
-
+ const heights: number[] = [];
+ this.childDocs.forEach(doc => {
+ if (doc.presExpandInlineButton) heights.push(155);
+ else heights.push(58);
+ });
+ let sum: number = 65;
+ for (let i = 0; i < this.itemIndex; i++) {
+ sum += heights[i];
+ }
+ const highlight = document.getElementById("presBox-hightlight");
+ if (this.itemIndex === 0 && highlight) highlight.style.top = "65";
+ else if (highlight) highlight.style.top = sum.toString();
+ if (this.childDocs[this.itemIndex].presExpandInlineButton && highlight) highlight.style.height = "156";
+ else if (highlight) highlight.style.height = "58";
+ console.log(highlight?.style.top);
+ console.log(highlight?.className);
+ console.log(sum);
this.navigateToElement(this.childDocs[index], fromDoc);
this.hideIfNotPresented(index);
this.showAfterPresented(index);
@@ -296,9 +314,106 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
active = (outsideReaction?: boolean) => ((Doc.GetSelectedTool() === InkTool.None && !this.layoutDoc.isBackground) &&
(this.layoutDoc.forceActive || this.props.isSelected(outsideReaction) || this._isChildActive || this.props.renderDepth === 0) ? true : false)
+
+ @observable private transitionTools: boolean = false;
+ // For toggling transition toolbar
+ @action
+ toggleTransitionTools = () => this.transitionTools = !this.transitionTools
+
+ @undoBatch
+ @action
+ toolbarTest = () => {
+ const presTargetDoc = Cast(this.childDocs[this.itemIndex].presentationTargetDoc, Doc, null);
+ console.log("title: " + presTargetDoc.title);
+ console.log("index: " + this.itemIndex);
+ }
+
+ @undoBatch
+ @action
+ viewLinks = () => {
+ const presTargetDoc = Cast(this.childDocs[this.itemIndex].presentationTargetDoc, Doc, null);
+ console.log(SearchUtil.GetContextsOfDocument(presTargetDoc));
+ console.log(DocListCast(presTargetDoc.context));
+ console.log(DocumentManager.Instance.getAllDocumentViews(presTargetDoc));
+
+ // if (!DocumentManager.Instance.getDocumentView(curPres)) {
+ // CollectionDockingView.AddRightSplit(curPres);
+ // }
+ }
+
+ @observable private activeItem = this.itemIndex ? this.childDocs[this.itemIndex] : null;
+
+
+ /**
+ * The function that is called on click to turn zoom option of docs on/off.
+ */
+ @action
+ onZoomDocumentClick = (e: React.MouseEvent) => {
+ e.stopPropagation();
+ const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
+ activeItem.presZoomButton = !activeItem.presZoomButton;
+ if (activeItem.presZoomButton) {
+ activeItem.presNavButton = false;
+ }
+ }
+
+ /**
+ * The function that is called on click to turn navigation option of docs on/off.
+ */
+ @action
+ onNavigateDocumentClick = (e: React.MouseEvent) => {
+ e.stopPropagation();
+ const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
+ activeItem.presNavButton = !activeItem.presNavButton;
+ if (activeItem.presNavButton) {
+ activeItem.presZoomButton = false;
+ }
+ }
+
+ /**
+ * The function that is called on click to turn fading document after presented option on/off.
+ * It also makes sure that the option swithches from hide-after to this one, since both
+ * can't coexist.
+ */
+ @action
+ onFadeDocumentAfterPresentedClick = (e: React.MouseEvent) => {
+ e.stopPropagation();
+ const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
+ const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null);
+ activeItem.presFadeButton = !activeItem.presFadeButton;
+ if (!activeItem.presFadeButton) {
+ if (targetDoc) {
+ targetDoc.opacity = 1;
+ }
+ } else {
+ activeItem.presHideAfterButton = false;
+ if (this.rootDoc.presStatus && targetDoc) {
+ targetDoc.opacity = 0.5;
+ }
+ }
+ }
+
+ // @computed
+ // transitionTimer = (doc: Doc) => {
+ // const slider: HTMLInputElement = document.getElementById("toolbar-slider");
+ // // let output = document.getElementById("demo");
+ // // if (output && slider) output.innerHTML = slider.value; // Display the default slider value
+ // const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
+ // const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null);
+ // targetDoc.presTransition = slider ? (Number(slider.value) * 1000) : 0.5;
+ // }
+
+ setTransitionTime = (number: String) => {
+ const timeInMS = Number(number) * 1000;
+ const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
+ const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null);
+ if (targetDoc) targetDoc.presTransition = timeInMS;
+ }
+
+
render() {
// console.log("render = " + this.layoutDoc.title + " " + this.layoutDoc.presStatus);
- // const presOrderedDocs = DocListCast(this.rootDoc.presOrderedDocs);
+ // const presOrderedDocs = DocListCast(activeItem.presOrderedDocs);
// if (presOrderedDocs.length != this.childDocs.length || presOrderedDocs.some((pd, i) => pd !== this.childDocs[i])) {
// this.rootDoc.presOrderedDocs = new List<Doc>(this.childDocs.slice());
// }
@@ -325,6 +440,31 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
<FontAwesomeIcon icon={"arrow-right"} />
</div>
</div>
+ <div className="presBox-highlight" id="presBox-hightlight" />
+ <div className="presBox-toolbar">
+ <div className="toolbar-button"><FontAwesomeIcon icon={"plus"} onClick={this.toolbarTest} /></div>
+ <div className="toolbar-divider" />
+ <div className="toolbar-button"><FontAwesomeIcon icon={"plus"} onClick={this.viewLinks} /></div>
+ <div className="toolbar-button"><FontAwesomeIcon icon={"object-group"} onClick={this.toolbarTest} /></div>
+ <div className="toolbar-button"><FontAwesomeIcon icon={"eye"} onClick={this.toolbarTest} /></div>
+ <div className="toolbar-divider" />
+ <div className="toolbar-button" onClick={this.toggleTransitionTools}>
+ Transitions <FontAwesomeIcon className="toolbar-dropdown" icon={"angle-down"} />
+ <div className={`toolbar-transitionTools ${this.transitionTools ? "active" : ""}`} onPointerDown={e => e.stopPropagation()}>
+ <div className="toolbar-transitionButtons">
+ <button title="Zoom" className={`toolbar-transition ${this.activeItem?.presZoomButton ? "active" : ""}`} onClick={this.onZoomDocumentClick}><FontAwesomeIcon className="toolbar-icon" icon={"search-plus"} onPointerDown={e => e.stopPropagation()} />Zoom</button>
+ <button title="Navigate" className={`toolbar-transition ${this.activeItem?.presNavButton ? "active" : ""}`} onClick={this.onNavigateDocumentClick}><FontAwesomeIcon className="toolbar-icon" icon={"location-arrow"} onPointerDown={e => e.stopPropagation()} />Navigate</button>
+ <button title="Fade After" className={`toolbar-transition ${this.activeItem?.presFadeButton ? "active" : ""}`} onClick={this.onFadeDocumentAfterPresentedClick}><FontAwesomeIcon className="toolbar-icon" icon={"file-download"} onPointerDown={e => e.stopPropagation()} /> Fade After</button>
+ <input type="range" min="0.1" max="10" defaultValue="0.5" className="toolbar-slider" id="toolbar-slider" onChange={(e: React.ChangeEvent<HTMLInputElement>) => this.setTransitionTime(e.target.value)} />
+ {/* <button title="Hide After" className={pbi + (this.rootDoc.presHideAfterButton ? "-selected" : "")} onClick={this.onHideDocumentAfterPresentedClick}><FontAwesomeIcon icon={"file-download"} onPointerDown={e => e.stopPropagation()} /></button> */}
+ {/* <button title="Hide Before" className={pbi + (this.rootDoc.presHideTillShownButton ? "-selected" : "")} onClick={this.onHideDocumentUntilPressClick}><FontAwesomeIcon icon={"file"} onPointerDown={e => e.stopPropagation()} /></button>
+ <button title="Group With Up" className={pbi + (this.rootDoc.presGroupButton ? "-selected" : "")} onClick={e => { e.stopPropagation(); this.rootDoc.presGroupButton = !this.rootDoc.presGroupButton; }}><FontAwesomeIcon icon={"arrow-up"} onPointerDown={e => e.stopPropagation()} /></button>
+ <button title="Progressivize" className={pbi + (this.rootDoc.pres ? "-selected" : "")} onClick={this.progressivize}><FontAwesomeIcon icon={"tasks"} onPointerDown={e => e.stopPropagation()} /></button> */}
+ </div>
+ </div>
+ </div>
+ <div className="toolbar-divider" />
+ </div>
<div className="presBox-listCont" >
{mode !== CollectionViewType.Invalid ?
<CollectionView {...this.props}
diff --git a/src/client/views/presentationview/PresElementBox.scss b/src/client/views/presentationview/PresElementBox.scss
index dbe6b0d4f..6d37ede8a 100644
--- a/src/client/views/presentationview/PresElementBox.scss
+++ b/src/client/views/presentationview/PresElementBox.scss
@@ -44,45 +44,45 @@
box-shadow: black 2px 2px 5px;
}
-.presElementBox-closeIcon {
- border-radius: 20px;
- transform: scale(0.7);
- position: absolute;
- right: 0;
- top: 0;
- padding: 8px;
-}
-
-
.presElementBox-buttons {
- display: flow-root;
- position: relative;
+ display: grid;
+ grid-template-rows: 15px;
+ top: 15px;
+ left: -20;
+ position: absolute;
width: 100%;
height: auto;
.presElementBox-interaction {
- color: gray;
- float: left;
- padding: 0px;
- width: 20px;
- height: 20px;
+ display: none;
}
.presElementBox-interaction-selected {
- color: white;
+ color: grey;
+ background-color: rgba(0, 0, 0, 0);
float: left;
padding: 0px;
width: 20px;
height: 20px;
- border: solid 1px darkgray;
}
}
-.presElementBox-name {
+.presElementBox-number {
font-size: 12px;
+ font-weight: 700;
+ left: -15;
position: absolute;
display: inline-block;
- width: calc(100% - 45px);
+ overflow: hidden;
+}
+
+.presElementBox-name {
+ font-size: 13px;
+ position: relative;
+ left: 10px;
+ top: 4px;
+ letter-spacing: normal;
+ width: calc(100% - 60px);
text-overflow: ellipsis;
overflow: hidden;
white-space: pre;
@@ -106,45 +106,41 @@
z-index: 2;
}
-@media only screen and (max-device-width: 480px) {
- .presElementBox-buttons {
- display: inline-flex;
- position: absolute;
- top: 0;
- right: 0;
- z-index: 3;
- width: 50%;
-
- .presElementBox-interaction {
- width: 50;
- height: 50;
- }
-
- .presElementBox-interaction-selected {
- width: 50;
- height: 50;
- }
- }
-
- .presElementBox-item {
- display: inline-flex;
- overflow: hidden;
- }
-
- .presElementBox-closeIcon {
- transform: scale(1.5);
- right: 10;
- top: 10;
- }
+.presElementBox-closeIcon {
+ position: absolute;
+ border-radius: 100%;
+ z-index: 300;
+ right: 3px;
+ top: 3px;
+ width: 20px;
+ height: 20px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
- .presElementBox-name {
- font-size: 30px;
- top: 10px;
- z-index: 3;
- width: 50%;
- }
+.presElementBox-expand {
+ position: absolute;
+ border-radius: 100%;
+ z-index: 300;
+ right: 26px;
+ top: 3px;
+ width: 20px;
+ height: 20px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
- .presElementBox-embedded {
- transform: translate(0, 90px) scale(1.5);
- }
-} \ No newline at end of file
+.presElementBox-expand-selected {
+ position: absolute;
+ border-radius: 100%;
+ right: 3px;
+ bottom: 3px;
+ width: 20px;
+ height: 20px;
+ z-index: 200;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx
index 6fd3455b6..bca63e94d 100644
--- a/src/client/views/presentationview/PresElementBox.tsx
+++ b/src/client/views/presentationview/PresElementBox.tsx
@@ -164,10 +164,18 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
*/
ScreenToLocalListTransform = (xCord: number, yCord: number) => [xCord, yCord];
+ @action
+ presExpandDocumentClick = () => {
+ const highlight = document.getElementById("presBox-hightlight");
+ this.rootDoc.presExpandInlineButton = !this.rootDoc.presExpandInlineButton;
+ if (highlight && this.rootDoc.presExpandInlineButton) highlight.style.height = "156";
+ else if (highlight && !this.rootDoc.presExpandInlineButton) highlight.style.height = "58";
+ }
+
embedHeight = () => Math.min(this.props.PanelWidth() - 20, this.props.PanelHeight() - this.collapsedHeight);
embedWidth = () => this.props.PanelWidth() - 20;
/**
- * The function that is responsible for rendering the a preview or not for this
+ * The function that is responsible for rendering a preview or not for this
* presentation element.
*/
@computed get renderEmbeddedInline() {
@@ -214,13 +222,25 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
style={{ outlineWidth: Doc.IsBrushed(this.targetDoc) ? `1px` : "0px", }}
onClick={e => { this.props.focus(this.rootDoc); e.stopPropagation(); }}>
{treecontainer ? (null) : <>
- <strong className="presElementBox-name">
- {`${this.indexInPres + 1}. ${this.targetDoc?.title}`}
- </strong>
- <button className="presElementBox-closeIcon" onPointerDown={e => e.stopPropagation()} onClick={e => {
- this.props.removeDocument?.(this.rootDoc);
- e.stopPropagation();
- }}>X</button>
+ <div className="presElementBox-number">
+ {`${this.indexInPres + 1}.`}
+ </div>
+ <div className="presElementBox-name">
+ {`${this.targetDoc?.title}`}
+ </div>
+ <button
+ title="Close"
+ className="presElementBox-closeIcon"
+ onPointerDown={e => e.stopPropagation()}
+ onClick={e => {
+ this.props.removeDocument?.(this.rootDoc);
+ e.stopPropagation();
+ }}>
+ <FontAwesomeIcon icon={"times"} onPointerDown={e => e.stopPropagation()} />
+ </button>
+ <button title="Expand Inline" className={"presElementBox-expand" + (this.rootDoc.presExpandInlineButton ? "-selected" : "")} onClick={e => { e.stopPropagation(); this.presExpandDocumentClick(); }}>
+ <FontAwesomeIcon icon={(this.rootDoc.presExpandInlineButton ? "angle-up" : "angle-down")} onPointerDown={e => e.stopPropagation()} />
+ </button>
<br />
</>}
<div className="presElementBox-buttons">
@@ -229,9 +249,8 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
<button title="Hide Before" className={pbi + (this.rootDoc.presHideTillShownButton ? "-selected" : "")} onClick={this.onHideDocumentUntilPressClick}><FontAwesomeIcon icon={"file"} onPointerDown={e => e.stopPropagation()} /></button>
<button title="Fade After" className={pbi + (this.rootDoc.presFadeButton ? "-selected" : "")} onClick={this.onFadeDocumentAfterPresentedClick}><FontAwesomeIcon icon={"file-download"} onPointerDown={e => e.stopPropagation()} /></button>
<button title="Hide After" className={pbi + (this.rootDoc.presHideAfterButton ? "-selected" : "")} onClick={this.onHideDocumentAfterPresentedClick}><FontAwesomeIcon icon={"file-download"} onPointerDown={e => e.stopPropagation()} /></button>
- <button title="Group With Up" className={pbi + (this.rootDoc.presGroupButton ? "-selected" : "")} onClick={e => { e.stopPropagation(); this.rootDoc.presGroupButton = !this.rootDoc.presGroupButton; }}><FontAwesomeIcon icon={"arrow-up"} onPointerDown={e => e.stopPropagation()} /></button>
+ {/* <button title="Group With Up" className={pbi + (this.rootDoc.presGroupButton ? "-selected" : "")} onClick={e => { e.stopPropagation(); this.rootDoc.presGroupButton = !this.rootDoc.presGroupButton; }}><FontAwesomeIcon icon={"arrow-up"} onPointerDown={e => e.stopPropagation()} /></button> */}
<button title="Progressivize" className={pbi + (this.rootDoc.pres ? "-selected" : "")} onClick={this.progressivize}><FontAwesomeIcon icon={"tasks"} onPointerDown={e => e.stopPropagation()} /></button>
- <button title="Expand Inline" className={pbi + (this.rootDoc.presExpandInlineButton ? "-selected" : "")} onClick={e => { e.stopPropagation(); this.rootDoc.presExpandInlineButton = !this.rootDoc.presExpandInlineButton; }}><FontAwesomeIcon icon={"arrow-down"} onPointerDown={e => e.stopPropagation()} /></button>
</div>
{this.renderEmbeddedInline}
</div>
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 17:04:18 +0000