From a9968acd6d424723afca3b05c64560a18f785a97 Mon Sep 17 00:00:00 2001 From: Konstantinos Karmas Date: Mon, 20 Sep 2021 16:42:22 +0200 Subject: [PATCH 1/6] Fix misalignment of images if the displayName spans to next line When the displayname of the app is long and it spans to the next line, it was pushing the icon up in the column, making it seem like it is misaligned. This is now fixed and the icons should be aligned regardless if the display name has one or two lines. CURA-8421 --- resources/qml/ApplicationSwitcher/ApplicationButton.qml | 4 ++-- resources/qml/ApplicationSwitcher/ApplicationSwitcher.qml | 2 +- .../themes/cura-light/icons/default/ApplicationSwitcher.svg | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/resources/qml/ApplicationSwitcher/ApplicationButton.qml b/resources/qml/ApplicationSwitcher/ApplicationButton.qml index bec806eb1c..d1d94eb4a2 100644 --- a/resources/qml/ApplicationSwitcher/ApplicationButton.qml +++ b/resources/qml/ApplicationSwitcher/ApplicationButton.qml @@ -36,7 +36,6 @@ Button { id: applicationButtonContent anchors.centerIn: parent - spacing: UM.Theme.getSize("default_margin").width UM.RecolorImage { @@ -91,8 +90,9 @@ Button anchors.horizontalCenter: parent.horizontalCenter width: base.width - UM.Theme.getSize("default_margin").width + height: base.height - applicationIcon.height - 2 * UM.Theme.getSize("default_margin").width // Account for the top and bottom margins horizontalAlignment: Text.AlignHCenter - maximumLineCount: 2 + verticalAlignment: Text.AlignVCenter wrapMode: Text.Wrap elide: Text.ElideRight } diff --git a/resources/qml/ApplicationSwitcher/ApplicationSwitcher.qml b/resources/qml/ApplicationSwitcher/ApplicationSwitcher.qml index ea2588cc36..8d4d7306f9 100644 --- a/resources/qml/ApplicationSwitcher/ApplicationSwitcher.qml +++ b/resources/qml/ApplicationSwitcher/ApplicationSwitcher.qml @@ -26,7 +26,7 @@ Item background: UM.RecolorImage { - width: UM.Theme.getSize("small_button_icon").width + width: parent.width height: width anchors.verticalCenter: appSwitcherButton.verticalCenter anchors.horizontalCenter: appSwitcherButton.horizontalCenter diff --git a/resources/themes/cura-light/icons/default/ApplicationSwitcher.svg b/resources/themes/cura-light/icons/default/ApplicationSwitcher.svg index 966b80d64e..207171b8f7 100644 --- a/resources/themes/cura-light/icons/default/ApplicationSwitcher.svg +++ b/resources/themes/cura-light/icons/default/ApplicationSwitcher.svg @@ -1,3 +1,3 @@ - - + + From d844c5f70a9981585a25a44f9bb6f42a699c9054 Mon Sep 17 00:00:00 2001 From: Konstantinos Karmas Date: Mon, 20 Sep 2021 16:57:16 +0200 Subject: [PATCH 2/6] Fix alignment of the ApplicationSwitcher button The sign in button has a different size when you are logged in, where the account avatar was being drawn in the middle of the Sign In button. This was causing a weird alignment of the ApplicationSwitcher next to it, as it was adding an extra margin. This is now fixed by making sure that the width of the button that has to do with account adjusts according to whether you are logged in or not. This makes the ApplicationSwitcher icon move when you log in but looks more natural relatively to the account button. CURA-8421 --- resources/qml/Account/AccountWidget.qml | 8 ++++---- resources/qml/MainWindow/MainWindowHeader.qml | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/resources/qml/Account/AccountWidget.qml b/resources/qml/Account/AccountWidget.qml index ef1622daee..6433822497 100644 --- a/resources/qml/Account/AccountWidget.qml +++ b/resources/qml/Account/AccountWidget.qml @@ -12,8 +12,8 @@ Item property var profile: Cura.API.account.userProfile property var loggedIn: Cura.API.account.isLoggedIn - height: signInButton.height > accountWidget.height ? signInButton.height : accountWidget.height - width: signInButton.width > accountWidget.width ? signInButton.width : accountWidget.width + height: signInButton.visible ? signInButton.height : accountWidget.height + width: signInButton.visible ? signInButton.width : accountWidget.width Button { @@ -54,7 +54,7 @@ Item id: accountWidget anchors.verticalCenter: parent.verticalCenter - anchors.horizontalCenter: signInButton.horizontalCenter +// anchors.horizontalCenter: signInButton.horizontalCenter implicitHeight: Math.round(0.5 * UM.Theme.getSize("main_window_header").height) implicitWidth: Math.round(0.5 * UM.Theme.getSize("main_window_header").height) @@ -142,7 +142,7 @@ Item borderColor: UM.Theme.getColor("lining") borderWidth: UM.Theme.getSize("default_lining").width - target: Qt.point(width - (signInButton.width / 2), -10) + target: Qt.point(width - ((signInButton.visible ? signInButton.width : accountWidget.width) / 2), -10) arrowSize: UM.Theme.getSize("default_arrow").width } diff --git a/resources/qml/MainWindow/MainWindowHeader.qml b/resources/qml/MainWindow/MainWindowHeader.qml index 3e3e5da467..3302c916bb 100644 --- a/resources/qml/MainWindow/MainWindowHeader.qml +++ b/resources/qml/MainWindow/MainWindowHeader.qml @@ -146,7 +146,7 @@ Item { verticalCenter: parent.verticalCenter right: accountWidget.left -// rightMargin: UM.Theme.getSize("default_margin").width + rightMargin: UM.Theme.getSize("default_margin").width } } From fea8ecd55f7acc72d8eb35037c16aec8b227e22c Mon Sep 17 00:00:00 2001 From: Konstantinos Karmas Date: Mon, 20 Sep 2021 17:19:37 +0200 Subject: [PATCH 3/6] Rename the qml elements and the theme entries used in AppSwitcher To some more sensible names (hopefully). CURA-8421 --- .../ApplicationSwitcher/ApplicationButton.qml | 8 +++--- .../ApplicationSwitcher.qml | 28 +++++++++---------- resources/themes/cura-light/theme.json | 3 ++ 3 files changed, 20 insertions(+), 19 deletions(-) diff --git a/resources/qml/ApplicationSwitcher/ApplicationButton.qml b/resources/qml/ApplicationSwitcher/ApplicationButton.qml index d1d94eb4a2..c722b172af 100644 --- a/resources/qml/ApplicationSwitcher/ApplicationButton.qml +++ b/resources/qml/ApplicationSwitcher/ApplicationButton.qml @@ -42,7 +42,7 @@ Button id: applicationIcon anchors.horizontalCenter: parent.horizontalCenter - color: UM.Theme.getColor("monitor_icon_primary") + color: UM.Theme.getColor("icon") width: UM.Theme.getSize("application_switcher_icon").width height: width @@ -64,7 +64,7 @@ Button { id: externalLinkIndicatorBackground anchors.centerIn: parent - width: UM.Theme.getSize("small_button_icon").width + width: UM.Theme.getSize("icon_indicator_background").width height: width color: base.hovered ? UM.Theme.getColor("action_button_hovered") : UM.Theme.getColor("action_button") radius: 0.5 * width @@ -75,9 +75,9 @@ Button id: externalLinkIndicatorIcon anchors.centerIn: parent - width: UM.Theme.getSize("printer_status_icon").width + width: UM.Theme.getSize("icon_indicator").width height: width - color: UM.Theme.getColor("monitor_icon_primary") + color: UM.Theme.getColor("icon") source: UM.Theme.getIcon("LinkExternal") } } diff --git a/resources/qml/ApplicationSwitcher/ApplicationSwitcher.qml b/resources/qml/ApplicationSwitcher/ApplicationSwitcher.qml index 8d4d7306f9..c09c6e9547 100644 --- a/resources/qml/ApplicationSwitcher/ApplicationSwitcher.qml +++ b/resources/qml/ApplicationSwitcher/ApplicationSwitcher.qml @@ -11,13 +11,12 @@ import Cura 1.1 as Cura Item { id: applicationSwitcherWidget - width: appSwitcherButton.width + width: applicationSwitcherButton.width height: width - Button { - id: appSwitcherButton + id: applicationSwitcherButton anchors.verticalCenter: parent.verticalCenter anchors.horizontalCenter: parent.horizontalCenter @@ -28,8 +27,8 @@ Item { width: parent.width height: width - anchors.verticalCenter: appSwitcherButton.verticalCenter - anchors.horizontalCenter: appSwitcherButton.horizontalCenter + anchors.verticalCenter: applicationSwitcherButton.verticalCenter + anchors.horizontalCenter: applicationSwitcherButton.horizontalCenter color: UM.Theme.getColor("main_background") source: UM.Theme.getIcon("ApplicationSwitcher") @@ -37,18 +36,18 @@ Item onClicked: { - if (popup.opened) + if (applicationSwitcherPopup.opened) { - popup.close() + applicationSwitcherPopup.close() } else { - popup.open() + applicationSwitcherPopup.open() } } } Popup { - id: popup + id: applicationSwitcherPopup y: parent.height + UM.Theme.getSize("default_arrow").height x: parent.width - width @@ -63,7 +62,7 @@ Item contentItem: Item { - id: projectListContainer + id: applicationsContainer anchors.fill: parent anchors.margins: UM.Theme.getSize("wide_margin").width @@ -73,17 +72,16 @@ Item anchors.top: parent.top anchors.left: parent.left - width: gridLayout.width + width: ultimakerPlatformLinksGrid.width Grid { - id: gridLayout + id: ultimakerPlatformLinksGrid columns: 3 spacing: UM.Theme.getSize("default_margin").width + Repeater { - id:gridgenerate - model: [ { displayName: "Report issue1", thumbnail: UM.Theme.getIcon("Bug"), description: "This is the description1", link: "https://github.com/Ultimaker/Cura/issues/1" }, @@ -114,7 +112,7 @@ Item borderColor: UM.Theme.getColor("lining") borderWidth: UM.Theme.getSize("default_lining").width - target: Qt.point(width - (appSwitcherButton.width / 2), -10) + target: Qt.point(width - (applicationSwitcherButton.width / 2), -10) arrowSize: UM.Theme.getSize("default_arrow").width } diff --git a/resources/themes/cura-light/theme.json b/resources/themes/cura-light/theme.json index 568b2d261b..daa12b3390 100644 --- a/resources/themes/cura-light/theme.json +++ b/resources/themes/cura-light/theme.json @@ -574,6 +574,9 @@ "favorites_button": [2, 2], "favorites_button_icon": [1.2, 1.2], + "icon_indicator_background": [1.5, 1.5], + "icon_indicator": [1, 1], + "printer_status_icon": [1.0, 1.0], "printer_sync_icon": [1.2, 1.2], From 0d932991d45f2c9b691a21aa5cff7dde99f1b02c Mon Sep 17 00:00:00 2001 From: Konstantinos Karmas Date: Mon, 20 Sep 2021 17:24:06 +0200 Subject: [PATCH 4/6] Rename ApplicationSwitcher.svg to BlockGrid.svg Since it is the original filename in the design. CURA-8421 --- resources/qml/ApplicationSwitcher/ApplicationSwitcher.qml | 2 +- .../icons/default/{ApplicationSwitcher.svg => BlockGrid.svg} | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename resources/themes/cura-light/icons/default/{ApplicationSwitcher.svg => BlockGrid.svg} (100%) diff --git a/resources/qml/ApplicationSwitcher/ApplicationSwitcher.qml b/resources/qml/ApplicationSwitcher/ApplicationSwitcher.qml index c09c6e9547..5096f53030 100644 --- a/resources/qml/ApplicationSwitcher/ApplicationSwitcher.qml +++ b/resources/qml/ApplicationSwitcher/ApplicationSwitcher.qml @@ -31,7 +31,7 @@ Item anchors.horizontalCenter: applicationSwitcherButton.horizontalCenter color: UM.Theme.getColor("main_background") - source: UM.Theme.getIcon("ApplicationSwitcher") + source: UM.Theme.getIcon("BlockGrid") } onClicked: diff --git a/resources/themes/cura-light/icons/default/ApplicationSwitcher.svg b/resources/themes/cura-light/icons/default/BlockGrid.svg similarity index 100% rename from resources/themes/cura-light/icons/default/ApplicationSwitcher.svg rename to resources/themes/cura-light/icons/default/BlockGrid.svg From ee564782b52d5dc9212bfcd482c7dcac2230c847 Mon Sep 17 00:00:00 2001 From: Konstantinos Karmas Date: Tue, 21 Sep 2021 11:06:45 +0200 Subject: [PATCH 5/6] Remove comment CURA-8421 --- resources/qml/Account/AccountWidget.qml | 1 - resources/qml/ApplicationSwitcher/ApplicationButton.qml | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/resources/qml/Account/AccountWidget.qml b/resources/qml/Account/AccountWidget.qml index 6433822497..3cef820997 100644 --- a/resources/qml/Account/AccountWidget.qml +++ b/resources/qml/Account/AccountWidget.qml @@ -54,7 +54,6 @@ Item id: accountWidget anchors.verticalCenter: parent.verticalCenter -// anchors.horizontalCenter: signInButton.horizontalCenter implicitHeight: Math.round(0.5 * UM.Theme.getSize("main_window_header").height) implicitWidth: Math.round(0.5 * UM.Theme.getSize("main_window_header").height) diff --git a/resources/qml/ApplicationSwitcher/ApplicationButton.qml b/resources/qml/ApplicationSwitcher/ApplicationButton.qml index c722b172af..a6176f3153 100644 --- a/resources/qml/ApplicationSwitcher/ApplicationButton.qml +++ b/resources/qml/ApplicationSwitcher/ApplicationButton.qml @@ -97,4 +97,4 @@ Button elide: Text.ElideRight } } -} \ No newline at end of file +} From 6df9f9f72cc209c47e96c4204c04edcf096b3685 Mon Sep 17 00:00:00 2001 From: Konstantinos Karmas Date: Tue, 21 Sep 2021 11:32:38 +0200 Subject: [PATCH 6/6] Remove debugging code So that all platform links have the link icon indicator in the bottom right corner. CURA-8421 --- resources/qml/ApplicationSwitcher/ApplicationSwitcher.qml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/resources/qml/ApplicationSwitcher/ApplicationSwitcher.qml b/resources/qml/ApplicationSwitcher/ApplicationSwitcher.qml index 5096f53030..a98916ced9 100644 --- a/resources/qml/ApplicationSwitcher/ApplicationSwitcher.qml +++ b/resources/qml/ApplicationSwitcher/ApplicationSwitcher.qml @@ -96,7 +96,7 @@ Item displayName: modelData.displayName iconSource: modelData.thumbnail tooltipText: modelData.description - isExternalLink: (index % 2 == 0) + isExternalLink: true onClicked: Qt.openUrlExternally(modelData.link) }