Closes #7936

- Swimlane style refinements. - New theme constants for swimlane colors. - Time Strip label column buttons aligned right.
nasa · Dec 19, 2024 · bb4fea7 · bb4fea7
1 parent 5312458
commit bb4fea7
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 17 deletions.
diff --git a/src/styles/_constants-darkmatter.scss b/src/styles/_constants-darkmatter.scss
@@ -523,6 +523,8 @@ $colorInProgressFgEm: $colorTimeRealtimeFg;
 $colorGanttSelectedBorder: rgba(#fff, 0.3);
 $colorEventLine: $colorBodyFg;
 $colorEventLineExtended: rgba($colorEventLine, 0.3);
+$colorTimeStripDraftBg: rgba(#a57748, 0.2);
+$colorTimeStripLabelBg: rgba($colorBodyFg, 0.15);
 $eventLineW: 1px;
 
 // Tree

diff --git a/src/styles/_constants-espresso.scss b/src/styles/_constants-espresso.scss
@@ -488,6 +488,8 @@ $colorInProgressFgEm: $colorTimeRealtimeFg;
 $colorGanttSelectedBorder: rgba(#fff, 0.3);
 $colorEventLine: $colorBodyFg;
 $colorEventLineExtended: rgba($colorEventLine, 0.3);
+$colorTimeStripDraftBg: rgba(#a57748, 0.2);
+$colorTimeStripLabelBg: rgba($colorBodyFg, 0.15);
 $eventLineW: 1px;
 
 // Tree

diff --git a/src/styles/_constants-maelstrom.scss b/src/styles/_constants-maelstrom.scss
@@ -504,6 +504,8 @@ $colorInProgressFgEm: $colorTimeRealtimeFg;
 $colorGanttSelectedBorder: rgba(#fff, 0.3);
 $colorEventLine: $colorBodyFg;
 $colorEventLineExtended: rgba($colorEventLine, 0.3);
+$colorTimeStripDraftBg: rgba(#a57748, 0.2);
+$colorTimeStripLabelBg: rgba($colorBodyFg, 0.15);
 $eventLineW: 1px;
 
 // Tree

diff --git a/src/styles/_constants-snow.scss b/src/styles/_constants-snow.scss
@@ -487,6 +487,8 @@ $colorInProgressFgEm: $colorCurrentFgEm;
 $colorGanttSelectedBorder: #fff;
 $colorEventLine: $colorBodyFg;
 $colorEventLineExtended: rgba($colorEventLine, 0.3);
+$colorTimeStripDraftBg: rgba(#a57748, 0.2);
+$colorTimeStripLabelBg: rgba($colorBodyFg, 0.15);
 $eventLineW: 1px;
 
 // Tree

diff --git a/src/ui/components/swim-lane/SwimLane.vue b/src/ui/components/swim-lane/SwimLane.vue
@@ -45,14 +45,16 @@
       <div class="c-object-label__name">
         <slot name="label"></slot>
       </div>
-      <button
-        v-if="!hideButton"
-        class="c-button"
-        :class="[buttonIcon, buttonPressed ? 'is-active' : '']"
-        :title="buttonTitle"
-        :aria-label="buttonTitle"
-        @click="pressOnButton"
-      />
+      <div class="c-swimlane__lane-label-button-h">
+        <button
+          v-if="!hideButton"
+          class="c-button"
+          :class="[buttonIcon, buttonPressed ? 'is-active' : '']"
+          :title="buttonTitle"
+          :aria-label="buttonTitle"
+          @click="pressOnButton"
+        />
+      </div>
     </div>
     <div
       class="c-swimlane__lane-object"
@@ -170,7 +172,7 @@ export default {
 
     swimlaneClass() {
       if (!this.spanRowsCount && !this.isNested) {
-        return 'c-swimlane__lane-label--span-cols';
+        return 'c-swimlane__lane-label --span-cols';
       }
 
       return '';

diff --git a/src/ui/components/swim-lane/swimlane.scss b/src/ui/components/swim-lane/swimlane.scss
@@ -28,17 +28,13 @@
   width: 100%;
 
   &.is-status--draft {
-    background: rgba($colorAlert, 0.2);
+    background: $colorTimeStripDraftBg;
   }
 
-  [class*='__lane-label'] {
-    background: rgba($colorBodyFg, 0.2);
+  &__lane-label {
+    background: $colorTimeStripLabelBg;
     color: $colorBodyFg;
-    padding: $interiorMarginSm;
-  }
-
-  [class*='--span-cols'] {
-    grid-column: span 2;
+    padding: $interiorMarginSm $interiorMargin;
   }
 
   &__lane-object {
@@ -52,6 +48,16 @@
     @include smallerControlButtons;
   }
 
+  &__lane-label-button-h {
+    // Holds swimlane button(s)
+    flex: 1 1 auto;
+    text-align: right;
+  }
+
+  .--span-cols {
+    grid-column: span 2;
+  }
+
   // Yet more brittle special case selecting...
   .is-object-type-plan,
   .is-object-type-gantt-chart {