redesigned presItems

1 files changed, 145 insertions, 37 deletions

diff --git a/src/client/views/presentationview/PresElementBox.scss b/src/client/views/presentationview/PresElementBox.scss
index 4642caeb2..cb97c398c 100644
--- a/src/client/views/presentationview/PresElementBox.scss
+++ b/src/client/views/presentationview/PresElementBox.scss
@@ -1,12 +1,14 @@
 $light-blue: #AEDDF8;
 $dark-blue: #5B9FDD;
 $light-background: #ececec;
+$slide-background: #d5dce2;
+$slide-hover: #98b7da;
+$slide-active: #5B9FDD;
 
-.presElementBox-item {
+.presItem-container {
     cursor: grab;
     display: grid;
-    grid-template-columns: max-content max-content max-content max-content;
-    background-color: #d5dce2;
+    grid-template-columns: 20px auto;
     font-family: Roboto;
     letter-spacing: normal;
     position: relative;
@@ -14,49 +16,123 @@ $light-background: #ececec;
     width: 100%;
     height: 100%;
     font-weight: 400;
-    border-radius: 6px;
     -webkit-touch-callout: none;
     -webkit-user-select: none;
     -khtml-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
-    transition: all .3s;
-    padding: 0px;
-    padding-bottom: 3px;
-
-    .presElementBox-highlight {
-        position: absolute;
-        transform: translate(-100px, -4px);
-        z-index: -1;
-        width: calc(100% + 200px);
-        height: calc(100% + 8px);
-        background-color: $light-blue;
+    align-items: center;
+
+    .presItem-number {
+        font-size: 12px;
+        font-weight: 700;
+        text-align: center;
+        justify-self: center;
+        align-self: center;
+        /* padding-right: 3%; */
+        /* width: 8%; */
+        position: relative;
+        display: inline-block;
+        overflow: hidden;
     }
 
-    .presElementBox-highlightTop {
-        position: absolute;
-        transform: translate(-100px, -4px);
-        z-index: -1;
-        width: calc(100% + 200px);
-        height: calc(50% + 4px);
+    .presItem-slide {
+        position: relative;
+        background-color: #d5dce2;
+        border-radius: 5px;
+        /* margin-left: 20px; */
+        height: calc(100% - 5px);
+        width: 100%;
+        display: grid;
+        grid-template-columns: max-content max-content max-content max-content auto;
+
+        .presItem-name {
+            z-index: 300;
+            align-self: center;
+            font-size: 13px;
+            font-family: Roboto;
+            font-weight: 500;
+            position: relative;
+            top: 1px;
+            padding-left: 10px;
+            padding-right: 10px;
+            letter-spacing: normal;
+            width: max-content;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: pre;
+        }
     }
 
-    .presElementBox-highlightBottom {
-        position: absolute;
-        transform: translate(-100px, 0px);
-        z-index: -1;
-        top: 50%;
-        width: calc(100% + 200px);
-        height: calc(50% + 4px);
+    .presItem-slide.active {
+        border: solid 2px $dark-blue;
     }
 
-    .documentView-node {
-        position: absolute;
-        z-index: 1;
+    .presItem-slide:hover {
+        background: $slide-hover;
     }
 }
 
+.presItem-slide {
+    position: relative;
+    background-color: #d5dce2;
+    border-radius: 5px;
+    /* margin-left: 20px; */
+    height: calc(100% - 5px);
+    width: 100%;
+    display: grid;
+    grid-template-columns: max-content max-content max-content max-content auto;
+
+    .presItem-name {
+        z-index: 300;
+        align-self: center;
+        font-size: 13px;
+        font-family: Roboto;
+        font-weight: 500;
+        position: relative;
+        top: 1px;
+        padding-left: 10px;
+        padding-right: 10px;
+        letter-spacing: normal;
+        width: max-content;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: pre;
+    }
+}
+
+.presElementBox-highlight {
+    position: absolute;
+    transform: translate(-100px, -4px);
+    z-index: -1;
+    width: calc(100% + 200px);
+    height: calc(100% + 8px);
+    background-color: $light-blue;
+}
+
+.presElementBox-highlightTop {
+    position: absolute;
+    transform: translate(-100px, -4px);
+    z-index: -1;
+    width: calc(100% + 200px);
+    height: calc(50% + 4px);
+}
+
+.presElementBox-highlightBottom {
+    position: absolute;
+    transform: translate(-100px, 0px);
+    z-index: -1;
+    top: 50%;
+    width: calc(100% + 200px);
+    height: calc(50% + 4px);
+}
+
+.documentView-node {
+    position: absolute;
+    z-index: 1;
+}
+
 .presElementBox-item-above {
     border-top: black 2px solid;
 }
@@ -179,6 +255,37 @@ $light-background: #ececec;
     align-items: center;
 }
 
+
+.presItem-slideButtons {
+    display: flex;
+    grid-column: 7;
+    width: 40px;
+    justify-self: right;
+    justify-content: space-evenly;
+
+    .slideButton {
+        cursor: pointer;
+        position: relative;
+        border-radius: 100%;
+        z-index: 300;
+        width: 15px;
+        height: 15px;
+        display: flex;
+        font-size: 75%;
+        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;
+    }
+
+    .slideButton:hover {
+        background-color: rgba(0, 0, 0, 1);
+        transform: scale(1.15);
+    }
+}
 .presElementBox-expand {
     cursor: pointer;
     position: absolute;
@@ -198,15 +305,16 @@ $light-background: #ececec;
 
 .presElementBox-expand-selected {
     cursor: pointer;
-    position: absolute;
+    position: relative;
     border-radius: 100%;
-    right: 3px;
-    bottom: 3px;
-    width: 20px;
-    height: 20px;
     z-index: 300;
+    width: 15px;
+    height: 15px;
     display: flex;
-    background-color: black;
+    font-size: 75%;
+    justify-self: right;
+    align-self: center;
+    background-color: rgba(0,0,0,0.5);
     color: white;
     justify-content: center;
     align-items: center;