From 76d144d7c51d951a4e9c3d4770f7830221182676 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Thu, 7 Sep 2023 15:49:36 +0200
Subject: [PATCH 1/8] Enhancement: Set OcModal Buttons to equal width

---
 .../src/components/OcModal/OcModal.vue        | 30 ++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

diff --git a/packages/design-system/src/components/OcModal/OcModal.vue b/packages/design-system/src/components/OcModal/OcModal.vue
index 3b703949e4f..3de832ab2f1 100644
--- a/packages/design-system/src/components/OcModal/OcModal.vue
+++ b/packages/design-system/src/components/OcModal/OcModal.vue
@@ -67,6 +67,7 @@
         <div class="oc-modal-body-actions oc-flex oc-flex-right">
           <oc-button
             class="oc-modal-body-actions-cancel"
+            ref="cancelButton"
             :variation="buttonCancelVariation"
             :appearance="buttonCancelAppearance"
             @click="cancelModalAction"
@@ -74,6 +75,7 @@
           />
           <oc-button
             v-if="buttonSecondaryText"
+            ref="secondaryButton"
             class="oc-modal-body-actions-secondary oc-ml-s"
             :variation="buttonSecondaryVariation"
             :appearance="buttonSecondaryAppearance"
@@ -82,6 +84,7 @@
           />
           <oc-button
             v-if="!withoutButtonConfirm"
+            ref="primaryButton"
             class="oc-modal-body-actions-confirm oc-ml-s"
             variation="primary"
             :appearance="buttonConfirmAppearance"
@@ -96,7 +99,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, ComponentPublicInstance } from 'vue'
+import { defineComponent, PropType, ComponentPublicInstance, ref, onMounted, unref } from 'vue'
 import OcButton from '../OcButton/OcButton.vue'
 import OcCheckbox from '../OcCheckbox/OcCheckbox.vue'
 import OcIcon from '../OcIcon/OcIcon.vue'
@@ -393,6 +396,31 @@ export default defineComponent({
       checkboxValue: false
     }
   },
