Closes #7936

- WIP prepping activities view for adjustable swimlane height.
- Refactored ActivityTimeline.vue to not draw SVG if no activities in timeframe.
- ActivityTimeline.vue `leftOffset` now uses absolute position `left` instead of `left-margin`.

src/plugins/plan/components/ActivityTimeline.vue

@@ -25,68 +25,63 @@
       {{ heading }}
     </template>
     <template #object>
-      <svg :height="height" :width="svgWidth" :style="alignmentStyle">
-        <symbol id="activity-bar-bg" :height="rowHeight" width="2" preserveAspectRatio="none">
-          <rect x="0" y="0" width="100%" height="100%" fill="currentColor" />
-          <line
-            x1="100%"
-            y1="0"
-            x2="100%"
-            y2="100%"
-            stroke="black"
-            stroke-width="1"
-            opacity="0.3"
-            transform="translate(-0.5, 0)"
-          />
-        </symbol>
-        <template v-for="(activity, index) in activities" :key="`g-${activity.clipPathId}`">
-          <template v-if="clipActivityNames === true">
-            <clipPath :id="activity.clipPathId" :key="activity.clipPathId">
-              <rect
+      <div class="c-plan-av" :style="alignmentStyle">
+        <svg v-if="activities.length > 0" :height="height" :width="svgWidth">
+          <symbol id="activity-bar-bg" :height="rowHeight" width="2" preserveAspectRatio="none">
+            <rect x="0" y="0" width="100%" height="100%" fill="currentColor" />
+            <line
+              x1="100%"
+              y1="0"
+              x2="100%"
+              y2="100%"
+              stroke="black"
+              stroke-width="1"
+              opacity="0.3"
+              transform="translate(-0.5, 0)"
+            />
+          </symbol>
+          <template v-for="(activity, index) in activities" :key="`g-${activity.clipPathId}`">
+            <template v-if="clipActivityNames === true">
+              <clipPath :id="activity.clipPathId" :key="activity.clipPathId">
+                <rect
+                  :x="activity.rectStart"
+                  :y="activity.row"
+                  :width="activity.rectWidth - 1"
+                  :height="rowHeight"
+                />
+              </clipPath>
+            </template>
+            <g
+              class="c-plan__activity activity-bounds"
+              @click="setSelectionForActivity(activity, $event)"
+            >
+              <title>{{ activity.name }}</title>
+              <use
+                :key="`rect-${index}`"
+                href="#activity-bar-bg"
                 :x="activity.rectStart"
                 :y="activity.row"
-                :width="activity.rectWidth - 1"
+                :width="activity.rectWidth"
                 :height="rowHeight"
+                :class="activity.class"
+                :color="activity.color"
               />
-            </clipPath>
+              <text
+                v-for="(textLine, textIndex) in activity.textLines"
+                :key="`text-${index}-${textIndex}`"
+                :class="`c-plan__activity-label ${activity.textClass}`"
+                :x="activity.textStart"
+                :y="activity.textY + textIndex * lineHeight"
+                :fill="activity.textColor"
+                :clip-path="clipActivityNames === true ? `url(#${activity.clipPathId})` : ''"
+              >
+                {{ textLine }}
+              </text>
+            </g>
           </template>
-          <g
-            class="c-plan__activity activity-bounds"
-            @click="setSelectionForActivity(activity, $event)"
-          >
-            <title>{{ activity.name }}</title>
-            <use
-              :key="`rect-${index}`"
-              href="#activity-bar-bg"
-              :x="activity.rectStart"
-              :y="activity.row"
-              :width="activity.rectWidth"
-              :height="rowHeight"
-              :class="activity.class"
-              :color="activity.color"
-            />
-            <text
-              v-for="(textLine, textIndex) in activity.textLines"
-              :key="`text-${index}-${textIndex}`"
-              :class="`c-plan__activity-label ${activity.textClass}`"
-              :x="activity.textStart"
-              :y="activity.textY + textIndex * lineHeight"
-              :fill="activity.textColor"
-              :clip-path="clipActivityNames === true ? `url(#${activity.clipPathId})` : ''"
-            >
-              {{ textLine }}
-            </text>
-          </g>
-        </template>
-        <text
-          v-if="activities.length === 0"
-          x="10"
-          y="20"
-          class="c-plan__activity-label--outside-rect"
-        >
-          No activities within current timeframe
-        </text>
-      </svg>
+        </svg>
+        <div v-else class="c-timeline__no-items">No activities within timeframe</div>
+      </div>
     </template>
   </SwimLane>
 </template>
@@ -166,7 +161,7 @@ export default {
         leftOffset = this.alignmentData.multiple ? 2 * AXES_PADDING : AXES_PADDING;
       }
       return {
-        marginLeft: `${this.alignmentData.leftWidth + leftOffset}px`
+        left: `${this.alignmentData.leftWidth + leftOffset}px`
       };
     },
     svgWidth() {

src/plugins/plan/plan.scss

@@ -29,6 +29,11 @@
     }
   }
 
+  &-av {
+    // Activities view
+    @include abs();
+  }
+
   &__activity {
     cursor: pointer;