Skip to content

Commit 173ea7a

Browse files
committed
title bar and Left Side Drawer Fix
1 parent 257fa5b commit 173ea7a

File tree

5 files changed

+141
-86
lines changed

5 files changed

+141
-86
lines changed

Diff for: GameScreens/HomeScreen.qml

+7-5
Original file line numberDiff line numberDiff line change
@@ -61,13 +61,15 @@ ScreenPage{
6161
focus: true
6262

6363
Rectangle{
64-
height: parent.height * 0.59
64+
height: parent.height * 0.60
6565
width: 5
6666
color: "yellow"
67-
anchors.rightMargin: 5
68-
anchors.verticalCenter: parent.verticalCenter
69-
Layout.alignment: Qt.AlignRight
70-
radius: 4
67+
anchors{
68+
verticalCenter: parent.verticalCenter
69+
right: parent.right
70+
rightMargin: 10
71+
}
72+
radius: 8
7173
}
7274

7375
}

Diff for: ScreensComponents/LeftSideDrawer/DrawerItem.qml

+12-5
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,11 @@ import QtQuick 2.0
22
import QtQuick.Layouts 1.0
33
import QtQuick.Controls 2.0
44

5+
import "../../common"
6+
import "../../"
7+
import AppStyle 1.0
8+
import FontStyle 1.0
9+
510
ItemDelegate {
611
id:root
712
//
@@ -76,7 +81,11 @@ ItemDelegate {
7681
// Decide if we should highlight the item
7782
//
7883
highlighted: ListView.isCurrentItem ? !isLink (index) : false
79-
84+
background: Rectangle{
85+
color: root.hovered ? root.highlighted ? AppStyle.transparent : AppTheme.systemColor ? AppStyle.systemColorLighter : AppStyle.appColorLighter : AppStyle.transparent
86+
anchors.fill: parent
87+
radius: 8
88+
}
8089
//
8190
// Calculate height depending on the type of item that we are
8291
//
@@ -124,7 +133,7 @@ ItemDelegate {
124133

125134
Label {
126135
opacity: 0.54
127-
color: "#000000"
136+
color: AppStyle.textColor
128137
font.pixelSize: 14
129138
font.weight: Font.Medium
130139
text: hasSeparatorText (index) ? separatorText : ""
@@ -158,14 +167,12 @@ ItemDelegate {
158167
}
159168

160169
Label {
161-
opacity: 0.87
162-
font.pixelSize: 14
163170
text: itemText (index)
164171
Layout.fillWidth: true
165172
font.weight: Font.Medium
166173
verticalAlignment: Image.AlignVCenter
167174
Layout.alignment: Qt.AlignVCenter
168-
color: root.highlighted ? "white" : Qt.darkGray
175+
color: root.highlighted ? "white" : AppStyle.textColor
169176
}
170177
}
171178
}

Diff for: ScreensComponents/LeftSideDrawer/PageDrawer.qml

+37-14
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@ import QtQuick 2.0
22
import QtQuick.Layouts 1.0
33
import QtQuick.Controls 2.0
44

5+
import "../../common"
6+
import "../../"
7+
import AppStyle 1.0
8+
import FontStyle 1.0
59
Drawer {
610
id: drawer
711

@@ -18,6 +22,10 @@ Drawer {
1822

1923
property alias items: listView.model
2024
property alias index: listView.currentIndex
25+
background: Rectangle{
26+
anchors.fill: parent
27+
color: AppStyle.sideBarDarkColor
28+
}
2129

2230
onIndexChanged: {
2331
var isSpacer = false
@@ -46,19 +54,11 @@ Drawer {
4654
// Icon controls
4755
//
4856
Rectangle {
57+
id: iconRect
4958
z: 1
5059
height: 120
51-
id: iconRect
5260
Layout.fillWidth: true
53-
54-
Rectangle {
55-
anchors.fill: parent
56-
57-
Gradient {
58-
GradientStop { position: 0; color: iconBgColorLeft }
59-
GradientStop { position: 1; color: iconBgColorRight }
60-
}
61-
}
61+
color: AppStyle.sideBarDarkColor
6262

6363
RowLayout {
6464
spacing: 16
@@ -84,14 +84,12 @@ Drawer {
8484
}
8585

8686
Label {
87-
color: "#000"
8887
text: iconTitle
8988
font.weight: Font.Medium
9089
font.pixelSize: 16
9190
}
9291

9392
Label {
94-
color: "#000"
9593
opacity: 0.87
9694
text: iconSubtitle
9795
font.pixelSize: 12
@@ -112,8 +110,10 @@ Drawer {
112110

113111
Rectangle{
114112
color: "grey"
115-
width: parent.width
113+
Layout.fillWidth: true
116114
height: 1
115+
Layout.topMargin: 2
116+
Layout.bottomMargin: 5
117117
}
118118

119119
//
@@ -124,14 +124,37 @@ Drawer {
124124
id: listView
125125
currentIndex: -1
126126
Layout.fillWidth: true
127+
Layout.leftMargin: 10
128+
Layout.rightMargin: 10
127129
Layout.fillHeight: true
128130
Component.onCompleted: currentIndex = 0
129131

132+
highlight: Rectangle {
133+
width: parent.height * 0.7
134+
height: parent.height * 0.7
135+
Layout.alignment: Qt.AlignVCenter
136+
Layout.leftMargin: 10
137+
radius: 8
138+
color: AppStyle.applicationColor
139+
focus: true
140+
141+
Rectangle{
142+
height: parent.height * 0.60
143+
width: 5
144+
color: "yellow"
145+
anchors{
146+
verticalCenter: parent.verticalCenter
147+
right: parent.right
148+
rightMargin: 10
149+
}
150+
radius: 8
151+
}
152+
}
153+
130154
delegate: DrawerItem {
131155
model: items
132156
width: parent.width
133157
pageSelector: listView
134-
135158
onClicked: {
136159
if (listView.currentIndex !== index)
137160
listView.currentIndex = index

Diff for: ScreensComponents/TitleBar.qml

+77-56
Original file line numberDiff line numberDiff line change
@@ -1,76 +1,97 @@
11
import QtQuick 2.15
22
import QtQuick.Layouts 1.3
33
import QtQuick.Controls 2.5
4-
Item {
4+
5+
import "../"
6+
import AppStyle 1.0
7+
import FontStyle 1.0
8+
Pane {
59
height: 40
10+
padding: 0
611
width: parent.width
712
property int buttonWidthHeight: 30
813
property int buttonRadius: 6
914
signal homeClicked()
1015
signal settingsCliked()
1116
signal menuClicked()
1217
signal helpCliked()
13-
RowLayout{
18+
background: Rectangle{
1419
anchors.fill: parent
15-
MainButton{
16-
id:menu
17-
width: buttonWidthHeight
18-
height: buttonWidthHeight
19-
borderRadius:buttonRadius
20-
Layout.alignment: Qt.AlignVCenter && Qt.AlignLeft
21-
Layout.leftMargin: 10
22-
sourceIcon:"qrc:/Img/Icons/bars-solid.svg"
23-
iconWidth:buttonWidthHeight*0.6
24-
iconHeight:buttonWidthHeight*0.6
25-
onClicked: {
26-
menuClicked()
27-
}
28-
}
29-
Label{
30-
Layout.fillWidth: true
20+
color: AppStyle.titleBarColor
21+
}
22+
23+
ColumnLayout{
24+
anchors.fill: parent
25+
spacing: 0
26+
RowLayout{
3127
Layout.alignment: Qt.AlignVCenter
32-
}
28+
Layout.fillWidth: true
29+
MainButton{
30+
id:menu
31+
width: buttonWidthHeight
32+
height: buttonWidthHeight
33+
borderRadius:buttonRadius
34+
Layout.alignment: Qt.AlignVCenter && Qt.AlignLeft
35+
Layout.leftMargin: 10
36+
sourceIcon:"qrc:/Img/Icons/bars-solid.svg"
37+
iconWidth:buttonWidthHeight*0.6
38+
iconHeight:buttonWidthHeight*0.6
39+
onClicked: {
40+
menuClicked()
41+
}
42+
}
43+
Label{
44+
Layout.fillWidth: true
45+
Layout.alignment: Qt.AlignVCenter
46+
}
3347

34-
MainButton{
35-
id:help
36-
width: buttonWidthHeight
37-
height: buttonWidthHeight
38-
borderRadius:buttonRadius
39-
Layout.alignment: Qt.AlignVCenter && Qt.AlignRight
40-
sourceIcon:"qrc:/Img/Icons/hire-a-helper.svg"
41-
iconWidth:buttonWidthHeight*0.6
42-
iconHeight:buttonWidthHeight*0.6
43-
onClicked: {
44-
helpCliked()
48+
MainButton{
49+
id:help
50+
width: buttonWidthHeight
51+
height: buttonWidthHeight
52+
borderRadius:buttonRadius
53+
Layout.alignment: Qt.AlignVCenter && Qt.AlignRight
54+
sourceIcon:"qrc:/Img/Icons/hire-a-helper.svg"
55+
iconWidth:buttonWidthHeight*0.6
56+
iconHeight:buttonWidthHeight*0.6
57+
onClicked: {
58+
helpCliked()
59+
}
4560
}
46-
}
47-
MainButton{
48-
id:home
49-
width: buttonWidthHeight
50-
height: buttonWidthHeight
51-
borderRadius:buttonRadius
52-
Layout.alignment: Qt.AlignVCenter && Qt.AlignRight
53-
sourceIcon:"qrc:/Img/Icons/house-user-solid.svg"
54-
iconWidth:buttonWidthHeight*0.6
55-
iconHeight:buttonWidthHeight*0.6
56-
onClicked: {
57-
homeClicked()
61+
MainButton{
62+
id:home
63+
width: buttonWidthHeight
64+
height: buttonWidthHeight
65+
borderRadius:buttonRadius
66+
Layout.alignment: Qt.AlignVCenter && Qt.AlignRight
67+
sourceIcon:"qrc:/Img/Icons/house-user-solid.svg"
68+
iconWidth:buttonWidthHeight*0.6
69+
iconHeight:buttonWidthHeight*0.6
70+
onClicked: {
71+
homeClicked()
72+
}
5873
}
59-
}
60-
MainButton{
61-
id:settings
62-
width: buttonWidthHeight
63-
height: buttonWidthHeight
64-
borderRadius:buttonRadius
65-
Layout.alignment: Qt.AlignVCenter && Qt.AlignRight
66-
Layout.rightMargin: 10
67-
sourceIcon:"qrc:/Img/Icons/gear-solid.svg"
68-
iconWidth:buttonWidthHeight*0.6
69-
iconHeight:buttonWidthHeight*0.6
70-
onClicked: {
71-
settingsCliked()
74+
MainButton{
75+
id:settings
76+
width: buttonWidthHeight
77+
height: buttonWidthHeight
78+
borderRadius:buttonRadius
79+
Layout.alignment: Qt.AlignVCenter && Qt.AlignRight
80+
Layout.rightMargin: 10
81+
sourceIcon:"qrc:/Img/Icons/gear-solid.svg"
82+
iconWidth:buttonWidthHeight*0.6
83+
iconHeight:buttonWidthHeight*0.6
84+
onClicked: {
85+
settingsCliked()
86+
}
7287
}
7388
}
74-
}
7589

90+
Rectangle{
91+
color: "grey"
92+
Layout.fillWidth: true
93+
Layout.preferredHeight: 1
94+
Layout.alignment: Qt.AlignBottom
95+
}
96+
}
7697
}

Diff for: Settings/Settings.qml

+8-6
Original file line numberDiff line numberDiff line change
@@ -139,13 +139,15 @@ ApplicationWindow {
139139
focus: true
140140

141141
Rectangle{
142-
height: parent.height * 0.59
142+
height: parent.height * 0.60
143143
width: 5
144-
color:"yellow"
145-
anchors.rightMargin: 5
146-
anchors.verticalCenter: parent.verticalCenter
147-
Layout.alignment: Qt.AlignRight
148-
radius: 4
144+
color: "yellow"
145+
anchors{
146+
verticalCenter: parent.verticalCenter
147+
right: parent.right
148+
rightMargin: 10
149+
}
150+
radius: 8
149151
}
150152
}
151153

0 commit comments

Comments
 (0)