+  setup() {
+    const primaryButton = ref(null)
+    const secondaryButton = ref(null)
+    const cancelButton = ref(null)
+
+    const setButtonsEqualWidth = () => {
+      const primaryWidth = unref(primaryButton) ? unref(primaryButton).$el.offsetWidth : 0
+      const secondaryWidth = unref(secondaryButton) ? unref(secondaryButton).$el.offsetWidth : 0
+      const cancelWidth = unref(cancelButton) ? unref(cancelButton).$el.offsetWidth : 0
+      const maxWidth = Math.max(primaryWidth, secondaryWidth, cancelWidth)
+
+      unref(primaryButton) ? (unref(primaryButton).$el.style.minWidth = `${maxWidth}px`) : null
+      unref(secondaryButton) ? (unref(secondaryButton).$el.style.minWidth = `${maxWidth}px`) : null
+      unref(cancelWidth) ? (unref(cancelWidth).$el.style.minWidth = `${maxWidth}px`) : null
+    }
+    onMounted(() => {
+      setButtonsEqualWidth()
+    })
+
+    return {
+      primaryButton,
+      secondaryButton,
+      cancelButton
+    }
+  },
   computed: {
     initialFocusRef(): FocusTargetOrFalse {
       if (this.focusTrapInitial) {

From 8995058463d82c1522e4941a675e3bbca1ca8dbc Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Thu, 7 Sep 2023 15:57:07 +0200
Subject: [PATCH 2/8] Fix console error

---
 .../design-system/src/components/OcModal/OcModal.vue | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/design-system/src/components/OcModal/OcModal.vue b/packages/design-system/src/components/OcModal/OcModal.vue
index 3de832ab2f1..d1c2fbd7c1f 100644
--- a/packages/design-system/src/components/OcModal/OcModal.vue
+++ b/packages/design-system/src/components/OcModal/OcModal.vue
@@ -407,9 +407,15 @@ export default defineComponent({
       const cancelWidth = unref(cancelButton) ? unref(cancelButton).$el.offsetWidth : 0
       const maxWidth = Math.max(primaryWidth, secondaryWidth, cancelWidth)
 
-      unref(primaryButton) ? (unref(primaryButton).$el.style.minWidth = `${maxWidth}px`) : null
-      unref(secondaryButton) ? (unref(secondaryButton).$el.style.minWidth = `${maxWidth}px`) : null
-      unref(cancelWidth) ? (unref(cancelWidth).$el.style.minWidth = `${maxWidth}px`) : null
+      if (unref(primaryButton) && unref(primaryButton).$el) {
+        unref(primaryButton).$el.style.minWidth = `${maxWidth}px`
+      }
+      if (unref(secondaryButton) && unref(secondaryButton).$el) {
+        unref(secondaryButton).$el.style.minWidth = `${maxWidth}px`
+      }
+      if (unref(cancelButton) && unref(cancelButton).$el) {
+        unref(cancelButton).$el.style.minWidth = `${maxWidth}px`
+      }
     }
     onMounted(() => {
       setButtonsEqualWidth()

From b835f1eed3259b7aa2b0cea07c2451238343abc5 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Thu, 7 Sep 2023 16:02:29 +0200
Subject: [PATCH 3/8] Add changelog

---
 changelog/unreleased/enhancement-modal-buttons-same-width | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 changelog/unreleased/enhancement-modal-buttons-same-width

diff --git a/changelog/unreleased/enhancement-modal-buttons-same-width b/changelog/unreleased/enhancement-modal-buttons-same-width
new file mode 100644
index 00000000000..514f38e4396
--- /dev/null
+++ b/changelog/unreleased/enhancement-modal-buttons-same-width
@@ -0,0 +1,6 @@
+Enhancement: OcModal set buttons to same width
+
+We've adjusted the button widths for every modal so the options look more equal.
+
+https://github.com/owncloud/web/pull/9671
+https://github.com/owncloud/web/issues/9641

From 59164ae3db3c4c4932f8725df570802a78f13f49 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Thu, 7 Sep 2023 16:15:30 +0200
Subject: [PATCH 4/8] Beautify code

---
 .../src/components/OcModal/OcModal.vue        | 22 +++++++++++--------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/packages/design-system/src/components/OcModal/OcModal.vue b/packages/design-system/src/components/OcModal/OcModal.vue
index d1c2fbd7c1f..c0d0118be22 100644
--- a/packages/design-system/src/components/OcModal/OcModal.vue
+++ b/packages/design-system/src/components/OcModal/OcModal.vue
@@ -402,19 +402,23 @@ export default defineComponent({
     const cancelButton = ref(null)
 
     const setButtonsEqualWidth = () => {
-      const primaryWidth = unref(primaryButton) ? unref(primaryButton).$el.offsetWidth : 0
-      const secondaryWidth = unref(secondaryButton) ? unref(secondaryButton).$el.offsetWidth : 0
-      const cancelWidth = unref(cancelButton) ? unref(cancelButton).$el.offsetWidth : 0
+      const _primaryButton = unref(primaryButton)
+      const _secondaryButton = unref(secondaryButton)
+      const _cancelButton = unref(cancelButton)
+
+      const primaryWidth = _primaryButton ? _primaryButton.$el.offsetWidth : 0
+      const secondaryWidth = _secondaryButton ? _secondaryButton.$el.offsetWidth : 0
+      const cancelWidth = _cancelButton ? _cancelButton.$el.offsetWidth : 0
       const maxWidth = Math.max(primaryWidth, secondaryWidth, cancelWidth)
 
-      if (unref(primaryButton) && unref(primaryButton).$el) {
-        unref(primaryButton).$el.style.minWidth = `${maxWidth}px`
+      if (_primaryButton && _primaryButton.$el) {
+        _primaryButton.$el.style.minWidth = `${maxWidth}px`
       }
-      if (unref(secondaryButton) && unref(secondaryButton).$el) {
-        unref(secondaryButton).$el.style.minWidth = `${maxWidth}px`
+      if (_secondaryButton && _secondaryButton.$el) {
+        _secondaryButton.$el.style.minWidth = `${maxWidth}px`
       }
-      if (unref(cancelButton) && unref(cancelButton).$el) {
-        unref(cancelButton).$el.style.minWidth = `${maxWidth}px`
+      if (_cancelButton && _cancelButton.$el) {
+        _cancelButton.$el.style.minWidth = `${maxWidth}px`
       }
     }
     onMounted(() => {

From 95a009956bf4c005811fc625e094f151a4390d00 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Thu, 7 Sep 2023 16:22:43 +0200
Subject: [PATCH 5/8] Beautify code

---
 packages/design-system/src/components/OcModal/OcModal.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/design-system/src/components/OcModal/OcModal.vue b/packages/design-system/src/components/OcModal/OcModal.vue
index c0d0118be22..11f9202fa8b 100644
--- a/packages/design-system/src/components/OcModal/OcModal.vue
+++ b/packages/design-system/src/components/OcModal/OcModal.vue
@@ -406,9 +406,9 @@ export default defineComponent({
       const _secondaryButton = unref(secondaryButton)
       const _cancelButton = unref(cancelButton)
 
-      const primaryWidth = _primaryButton ? _primaryButton.$el.offsetWidth : 0
-      const secondaryWidth = _secondaryButton ? _secondaryButton.$el.offsetWidth : 0
-      const cancelWidth = _cancelButton ? _cancelButton.$el.offsetWidth : 0
+      const primaryWidth = _primaryButton?.$el?.offsetWidth || 0
+      const secondaryWidth = _secondaryButton?.$el?.offsetWidth || 0
+      const cancelWidth = _cancelButton?.$el?.offsetWidth || 0
       const maxWidth = Math.max(primaryWidth, secondaryWidth, cancelWidth)
 
       if (_primaryButton && _primaryButton.$el) {

From fddedb9f8e10bdd8ce52c089a1ef27c59f51b37f Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Thu, 7 Sep 2023 16:26:48 +0200
Subject: [PATCH 6/8] Adjust .drone.env

---
 .drone.env | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.drone.env b/.drone.env
index 5638677e4aa..f9034a82e32 100644
--- a/.drone.env
+++ b/.drone.env
@@ -1,3 +1,3 @@
 # The version of OCIS to use in pipelines that test against OCIS
-OCIS_COMMITID=ab384aba4472bdba5c54021afff6341cdac620e5
-OCIS_BRANCH=enable-kql
+OCIS_COMMITID=844783b6f927c498493b5e3d73350ab94374cdec
+OCIS_BRANCH=master

From 92c0606c20cbd73214a83085c0c5998ec5394d65 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Thu, 7 Sep 2023 16:33:11 +0200
Subject: [PATCH 7/8] Simplify if statements

---
 packages/design-system/src/components/OcModal/OcModal.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/design-system/src/components/OcModal/OcModal.vue b/packages/design-system/src/components/OcModal/OcModal.vue
index 11f9202fa8b..257416d6960 100644
--- a/packages/design-system/src/components/OcModal/OcModal.vue
+++ b/packages/design-system/src/components/OcModal/OcModal.vue
@@ -411,13 +411,13 @@ export default defineComponent({
       const cancelWidth = _cancelButton?.$el?.offsetWidth || 0
       const maxWidth = Math.max(primaryWidth, secondaryWidth, cancelWidth)
 
-      if (_primaryButton && _primaryButton.$el) {
+      if (_primaryButton?.$el) {
         _primaryButton.$el.style.minWidth = `${maxWidth}px`
       }
-      if (_secondaryButton && _secondaryButton.$el) {
+      if (_secondaryButton?.$el) {
         _secondaryButton.$el.style.minWidth = `${maxWidth}px`
       }
-      if (_cancelButton && _cancelButton.$el) {
+      if (_cancelButton?.$el) {
         _cancelButton.$el.style.minWidth = `${maxWidth}px`
       }
     }

From 0fc85ea25cef42e25dac5fb061b0510a09a62b2a Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Thu, 7 Sep 2023 16:59:15 +0200
Subject: [PATCH 8/8] Update snapshots

---
 .../OcModal/__snapshots__/OcModal.spec.ts.snap   | 16 ++++++++--------
 .../Users/__snapshots__/LoginModal.spec.ts.snap  |  4 ++--
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/design-system/src/components/OcModal/__snapshots__/OcModal.spec.ts.snap b/packages/design-system/src/components/OcModal/__snapshots__/OcModal.spec.ts.snap
index b992ac294d8..b58722eded2 100644
--- a/packages/design-system/src/components/OcModal/__snapshots__/OcModal.spec.ts.snap
+++ b/packages/design-system/src/components/OcModal/__snapshots__/OcModal.spec.ts.snap
@@ -15,9 +15,9 @@ exports[`OcModal displays input 1`] = `
         <!--v-if-->
       </div>
       <div class="oc-modal-body-actions oc-flex oc-flex-right">
-        <oc-button-stub appearance="outline" class="oc-modal-body-actions-cancel" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" variation="passive">Cancel</oc-button-stub>
+        <oc-button-stub appearance="outline" class="oc-modal-body-actions-cancel" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" style="min-width: 0px;" submit="button" type="button" variation="passive">Cancel</oc-button-stub>
         <!--v-if-->
-        <oc-button-stub appearance="filled" class="oc-modal-body-actions-confirm oc-ml-s" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" variation="primary">Confirm</oc-button-stub>
+        <oc-button-stub appearance="filled" class="oc-modal-body-actions-confirm oc-ml-s" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" style="min-width: 0px;" submit="button" type="button" variation="primary">Confirm</oc-button-stub>
       </div>
     </div>
   </focus-trap-stub>
@@ -39,9 +39,9 @@ exports[`OcModal hides icon if not specified 1`] = `
         <!--v-if-->
       </div>
       <div class="oc-modal-body-actions oc-flex oc-flex-right">
-        <oc-button-stub appearance="outline" class="oc-modal-body-actions-cancel" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" variation="passive">Cancel</oc-button-stub>
+        <oc-button-stub appearance="outline" class="oc-modal-body-actions-cancel" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" style="min-width: 0px;" submit="button" type="button" variation="passive">Cancel</oc-button-stub>
         <!--v-if-->
-        <oc-button-stub appearance="filled" class="oc-modal-body-actions-confirm oc-ml-s" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" variation="primary">Confirm</oc-button-stub>
+        <oc-button-stub appearance="filled" class="oc-modal-body-actions-confirm oc-ml-s" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" style="min-width: 0px;" submit="button" type="button" variation="primary">Confirm</oc-button-stub>
       </div>
     </div>
   </focus-trap-stub>
@@ -63,9 +63,9 @@ exports[`OcModal matches snapshot 1`] = `
         <!--v-if-->
       </div>
       <div class="oc-modal-body-actions oc-flex oc-flex-right">
-        <oc-button-stub appearance="outline" class="oc-modal-body-actions-cancel" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" variation="passive">Cancel</oc-button-stub>
+        <oc-button-stub appearance="outline" class="oc-modal-body-actions-cancel" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" style="min-width: 0px;" submit="button" type="button" variation="passive">Cancel</oc-button-stub>
         <!--v-if-->
-        <oc-button-stub appearance="filled" class="oc-modal-body-actions-confirm oc-ml-s" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" variation="primary">Confirm</oc-button-stub>
+        <oc-button-stub appearance="filled" class="oc-modal-body-actions-confirm oc-ml-s" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" style="min-width: 0px;" submit="button" type="button" variation="primary">Confirm</oc-button-stub>
       </div>
     </div>
   </focus-trap-stub>
@@ -87,9 +87,9 @@ exports[`OcModal overrides props message with slot 1`] = `
         <!--v-if-->
       </div>
       <div class="oc-modal-body-actions oc-flex oc-flex-right">
-        <oc-button-stub appearance="outline" class="oc-modal-body-actions-cancel" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" variation="passive">Cancel</oc-button-stub>
+        <oc-button-stub appearance="outline" class="oc-modal-body-actions-cancel" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" style="min-width: 0px;" submit="button" type="button" variation="passive">Cancel</oc-button-stub>
         <!--v-if-->
-        <oc-button-stub appearance="filled" class="oc-modal-body-actions-confirm oc-ml-s" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" variation="primary">Confirm</oc-button-stub>
+        <oc-button-stub appearance="filled" class="oc-modal-body-actions-confirm oc-ml-s" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" style="min-width: 0px;" submit="button" type="button" variation="primary">Confirm</oc-button-stub>
       </div>
     </div>
   </focus-trap-stub>
diff --git a/packages/web-app-admin-settings/tests/unit/components/Users/__snapshots__/LoginModal.spec.ts.snap b/packages/web-app-admin-settings/tests/unit/components/Users/__snapshots__/LoginModal.spec.ts.snap
index ace7553c1fc..3ac5b0cf074 100644
--- a/packages/web-app-admin-settings/tests/unit/components/Users/__snapshots__/LoginModal.spec.ts.snap
+++ b/packages/web-app-admin-settings/tests/unit/components/Users/__snapshots__/LoginModal.spec.ts.snap
@@ -17,9 +17,9 @@ exports[`LoginModal renders the input including two options 1`] = `
         <!--v-if-->
       </div>
       <div class="oc-modal-body-actions oc-flex oc-flex-right">
-        <oc-button-stub appearance="outline" class="oc-modal-body-actions-cancel" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" variation="passive">Cancel</oc-button-stub>
+        <oc-button-stub appearance="outline" class="oc-modal-body-actions-cancel" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" style="min-width: 0px;" submit="button" type="button" variation="passive">Cancel</oc-button-stub>
         <!--v-if-->
-        <oc-button-stub appearance="filled" class="oc-modal-body-actions-confirm oc-ml-s" disabled="true" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" variation="primary">Confirm</oc-button-stub>
+        <oc-button-stub appearance="filled" class="oc-modal-body-actions-confirm oc-ml-s" disabled="true" gapsize="medium" justifycontent="center" showspinner="false" size="medium" style="min-width: 0px;" submit="button" type="button" variation="primary">Confirm</oc-button-stub>
       </div>
     </div>
   </focus-trap-stub>