Improve the layout of the contacts app with single column list view and other changes

[arnowelzel]

Is your feature request related to a problem? Please describe.

The current layout of the contact app is not very efficient. A lot of space is wasted and some labels can't even be displayed completely because of this.

Example - this is the view when having the browser full screen using the equivalent of 1920*1080 (4K with 200% scaling):

As you can see the contact details use three quite narrow columns with a lot of space left and right in the view. This means that the labels "Zusätzliche Namen", "Erweiterte Adresse" and "Bundesland oder Region" are not displayed completely.

Another issue is the invisible "trash can" icon which appears when touching elements - sometimes it is not clear what exactly that icon applies to. In some cases it means to delete a field only but in other cases a whole block will be affected. However there is no visual indication what exactly will happen when clicking the icon and deleting something will also happen immediately without any confirmation.

Describe the solution you'd like

The layout could be improved in the following way:

• Use the available space completely and do not use fixed sized elements or maybe even only one colum so labels and content will have enough space.
• Have different modes for "view" and "edit". Most of the time people don't want to edit contacts but just look them up and use them. However in the current implementation one can very easy change data by accident and since all changes get saved immediately and without confirmation you may not even be aware that you have changed something.
• Indicate visually which element will be affected when deleting something (e.g. by putting a red border around the affected elements when hovering the trash can icon or by describing this in the tooltop like "Delete address" or "Delete field xyz").
• Do not delete elements without confirmation.
• Make adding fields easier to understand - at the moment there is a text "+ Add new property" wich can not be clicked at all. However one would think that clicking "+" will do something. And below there is an input element which can be clicked and will open a list to select what to add. However when selecting the property from the list the new element will show up somewhere in the form and the "+Add new property" will move around to another column which is quite confusing for many people.

Describe alternatives you've considered

Provide the option to use your own HTML template with placeholders for the elements.

Additional context

The layout of iCloud contacts may be a inspiration how to create a clean and simple layout - even though I would not exactly copy it, but the general way how this was done is much easier to use for many people:

[IndrekHaav]

A linear layout (like in the iCloud screenshots) would also fix the annoyance of the form elements moving around as you add or remove contact properties.

[ChristophWurst]

Related #1923

[RokeJulianLockhart]

@arnowelzel, potentially rename this issue so that it demonstrates that the priority, if not sole problem that it demonstrates, is that the fields should be presented as a list, because locating this was difficult, so I almost created a duplicate for a list-view of forms.

[arnowelzel]

@BEEDELLROKEJULIANLOCKHART Using a list instead of multicolumn is not the only problem. But I changed the issue to reflect the single column approach.

But please read the section "Describe the solution you'd like" to understand that using a single column is not the only proposed change.

[robertmx]

I am just testing a fresh install of NC 25.0.1 and found the contacts app layout to be even worse than before.
The spacing between the elements look random, the arrangement of the individual inputs is confusing. Not a single element is properly aligned. That does not look like an improvement at the moment.

[arnowelzel]

Since it seems to take a while until this is fixed, I started working on a workaround using CustomCSS. So far I added the following rules to achieve the following goals:

• have a single column layout
• make sure all labels are the same format and use more space, so you can also read the label and do not have to guess the text
• same border-radius for all input elements
• use normal text color for labels to improve readability
• use regular text size for text input elements

/* Customize "contacts" layout */

section.contact-details {
  width: 100% !important;
}

section.contact-details .property-masonry {
  display: block !important;
  position: relative !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
}

section.contact-details .property-masonry .property__label {
  text-align: left !important;
  padding-right: 1em !important;
  width: 16em !important;
  min-width: 16em !important;
  max-width: 16em !important;
  opacity: 1 !important;
}

section.contact-details .property-masonry .property__value {
  font-size: 1em !important;
  border-radius: var(--border-radius-large) !important;
}

section.contact-details .property-masonry .multiselect__tags {
  padding-left: 0 !important;
}

section.contact-details .property-masonry .multiselect__single {
  color: var(--color-text) !important;
  opacity: 1 !important;
}

section.contact-details .property-masonry .multiselect__tags > .multiselect__single {
  padding: 0 12px !important;
}

section.contact-details .property-masonry .multiselect__tags > .multiselect__input,
section.contact-details .property-masonry .multiselect__tags > .multiselect__tags-wrap {
  margin-left: 12px !important;
}

section.contact-details .property-masonry .property {
  width: 100% !important;
  max-width: 50em !important;
}

section.contact-details .property--rev {
  display: block !important;
  position: relative !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  height: auto !important;
  line-height: inherit !important
}

@media only screen and (max-width: 1280px) {
  section.contact-details .property-masonry .property__row {
    display:block !important;
  }

  section.contact-details .property-masonry .property__value {
    width: 100% !important;
  }
}

The result is not perfect yet and will not work nicely on mobile devices since labels and input element should be placed in a different way there - but it is still much easier to use than before in my opinion and one might add a media selector for mobile devices as well to cope with that.

Update 2023-03-19: I tried to improve some details. But I believe this is more or less all I can achieve with CSS only. Some other issues in the UI may to be addressed in the code, for example:

• When an element is a selectable type, like the labels for the phone numbers, there should be a clear visual indication that you can click on it and select something.
• Adress book and contact groups look like they are meant to input text, but these are drop down select elements.

Since HTML provides SELECT elements it's not clear why not using them. There are also components like select2 which can improve the usability of SELECT - but the current implementation with using INPUT and some script to open a list when focusing the element seems not very robust.

Update 2023-03-26: I added two rules to fix the missing margins for input elements which are used to select options from drop down lists.

Update 2023-03-26: I now added a media query which will position the labels and input elements on top of each other if the display is less than 1280px wide. This way the contacts app is at least usable on mobile devices as well, eventhough the mobile layout still needs more attention.

Update 2023-03-28: Another little fix for input elements which contain multi select tags.

[st3iny]

Development is now tracked in:

• Single column layout #3305
• Implement read-only/view mode for contact details view #3284
• Design improvements to "Add new property"  #3304

[ChristophWurst]

Closing as duplicate therefore