From 8dcc7bff9430fe3cca8271501595ff89b36f7005 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Thu, 30 Apr 2020 23:20:13 -0400
Subject: cleaned up presbox and preselementbox

---
 .../views/presentationview/PresElementBox.scss     |  43 +++++----
 .../views/presentationview/PresElementBox.tsx      | 106 +++++++++------------
 2 files changed, 68 insertions(+), 81 deletions(-)

(limited to 'src/client/views/presentationview')

diff --git a/src/client/views/presentationview/PresElementBox.scss b/src/client/views/presentationview/PresElementBox.scss
index 8370af490..ccd2e8947 100644
--- a/src/client/views/presentationview/PresElementBox.scss
+++ b/src/client/views/presentationview/PresElementBox.scss
@@ -1,5 +1,4 @@
 .presElementBox-item {
-    padding: 10px;
     display: inline-block;
     background-color: #eeeeee;
     pointer-events: all;
@@ -16,7 +15,6 @@
     user-select: none;
     transition: all .1s; 
     padding: 0px;
-    padding-left: 5px;
     padding-bottom: 3px;
     .documentView-node {
         position: absolute;
@@ -38,7 +36,7 @@
     border-radius: 6px;
 }
 
-.presElementBox-selected {
+.presElementBox-active {
     background: gray;
     color: black;
     border-radius: 6px;
@@ -54,20 +52,27 @@
     padding: 8px;
 }
 
-.presElementBox-interaction {
-    color: gray;
-    float: left;
-    padding: 0px;
-    width: 20px;
-    height: 20px;
-}
 
-.presElementBox-interaction-selected {
-    color: white;
-    float: left;
-    padding: 0px;
-    width: 22px;
-    height: 22px;
+.presElementBox-buttons {
+    display: flow-root;
+    position: relative;
+    width: 100%;
+    height: auto;
+    .presElementBox-interaction {
+        color: gray;
+        float: left;
+        padding: 0px;
+        width: 20px;
+        height: 20px;
+    }
+    .presElementBox-interaction-selected {
+        color: white;
+        float: left;
+        padding: 0px;
+        width: 20px;
+        height: 20px;
+        border: solid 1px darkgray;
+    }
 }
 
 .presElementBox-name {
@@ -82,14 +87,10 @@
 
 .presElementBox-embedded {
     position: relative;
-    margin-top: 22;
     display: flex;
     width: auto;
     justify-content: center;
-    .contentFittingDocumentView {
-        position: absolute;
-        height: 100%;
-    }
+    margin:auto;
 }
 
 .presElementBox-embeddedMask {
diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx
index dd0cbf929..66f251b93 100644
--- a/src/client/views/presentationview/PresElementBox.tsx
+++ b/src/client/views/presentationview/PresElementBox.tsx
@@ -1,6 +1,3 @@
-import { library } from '@fortawesome/fontawesome-svg-core';
-import { faFile as fileRegular } from '@fortawesome/free-regular-svg-icons';
-import { faArrowDown, faArrowUp, faFile as fileSolid, faFileDownload, faLocationArrow, faSearch } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { action, computed, IReactionDisposer, reaction } from "mobx";
 import { observer } from "mobx-react";
@@ -18,23 +15,16 @@ import { FieldView, FieldViewProps } from '../nodes/FieldView';
 import "./PresElementBox.scss";
 import React = require("react");
 
-library.add(faArrowUp);
-library.add(fileSolid);
-library.add(faLocationArrow);
-library.add(fileRegular as any);
-library.add(faSearch);
-library.add(faArrowDown);
-
 export const presSchema = createSchema({
     presentationTargetDoc: Doc,
     presBox: Doc,
-    zoomButton: "boolean",
-    navButton: "boolean",
-    hideTillShownButton: "boolean",
-    fadeButton: "boolean",
-    hideAfterButton: "boolean",
-    groupButton: "boolean",
-    expandInlineButton: "boolean"
+    presZoomButton: "boolean",
+    presNavButton: "boolean",
+    presHideTillShownButton: "boolean",
+    presFadeButton: "boolean",
+    presHideAfterButton: "boolean",
+    presGroupButton: "boolean",
+    presExpandInlineButton: "boolean"
 });
 
 type PresDocument = makeInterface<[typeof presSchema, typeof documentSchema]>;
@@ -48,16 +38,14 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
     public static LayoutString(fieldKey: string) { return FieldView.LayoutString(PresElementBox, fieldKey); }
 
     _heightDisposer: IReactionDisposer | undefined;
-    @computed get indexInPres() { return NumCast(this.presElementDoc?.presentationIndex); }
-    @computed get presBoxDoc() { return Cast(this.presElementDoc?.presBox, Doc) as Doc; }
-    @computed get presElementDoc() { return this.rootDoc; }
-    @computed get presLayoutDoc() { return this.layoutDoc; }
-    @computed get targetDoc() { return this.presElementDoc?.presentationTargetDoc as Doc; }
+    @computed get indexInPres() { return NumCast(this.rootDoc.presentationIndex); }
+    @computed get presBoxDoc() { return Cast(this.rootDoc.presBox, Doc) as Doc; }
+    @computed get targetDoc() { return this.rootDoc.presentationTargetDoc as Doc; }
     @computed get currentIndex() { return NumCast(this.presBoxDoc?._itemIndex); }
 
     componentDidMount() {
-        this._heightDisposer = reaction(() => [this.presElementDoc.expandInlineButton, this.presElementDoc.collapsedHeight],
-            params => this.presLayoutDoc._height = NumCast(params[1]) + (Number(params[0]) ? 100 : 0), { fireImmediately: true });
+        this._heightDisposer = reaction(() => [this.rootDoc.presExpandInlineButton, this.rootDoc.presCollapsedHeight],
+            params => this.layoutDoc._height = NumCast(params[1]) + (Number(params[0]) ? 100 : 0), { fireImmediately: true });
     }
     componentWillUnmount() {
         this._heightDisposer?.();
@@ -70,8 +58,8 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
     @action
     onHideDocumentUntilPressClick = (e: React.MouseEvent) => {
         e.stopPropagation();
-        this.presElementDoc.hideTillShownButton = !this.presElementDoc.hideTillShownButton;
-        if (!this.presElementDoc.hideTillShownButton) {
+        this.rootDoc.presHideTillShownButton = !this.rootDoc.presHideTillShownButton;
+        if (!this.rootDoc.presHideTillShownButton) {
             if (this.indexInPres >= this.currentIndex && this.targetDoc) {
                 this.targetDoc.opacity = 1;
             }
@@ -90,13 +78,13 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
     @action
     onHideDocumentAfterPresentedClick = (e: React.MouseEvent) => {
         e.stopPropagation();
-        this.presElementDoc.hideAfterButton = !this.presElementDoc.hideAfterButton;
-        if (!this.presElementDoc.hideAfterButton) {
+        this.rootDoc.presHideAfterButton = !this.rootDoc.presHideAfterButton;
+        if (!this.rootDoc.presHideAfterButton) {
             if (this.indexInPres <= this.currentIndex && this.targetDoc) {
                 this.targetDoc.opacity = 1;
             }
         } else {
-            if (this.presElementDoc.fadeButton) this.presElementDoc.fadeButton = false;
+            if (this.rootDoc.presFadeButton) this.rootDoc.presFadeButton = false;
             if (this.presBoxDoc.presStatus && this.indexInPres < this.currentIndex && this.targetDoc) {
                 this.targetDoc.opacity = 0;
             }
@@ -111,13 +99,13 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
     @action
     onFadeDocumentAfterPresentedClick = (e: React.MouseEvent) => {
         e.stopPropagation();
-        this.presElementDoc.fadeButton = !this.presElementDoc.fadeButton;
-        if (!this.presElementDoc.fadeButton) {
+        this.rootDoc.presFadeButton = !this.rootDoc.presFadeButton;
+        if (!this.rootDoc.presFadeButton) {
             if (this.indexInPres <= this.currentIndex && this.targetDoc) {
                 this.targetDoc.opacity = 1;
             }
         } else {
-            this.presElementDoc.hideAfterButton = false;
+            this.rootDoc.presHideAfterButton = false;
             if (this.presBoxDoc.presStatus && (this.indexInPres < this.currentIndex) && this.targetDoc) {
                 this.targetDoc.opacity = 0.5;
             }
@@ -130,11 +118,11 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
     @action
     onNavigateDocumentClick = (e: React.MouseEvent) => {
         e.stopPropagation();
-        this.presElementDoc.navButton = !this.presElementDoc.navButton;
-        if (this.presElementDoc.navButton) {
-            this.presElementDoc.zoomButton = false;
+        this.rootDoc.presNavButton = !this.rootDoc.presNavButton;
+        if (this.rootDoc.presNavButton) {
+            this.rootDoc.presZoomButton = false;
             if (this.currentIndex === this.indexInPres) {
-                this.props.focus(this.presElementDoc);
+                this.props.focus(this.rootDoc);
             }
         }
     }
@@ -146,13 +134,11 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
     onZoomDocumentClick = (e: React.MouseEvent) => {
         e.stopPropagation();
 
-        this.presElementDoc.zoomButton = !this.presElementDoc.zoomButton;
-        if (!this.presElementDoc.zoomButton) {
-            this.presElementDoc.viewScale = 1;
-        } else {
-            this.presElementDoc.navButton = false;
+        this.rootDoc.presZoomButton = !this.rootDoc.presZoomButton;
+        if (this.rootDoc.presZoomButton) {
+            this.rootDoc.presNavButton = false;
             if (this.currentIndex === this.indexInPres) {
-                this.props.focus(this.presElementDoc);
+                this.props.focus(this.rootDoc);
             }
         }
     }
@@ -161,15 +147,15 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
      */
     ScreenToLocalListTransform = (xCord: number, yCord: number) => [xCord, yCord];
 
-    embedHeight = () => this.props.PanelHeight() - NumCast(this.presElementDoc.collapsedHeight);
+    embedHeight = () => Math.min(this.props.PanelWidth() - 20, this.props.PanelHeight() - NumCast(this.rootDoc.presCollapsedHeight));
     embedWidth = () => this.props.PanelWidth() - 20;
     /**
      * The function that is responsible for rendering the a preview or not for this
      * presentation element.
      */
-    renderEmbeddedInline = () => {
-        return !this.presElementDoc.expandInlineButton || !this.targetDoc ? (null) :
-            <div className="presElementBox-embedded" style={{ height: this.embedHeight() }}>
+    @computed get renderEmbeddedInline() {
+        return !this.rootDoc.presExpandInlineButton || !this.targetDoc ? (null) :
+            <div className="presElementBox-embedded" style={{ height: this.embedHeight(), width: this.embedWidth() }}>
                 <ContentFittingDocumentView
                     Document={this.targetDoc}
                     DataDocument={this.targetDoc[DataSym] !== this.targetDoc && this.targetDoc[DataSym]}
@@ -195,29 +181,29 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
 
     render() {
         const treecontainer = this.props.ContainingCollectionDoc?._viewType === CollectionViewType.Tree;
-        const className = "presElementBox-item" + (this.currentIndex === this.indexInPres ? " presElementBox-selected" : "");
+        const className = "presElementBox-item" + (this.currentIndex === this.indexInPres ? " presElementBox-active" : "");
         const pbi = "presElementBox-interaction";
-        return !(this.presElementDoc instanceof Doc) || this.targetDoc instanceof Promise ? (null) : (
+        return !(this.rootDoc instanceof Doc) || this.targetDoc instanceof Promise ? (null) : (
             <div className={className} key={this.props.Document[Id] + this.indexInPres}
                 style={{ outlineWidth: Doc.IsBrushed(this.targetDoc) ? `1px` : "0px", }}
-                onClick={e => { this.props.focus(this.presElementDoc); e.stopPropagation(); }}>
+                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.presElementDoc)}>X</button>
+                    <button className="presElementBox-closeIcon" onPointerDown={e => e.stopPropagation()} onClick={e => this.props.removeDocument?.(this.rootDoc)}>X</button>
                     <br />
                 </>}
-                <button title="Zoom" className={pbi + (this.presElementDoc.zoomButton ? "-selected" : "")} onPointerDown={e => e.stopPropagation()} onClick={this.onZoomDocumentClick}><FontAwesomeIcon icon={"search"} /></button>
-                <button title="Navigate" className={pbi + (this.presElementDoc.navButton ? "-selected" : "")} onPointerDown={e => e.stopPropagation()} onClick={this.onNavigateDocumentClick}><FontAwesomeIcon icon={"location-arrow"} /></button>
-                <button title="Hide Before" className={pbi + (this.presElementDoc.hideTillShownButton ? "-selected" : "")} onPointerDown={e => e.stopPropagation()} onClick={this.onHideDocumentUntilPressClick}><FontAwesomeIcon icon={fileSolid} /></button>
-                <button title="Fade After" className={pbi + (this.presElementDoc.fadeButton ? "-selected" : "")} onPointerDown={e => e.stopPropagation()} onClick={this.onFadeDocumentAfterPresentedClick}><FontAwesomeIcon icon={faFileDownload} /></button>
-                <button title="Hide After" className={pbi + (this.presElementDoc.hideAfterButton ? "-selected" : "")} onPointerDown={e => e.stopPropagation()} onClick={this.onHideDocumentAfterPresentedClick}><FontAwesomeIcon icon={faFileDownload} /></button>
-                <button title="Group With Up" className={pbi + (this.presElementDoc.groupButton ? "-selected" : "")} onPointerDown={e => e.stopPropagation()} onClick={e => { e.stopPropagation(); this.presElementDoc.groupButton = !this.presElementDoc.groupButton; }}><FontAwesomeIcon icon={"arrow-up"} /></button>
-                <button title="Expand Inline" className={pbi + (this.presElementDoc.expandInlineButton ? "-selected" : "")} onPointerDown={e => e.stopPropagation()} onClick={e => { e.stopPropagation(); this.presElementDoc.expandInlineButton = !this.presElementDoc.expandInlineButton; }}><FontAwesomeIcon icon={"arrow-down"} /></button>
-
-                <br style={{ lineHeight: 0.1 }} />
-                {this.renderEmbeddedInline()}
+                <div className="presElementBox-buttons">
+                    <button title="Zoom" className={pbi + (this.rootDoc.presZoomButton ? "-selected" : "")} onClick={this.onZoomDocumentClick}><FontAwesomeIcon icon={"search"} onPointerDown={e => e.stopPropagation()} /></button>
+                    <button title="Navigate" className={pbi + (this.rootDoc.presNavButton ? "-selected" : "")} onClick={this.onNavigateDocumentClick}><FontAwesomeIcon icon={"location-arrow"} 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="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="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>
         );
     }
-- 
cgit v1.2.3-70-g09d2