status-im
/
status-qml
mirror of
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix(StatusPopupMenu)!: Refactoring, removed custom components relationships 

Comments removed
This commit is contained in:
Igor Sirotin 2022-09-09 20:14:49 +08:00
parent ea5c83710b
commit 49c58f4763
6 changed files with 164 additions and 172 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
sandbox/pages/StatusPopupMenuPage.qml
View File

@ -22,8 +22,8 @@ GridLayout {
onClicked: complexMenu.popup() onClicked: complexMenu.popup()
} }
StatusButton { StatusButton {
id: customPopupButton
text: "Menu with custom images and icons" text: "Menu with custom images and icons"
onClicked: customMenu.popup() onClicked: customMenu.popup()
} }
@ -51,7 +51,7 @@ GridLayout {
StatusPopupMenu { StatusPopupMenu {
id: complexMenu id: complexMenu
subMenuItemIcons: [{ icon: 'info' }] // subMenuItemIcons: [{ icon: 'info' }]
StatusMenuItem { StatusMenuItem {
text: "One" text: "One"
@ -65,13 +65,10 @@ GridLayout {
assetSettings.name: "info" assetSettings.name: "info"
} }
StatusMenuItem {
text: "Three"
assetSettings.name: "info"
}
StatusPopupMenu { StatusPopupMenu {
title: "Four" title: "Two"
assetSettings.name: "info"
StatusMenuItem { StatusMenuItem {
text: "One" text: "One"
assetSettings.name: "info" assetSettings.name: "info"
@ -81,22 +78,22 @@ GridLayout {
assetSettings.name: "info" assetSettings.name: "info"
} }
} }
StatusMenuItem {
text: "Disabled"
assetSettings.name: "info"
enabled: false
}
StatusMenuItem {
text: "Danger"
type: StatusMenuItem.Type.Danger
}
} }
StatusPopupMenu { StatusPopupMenu {
id: customMenu id: customMenu
subMenuItemIcons: [
{ icon: "chat" },
{
source: "qrc:/demoapp/data/profile-image-1.jpeg"
},
{
isLetterIdenticon: true,
color: "red"
}
]
StatusMenuItem { StatusMenuItem {
text: "Anywhere" text: "Anywhere"
} }
@ -105,13 +102,14 @@ GridLayout {
StatusPopupMenu { StatusPopupMenu {
title: "Chat" title: "Chat"
assetSettings.name: "chat"
StatusMenuItem { StatusMenuItem {
text: "vitalik.eth" text: "vitalik.eth"
assetSettings.isImage: true assetSettings.isImage: true
assetSettings.imgIsIdenticon: true
assetSettings.name: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh assetSettings.name: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC" CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
assetSettings.imgIsIdenticon: true
} }
StatusMenuItem { StatusMenuItem {
@ -123,6 +121,8 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
StatusPopupMenu { StatusPopupMenu {
title: "Cryptokitties" title: "Cryptokitties"
assetSettings.isImage: true
assetSettings.name: "qrc:/demoapp/data/profile-image-1.jpeg"
StatusMenuItem { StatusMenuItem {
text: "welcome" text: "welcome"
@ -146,6 +146,8 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
StatusPopupMenu { StatusPopupMenu {
title: "Another community" title: "Another community"
assetSettings.isLetterIdenticon: true
assetSettings.bgColor: "red"
StatusMenuItem { StatusMenuItem {
text: "welcome" text: "welcome"

1
sandbox/pages/StatusSelectPage.qml
View File

@ -41,7 +41,6 @@ Column {
model: commmonModel model: commmonModel
selectMenu.delegate: StatusMenuItemDelegate { selectMenu.delegate: StatusMenuItemDelegate {
statusPopupMenu: select
action: StatusMenuItem { action: StatusMenuItem {
assetSettings.name: "filled-account" assetSettings.name: "filled-account"
text: name text: name

13
src/StatusQ/Popups/StatusMenuItem.qml
View File

@ -9,17 +9,20 @@ Action {
Normal, Normal,
Danger Danger
} }
icon.color: "transparent"
property int type: StatusMenuItem.Type.Normal property int type: StatusMenuItem.Type.Normal
property real iconRotation: 0
property StatusAssetSettings assetSettings: StatusAssetSettings { property StatusAssetSettings assetSettings: StatusAssetSettings {
width: 16 width: 18
height: 16 height: 18
color: "transparent" rotation: 0
isLetterIdenticon: false isLetterIdenticon: false
imgIsIdenticon: false imgIsIdenticon: false
color: "transparent"
name: statusMenuItem.icon.name name: statusMenuItem.icon.name
} }
property StatusFontSettings fontSettings: StatusFontSettings {} property StatusFontSettings fontSettings: StatusFontSettings {}
icon.color: "transparent"
} }

223
src/StatusQ/Popups/StatusMenuItemDelegate.qml
View File

@ -7,187 +7,164 @@ import StatusQ.Components 0.1
import StatusQ.Popups 0.1 import StatusQ.Popups 0.1
MenuItem { MenuItem {
id: statusPopupMenuItem id: root
implicitWidth: parent ? parent.width : 0 implicitWidth: parent ? parent.width : 0
implicitHeight: action.enabled ? 34 : 0 implicitHeight: menu.hideDisabledItems && !enabled ? 0 : 38
objectName: action.objectName objectName: action ? action.objectName : "StatusMenuItemDelegate"
property int subMenuIndex spacing: 4
property var statusPopupMenu: null horizontalPadding: 8
Component.onCompleted: { readonly property string logObjectName: "StatusMenuItemDelegate [%1, %2]".arg(this).arg(text)
if (!!subMenu) {
subMenuIndex = statusPopupMenu.menuItemCount QtObject {
statusPopupMenu.menuItemCount += 1 id: d
}
readonly property bool isSubMenu: !!root.subMenu
readonly property bool isStatusSubMenu: isSubMenu && (root.subMenu instanceof StatusPopupMenu)
readonly property bool subMenuOpened: isSubMenu && root.subMenu.opened
readonly property bool hasAction: !!root.action
readonly property bool isStatusAction: d.hasAction && (root.action instanceof StatusMenuItem)
readonly property bool isDangerIcon: d.isStatusAction && root.action.type === StatusMenuItem.Type.Danger
readonly property StatusAssetSettings assetSettings: d.isStatusSubMenu
? root.subMenu.assetSettings
: d.isStatusAction
? root.action.assetSettings
: d.defaultAsset
readonly property StatusFontSettings fontSettings: d.isStatusSubMenu
? root.subMenu.fontSettings
: d.isStatusAction ? root.action.fontSettings : d.defaultFontSettings
readonly property StatusAssetSettings defaultAsset: StatusAssetSettings {
width: 18
height: 18
rotation: 0
} }
action: StatusMenuItem { readonly property StatusFontSettings defaultFontSettings: StatusFontSettings {
onTriggered: { statusPopupMenu.menuItemClicked(statusPopupMenuItem.subMenuIndex); } pixelSize: 13
bold: false
italic: false
}
} }
Component { Component {
id: indicatorComponent id: indicatorIcon
Item {
implicitWidth: 24
implicitHeight: 24
StatusIcon { StatusIcon {
anchors.centerIn: parent width: d.assetSettings.width
width: { height: d.assetSettings.height
let width = statusPopupMenuItem.action && statusPopupMenuItem.action.assetSettings.width rotation: d.assetSettings.rotation
return !!width ? width : 18 icon: d.assetSettings.name
}
rotation: !!statusPopupMenuItem.action.iconRotation ? statusPopupMenuItem.action.iconRotation : 0
icon: {
if (statusPopupMenuItem.subMenu && !!statusPopupMenu.subMenuItemIcons[statusPopupMenuItem.subMenuIndex] &&
statusPopupMenu.subMenuItemIcons[statusPopupMenuItem.subMenuIndex].icon.toString() !== "") {
return statusPopupMenu.subMenuItemIcons[statusPopupMenuItem.subMenuIndex].icon;
} else if (!!statusPopupMenuItem.action && statusPopupMenuItem.action.assetSettings.name !== "") {
return statusPopupMenuItem.action.assetSettings.name;
} else if (!!statusPopupMenuItem.action.assetSettings && statusPopupMenuItem.action.assetSettings.name !== "") {
return statusPopupMenuItem.action.assetSettings.name;
} else {
return "";
}
}
color: { color: {
let c = !!statusPopupMenuItem.action.assetSettings && statusPopupMenuItem.action.assetSettings.color const c = d.assetSettings.color;
if (!Qt.colorEqual(c, "transparent"))
if (!Qt.colorEqual(c, "transparent")) { return c;
return c if (!root.enabled)
} return Theme.palette.baseColor1;
switch (statusPopupMenuItem.action.type) { if (d.isDangerIcon)
case StatusMenuItem.Type.Danger: return Theme.palette.dangerColor1;
return Theme.palette.dangerColor1 return Theme.palette.primaryColor1;
default:
return Theme.palette.primaryColor1
}
}
} }
} }
} }
Component { Component {
id: statusLetterIdenticonCmp id: indicatorLetterIdenticon
Item {
implicitWidth: 24
implicitHeight: 24
StatusLetterIdenticon { StatusLetterIdenticon {
anchors.centerIn: parent width: d.assetSettings.width
width: 16 height: d.assetSettings.height
height: 16 color: d.assetSettings.bgColor
color: { name: root.text
let subMenuItemIcon = statusPopupMenu.subMenuItemIcons[statusPopupMenuItem.subMenuIndex]
return subMenuItemIcon && subMenuItemIcon.color ? subMenuItemIcon.color : statusPopupMenuItem.action.assetSettings.bgColor
}
name: statusPopupMenuItem.text
letterSize: 11 letterSize: 11
} }
} }
}
Component { Component {
id: statusRoundImageCmp id: indicatorImage
Item {
implicitWidth: 24
implicitHeight: 24
StatusRoundedImage { StatusRoundedImage {
anchors.centerIn: parent width: d.assetSettings.width
width: statusPopupMenuItem.action.assetSettings.width height: d.assetSettings.height
height: statusPopupMenuItem.action.assetSettings.height image.source: d.assetSettings.name
image.source: statusPopupMenuItem.subMenu ? border.width: d.isSubMenu && d.assetSettings.imgIsIdenticon ? 1 : 0
statusPopupMenu.subMenuItemIcons[statusPopupMenuItem.subMenuIndex].source :
statusPopupMenuItem.action.assetSettings.name
border.width: (statusPopupMenuItem.subMenu && statusPopupMenu.subMenuItemIcons[statusPopupMenuItem.subMenuIndex].isIdenticon) ||
statusPopupMenuItem.action.assetSettings.imgIsIdenticon ? 1 : 0
border.color: Theme.palette.directColor7 border.color: Theme.palette.directColor7
} }
} }
}
indicator: Loader { indicator: Item {
x: root.mirrored ? root.width - width - root.rightPadding : root.leftPadding
y: root.topPadding + (root.availableHeight - height) / 2
implicitWidth: 24
implicitHeight: 24
visible: d.assetSettings.isLetterIdenticon
|| d.assetSettings.isImage
|| !!d.assetSettings.name
Loader {
anchors.centerIn: parent
active: parent.visible
sourceComponent: { sourceComponent: {
let subMenuItemIcon = statusPopupMenu.subMenuItemIcons && statusPopupMenu.subMenuItemIcons[parent.subMenuIndex] if (d.assetSettings.isImage)
return indicatorImage;
if ((parent.subMenu && subMenuItemIcon && subMenuItemIcon.source) || if (d.assetSettings.isLetterIdenticon)
statusPopupMenuItem.action.assetSettings && !!statusPopupMenuItem.action.assetSettings.name.toString() return indicatorLetterIdenticon;
&& statusPopupMenuItem.action.assetSettings.isImage) { return indicatorIcon;
return statusRoundImageCmp
} }
return (parent.subMenu && subMenuItemIcon && subMenuItemIcon.isLetterIdenticon) ||
(statusPopupMenuItem.action.assetSettings && statusPopupMenuItem.action.assetSettings.isLetterIdenticon) ?
statusLetterIdenticonCmp : indicatorComponent
}
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
anchors.leftMargin: 8
active: {
if (enabled) {
let hasIconSettings = !!statusPopupMenuItem.action.assetSettings.name ||
(statusPopupMenuItem.action.assetSettings &&
(!!statusPopupMenuItem.action.assetSettings.name || !!statusPopupMenuItem.action.assetSettings.isLetterIdenticon))
let hasImageSettings = statusPopupMenuItem.action.assetSettings && !!statusPopupMenuItem.action.assetSettings.name.toString()
return enabled && (parent.subMenu && !!statusPopupMenu.subMenuItemIcons[parent.subMenuIndex]) || hasIconSettings || hasImageSettings
}
return false
} }
} }
contentItem: StatusBaseText { contentItem: StatusBaseText {
anchors.left: statusPopupMenuItem.indicator.right readonly property real arrowPadding: root.subMenu && root.arrow ? root.arrow.width + root.spacing : 0
anchors.right: arrowIcon.visible ? arrowIcon.left : arrowIcon.right readonly property real indicatorPadding: root.indicator.visible ? root.indicator.width + root.spacing : 0
anchors.rightMargin: 8
anchors.leftMargin: 4 leftPadding: !root.mirrored ? indicatorPadding : arrowPadding
rightPadding: root.mirrored ? indicatorPadding : arrowPadding
horizontalAlignment: Text.AlignLeft horizontalAlignment: Text.AlignLeft
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
text: statusPopupMenuItem.text text: root.text
color: { color: !root.enabled ? Theme.palette.baseColor1
switch (statusPopupMenuItem.action.type) { : d.isDangerIcon ? Theme.palette.dangerColor1 : Theme.palette.directColor1
case StatusMenuItem.Type.Danger:
return Theme.palette.dangerColor1 font.pixelSize: d.fontSettings.pixelSize
default: font.bold: d.fontSettings.bold
return Theme.palette.directColor1 font.italic: d.fontSettings.italic
}
}
font.pixelSize: !!statusPopupMenuItem.action.fontSettings ? statusPopupMenuItem.action.fontSettings.pixelSize : 13
font.bold: !!statusPopupMenuItem.action.fontSettings ? statusPopupMenuItem.action.fontSettings.bold : false
font.italic: !!statusPopupMenuItem.action.fontSettings ? statusPopupMenuItem.action.fontSettings.italic : false
elide: Text.ElideRight elide: Text.ElideRight
visible: statusPopupMenuItem.action.enabled visible: true
} }
arrow: StatusIcon { arrow: StatusIcon {
id: arrowIcon id: arrowIcon
anchors.verticalCenter: parent.verticalCenter x: root.mirrored ? root.leftPadding : root.width - width - root.rightPadding
anchors.right: parent.right y: root.topPadding + (root.availableHeight - height) / 2
anchors.rightMargin: 8
height: 16 height: 16
visible: statusPopupMenuItem.subMenu visible: d.isSubMenu
icon: "next" icon: "next"
color: Theme.palette.directColor1 color: Theme.palette.directColor1
} }
background: Rectangle { background: Rectangle {
color: { color: {
if (statusPopupMenuItem.hovered) { if (!root.hovered && !d.subMenuOpened)
return statusPopupMenuItem.action.type === StatusMenuItem.Type.Danger ? Theme.palette.dangerColor3 : Theme.palette.statusPopupMenu.hoverBackgroundColor
}
return "transparent" return "transparent"
if (root.action.type === StatusMenuItem.Type.Danger)
return Theme.palette.dangerColor3;
return Theme.palette.statusPopupMenu.hoverBackgroundColor;
} }
} }
MouseArea { MouseArea {
id: sensor
anchors.fill: parent anchors.fill: parent
cursorShape: Qt.PointingHandCursor cursorShape: Qt.PointingHandCursor
hoverEnabled: statusPopupMenuItem.action.enabled hoverEnabled: root.enabled
onPressed: mouse.accepted = false onPressed: mouse.accepted = false
} }
} }

23
src/StatusQ/Popups/StatusPopupMenu.qml
View File

@ -10,21 +10,32 @@ import StatusQ.Popups 0.1
Menu { Menu {
id: root id: root
closePolicy: Popup.CloseOnPressOutside | Popup.CloseOnEscape closePolicy: Popup.CloseOnPressOutside | Popup.CloseOnEscape
topPadding: 8 topPadding: 8
bottomPadding: 8 bottomPadding: 8
bottomMargin: 16 bottomMargin: 16
property int menuItemCount: 0 property StatusAssetSettings assetSettings: StatusAssetSettings {
property var subMenuItemIcons: [] width: 18
height: 18
rotation: 0
isLetterIdenticon: false
isImage: false
color: "transparent"
}
property StatusFontSettings fontSettings: StatusFontSettings {}
property bool hideDisabledItems: false
property var openHandler property var openHandler
property var closeHandler property var closeHandler
dim: false
signal menuItemClicked(int menuIndex) signal menuItemClicked(int menuIndex)
dim: false
onOpened: { onOpened: {
if (typeof openHandler === "function") { if (typeof openHandler === "function") {
openHandler() openHandler()
@ -37,9 +48,7 @@ Menu {
} }
} }
delegate: StatusMenuItemDelegate { delegate: StatusMenuItemDelegate { }
statusPopupMenu: root
}
contentItem: StatusListView { contentItem: StatusListView {
currentIndex: root.currentIndex currentIndex: root.currentIndex

16
src/StatusQ/Popups/StatusSearchLocationMenu.qml
View File

@ -28,6 +28,8 @@ StatusPopupMenu {
MenuItem { implicitHeight: 0.00001 } MenuItem { implicitHeight: 0.00001 }
Instantiator { Instantiator {
model: root.locationModel model: root.locationModel
// NOTE: Use DelegateChooser here
delegate: Loader { delegate: Loader {
sourceComponent: (!!model.subItems && model.subItems.count > 0) ? subMenus : subMenuItemComponent sourceComponent: (!!model.subItems && model.subItems.count > 0) ? subMenus : subMenuItemComponent
onLoaded: { onLoaded: {
@ -38,13 +40,13 @@ StatusPopupMenu {
item.parentIconName = model.iconName; item.parentIconName = model.iconName;
item.parentImageSource = model.imageSource; item.parentImageSource = model.imageSource;
item.parentIdenticonColor = !!model.iconColor ? model.iconColor : Theme.palette.primaryColor1; item.parentIdenticonColor = !!model.iconColor ? model.iconColor : Theme.palette.primaryColor1;
root.subMenuItemIcons.push({
source: model.imageSource, item.assetSettings.source = model.imageSource;
icon: model.iconName, item.assetSettings.isIdenticon = model.isIdenticon;
isIdenticon: model.isIdenticon, item.assetSettings.name = model.iconName;
color: model.iconColor, item.assetSettings.color = model.iconColor;
isLetterIdenticon: !model.imageSource && !model.iconName item.assetSettings.isLetterIdenticon = !model.imageSource && !model.iconName;
});
root.insertMenu(index + numDefaultItems, item); root.insertMenu(index + numDefaultItems, item);
} else { } else {
item.value = model.value item.value = model.value