status-im/status-desktop
2
0
Fork 0
mirror of https://github.com/status-im/status-desktop.git synced 2025-02-20 02:28:56 +00:00
Code Issues Projects Releases Wiki Activity

fix: community banners UI fixes

Browse Source 
- fix spacing/padding/margins
- remove MouseAreas, they block hovering the buttons (not needed any
longer thanks to our new QQC2 buttons)
- some minor cleanups

Fixes #7366
This commit is contained in:
Lukáš Tinkl 2022-09-16 00:17:51 +02:00 committed by Lukáš Tinkl
parent d6088471b1
commit a862c0672b
4 changed files with 34 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
ui/app/AppLayouts/Chat/panels/communities/BackUpCommuntyBannerPanel.qml
View File

@ -1,5 +1,4 @@
import QtQuick 2.13 import QtQuick 2.14
import QtGraphicalEffects 1.13
import StatusQ.Core 0.1 import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1 import StatusQ.Core.Theme 0.1
@ -9,10 +8,11 @@ import StatusQ.Components 0.1
import utils 1.0 import utils 1.0
Rectangle { Rectangle {
id: root
property string communityId property string communityId
signal backupButtonClicked() signal backupButtonClicked()
id: root
height: childrenRect.height + Style.current.padding height: childrenRect.height + Style.current.padding
anchors.left: parent.left anchors.left: parent.left
anchors.leftMargin: Style.current.padding anchors.leftMargin: Style.current.padding
@ -68,13 +68,11 @@ Rectangle {
anchors.top: parent.top anchors.top: parent.top
anchors.topMargin: 48 anchors.topMargin: 48
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
font.pixelSize: 15
wrapMode: Text.WordWrap wrapMode: Text.WordWrap
anchors.right: parent.right anchors.right: parent.right
anchors.rightMargin: Style.current.xlPadding anchors.rightMargin: Style.current.xlPadding
anchors.left: parent.left anchors.left: parent.left
anchors.leftMargin: Style.current.xlPadding anchors.leftMargin: Style.current.xlPadding
color: Theme.palette.directColor1
} }
StatusButton { StatusButton {

9
ui/app/AppLayouts/Chat/panels/communities/CommunityChannelsAndCategoriesBannerPanel.qml
View File

@ -1,6 +1,4 @@
import QtQuick 2.13 import QtQuick 2.14
import QtQuick.Controls 2.13
import QtGraphicalEffects 1.13
import StatusQ.Core 0.1 import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1 import StatusQ.Core.Theme 0.1
@ -28,7 +26,7 @@ Rectangle {
radius: 16 radius: 16
color: Style.current.transparent color: Style.current.transparent
Rectangle { Rectangle {
width: 66 width: 66
height: 4 height: 4
color: Style.current.secondaryMenuBackground color: Style.current.secondaryMenuBackground
@ -74,8 +72,6 @@ Rectangle {
anchors.top: parent.top anchors.top: parent.top
anchors.topMargin: 48 anchors.topMargin: 48
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
font.pixelSize: 15
color: Theme.palette.directColor1
wrapMode: Text.WordWrap wrapMode: Text.WordWrap
anchors.right: parent.right anchors.right: parent.right
anchors.rightMargin: Style.current.xlPadding anchors.rightMargin: Style.current.xlPadding
@ -99,6 +95,7 @@ Rectangle {
text: qsTr("Add categories") text: qsTr("Add categories")
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
anchors.top: addMembersBtn.bottom anchors.top: addMembersBtn.bottom
anchors.topMargin: Style.current.halfPadding
onClicked: { onClicked: {
root.addCategoriesClicked(); root.addCategoriesClicked();

51
ui/app/AppLayouts/Chat/panels/communities/CommunityWelcomeBannerPanel.qml
View File

@ -1,10 +1,8 @@
import QtQuick 2.13 import QtQuick 2.14
import QtQuick.Controls 2.13
import QtGraphicalEffects 1.13
import StatusQ.Core 0.1 import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1 import StatusQ.Core.Theme 0.1
import StatusQ.Controls 0.1 as StatusQControls import StatusQ.Controls 0.1
import shared.panels 1.0 import shared.panels 1.0
import shared.status 1.0 import shared.status 1.0
@ -13,14 +11,7 @@ import utils 1.0
Rectangle { Rectangle {
id: root id: root
height: 220
anchors.left: parent.left
anchors.leftMargin: Style.current.padding
anchors.right: parent.right
anchors.rightMargin: Style.current.padding
border.color: Style.current.border
radius: 16
color: Style.current.transparent
property var activeCommunity property var activeCommunity
property var store property var store
property var communitySectionModule property var communitySectionModule
@ -28,16 +19,14 @@ Rectangle {
signal manageCommunityClicked() signal manageCommunityClicked()
MouseArea { height: childrenRect.height + Style.current.padding
anchors.fill: parent anchors.left: parent.left
acceptedButtons: Qt.RightButton anchors.leftMargin: Style.current.padding
propagateComposedEvents: true anchors.right: parent.right
onClicked: { anchors.rightMargin: Style.current.padding
/* Prevents sending events to the component beneath border.color: Style.current.border
if Right Mouse Button is clicked. */ radius: 16
mouse.accepted = false; color: Style.current.transparent
}
}
Rectangle { Rectangle {
width: 70 width: 70
@ -57,7 +46,7 @@ Rectangle {
height: 50 height: 50
} }
StatusQControls.StatusFlatRoundButton { StatusFlatRoundButton {
id: closeImg id: closeImg
implicitWidth: 32 implicitWidth: 32
implicitHeight: 32 implicitHeight: 32
@ -68,7 +57,7 @@ Rectangle {
icon.height: 20 icon.height: 20
icon.width: 20 icon.width: 20
icon.name: "close-circle" icon.name: "close-circle"
type: StatusQControls.StatusFlatRoundButton.Type.Tertiary type: StatusFlatRoundButton.Type.Tertiary
onClicked: { onClicked: {
let hiddenBannerIds = localAccountSensitiveSettings.hiddenCommunityWelcomeBanners || [] let hiddenBannerIds = localAccountSensitiveSettings.hiddenCommunityWelcomeBanners || []
if (hiddenBannerIds.includes(root.activeCommunity.id)) { if (hiddenBannerIds.includes(root.activeCommunity.id)) {
@ -85,8 +74,6 @@ Rectangle {
anchors.top: parent.top anchors.top: parent.top
anchors.topMargin: 60 anchors.topMargin: 60
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
font.pixelSize: 15
color: Theme.palette.directColor1
wrapMode: Text.WordWrap wrapMode: Text.WordWrap
anchors.right: parent.right anchors.right: parent.right
anchors.rightMargin: Style.current.xlPadding anchors.rightMargin: Style.current.xlPadding
@ -94,12 +81,12 @@ Rectangle {
anchors.leftMargin: Style.current.xlPadding anchors.leftMargin: Style.current.xlPadding
} }
StatusQControls.StatusButton { StatusButton {
id: addMembersBtn id: addMembersBtn
text: qsTr("Add members") text: qsTr("Add members")
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
anchors.bottom: manageBtn.top anchors.top: welcomeText.bottom
anchors.bottomMargin: Style.current.halfPadding anchors.topMargin: Style.current.padding
onClicked: Global.openPopup(Global.inviteFriendsToCommunityPopup, { onClicked: Global.openPopup(Global.inviteFriendsToCommunityPopup, {
community: root.activeCommunity, community: root.activeCommunity,
hasAddedContacts: root.hasAddedContacts, hasAddedContacts: root.hasAddedContacts,
@ -107,12 +94,12 @@ Rectangle {
}) })
} }
StatusQControls.StatusFlatButton { StatusFlatButton {
id: manageBtn id: manageBtn
text: qsTr("Manage community") text: qsTr("Manage community")
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
anchors.bottom: parent.bottom anchors.top: addMembersBtn.bottom
anchors.bottomMargin: Style.current.padding anchors.topMargin: Style.current.halfPadding
onClicked: root.manageCommunityClicked() onClicked: root.manageCommunityClicked()
} }

51
ui/app/AppLayouts/Chat/views/CommunityColumnView.qml
View File

@ -60,7 +60,7 @@ Item {
asset.isImage: true asset.isImage: true
onClicked: root.infoButtonClicked() onClicked: root.infoButtonClicked()
anchors.top: parent.top anchors.top: parent.top
anchors.topMargin: 5 anchors.topMargin: Style.current.smallPadding
anchors.left: parent.left anchors.left: parent.left
anchors.leftMargin: Style.current.halfPadding anchors.leftMargin: Style.current.halfPadding
anchors.right: (implicitWidth > parent.width - 50) ? adHocChatButton.left : undefined anchors.right: (implicitWidth > parent.width - 50) ? adHocChatButton.left : undefined
@ -377,16 +377,16 @@ Item {
spacing: Style.current.bigPadding spacing: Style.current.bigPadding
Loader { Loader {
id: emptyViewAndSuggestionsLoader
active: communityData.amISectionAdmin && active: communityData.amISectionAdmin &&
(!localAccountSensitiveSettings.hiddenCommunityWelcomeBanners || (!localAccountSensitiveSettings.hiddenCommunityWelcomeBanners ||
!localAccountSensitiveSettings.hiddenCommunityWelcomeBanners.includes(communityData.id)) !localAccountSensitiveSettings.hiddenCommunityWelcomeBanners.includes(communityData.id))
width: parent.width width: parent.width
height: { height: {
// I dont know why, the binding doesn't work well if this isn't here // I dont know why, the binding doesn't work well if this isn't here
item && item.height item && item.height
return this.active ? item.height : 0 return active ? item.height : 0
} }
sourceComponent: Component { sourceComponent: Component {
CommunityWelcomeBannerPanel { CommunityWelcomeBannerPanel {
activeCommunity: communityData activeCommunity: communityData
@ -399,21 +399,16 @@ Item {
} // Loader } // Loader
Loader { Loader {
id: channelsAndCategoriesAdminBox
active: communityData.amISectionAdmin && active: communityData.amISectionAdmin &&
(!localAccountSensitiveSettings.hiddenCommunityChannelAndCategoriesBanners || (!localAccountSensitiveSettings.hiddenCommunityChannelAndCategoriesBanners ||
!localAccountSensitiveSettings.hiddenCommunityChannelAndCategoriesBanners.includes(communityData.id)) !localAccountSensitiveSettings.hiddenCommunityChannelAndCategoriesBanners.includes(communityData.id))
width: parent.width width: parent.width
height: { height: {
// I dont know why, the binding doesn't work well if this isn't here // I dont know why, the binding doesn't work well if this isn't here
item && item.height item && item.height
return this.active ? item.height : 0 return active ? item.height : 0
} }
sourceComponent: Component { sourceComponent: Component {
Item {
width: parent.width
height: channelsAndCategoriesBanner.height
CommunityChannelsAndCategoriesBannerPanel { CommunityChannelsAndCategoriesBannerPanel {
id: channelsAndCategoriesBanner id: channelsAndCategoriesBanner
communityId: communityData.id communityId: communityData.id
@ -424,37 +419,20 @@ Item {
Global.openPopup(createCategoryPopup); Global.openPopup(createCategoryPopup);
} }
} }
MouseArea {
anchors.fill: channelsAndCategoriesBanner
acceptedButtons: Qt.RightButton
propagateComposedEvents: true
onClicked: {
/* Prevents sending events to the component beneath
if Right Mouse Button is clicked. */
mouse.accepted = false;
}
}
}
} }
} // Loader } // Loader
Loader { Loader {
id: backUpBannerLoader
active: communityData.amISectionAdmin && active: communityData.amISectionAdmin &&
(!localAccountSensitiveSettings.hiddenCommunityBackUpBanners || (!localAccountSensitiveSettings.hiddenCommunityBackUpBanners ||
!localAccountSensitiveSettings.hiddenCommunityBackUpBanners.includes(communityData.id)) !localAccountSensitiveSettings.hiddenCommunityBackUpBanners.includes(communityData.id))
width: parent.width width: parent.width
height: { height: {
// I dont know why, the binding doesn't work well if this isn't here // I dont know why, the binding doesn't work well if this isn't here
item && item.height item && item.height
active ? item.height : 0 return active ? item.height : 0
} }
sourceComponent: Component { sourceComponent: Component {
Item {
width: parent.width
height: backupBanner.height
BackUpCommuntyBannerPanel { BackUpCommuntyBannerPanel {
id: backupBanner id: backupBanner
communityId: communityData.id communityId: communityData.id
@ -465,17 +443,6 @@ Item {
}) })
} }
} }
MouseArea {
anchors.fill: backupBanner
acceptedButtons: Qt.RightButton
propagateComposedEvents: true
onClicked: {
/* Prevents sending events to the component beneath
if Right Mouse Button is clicked. */
mouse.accepted = false;
}
}
}
} }
} // Loader } // Loader
} // Column } // Column