Add button to get applet into view

Author: martenrichter

src/index.css

@@ -218,7 +218,54 @@ code {
   left: 0.8rem;
   top: 0.5rem;
   color: white;
-} 
+}
+
+.appletAbove {
+  cursor: auto;
+  background-color: #003d5ee5;
+  width: 2.357rem; 
+  height: 2.357rem;
+  border-radius: 0rem 2rem 2rem 2rem;
+  transform: translate(0rem, 0rem) rotate(45deg);
+  transition: transform 0.5s ease;
+}
+
+.appletAbove.appletAboveHidden{
+  transform: translate(0rem, -10rem) rotate(45deg);
+}
+
+
+.appletAboveContent {
+  transform: rotate(-45deg);
+  position: absolute;
+  left: 0.8rem;
+  top: 0.5rem;
+  color: white;
+}
+
+.appletBelow{
+  cursor: auto;
+  background-color: #003d5ee5;
+  left: 0.7rem;
+  width: 2.357rem; 
+  height: 2.357rem;
+  border-radius: 0rem 2rem 2rem 2rem;
+  transform: translate(0rem, -0rem) rotate(225deg);
+  transition: transform 0.5s ease;
+}
+
+.appletBelowContent {
+  transform: rotate(-225deg);
+  position: absolute;
+  left: 0.8rem;
+  top: 0.5rem;
+  color: white;
+}
+
+.appletBelow.appletBelowHidden{
+   transform: translate(0rem, 10rem) rotate(225deg);
+}
+
 
 
 @keyframes fadeInAppletMain {

src/ui/blackboard/blackboard.jsx

@@ -1054,6 +1054,8 @@ export class Blackboard extends Component {
             {this.props.experimental && this.state.appon && (
               <JupyterHublet
                 pos={this.state.apppos}
+                scrollpos={this.state.curscrollpos + this.state.scrolloffset}
+                scrollheight={this.scrollheight()}
                 deactivated={this.state.appdeactivated}
                 isnotepad={this.props.isnotepad}
                 bbwidth={this.props.bbwidth}

src/ui/blackboard/jupyterhublet.jsx

@@ -25,7 +25,9 @@ import {
   faCamera,
   faChevronLeft,
   faChevronRight,
-  faArrowsLeftRight
+  faChevronDown,
+  faArrowsLeftRight,
+  faChevronUp
 } from '@fortawesome/free-solid-svg-icons'
 import { fiSteer } from '../icons/icons.jsx'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
@@ -1111,6 +1113,14 @@ export class JupyterHublet extends Component {
     let className = 'appletMain'
     if (this.state.movepos || this.state.resize) className += ' appletMainMove'
     if (this.props.laserPointerOn) className += ' appletMainLaserPointer'
+    console.log(
+      'check below',
+      this.props.pos.y > (this.props.scrollpos ?? 0) + this.props.scrollheight,
+      this.props.pos.y,
+      this.props.scrollpos ?? 0,
+      this.props.scrollheight
+    )
+
     return (
       <Fragment>
         <div
@@ -1412,6 +1422,84 @@ export class JupyterHublet extends Component {
             <FontAwesomeIcon icon={faChevronRight} />
           </div>
         </div>
+
+        <div
+          className={
+            this.props.pos.y + this.props.pos.height <
+            (this.props.scrollpos ?? 0)
+              ? 'appletAbove'
+              : 'appletAbove appletAboveHidden'
+          }
+          key='appletAbove'
+          onPointerDown={stopProp}
+          onPointerMove={stopProp}
+          onPointerUp={stopProp}
+          onClick={(event) =>
+            this.props.submitAppPosition(
+              this.props.pos.x,
+              this.props.scrollpos + 0.1,
+              this.props.pos.width,
+              this.props.pos.height,
+              false
+            )
+          }
+          style={{
+            position: 'absolute',
+            left:
+              (this.props.pos.x + this.props.pos.width * 0.5) *
+                this.props.bbwidth -
+              0.5 * buttonHSize +
+              'px',
+            top: this.props.scrollpos * this.props.bbwidth + 5 + 'px',
+            zIndex: this.props.zIndex
+          }}
+        >
+          <div className='appletAboveContent'>
+            <FontAwesomeIcon icon={faChevronDown} />
+          </div>
+        </div>
+
+        <div
+          className={
+            this.props.pos.y >
+            (this.props.scrollpos ?? 0) + this.props.scrollheight
+              ? 'appletBelow'
+              : 'appletBelow appletBelowHidden'
+          }
+          key='appletBelow'
+          onPointerDown={stopProp}
+          onPointerMove={stopProp}
+          onPointerUp={stopProp}
+          onClick={(event) =>
+            this.props.submitAppPosition(
+              this.props.pos.x,
+              this.props.scrollpos + 0.1,
+              this.props.pos.width,
+              this.props.pos.height,
+              false
+            )
+          }
+          style={{
+            position: 'absolute',
+            left:
+              (this.props.pos.x + this.props.pos.width * 0.5) *
+                this.props.bbwidth -
+              0.5 * buttonHSize +
+              'px',
+            top:
+              (this.props.scrollpos + this.props.scrollheight) *
+                this.props.bbwidth -
+              buttonVSize +
+              5 +
+              'px',
+            zIndex: this.props.zIndex
+          }}
+        >
+          <div className='appletBelowContent'>
+            <FontAwesomeIcon icon={faChevronUp} />
+          </div>
+        </div>
+
         <OverlayPanel className='tbChild' ref={this.jupyterinfo} showCloseIcon>
           <h3>
             <div style={{ display: 'flex', alignItems: 'center' }}>