3D-printing/Cura
1
0
Fork 0
mirror of https://github.com/Ultimaker/Cura.git synced 2025-08-09 23:05:01 -06:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Update topbar

Browse source 
CURA-4213
This commit is contained in:
Lipu Fei 2017-09-05 12:41:43 +02:00
parent 63e75ec6b7
commit 60c7d2f22e
15 changed files with 141 additions and 187 deletions
Download patch file Download diff file Expand all files Collapse all files

4
resources/themes/cura-light/icons/tab_monitor.svg
View file

@ -1,4 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="35px" height="28px" viewBox="0 0 35 28" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="M26,0 L0,0 L0,28 L2.73151751,28 C3.13618677,27.6 3.74319066,27.3 4.45136187,27.3 L21.5486381,27.3 C22.2568093,27.3 22.8638132,27.6 23.2684825,28 L26,28 L26,0 Z M23.5719844,21 C23.5719844,22.3 22.459144,23.4 21.1439689,23.4 L4.95719844,23.4 C3.64202335,23.4 2.52918288,22.3 2.52918288,21 L2.52918288,3.1 C2.52918288,2.7 2.83268482,2.4 3.23735409,2.4 L22.8638132,2.4 C23.2684825,2.4 23.5719844,2.7 23.5719844,3.1 L23.5719844,21 Z" />
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 592 B

10
resources/themes/cura-light/icons/tab_status_busy.svg
View file

@ -1,9 +1 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="35px" height="28px" viewBox="0 0 35 28" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(15.5, 4)">
<circle fill="#0CA9E3" cx="9" cy="9" r="8.5" stroke="#18294D" />
<circle fill="#FFFFFF" cx="4" cy="9" r="1.75" />
<circle fill="#FFFFFF" cx="9" cy="9" r="1.75" />
<circle fill="#FFFFFF" cx="14" cy="9" r="1.75" />
</g>
</svg>
<svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><rect id="a" x="1" y="1" width="16" height="16" rx="8"/></defs><g fill="none" fill-rule="evenodd"><use fill="#0CA9E3" xlink:href="#a"/><rect stroke="#272C30" x=".5" y=".5" width="17" height="17" rx="8.5"/><g transform="translate(2.3 7.3)" fill="#FFF"><rect x="10" width="3.5" height="3.5" rx="1.75"/><rect width="3.5" height="3.5" rx="1.75"/><rect x="5" width="3.5" height="3.5" rx="1.75"/></g></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 440 B

After

Width:  |  Height:  |  Size: 536 B

Before After
Before After

8
resources/themes/cura-light/icons/tab_status_connected.svg
View file

@ -1,7 +1 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="35px" height="28px" viewBox="0 0 35 28" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(15.5, 4)">
<circle fill="#10CB00" cx="9" cy="9" r="8.5" stroke="#18294D" />
<polyline fill="none" stroke="#FFFFFF" stroke-width="2" points="5.643,8.645 8.116,11.12 12.36,6.88" />
</g>
</svg>
<svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>tab_status_connected</title><defs><rect id="a" x="1" y="1" width="16" height="16" rx="8"/></defs><g fill="none" fill-rule="evenodd"><use fill="#10CB00" xlink:href="#a"/><rect stroke="#272C30" x=".5" y=".5" width="17" height="17" rx="8.5"/><path fill="#FFF" d="M8.115 12.535l-3.18-3.183L6.35 7.937l1.768 1.768 3.534-3.532 1.416 1.415z"/></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 379 B

After

Width:  |  Height:  |  Size: 479 B

Before After
Before After

9
resources/themes/cura-light/icons/tab_status_paused.svg
View file

@ -1,8 +1 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="35px" height="28px" viewBox="0 0 35 28" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(15.5, 4)">
<circle fill="#FF8C10" cx="9" cy="9" r="8.5" stroke="#18294D" />
<rect fill="#FFFFFF" x="6" y="6" width="2" height="6" />
<rect fill="#FFFFFF" x="10" y="6" width="2" height="6" />
</g>
</svg>
<svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>tab_status_paused</title><defs><rect id="a" x="1" y="1" width="16" height="16" rx="8"/></defs><g fill="none" fill-rule="evenodd"><use fill="#FF8C10" xlink:href="#a"/><rect stroke="#272C30" x=".5" y=".5" width="17" height="17" rx="8.5"/><path d="M10 6h2v6h-2V6zM6 6h2v6H6V6z" fill="#FFF"/></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 399 B

