consolidate css for scroll lists in style/list-item.scss

galaxyproject · May 20, 2024 · 6fae943 · 6fae943
1 parent 55c011a
commit 6fae943
Show file tree

Hide file tree

Showing 3 changed files with 107 additions and 214 deletions.
diff --git a/client/src/components/History/HistoryScrollList.vue b/client/src/components/History/HistoryScrollList.vue
@@ -235,7 +235,7 @@ async function loadMore(noScroll = false) {
         </div>
 
         <div
-            class="history-list-container"
+            class="scroll-list-container"
             :class="{
                 'in-panel': isMultiviewPanel,
                 'scrolled-top': scrolledTop,
@@ -245,7 +245,7 @@ async function loadMore(noScroll = false) {
                 v-show="!showAdvanced"
                 ref="scrollableDiv"
                 :class="{
-                    'history-scroll-list': !hasNoResults,
+                    'scroll-list': !hasNoResults,
                     'in-panel': isMultiviewPanel,
                     'in-modal': props.inModal,
                     toolMenuContainer: isMultiviewPanel,
@@ -381,111 +381,3 @@ async function loadMore(noScroll = false) {
         </div>
     </div>
 </template>
-
-<style lang="scss" scoped>
-@import "theme/blue.scss";
-
-.flex-column-overflow {
-    display: flex;
-    flex-direction: column;
-    overflow: auto;
-}
-
-.history-list-container {
-    position: relative;
-
-    &.in-panel {
-        flex-grow: 1;
-    }
-
-    &:not(&.in-panel) {
-        @extend .flex-column-overflow;
-    }
-
-    &:before,
-    &:after {
-        position: absolute;
-        content: "";
-        pointer-events: none;
-        z-index: 10;
-        height: 30px;
-        width: 100%;
-        opacity: 0;
-
-        background-repeat: no-repeat;
-        transition: opacity 0.4s;
-    }
-
-    &:before {
-        top: 0;
-        background-image: linear-gradient(to bottom, rgba(3, 0, 48, 0.1), rgba(3, 0, 48, 0.02), rgba(3, 0, 48, 0));
-    }
-
-    &:not(.scrolled-top) {
-        &:before {
-            opacity: 1;
-        }
-    }
-
-    &:after {
-        bottom: 0;
-        background-image: linear-gradient(to top, rgba(3, 0, 48, 0.1), rgba(3, 0, 48, 0.02), rgba(3, 0, 48, 0));
-    }
-
-    &:not(.scrolled-bottom) {
-        &:after {
-            opacity: 1;
-        }
-    }
-}
-
-.history-scroll-list {
-    overflow-x: hidden;
-    overflow-y: scroll;
-    scroll-behavior: smooth;
-
-    &.in-panel {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-    }
-
-    .list-group {
-        .list-group-item {
-            display: flex;
-            border-radius: 0;
-
-            &.current {
-                border-left: 0.25rem solid $brand-primary;
-            }
-
-            &.panel-item {
-                justify-content: space-between;
-                align-items: center;
-                &:not(&.active) {
-                    background: $panel-bg-color;
-                }
-            }
-
-            &:not(&.panel-item) {
-                &:first-child {
-                    border-top-left-radius: inherit;
-                    border-top-right-radius: inherit;
-                }
-
-                &:last-child {
-                    border-bottom-left-radius: inherit;
-                    border-bottom-right-radius: inherit;
-                }
-            }
-        }
-    }
-    .list-end {
-        width: 100%;
-        text-align: center;
-        color: $text-light;
-    }
-}
-</style>
diff --git a/client/src/components/Workflow/Invocation/InvocationScrollList.vue b/client/src/components/Workflow/Invocation/InvocationScrollList.vue
@@ -262,108 +262,4 @@ function workflowName(workflowId: string) {
     -webkit-box-orient: vertical;
     overflow: hidden;
 }
-
-.flex-column-overflow {
-    display: flex;
-    flex-direction: column;
-    overflow: auto;
-}
-
-.scroll-list-container {
-    position: relative;
-
-    &.in-panel {
-        flex-grow: 1;
-    }
-
-    &:not(&.in-panel) {
-        @extend .flex-column-overflow;
-    }
-
-    &:before,
-    &:after {
-        position: absolute;
-        content: "";
-        pointer-events: none;
-        z-index: 10;
-        height: 30px;
-        width: 100%;
-        opacity: 0;
-
-        background-repeat: no-repeat;
-        transition: opacity 0.4s;
-    }
-
-    &:before {
-        top: 0;
-        background-image: linear-gradient(to bottom, rgba(3, 0, 48, 0.1), rgba(3, 0, 48, 0.02), rgba(3, 0, 48, 0));
-    }
-
-    &:not(.scrolled-top) {
-        &:before {
-            opacity: 1;
-        }
-    }
-
-    &:after {
-        bottom: 0;
-        background-image: linear-gradient(to top, rgba(3, 0, 48, 0.1), rgba(3, 0, 48, 0.02), rgba(3, 0, 48, 0));
-    }
-
-    &:not(.scrolled-bottom) {
-        &:after {
-            opacity: 1;
-        }
-    }
-}
-
-.scroll-list {
-    overflow-x: hidden;
-    overflow-y: scroll;
-    scroll-behavior: smooth;
-
-    &.in-panel {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-    }
-
-    .list-group {
-        .list-group-item {
-            display: flex;
-            border-radius: 0;
-
-            &.current {
-                border-left: 0.25rem solid $brand-primary;
-            }
-
-            &.panel-item {
-                justify-content: space-between;
-                align-items: center;
-                &:not(&.active) {
-                    background: $panel-bg-color;
-                }
-            }
-
-            &:not(&.panel-item) {
-                &:first-child {
-                    border-top-left-radius: inherit;
-                    border-top-right-radius: inherit;
-                }
-
-                &:last-child {
-                    border-bottom-left-radius: inherit;
-                    border-bottom-right-radius: inherit;
-                }
-            }
-        }
-    }
-    .list-end {
-        width: 100%;
-        text-align: center;
-        color: $text-light;
-    }
-}
 </style>
diff --git a/client/src/style/scss/list-item.scss b/client/src/style/scss/list-item.scss
@@ -239,3 +239,108 @@ $vertical-gap: 8px;
         }
     }
 }
