Introduce the ApplicationSwitcher widget

It includes only the hardcoded model with the Ultimaker links for now.

CURA-8421
This commit is contained in:
Konstantinos Karmas 2021-09-20 15:33:05 +02:00
parent 1305abac6f
commit 570fb3cf93
6 changed files with 238 additions and 1 deletions

View file

@ -0,0 +1,94 @@
// Copyright (c) 2021 Ultimaker B.V.
// Cura is released under the terms of the LGPLv3 or higher.
import QtQuick 2.10
import QtQuick.Controls 2.3
import UM 1.4 as UM
import Cura 1.1 as Cura
Button
{
id: base
property alias iconSource: applicationIcon.source
property alias displayName: applicationDisplayName.text
property alias tooltipText: tooltip.text
property bool isExternalLink: false
width: UM.Theme.getSize("application_switcher_item").width
height: UM.Theme.getSize("application_switcher_item").height
background: Rectangle
{
color: parent.hovered ? UM.Theme.getColor("action_button_hovered") : UM.Theme.getColor("action_button")
border.color: parent.hovered ? UM.Theme.getColor("primary") : "transparent"
border.width: UM.Theme.getSize("default_lining").width
}
UM.TooltipArea
{
id: tooltip
anchors.fill: parent
}
Column
{
id: applicationButtonContent
anchors.centerIn: parent
spacing: UM.Theme.getSize("default_margin").width
UM.RecolorImage
{
id: applicationIcon
anchors.horizontalCenter: parent.horizontalCenter
color: UM.Theme.getColor("monitor_icon_primary")
width: UM.Theme.getSize("application_switcher_icon").width
height: width
Item
{
id: externalLinkIndicator
visible: base.isExternalLink
anchors
{
bottom: parent.bottom
bottomMargin: - Math.round(height * 1 / 6)
right: parent.right
rightMargin: - Math.round(width * 5 / 6)
}
Rectangle
{
anchors.centerIn: parent
width: UM.Theme.getSize("small_button_icon").width
height: width
color: base.hovered ? UM.Theme.getColor("action_button_hovered") : UM.Theme.getColor("action_button")
radius: 0.5 * width
}
UM.RecolorImage
{
id: externalLinkIcon
anchors.centerIn: parent
width: UM.Theme.getSize("printer_status_icon").width
height: width
color: UM.Theme.getColor("monitor_icon_primary")
source: UM.Theme.getIcon("LinkExternal")
}
}
}
Label
{
id: applicationDisplayName
anchors.horizontalCenter: parent.horizontalCenter
}
}
}

View file

@ -0,0 +1,122 @@
// Copyright (c) 2021 Ultimaker B.V.
// Cura is released under the terms of the LGPLv3 or higher.
import QtQuick 2.10
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.15
import UM 1.4 as UM
import Cura 1.1 as Cura
Item
{
id: applicationSwitcherWidget
width: appSwitcherButton.width
height: width
Button
{
id: appSwitcherButton
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
width: Math.round(0.5 * UM.Theme.getSize("main_window_header").height)
height: width
background: UM.RecolorImage
{
width: UM.Theme.getSize("small_button_icon").width
height: width
anchors.verticalCenter: appSwitcherButton.verticalCenter
anchors.horizontalCenter: appSwitcherButton.horizontalCenter
color: UM.Theme.getColor("main_background")
source: UM.Theme.getIcon("ApplicationSwitcher")
}
onClicked:
{
if (popup.opened)
{
popup.close()
} else {
popup.open()
}
}
}
Popup
{
id: popup
y: parent.height + UM.Theme.getSize("default_arrow").height
x: parent.width - width
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
opacity: opened ? 1 : 0
Behavior on opacity { NumberAnimation { duration: 100 } }
padding: 0
width: contentWidth + 2 * UM.Theme.getSize("wide_margin").width
height: contentHeight + 2 * UM.Theme.getSize("wide_margin").width
contentItem: Item
{
id: projectListContainer
anchors.fill: parent
anchors.margins: UM.Theme.getSize("wide_margin").width
Column
{
id: contentsColumn
anchors.top: parent.top
anchors.left: parent.left
width: gridLayout.width
Grid
{
id: gridLayout
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" },
{ displayName: "My printers", thumbnail: UM.Theme.getIcon("Bug"), description: "This is the description2", link: "https://github.com/Ultimaker/Cura/issues/2" },
{ displayName: "Ultimaker.com", thumbnail: UM.Theme.getIcon("Bug"), description: "This is the description3", link: "https://ultimaker.com" },
{ displayName: "Report issue4", thumbnail: UM.Theme.getIcon("Bug"), description: "This is the description4", link: "https://github.com/Ultimaker/Cura/issues/4" },
{ displayName: "Report issue5", thumbnail: UM.Theme.getIcon("Bug"), description: "This is the description5", link: "https://github.com/Ultimaker/Cura/issues/5" }
]
delegate: ApplicationButton
{
displayName: modelData.displayName
iconSource: modelData.thumbnail
tooltipText: modelData.description
isExternalLink: (index % 2 == 0)
onClicked: Qt.openUrlExternally(modelData.link)
}
}
}
}
}
background: UM.PointingRectangle
{
color: UM.Theme.getColor("tool_panel_background")
borderColor: UM.Theme.getColor("lining")
borderWidth: UM.Theme.getSize("default_lining").width
target: Qt.point(width - (appSwitcherButton.width / 2), -10)
arrowSize: UM.Theme.getSize("default_arrow").width
}
}
}