After

Width:  |  Height:  |  Size: 431 B

Before After
Before After

9
resources/themes/cura-light/icons/tab_status_stopped.svg
View file

@ -1,8 +1 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="35px" height="28px" viewBox="0 0 35 28" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(15.5, 4)">
<circle fill="#D0021B" cx="9" cy="9" r="8.5" stroke="#18294D" />
<line x1="6" y1="6" x2="12" y2="12" stroke-width="2" stroke="#FFFFFF" />
<line x1="6" y1="12" x2="12" y2="6" stroke-width="2" stroke="#FFFFFF" />
</g>
</svg>
<svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>tab_status_stopped</title><defs><rect id="a" x="1" y="1" width="16" height="16" rx="8"/><path id="b" d="M3.588-.662h1v7.5h-1z"/><path id="c" d="M3.412-.662h1v7.5h-1z"/></defs><g fill="none" fill-rule="evenodd"><use fill="#D0021B" xlink:href="#a"/><rect stroke="#272C30" x=".5" y=".5" width="17" height="17" rx="8.5"/><g><g transform="rotate(45 -.654 12.124)"><use fill="#FFF" xlink:href="#b"/><path stroke="#FFF" stroke-width=".5" d="M3.338-.912h1.25v8h-1.25z"/></g><g transform="rotate(135 5.169 7.124)"><use fill="#FFF" xlink:href="#c"/><path stroke="#FFF" stroke-width=".5" d="M3.162-.912h1.25v8h-1.25z"/></g></g></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 430 B

After

Width:  |  Height:  |  Size: 759 B

Before After
Before After

9
resources/themes/cura-light/icons/tab_status_unknown.svg
View file

@ -1,8 +1 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="35" height="28" viewBox="0 0 35 28" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(15.5, 4)">
<circle cx="9" cy="9" r="8.5" fill="#8B9595" stroke="#18294D" />
<path fill="#FFFFFF" d="M9.013 3.5C7.29 3.5 6.533 4.515 6.236 5.12 5.989 5.623 5.997 6.057 6.001 6.138L7.59 6.058 7.591 6.082C7.591 6.081 7.594 5.964 7.664 5.821 7.905 5.33 8.347 5.091 9.013 5.091 9.47 5.091 9.817 5.217 10.075 5.475 10.477 5.878 10.556 6.485 10.555 6.626 10.554 6.812 10.49 7.77 9.306 8.386 8.318 8.899 7.752 9.906 7.752 11.147L7.752 11.621 9.343 11.618 9.342 11.147C9.342 10.697 9.463 10.097 10.039 9.798 12.035 8.76 12.144 6.98 12.146 6.633 12.148 6.141 11.952 5.106 11.202 4.353 10.647 3.795 9.89 3.5 9.013 3.5Z"/>
<rect fill="#FFFFFF" x="7.818" y="13.136" width="1.591" height="1.25" />
</g>
</svg>
<svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><rect id="a" width="16" height="16" rx="8"/></defs><g fill="none" fill-rule="evenodd"><g transform="translate(1 1)"><use fill="#8B9595" xlink:href="#a"/><rect stroke="#272C30" x="-.5" y="-.5" width="17" height="17" rx="8.5"/></g><g fill="#FFF"><path d="M9.013 3.5c-1.723 0-2.48 1.015-2.777 1.62-.247.503-.239.937-.235 1.018l1.589-.08v.024c0-.001.004-.118.074-.26.241-.492.683-.731 1.35-.731.456 0 .803.126 1.061.384.402.403.48 1.01.48 1.15 0 .187-.065 1.145-1.25 1.76-.987.514-1.553 1.52-1.553 2.762v.474l1.59-.003v-.47c0-.451.121-1.051.697-1.35 1.996-1.038 2.105-2.818 2.107-3.165.002-.492-.194-1.527-.944-2.28-.555-.558-1.312-.853-2.189-.853zM7.818 14.386H9.41v-1.25H7.82z"/></g></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 874 B

After

Width:  |  Height:  |  Size: 823 B

Before After
Before After

183
resources/themes/cura-light/styles.qml
View file

