Znuny 7 - Provide slim theme / Fix grouping of elements

[chrullrich]

Environment

• Znuny version: 7.0.9

Expected behaviour

The UI should not waste space, or at least it should not try very hard to waste the most possible space.

Actual behaviour

The default UI of 7 is designed for use on touch screens by people wearing oven mitts. This results in an astounding amount of space wasted when run on normal, everyday, desktop hardware.

Case in point: AgentTicketCompose. In 6, the entire form fits in a window about 3/5 the height of my screen, and that is with one additional dynamic field and some other modifications that make it taller. It is entirely usable. In 7, that same form does not fit on the screen at once, and it looks like an otherwise pristine expanse of snow that someone has sprinkled random bits of text and lines across.

See screenshot below. Are you serious?

Some concrete suggestions while I'm here. There is no need, or point, to suggest that I do any of it if I feel so strongly about it. I don't understand how your templates work and do not have the time to learn. There is a lot that cannot be done in CSS alone.

• Add a skin that has margins, padding, line heights, font sizes, etc. approximately like 6.
• Put field labels and fields next to each other where possible. Most field labels are very short. They do not need a line of their own because that wastes nearly all of the space. This is true even if the target audience really is oven-mitted people; they don't like scrolling any more than I do.
• Reduce the span between the smallest and largest font sizes. In AgentTicketZoom the ticket text is absolutely tiny, yet it is the central item of information that the entire screen is about.
• If the color of field labels is meant to indicate whether the field is required (black: yes, gray: no), do it differently. Right now there is certainly enough space to write "(required)" next to the label ...
• About AgentTicketCompose, and probably everything with multivalued fields:
  • Do not repeat labels for multivalued fields: "To", "Cc", and "Bcc", once they have one or more values, show these values in a list that has the label at the top again, in addition to the one above the input field.
  • Remove some boxes: The multivalued fields again. They show their values in boxes, each enclosed in a box that only adds the "delete" button, the whole list enclosed in another box. The innermost box is completely superfluous.
  • Remove more boxes: Each section of the form is in its own box with generous padding, like "Ticket Data", "Dynamic Info", "Communications", etc. They should be replaced with horizontal lines, or with a bit of indentation, or even nothing at all. The entire form is in another unnecessary box that is in yet another one.
  • Arrange values horizontally: The aforementioned boxes within boxes within a box are arranged as a vertical list of one value per row even when there is more than enough space in the window to put them next to each other. Take as an example the "Next ticket state" field that, even though it is single-valued, does not expand the selected value across the whole line (even though it probably should; just like in 6 this field design is a clear visual indication that multiple values can be selected, and sometimes they even can).
  • Show values in a readable color (the default text color, i.e. black) instead of medium gray on light gray. There is no point to making the already-entered values more difficult to read.

Look at either of the Cc addresses in the screenshot. They are enclosed in six visual boxes including the window frame. The whole window looks more like a pillow fight (I withdraw the snow field analogy, this one is better) than a usable web form.

How to reproduce

Steps to reproduce the behavior:

1. Look at any screen in Znuny 7

Additional information

Screenshots

[hanneshal]

Hi @chrullrich

See screenshot below. Are you serious?

Some concrete suggestions while I'm here. There is no need, or point, to suggest that I do any of it if I feel so strongly about it. I don't understand how your templates work and do not have the time to learn. There is a lot that cannot be done in CSS alone.

First of all, calm your horses partner.

We never suggest/require anyone to fix anything. You report, we fix. We appreciate the feedback and the time you put into this, but there is really no need to rant around here. There are enough places on the wide internet where you can rant around, but GitHub, especially this repo, is not the place.

Now that this is out of the way, I can tell you that we will bring a slim theme later this year. This should resolve the spacing problem.

Regarding the duplicate labels, you are right and we already had some feedback on that in the forum and @dignin will pass this on and handle the issue.

I also edited the issue title to reflect the issue content.

Regards Johannes

[tipue-dev]

A slim theme would be great. Could you also make this the default? :wink:

[JiriVrab]

Hello, is there progress or delivery plan of announced slim theme? Any info would be appreciated. Thanks.

[kersten-lohmeyer]

Hey there, I'm also waiting really hard for a slim theme. I mean the default theme looks good but the amount of wasted space is insane. Otherwise thank you very much for maintaining and developing this great piece of software!

[zweigleisig]

Hello all. I'm also waiting for a solution. As a workaround, I manually changed some global margins and paddings in the .css file, but this causes a very few items to break.