mirror of
https://git.mirrors.martin98.com/https://github.com/Ultimaker/Cura
synced 2025-04-30 15:54:32 +08:00
77a8f36153
Instead of changing the color of the entire tool when it is hovered or selected, now a background circle will be drawn and its color will change according to whether the button is hovered/selected or not. In addition, the button icons will now be half the size of the button itself. CURA-8013
111 lines
3.0 KiB
QML
111 lines
3.0 KiB
QML
// Copyright (c) 2018 Ultimaker B.V.
|
|
// Cura is released under the terms of the LGPLv3 or higher.
|
|
|
|
import QtQuick 2.7
|
|
import QtQuick.Controls 2.3
|
|
|
|
import UM 1.2 as UM
|
|
import Cura 1.0 as Cura
|
|
|
|
Button
|
|
{
|
|
id: base
|
|
|
|
property alias toolItem: contentItemLoader.sourceComponent
|
|
|
|
// These two properties indicate whether the toolbar button is at the top of the toolbar column or at the bottom.
|
|
// If it is somewhere in the middle, then both has to be false. If there is only one element in the column, then
|
|
// both properties have to be set to true. This is used to create a rounded corner.
|
|
property bool isTopElement: false
|
|
property bool isBottomElement: false
|
|
|
|
hoverEnabled: true
|
|
|
|
background: Rectangle
|
|
{
|
|
implicitWidth: UM.Theme.getSize("button").width
|
|
implicitHeight: UM.Theme.getSize("button").height
|
|
color: UM.Theme.getColor("toolbar_background")
|
|
radius: UM.Theme.getSize("default_radius").width
|
|
|
|
Rectangle
|
|
{
|
|
id: topSquare
|
|
anchors
|
|
{
|
|
left: parent.left
|
|
right: parent.right
|
|
top: parent.top
|
|
}
|
|
height: parent.radius
|
|
color: parent.color
|
|
visible: !base.isTopElement
|
|
}
|
|
|
|
Rectangle
|
|
{
|
|
id: bottomSquare
|
|
anchors
|
|
{
|
|
left: parent.left
|
|
right: parent.right
|
|
bottom: parent.bottom
|
|
}
|
|
height: parent.radius
|
|
color: parent.color
|
|
visible: !base.isBottomElement
|
|
}
|
|
|
|
Rectangle
|
|
{
|
|
id: leftSquare
|
|
anchors
|
|
{
|
|
left: parent.left
|
|
top: parent.top
|
|
bottom: parent.bottom
|
|
}
|
|
width: parent.radius
|
|
color: parent.color
|
|
}
|
|
}
|
|
contentItem: Rectangle
|
|
{
|
|
opacity: parent.enabled ? 1.0 : 0.2
|
|
implicitWidth: Math.round(UM.Theme.getSize("button").width * 0.75)
|
|
implicitHeight: Math.round(UM.Theme.getSize("button").height * 0.75)
|
|
radius: Math.round(width * 0.5)
|
|
|
|
color:
|
|
{
|
|
if (base.checked && base.hovered)
|
|
{
|
|
return UM.Theme.getColor("toolbar_button_active_hover")
|
|
}
|
|
else if (base.checked)
|
|
{
|
|
return UM.Theme.getColor("toolbar_button_active")
|
|
}
|
|
else if(base.hovered)
|
|
{
|
|
return UM.Theme.getColor("toolbar_button_hover")
|
|
}
|
|
return UM.Theme.getColor("toolbar_background")
|
|
}
|
|
Loader
|
|
{
|
|
id: contentItemLoader
|
|
anchors.centerIn: parent
|
|
width: Math.round(UM.Theme.getSize("button").width / 2)
|
|
height: Math.round(UM.Theme.getSize("button").height / 2)
|
|
}
|
|
}
|
|
|
|
Cura.ToolTip
|
|
{
|
|
id: tooltip
|
|
tooltipText: base.text
|
|
visible: base.hovered
|
|
}
|
|
}
|