View file

@ -10,6 +10,7 @@ import UM 1.4 as UM
import Cura 1.0 as Cura import Cura 1.0 as Cura
import "../Account" import "../Account"
import "../ApplicationSwitcher"
Item Item
{ {
@ -113,7 +114,7 @@ Item
anchors anchors
{ {
right: accountWidget.left right: applicationSwitcher.left
rightMargin: UM.Theme.getSize("default_margin").width rightMargin: UM.Theme.getSize("default_margin").width
verticalCenter: parent.verticalCenter verticalCenter: parent.verticalCenter
} }
@ -138,6 +139,17 @@ Item
} }
} }
ApplicationSwitcher
{
id: applicationSwitcher
anchors
{
verticalCenter: parent.verticalCenter
right: accountWidget.left
// rightMargin: UM.Theme.getSize("default_margin").width
}
}
AccountWidget AccountWidget
{ {
id: accountWidget id: accountWidget

View file

@ -0,0 +1,3 @@
<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
<path d="M4 4H0V3C0 2.20435 0.316071 1.44129 0.87868 0.87868C1.44129 0.316071 2.20435 0 3 0H4V4ZM11 0H7V4H11V0ZM18 3C18 2.20435 17.6839 1.44129 17.1213 0.87868C16.5587 0.316071 15.7956 0 15 0H14V4H18V3ZM4 7H0V11H4V7ZM11 7H7V11H11V7ZM18 7H14V11H18V7ZM4 14H0V15C0 15.7956 0.316071 16.5587 0.87868 17.1213C1.44129 17.6839 2.20435 18 3 18H4V14ZM11 14H7V18H11V14ZM18 15V14H14V18H15C15.7956 18 16.5587 17.6839 17.1213 17.1213C17.6839 16.5587 18 15.7956 18 15Z" fill="#000E1A"/>
</svg>

After

Width:  |  Height:  |  Size: 540 B

View file

@ -0,0 +1,3 @@
<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M42 12C42 15.5 39.4 18.4 36 18.9V24H42V26H36V31V31.1C39.4 31.6 42 34.5 42 38H40C40 35.5 38.2 33.5 35.8 33.1C34.8 38.7 29.9 43 24 43C18.1 43 13.2 38.7 12.2 33.1C9.8 33.5 8 35.5 8 38H6C6 34.5 8.6 31.6 12 31.1V31V26H6V24H12V18.9C8.6 18.4 6 15.5 6 12H8C8 14.4 9.7 16.4 12 16.9C12.1 10.3 17.4 5 24 5C30.6 5 35.9 10.3 36 16.9C38.3 16.4 40 14.4 40 12H42ZM34 17C34 11.5 29.5 7 24 7C18.5 7 14 11.5 14 17H34ZM14 19V31C14 36.2 18 40.4 23 40.9V19H14ZM25 19V40.9C30 40.4 34 36.2 34 31V19H25ZM24 11.9L27.6 10.1L28.4 11.9L26.2 13L28.4 14.1L27.6 15.9L24 14.1L20.4 15.9L19.6 14.1L21.8 13L19.6 11.9L20.4 10.1L24 11.9Z" fill="black"/>
</svg>

After

Width:  |  Height:  |  Size: 745 B

View file

@ -499,6 +499,9 @@
"print_setup_icon": [1.2, 1.2], "print_setup_icon": [1.2, 1.2],
"drag_icon": [1.416, 0.25], "drag_icon": [1.416, 0.25],
"application_switcher_item": [8, 9],
"application_switcher_icon": [3.75, 3.75],
"expandable_component_content_header": [0.0, 3.0], "expandable_component_content_header": [0.0, 3.0],
"configuration_selector": [35.0, 4.0], "configuration_selector": [35.0, 4.0],