Download it now!
Bug 133692 - Add margin to formula bar
Summary: Add margin to formula bar
Status: RESOLVED FIXED
Alias: None
Product: LibreOffice
Classification: Unclassified
Component: Calc (show other bugs)
Version:
(earliest affected)
unspecified
Hardware: All Windows (All)
: medium enhancement
Assignee: Thorsten Wagner
URL:
Whiteboard: target:7.1.0 target:7.0.0.1
Keywords:
: 133057 (view as bug list)
Depends on:
Blocks: Calc-Formula-Bar
  Show dependency treegraph
 
Reported: 2020-06-05 07:24 UTC by andreas_k
Modified: 2020-06-19 15:07 UTC (History)
6 users (show)

See Also:
Crash report or crash signature:


Attachments
Calc (156.77 KB, image/png)
2020-06-05 07:24 UTC, andreas_k
Details
Additional screenshot from macOS (73.37 KB, image/png)
2020-06-08 20:13 UTC, Thorsten Wagner
Details
QT backend (15.53 KB, image/png)
2020-06-08 21:31 UTC, andreas_k
Details
Screenshot from macOS (85.50 KB, image/png)
2020-06-13 19:11 UTC, Thorsten Wagner
Details
Screenshot from Linux with QT 1 (58.90 KB, image/png)
2020-06-13 19:11 UTC, Thorsten Wagner
Details
Screenshot from Linux with QT 2 (60.48 KB, image/png)
2020-06-13 19:12 UTC, Thorsten Wagner
Details
Screenshot from Linux with GTK (186.01 KB, image/png)
2020-06-13 19:12 UTC, Thorsten Wagner
Details
Screenshot from macOS + additional tuning (91.03 KB, image/png)
2020-06-13 21:09 UTC, andreas_k
Details
Extended input line (8.07 KB, image/png)
2020-06-14 07:07 UTC, andreas_k
Details
Screenshot from macOS 2 (126.07 KB, image/png)
2020-06-14 19:24 UTC, Thorsten Wagner
Details
Screenshot from Linux with QT 3 (62.73 KB, image/png)
2020-06-14 22:12 UTC, Thorsten Wagner
Details
Screenshot from Linux with GTK 2 (114.81 KB, image/png)
2020-06-14 22:12 UTC, Thorsten Wagner
Details
Screenshot from windows after the patch (38.53 KB, image/png)
2020-06-18 08:34 UTC, andreas_k
Details

Note You need to log in before you can comment on or make changes to this bug.
Description andreas_k 2020-06-05 07:24:45 UTC
Created attachment 161641 [details]
Calc

request to optimize the visual layout of the calc specific toolbar

1. The Number Box has no space to the border (see other toolbar elements)

2. The height of the calc specific toolbar should be a bit higher or at least there should be some space on top and bottom of the Number Box and Input Line. (green circles)

3. I don't think that there are separators needed cause left and right are boxes with vertical lines

4. The arrow to increase the Input Line would fit better if it will be inside of the Input Line field.

As example see Excel's layout
Comment 1 Heiko Tietze 2020-06-08 09:46:29 UTC
Yes, let's have 2px or so margin. Thorsten, one for you?
Comment 2 Thorsten Wagner 2020-06-08 20:13:19 UTC
Space should be possible, but it seems to be a Windows-only issue (see additional screenshot from macOS attached). Removing separators should be possible as well.

Moving the arrow inside input line will cause problems with other widget sets (e.g. GTK, Carbon/Cocoa) as they are using thinner scrollbars than Windows. This would bring back the original issue with an input line appropriate for different widget set.

I will look at spacing but keep arrow outside input line as is. As I'm capable to build on macOS and Linux only, who is able to build and test on Windows?
Comment 3 Thorsten Wagner 2020-06-08 20:13:49 UTC
Created attachment 161780 [details]
Additional screenshot from macOS
Comment 4 andreas_k 2020-06-08 21:31:05 UTC
Created attachment 161784 [details]
QT backend

