[untested] Add monochrome menubar icon for mac

[felixbuenemann]

This should align the icon with Apple design guidelines and work with both dark and light menu bars.

It contains a 2 Bit version of the icon in 44x44 px (Retina) created from the SVG version of the logo and sets this as a mask image, which requires at least QT 5.6.

If this works as intended it should negate the icon for dark mode menu bars.

Fixes #1240

[felixbuenemann]

I haven't been able to test this due to lack of build instructions for macOS in the README.

It tries to find libsystemd and libappamor, so I must be missing something.

[codecov]

Codecov Report

Merging #1464 into master will increase coverage by 0.28%.
The diff coverage is n/a.

@@            Coverage Diff             @@
##           master    #1464      +/-   ##
==========================================
+ Coverage   73.29%   73.58%   +0.28%     
==========================================
  Files         209      210       +1     
  Lines        7572     7616      +44     
==========================================
+ Hits         5550     5604      +54     
+ Misses       2022     2012      -10     

Impacted Files	Coverage Δ
include/multipass/utils.h	61.53% <0.00%> (ø)
src/sshfs_mount/sshfs_mount.cpp	100.00% <0.00%> (ø)
src/daemon/custom_image_host.cpp	95.06% <0.00%> (ø)
src/platform/backends/shared/linux/backend_utils.h	0.00% <0.00%> (ø)
src/sshfs_mount/sftp_server.cpp	88.17% <0.00%> (+0.02%)	⬆️
src/daemon/daemon.cpp	31.56% <0.00%> (+0.29%)	⬆️
src/utils/utils.cpp	88.42% <0.00%> (+2.00%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update e4cab2e...d071bff. Read the comment docs.

[Saviq]

Cool, thanks @felixbuenemann!

Only yesterday I filed canonical-web-and-design/multipass-design#47, this may make this quite a bit easier :)

bors try

[bors]

try

Build failed

• continuous-integration/travis-ci/push

[felixbuenemann]

Please do not merge yet, I found a simple way to test the icon using PySide:

from PySide2 import QtCore, QtWidgets, QtGui

app = QtWidgets.QApplication(["tray_icon_test"])
app.setAttribute(QtCore.Qt.AA_UseHighDpiPixmaps)
app.setQuitOnLastWindowClosed(False)

icon = QtGui.QIcon("src/client/gui/resources/images/multipass-menubar-icon-mac.png")
icon.setIsMask(True)
tray_icon = QtWidgets.QSystemTrayIcon(icon)

tray_icon.show()

app.exec_()

It works fine and looks good on a retina display, but on non-retina the lines of the "M" become to thin, so I'll need to tweak the icon a bit to make them wider.

[felixbuenemann]

Btw. it looks like the multipass-icon.png is overcropped by a pixel or two at the top and left, so it isn't completely circular. I can try to fix that while I'm at it.

[felixbuenemann]

I've increased the size of the mac menubar icon by about 2px which improves legibility on non-retina displays. I didn't touch the width of the strokes, since it looks OK now.

I fixed the cropped edges on the color multipass-icon.png in another commit, see the rich diff of commit 644f9e1 to see the difference.

[Saviq]

Thanks Felix!

bors try

[bors]

try

Build failed

• continuous-integration/travis-ci/push

[Saviq]

bors try

[bors]

try

Build succeeded

• continuous-integration/travis-ci/push

[Saviq]

Hi @felixbuenemann, I tested the result and it's definitely looking better (see https://github.com/canonical-web-and-design/multipass-design/issues/47#issuecomment-609630437), but there's some love that the icon could receive, especially in low-DPI dark mode.

I'll keep this PR around for now and see if our design team can come up with something :)

[felixbuenemann]

@Saviq The multipass-design repo is private, so I can't see it.

It should pe possible to increase the stroke of the lines of the M to increase legibility, but since I worked off-of the data/multipass.gui.svg where the dots and the lines are already one shape, I couldn't figure out a good way to do it consistently.

It might be easy for someone who works with Illustrator on a daily basis, but I'm primarily a programmer with some design knowledge.

[felixbuenemann]

Some hints on the workflow might be helpful for your designers:

I first made the icon black and used the "M" shape as a cutout, so that the background was translucent. Then I changed the artboard origin to 0,0 and tweaked the arboard size to a multiple of 2 and until there was no cut-off at the edges when doing a "Save For Web (legacy)" to an 88x88 Px PNG.

The multiple of two on the artboard is important, or the logo will never be perfectly centered.

I opened the resulting 32-Bit PNG in Photoshop, converted it to Grayscale mode and saved it to a new file (using Save As, not Web export), which results in a 2-Bit PNG with alpha channel.

As a last step I used pngcrush with the -rem allb -noreduce -blacken -brute to optimize the file size and get rid of unneeded metadata. A similar result could be achieved with optipng -o7 -zm1-9 -nx -strip all, but make sure to disable all reductions, or the resulting file will be converted to 8-Bit indexed with alpha channel, making it RGBA instead of grayscale.

[envygeeks]

Is there anything I can do to help push this along? I'm happy to jump into Illustrator or Sketch and fix whatever needs fixing if it pushes it closer to release since the icon really causes my eye to twitch.

[willshen]

anything that I can do to help here? Would love to see this through!

[townsend2010]

Hey all,

We are in the process of getting some monochrome Multipass assets from our Design team. Unfortunately, I don't have an ETA on when we will get them.

[willshen]

Thanks for the update @townsend2010 - will love to see this long running PR finally merged!

[townsend2010]

@willshen,

Yes, me too 😉

[andrei-toterman]

This was resolved in #3282 as part of moving to the new Flutter GUI.