Skip to content

Commit 4bdb0d0

Browse files
committed
Make sidebar collapsible
1 parent cad57ab commit 4bdb0d0

8 files changed

Lines changed: 266 additions & 11 deletions

resources/qml/ExtruderTabs.qml

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import QtQuick.Controls 2.3
77
import UM 1.3 as UM
88
import Cura 1.1 as Cura
99

10-
UM.TabRow
10+
TabRow
1111
{
1212
id: tabBar
1313

@@ -36,7 +36,7 @@ UM.TabRow
3636
{
3737
id: repeater
3838
model: extrudersModel
39-
delegate: UM.TabRowButton
39+
delegate: TabRowButton
4040
{
4141
contentItem: Item
4242
{
Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
// Copyright (c) 2020 Aldo Hoeben / fieldOfView
2+
// SidebarGUIPlugin is released under the terms of the AGPLv3 or higher.
3+
4+
import QtQuick 2.7
5+
import QtQuick.Controls 2.3
6+
7+
import UM 1.3 as UM
8+
import Cura 1.1 as Cura
9+
10+
Cura.RoundedRectangle
11+
{
12+
color: mouseArea.containsMouse ? UM.Theme.getColor("action_button_hovered") : UM.Theme.getColor("action_button")
13+
border.width: UM.Theme.getSize("default_lining").width
14+
border.color: UM.Theme.getColor("lining")
15+
radius: UM.Theme.getSize("default_radius").width
16+
cornerSide: Cura.RoundedRectangle.Direction.Left
17+
18+
height: printSetupSummary.height + extruderSummary.height + 3 * UM.Theme.getSize("default_margin").height
19+
20+
Cura.PrintSetupSelectorHeader
21+
{
22+
id: printSetupSummary
23+
24+
anchors
25+
{
26+
left: parent.left
27+
right: collapseButton.left
28+
top: parent.top
29+
30+
leftMargin: UM.Theme.getSize("default_margin").width
31+
topMargin: UM.Theme.getSize("default_margin").width
32+
}
33+
}
34+
35+
UM.RecolorImage
36+
{
37+
id: collapseButton
38+
anchors
39+
{
40+
verticalCenter: printSetupSummary.verticalCenter
41+
42+
right: parent.right
43+
rightMargin: UM.Theme.getSize("default_margin").width
44+
}
45+
source: UM.Theme.getIcon("pencil")
46+
visible: source != ""
47+
width: UM.Theme.getSize("action_button_icon").width
48+
height: UM.Theme.getSize("action_button_icon").height
49+
color: UM.Theme.getColor("small_button_text")
50+
}
51+
52+
ExtruderTabs
53+
{
54+
id: extruderSummary
55+
enabled: false
56+
57+
anchors
58+
{
59+
left: parent.left
60+
right: parent.right
61+
bottom: parent.bottom
62+
63+
leftMargin: UM.Theme.getSize("default_margin").width
64+
rightMargin: UM.Theme.getSize("default_margin").width
65+
bottomMargin: UM.Theme.getSize("default_margin").width
66+
}
67+
}
68+
69+
MouseArea
70+
{
71+
id: mouseArea
72+
hoverEnabled: true
73+
anchors.fill: parent
74+
75+
onClicked:
76+
{
77+
UM.Preferences.setValue("view/settings_visible", true)
78+
}
79+
}
80+
}

resources/qml/ProfileSelector40.qml

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,29 @@ Item
3535
ModeToggleSwitch
3636
{
3737
id: modeToggleSwitch
38-
anchors.right: parent.right
38+
anchors.right: collapseButton.left
3939
anchors.rightMargin: UM.Theme.getSize("default_margin").width
4040
}
41+
42+
UM.SimpleButton
43+
{
44+
id: collapseButton
45+
anchors
46+
{
47+
top: parent.top
48+
topMargin: UM.Theme.getSize("default_margin").width
49+
50+
right: parent.right
51+
rightMargin: UM.Theme.getSize("default_margin").width
52+
}
53+
iconSource: UM.Theme.getIcon("cross1")
54+
width: UM.Theme.getSize("default_arrow").width
55+
height: UM.Theme.getSize("default_arrow").height
56+
color: UM.Theme.getColor("small_button_text")
57+
58+
onClicked:
59+
{
60+
UM.Preferences.setValue("view/settings_visible", false)
61+
}
62+
}
4163
}

resources/qml/ProfileSelector44.qml

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -179,7 +179,29 @@ Item
179179
ModeToggleSwitch
180180
{
181181
id: modeToggleSwitch
182-
anchors.right: parent.right
182+
anchors.right: collapseButton.left
183183
anchors.rightMargin: UM.Theme.getSize("default_margin").width
184184
}
185+
186+
UM.SimpleButton
187+
{
188+
id: collapseButton
189+
anchors
190+
{
191+
top: parent.top
192+
topMargin: UM.Theme.getSize("default_margin").width
193+
194+
right: parent.right
195+
rightMargin: UM.Theme.getSize("default_margin").width
196+
}
197+
iconSource: UM.Theme.getIcon("cross1")
198+
width: UM.Theme.getSize("default_arrow").width
199+
height: UM.Theme.getSize("default_arrow").height
200+
color: UM.Theme.getColor("small_button_text")
201+
202+
onClicked:
203+
{
204+
UM.Preferences.setValue("view/settings_visible", false)
205+
}
206+
}
185207
}

resources/qml/SidebarContents.qml

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -142,6 +142,10 @@ Cura.RoundedRectangle
142142
{
143143
extruderConfiguration.visible = false
144144
}
145+
else
146+
{
147+
extruderConfiguration.visible = UM.Preferences.getValue("sidebargui/expand_extruder_configuration")
148+
}
145149
}
146150
}
147151
}

