mirror of
https://github.com/Ultimaker/Cura.git
synced 2025-08-07 22:13:58 -06:00
Tweak sidebar tab bar appearance
CURA-1036
This commit is contained in:
fieldOfView
parent
1c83b15290
commit
cdd38763f6
5 changed files with 249 additions and 93 deletions
|
|
@ -23,20 +23,6 @@ Rectangle
|
|||
UM.I18nCatalog { id: catalog; name:"cura"}
|
||||
|
||||
|
||||
property string machineMonitorIcon:
|
||||
{
|
||||
if(!printerConnected)
|
||||
{
|
||||
return "tab_monitor"
|
||||
}
|
||||
if(Cura.MachineManager.printerOutputDevices[0].jobState == "paused")
|
||||
{
|
||||
return "tab_monitor_paused"
|
||||
} else if (Cura.MachineManager.printerOutputDevices[0].jobState != "error")
|
||||
{
|
||||
return "tab_monitor_connected"
|
||||
}
|
||||
}
|
||||
function showTooltip(item, position, text)
|
||||
{
|
||||
tooltip.text = text;
|
||||
|
|
@ -64,6 +50,7 @@ Rectangle
|
|||
var finalTime = strPadLeft(hours, "0", 2) + ':' + strPadLeft(minutes,'0',2)+ ':' + strPadLeft(seconds,'0',2);
|
||||
return finalTime;
|
||||
}
|
||||
|
||||
MouseArea
|
||||
{
|
||||
anchors.fill: parent
|
||||
|
|
@ -76,35 +63,55 @@ Rectangle
|
|||
}
|
||||
|
||||
// Mode selection buttons for changing between Setting & Monitor print mode
|
||||
Row
|
||||
Rectangle
|
||||
{
|
||||
id: settingAndMonitorButtons // Really need a better name for this.
|
||||
|
||||
id: sidebarHeaderBar
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: UM.Theme.getSize("default_margin").width;
|
||||
anchors.right: parent.right
|
||||
Button
|
||||
height: childrenRect.height
|
||||
color: UM.Theme.getColor("sidebar_header_bar")
|
||||
|
||||
Row
|
||||
{
|
||||
width: (parent.width - UM.Theme.getSize("default_margin").width) / 2
|
||||
height: 50
|
||||
onClicked: monitoringPrint = false
|
||||
iconSource: UM.Theme.getIcon("tab_settings");
|
||||
style: UM.Theme.styles.tool_button
|
||||
checkable: true
|
||||
checked: true
|
||||
exclusiveGroup: settingAndMonitorButtonsGroup
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: UM.Theme.getSize("default_margin").width;
|
||||
anchors.right: parent.right
|
||||
Button
|
||||
{
|
||||
width: (parent.width - UM.Theme.getSize("default_margin").width) / 2
|
||||
height: UM.Theme.getSize("sidebar_header").height
|
||||
onClicked: monitoringPrint = false
|
||||
iconSource: UM.Theme.getIcon("tab_settings");
|
||||
checkable: true
|
||||
checked: true
|
||||
exclusiveGroup: sidebarHeaderBarGroup
|
||||
|
||||
style: UM.Theme.styles.sidebar_header_tab
|
||||
}
|
||||
Button
|
||||
{
|
||||
width: (parent.width - UM.Theme.getSize("default_margin").width) / 2
|
||||
height: UM.Theme.getSize("sidebar_header").height
|
||||
onClicked: monitoringPrint = true
|
||||
iconSource: {
|
||||
if(!printerConnected)
|
||||
{
|
||||
return UM.Theme.getIcon("tab_monitor")
|
||||
} else if(Cura.MachineManager.printerOutputDevices[0].jobState == "paused")
|
||||
{
|
||||
return UM.Theme.getIcon("tab_monitor_paused")
|
||||
} else if (Cura.MachineManager.printerOutputDevices[0].jobState != "error")
|
||||
{
|
||||
return UM.Theme.getIcon("tab_monitor_connected")
|
||||
}
|
||||
}
|
||||
checkable: true
|
||||
exclusiveGroup: sidebarHeaderBarGroup
|
||||
|
||||
style: UM.Theme.styles.sidebar_header_tab
|
||||
}
|
||||
ExclusiveGroup { id: sidebarHeaderBarGroup }
|
||||
}
|
||||
Button
|
||||
{
|
||||
width: (parent.width - UM.Theme.getSize("default_margin").width) / 2
|
||||
height: 50
|
||||
onClicked: monitoringPrint = true
|
||||
iconSource: UM.Theme.getIcon(machineMonitorIcon)
|
||||
style: UM.Theme.styles.tool_button
|
||||
checkable: true
|
||||
exclusiveGroup: settingAndMonitorButtonsGroup
|
||||
}
|
||||
ExclusiveGroup { id: settingAndMonitorButtonsGroup }
|
||||
}
|
||||
|
||||
SidebarHeader {
|
||||
|
|
@ -112,7 +119,7 @@ Rectangle
|
|||
width: parent.width
|
||||
height: totalHeightHeader
|
||||
|
||||
anchors.top: settingAndMonitorButtons.bottom
|
||||
anchors.top: sidebarHeaderBar.bottom
|
||||
anchors.topMargin: UM.Theme.getSize("default_margin").height
|
||||
|
||||
onShowTooltip: base.showTooltip(item, location, text)
|
||||
|
|
@ -352,7 +359,7 @@ Rectangle
|
|||
height: UM.Theme.getSize("sidebar_lining").height
|
||||
color: UM.Theme.getColor("sidebar_lining")
|
||||
anchors.bottom: saveButton.top
|
||||
anchors.bottomMargin: UM.Theme.getSize("default_margin").height
|
||||
anchors.bottomMargin: UM.Theme.getSize("default_margin").height
|
||||
}
|
||||
|
||||
SaveButton
|
||||
|
|
|
|||
|
|
@ -1,12 +1,75 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="19px" height="19px" viewBox="0 0 19 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
|
||||
<!-- Generator: Sketch 3.4.4 (17249) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>Fill 1 Copy 3</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
|
||||
<g id="HIG" sketch:type="MSArtboardGroup" transform="translate(-718.000000, -2432.000000)" fill="#FFFFFF">
|
||||
<path d="M718,2432 L737,2432 L737,2432.90476 L718,2432.90476 L718,2432 L718,2432 Z M718,2450.09524 L719.737762,2450.09524 L721.464456,2449.19048 L733.599225,2449.19048 L735.296978,2450.09524 L737,2450.09524 L737,2451 L735.298343,2451 L733.599225,2450.09524 L721.463296,2450.09524 L719.737762,2450.99006 L718,2451 L718,2450.09524 L718,2450.09524 Z M736.136364,2432.90476 L737,2432.90476 L737,2450.09524 L736.136364,2450.09524 L736.136364,2432.90476 L736.136364,2432.90476 Z M718,2432.90476 L718.863636,2432.90476 L718.863636,2450.09524 L718,2450.09524 L718,2432.90476 L718,2432.90476 Z M720.590909,2434.71429 L734.409091,2434.71429 L734.409091,2447.38095 L720.590909,2447.38095 L720.590909,2434.71429 L720.590909,2434.71429 Z M721.454545,2435.61905 L733.545455,2435.61905 L733.545455,2446.47619 L721.454545,2446.47619 L721.454545,2435.61905 L721.454545,2435.61905 Z M725.772727,2435.61905 L729.227273,2435.61905 L729.227273,2438.33333 L725.772727,2438.33333 L725.772727,2435.61905 L725.772727,2435.61905 Z M723.181818,2445.57143 L731.818182,2445.57143 L731.818182,2446.47619 L723.181818,2446.47619 L723.181818,2445.57143 L723.181818,2445.57143 Z M726.636364,2438.33333 L728.363636,2438.33333 L728.363636,2439.2381 L726.636364,2439.2381 L726.636364,2438.33333 L726.636364,2438.33333 Z" id="Fill-1-Copy-3" sketch:type="MSShapeGroup"></path>
|
||||
</g>
|
||||
<svg
|
||||
xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
width="30"
|
||||
height="30"
|
||||
viewBox="0 0 30 30"
|
||||
version="1.1"
|
||||
id="svg2"
|
||||
inkscape:version="0.91 r13725"
|
||||
sodipodi:docname="tab_monitor.svg">
|
||||
<metadata
|
||||
id="metadata15">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title>Fill 1 Copy 3</dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<sodipodi:namedview
|
||||
pagecolor="#000000"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1"
|
||||
objecttolerance="10"
|
||||
gridtolerance="10"
|
||||
guidetolerance="10"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-width="769"
|
||||
inkscape:window-height="716"
|
||||
id="namedview13"
|
||||
showgrid="false"
|
||||
showborder="true"
|
||||
inkscape:zoom="12.421053"
|
||||
inkscape:cx="19.963695"
|
||||
inkscape:cy="9.5"
|
||||
inkscape:window-x="549"
|
||||
inkscape:window-y="180"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="svg2" />
|
||||
<!-- Generator: Sketch 3.4.4 (17249) - http://www.bohemiancoding.com/sketch -->
|
||||
<title
|
||||
id="title4">Fill 1 Copy 3</title>
|
||||
<desc
|
||||
id="desc6">Created with Sketch.</desc>
|
||||
<defs
|
||||
id="defs8" />
|
||||
<g
|
||||
id="Page-1"
|
||||
sketch:type="MSPage"
|
||||
style="fill:none;fill-rule:evenodd;stroke:none;stroke-width:1"
|
||||
transform="matrix(1.3157895,0,0,1.3157895,2.5,2.4999995)">
|
||||
<g
|
||||
id="HIG"
|
||||
sketch:type="MSArtboardGroup"
|
||||
transform="translate(-718,-2432)"
|
||||
style="fill:#ffffff">
|
||||
<path
|
||||
d="m 718,2432 19,0 0,0.9048 -19,0 0,-0.9048 0,0 z m 0,18.0952 1.73776,0 1.7267,-0.9047 12.13477,0 1.69775,0.9047 1.70302,0 0,0.9048 -1.70166,0 -1.69911,-0.9048 -12.13593,0 -1.72554,0.8949 L 718,2451 l 0,-0.9048 0,0 z m 18.13636,-17.1904 0.86364,0 0,17.1904 -0.86364,0 0,-17.1904 0,0 z m -18.13636,0 0.86364,0 0,17.1904 -0.86364,0 0,-17.1904 0,0 z m 2.59091,1.8095 13.81818,0 0,12.6667 -13.81818,0 0,-12.6667 0,0 z m 0.86364,0.9047 12.0909,0 0,10.8572 -12.0909,0 0,-10.8572 0,0 z m 4.31818,0 3.45454,0 0,2.7143 -3.45454,0 0,-2.7143 0,0 z m -2.59091,9.9524 8.63636,0 0,0.9048 -8.63636,0 0,-0.9048 0,0 z m 3.45454,-7.2381 1.72728,0 0,0.9048 -1.72728,0 0,-0.9048 0,0 z"
|
||||
id="Fill-1-Copy-3"
|
||||
sketch:type="MSShapeGroup"
|
||||
inkscape:connector-curvature="0" />
|
||||
</g>
|
||||
</svg>
|
||||
</g>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 2 KiB After Width: | Height: | Size: 2.8 KiB |
|
|
@ -1,44 +1,75 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg [
|
||||
<!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
|
||||
<!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
|
||||
<!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
|
||||
<!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
|
||||
<!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
|
||||
<!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
|
||||
<!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
|
||||
<!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">
|
||||
]>
|
||||
<svg version="1.2" baseProfile="tiny" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
|
||||
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 30 30"
|
||||
xml:space="preserve">
|
||||
<switch>
|
||||
<foreignObject requiredExtensions="&ns_ai;" x="0" y="0" width="1" height="1">
|
||||
<i:pgfRef xlink:href="#adobe_illustrator_pgf">
|
||||
</i:pgfRef>
|
||||
</foreignObject>
|
||||
<g i:extraneous="self">
|
||||
<g id="frame_30x30" display="none">
|
||||
<rect display="inline" width="30" height="30"/>
|
||||
</g>
|
||||
<g id="frame_24x24" display="none">
|
||||
<rect x="3" y="3" display="inline" fill="#FFFFFF" width="24" height="24"/>
|
||||
</g>
|
||||
<g id="icon" fill="#FFFFFF">
|
||||
<g>
|
||||
<rect x="2.994" y="26" width="24" height="1"/>
|
||||
<g>
|
||||
<polygon points="22.994,16.137 16.494,16.137 16.494,15.136 21.994,15.136 21.994,12.894 22.994,12.894 "/>
|
||||
<rect x="6.994" y="18.758" width="16" height="1"/>
|
||||
</g>
|
||||
<rect x="4.994" y="22.379" width="20" height="1"/>
|
||||
<path d="M22.5,1.571L22.5,1.571C22.5,1.571,22.512,1.563,22.5,1.571L22.5,1.571h-0.018c0,0-6.148,0-6.037,0v3.744
|
||||
c0,0,2.982,4.857,5.793,5.124c0.041,0.004,0.08,0.004,0.119,0.01c0.043,0.002,0.084,0.006,0.125,0.006h0.012H22.5
|
||||
c0.047,0,0.086-0.004,0.129-0.006c0.033-0.006,0.082-0.006,0.117-0.01c2.812-0.267,5.797-5.124,5.797-5.124V1.571
|
||||
C28.652,1.571,22.5,1.571,22.5,1.571"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</switch>
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
width="30"
|
||||
height="30"
|
||||
viewBox="0 0 30 30"
|
||||
version="1.1"
|
||||
id="svg2"
|
||||
inkscape:version="0.91 r13725"
|
||||
sodipodi:docname="tab_settings.svg">
|
||||
<metadata
|
||||
id="metadata15">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title>Rectangle 2365 Copy 3</dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<sodipodi:namedview
|
||||
pagecolor="#000000"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1"
|
||||
objecttolerance="10"
|
||||
gridtolerance="10"
|
||||
guidetolerance="10"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-width="1052"
|
||||
inkscape:window-height="981"
|
||||
id="namedview13"
|
||||
showgrid="false"
|
||||
inkscape:zoom="12.421053"
|
||||
inkscape:cx="8.5"
|
||||
inkscape:cy="9.5"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="svg2" />
|
||||
<!-- Generator: Sketch 3.4.4 (17249) - http://www.bohemiancoding.com/sketch -->
|
||||
<title
|
||||
id="title4">Rectangle 2365 Copy 3</title>
|
||||
<desc
|
||||
id="desc6">Created with Sketch.</desc>
|
||||
<defs
|
||||
id="defs8" />
|
||||
<g
|
||||
id="Page-1"
|
||||
sketch:type="MSPage"
|
||||
style="fill:#ffffff;fill-rule:evenodd;stroke:none;stroke-width:1"
|
||||
transform="matrix(1.3157895,0,0,1.3157895,3.816,2.4999995)">
|
||||
<g
|
||||
id="HIG"
|
||||
sketch:type="MSArtboardGroup"
|
||||
transform="translate(-427,-2432)"
|
||||
style="fill:#ffffff">
|
||||
<path
|
||||
d="m 436,2450 8,0 0,1 -8,0 0,-1 z m 0,-2 7,0 0,1 -7,0 0,-1 z m 0,-2 6,0 0,1 -6,0 0,-1 z m 0,-2 5,0 0,1 -5,0 0,-1 z m 0,-2 4,0 0,1 -4,0 0,-1 z m 0,-2 3,0 0,1 -3,0 0,-1 z m 0,-2 2,0 0,1 -2,0 0,-1 z m 0,-2 4,0 0,1 -4,0 0,-1 z m 0,-2 6,0 0,1 -6,0 0,-1 z m 0,-2 8,0 0,1 -8,0 0,-1 z m -9,0 6,6.5 -6,12.5 8,0 0,-19 -8,0 z"
|
||||
id="Rectangle-2365-Copy-3"
|
||||
sketch:type="MSShapeGroup"
|
||||
style="fill:#ffffff"
|
||||
inkscape:connector-curvature="0" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 2 KiB After Width: | Height: | Size: 2.5 KiB |
|
|
@ -43,6 +43,56 @@ QtObject {
|
|||
}
|
||||
}
|
||||
|
||||
property Component sidebar_header_tab: Component {
|
||||
ButtonStyle {
|
||||
background: Item {
|
||||
implicitWidth: Theme.getSize("button").width;
|
||||
implicitHeight: Theme.getSize("button").height;
|
||||
|
||||
Rectangle {
|
||||
id: buttonFace;
|
||||
|
||||
anchors.fill: parent;
|
||||
property bool down: control.pressed || (control.checkable && control.checked);
|
||||
|
||||
color: {
|
||||
if(control.pressed || (control.checkable && control.checked)) {
|
||||
return Theme.getColor("sidebar_header_active");
|
||||
} else if(control.hovered) {
|
||||
return Theme.getColor("sidebar_header_hover");
|
||||
} else {
|
||||
return Theme.getColor("sidebar_header_bar");
|
||||
}
|
||||
}
|
||||
Behavior on color { ColorAnimation { duration: 50; } }
|
||||
|
||||
Rectangle {
|
||||
id: underline;
|
||||
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.bottom: parent.bottom
|
||||
height: UM.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 {
|
||||
Image {
|
||||
anchors.centerIn: parent;
|
||||
opacity: !control.enabled ? 0.2 : 1.0
|
||||
source: control.iconSource;
|
||||
width: Theme.getSize("button_icon").width;
|
||||
height: Theme.getSize("button_icon").height;
|
||||
|
||||
sourceSize: Theme.getSize("button_icon")
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
property Component tool_button: Component {
|
||||
ButtonStyle {
|
||||
background: Item {
|
||||
|
|
|
|||
|
|
@ -56,6 +56,10 @@
|
|||
|
||||
"error": [255, 140, 0, 255],
|
||||
"sidebar_header_bar": [24, 41, 77, 255],
|
||||
"sidebar_header_active": [70, 84, 113, 255],
|
||||
"sidebar_header_hover": [24, 41, 77, 255],
|
||||
"sidebar_header_highlight": [12, 169, 227, 255],
|
||||
"sidebar_header_highlight_hover": [255, 255, 255, 255],
|
||||
"sidebar_lining": [245, 245, 245, 255],
|
||||
|
||||
"button": [24, 41, 77, 255],
|
||||
|
|
@ -166,6 +170,7 @@
|
|||
|
||||
"sidebar": [35.0, 10.0],
|
||||
"sidebar_header": [0.0, 4.0],
|
||||
"sidebar_header_highlight": [0.5, 0.5],
|
||||
"sidebar_header_mode_toggle": [0.0, 2.0],
|
||||
"sidebar_lining": [0.5, 0.5],
|
||||
"sidebar_setup": [0.0, 2.0],
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue