-feat: Dropdown component for export buttons

-feat: intersection observer for hiding legend -style: styles for minimal mode buttons and spacing
hms-dbmi · Apr 29, 2024 · e07a17f · e07a17f
1 parent 9247681
commit e07a17f
Show file tree

Hide file tree

Showing 3 changed files with 405 additions and 127 deletions.
diff --git a/src/App.css b/src/App.css
@@ -224,46 +224,13 @@ a:hover {
     border: 1px solid grey;
     position: absolute;
     left: 3px;
-    scroll-margin-top: 50px;
+    scroll-margin-top: 100px;
 }
 
 .nav-dropdown:focus {
     border-radius: 0px;
 }
 
-.navigation-buttons {
-    position: fixed;
-    z-index: 998;
-    display: flex;
-}
-
-.navigation-button {
-    cursor: pointer;
-    font-size: 16px;
-    height: 38px;
-    width: 140px;
-    padding: 2px 10px;
-    border: 1px solid lightgrey;
-    box-shadow: #0000001a 5px 5px 10px;
-}
-
-.navigation-button:hover:not(:disabled) {
-    background: lightgrey;
-}
-.navigation-button:active:not(:disabled) {
-    background: rgb(197, 197, 197);
-}
-.navigation-button:disabled:hover {
-    cursor: default;
-}
-
-.navigation-button:first-of-type {
-    border-radius: 8px 0px 0px 8px;
-}
-.navigation-button:last-of-type {
-    border-radius: 0px 8px 8px 0px;
-}
-
 .zoom-in-button,
 .zoom-out-button,
 .zoom-left-button,
@@ -544,11 +511,6 @@ a:hover {
     /* background: #ffffff99; */
 }
 
-.sample-label.minimal-mode {
-    left: 300px;
-    top: 8px;
-}
-
 .menu-title svg {
     vertical-align: middle;
 }
@@ -786,3 +748,205 @@ a:hover {
     opacity: 1;
     background-color: #7aaded;
 }
+
+/* Minimal Mode styles */
+.minimal_mode {
+
+    .gosling-panel {
+        overflow-y: scroll;
+        overflow-x: hidden;
+    }
+
+    .sample-label {
+        left: 300px;
+        top: 8px;
+    }
+
+    .navigation-buttons {
+        position: fixed;
+        z-index: 998;
+        display: flex;
+        flex-direction: column;
+        top: 3px;
+        left: 3px;
+    }
+
+    .navigation-button {
+        background-color: #F6F6F6;
+        cursor: pointer;
+        font-size: 1rem;
+        font-family: Inter;
+        height: 40px;
+        width: 210px;
+        padding: 2px 10px;
+        border: 1px solid #D3D3D3;
+    }
+
+    .navigation-button:hover:not(:disabled) {
+        background-color: #EBEBEB;
+    }
+    .navigation-button:active:not(:disabled) {
+        background-color: #e6e4e4;
+    }
+    .navigation-button:first-of-type {
+        border-radius: 8px 8px 0px 0px;
+    }
+    .navigation-button:last-of-type {
+        border-radius: 0px 0px 8px 8px;
+    }
+
+    /* Force scrollbar to show */
+    ::-webkit-scrollbar {
+        -webkit-appearance: none;
+        width: 10px;
+    }
+
+    ::-webkit-scrollbar-thumb {
+        width: 10px;
+        border-radius: 4px;
+        background-color: rgba(0, 0, 0, .5);
+        box-shadow: 0 0 1px rgba(255, 255, 255, .5);
+    }
+    ::-webkit-scrollbar:hover {
+        cursor: pointer;
+    }
+
+    /* Styles for the navigation on the right side of visualization */
+    .external-links {
+        position: absolute;
+        z-index: 998;
+        height: auto;
+        width: auto;
+        top: 3px;
+        right: 12px;
+
+        .external-links-nav {
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+
+
+            .open-in-chromoscope-link {
+                background-color: #F6F6F6;
+                font-size: 0.9rem;
+                font-family: Inter;
+                font-weight: 400;
+                display: flex;
+                height: 35px;
+                justify-content: center;
+                border: 1px solid #D3D3D3;
+                border-radius: 8px;
+
+                .link-group {
+                    margin: auto;
+
+                    .external-link-icon {
+                        margin: auto;
+                        margin-left: 8px;
+                        fill: black;
+                        stroke: black;
+                    }
+                }
+
+            }
+
+            .open-in-chromoscope-link:hover {
+                text-decoration: none;
+                cursor: pointer;
+                background-color: #EBEBEB;
+            }
+
+            .open-in-chromoscope-link:active {
+                background-color: #e6e4e4;
+            }
+
+            .export-links {
+                border-radius: 4px;
+                margin-top: 4px;
+
+                .export-dropdown {
+                    height: auto;
+                    background-color: #F6F6F6;
+                    right: 0px;
+                    border-radius: 8px;
+                    border: 1px solid #D3D3D3;
+                    transition: all 100ms;
+                    overflow: hidden;
+
+                    .export-button {
+                        width: 210px;
+                        height: 35px;
+                        border-radius: inherit;
+                        border: 0px solid;
+                        font-weight: 400;
+                        background-color: transparent;
+
+                        .export-title {
+                            font-size: .9rem;
+                            font-family: Inter;
+                        }
+
+                        .button.triangle-down {
+                            width: 11px;
+                            height: 7px;
+                            margin-left: 8px;
+                        }
+                    }
+
+                    .export-button:hover {
+                        cursor: pointer;
+                        background-color: #EBEBEB;
+                    }
+
+                    .export-button:active {
+                        background-color: #e6e4e4;
+                    }
+
+                    .nav-list {
+                        list-style-type: none;
+                        padding: 0px 10px;
+                        display: flex;
+                        flex-direction: row;
+                        height: 50px;
+                        background-color: white;
+                        margin: 0px 8px 8px 8px;
+                        border-radius: 3px;
+
+                        .nav-list-item {
+                            display: flex;
+                            margin: auto;
+                        }
+
+
+                        .title-btn {
+                            display: flex;
+                            position: relative;
+                            width: 25px;
+                            height: 25px;
+                            margin-left: 0px;
+                        }
+
+                        .title-btn.png {
+                            padding: 0px;
+                            border: none;
+                            background-color: transparent;
+                        }
+                    }
+
+                }
+
+                .export-dropdown.open {
+                    background-color: #EBEBEB;
+                    border-radius: 8px;
+                    border: 1px solid #C3C3C3;
+                    transition: all 100ms;
+
+                    .export-button {
+                        border: none;
+                    }
+                }
+            }
+        }
+
+    }
+}