From d4656b108813ed4719bd3174ca093b43e440f787 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Wed, 14 Sep 2022 00:40:44 -0400
Subject: fixed presbox mini player to allow mini player and full size player
 at the same time and to be a playground field for sharing.  distringuished
 preselementbox feedback for selected vs. activeItem using border.

---
 src/client/views/nodes/trails/PresBox.tsx         |  11 +-
 src/client/views/nodes/trails/PresElementBox.scss | 337 +++++++++++-----------
 src/client/views/nodes/trails/PresElementBox.tsx  |   6 +-
 3 files changed, 176 insertions(+), 178 deletions(-)

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

diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx
index a4db2d777..5bede448d 100644
--- a/src/client/views/nodes/trails/PresBox.tsx
+++ b/src/client/views/nodes/trails/PresBox.tsx
@@ -239,16 +239,13 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
     // TODO: to handle child slides (entering into subtrail and exiting), also the next() and back() functions
     // No more frames in current doc and next slide is defined, therefore move to next slide
     nextSlide = (activeNext: Doc) => {
-        const targetNext = Cast(activeNext.presentationTargetDoc, Doc, null);
-        console.info('nextSlide', activeNext.title, targetNext?.title);
         let nextSelected = this.itemIndex + 1;
         this.gotoDocument(nextSelected, this.activeItem);
         for (nextSelected = nextSelected + 1; nextSelected < this.childDocs.length; nextSelected++) {
-            if (!this.childDocs[nextSelected].groupWithUp) {
-                break;
-            } else {
-                console.log('Title: ' + this.childDocs[nextSelected].title);
+            if (this.childDocs[nextSelected].groupWithUp) {
                 this.gotoDocument(nextSelected, this.activeItem, true);
+            } else {
+                break;
             }
         }
     };
@@ -2578,7 +2575,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
         const mode = StrCast(this.rootDoc._viewType) as CollectionViewType;
         const presEnd: boolean = !this.layoutDoc.presLoop && this.itemIndex === this.childDocs.length - 1;
         const presStart: boolean = !this.layoutDoc.presLoop && this.itemIndex === 0;
-        return DocListCast(Doc.MyOverlayDocs?.data).includes(this.rootDoc) ? (
+        return this.props.addDocTab === returnFalse ? ( // bcz: hack!! - addDocTab === returnFalse only when this is being rendered by the OverlayView which means the doc is a mini player
             <div className="miniPres" onClick={e => e.stopPropagation()} onPointerEnter={action(e => (this._forceKeyEvents = true))}>
                 <div
                     className="presPanelOverlay"
diff --git a/src/client/views/nodes/trails/PresElementBox.scss b/src/client/views/nodes/trails/PresElementBox.scss
index 969f034a8..8a6c2a6dc 100644
--- a/src/client/views/nodes/trails/PresElementBox.scss
+++ b/src/client/views/nodes/trails/PresElementBox.scss
@@ -1,161 +1,159 @@
-$light-blue: #AEDDF8;
-$dark-blue: #5B9FDD;
+$light-blue: #aeddf8;
+$dark-blue: #5b9fdd;
 $light-background: #ececec;
 $slide-background: #d5dce2;
-$slide-active: #5B9FDD;
+$slide-active: #5b9fdd;
 
 .presItem-container {
-      cursor: grab;
-      display: flex;
-      grid-template-columns: 20px auto;
-      font-family: Roboto;
-      letter-spacing: normal;
-      position: relative;
-      pointer-events: all;
-      width: 100%;
-      height: 100%;
-      font-weight: 400;
-      -webkit-touch-callout: none;
-      -webkit-user-select: none;
-      -khtml-user-select: none;
-      -moz-user-select: none;
-      -ms-user-select: none;
-      user-select: none;
-      align-items: center;
-
-      //     .presItem-number {
-      //         margin-top: 3.5px;
-      //         font-size: 12px;
-      //         font-weight: 700;
-      //         text-align: center;
-      //         justify-self: center;
-      //         align-self: flex-start;
-      //         position: relative;
-      //         display: inline-block;
-      //         overflow: hidden;
-      //     }
+    cursor: grab;
+    display: flex;
+    grid-template-columns: 20px auto;
+    font-family: Roboto;
+    letter-spacing: normal;
+    position: relative;
+    pointer-events: all;
+    width: 100%;
+    height: 100%;
+    font-weight: 400;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    align-items: center;
 
+    //     .presItem-number {
+    //         margin-top: 3.5px;
+    //         font-size: 12px;
+    //         font-weight: 700;
+    //         text-align: center;
+    //         justify-self: center;
+    //         align-self: flex-start;
+    //         position: relative;
+    //         display: inline-block;
+    //         overflow: hidden;
+    //     }
 }
 
 .presItem-slide {
-      position: relative;
-      height: 100%;
-      width: 100%;
-      border-bottom: .5px solid grey;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      grid-template-rows: 16px 10px auto;
-      grid-template-columns: max-content max-content max-content max-content auto;
+    position: relative;
+    height: 100%;
+    width: 100%;
+    border-bottom: 0.5px solid grey;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    grid-template-rows: 16px 10px auto;
+    grid-template-columns: max-content max-content max-content max-content auto;
 
-      .presItem-name {
-            display: flex;
-            min-width: 20px;
-            z-index: 300;
-            top: 2px;
-            align-self: center;
-            font-size: 11px;
-            font-family: Roboto;
-            font-weight: 500;
-            position: relative;
-            padding-left: 10px;
-            padding-right: 10px;
-            letter-spacing: normal;
-            width: max-content;
-            text-overflow: ellipsis;
-            overflow: hidden;
-            white-space: pre;
-      }
+    .presItem-name {
+        display: flex;
+        min-width: 20px;
+        z-index: 300;
+        top: 2px;
+        align-self: center;
+        font-size: 11px;
+        font-family: Roboto;
+        font-weight: 500;
+        position: relative;
+        padding-left: 10px;
+        padding-right: 10px;
+        letter-spacing: normal;
+        width: max-content;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: pre;
+    }
 
-      .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;
-            grid-row: 2;
-            grid-column: 1/6;
-      }
+    .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;
+        grid-row: 2;
+        grid-column: 1/6;
+    }
 
-      .presItem-time {
-            align-self: center;
-            position: relative;
-            padding-right: 10px;
-            top: 1px;
-            font-size: 10;
-            font-weight: 300;
-            font-family: Roboto;
-            z-index: 300;
-            letter-spacing: normal;
-      }
+    .presItem-time {
+        align-self: center;
+        position: relative;
+        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;
-            width: auto;
-            justify-content: center;
-            margin: auto;
-            margin-bottom: 2px;
-            border-bottom-left-radius: 5px;
-            border-bottom-right-radius: 5px;
-      }
+    .presItem-embedded {
+        overflow: hidden;
+        grid-row: 3;
+        grid-column: 1/8;
+        position: relative;
+        display: flex;
+        width: auto;
+        justify-content: center;
+        margin: auto;
+        margin-bottom: 2px;
+        border-bottom-left-radius: 5px;
+        border-bottom-right-radius: 5px;
+    }
 
-      .presItem-embeddedMask {
-            width: 100%;
-            height: 100%;
-            position: absolute;
-            border-radius: 3px;
-            top: 0;
-            left: 0;
-            z-index: 1;
-            overflow: hidden;
-      }
+    .presItem-embeddedMask {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        border-radius: 3px;
+        top: 0;
+        left: 0;
+        z-index: 1;
+        overflow: hidden;
+    }
 
+    .presItem-slideButtons {
+        display: flex;
+        grid-column: 7;
+        grid-row: 1/3;
+        width: max-content;
+        justify-self: right;
+        justify-content: flex-end;
 
-      .presItem-slideButtons {
+        .slideButton {
+            cursor: pointer;
+            position: relative;
+            border-radius: 100px;
+            z-index: 300;
+            width: 18px;
+            height: 18px;
             display: flex;
-            grid-column: 7;
-            grid-row: 1/3;
-            width: max-content;
-            justify-self: right;
-            justify-content: flex-end;
-
-            .slideButton {
-                  cursor: pointer;
-                  position: relative;
-                  border-radius: 100px;
-                  z-index: 300;
-                  width: 18px;
-                  height: 18px;
-                  display: flex;
-                  font-size: 12px;
-                  justify-self: center;
-                  align-self: center;
-                  background-color: rgba(0, 0, 0, 0.5);
-                  color: white;
-                  justify-content: center;
-                  align-items: center;
-                  transition: 0.2s;
-                  margin-right: 3px;
-            }
+            font-size: 12px;
+            justify-self: center;
+            align-self: center;
+            background-color: rgba(0, 0, 0, 0.5);
+            color: white;
+            justify-content: center;
+            align-items: center;
+            transition: 0.2s;
+            margin-right: 3px;
+        }
 
-            .slideButton:hover {
-                  background-color: rgba(0, 0, 0, 1);
-                  transform: scale(1.2);
-            }
-      }
+        .slideButton:hover {
+            background-color: rgba(0, 0, 0, 1);
+            transform: scale(1.2);
+        }
+    }
 }
 
 // .presItem-slide:hover {
@@ -194,7 +192,8 @@ $slide-active: #5B9FDD;
 // }
 
 .presItem-slide.active {
-    box-shadow: 0 0 0px 2.5px $dark-blue;
+    //box-shadow: 0 0 0px 2.5px $dark-blue;
+    border: $dark-blue solid 2.5px;
 }
 
 .presItem-slide.group {
@@ -239,38 +238,38 @@ $slide-active: #5B9FDD;
 }
 
 .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;
+    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%;
+    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;
+    box-shadow: 0 0 0px 1.5px $dark-blue;
 }
 
 .expandButton {
@@ -306,4 +305,4 @@ $slide-active: #5B9FDD;
     top: 1;
     font-weight: 600;
     font-size: 12;
-}
\ No newline at end of file
+}
diff --git a/src/client/views/nodes/trails/PresElementBox.tsx b/src/client/views/nodes/trails/PresElementBox.tsx
index cf1621985..215bede96 100644
--- a/src/client/views/nodes/trails/PresElementBox.tsx
+++ b/src/client/views/nodes/trails/PresElementBox.tsx
@@ -449,6 +449,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
 
     @computed get mainItem() {
         const isSelected: boolean = this.selectedArray?.has(this.rootDoc) ? true : false;
+        const isCurrent: boolean = this.presBox._itemIndex === this.indexInPres;
         const toolbarWidth: number = this.toolbarWidth;
         const showMore: boolean = this.toolbarWidth >= 300;
         const miniView: boolean = this.toolbarWidth <= 110;
@@ -487,10 +488,11 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
                 ) : (
                     <div
                         ref={this._dragRef}
-                        className={`presItem-slide ${isSelected ? 'active' : ''}`}
+                        className={`presItem-slide ${isCurrent ? 'active' : ''}`}
                         style={{
                             backgroundColor: this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.BackgroundColor),
-                            boxShadow: presBoxColor && presBoxColor !== 'white' && presBoxColor !== 'transparent' ? (isSelected ? '0 0 0px 1.5px' + presBoxColor : undefined) : undefined,
+                            //boxShadow: presBoxColor && presBoxColor !== 'white' && presBoxColor !== 'transparent' ? (isCurrent ? '0 0 0px 1.5px' + presBoxColor : undefined) : undefined,
+                            border: presBoxColor && presBoxColor !== 'white' && presBoxColor !== 'transparent' ? (isCurrent ? presBoxColor + ' solid 2.5px' : undefined) : undefined,
                         }}>
                         <div
                             className="presItem-name"
-- 
cgit v1.2.3-70-g09d2