compare font name and name box they should be in one vertical line. I think it's the same on osx. In gtk3 it's the same.
Comment 5 andreas_k 2020-06-08 21:33:59 UTC
In addition it would be nice if the Name Box widget has the same width than the Font Name widget (which is above the Name Box widget).
Comment 6 andreas_k 2020-06-08 21:43:06 UTC
And as I wrote I'm for remove the two separators see first attachment.
Comment 7 Heiko Tietze 2020-06-09 09:05:12 UTC
(In reply to Thorsten Wagner from comment #2)
> ... who is able to build and test on Windows?

Afraid you have to submit and wait for Andreas to test the nightly build. Thanks for looking into the issue.
Comment 8 andreas_k 2020-06-09 09:09:52 UTC
I will test on the daily build when the patch is in master on windows, gtk3 and qt backend.

Thanks for your support Thorsten.
Comment 9 Thorsten Wagner 2020-06-13 19:10:27 UTC
Committed a frist patch to gerrit:

https://gerrit.libreoffice.org/c/core/+/96263

Patch contains the following changes:

(1) Margin of 2 px added to top and bottom of all control widgets within toolbars if their height exceeds height of other widgets within bar (this will cause margins within Calc formulabar for QT's, GTK's, and Windows widgets, spacing on macOS will remain unchanged as widgets are not that large)

(2) Separators removed, Space between position widget and buttons to control inputline inserted to show association of buttons

(3) Width of position widget set to width of style widget within formatting toolbar

Remaining issue:

(1) Screenshot macOS: Formatting toolbar on top of Calc inputbar has drag area on left causing an indent of style widget; comboboxes are not aligned due to drag area

(2) Screenshot Linux, QT 1: Undocking of toolbars seem to be disabled with QT. Nevertheless there is a small indent on toolbars with (disabled) drag areas; comboboxes are not aligned due to (disabled) drag area

(3) Screenshot Linux, QT 2: Notebookbar has the same indent as Calc's formulabar

(4) Screenshot Linux, GTK: Undocking of toolbars seem to be disabled with GTK. Nevertheless there is a small indent on toolbars with (disabled) drag areas; comboboxes are not aligned due to (disabled) drag area

As left margins with notebookbar are correct, indent of Calc's formulabar position widget seems to be correct too.

Suggestion: Remove left margins on toolbars with disabled drag area (as separate patch)
Comment 10 Thorsten Wagner 2020-06-13 19:11:15 UTC
Created attachment 161959 [details]
Screenshot from macOS
Comment 11 Thorsten Wagner 2020-06-13 19:11:55 UTC
Created attachment 161960 [details]
Screenshot from Linux with QT 1
Comment 12 Thorsten Wagner 2020-06-13 19:12:14 UTC
Created attachment 161961 [details]
Screenshot from Linux with QT 2
Comment 13 Thorsten Wagner 2020-06-13 19:12:36 UTC
Created attachment 161962 [details]
Screenshot from Linux with GTK
Comment 14 Thorsten Wagner 2020-06-13 19:21:55 UTC
BTW: Why are drag handles disabled on Linux/QT and Linux/GTK while being enabled on macOS?
Comment 15 andreas_k 2020-06-13 20:30:08 UTC
(In reply to Thorsten Wagner from comment #9)
> Committed a frist patch to gerrit:
> 
> https://gerrit.libreoffice.org/c/core/+/96263
> 
> Patch contains the following changes:
> 
> (1) Margin of 2 px added to top and bottom of all control widgets within
> toolbars if their height exceeds height of other widgets within bar (this
> will cause margins within Calc formulabar for QT's, GTK's, and Windows
> widgets, spacing on macOS will remain unchanged as widgets are not that
> large)

work fine on all screenshots. so + 1

> (2) Separators removed, Space between position widget and buttons to control
> inputline inserted to show association of buttons

+ 1 for remove separators. The space between Name Box and Function wizzard is to big.
 
> (3) Width of position widget set to width of style widget within formatting
> toolbar

+ 1 thanks a lot
 
> Remaining issue:
> 
> (1) Screenshot macOS: Formatting toolbar on top of Calc inputbar has drag
> area on left causing an indent of style widget; comboboxes are not aligned
> due to drag area

as you wrote, should be fixed toolbar.

> (2) Screenshot Linux, QT 1: Undocking of toolbars seem to be disabled with
> QT. Nevertheless there is a small indent on toolbars with (disabled) drag
> areas; comboboxes are not aligned due to (disabled) drag area
> 
> (3) Screenshot Linux, QT 2: Notebookbar has the same indent as Calc's
> formulabar

yes that look really good.

> (4) Screenshot Linux, GTK: Undocking of toolbars seem to be disabled with
> GTK. Nevertheless there is a small indent on toolbars with (disabled) drag
> areas; comboboxes are not aligned due to (disabled) drag area
> 
> As left margins with notebookbar are correct, indent of Calc's formulabar
> position widget seems to be correct too.
> 
> Suggestion: Remove left margins on toolbars with disabled drag area (as
> separate patch)

as remove left margins on fixed toolbars are not really a good idea see attachment 161641 [details] on windows I recommend to add left margin to formulabar which will than fit prefect on os-x, qt1, gtk3 and windows when the other toolbars are fixed (which should be the default see bug I don't know which number), but didn't fit perfect on tabbed notebookbars and non fixed toolbars. But both are not the default, so on default it should work.
Comment 16 andreas_k 2020-06-13 20:34:54 UTC
Expand formula bar button has an right margin. Please remove it so the arrow look at least align in the gray area. If the arrow can be replaced by an icon from the icon theme, than it would be even more perfect, cause than the designers can design them according to the icon theme. You only have to tell us the icon name. But first step would be to remove the right margin.
Comment 17 andreas_k 2020-06-13 21:09:05 UTC
Created attachment 161967 [details]
Screenshot from macOS + additional tuning

Compare with attachment 161959 [details]:

Additinal fine tuning:

1. horizontal line on top of headers was removed.

2. expand formular Bar button has size of scrollbar width but is there center align.

3. split window "line" button has height of headers and is easier to grap.

4. 2. and 3. symbols come from the icon theme

5. Name box is align with Font Name (when toolbars are fixed)

6. space between function name and function wizzard is not that big as in the other screenshot.
Comment 18 Thorsten Wagner 2020-06-13 21:50:18 UTC
(In reply to andreas_k from comment #17)
> 2. expand formular Bar button has size of scrollbar width but is there
> center align.

Exactly this was the first approach back in 2016 (see screenshots in tdf#127066). Placing arrow above scrollbar was dropped because there are very thin scollbars especially on GTK. That is the cause for the right margin too. Margin causes arrow clearly associated with inputline.

Design used for Excel is only possible with scrollbars wide enough: Default KDE5 design is appropriate, macOS design is still appropriate, Windows design is appropriate, but many GTK themes are not appropriate.
Comment 19 Mike Kaganski 2020-06-14 03:13:37 UTC
*** Bug 133057 has been marked as a duplicate of this bug. ***
Comment 20 andreas_k 2020-06-14 07:07:54 UTC
Created attachment 161973 [details]
Extended input line

at least when the input line is extended it look strange with the two scrallbars. I don't have an good idea for the Collapse formular Bar button. You already wrote that it's not possible to draw this collapse button inside the Input line field. At least the right margin could be removed so it look align and the space between the scrallbars is not so big. 

If someone has a better idea, ...
Comment 21 Heiko Tietze 2020-06-14 10:01:42 UTC
(In reply to Thorsten Wagner from comment #10..13)
> Screenshot from <>

top/bottom space LGTM; left margin inconsistent with other toolbars (except Notebookbar). Thanks for taking care.
Comment 22 Thorsten Wagner 2020-06-14 19:23:59 UTC
Added a current screenshot from macOS 2:

(1) Indent of position combobox aligned with style combobox

(2) Replaced space between position combobox with separator again (like in Excel), because separator causes a further indent to get next icon aligned with size combobox form formatting toolbar; second separator remains deleted

Will look at the right side now, not sure to find a better solution as is, because right margin seems to be caused by toolbar implementation
Comment 23 Thorsten Wagner 2020-06-14 19:24:30 UTC
Created attachment 161995 [details]
Screenshot from macOS 2
Comment 24 andreas_k 2020-06-14 19:55:08 UTC
(In reply to Thorsten Wagner from comment #23)
> Created attachment 161995 [details]
> Screenshot from macOS 2

great
Comment 25 Thorsten Wagner 2020-06-14 22:08:49 UTC
Committed an updated patchset to gerrit:

https://gerrit.libreoffice.org/c/core/+/96263

Added screenshots from Linux/Qt and Linux/GTK as well.

Right margin is caused by toolbar implementation. It is as wide as left margin. Changing this will cause poor modifications to VCL. So for the time beeing I suggest to review patch now.
Comment 26 Thorsten Wagner 2020-06-14 22:12:29 UTC
Created attachment 162000 [details]
Screenshot from Linux with QT 3
Comment 27 Thorsten Wagner 2020-06-14 22:12:54 UTC
Created attachment 162001 [details]
Screenshot from Linux with GTK 2
Comment 28 Thorsten Wagner 2020-06-15 23:21:09 UTC
Gerrit failed due to a reason not related to patch. Change has been abandoned and committed again do Gerrit, verified +1 now:

https://gerrit.libreoffice.org/c/core/+/96403
Comment 29 Commit Notification 2020-06-17 10:58:29 UTC
Thorsten Wagner committed a patch related to this issue.
It has been pushed to "master":

https://git.libreoffice.org/core/commit/f24e64e8b55b695565109a6742598bcc90e4d9d0

tdf#133692: Spacing within Calc formulabar reworked

It will be available in 7.1.0.

The patch should be included in the daily builds available at
https://dev-builds.libreoffice.org/daily/ in the next 24-48 hours. More
information about daily builds can be found at:
https://wiki.documentfoundation.org/Testing_Daily_Builds

Affected users are encouraged to test the fix and report feedback.
Comment 30 Commit Notification 2020-06-17 12:39:27 UTC
Thorsten Wagner committed a patch related to this issue.
It has been pushed to "libreoffice-7-0":

https://git.libreoffice.org/core/commit/4366fdf8cb7b18bfc8f4665aa09f35e20467d3a5

tdf#133692: Spacing within Calc formulabar reworked

It will be available in 7.0.0.1.

The patch should be included in the daily builds available at
https://dev-builds.libreoffice.org/daily/ in the next 24-48 hours. More
information about daily builds can be found at:
https://wiki.documentfoundation.org/Testing_Daily_Builds

Affected users are encouraged to test the fix and report feedback.
Comment 31 Adolfo Jayme 2020-06-17 12:39:58 UTC
Great job, Thorsten!
Comment 32 andreas_k 2020-06-18 08:34:36 UTC
Created attachment 162140 [details]
Screenshot from windows after the patch

thanks a lot Thorston is there any change to remove the top horizontal line of the headers bar? Like shown in attachment 161967 [details].

the expand formular bar can it be themable, so can it use an icon from the icon theme?
Comment 33 Thorsten Wagner 2020-06-19 15:07:16 UTC
Andreas, I will take a look a the line. As I am very busy right now, it will take some time ...

The expand icon is still an image icon with a symbol assigned to it currently. Using an image from an icon set is possible easily.