Merge pull request #860 from browngraphicslab/presentation_v1

Presentation v1 presentation items redesign

1 files changed, 110 insertions, 176 deletions

diff --git a/src/client/views/presentationview/PresElementBox.scss b/src/client/views/presentationview/PresElementBox.scss
index 4642caeb2..f1bdb7737 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,200 +16,132 @@ $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;
-    }
-
-    .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);
-    }
+    align-items: center;
 
-    .documentView-node {
-        position: absolute;
-        z-index: 1;
+    .presItem-number {
+        margin-top: 7px;
+        font-size: 12px;
+        font-weight: 700;
+        text-align: center;
+        justify-self: center;
+        align-self: flex-start;
+        position: relative;
+        display: inline-block;
+        overflow: hidden;
     }
-}
-
-.presElementBox-item-above {
-    border-top: black 2px solid;
-}
-
-.presElementBox-item-below {
-    border-bottom: black 2px solid;
-}
 
-.presElementBox-item:hover {
-    transition: all .1s;
-    background: #98b7da;
-    border-radius: 6px;
-}
 
-.presElementBox-active {
-    color: black;
-    border-radius: 6px;
-    border: solid 2px $dark-blue;
 }
 
-.presElementBox-buttons {
+.presItem-slide {
+    position: relative;
+    background-color: #d5dce2;
+    border-radius: 5px;
+    height: calc(100% - 7px);
+    width: calc(100% - 5px);
     display: grid;
-    grid-template-rows: 15px;
-    top: 15px;
-    left: -20;
-    position: absolute;
-    width: 100%;
-    height: auto;
-
-    .presElementBox-interaction {
-        display: none;
+    grid-template-rows: 23px auto;
+    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-interaction-selected {
-        color: grey;
-        background-color: rgba(0, 0, 0, 0);
-        float: left;
-        padding: 0px;
-        width: 20px;
-        height: 20px;
+    .presItem-time {
+        align-self: center;
+        position: relative;
+        top: 2px;
+        padding-right: 10px;
+        font-size: 10;
+        font-weight: 300;
+        font-family: Roboto;
+        z-index: 300;
+        letter-spacing: normal;
+    }
+    
+    .presItem-embedded {
+        overflow: hidden;
+        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;
     }
-}
-
-.presElementBox-number {
-    font-size: 12px;
-    width: 20;
-    font-weight: 700;
-    text-align: right;
-    justify-content: center;
-    align-content: center;
-    left: -20;
-    position: absolute;
-    display: inline-block;
-    overflow: hidden;
-}
-
-.presElementBox-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-time {
-    align-self: center;
-    position: relative;
-    top: 2px;
-    padding-right: 10px;
-    font-size: 10;
-    font-weight: 300;
-    font-family: Roboto;
-    z-index: 300;
-    letter-spacing: normal;
-}
 
-.presElementBox-embedded {
-    grid-column: 1/8;
-    position: relative;
-    display: flex;
-    width: auto;
-    justify-content: center;
-    margin: auto;
+    .presItem-slideButtons {
+        display: flex;
+        grid-column: 7;
+        width: 60px;
+        justify-self: right;
+        justify-content: flex-end;
+
+        .slideButton {
+            cursor: pointer;
+            position: relative;
+            border-radius: 100%;
+            z-index: 300;
+            width: 15px;
+            height: 15px;
+            display: flex;
+            font-size: 10px;
+            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.15);
+        }
+    }
 }
 
-.presElementBox-embeddedMask {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    border-radius: 3px;
-    top: 0;
-    left: 0;
-    z-index: 1;
-    overflow: hidden;
+.presItem-slide.active {
+    box-shadow: 0 0 0px 1.5px $dark-blue;
 }
 
-.presElementBox-closeIcon {
-    cursor: pointer;
-    position: absolute;
-    border-radius: 100%;
-    z-index: 300;
-    right: 3px;
-    top: 3px;
-    width: 20px;
-    height: 20px;
-    display: flex;
-    font-size: 75%;
-    background-color: black;
-    color: white;
-    justify-content: center;
-    align-items: center;
-}
+// .presItem-slide:hover {
+//     background: $slide-hover;
+// }
 
-.presElementBox-expand {
-    cursor: pointer;
-    position: absolute;
-    border-radius: 100%;
-    z-index: 300;
-    right: 26px;
-    top: 3px;
-    width: 20px;
-    height: 20px;
-    display: flex;
-    font-size: 75%;
-    background-color: black;
-    color: white;
-    justify-content: center;
-    align-items: center;
-}
 
-.presElementBox-expand-selected {
-    cursor: pointer;
-    position: absolute;
-    border-radius: 100%;
-    right: 3px;
-    bottom: 3px;
-    width: 20px;
-    height: 20px;
-    z-index: 300;
-    display: flex;
-    background-color: black;
-    color: white;
-    justify-content: center;
-    align-items: center;
-}
\ No newline at end of file