aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/util/DocumentManager.ts2
-rw-r--r--src/client/views/MainView.tsx4
-rw-r--r--src/client/views/nodes/PresBox.scss91
-rw-r--r--src/client/views/nodes/PresBox.tsx114
-rw-r--r--src/client/views/presentationview/PresElementBox.scss39
-rw-r--r--src/client/views/presentationview/PresElementBox.tsx23
6 files changed, 242 insertions, 31 deletions
diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts
index fb5d1717e..55ee5b4cf 100644
--- a/src/client/util/DocumentManager.ts
+++ b/src/client/util/DocumentManager.ts
@@ -170,7 +170,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 a0ce052f7..d96bcfba9 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -5,7 +5,7 @@ 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,
- faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faArrowsAlt, faQuoteLeft, faSortAmountDown, faAngleDown, faAngleUp
+ faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faArrowsAlt, faQuoteLeft, faSortAmountDown, faAngleDown, faAngleUp, faSearchPlus
} from '@fortawesome/free-solid-svg-icons';
import { ANTIMODEMENU_HEIGHT } from './globalCssVariables.scss';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -142,7 +142,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, faAngleDown, faAngleUp);
+ faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faArrowsAlt, faQuoteLeft, faSortAmountDown, faAngleDown, faAngleUp, faSearchPlus);
this.initEventListeners();
this.initAuthenticationRouters();
}
diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss
index d48000e16..9b040e6fe 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,11 +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;
@@ -24,6 +96,7 @@
display: grid;
grid-column-end: 4;
grid-column-start: 1;
+
.presBox-viewPicker {
height: 25;
position: relative;
@@ -31,10 +104,12 @@
grid-column: 1/2;
min-width: 15px;
}
+
select {
background: #323232;
color: white;
}
+
.presBox-button {
margin-right: 2.5%;
margin-left: 2.5%;
@@ -44,10 +119,12 @@
align-items: center;
background: #323232;
color: white;
+
svg {
margin: auto;
}
}
+
.collectionViewBaseChrome-viewPicker {
min-width: 50;
width: 5%;
@@ -56,17 +133,21 @@
display: inline-block;
}
}
- .presBox-backward, .presBox-forward {
+
+ .presBox-backward,
+ .presBox-forward {
width: 25px;
border-radius: 5px;
- top:50%;
+ top: 50%;
position: absolute;
display: inline-block;
}
+
.presBox-backward {
- left:5;
+ left: 5;
}
+
.presBox-forward {
- right:5;
+ right: 5;
}
} \ No newline at end of file
diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx
index 8818d375e..30b1e0058 100644
--- a/src/client/views/nodes/PresBox.tsx
+++ b/src/client/views/nodes/PresBox.tsx
@@ -20,6 +20,7 @@ import { PrefetchProxy } from "../../../fields/Proxy";
import { ScriptField } from "../../../fields/ScriptField";
import { Scripting } from "../../util/Scripting";
import { InkingStroke } from "../InkingStroke";
+import { HighlightSpanKind } from "typescript";
type PresBoxSchema = makeInterface<[typeof documentSchema]>;
const PresBoxDocument = makeInterface(documentSchema);
@@ -35,7 +36,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 +210,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 +313,76 @@ 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);
+ }
+
+ @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;
+ }
+ }
+ }
+
+
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 +409,30 @@ 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.toolbarTest} /></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>
+ {/* <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 e7aacb363..190b2c674 100644
--- a/src/client/views/presentationview/PresElementBox.scss
+++ b/src/client/views/presentationview/PresElementBox.scss
@@ -45,34 +45,44 @@
}
.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 {
- font-size: 12pxππ;
+.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;
@@ -113,8 +123,8 @@
position: absolute;
border-radius: 100%;
z-index: 300;
- right: 3px;
- bottom: 3px;
+ right: 26px;
+ top: 3px;
width: 20px;
height: 20px;
display: flex;
@@ -129,6 +139,7 @@
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 bfbb8a18d..561ba7062 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,9 +222,12 @@ 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>
+ <div className="presElementBox-number">
+ {`${this.indexInPres + 1}.`}
+ </div>
+ <div className="presElementBox-name">
+ {`${this.targetDoc?.title}`}
+ </div>
<button
title="Close"
className="presElementBox-closeIcon"
@@ -227,7 +238,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
}}>
<FontAwesomeIcon icon={"times"} onPointerDown={e => e.stopPropagation()} />
</button>
- <button title="Expand Inline" className={"presElementBox-expand" + (this.rootDoc.presExpandInlineButton ? "-selected" : "")} onClick={e => { e.stopPropagation(); this.rootDoc.presExpandInlineButton = !this.rootDoc.presExpandInlineButton; }}>
+ <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 />
@@ -238,7 +249,7 @@ 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>
</div>
{this.renderEmbeddedInline}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-08 10:20:18 +0000