diff options
author | Richard Steinmetz <richard@steinmetz.cloud> | 2022-07-19 15:12:31 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-07-19 15:12:31 +0200 |
commit | c6deb5a2146fccfb588b50eb1fbc050ec2b297b2 (patch) | |
tree | 3b8764ec195c721423e864c855c9c1856351458a | |
parent | 12ed322d598388cb33382ca0396c4fe967d8f484 (diff) | |
parent | be2f488375207ae9bbce1feaa8a7e0ee789fbc34 (diff) |
Merge pull request #2855 from nextcloud/backport/2817/stable4.2
[stable4.2] Fix styling regression on contacts
-rw-r--r-- | src/components/ContactDetails.vue | 22 | ||||
-rw-r--r-- | src/components/ContactDetails/ContactDetailsAddNewProp.vue | 13 | ||||
-rw-r--r-- | src/components/Properties/PropertyGroups.vue | 25 | ||||
-rw-r--r-- | src/components/Properties/PropertyMultipleText.vue | 45 | ||||
-rw-r--r-- | src/components/Properties/PropertySelect.vue | 26 | ||||
-rw-r--r-- | src/components/Properties/PropertyText.vue | 25 | ||||
-rw-r--r-- | src/components/Properties/PropertyTitle.vue | 10 |
7 files changed, 164 insertions, 2 deletions
diff --git a/src/components/ContactDetails.vue b/src/components/ContactDetails.vue index d53a7cfb..0464927f 100644 --- a/src/components/ContactDetails.vue +++ b/src/components/ContactDetails.vue @@ -790,6 +790,7 @@ section.contact-details { ::v-deep .property-masonry { width: 350px; + padding: 5px; } .property--rev { @@ -839,4 +840,25 @@ section.contact-details { max-width: 414px; justify-self: center; } +section.contact-details .property-masonry { + width: 350px; +} +.property__label:not(.multiselect) { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + opacity: 0.7; +} +.property__label, .property__label.multiselect { + flex: 1 0; + width: 60px; + min-width: 60px !important; + max-width: 120px; + height: 34px; + margin: 3px 5px 3px 0 !important; + user-select: none; + text-align: right; + background-size: 16px; + line-height: 35px; +} </style> diff --git a/src/components/ContactDetails/ContactDetailsAddNewProp.vue b/src/components/ContactDetails/ContactDetailsAddNewProp.vue index aafdfd7c..da9ca186 100644 --- a/src/components/ContactDetails/ContactDetailsAddNewProp.vue +++ b/src/components/ContactDetails/ContactDetailsAddNewProp.vue @@ -129,3 +129,16 @@ export default { }, } </script> +<style lang="scss" scoped> +.property__label:not(.multiselect) { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + opacity: 0.7; +} +.property__row { + position: relative; + display: flex; + align-items: center; +} +</style> diff --git a/src/components/Properties/PropertyGroups.vue b/src/components/Properties/PropertyGroups.vue index 67e889b1..cbf6576f 100644 --- a/src/components/Properties/PropertyGroups.vue +++ b/src/components/Properties/PropertyGroups.vue @@ -188,3 +188,28 @@ export default { } </script> +<style lang="scss" scoped> +.property__label:not(.multiselect) { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + opacity: 0.7; +} +.property__row { + position: relative; + display: flex; + align-items: center; +} +.property__label, .property__label.multiselect { + flex: 1 0; + width: 60px; + min-width: 60px !important; + max-width: 120px; + height: 34px; + margin: 3px 5px 3px 0 !important; + user-select: none; + text-align: right; + background-size: 16px; + line-height: 35px; +} +</style> diff --git a/src/components/Properties/PropertyMultipleText.vue b/src/components/Properties/PropertyMultipleText.vue index 3b4be4c1..b5b73310 100644 --- a/src/components/Properties/PropertyMultipleText.vue +++ b/src/components/Properties/PropertyMultipleText.vue @@ -25,7 +25,8 @@ <!-- title if first element --> <PropertyTitle v-if="isFirstProperty && propModel.icon" :icon="propModel.icon" - :readable-name="propModel.readableName" /> + :readable-name="propModel.readableName" + :has-actions="!isReadOnly" /> <div class="property__row"> <!-- type selector --> @@ -132,3 +133,45 @@ export default { } </script> +<style lang="scss" scoped> +.property__label { + flex: 1 0; + width: 60px; + min-width: 60px !important; + max-width: 120px; + height: 34px; + margin: 3px 5px 3px 0 !important; + user-select: none; + text-align: right; + background-size: 16px; + line-height: 35px; +} +.property__label:not(.multiselect) { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + opacity: 0.7; +} +.property__row { + position: relative; + display: flex; + align-items: center; +} +input:not([type='range']) { + margin: 3px 3px 3px 0; + padding: 7px 6px; + font-size: 13px; + background-color: var(--color-main-background); + color: var(--color-main-text); + outline: none; + border-radius: var(--border-radius); + cursor: text; +} +.property__value { + flex: 1 1; +} +::v-deep.property__label.multiselect .multiselect__tags { + border: none !important; +} + +</style> diff --git a/src/components/Properties/PropertySelect.vue b/src/components/Properties/PropertySelect.vue index 8e4ef727..cbfe392d 100644 --- a/src/components/Properties/PropertySelect.vue +++ b/src/components/Properties/PropertySelect.vue @@ -125,3 +125,29 @@ export default { } </script> +<style lang="scss" scoped> +.property__label:not(.multiselect) { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + opacity: 0.7; +} +.property__row { + position: relative; + display: flex; + align-items: center; +} +.property__label, .property__label.multiselect { + flex: 1 0; + width: 60px; + min-width: 60px !important; + max-width: 120px; + height: 34px; + margin: 3px 5px 3px 0 !important; + user-select: none; + text-align: right; + background-size: 16px; + line-height: 35px; +} + +</style> diff --git a/src/components/Properties/PropertyText.vue b/src/components/Properties/PropertyText.vue index a7eceb51..7ffd456a 100644 --- a/src/components/Properties/PropertyText.vue +++ b/src/components/Properties/PropertyText.vue @@ -204,3 +204,28 @@ export default { }, } </script> +<style lang="scss" scoped> +.property__label:not(.multiselect) { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + opacity: 0.7; +} +.property__row { + position: relative; + display: flex; + align-items: center; +} +.property__label, .property__label.multiselect { + flex: 1 0; + width: 60px; + min-width: 60px !important; + max-width: 120px; + height: 34px; + margin: 3px 5px 3px 0 !important; + user-select: none; + text-align: right; + background-size: 16px; + line-height: 35px; +} +</style> diff --git a/src/components/Properties/PropertyTitle.vue b/src/components/Properties/PropertyTitle.vue index c92a5414..d66df242 100644 --- a/src/components/Properties/PropertyTitle.vue +++ b/src/components/Properties/PropertyTitle.vue @@ -21,7 +21,8 @@ --> <template> - <h3 class="property__title property__row"> + <h3 class="property__title property__row" + :class="{'align-to-actions': hasActions}"> <PropertyTitleIcon :icon="icon" /> <div class="property__value property__title--right"> {{ readableName }} @@ -47,6 +48,10 @@ export default { default: '', required: true, }, + hasActions: { + type: Boolean, + default: false, + } }, } </script> @@ -62,4 +67,7 @@ export default { display: flex; justify-content: space-between; } +.align-to-actions { + padding-bottom: 10px; +} </style> |