resources/qml/SidebarStageMenu.qml

Lines changed: 38 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,9 @@ Item
2121
property bool isLE44
2222
property bool isLE46
2323

24+
property bool sidebarVisible: UM.Preferences.getValue("view/settings_visible")
25+
property real sidebarWidth: sidebarVisible ? printSetupSelector.width : 0
26+
2427
Component.onCompleted:
2528
{
2629
is40 = (CuraSDKVersion == "6.0.0")
@@ -69,16 +72,16 @@ Item
6972
}
7073
messageStack.anchors.horizontalCenter = undefined
7174
messageStack.anchors.left = messageStack.parent.left
72-
messageStack.anchors.leftMargin = Math.floor((base.width - printSetupSelector.width) / 2)
75+
messageStack.anchors.leftMargin = Math.floor((base.width - sidebarWidth) / 2)
7376

7477
// adjust stages menu position for sidebar
7578
stagesListContainer = mainWindowHeader.children[1] // declared as property above
7679
stagesListContainer.anchors.horizontalCenter = undefined
7780
stagesListContainer.anchors.left = stagesListContainer.parent.left
78-
stagesListContainer.anchors.leftMargin = Math.floor((base.width - printSetupSelector.width - stagesListContainer.width) / 2)
81+
stagesListContainer.anchors.leftMargin = Math.floor((base.width - sidebarWidth - stagesListContainer.width) / 2)
7982

8083
// compensate viewport for full-height sidebar
81-
base.viewportRect = Qt.rect(0, 0, (base.width - printSetupSelector.width) / base.width, 1.0)
84+
base.viewportRect = Qt.rect(0, 0, (base.width - sidebarWidth) / base.width, 1.0)
8285

8386
// make settingview take up available height
8487
var printSetupContent = printSetupSelector.contentItem
@@ -127,13 +130,26 @@ Item
127130
onWidthChanged:
128131
{
129132
// compensate viewport for full-height sidebar
130-
base.viewportRect = Qt.rect(0, 0, (base.width - printSetupSelector.width) / base.width, 1.0)
133+
base.viewportRect = Qt.rect(0, 0, (base.width - sidebarWidth) / base.width, 1.0)
131134

132135
// adjust message stack position for sidebar
133-
messageStack.anchors.leftMargin = Math.floor((base.width - printSetupSelector.width) / 2)
136+
messageStack.anchors.leftMargin = Math.floor((base.width - sidebarWidth) / 2)
134137

135138
// adjust stages menu position for sidebar
136-
stagesListContainer.anchors.leftMargin = Math.floor((base.width - printSetupSelector.width - stagesListContainer.width) / 2)
139+
stagesListContainer.anchors.leftMargin = Math.floor((base.width - sidebarWidth - stagesListContainer.width) / 2)
140+
}
141+
}
142+
143+
Connections
144+
{
145+
target: UM.Preferences
146+
onPreferenceChanged:
147+
{
148+
if (preference == "view/settings_visible")
149+
{
150+
sidebarVisible = UM.Preferences.getValue("view/settings_visible")
151+
base.onWidthChanged(base.width)
152+
}
137153
}
138154
}
139155

@@ -171,15 +187,30 @@ Item
171187
y: Math.floor(UM.Theme.getSize("stage_menu").height / 2)
172188
}
173189

