From 767e7a7f5acfa6d539a36bea2874c2f6dcf8009c Mon Sep 17 00:00:00 2001 From: Khushboo-dev-cpp <60327365+Khushboo-dev-cpp@users.noreply.github.com> Date: Wed, 27 Jul 2022 18:29:44 +0200 Subject: [PATCH] fix(StatusModal): Adapt the status modal to have a user defined background color (#807) Add a new color for StatusFloatingButtonSelector --- .../StatusFloatingButtonsSelector.qml | 3 +- .../src/StatusQ/Core/Theme/StatusColors.qml | 4 ++- .../StatusQ/Core/Theme/StatusDarkTheme.qml | 2 ++ .../StatusQ/Core/Theme/StatusLightTheme.qml | 2 ++ .../src/StatusQ/Core/Theme/ThemePalette.qml | 2 ++ ui/StatusQ/src/StatusQ/Popups/StatusModal.qml | 36 ++++++++----------- 6 files changed, 26 insertions(+), 23 deletions(-) diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusFloatingButtonsSelector.qml b/ui/StatusQ/src/StatusQ/Controls/StatusFloatingButtonsSelector.qml index cf9ae84d24..c6d9ac5ae9 100644 --- a/ui/StatusQ/src/StatusQ/Controls/StatusFloatingButtonsSelector.qml +++ b/ui/StatusQ/src/StatusQ/Controls/StatusFloatingButtonsSelector.qml @@ -107,7 +107,8 @@ Row { bottomPadding: 0 defaultLeftPadding: 4 defaultRightPadding: 4 - normalColor: "transparent" + hoverColor: Theme.palette.statusFloatingButtonHighlight + normalColor: Theme.palette.baseColor3 icon.name: "more" icon.background.color: "transparent" onClicked: popupMenu.popup(parent.x, y + height + 8) diff --git a/ui/StatusQ/src/StatusQ/Core/Theme/StatusColors.qml b/ui/StatusQ/src/StatusQ/Core/Theme/StatusColors.qml index 66c3feb786..6370711990 100644 --- a/ui/StatusQ/src/StatusQ/Core/Theme/StatusColors.qml +++ b/ui/StatusQ/src/StatusQ/Core/Theme/StatusColors.qml @@ -62,7 +62,9 @@ QtObject { 'violet': '#D37EF4', 'yellow': '#FFCA0F', - 'yellow2': '#EAD27B' + 'yellow2': '#EAD27B', + + 'blueHijab': '#CDF2FB' } } diff --git a/ui/StatusQ/src/StatusQ/Core/Theme/StatusDarkTheme.qml b/ui/StatusQ/src/StatusQ/Core/Theme/StatusDarkTheme.qml index ff48d1115b..ad258137b1 100644 --- a/ui/StatusQ/src/StatusQ/Core/Theme/StatusDarkTheme.qml +++ b/ui/StatusQ/src/StatusQ/Core/Theme/StatusDarkTheme.qml @@ -147,6 +147,8 @@ ThemePalette { miscColor11: getColor('yellow2') miscColor12: getColor('green6') + statusFloatingButtonHighlight: getColor('blue4', 0.3) + userCustomizationColors: [ "#AAC6FF", "#887AF9", diff --git a/ui/StatusQ/src/StatusQ/Core/Theme/StatusLightTheme.qml b/ui/StatusQ/src/StatusQ/Core/Theme/StatusLightTheme.qml index 7a4e0a9549..230d45e101 100644 --- a/ui/StatusQ/src/StatusQ/Core/Theme/StatusLightTheme.qml +++ b/ui/StatusQ/src/StatusQ/Core/Theme/StatusLightTheme.qml @@ -145,6 +145,8 @@ ThemePalette { miscColor11: getColor('brown2') miscColor12: getColor('green5') + statusFloatingButtonHighlight: getColor('blueHijab') + userCustomizationColors: [ "#2946C4", "#887AF9", diff --git a/ui/StatusQ/src/StatusQ/Core/Theme/ThemePalette.qml b/ui/StatusQ/src/StatusQ/Core/Theme/ThemePalette.qml index 262a62e53e..ad2f966d78 100644 --- a/ui/StatusQ/src/StatusQ/Core/Theme/ThemePalette.qml +++ b/ui/StatusQ/src/StatusQ/Core/Theme/ThemePalette.qml @@ -90,6 +90,8 @@ QtObject { property color miscColor11 property color miscColor12 + property color statusFloatingButtonHighlight + property var userCustomizationColors: [] property var identiconRingColors: [] diff --git a/ui/StatusQ/src/StatusQ/Popups/StatusModal.qml b/ui/StatusQ/src/StatusQ/Popups/StatusModal.qml index ae0c144afa..c3632890e4 100644 --- a/ui/StatusQ/src/StatusQ/Popups/StatusModal.qml +++ b/ui/StatusQ/src/StatusQ/Popups/StatusModal.qml @@ -54,20 +54,18 @@ import "statusModal" as Spares // Deprecation annotations come with Qt6.2 // @Deprecated { reason: "Use StatusDialog instead, see reasoning: https://github.com/status-im/StatusQ/issues/720" } QC.Popup { - id: statusModal + id: root /*! \qmlproperty advancedHeader This property represents the item loaded in header loader. Can be used to read values from the component assigned to the loader. - \endqml */ property alias advancedHeader: advancedHeader.item /*! \qmlproperty advancedHeader This property represents the item loaded in footer loader. Can be used to read values from the component assigned to the loader. - \endqml */ property alias advancedFooter: advancedFooter.item /*! @@ -130,7 +128,6 @@ QC.Popup { \qmlproperty headerActionButton This property lets the user add a button to the header of the Modal. This does not apply to the advanced header! - \endqml */ property alias headerActionButton: headerImpl.actionButton @@ -138,63 +135,59 @@ QC.Popup { \qmlproperty header type: StatusModalHeaderSettings This property exposes the different properties of the standard header. - \endqml */ property StatusModalHeaderSettings header: StatusModalHeaderSettings {} /*! \qmlproperty rightButtons This property helps user assign the right buttons on the footer. This doesn't not apply to the advanced footer! - \endqml */ property alias rightButtons: footerImpl.rightButtons /*! \qmlproperty rightButtons This property helps user assign the left buttons on the footer. This doesn't not apply to the advanced footer! - \endqml */ property alias leftButtons: footerImpl.leftButtons /*! \qmlproperty showHeader This property to decides whether the standard header is shown. default value is true - \endqml */ property bool showHeader: true /*! \qmlproperty showHeader This property to decides whether the standard footer is shown. default value is true - \endqml */ property bool showFooter: true /*! \qmlproperty showAdvancedHeader This property to decides whether the advanced header is shown. default value is false. - \endqml */ property bool showAdvancedHeader: false /*! \qmlproperty showAdvancedFooter This property decides whether the advanced footer is shown. default value is false. - \endqml */ property bool showAdvancedFooter: false /*! \qmlproperty hasCloseButton This property decides whether the standard header has a close button.s - \endqml */ property alias hasCloseButton: headerImpl.hasCloseButton /*! \qmlproperty hasFloatingButtons This property decides whether the advanced header has floating buttons on top of the Modal - \endqml */ property bool hasFloatingButtons: false + /*! + \qmlproperty color backgroundColor + This property decides the modal background color + */ + property string backgroundColor: Theme.palette.statusModal.backgroundColor signal editButtonClicked() signal headerImageClicked() @@ -219,7 +212,7 @@ QC.Popup { } background: Rectangle { - color: Theme.palette.statusModal.backgroundColor + color: root.backgroundColor radius: 8 Spares.StatusModalHeader { @@ -227,7 +220,7 @@ QC.Popup { anchors.top: parent.top width: visible ? parent.width : 0 - visible: statusModal.showHeader + visible: root.showHeader title: header.title titleElide: header.titleElide subTitle: header.subTitle @@ -238,9 +231,9 @@ QC.Popup { headerImageEditable: header.headerImageEditable editable: header.editable - onEditButtonClicked: statusModal.editButtonClicked() - onHeaderImageClicked: statusModal.headerImageClicked() - onClose: statusModal.close() + onEditButtonClicked: root.editButtonClicked() + onHeaderImageClicked: root.headerImageClicked() + onClose: root.close() } Loader { @@ -248,21 +241,22 @@ QC.Popup { anchors.top: parent.top anchors.topMargin: hasFloatingButtons ? -18 - height : 0 width: visible ? parent.width : 0 - active: statusModal.showAdvancedHeader + active: root.showAdvancedHeader } Spares.StatusModalFooter { id: footerImpl anchors.bottom: parent.bottom width: visible ? parent.width : 0 - showFooter: statusModal.showFooter + showFooter: root.showFooter + visible: root.showFooter } Loader { id: advancedFooter anchors.bottom: parent.bottom width: visible ? parent.width : 0 - active: statusModal.showAdvancedFooter + active: root.showAdvancedFooter } } }