Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enhancement: Set OcModal Buttons to equal width #9671

Merged
merged 8 commits into from
Sep 7, 2023
Merged

Enhancement: Set OcModal Buttons to equal width #9671

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
76d144d
Enhancement: Set OcModal Buttons to equal width
lookacat Sep 7, 2023
8995058
Fix console error
lookacat Sep 7, 2023
b835f1e
Add changelog
lookacat Sep 7, 2023
59164ae
Beautify code
lookacat Sep 7, 2023
95a0099
Beautify code
lookacat Sep 7, 2023
fddedb9
Adjust .drone.env
lookacat Sep 7, 2023
92c0606
Simplify if statements
lookacat Sep 7, 2023
0fc85ea
Update snapshots
lookacat Sep 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions .drone.env
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
6 changes: 6 additions & 0 deletions changelog/unreleased/enhancement-modal-buttons-same-width
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
40 changes: 39 additions & 1 deletion packages/design-system/src/components/OcModal/OcModal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,13 +67,15 @@
<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"
v-text="buttonCancelText"
/>
<oc-button
v-if="buttonSecondaryText"
ref="secondaryButton"
class="oc-modal-body-actions-secondary oc-ml-s"
:variation="buttonSecondaryVariation"
:appearance="buttonSecondaryAppearance"
Expand All @@ -82,6 +84,7 @@
/>
<oc-button
v-if="!withoutButtonConfirm"
ref="primaryButton"
class="oc-modal-body-actions-confirm oc-ml-s"
variation="primary"
:appearance="buttonConfirmAppearance"
Expand All @@ -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'
Expand Down Expand Up @@ -393,6 +396,41 @@ export default defineComponent({
checkboxValue: false
}
},
setup() {
const primaryButton = ref(null)
const secondaryButton = ref(null)
const cancelButton = ref(null)

const setButtonsEqualWidth = () => {
const _primaryButton = unref(primaryButton)
const _secondaryButton = unref(secondaryButton)
const _cancelButton = unref(cancelButton)

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?.$el) {
_primaryButton.$el.style.minWidth = `${maxWidth}px`
}
if (_secondaryButton?.$el) {
_secondaryButton.$el.style.minWidth = `${maxWidth}px`
}
if (_cancelButton?.$el) {
_cancelButton.$el.style.minWidth = `${maxWidth}px`
}
}
onMounted(() => {
setButtonsEqualWidth()
})

return {
primaryButton,
secondaryButton,
cancelButton
}
},
computed: {
initialFocusRef(): FocusTargetOrFalse {
if (this.focusTrapInitial) {
Expand Down
16 changes: 8 additions & 8 deletions packages/design-system/src/components/OcModal/__snapshots__/OcModal.spec.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions .../web-app-admin-settings/tests/unit/components/Users/__snapshots__/LoginModal.spec.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down