Skip to content

Commit 5bd0686

Browse files
Khushboo-dev-cppKhushboo-dev-cpp
committed
feat(@desktop/browser): Improve incognito mode color scheme
fixes #19256
1 parent b315ad9 commit 5bd0686

File tree

19 files changed

+211
-123
lines changed

19 files changed

+211
-123
lines changed

‎storybook/qmlTests/tests/tst_DappsComboBox.qml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,8 +52,8 @@ Item {
5252
function test_dappIcon() {
5353
const icon = findChild(controlUnderTest, "dappIcon")
5454
compare(icon.icon, "dapp")
55-
compare(icon.width, 16)
56-
compare(icon.height, 16)
55+
compare(icon.width, 24)
56+
compare(icon.height, 24)
5757
compare(icon.status, Image.Ready)
5858
}
5959

‎ui/StatusQ/src/StatusQ/Core/Theme/StatusDarkTheme.qml‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -187,6 +187,12 @@ ThemePalette {
187187
property color camel: "#9F7252"
188188
property color magenta: "#BD1E56"
189189
property color yinYang: "#FFFFFF"
190-
property color purple2: "#7140FD"
190+
}
191+
192+
privacyColors: QtObject {
193+
property color primary: "#341D65"
194+
property color secondary: "#5B438E"
195+
property color tertiary: white
196+
property color tertiaryOpaque: getColor(white, 0.3)
191197
}
192198
}

‎ui/StatusQ/src/StatusQ/Core/Theme/StatusLightTheme.qml‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -187,6 +187,12 @@ ThemePalette {
187187
property color camel: "#C78F67"
188188
property color magenta: "#EC266C"
189189
property color yinYang: "#09101C"
190-
property color purple2: "#5A33CA"
190+
}
191+
192+
privacyColors: QtObject {
193+
property color primary: "#BEBBF9"
194+
property color secondary: "#D6D7F7"
195+
property color tertiary: "#201C76"
196+
property color tertiaryOpaque: getColor("#201C76", 0.3)
191197
}
192198
}

‎ui/StatusQ/src/StatusQ/Core/Theme/ThemePalette.qml‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -197,7 +197,6 @@ QtObject {
197197
property color camel
198198
property color magenta
199199
property color yinYang
200-
property color purple2
201200
}
202201

