Bug 7960 - Client installer should follow new visual profile
Summary: Client installer should follow new visual profile
Status: CLOSED FIXED
Alias: None
Product: ThinLinc
Classification: Unclassified
Component: Client platforms (show other bugs)
Version: trunk
Hardware: PC Unknown
: P2 Normal
Target Milestone: 4.15.0
Assignee: Samuel Mannehed
URL:
Keywords: relnotes, tobfa_tester
Depends on:
Blocks: 7903
  Show dependency treegraph
 
Reported: 2022-07-04 12:58 CEST by William Sjöblom
Modified: 2022-10-12 11:22 CEST (History)
2 users (show)

See Also:
Acceptance Criteria:
- The windows installers* should follow our new visual profile - The windows installer GUI layouts should look good with all our supplied translations * Client installer/uninstaller and client customizer installer/uninstaller


Attachments
Screenshot showing gray corners on buttons in windows installer (25.89 KB, image/png)
2022-08-16 13:46 CEST, Samuel Mannehed
Details

Description William Sjöblom cendio 2022-07-04 12:58:29 CEST
We have a new visual profile that should be followed in the ThinLinc Client installer.
Comment 1 William Sjöblom cendio 2022-07-08 10:58:07 CEST
Note that the client installer seemingly works perfectly fine under Wine on Fedora 35.
Comment 21 William Sjöblom cendio 2022-07-15 12:25:19 CEST
Currently, the installers have gotten new Welcome and Finish pages,
along with a changed top banner.

Divider on all pages
════════════════════

  We currently have a blue divider at the bottom of the Welcome and
  Finish pages. Ideally, we'd also like this divider on the rest of the
  pages. Our current idea is to do things in the same way as tlclient
  for these pages, i.e. moving the divider up to below the ThinLinc logo
  and making it 5px thick (instead of 10px) for these pages.

  I've had a quick look at this and from what I can tell things are not
  as straightforward as for the Welcome and Finish pages. Attempting to
  add the blue divider for the remaining pages in the same way as in the
  Welcome/Finish page results in a segfault in nsDialogs. My suspicion
  is that this is due to these pages not being built with nsDialogs. So
  we'll likely need to take a lower-level approach to add the divider
  to these pages.


Misc notes
══════════

  The installers work reasonably well in Wine. However, there is a
  bunch of minor graphical differences between Wine and an actual
  Windows machine, so testing with Wine does not replace final testing
  on an actual Windows machine.
> ┌────
> │ $ sudo dnf install -y wine
> │ $ wine ./client-bundle/client-windows/tl-4.14.0post-client-windows.exe
> │ $ wine ~/.wine/drive_c/Program\ Files/ThinLinc\ Client/uninstall.exe
> └────

  Since the client customizer builds an NSIS client installer, it is
  important to check that the client customizer works as intended after
  changes to the client installer.

  NSIS does not have automatic sizing of UI components. So make sure
  that the installers look good under all translation languages.
Comment 29 Samuel Mannehed cendio 2022-08-09 13:29:14 CEST
I consider this done now. I made a new header image that includes a 5px high divider, similar to the one in the ThinLinc client. I also made the background white for the rest of the installer pages to fit better with the new welcome and finish pages.

I have verified that my changes work on wine, Windows 10 and Windows 11. On Windows 11 I have tested:

 ✓ English, Swedish, French and Spanish languages
   ✓ Installer
   ✓ Uninstaller
   ✓ Customizer
     ✓ Setup generated by customizer

On Windows 10 I have tested:

 ✓ English installer

Using wine from my Fedora 36 workstation, I have tested:

 ✓ English, Dutch, French, German, Italian, PortugeuseBr, Spanish and Swedish
   ✓ Installer
   ✓ Uninstaller

The new images look sharp, and all translations seem to fit.
Comment 30 Samuel Mannehed cendio 2022-08-16 13:46:18 CEST
Created attachment 1052 [details]
Screenshot showing gray corners on buttons in windows installer

