diff options
author | Richard Steinmetz <richard@steinmetz.cloud> | 2023-04-27 16:40:01 +0200 |
---|---|---|
committer | Christoph Wurst <christoph@winzerhof-wurst.at> | 2023-04-28 14:05:06 +0200 |
commit | 0972b744116bfa7bd8fcb4ee9dd29c0eda23b872 (patch) | |
tree | 43e23090f4e243c346729a8374d9c4d25248687b /css | |
parent | a352bff65fa2414e00ec96352b2a37422bd75e22 (diff) |
feat(contacts): implement read-only and edit modes
Signed-off-by: Richard Steinmetz <richard@steinmetz.cloud>
Diffstat (limited to 'css')
-rw-r--r-- | css/ContactDetailsLayout.scss | 6 | ||||
-rw-r--r-- | css/Properties/Properties.scss | 103 | ||||
-rw-r--r-- | css/contacts.scss | 8 |
3 files changed, 48 insertions, 69 deletions
diff --git a/css/ContactDetailsLayout.scss b/css/ContactDetailsLayout.scss index a4c0236b..5fbb45c1 100644 --- a/css/ContactDetailsLayout.scss +++ b/css/ContactDetailsLayout.scss @@ -20,12 +20,6 @@ * */ -$contact-details-label-min-width: 100px; $contact-details-label-max-width: 200px; -$contact-details-label-width: calc(($contact-details-label-min-width + $contact-details-label-max-width) / 2); - -$contact-details-value-min-width: 200px; $contact-details-value-max-width: 300px; -$contact-details-value-width: calc(($contact-details-value-min-width + $contact-details-value-max-width) / 2); - $contact-details-row-gap: 15px; diff --git a/css/Properties/Properties.scss b/css/Properties/Properties.scss index 58cea711..9bd8e99a 100644 --- a/css/Properties/Properties.scss +++ b/css/Properties/Properties.scss @@ -23,13 +23,8 @@ @import '../ContactDetailsLayout.scss'; -$property-label-min-width: $contact-details-label-min-width; $property-label-max-width: $contact-details-label-max-width; -$property-label-width: $contact-details-label-width; - -$property-value-min-width: $contact-details-value-min-width; $property-value-max-width: $contact-details-value-max-width; -$property-value-width: $contact-details-value-width; $property-ext-padding-right: 8px; $property-row-gap: $contact-details-row-gap; @@ -42,13 +37,6 @@ $property-row-gap: $contact-details-row-gap; display: flex; align-items: center; gap: $property-row-gap; - - .property__actions { - // placeholder for the actions menu - &__empty { - width: 44px; - } - } } // property row @@ -57,12 +45,6 @@ $property-row-gap: $contact-details-row-gap; align-items: center; gap: $property-row-gap; - &--without-actions { - .property__value { - margin-right: $property-row-gap + 44px; // actions menu / button - } - } - // fix default margin from server stylesheet causing slight misalignment input { margin-right: 0; @@ -71,88 +53,89 @@ $property-row-gap: $contact-details-row-gap; // property label or multiselect within row &__label { + // Global single column layout display: flex; - justify-content: end; - flex: 1 auto; - - width: $property-label-width !important; - min-width: $property-label-min-width !important; - max-width: $property-label-max-width !important; + flex: 0 1 auto; + justify-content: flex-end; + width: $contact-details-label-max-width; + min-width: 0; // Has to be zero unless we implement wrapping - &:not(.multiselect) { + // Text label styling + > :not(.multiselect):not(.material-design-icon) { overflow: hidden; - overflow-x: hidden; white-space: nowrap; text-overflow: ellipsis; opacity: .7; } } - // Hide delete buttons initially - .action-item.icon-delete { - opacity: 0; - } - // Property value within row, after label &__value { - flex: 1 auto; + align-items: center; - width: $property-value-width !important; - //min-width: $property-value-min-width !important; - min-width: unset !important; - max-width: $property-value-max-width !important; + // Global single column layout + display: flex; + flex: 0 1 auto; + width: $property-value-max-width; + min-width: 0; // Has to be zero unless we implement wrapping textarea { - align-self: flex-start; + // Limit max height to make scrolling the form a bit easier min-height: 2 * $grid-height-unit - 2*$grid-input-margin; max-height: 5 * $grid-height-unit - 2*$grid-input-margin; } - // read-only mode - &:read-only { - border-color: var(--color-border-dark); + input, + textarea { + width: 100%; + + // Remove default input styling for read-only inputs. + // We can't use plain divs because that would cause jumping on switching modes. + &[readonly] { + border: none; + overflow: auto; + outline: none; + resize: none; + padding: 0; + border-radius: 0; + } } - &--with-ext { - // ext icon width + 8px padding - padding-right: 24px; + } + + &__label, + &__value { + // Fix default multiselect styling + > .multiselect { + width: 100%; + min-width: unset; } - // Show ext icon permanently on focus - &:hover, - &:focus, - &:active { - ~ .property__ext { - opacity: .5; - } + // Fix default date time picker styling + > .mx-datepicker { + width: 100%; } } // Show ext buttons on full row hover &:hover { .property__ext { - opacity: .5; + opacity: .7; } } // External link (tel, mailto, http, ftp...) &__ext { - position: absolute; - // 8px padding + actions - right: 44px + $property-ext-padding-right; opacity: 0; + &:hover, - &:focus, - &:active { + &:focus { opacity: .7; } } - .no-move { - right: $property-ext-padding-right; - } - // Delete property button + actions &__actions { z-index: 10; + width: 44px; } } diff --git a/css/contacts.scss b/css/contacts.scss index 60e0513f..116d943a 100644 --- a/css/contacts.scss +++ b/css/contacts.scss @@ -38,17 +38,19 @@ $grid-input-height-with-margin: $grid-height-unit - $grid-input-margin * 2; // various @import 'animations'; - - .app-content-details { padding: calc(var(--default-grid-baseline) * 2); padding-top: 0; height: 100%; overflow: auto; + + // Compensate top padding reserved for the back button on mobile + @media (max-width: 1024px) { + height: calc(100% - 44px); + } } .app-content-list { // Cancel scrolling overflow: visible; - } |