Merge branch 'parker' of https://github.com/brown-dash/Dash-Web into parker

1 files changed, 123 insertions, 0 deletions

diff --git a/src/client/views/nodes/RecordingBox/ProgressBar.scss b/src/client/views/nodes/RecordingBox/ProgressBar.scss
new file mode 100644
index 000000000..28ad25ffa
--- /dev/null
+++ b/src/client/views/nodes/RecordingBox/ProgressBar.scss
@@ -0,0 +1,123 @@
+
+.progressbar {
+  touch-action: none;
+  vertical-align: middle;
+  text-align: center;
+
+  align-items: center;
+  cursor: default;
+
+
+      position: absolute;
+      display: flex;
+      justify-content: flex-start;
+      bottom: 2px;
+      width: 99%;
+      height: 30px;
+      background-color: gray;
+
+      &.done {
+            top: 0;
+            width: 0px;
+            height: 5px;
+            background-color: red;
+            z-index: 2;
+      }
+
+      &.mark {
+            top: 0;
+            background-color: transparent;
+            border-right: 2px solid white;
+            z-index: 3;
+            pointer-events: none; 
+      }
+}
+
+.progressbar-disabled {
+    cursor: not-allowed;
+}
+
+.progressbar-dragging {
+    cursor: grabbing;
+}
+
+// citation: https://codepen.io/_Master_/pen/PRdjmQ
+@keyframes blinker {
+  from {opacity: 1.0;}
+  to {opacity: 0.0;}
+}
+.blink {
+	text-decoration: blink;
+	animation-name: blinker;
+	animation-duration: 0.6s;
+	animation-iteration-count:infinite;
+	animation-timing-function:ease-in-out;
+	animation-direction: alternate;
+}
+
+.segment {
+  border: 3px solid black;
+  background-color: red;
+  margin: 1px;
+  padding: 0;
+  cursor: pointer;
+  transition-duration: .5s;
+  user-select: none;
+
+  vertical-align: middle;
+  text-align: center;
+}
+
+.segment-expanding {
+border-color: red;
+  background-color: white;
+  transition-duration: 0s;
+  opacity: .75;
+  pointer-events: none;
+}
+
+.segment-expanding:hover {
+    background-color: inherit;
+    cursor: not-allowed;
+}
+
+.segment-disabled {
+  pointer-events: none;
+  opacity: 0.5;
+  transition-duration: 0s;
+  /* Hide the text. */
+    text-indent: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+.segment-hide {
+    background-color: inherit;
+    text-align: center;
+    vertical-align: middle;
+    user-select: none;
+}
+
+.segment:first-child {
+  margin-left: 2px;
+}
+.segment:last-child {
+  margin-right: 2px;
+}
+
+.segment:hover {
+    background-color: white;
+}
+
+.segment:hover, .segment-selected {
+  margin: 0px;
+  border: 4px solid red;
+  border-radius: 2px;
+}
+
+.segment-selected {
+  border: 4px solid #202020;
+  background-color: red;
+  opacity: .75;
+  cursor: grabbing;
+}