Skip to content

Commit 948696f

Browse files
Khushboo-dev-cppKhushboo-dev-cpp
committed
feat(@desktop/browser): Improve incognito mode color scheme
fixes #19256
1 parent 62ef303 commit 948696f

File tree

18 files changed

+196
-116
lines changed

18 files changed

+196
-116
lines changed

‎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 & 1 deletion
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: [
@@ -233,6 +232,13 @@ QtObject {
233232
readonly property color navButtonHighlightedColor: getColor('white')
234233
}
235234

235+
property QtObject privacyColors: QtObject {
236+
property color primary
237+
property color secondary
238+
property color tertiary
239+
property color tertiaryOpaque
240+
}
241+
236242
function alphaColor(color, alpha) {
237243
let actualColor = Qt.darker(color, 1)
238244
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 & 10 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,
@@ -374,9 +373,12 @@ StatusSectionLayout {
374373

375374
BrowserSettingsMenu {
376375
id: settingsMenu
377-
x: parent.width - width
378-
y: browserHeader.y + browserHeader.height
379-
isIncognito: _internal.currentWebView && _internal.currentWebView.profile === connectorBridge.otrProfile
376+
377+
parent: browserHeader
378+
x: parent.width - width - Theme.halfPadding
379+
y: browserHeader.height + 4
380+
381+
incognitoMode: _internal.currentWebView && _internal.currentWebView.profile === connectorBridge.otrProfile
380382
zoomFactor: _internal.currentWebView ? _internal.currentWebView.zoomFactor : 1
381383
onAddNewTab: _internal.addNewTab()
382384
onAddNewDownloadTab: _internal.addNewDownloadTab()
@@ -418,11 +420,13 @@ StatusSectionLayout {
418420
Component {
419421
id: browserWalletMenu
420422
BrowserWalletMenu {
423+
parent: browserHeader
424+
x: browserHeader.width - width - Theme.halfPadding
425+
y: browserHeader.height + 4
426+
427+
incognitoMode: _internal.currentWebView && _internal.currentWebView.profile === connectorBridge.otrProfile
421428
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)
429+
426430
onSendTriggered: (address) => root.sendToRecipientRequested(address)
427431
onAccountChanged: (newAddress) => connectorBridge.connectorManager.changeAccount(newAddress)
428432
onReload: {
@@ -437,6 +441,10 @@ StatusSectionLayout {
437441
Component {
438442
id: addFavoriteModal
439443
AddFavoriteModal {
444+
parent: browserHeader
445+
x: browserHeader.width - width - Theme.halfPadding
446+
y: browserHeader.height + 4
447+
incognitoMode: _internal.currentWebView && _internal.currentWebView.profile === connectorBridge.otrProfile
440448
bookmarksStore: root.bookmarksStore
441449
}
442450
}

‎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)