From bc638eaedc016c854984ed894a65f8612c9afc7d Mon Sep 17 00:00:00 2001 From: hurradieweltgehtunter Date: Tue, 7 Mar 2023 13:04:43 +0100 Subject: [PATCH 01/46] Update form input css --- .../enhancement-beautify-form-inputs | 0 .../components/OcSearchBar/OcSearchBar.vue | 3 +- .../src/components/OcSelect/OcSelect.vue | 85 +++++++++++++++++-- .../components/OcTextInput/OcTextInput.vue | 12 +-- packages/design-system/src/styles/styles.scss | 1 + .../src/styles/theme/oc-form.scss | 46 +++++++--- .../src/styles/theme/oc-label.scss | 4 + 7 files changed, 121 insertions(+), 30 deletions(-) create mode 100644 changelog/unreleased/enhancement-beautify-form-inputs create mode 100644 packages/design-system/src/styles/theme/oc-label.scss diff --git a/changelog/unreleased/enhancement-beautify-form-inputs b/changelog/unreleased/enhancement-beautify-form-inputs new file mode 100644 index 00000000000..e69de29bb2d diff --git a/packages/design-system/src/components/OcSearchBar/OcSearchBar.vue b/packages/design-system/src/components/OcSearchBar/OcSearchBar.vue index 61eaa2475d6..d4d961734df 100644 --- a/packages/design-system/src/components/OcSearchBar/OcSearchBar.vue +++ b/packages/design-system/src/components/OcSearchBar/OcSearchBar.vue @@ -325,13 +325,14 @@ export default defineComponent({ &-input { border-radius: 25px !important; - border: 1px solid var(--oc-color-input-border) !important; + border: none; color: var(--oc-color-input-text-muted) !important; &:focus { background-color: var(--oc-color-input-bg); border-color: var(--oc-color-input-text-default); color: var(--oc-color-input-text-default); + background-image: none; } &::-ms-clear, diff --git a/packages/design-system/src/components/OcSelect/OcSelect.vue b/packages/design-system/src/components/OcSelect/OcSelect.vue index 8f589752133..b9fc5fe520f 100644 --- a/packages/design-system/src/components/OcSelect/OcSelect.vue +++ b/packages/design-system/src/components/OcSelect/OcSelect.vue @@ -1,6 +1,6 @@ @@ -124,6 +153,36 @@ export default defineComponent({ type: Boolean, required: false, default: false + }, + + /** + * A warning message which is shown below the select. + */ + warningMessage: { + type: String, + default: null + }, + /** + * An error message which is shown below the select. + */ + errorMessage: { + type: String, + default: null + }, + /** + * Whether or not vertical space below the select should be reserved for a one line message, + * so that content actually appearing there doesn't shift the layout. + */ + fixMessageLine: { + type: Boolean, + default: false + }, + /** + * A description text which is shown below the select field. + */ + descriptionMessage: { + type: String, + default: null } }, emits: ['search:input', 'update:modelValue'], @@ -136,6 +195,28 @@ export default defineComponent({ additionalAttrs['label'] = this.optionLabel } return { ...this.$attrs, ...additionalAttrs } + }, + showMessageLine() { + return ( + this.fixMessageLine || + !!this.warningMessage || + !!this.errorMessage || + !!this.descriptionMessage + ) + }, + messageText() { + if (this.errorMessage) { + return this.errorMessage + } + + if (this.warningMessage) { + return this.warningMessage + } + + return this.descriptionMessage + }, + messageId() { + return `${this.id}-message` } }, diff --git a/packages/design-system/src/components/OcTextInput/OcTextInput.vue b/packages/design-system/src/components/OcTextInput/OcTextInput.vue index 7cc81e9fa84..1fee9d72e81 100644 --- a/packages/design-system/src/components/OcTextInput/OcTextInput.vue +++ b/packages/design-system/src/components/OcTextInput/OcTextInput.vue @@ -29,7 +29,24 @@ -
+
+
@@ -55,7 +54,30 @@ export default { disabled: { type: Boolean, default: false + }, + + /** + * A warning message which is shown below the select. + */ + warningMessage: { + type: String, + default: null + }, + /** + * An error message which is shown below the select. + */ + errorMessage: { + type: String, + default: null + }, + /** + * A description text which is shown below the select field. + */ + descriptionMessage: { + type: String, + default: null } + }, emits: ['selectedOptionChange'], data: function () { From fa08b5369a6ed146325a26699988e865dbad6a4e Mon Sep 17 00:00:00 2001 From: hurradieweltgehtunter Date: Tue, 14 Mar 2023 12:39:37 +0100 Subject: [PATCH 26/46] lint --- .../design-system/src/tokens/ods/color.yaml | 19 +++++++++++++++++-- .../components/Users/SideBar/EditPanel.vue | 4 +++- .../__snapshots__/EditPanel.spec.ts.snap | 8 ++++---- .../__snapshots__/GroupSelect.spec.ts.snap | 2 +- .../web-pkg/src/components/QuotaSelect.vue | 9 ++++----- 5 files changed, 29 insertions(+), 13 deletions(-) diff --git a/packages/design-system/src/tokens/ods/color.yaml b/packages/design-system/src/tokens/ods/color.yaml index ea8bbf184c9..121f04c048e 100644 --- a/packages/design-system/src/tokens/ods/color.yaml +++ b/packages/design-system/src/tokens/ods/color.yaml @@ -1,5 +1,20 @@ --- color: + # sample: + # default: + # value: "{color.swatch.warning.hover.value}" + # check: + # contrast: + # ratio: 3.5 + # background: + # - "{color.background.default.value}" + # - "{color.background.muted.value}" + # transform: + # darken: 23 + # lighten: 10 + # brighten: 10 + # desaturate: 10 + # saturate: 10 # sample: # default: # value: "{color.swatch.warning.hover.value}" @@ -53,12 +68,12 @@ color: value: '{color.text.inverse.value}' warning: default: - value: rgb(192,86,33) + value: rgb(183, 76, 27) check: contrast: ratio: 4.6 hover: - value: rgb(192,86,33) + value: rgb(183, 76, 27) muted: value: rgba(192,86,33, .5) contrast: diff --git a/packages/web-app-admin-settings/src/components/Users/SideBar/EditPanel.vue b/packages/web-app-admin-settings/src/components/Users/SideBar/EditPanel.vue index 450935437d6..0df00a5beec 100644 --- a/packages/web-app-admin-settings/src/components/Users/SideBar/EditPanel.vue +++ b/packages/web-app-admin-settings/src/components/Users/SideBar/EditPanel.vue @@ -81,8 +81,10 @@ :title="$gettext('Personal quota')" :total-quota="editUser.drive.quota ? editUser.drive.quota.total : 0" :max-quota="maxQuota" + :description-message=" + $gettext('To set an individual quota, the user needs to have logged in once.') + " @selected-option-change="changeSelectedQuotaOption" - :descriptionMessage="$gettext('To set an individual quota, the user needs to have logged in once.')" />
- +
- +
- - + +
diff --git a/packages/web-app-admin-settings/tests/unit/components/Users/__snapshots__/GroupSelect.spec.ts.snap b/packages/web-app-admin-settings/tests/unit/components/Users/__snapshots__/GroupSelect.spec.ts.snap index 8e81da718e9..c0992946d2e 100644 --- a/packages/web-app-admin-settings/tests/unit/components/Users/__snapshots__/GroupSelect.spec.ts.snap +++ b/packages/web-app-admin-settings/tests/unit/components/Users/__snapshots__/GroupSelect.spec.ts.snap @@ -2,6 +2,6 @@ exports[`GroupSelect renders the select input 1`] = `
- +
`; diff --git a/packages/web-pkg/src/components/QuotaSelect.vue b/packages/web-pkg/src/components/QuotaSelect.vue index f06002aa30c..446bab9ec4d 100644 --- a/packages/web-pkg/src/components/QuotaSelect.vue +++ b/packages/web-pkg/src/components/QuotaSelect.vue @@ -12,10 +12,10 @@ :create-option="createOption" option-label="displayValue" :label="title" + :error-message="errorMessage" + :warning-message="warningMessage" + :description-message="descriptionMessage" @update:model-value="onUpdate" - :errorMessage="errorMessage" - :warningMessage="warningMessage" - :descriptionMessage="descriptionMessage" >