All buttons have rounded corners on Windows 11, the old gray background can be seen in the corners here.

The buttons are perfectly rectangular on Windows 10. This means things look fine on Windows 10.
Comment 31 Samuel Mannehed cendio 2022-08-16 16:43:27 CEST
The divider on the start and finish pages look quite different compared to the thinner divider in the header. I will fix this by picking a smaller scale and a different part of the pattern for the start and finish divider.
Comment 32 Tobias cendio 2022-08-17 11:14:59 CEST
General
============================================
Using dev build #2670 on Windows 11 the following wizards have been tested,

- client installer
- client uninstaller
- customizer installer
- customizer uninstaller
- customized client installer
- customized client uninstaller

with languages

- English
- Swedish
- Spanish
- Portuguese
- German
- Dutch
- Italian
- French

The same wizards were tested on Windows 10 with languages

- English
- Swedish
- Portuguese
- Italian

Features of the new visual profile is properly in place, and the GUI looks good
for the majority of localizations. There are some spatial issues, in particular
with Italian and Portuguese, reported in bug 7979.

Acceptance criteria
============================================

[✓] The windows installers should follow our new visual profile

[ ] The windows installer GUI layouts should look good with all our supplied
    translations

Conclusion
============================================
Considering acceptance criteria #2, perhaps a few minor tweaks to the allowed
text spaces mentioned in bug 7979, or slightly reducing the strings themselves,
would render this bug solved.
Comment 35 Samuel Mannehed cendio 2022-08-17 14:16:34 CEST
(In reply to Samuel Mannehed from comment #30)
> Created attachment 1052 [details]
> Screenshot showing gray corners on buttons in windows installer
> 
> All buttons have rounded corners on Windows 11, the old gray background can
> be seen in the corners here.
> 
> The buttons are perfectly rectangular on Windows 10. This means things look
> fine on Windows 10.

This was fixed in r38737
Comment 37 Samuel Mannehed cendio 2022-08-17 14:31:37 CEST
(In reply to Samuel Mannehed from comment #31)
> The divider on the start and finish pages look quite different compared to
> the thinner divider in the header. I will fix this by picking a smaller
> scale and a different part of the pattern for the start and finish divider.

Fixed in r38738
Comment 40 Samuel Mannehed cendio 2022-08-18 08:41:25 CEST
The header subtitle and header title are now vertically aligned as well. I will not change the layout to make space for lengthy translations here. This has been a problem before and will be handled under bug 7979.

We can consider this resolved once again.
Comment 43 Samuel Mannehed cendio 2022-08-18 12:01:13 CEST
The bottom part around the buttons on the welcome page is now also white, like the rest of the installer.
Comment 44 Tobias cendio 2022-08-18 16:32:26 CEST
As mentioned in comment 42, the color change to the bottom part apparently bleeds into the content area above, causing visible white/grey contrasts.
Comment 46 Samuel Mannehed cendio 2022-08-18 17:21:40 CEST
(In reply to Tobias from comment #44)
> As mentioned in comment 42, the color change to the bottom part apparently
> bleeds into the content area above, causing visible white/grey contrasts.

Fixed in r38744
Comment 47 Tobias cendio 2022-08-19 10:48:55 CEST
General
============================================
Tested bug using server build #2771 on RHEL8 and client build #2678 on Windows 10 and 11, with languages English, Swedish, Italian, and Portuguese.

The coloring problems mentioned in comment 44 have been resolved. Moreover, while the minor language spatial issues mentioned in comment 32 persists, they are handled separately in another bug.

Acceptance criteria
============================================
[✓] The windows installers should follow our new visual profile

[✓] The windows installer GUI layouts should look good with all our supplied translations

Conclusion
============================================
This bug is now considered ready to be closed.
Comment 49 Tobias cendio 2022-08-19 11:18:20 CEST
Quick testing of the change introduced in comment 48 -- using same server/client setup as in comment 47 -- reveals retained proper coloring of the entry and finish page.

Note You need to log in before you can comment on or make changes to this bug.