190+
PrintSetupSummary
191+
{
192+
id: printSetupSummary
193+
visible: !sidebarVisible
194+
195+
width: printSetupSelector.width
196+
197+
anchors
198+
{
199+
top: parent.top
200+
right: bottomRight.right
201+
}
202+
}
203+
174204
SidebarContents
175205
{
176206
id: printSetupSidebar
207+
visible: sidebarVisible
177208

178209
anchors
179210
{
180211
top: parent.top
181212
bottom: actionRow.top
182-
bottomMargin: UM.Theme.getSize("thin_margin").height
213+
bottomMargin: actionRow.height == 0 ? 0 : UM.Theme.getSize("thin_margin").height
183214
right: bottomRight.right
184215
}
185216
}

resources/qml/TabRow.qml

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
// Copyright (c) 2020 Aldo Hoeben / fieldOfView
2+
// SidebarGUIPlugin is released under the terms of the AGPLv3 or higher.
3+
4+
// Copyright (c) 2018 Ultimaker B.V.
5+
// Uranium is released under the terms of the LGPLv3 or higher.
6+
7+
import QtQuick 2.10
8+
import QtQuick.Controls 2.3
9+
import UM 1.2 as UM
10+
11+
/*
12+
* Wrapper around TabBar that uses our theming and more sane defaults.
13+
*/
14+
TabBar
15+
{
16+
id: base
17+
18+
width: parent.width
19+
height: visible ? 40 * screenScaleFactor : 0
20+
21+
spacing: UM.Theme.getSize("narrow_margin").width //Space between the tabs.
22+
23+
background: Rectangle
24+
{
25+
width: parent.width
26+
anchors.bottom: parent.bottom
27+
height: UM.Theme.getSize("default_lining").height
28+
color: UM.Theme.getColor("lining")
29+
visible: parent.enabled
30+
}
31+
}

resources/qml/TabRowButton.qml

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
// Copyright (c) 2020 Aldo Hoeben / fieldOfView
2+
// SidebarGUIPlugin is released under the terms of the AGPLv3 or higher.
3+
4+
// Copyright (c) 2018 Ultimaker B.V.
5+
// Uranium is released under the terms of the LGPLv3 or higher.
6+
7+
import QtQuick 2.10
8+
import QtQuick.Controls 2.3
9+
import UM 1.2 as UM
10+
11+
/*
12+
* Wrapper around TabButton to use our theming and sane defaults.
13+
*/
14+
TabButton
15+
{
16+
anchors.top: parent.top
17+
height: parent.height
18+
checked: model.index == 0 //First button is checked by default.
19+
20+
background: Rectangle
21+
{
22+
radius: UM.Theme.getSize("default_radius").width
23+
border.color: UM.Theme.getColor("lining")
24+
border.width: UM.Theme.getSize("default_lining").width
25+
color: UM.Theme.getColor(parent.checked ? "main_background" : (parent.hovered ? "action_button_hovered" : "secondary"))
26+
visible: enabled
27+
28+
//Make the lining go straight down on the bottom side of the left and right sides.
29+
Rectangle
30+
{
31+
anchors.bottom: parent.bottom
32+
width: parent.width
33+
//We take almost the entire height of the tab button, since this "manual" lining has no anti-aliasing.
34+
//We can hardly prevent anti-aliasing on the border of the tab since the tabs are positioned with some spacing that is not necessarily a multiple of the number of tabs.
35+
height: parent.height - (parent.radius + parent.border.width)
36+
color: parent.border.color
37+
38+
//Don't add lining at the bottom side.
39+
Rectangle
40+
{
41+
anchors
42+
{
43+
bottom: parent.bottom
44+
bottomMargin: parent.parent.parent.checked ? 0 : parent.parent.border.width //Allow margin if tab is not selected.
45+
left: parent.left
46+
leftMargin: parent.parent.border.width
47+
right: parent.right
48+
rightMargin: parent.parent.border.width
49+
}
50+
color: parent.parent.color
51+
height: parent.height - anchors.bottomMargin
52+
}
53+
}
54+
}
55+
contentItem: Label
56+
{
57+
anchors.centerIn: parent
58+
horizontalAlignment: Text.AlignHCenter
59+
verticalAlignment: Text.AlignVCenter
60+
text: parent.text
61+
font: parent.checked ? UM.Theme.getFont("default_bold") : UM.Theme.getFont("default")
62+
color: UM.Theme.getColor("text")
63+
renderType: Text.NativeRendering
64+
}
65+
}

0 commit comments

Comments
 (0)