+
+// ---------------------------------------------------------------------------- a scroll list (like `HistoryScrollList`)
+.flex-column-overflow {
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+}
+
+.scroll-list-container {
+    position: relative;
+
+    &.in-panel {
+        flex-grow: 1;
+    }
+
+    &:not(&.in-panel) {
+        @extend .flex-column-overflow;
+    }
+
+    &:before,
+    &:after {
+        position: absolute;
+        content: "";
+        pointer-events: none;
+        z-index: 10;
+        height: 30px;
+        width: 100%;
+        opacity: 0;
+
+        background-repeat: no-repeat;
+        transition: opacity 0.4s;
+    }
+
+    &:before {
+        top: 0;
+        background-image: linear-gradient(to bottom, rgba(3, 0, 48, 0.1), rgba(3, 0, 48, 0.02), rgba(3, 0, 48, 0));
+    }
+
+    &:not(.scrolled-top) {
+        &:before {
+            opacity: 1;
+        }
+    }
+
+    &:after {
+        bottom: 0;
+        background-image: linear-gradient(to top, rgba(3, 0, 48, 0.1), rgba(3, 0, 48, 0.02), rgba(3, 0, 48, 0));
+    }
+
+    &:not(.scrolled-bottom) {
+        &:after {
+            opacity: 1;
+        }
+    }
+}
+
+.scroll-list {
+    overflow-x: hidden;
+    overflow-y: scroll;
+    scroll-behavior: smooth;
+
+    &.in-panel {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+    }
+
+    .list-group {
+        .list-group-item {
+            display: flex;
+            border-radius: 0;
+
+            &.current {
+                border-left: 0.25rem solid $brand-primary;
+            }
+
+            &.panel-item {
+                justify-content: space-between;
+                align-items: center;
+                &:not(&.active) {
+                    background: $panel-bg-color;
+                }
+            }
+
+            &:not(&.panel-item) {
+                &:first-child {
+                    border-top-left-radius: inherit;
+                    border-top-right-radius: inherit;
+                }
+
+                &:last-child {
+                    border-bottom-left-radius: inherit;
+                    border-bottom-right-radius: inherit;
+                }
+            }
+        }
+    }
+    .list-end {
+        width: 100%;
+        text-align: center;
+        color: $text-light;
+    }
+}