Collapsible opt/par

ZenUml · May 27, 2023 · 419be17 · 419be17
1 parent 7c8d55c
commit 419be17
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 12 deletions.
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,17 +2,23 @@
   <div class="fragment opt border-skin-fragment rounded" :style="fragmentStyle">
     <comment v-if="comment" :comment="comment" />
     <div class="header bg-skin-fragment-header text-skin-fragment-header text-base leading-4">
-      <div class="name font-semibold p-1 border-b"><label>Opt</label></div>
+      <div class="name font-semibold p-1 border-b" style="display: flex; width: 100%; justify-content: space-between;">
+        <label>Opt</label>
+        <collapsible-button />
+      </div>
     </div>
-    <block
-      :style="{ paddingLeft: `${offsetX}px` }"
-      :context="opt.braceBlock().block()"
-      :selfCallIndent="selfCallIndent"
-    ></block>
+    <b-collapse visible id="collapse-1" class="mt-2">
+      <block
+        :style="{ paddingLeft: `${offsetX}px` }"
+        :context="opt.braceBlock().block()"
+        :selfCallIndent="selfCallIndent"
+      ></block>
+    </b-collapse>
   </div>
 </template>
 
 <script>
+import CollapsibleButton from './CollapsibleButton.vue';
 import fragment from './FragmentMixin';
 
 export default {
@@ -27,6 +33,7 @@ export default {
       return this.context.opt();
     },
   },
+  components: { CollapsibleButton },
 };
 </script>
 

diff --git a/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Fragment/FragmentPar.vue b/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Fragment/FragmentPar.vue
@@ -4,17 +4,23 @@
     <div
       class="header bg-skin-fragment-header text-skin-fragment-header text-base leading-4 rounded-t"
     >
-      <div class="name font-semibold p-1 border-b"><label>Par</label></div>
+      <div class="name font-semibold p-1 border-b" style="display: flex; width: 100%; justify-content: space-between;">
+        <label>Par</label>
+        <collapsible-button />
+      </div>
     </div>
-    <block
-      :style="{ paddingLeft: `${offsetX}px` }"
-      :context="par.braceBlock().block()"
-      :selfCallIndent="selfCallIndent"
-    ></block>
+    <b-collapse visible id="collapse-1" class="mt-2">
+      <block
+        :style="{ paddingLeft: `${offsetX}px` }"
+        :context="par.braceBlock().block()"
+        :selfCallIndent="selfCallIndent"
+      ></block>
+    </b-collapse>
   </div>
 </template>
 
 <script>
+import CollapsibleButton from './CollapsibleButton.vue';
 import fragment from './FragmentMixin';
 
 export default {
@@ -29,6 +35,7 @@ export default {
       return this.context.par();
     },
   },
+  components: { CollapsibleButton },
 };
 </script>
 <style scoped>