Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[untested] Add monochrome menubar icon for mac #1464

Conversation

felixbuenemann
Copy link

@felixbuenemann felixbuenemann commented Apr 3, 2020

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
Copy link
Author

felixbuenemann commented Apr 3, 2020

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
Copy link

codecov bot commented Apr 3, 2020

Codecov Report

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

Impacted file tree graph

@@            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
Copy link
Collaborator

Saviq commented Apr 3, 2020

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 bot added a commit that referenced this pull request Apr 3, 2020
@bors
Copy link
Contributor

bors bot commented Apr 3, 2020

try

Build failed

src/client/gui/gui_cmd.cpp Outdated Show resolved Hide resolved
@felixbuenemann
Copy link
Author

felixbuenemann commented Apr 4, 2020

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
Copy link
Author

felixbuenemann commented Apr 4, 2020

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.

This should align the icon with Apple design guidelines and work with
both dark and light menu bars.
@felixbuenemann
Copy link
Author

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
Copy link
Collaborator

Saviq commented Apr 4, 2020

Thanks Felix!

bors try

bors bot added a commit that referenced this pull request Apr 4, 2020
@bors
Copy link
Contributor

bors bot commented Apr 4, 2020

try

Build failed

@Saviq
Copy link
Collaborator

Saviq commented Apr 4, 2020

bors try

bors bot added a commit that referenced this pull request Apr 4, 2020
@bors
Copy link
Contributor

bors bot commented Apr 4, 2020

try

Build succeeded

@Saviq
Copy link
Collaborator

Saviq commented Apr 6, 2020

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
Copy link
Author

@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
Copy link
Author

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
Copy link

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.

Base automatically changed from master to main March 3, 2021 13:41
@willshen
Copy link

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

@townsend2010
Copy link
Contributor

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
Copy link

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

@townsend2010
Copy link
Contributor

@willshen,

Yes, me too 😉

@Saviq Saviq removed their request for review December 14, 2022 08:54
@andrei-toterman
Copy link
Contributor

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Change icon colour to white
6 participants