203202
readonly property var customisationColorsArray: [
@@ -228,11 +227,17 @@ QtObject {
228227

229228
property QtObject privacyModeColors: QtObject {
230229
readonly property color navBarColor: customisationColors.purple
231-
readonly property color navBarSecondaryColor: customisationColors.purple2
232230
readonly property color navButtonColor: getColor('white', 0.4)
233231
readonly property color navButtonHighlightedColor: getColor('white')
234232
}
235233

234+
property QtObject privacyColors: QtObject {
235+
property color primary
236+
property color secondary
237+
property color tertiary
238+
property color tertiaryOpaque
239+
}
240+
236241
function alphaColor(color, alpha) {
237242
let actualColor = Qt.darker(color, 1)
238243
actualColor.a = alpha

‎ui/StatusQ/src/StatusQ/Layout/StatusSectionLayout.qml‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -117,6 +117,12 @@ LayoutChooser {
117117
the header component.
118118
*/
119119
property Item headerContent
120+
/*!
121+
\qmlproperty alias StatusSectionLayout::backgroundColor
122+
This property holds color of the centeral component of
123+
the section
124+
*/
125+
property string backgroundColor: Theme.palette.statusAppLayout.rightPanelBackgroundColor
120126

121127
/*!
122128
\qmlsignal
@@ -167,6 +173,7 @@ LayoutChooser {
167173
showHeader: root.showHeader
168174
backButtonName: root.backButtonName
169175
headerContent: root.headerContent
176+
backgroundColor: root.backgroundColor
170177

171178
onBackButtonClicked: root.backButtonClicked()
172179
}
@@ -185,6 +192,7 @@ LayoutChooser {
185192
showHeader: root.showHeader
186193
backButtonName: root.backButtonName
187194
headerContent: root.headerContent
195+
backgroundColor: root.backgroundColor
188196

189197
property int currentIndexCache
190198

‎ui/StatusQ/src/StatusQ/Layout/StatusSectionLayoutLandscape.qml‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,12 @@ SplitView {
112112
*/
113113
property Item headerContent
114114

115+
/*!
116+
\qmlproperty alias StatusSectionLayoutLandscape::backgroundColor
117+
This property holds color of the centeral component of
118+
the section
119+
*/
120+
property string backgroundColor: Theme.palette.statusAppLayout.rightPanelBackgroundColor
115121

116122
/*!
117123
\qmlsignal
@@ -149,7 +155,7 @@ SplitView {
149155
SplitView.fillWidth: (!!centerPanel)
150156
SplitView.fillHeight: (!!centerPanel)
151157
background: Rectangle {
152-
color: Theme.palette.statusAppLayout.rightPanelBackgroundColor
158+
color: root.backgroundColor
153159
}
154160
contentItem: Item {
155161
LayoutItemProxy {

‎ui/StatusQ/src/StatusQ/Layout/StatusSectionLayoutPortrait.qml‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,12 @@ SwipeView {
106106
the header component.
107107
*/
108108
property Item headerContent
109-
109+
/*!
110+
\qmlproperty alias StatusSectionLayoutPortrait::backgroundColor
111+
This property holds color of the centeral component of
112+
the section
113+
*/
114+
property string backgroundColor: Theme.palette.statusAppLayout.rightPanelBackgroundColor
110115

111116
/*!
112117
\qmlsignal
@@ -149,7 +154,7 @@ SwipeView {
149154
property bool inView: true
150155

151156
background: Rectangle {
152-
color: backgroundColor || Theme.palette.statusAppLayout.rightPanelBackgroundColor
157+
color: backgroundColor || root.backgroundColor
153158
}
154159
onInViewChanged: {
155160
// If the panel is not in view, we need to remove it from the swipe view
@@ -185,7 +190,7 @@ SwipeView {
185190

186191
BaseProxyPanel {
187192
id: centerPanelBase
188-
backgroundColor: Theme.palette.statusAppLayout.rightPanelBackgroundColor
193+
backgroundColor: root.backgroundColor
189194
implicitIndex: 1
190195
inView: !!root.centerPanel
191196
target: ColumnLayout {

‎ui/app/AppLayouts/Browser/BrowserLayout.qml‎

Lines changed: 18 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -192,6 +192,7 @@ StatusSectionLayout {
192192
}
193193
}
194194

195+
backgroundColor: Theme.palette.statusAppNavBar.backgroundColor
195196
centerPanel: Rectangle {
196197
id: browserWindow
197198
anchors.fill: parent
@@ -240,11 +241,9 @@ StatusSectionLayout {
240241
onDisconnectDapp: function(dappUrl) {
241242
connectorBridge.disconnect(dappUrl)
242243
}
243-
onAddNewFavoriteClicked: function(xPos) {
244+
onAddNewFavoriteClicked: function() {
244245
Global.openPopup(addFavoriteModal,
245246
{
246-
x: xPos - 30,
247-
y: browserHeader.y + browserHeader.height + 4,
248247
modifiyModal: !!browserHeader.currentFavorite,
249248
toolbarMode: true,
250249
ogUrl: !!browserHeader.currentFavorite ? browserHeader.currentFavorite.url : _internal.currentWebView.url,
@@ -271,7 +270,6 @@ StatusSectionLayout {
271270
id: tabs
272271
anchors.top: parent.top
273272
anchors.bottom: devToolsView.top
274-
anchors.bottomMargin: browserHeader.height
275273
anchors.left: parent.left
276274
anchors.right: parent.right
277275
z: 50
@@ -374,9 +372,12 @@ StatusSectionLayout {
374372

375373
BrowserSettingsMenu {
376374
id: settingsMenu
377-
x: parent.width - width
378-
y: browserHeader.y + browserHeader.height
379-
isIncognito: _internal.currentWebView && _internal.currentWebView.profile === connectorBridge.otrProfile
375+
376+
parent: browserHeader
377+
x: parent.width - width - Theme.halfPadding
378+
y: browserHeader.height + 4
379+
380+
incognitoMode: _internal.currentWebView && _internal.currentWebView.profile === connectorBridge.otrProfile
380381
zoomFactor: _internal.currentWebView ? _internal.currentWebView.zoomFactor : 1
381382
onAddNewTab: _internal.addNewTab()
382383
onAddNewDownloadTab: _internal.addNewDownloadTab()
@@ -418,11 +419,13 @@ StatusSectionLayout {
418419
Component {
419420
id: browserWalletMenu
420421
BrowserWalletMenu {
422+
parent: browserHeader
423+
x: browserHeader.width - width - Theme.halfPadding
424+
y: browserHeader.height + 4
425+
426+
incognitoMode: _internal.currentWebView && _internal.currentWebView.profile === connectorBridge.otrProfile
421427
browserWalletStore: root.browserWalletStore
422-
property point headerPoint: Qt.point(browserHeader.x, browserHeader.y)
423-
x: (parent.width - width - Theme.halfPadding)
424-
y: (Math.abs(browserHeader.mapFromGlobal(headerPoint).y) +
425-
browserHeader.anchors.topMargin + Theme.halfPadding)
428+
426429
onSendTriggered: (address) => root.sendToRecipientRequested(address)
427430
onAccountChanged: (newAddress) => connectorBridge.connectorManager.changeAccount(newAddress)
428431
onReload: {
@@ -437,6 +440,10 @@ StatusSectionLayout {
437440
Component {
438441
id: addFavoriteModal
439442
AddFavoriteModal {
443+
parent: browserHeader
444+
x: browserHeader.width - width - Theme.halfPadding
445+
y: browserHeader.height + 4
446+
incognitoMode: _internal.currentWebView && _internal.currentWebView.profile === connectorBridge.otrProfile
440447
bookmarksStore: root.bookmarksStore
441448
}
442449
}
@@ -508,8 +515,6 @@ StatusSectionLayout {
508515
Component {
509516
id: webEngineView
510517
BrowserWebEngineView {
511-
anchors.top: parent ? parent.top : undefined
512-
anchors.topMargin: browserHeader.height
513518
bookmarksStore: root.bookmarksStore
514519
downloadsStore: root.downloadsStore
515520
currentWebView: _internal.currentWebView

‎ui/app/AppLayouts/Browser/controls/BrowserHeaderButton.qml‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import QtQuick
2+
3+
import StatusQ.Core.Theme
4+
import StatusQ.Controls
5+
6+
StatusFlatRoundButton {
7+
id: root
8+
9+
property bool incognitoMode: false
10+
11+
// as per design
12+
implicitWidth: 40
13+
implicitHeight: 40
14+
15+
type: StatusFlatRoundButton.Type.Tertiary
16+
icon.color: root.incognitoMode ?
17+
Theme.palette.privacyColors.tertiary:
18+
hovered ? Theme.palette.primaryColor1:
19+
Theme.palette.baseColor1
20+
icon.disabledColor: root.incognitoMode ?
21+
Theme.palette.privacyColors.tertiaryOpaque:
22+
Theme.palette.baseColor2
23+
backgroundHoverColor: root.incognitoMode ?
24+
Theme.palette.privacyColors.secondary:
25+
Theme.palette.baseColor2
26+
sensor.acceptedButtons: Qt.LeftButton | Qt.RightButton
27+
}

‎ui/app/AppLayouts/Browser/controls/qmldir‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
DownloadElement 1.0 DownloadElement.qml
2+
BrowserHeaderButton 1.0 BrowserHeaderButton.qml

0 commit comments

Comments
 (0)