Skip to content

Commit 6ceb058

Browse files
AIIXAIIX
authored
Implement ColorSchemes and Settings UI Update (#97)
1 parent 282718d commit 6ceb058

9 files changed

+516
-51
lines changed

‎mycroft/gui/interfaces/smartspeaker.py

+6
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,8 @@ def bind(self):
3232
self.handle_device_developer_disable_dash)
3333
self.register_handler("mycroft.device.show.idle",
3434
self.handle_show_homescreen)
35+
self.register_handler("mycroft.device.settings.customize",
36+
self.handle_device_customize_settings)
3537

3638
def handle_device_settings(self, message):
3739
""" Display device settings page. """
@@ -92,5 +94,9 @@ def update_device_dashboard_status(self, message):
9294
self["dashboard_user"] = ""
9395
self["dashboard_password"] = ""
9496

97+
def handle_device_customize_settings(self, message):
98+
self['state'] = 'settings/customize_settings'
99+
self.show_page("SYSTEM_AdditionalSettings.qml", override_idle=True)
100+
95101
def handle_get_dash_status(self):
96102
self.bus.emit(Message("ovos.PHAL.dashboard.get.status"))

‎mycroft/res/ui/SYSTEM_AdditionalSettings.qml

+8
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,24 @@ import QtQuick 2.4
33
import QtQuick.Controls 2.0
44
import org.kde.kirigami 2.5 as Kirigami
55
import Mycroft 1.0 as Mycroft
6+
import QtGraphicalEffects 1.12
67