@ -90,72 +90,44 @@ QtObject {
}
}
property Component topbar_header_tab: Component {
property Component topbar_header_tab_no_overlay: Component {
ButtonStyle {
background: Item {
implicitWidth: Theme.getSize("topbar_button").width;
implicitHeight: Theme.getSize("topbar_button").height;
background: Rectangle {
implicitHeight: Theme.getSize("topbar_button").height
implicitWidth: Theme.getSize("topbar_button").width
color: "transparent"
anchors.fill: parent
Rectangle {
id: buttonFace;
Rectangle
{
id: underline
anchors.fill: parent;
property bool down: control.pressed || (control.checkable && control.checked);
color: "transparent"
Behavior on color { ColorAnimation { duration: 50; } }
Rectangle {
id: underline;
anchors.horizontalCenter: parent.horizontalCenter
anchors.bottom: parent.bottom
width: Theme.getSize("topbar_button").width
height: Theme.getSize("sidebar_header_highlight").height
color: control.checked ? UM.Theme.getColor("sidebar_header_highlight") : UM.Theme.getColor("sidebar_header_highlight_hover")
visible: control.hovered || control.checked
}
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: parent.bottom
width: parent.width
height: Theme.getSize("sidebar_header_highlight").height
color: control.checked ? UM.Theme.getColor("sidebar_header_highlight") : "transparent"
visible: control.hovered || control.checked
}
}
label: Item
{
label: Rectangle {
implicitHeight: Theme.getSize("topbar_button_icon").height
implicitWidth: Theme.getSize("topbar_button").width;
implicitWidth: Theme.getSize("topbar_button").width
color: "transparent"
anchors.fill: parent
Item
{
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter;
width: childrenRect.width
height: Theme.getSize("topbar_button_icon").height
UM.RecolorImage
{
visible: control.iconSource != ""
id: icon
color: UM.Theme.getColor("text_emphasis")
opacity: !control.enabled ? 0.2 : 1.0
source: control.iconSource
width: visible ? Theme.getSize("topbar_button_icon").width : 0
height: Theme.getSize("topbar_button_icon").height
sourceSize: Theme.getSize("topbar_button_icon")
}
UM.RecolorImage
{
visible: control.overlayIconSource != "" && control.iconSource != ""
color: control.overlayColor
opacity: !control.enabled ? 0.2 : 1.0
source: control.overlayIconSource
width: visible ? Theme.getSize("topbar_button_icon").width : 0
height: Theme.getSize("topbar_button_icon").height
sourceSize: Theme.getSize("topbar_button_icon")
}
anchors.centerIn: parent
width: textLabel.width + icon.width + Theme.getSize("default_margin").width / 2
Label
{
text: control.text;
anchors.left: icon.right
anchors.leftMargin: icon.visible ? Theme.getSize("default_margin").width : 0
id: textLabel
text: control.text
anchors.right: icon.visible ? icon.left : parent.right
anchors.rightMargin: icon.visible ? Theme.getSize("default_margin").width / 2 : 0
anchors.verticalCenter: parent.verticalCenter;
font: control.checked ? UM.Theme.getFont("large") : UM.Theme.getFont("large_nonbold")
color:
@ -174,6 +146,107 @@ QtObject {
}
}
}
Image
{
id: icon
visible: control.iconSource != ""
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
opacity: !control.enabled ? 0.2 : 1.0
source: control.iconSource
width: visible ? Theme.getSize("topbar_button_icon").width : 0
height: Theme.getSize("topbar_button_icon").height
sourceSize: Theme.getSize("topbar_button_icon")
}
}
}
}
}
property Component topbar_header_tab: Component {
ButtonStyle {
background: Item {
implicitHeight: Theme.getSize("topbar_button").height
implicitWidth: Theme.getSize("topbar_button").width + Theme.getSize("topbar_button_icon").width
Rectangle {
id: buttonFace;
anchors.fill: parent;
color: "transparent"
Behavior on color { ColorAnimation { duration: 50; } }
Rectangle {
id: underline;
anchors.horizontalCenter: parent.horizontalCenter
anchors.bottom: parent.bottom
width: Theme.getSize("topbar_button").width + Theme.getSize("topbar_button_icon").width
height: Theme.getSize("sidebar_header_highlight").height
color: control.checked ? UM.Theme.getColor("sidebar_header_highlight") : UM.Theme.getColor("sidebar_header_highlight_hover")
visible: control.hovered || control.checked
}
}
}
label: Item
{
implicitHeight: Theme.getSize("topbar_button_icon").height
implicitWidth: Theme.getSize("topbar_button").width + Theme.getSize("topbar_button_icon").width
Item
{
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter;
width: childrenRect.width
height: Theme.getSize("topbar_button_icon").height
Label
{
text: control.text;
anchors.right: (icon.visible || overlayIcon.visible) ? icon.left : parent.right
anchors.rightMargin: (icon.visible || overlayIcon.visible) ? Theme.getSize("default_margin").width : 0
anchors.verticalCenter: parent.verticalCenter;
font: control.checked ? UM.Theme.getFont("large") : UM.Theme.getFont("large_nonbold")
color:
{
if(control.hovered)
{
return UM.Theme.getColor("topbar_button_text_hovered");
}
if(control.checked)
{
return UM.Theme.getColor("topbar_button_text_active");
}
else
{
return UM.Theme.getColor("topbar_button_text_inactive");
}
}
}
UM.RecolorImage
{
visible: control.iconSource != ""
id: icon
color: UM.Theme.getColor("text_emphasis")
opacity: !control.enabled ? 0.2 : 1.0
source: control.iconSource
width: visible ? Theme.getSize("topbar_button_icon").width : 0
height: Theme.getSize("topbar_button_icon").height
sourceSize: Theme.getSize("topbar_button_icon")
}
UM.RecolorImage
{
id: overlayIcon
visible: control.overlayIconSource != "" && control.iconSource != ""
color: control.overlayColor
opacity: !control.enabled ? 0.2 : 1.0
source: control.overlayIconSource
width: visible ? Theme.getSize("topbar_button_icon").width : 0
height: Theme.getSize("topbar_button_icon").height
sourceSize: Theme.getSize("topbar_button_icon")
}
}
}
}

2
resources/themes/cura-light/theme.json
View file

@ -310,7 +310,7 @@
"topbar_logo_right_margin": [3, 0],
"topbar_button": [8, 4],
"topbar_button_icon": [3.125, 2.5],
"topbar_button_icon": [1.2, 1.2],
"button_tooltip": [1.0, 1.3],
"button_tooltip_arrow": [0.25, 0.25],

9
resources/themes/cura/icons/tab_status_busy.svg
View file

@ -1,9 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="35px" height="28px" viewBox="0 0 35 28" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(15.5, 4)">
<circle fill="#0CA9E3" cx="9" cy="9" r="8.5" stroke="#272C30" />
<circle fill="#FFFFFF" cx="4" cy="9" r="1.75" />
<circle fill="#FFFFFF" cx="9" cy="9" r="1.75" />
<circle fill="#FFFFFF" cx="14" cy="9" r="1.75" />
</g>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 440 B

7
resources/themes/cura/icons/tab_status_connected.svg
View file

@ -1,7 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="35px" height="28px" viewBox="0 0 35 28" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(15.5, 4)">
<circle fill="#10CB00" cx="9" cy="9" r="8.5" stroke="#272C30" />
<polyline fill="none" stroke="#FFFFFF" stroke-width="2" points="5.643,8.645 8.116,11.12 12.36,6.88" />
</g>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 379 B

8
resources/themes/cura/icons/tab_status_paused.svg
View file

@ -1,8 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="35px" height="28px" viewBox="0 0 35 28" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(15.5, 4)">
<circle fill="#FF8C10" cx="9" cy="9" r="8.5" stroke="#272C30" />
<rect fill="#FFFFFF" x="6" y="6" width="2" height="6" />
<rect fill="#FFFFFF" x="10" y="6" width="2" height="6" />
</g>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 399 B

8
resources/themes/cura/icons/tab_status_stopped.svg
View file

@ -1,8 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="35px" height="28px" viewBox="0 0 35 28" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(15.5, 4)">
<circle fill="#D0021B" cx="9" cy="9" r="8.5" stroke="#272C30" />
<line x1="6" y1="6" x2="12" y2="12" stroke-width="2" stroke="#FFFFFF" />
<line x1="6" y1="12" x2="12" y2="6" stroke-width="2" stroke="#FFFFFF" />
</g>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 430 B

8
resources/themes/cura/icons/tab_status_unknown.svg
View file

@ -1,8 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="35" height="28" viewBox="0 0 35 28" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(15.5, 4)">
<circle cx="9" cy="9" r="8.5" fill="#8B9595" stroke="#272C30" />
<path fill="#FFFFFF" d="M9.013 3.5C7.29 3.5 6.533 4.515 6.236 5.12 5.989 5.623 5.997 6.057 6.001 6.138L7.59 6.058 7.591 6.082C7.591 6.081 7.594 5.964 7.664 5.821 7.905 5.33 8.347 5.091 9.013 5.091 9.47 5.091 9.817 5.217 10.075 5.475 10.477 5.878 10.556 6.485 10.555 6.626 10.554 6.812 10.49 7.77 9.306 8.386 8.318 8.899 7.752 9.906 7.752 11.147L7.752 11.621 9.343 11.618 9.342 11.147C9.342 10.697 9.463 10.097 10.039 9.798 12.035 8.76 12.144 6.98 12.146 6.633 12.148 6.141 11.952 5.106 11.202 4.353 10.647 3.795 9.89 3.5 9.013 3.5Z"/>
<rect fill="#FFFFFF" x="7.818" y="13.136" width="1.591" height="1.25" />
</g>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 874 B

8
resources/themes/cura/images/logo.svg
View file

@ -1,8 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="82px" height="18px" viewBox="0 0 82 18" version="1.1" xmlns="http://www.w3.org/2000/svg">
<polygon fill="#20A6DB" points="82 10.3797468 77.8757345 10.3797468 75.7721519 12.4764557 75.7721519 16.6075949 79.9067798 16.6075949 82 14.5108861" />
<path fill="#FFFFFF" d="M0,9.32538529 C0,14.168804 3.22511,17.6455696 8.53908129,17.6455696 L16.6075949,17.6455696 L16.6075949,13.294146 L8.53908129,13.294146 C5.8534025,13.2832128 4.53351762,11.4792306 4.53351762,9.32538529 C4.53351762,7.17153994 5.8534025,5.40035747 8.53908129,5.37849102 L16.6075949,5.37849102 L16.6075949,1.03800064 L8.53908129,1.03800064 C3.21363275,1.02706742 0,4.47103333 0,9.32538529 Z" />
<path fill="#FFFFFF" d="M33.004725,9.78605176 C33.004725,12.2613239 31.20074,13.5835846 29.0468913,13.5835846 C26.8930426,13.5835846 25.1218573,12.2613239 25.1218573,9.78605176 L25.1218573,1.03797468 L20.7594937,1.03797468 L20.7594937,9.78605176 C20.7594937,14.6837056 24.203465,17.6455696 29.0468913,17.6455696 C33.8903176,17.6455696 37.3670886,14.6731275 37.3670886,9.78605176 L37.3670886,1.03797468 L33.004725,1.03797468 L33.004725,9.78605176 L33.004725,9.78605176 Z" />
<path fill="#FFFFFF" d="M62.1251127,1.03797468 C57.0530042,1.03797468 53.9746835,4.47968021 53.9746835,9.31992005 C53.9746835,14.1601599 57.0530042,17.6346436 62.1251127,17.6346436 L63.9217127,17.6346436 L63.9217127,13.297002 L62.1251127,13.297002 C59.5616713,13.2860759 58.3018603,11.4832778 58.3018603,9.3308461 C58.3018603,7.17841439 59.5616713,5.4083944 62.1251127,5.38654231 L66.2112822,5.38654231 L66.2112822,11.0680879 L66.2112822,13.297002 L66.2112822,17.6455696 L70.5822785,17.6455696 L70.5822785,17.3942705 L70.5822785,13.297002 L70.5822785,5.38654231 L70.5822785,1.80279813 L70.5822785,1.03797468 L62.1251127,1.03797468 Z" />
<path fill="#FFFFFF" d="M41.5189873,8.10074451 L41.5189873,16.6075949 L45.8823067,16.6075949 L45.8823067,8.10074451 C45.8823067,5.99540589 47.1558644,4.26411221 49.7472774,4.24273822 L52.9367089,4.24273822 L52.9367089,0 L49.7472774,0 C44.6198234,0 41.5189873,3.36640438 41.5189873,8.10074451 Z" />
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 2.1 KiB