Fix/self message positioning (#167)

* Added 'self-invocation' class to top level div of SelfInvocation component. * Removed 'text-sm' from Comment.vue. It inherits text-sm from the Statement component. * Removed 'text-sm' from some components. * Removed 'text-sm' from more components. * Moved text-alignment into components. Instead of leaving it in MessageLayer CSS.
mermaid-js · Jun 4, 2024 · 7658a1c · 7658a1c
1 parent 6e7e9ef
commit 7658a1c
Show file tree

Hide file tree

Showing 16 changed files with 19 additions and 24 deletions.
diff --git a/cypress/e2e/__image_snapshots__/Defect 406 Fragments under Creation #0.png b/cypress/e2e/__image_snapshots__/Defect 406 Fragments under Creation #0.png
diff --git a/cypress/e2e/__image_snapshots__/Smoke test fragment #0.png b/cypress/e2e/__image_snapshots__/Smoke test fragment #0.png
diff --git a/cypress/e2e/__image_snapshots__/Smoke test fragmentIssue #0.png b/cypress/e2e/__image_snapshots__/Smoke test fragmentIssue #0.png
diff --git a/cypress/e2e/__image_snapshots__/Smoke test interaction #0.png b/cypress/e2e/__image_snapshots__/Smoke test interaction #0.png
diff --git a/cypress/e2e/__image_snapshots__/Smoke test return #0.png b/cypress/e2e/__image_snapshots__/Smoke test return #0.png
diff --git a/cypress/e2e/__image_snapshots__/Smoke test should load the home page #0.png b/cypress/e2e/__image_snapshots__/Smoke test should load the home page #0.png
diff --git a/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Comment/Comment.vue b/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Comment/Comment.vue
@@ -1,7 +1,6 @@
 <template>
-  <!-- TODO: 12px to align comment with async message, which as padding-left 10px and left 2px -->
   <div
-    class="comments text-skin-comment min-w-[100px] flex text-left text-sm opacity-50 hover:opacity-100"
+    class="comments text-skin-comment min-w-[100px] flex text-left opacity-50 hover:opacity-100"
   >
     <div v-html="markedComment" :class="classNames" :style="commentStyle"></div>
   </div>

diff --git a/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Fragment/FragmentAlt.vue b/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Fragment/FragmentAlt.vue
@@ -3,15 +3,15 @@
     <div class="segment">
       <comment v-if="comment" :comment="comment" :commentObj="commentObj" />
       <div
-        class="header bg-skin-fragment-header text-skin-fragment-header text-base leading-4 rounded-t relative"
+        class="header bg-skin-fragment-header text-skin-fragment-header leading-4 rounded-t relative"
       >
         <div
           v-if="numbering"
-          class="absolute right-[100%] top-0 pr-1 group-hover:hidden text-gray-500 text-sm font-thin leading-6"
+          class="absolute right-[100%] top-0 pr-1 group-hover:hidden text-gray-500 font-thin leading-6"
         >
           {{ number }}
         </div>
-        <div class="name font-semibold p-1 border-b text-sm">
+        <div class="name font-semibold p-1 border-b">
           <label class="p-0">
             <collapse-button
               label="Alt"

diff --git a/...components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Fragment/FragmentLoop.vue b/...components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Fragment/FragmentLoop.vue
@@ -5,11 +5,11 @@
   >
     <comment v-if="comment" :comment="comment" :commentObj="commentObj" />
     <div
-      class="header text-skin-fragment-header bg-skin-fragment-header text-base leading-4 relative"
+      class="header text-skin-fragment-header bg-skin-fragment-header leading-4 relative"
     >
       <div
         v-if="numbering"
-        class="absolute right-[100%] top-0 pr-1 group-hover:hidden text-gray-500 text-sm font-thin leading-6"
+        class="absolute right-[100%] top-0 pr-1 group-hover:hidden text-gray-500 font-thin leading-6"
       >
         {{ number }}
       </div>

diff --git a/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Fragment/FragmentOpt.vue b/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Fragment/FragmentOpt.vue
@@ -2,11 +2,11 @@
   <div class="fragment opt border-skin-fragment rounded" :style="fragmentStyle">
     <comment v-if="comment" :comment="comment" :commentObj="commentObj" />
     <div
-      class="header bg-skin-fragment-header text-skin-fragment-header text-base leading-4 relative"
+      class="header bg-skin-fragment-header text-skin-fragment-header leading-4 relative"
     >
       <div
         v-if="numbering"
-        class="absolute right-[100%] top-0 pr-1 group-hover:hidden text-gray-500 text-sm font-thin leading-6"
+        class="absolute right-[100%] top-0 pr-1 group-hover:hidden text-gray-500 font-thin leading-6"
       >
         {{ number }}
       </div>

diff --git a/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Fragment/FragmentPar.vue b/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Fragment/FragmentPar.vue
@@ -2,11 +2,11 @@
   <div class="fragment par border-skin-fragment rounded" :style="fragmentStyle">
     <comment v-if="comment" :comment="comment" :commentObj="commentObj" />
     <div
-      class="header bg-skin-fragment-header text-skin-fragment-header text-base leading-4 rounded-t relative"
+      class="header bg-skin-fragment-header text-skin-fragment-header leading-4 rounded-t relative"
     >
       <div
         v-if="numbering"
-        class="absolute right-[100%] top-0 pr-1 group-hover:hidden text-gray-500 text-sm font-thin leading-6"
+        class="absolute right-[100%] top-0 pr-1 group-hover:hidden text-gray-500 font-thin leading-6"
       >
         {{ number }}
       </div>

diff --git a/...DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Fragment/FragmentTryCatchFinally.vue b/...DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Fragment/FragmentTryCatchFinally.vue
@@ -3,15 +3,15 @@
     <div class="segment">
       <comment v-if="comment" :comment="comment" :commentObj="commentObj" />
       <div
-        class="header bg-skin-fragment-header text-skin-fragment-header text-base leading-4 rounded-t relative"
+        class="header bg-skin-fragment-header text-skin-fragment-header leading-4 rounded-t relative"
       >
         <div
           v-if="numbering"
-          class="absolute right-[100%] top-0 pr-1 group-hover:hidden text-gray-500 text-sm font-thin leading-6"
+          class="absolute right-[100%] top-0 pr-1 group-hover:hidden text-gray-500 font-thin leading-6"
         >
           {{ number }}
         </div>
-        <div class="name font-semibold p-1 border-b text-sm">
+        <div class="name font-semibold p-1 border-b">
           <collapse-button
             label="Try"
             :collapsed="collapsed"
@@ -37,7 +37,7 @@
         v-for="(catchBlock, index) in tcf.catchBlock()"
         :key="index + 500"
       >
-        <div class="segment text-sm mt-2 border-t border-solid">
+        <div class="segment mt-2 border-t border-solid">
           <div
             class="header inline-block bg-skin-frame/[0.66]"
             :key="index + 1000"
@@ -59,7 +59,7 @@
         <div class="segment mt-2 border-t border-solid">
           <div class="header flex text-skin-fragment finally">
             <label
-              class="keyword finally bg-skin-frame/[0.66] px-1 inline-block text-sm"
+              class="keyword finally bg-skin-frame/[0.66] px-1 inline-block"
               >finally</label
             >
           </div>

diff --git a/...ame/SeqDiagram/MessageLayer/Block/Statement/Interaction/SelfInvocation/SelfInvocation.vue b/...ame/SeqDiagram/MessageLayer/Block/Statement/Interaction/SelfInvocation/SelfInvocation.vue
@@ -1,13 +1,13 @@
 <template>
   <!-- style border-width means not to be overridden. -->
   <div
-    class="message self text-sm flex items-start flex-col"
+    class="self-invocation message self flex items-start flex-col"
     style="border-width: 0"
     @click="onClick"
     ref="messageRef"
   >
     <label
-      class="name group px-px hover:text-skin-message-hover hover:bg-skin-message-hover relative min-h-[1em] w-full"
+      class="name text-left group px-px hover:text-skin-message-hover hover:bg-skin-message-hover relative min-h-[1em] w-full"
     >
       <div
         class="absolute right-[100%] top-0 pr-1 group-hover:hidden text-gray-500"

diff --git a/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Message/Message.vue b/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Message/Message.vue
@@ -13,7 +13,7 @@
     ref="messageRef"
   >
     <div
-      class="name group flex-grow relative text-sm hover:text-skin-message-hover hover:bg-skin-message-hover"
+      class="name group flex-grow relative hover:text-skin-message-hover hover:bg-skin-message-hover"
     >
       <div class="inline-block static min-h-[1em]">
         <div :style="textStyle" :class="classNames">

diff --git a/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Return/Return.vue b/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Return/Return.vue
@@ -23,7 +23,7 @@
           d="M288 192h-87.16l27.58-27.58a21.33 21.33 0 1 0-30.17-30.17l-64 64a21.33 21.33 0 0 0 0 30.17l64 64a21.33 21.33 0 0 0 30.17-30.17l-27.58-27.58H288a53.33 53.33 0 0 1 0 106.67h-32a21.33 21.33 0 0 0 0 42.66h32a96 96 0 0 0 0-192Z"
         />
       </svg>
-      <span class="name text-sm">{{ signature }}</span>
+      <span class="name">{{ signature }}</span>
     </div>
     <Message
       v-if="!isSelf"

diff --git a/src/components/DiagramFrame/SeqDiagram/MessageLayer/MessageLayer.vue b/src/components/DiagramFrame/SeqDiagram/MessageLayer/MessageLayer.vue
@@ -129,10 +129,6 @@ onUpdated(() => {
     /* positioning Point */
   }
 
-  .message > .name {
-    text-align: center;
-  }
-
   .interaction.right-to-left > .occurrence {
     /* InteractionBorderWidth + (OccurrenceWidth-1)/2 */
     left: -15px;