-
Notifications
You must be signed in to change notification settings - Fork 2.9k
Fix #18014: Cloud score missing label in open recent menu #21802
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
base: master
Are you sure you want to change the base?
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
For testing purposes, can you add the icon to both the isCloud
and else
cases, but do so as follows:
- Cloud:
☁️ \u2601\uFE0F
(emoji version) - Not cloud:
☁︎ \u2601\uFE0E
(text version)
This makes use of \uFE0E
(text selector) and \uFE0F
(emoji selector), which determine how the preceding character is interpreted.
Adding both selectors ensures we get to see both symbols, so we can pick the one that looks best (or neither). Thanks!
@shoogle Hi Peter, updated the PR with the requested changes |
@nasehim7, thanks! I'm not seeing any difference on Windows, but that could just mean that the menu font doesn't have a glyph for the emoji so it falls back to using the text character glyph instead. It would be interesting to see what these look like on other platforms. |
Ok, thanks! The emoji on macOS looks much better, which good because we can't control the fonts in the macOS menus. On Windows, the cloud looks rubbish, but we control the fonts in the menus on Windows, so we could use a different font for the icon, or modify the current font to include the emoji glyph. |
Could you take a screenshot of the menus in macOS Light Theme? |
On non-Mac, why not just using the icon from the icon font, by setting the |
@cbjeukendrup, good point! Can someone with macOS take a screenshot of the emoji when the menu text is dark, like in this one. You might need to put MuseScore in its dark theme or change your desktop background in order to change the menu text colour. |
@cbjeukendrup What you suggested would loosely boil down to something like this: if (isCloud) {
#if defined(Q_OS_WIN) || defined(Q_OS_LINUX)
action.iconCode = IconCode::Code::CLOUD;
#elif defined(Q_OS_MAC)
action.title = TranslatableString::untranslatable("\u2601\uFE0F " + file.displayName(/*includingExtension*/ true));
#endif
} is it? |
@nasehim7 it's the right approach but no need to detect Windows and Linux explicitly. You can do
Adobe was able to make the nicely shaped cloud black when the text is black, so it looks like we still haven't found the right approach yet for macOS. Please add all of these characters with the current code layout so we can see how these look in the macOS menu: ☁ Also add the line if (isCloud) {
action.iconCode = IconCode::Code::CLOUD;
action.title = TranslatableString::untranslatable("\u2601\uFE0F\u1F327\uFE0F\u26C5\uFE0F\u26C8\uFE0F\u1F329\uFE0F " + file.displayName(/*includingExtension*/ true));
} else {
action.title = TranslatableString::untranslatable("\u2601\uFE0E\u1F327\uFE0E\u26C5\uFE0E\u26C8\uFE0E\u1F329\uFE0E " + file.displayName(/*includingExtension*/ true));
} |
@shoogle Yes that makes sense. I updated the code and checked the output, 2nd and 5th text versions are not getting rendered properly. Here is the screenshot: P.S.: while we are finalising for MacOS, I added completed code for other platforms so that they can be tested as well. |
613500e
to
5344f31
Compare
Adobe probably doesn't use a text character, but uses the proper macOS APIs to add an icon to a menu item. Either they use these APIs directly, or they use them via whatever UI framework they use. It seems we could also achieve that using the What may or may not make the challenge bigger is that on macOS we would only want cloud icons for the 'open recent' list, and not all action icons that can be seen in the menus on Windows and Linux. |
It sounds like we just need an SVG version of the cloud icon, or has someone requested that we show other icons too? If they have, there are tools that can convert fonts to SVG (and then to PNG if necessary), but we should probably verify the method works with the cloud SVG first before we go about converting an entire font. |
For now, it has indeed only been requested for the cloud icons. But having exceptions does not necessarily make things easier. Anyway, afaics, the most straightforward solution would be to add yet another field to |
Incase you didn't see i commented about Adobe using the same icon on Windows version. |
@jessjwilliamson On Windows we would indeed use the same icon but there it can be done trivially via the icons font, because there we have our custom menu bar. |
That's not a problem, I'll get a SVG done soon :) |
I thought i had to design one but there's a perfect one in our font. Just made it an SVG. |
@cbjeukendrup Here I am summarising the potential approach that can be taken to fix this:
if (isCloud) {
#ifdef Q_OS_MAC
item->setNativeMenuBarIconPath("qrc:/qml/resources/cloud_icon.svg");
#else
action.iconCode = IconCode::Code::CLOUD;
#endif
} the let me know if I missed on something crucial |
Sounds good! A few more thoughts:
|
share/icons/CMakeLists.txt
Outdated
@@ -25,6 +25,7 @@ if (OS_IS_MAC) | |||
|
|||
install(FILES MsczIcon/MS4_MsczIcon.icns RENAME MsczIcon.icns DESTINATION ${Mscore_SHARE_NAME}${Mscore_INSTALL_NAME}) | |||
install(FILES MscxIcon/MS4_MscxIcon.icns RENAME MscxIcon.icns DESTINATION ${Mscore_SHARE_NAME}${Mscore_INSTALL_NAME}) | |||
install(FILES cloud_icon.svg DESTINATION ${Mscore_SHARE_NAME}${Mscore_INSTALL_NAME}) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You should move these install
commands out of the platform if
statements and only write it once since it's the same on all platforms.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
yeah makes sense. Updated the PR.
@nasehim7 please rebase |
@@ -74,6 +74,8 @@ class MenuItem : public QObject, public async::Asyncable | |||
|
|||
Q_PROPERTY(QList<MenuItem*> subitems READ subitems NOTIFY subitemsChanged) | |||
|
|||
Q_PROPERTY(QString nativeMenuBarIconPath READ nativeMenuBarIconPath NOTIFY actionChanged) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks like you're not using nativeMenuBarIconPath
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It seems the changes to PlatformMenuBar.qml
got lost
share/icons/cloud_icon.png
Outdated
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Before this gets merged, I think either the PNG or the SVG should be removed, depending on what works (where SVG has preference, if both work).
@@ -149,6 +154,8 @@ public slots: | |||
QList<MenuItem*> m_subitems; | |||
|
|||
ui::UiAction m_action; | |||
|
|||
QString m_nativeMenuBarIconPath = ""; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
QString m_nativeMenuBarIconPath = ""; | |
QString m_nativeMenuBarIconPath; |
(""
is not the same as QString()
; the latter is more efficient.)
src/appshell/appshell.qrc
Outdated
@@ -112,5 +112,6 @@ | |||
<file>qml/Preferences/internal/MixerSection.qml</file> | |||
<file>qml/DevTools/Extensions/ExtensionsListView.qml</file> | |||
<file>qml/platform/PlatformMenuBar.qml</file> | |||
<file>resources/cloud_icon.svg</file> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Here is also still some redundancy that should be resolved; either this one should be used or the "installed" one
@@ -74,6 +74,8 @@ class MenuItem : public QObject, public async::Asyncable | |||
|
|||
Q_PROPERTY(QList<MenuItem*> subitems READ subitems NOTIFY subitemsChanged) | |||
|
|||
Q_PROPERTY(QString nativeMenuBarIconPath READ nativeMenuBarIconPath NOTIFY actionChanged) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It seems the changes to PlatformMenuBar.qml
got lost
@cbjeukendrup @Eism I tried to check it with both the svg and png and it didn't work on the Mac. I think this PR was still open due to that. I will check/test it again today and get back with the results and suggested changes. |
d455498
to
fe15ee3
Compare
Restored |
That's a good idea, but before you do that, try displaying the app icon in the menu. The app icon is already ICNS. |
We can try, but I doubt that ICNS will make any difference. It will namely go through QIcon anyway, and I don't know if that even supports ICNS. Another approach could be to create a minimal test app that creates a MenuBar in the more usual way, namely just writing the menus out like this: https://doc.qt.io/qt-6/qml-qt-labs-platform-menubar.html#details If that works, then we are somehow doing something wrong in the way we create our menus; if it doesn't work, then the problem is in QML. That way, we'll at least get an idea of where the problem lies. Qt Creator has some templates to set up a simple QML app with a few clicks, so fortunately that's not a huge amount of work. |
Icon Testing Summary: Tested AppIcon.icns in the main app: No success. Created Simple QML Test App: View here Observation: In the PR, I realised I haven't used file:/// prefix while setting nativeMenuBarIconPath, which is necessary. However, fixing it did not resolve the issue in the main app. This brings me to the conclusion that the menu creation piece might need a change, still on it |
I did get it to work with QRC in this small example project: So it seems not generally allergic to QRC, but we are doing something wrong. |
For tonight, my conclusion is that icons don't work when the MenuItem is created using a Component. ApplicationWindow {
visible: true
width: 640
height: 480
title: "QML MenuBar Example"
MenuBar {
Menu {
title: "File"
MenuItem {
text: "Open"
icon.source: "qrc:/icons/cloud_icon.svg"
icon.mask: true
}
MenuItem { text: "Close" }
id: fileMenu
}
Menu {
title: "Edit"
MenuItem { text: "Undo" }
MenuItem { text: "Redo" }
}
}
Component.onCompleted: {
let menuItem = menuItemComponent.createObject(fileMenu)
fileMenu.insertItem(1, menuItem)
}
Button {
icon.source: "qrc:/icons/cloud_icon.svg"
}
Component {
id: menuItemComponent
MenuItem {
text: "New"
icon.source: "qrc:/icons/cloud_icon.svg"
icon.mask: true
}
}
} the "Open" item does have an icon, and the "New" item doesn't. |
Yes the example works perfectly. Strangely, I am curious on why the qrc wasn't working in my case but yeah for now, let me update the menu item construction in the main qml and check |
Hi @shoogle @cbjeukendrup, I was tied up with college work recently and couldn't look into this until today. Upon revisiting and testing the code, I noticed a behaviour: the icon loads some time after the application is run, which suggests that the current menu item creation is still functional. For reference, I am attaching two screen recordings. First Second I found about the asynchronous nature of how image loading works as given here. I couldn't find something specific to Icons. However, in the documentation it says, by default elements loaded remotely are async in nature and for the local file, we have to especially make them async and we haven't done that. P.S. I tried with both svg and png, it works. In the video, it is svg version. |
That's a surprising discovery. That documentation mentioning the asynchronous image loading seems to apply to the The thing to find out now is: is there really something asynchronous going on, or is there some trigger that causes the icon to appear at some point? And can we artificially create that trigger directly when creating the menu so that the icon is always there when it should be? Perhaps the only way to find out is by debugging Qt itself, but I don't really know how to do that. I'm not really sure how to move forward with this issue. @shoogle what do you think? |
Perhaps the trigger is when a cloud score changes position in the Open Recent list? For example:
I haven't tried it myself, but this is consistent with what we see in @nasehim7's screen recordings. Perhaps artificially shuffling the 1st item to the end of the menu and back again would be enough to trigger the cloud icon for all menu items that need it. I don't think we can merge this with it only half working on macOS. That's probably worse than it not working at all, so either we fix it properly on macOS, or we abandon macOS and just implement the icon on Windows and Linux. It occurred to me that we could also hide the file extension for cloud scores, so there would still be a way to tell if it's a cloud score even if the icon doesn't appear. |
@shoogle Indeed, I tested for few scenarios and could see that the icon visibility is linked with position change of the cloud score. If I keep the recent score as the cloud one, close the application and run it again. Until the position of the score is not changed, the icon is not visible. Till the time I am looking at the shuffling option, the second option you suggested should be straight forward to implement by just sending |
@nasehim7, let's keep this PR for macOS. Feel free to try the shuffling option. You could also try deleting the menu and recreating it only once all the items inside it have been initialised. You could create a new PR with the changes for other platforms, including hiding the file extension for cloud scores. |
Shuffling won't work if there's only one item in the menu, so a better solution is deleting the menu and recreating it like I mentioned above, or adding a dummy item to the beginning of the menu and then removing that item. |
@nasehim7 Could you please remind me, did you indeed create a new PR with only the non-macOS-specific changes from this PR? (i.e. basically only the |
@cbjeukendrup No I haven't yet. I will do it this week and update here |
Resolves: #18014