78
Mycroft.Delegate {
89
id: mainLoaderView
910

11+
background: Rectangle {
12+
color: Kirigami.Theme.backgroundColor
13+
opacity: 0.6
14+
z: 1
15+
}
16+
1017
property var pageToLoad: sessionData.state
1118
property var idleScreenList: sessionData.idleScreenList
1219
property var activeIdle: sessionData.selectedScreen
1320

1421
contentItem: Loader {
1522
id: rootLoader
23+
z: 2
1624
}
1725

1826
onPageToLoadChanged: {

‎mycroft/res/ui/settings/SettingsModel.qml

+6
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,12 @@ ListModel {
1313
settingEvent: "mycroft.device.settings.homescreen"
1414
settingCall: "show homescreen settings"
1515
}
16+
ListElement {
17+
settingIcon: "images/paint.svg"
18+
settingName: "Customize"
19+
settingEvent: "mycroft.device.settings.customize"
20+
settingCall: ""
21+
}
1622
ListElement {
1723
settingIcon: "images/ssh.svg"
1824
settingName: "Enable SSH"

‎mycroft/res/ui/settings/customize_settings.qml

+277
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,277 @@
1+
/*
2+
* Copyright 2018 Aditya Mehra <[email protected]>
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*
16+
*/
17+
18+
import QtQuick.Layouts 1.4
19+
import QtQuick 2.4
20+
import QtQuick.Controls 2.11
21+
import org.kde.kirigami 2.11 as Kirigami
22+
import org.kde.plasma.core 2.0 as PlasmaCore
23+
import Mycroft 1.0 as Mycroft
24+
import OVOSPlugin 1.0 as OVOSPlugin
25+
import QtGraphicalEffects 1.12
26+
27+
Item {
28+
id: customizeSettingsView
29+
anchors.fill: parent
30+
property var colorSchemeModel
31+
property var setColorScheme
32+
33+
Component.onCompleted: {
34+
OVOSPlugin.Configuration.updateSchemeList();
35+
colorSchemeModel = OVOSPlugin.Configuration.getSchemeList();
36+
colorSchemesView.model = colorSchemeModel.schemes;
37+
setColorScheme = OVOSPlugin.Configuration.getSelectedSchemeName();
38+
console.log(setColorScheme);
39+
}
40+
41+
Connections {
42+
target: OVOSPlugin.Configuration
43+
onSchemeChanged: {
44+
setColorScheme = OVOSPlugin.Configuration.getSelectedSchemeName();
45+
}
46+
}
47+
48+
Item {
49+
id: topArea
50+
anchors.left: parent.left
51+
anchors.right: parent.right
52+
anchors.top: parent.top
53+
height: Kirigami.Units.gridUnit * 2
54+
55+
Kirigami.Heading {
56+
id: customizeSettingPageTextHeading
57+
level: 1
58+
wrapMode: Text.WordWrap
59+
anchors.centerIn: parent
60+
font.bold: true
61+
text: "Customize Settings"
62+
color: Kirigami.Theme.textColor
63+
}
64+
}
65+
66+
Item {
67+
anchors.top: topArea.bottom
68+
anchors.topMargin: Kirigami.Units.largeSpacing
69+
anchors.left: parent.left
70+
anchors.right: parent.right
71+
anchors.bottom: bottomArea.top
72+
73+
GridView {
74+
id: colorSchemesView
75+
width: parent.width
76+
height: parent.height
77+
cellWidth: parent.width / 3
78+
cellHeight: parent.height / 2
79+
clip: true
80+
81+
delegate: ItemDelegate {
82+
id: parentRectDelta
83+
implicitHeight: colorSchemesView.cellHeight - (Mycroft.Units.largeSpacing * 2)
84+
implicitWidth: colorSchemesView.cellWidth - (Mycroft.Units.largeSpacing * 2)
85+
86+
background: Rectangle {
87+
color: modelData.primaryColor
88+
radius: 10
89+
}
90+
91+
Item {
92+
id: d1item
93+
anchors.top: parent.top
94+
anchors.left: parent.left
95+
anchors.right: parent.right
96+
anchors.margins: Mycroft.Units.gridUnit / 2
97+
height: parent.height * 0.70
98+
99+
GridLayout {
100+
anchors.fill: parent
101+
anchors.margins: Mycroft.Units.gridUnit / 2
102+
columns: 2
103+
104+
Rectangle {
105+
Layout.fillWidth: true
106+
Layout.fillHeight: true
107+
color: modelData.primaryColor
108+
border.width: 2
109+
border.color: Qt.darker(Kirigami.Theme.backgroundColor, 1.5)
110+
111+
Text {
112+
anchors.fill: parent
113+
anchors.margins: Mycroft.Units.gridUnit
114+
horizontalAlignment: Text.AlignHCenter
115+
verticalAlignment: Text.AlignVCenter
116+
text: "P"
117+
fontSizeMode: Text.Fit
118+
minimumPixelSize: 5
119+
font.pixelSize: 40
120+
color: Qt.darker(Kirigami.Theme.textColor, 1.5)
121+
font.bold: true
122+
}
123+
}
124+
125+
Rectangle {
126+
Layout.fillWidth: true
127+
Layout.fillHeight: true
128+
color: modelData.secondaryColor
129+
border.width: 2
130+
border.color: Qt.darker(Kirigami.Theme.backgroundColor, 1.5)
131+
132+
Text {
133+
anchors.fill: parent
134+
anchors.margins: Mycroft.Units.gridUnit
135+
horizontalAlignment: Text.AlignHCenter
136+
verticalAlignment: Text.AlignVCenter
137+
text: "S"
138+
fontSizeMode: Text.Fit
139+
minimumPixelSize: 5
140+
font.pixelSize: 40
141+
color: Qt.darker(Kirigami.Theme.textColor, 1.5)
142+
font.bold: true
143+
}
144+
}
145+
Rectangle{
146+
Layout.fillWidth: true
147+
Layout.fillHeight: true
148+
color: modelData.textColor
149+
border.width: 2
150+
border.color: Qt.darker(Kirigami.Theme.backgroundColor, 1.5)
151+
152+
Text {
153+
anchors.fill: parent
154+
anchors.margins: Mycroft.Units.gridUnit
155+
horizontalAlignment: Text.AlignHCenter
156+
verticalAlignment: Text.AlignVCenter
157+
text: "T"
158+
fontSizeMode: Text.Fit
159+
minimumPixelSize: 5
160+
font.pixelSize: 40
161+
color: Qt.darker(Kirigami.Theme.textColor, 1.5)
162+
font.bold: true
163+
}
164+
}
165+
Rectangle{
166+
Layout.fillWidth: true
167+
Layout.fillHeight: true
168+
visible: modelData.name == setColorScheme ? 1 : 0
169+
enabled: modelData.name == setColorScheme ? 1 : 0
170+
color: "transparent"
171+
172+
Kirigami.Icon {
173+
anchors.fill: parent
174+
anchors.margins: Mycroft.Units.gridUnit * 2
175+
source: Qt.resolvedUrl("images/tick.svg")
176+
color: Kirigami.Theme.textColor
177+
}
178+
}
179+
}
180+
}
181+
182+
Kirigami.Separator {
183+
id: cardSept
184+
anchors.top: d1item.bottom
185+
anchors.left: parent.left
186+
anchors.right: parent.right
187+
height: 16
188+
color: modelData.secondaryColor
189+
}
190+
191+
Item {
192+
id: d2item
193+
anchors.top: cardSept.bottom
194+
anchors.left: parent.left
195+
anchors.right: parent.right
196+
anchors.bottom: parent.bottom
197+
clip: true
198+
199+
Label {
200+
anchors.fill: parent
201+
anchors.margins: Mycroft.Units.gridUnit / 2
202+
horizontalAlignment: Text.AlignHCenter
203+
verticalAlignment: Text.AlignVCenter
204+
font.pixelSize: 20
205+
minimumPixelSize: 5
206+
fontSizeMode: Text.Fit
207+
maximumLineCount: 1
208+
text: modelData.name
209+
color: modelData.textColor
210+
elide: Text.ElideRight
211+
}
212+
}
213+
214+
onDoubleClicked: {
215+
OVOSPlugin.Configuration.setScheme(modelData.name, modelData.path)
216+
}
217+
}
218+
}
219+
}
220+
221+
Item {
222+
id: bottomArea
223+
anchors.left: parent.left
224+
anchors.right: parent.right
225+
anchors.bottom: parent.bottom
226+
height: Mycroft.Units.gridUnit * 6
227+
228+
Kirigami.Separator {
229+
id: areaSep
230+
anchors.top: parent.top
231+
anchors.left: parent.left
232+
anchors.right: parent.right
233+
color: Kirigami.Theme.highlightColor
234+
height: 2
235+
}
236+
237+
RowLayout {
238+
anchors.top: areaSep.bottom
239+
anchors.bottom: parent.bottom
240+
anchors.left: parent.left
241+
anchors.right: parent.right
242+
243+
Image {
244+
id: backIcon
245+
source: "images/back.png"
246+
Layout.preferredHeight: Kirigami.Units.iconSizes.medium
247+
Layout.preferredWidth: Kirigami.Units.iconSizes.medium
248+
249+
ColorOverlay {
250+
anchors.fill: parent
251+
source: backIcon
252+
cached: true
253+
color: Kirigami.Theme.textColor
254+
}
255+
}
256+
257+
Kirigami.Heading {
258+
level: 2
259+
wrapMode: Text.WordWrap
260+
font.bold: true
261+
color: Kirigami.Theme.textColor
262+
text: "Device Settings"
263+
verticalAlignment: Text.AlignVCenter
264+
Layout.fillWidth: true
265+
Layout.preferredHeight: Kirigami.Units.gridUnit * 2
266+
}
267+
}
268+
269+
MouseArea {
270+
anchors.fill: parent
271+
onClicked: {
272+
triggerGuiEvent("mycroft.device.settings", {})
273+
}
274+
}
275+
}
276+
}
277+

0 commit comments

Comments
 (0)