Long message
Adapted from "The Colors of Animals" by Sir John Lubbock in A Book of Natural History (1902, ed. David Starr Jordan)
The color of animals is by no means a matter of chance; it depends on many considerations, but in the majority of cases tends to protect the animal from danger by rendering it less conspicuous. Perhaps it may be said that if coloring is mainly protective, there ought to be but few brightly colored animals. There are, however, not a few cases in which vivid colors are themselves protective. The kingfisher itself, though so brightly colored, is by no means easy to see. The blue harmonizes with the water, and the bird as it darts along the stream looks almost like a flash of sunlight.
Desert animals are generally the color of the desert. Thus, for instance, the lion, the antelope, and the wild donkey are all sand-colored. βIndeed,β says Canon Tristram, βin the desert, where neither trees, brushwood, nor even undulation of the surface afford the slightest protection to its foes, a modification of color assimilated to that of the surrounding country is absolutely necessary. Hence, without exception, the upper plumage of every bird, and also the fur of all the smaller mammals and the skin of all the snakes and lizards, is of one uniform sand color.β
The next point is the color of the mature caterpillars, some of which are brown. This probably makes the caterpillar even more conspicuous among the green leaves than would otherwise be the case. Let us see, then, whether the habits of the insect will throw any light upon the riddle. What would you do if you were a big caterpillar? Why, like most other defenseless creatures, you would feed by night, and lie concealed by day. So do these caterpillars. When the morning light comes, they creep down the stem of the food plant, and lie concealed among the thick herbage and dry sticks and leaves, near the ground, and it is obvious that under such circumstances the brown color really becomes a protection. It might indeed be argued that the caterpillars, having become brown, concealed themselves on the ground, and that we were reversing the state of things. But this is not so, because, while we may say as a general rule that large caterpillars feed by night and lie concealed by day, it is by no means always the case that they are brown; some of them still retaining the green color. We may then conclude that the habit of concealing themselves by day came first, and that the brown color is a later adaptation.
The example of the mature caterpillar in the third paragraph is primarily intended to demonstrate _____________.
' messageContent: "" @@ -1061,7 +1062,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I isContact: true onlineStatus: 1 icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/ - nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC" + nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC" isAdmin: false } ListElement { diff --git a/sandbox/examples/FilteringSorting.qml b/sandbox/examples/FilteringSorting.qml index 4ef6d426..2dfa8a91 100644 --- a/sandbox/examples/FilteringSorting.qml +++ b/sandbox/examples/FilteringSorting.qml @@ -35,7 +35,7 @@ ColumnLayout { id: searchInput Layout.fillWidth: true - input.icon.name: "search" + input.asset.name: "search" placeholderText: "nickname.." } @@ -43,7 +43,7 @@ ColumnLayout { id: contactBtn icon.name: "tiny/tiny-contact" - identicon.icon.color: Theme.palette.primaryColor1 + identicon.asset.color: Theme.palette.primaryColor1 onClicked: highlighted = !highlighted } @@ -51,7 +51,7 @@ ColumnLayout { id: verifiedBtn icon.name: "tiny/tiny-checkmark" - identicon.icon.color: Theme.palette.primaryColor1 + identicon.asset.color: Theme.palette.primaryColor1 onClicked: highlighted = !highlighted } } @@ -94,6 +94,7 @@ ColumnLayout { nickName: model.nick isVerified: model.isVerified isContact: model.isContact + asset.isLetterIdenticon: true } } diff --git a/sandbox/pages/StatusChatInfoToolBarPage.qml b/sandbox/pages/StatusChatInfoToolBarPage.qml index a1161be7..3a34df42 100644 --- a/sandbox/pages/StatusChatInfoToolBarPage.qml +++ b/sandbox/pages/StatusChatInfoToolBarPage.qml @@ -14,8 +14,9 @@ GridLayout { StatusChatInfoToolBar { chatInfoButton.title: "Cryptokitties" chatInfoButton.subTitle: "128 Members" - chatInfoButton.image.source: "qrc:/demoapp/data/profile-image-1.jpeg" - chatInfoButton.icon.color: Theme.palette.miscColor6 + chatInfoButton.asset.isImage: true + chatInfoButton.asset.name: "qrc:/demoapp/data/profile-image-1.jpeg" + chatInfoButton.asset.color: Theme.palette.miscColor6 popupMenu: StatusPopupMenu { diff --git a/sandbox/pages/StatusCommunityTagsPage.qml b/sandbox/pages/StatusCommunityTagsPage.qml index de9d19a5..13d70256 100644 --- a/sandbox/pages/StatusCommunityTagsPage.qml +++ b/sandbox/pages/StatusCommunityTagsPage.qml @@ -36,7 +36,7 @@ Item { leftPadding: 0 rightPadding: 0 label: qsTr("Select tags that will fit your Community") - input.icon.name: "search" + input.asset.name: "search" placeholderText: qsTr("Search tags") Layout.fillWidth: true } diff --git a/sandbox/pages/StatusExpandableSettingsItemPage.qml b/sandbox/pages/StatusExpandableSettingsItemPage.qml index 77f2dd43..3c224a96 100644 --- a/sandbox/pages/StatusExpandableSettingsItemPage.qml +++ b/sandbox/pages/StatusExpandableSettingsItemPage.qml @@ -26,7 +26,7 @@ Column { anchors.horizontalCenter: parent.horizontalCenter expandable: false - icon.name: "seed-phrase" + asset.name: "seed-phrase" primaryText: "Back up seed phrase" secondaryText: "Back up your seed phrase now to secure this account ajhaDH SDHSAHDLSADBSA,DLISAHDLASD ADASDHASLDHALSDHAS DAS,DASJDGLIASGD" button.text: qsTr("Back up seed phrase") @@ -36,7 +36,7 @@ Column { anchors.horizontalCenter: parent.horizontalCenter expandable: true - icon.name: "secret" + asset.name: "secret" primaryText: "Account signing phrase" secondaryText: "View your signing phrase and ensure that you never get scammed. View your signing phrase and ensure that you never get scammed." expandableComponent: notImplemented @@ -46,7 +46,7 @@ Column { anchors.horizontalCenter: parent.horizontalCenter expandable: true - icon.name: "seed-phrase" + asset.name: "seed-phrase" primaryText: "View private key" secondaryText: "Back up your seed phrase now to secure this account" expandableComponent: notImplemented @@ -74,7 +74,8 @@ Column { type: StatusExpandableItem.Type.Secondary expandable: true - image.source: "qrc:/demoapp/data/profile-image-1.jpeg" + asset.isImage: true + asset.name: "qrc:/demoapp/data/profile-image-1.jpeg" primaryText: "CryptoKitties" additionalText: "1456 USD" expandableComponent: notImplemented @@ -85,7 +86,8 @@ Column { type: StatusExpandableItem.Type.Secondary expandable: true - image.source: "qrc:/demoapp/data/profile-image-1.jpeg" + asset.isImage: true + asset.name: "qrc:/demoapp/data/profile-image-1.jpeg" primaryText: "Adding Really long text to test scenario of having very long text along with tertiary text" additionalText: "564.90 USD" expandableComponent: notImplemented diff --git a/sandbox/pages/StatusInputPage.qml b/sandbox/pages/StatusInputPage.qml index 4a6ddffc..12132f2a 100644 --- a/sandbox/pages/StatusInputPage.qml +++ b/sandbox/pages/StatusInputPage.qml @@ -33,9 +33,8 @@ Column { StatusInput { label: "Label" - - input.icon.name: "search" - placeholderText: "Input with icon" + input.asset.name: "search" + input.placeholderText: "Input with icon" } StatusInput { @@ -112,9 +111,9 @@ Column { StatusInput { label: "StatusInput" secondaryLabel: "with right icon" - input.icon.width: 15 - input.icon.height: 11 - input.icon.name: text !== "" ? "checkmark" : "" + input.asset.width: 15 + input.asset.height: 11 + input.asset.name: text !== "" ? "checkmark" : "" input.leftIcon: false } @@ -192,9 +191,9 @@ Column { StatusInput { property bool toggled: true label: "Input with emoji icon" - placeholderText: "Enter Name" - input.icon.emoji: toggled ? "π" : "π§Έ" - input.icon.color: "blue" + input.placeholderText: "Enter Name" + input.asset.emoji: toggled ? "π" : "π§Έ" + input.asset.color: "blue" input.isIconSelectable: true onIconClicked: { toggled = !toggled @@ -204,10 +203,10 @@ Column { StatusInput { property bool toggled: true label: "Input with selectable icon which is not an emoji" - placeholderText: "Enter Name" - input.icon.emoji: "" - input.icon.name: toggled ? "filled-account" : "image" - input.icon.color: "blue" + input.placeholderText: "Enter Name" + input.asset.emoji: "" + input.asset.name: toggled ? "filled-account" : "image" + input.asset.color: "blue" input.isIconSelectable: true onIconClicked: { toggled = !toggled diff --git a/sandbox/pages/StatusPopupMenuPage.qml b/sandbox/pages/StatusPopupMenuPage.qml index 90c4d0f5..1434dd4e 100644 --- a/sandbox/pages/StatusPopupMenuPage.qml +++ b/sandbox/pages/StatusPopupMenuPage.qml @@ -55,30 +55,30 @@ GridLayout { StatusMenuItem { text: "One" - iconSettings.name: "info" + assetSettings.name: "info" } StatusMenuSeparator {} StatusMenuItem { text: "Two" - iconSettings.name: "info" + assetSettings.name: "info" } StatusMenuItem { text: "Three" - iconSettings.name: "info" + assetSettings.name: "info" } StatusPopupMenu { title: "Four" StatusMenuItem { text: "One" - iconSettings.name: "info" + assetSettings.name: "info" } StatusMenuItem { text: "Three" - iconSettings.name: "info" + assetSettings.name: "info" } } } @@ -108,14 +108,16 @@ GridLayout { StatusMenuItem { text: "vitalik.eth" - image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh + assetSettings.isImage: true + assetSettings.name: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC" - image.isIdenticon: true + assetSettings.imgIsIdenticon: true } StatusMenuItem { text: "Pascal" - image.source: "qrc:/demoapp/data/profile-image-1.jpeg" + assetSettings.isImage: true + assetSettings.name: "qrc:/demoapp/data/profile-image-1.jpeg" } } @@ -124,21 +126,21 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I StatusMenuItem { text: "welcome" - iconSettings.name: "channel" - iconSettings.color: Theme.palette.directColor1 + assetSettings.name: "channel" + assetSettings.color: Theme.palette.directColor1 } StatusMenuItem { text: "support" - iconSettings.name: "channel" - iconSettings.color: Theme.palette.directColor1 + assetSettings.name: "channel" + assetSettings.color: Theme.palette.directColor1 } StatusMenuHeadline { text: "Public" } StatusMenuItem { text: "news" - iconSettings.name: "channel" - iconSettings.color: Theme.palette.directColor1 + assetSettings.name: "channel" + assetSettings.color: Theme.palette.directColor1 } } @@ -147,8 +149,8 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I StatusMenuItem { text: "welcome" - iconSettings.isLetterIdenticon: true - iconSettings.background.color: "red" + assetSettings.isLetterIdenticon: true + assetSettings.bgColor: "red" } } } diff --git a/sandbox/pages/StatusSelectPage.qml b/sandbox/pages/StatusSelectPage.qml index fc48c0ea..9304fa6c 100644 --- a/sandbox/pages/StatusSelectPage.qml +++ b/sandbox/pages/StatusSelectPage.qml @@ -43,7 +43,7 @@ Column { selectMenu.delegate: StatusMenuItemDelegate { statusPopupMenu: select action: StatusMenuItem { - iconSettings.name: "filled-account" + assetSettings.name: "filled-account" text: name onTriggered: { selectedItem.text = name diff --git a/src/StatusQ/Components/StatusCard.qml b/src/StatusQ/Components/StatusCard.qml index c41cf9bb..c33cd5f7 100644 --- a/src/StatusQ/Components/StatusCard.qml +++ b/src/StatusQ/Components/StatusCard.qml @@ -239,7 +239,7 @@ Rectangle { id: waitTimer interval: lockTimeout onTriggered: { - if(advancedInput.edit.text) + if(advancedInput.text) advancedInput.locked = true } } @@ -311,7 +311,7 @@ Rectangle { } PropertyChanges { target: advancedInput - edit.color: Theme.palette.directColor1 + input.color: Theme.palette.directColor1 } PropertyChanges { target: basicInput @@ -370,7 +370,7 @@ Rectangle { } PropertyChanges { target: advancedInput - edit.color: disabled ? Theme.palette.directColor5 : Theme.palette.dangerColor1 + input.edit.color: disabled ? Theme.palette.directColor5 : Theme.palette.dangerColor1 } PropertyChanges { target: basicInput @@ -429,7 +429,7 @@ Rectangle { } PropertyChanges { target: advancedInput - edit.color: Theme.palette.directColor1 + input.color: Theme.palette.directColor1 } PropertyChanges { target: basicInput @@ -488,7 +488,7 @@ Rectangle { } PropertyChanges { target: advancedInput - edit.color: Theme.palette.directColor1 + input.color: Theme.palette.directColor1 } PropertyChanges { target: basicInput diff --git a/src/StatusQ/Components/StatusChatList.qml b/src/StatusQ/Components/StatusChatList.qml index b75853c8..a39e1963 100644 --- a/src/StatusQ/Components/StatusChatList.qml +++ b/src/StatusQ/Components/StatusChatList.qml @@ -118,11 +118,10 @@ Column { notificationsCount: model.notificationsCount highlightWhenCreated: !!model.highlight selected: (model.active && root.highlightItem) - - icon.emoji: !!model.emoji ? model.emoji : "" - icon.color: !!model.color ? model.color : Theme.palette.userCustomizationColors[model.colorId] - image.isIdenticon: false - image.source: model.icon + asset.emoji: !!model.emoji ? model.emoji : "" + asset.color: !!model.color ? model.color : Theme.palette.userCustomizationColors[model.colorId] + asset.isImage: model.icon.includes("data") + asset.name: model.icon ringSettings.ringSpecModel: model.colorHash sensor.cursorShape: dragSensor.cursorShape @@ -228,9 +227,9 @@ Column { notificationsCount: model.notificationsCount selected: draggable.chatListItem.selected - icon.color: draggable.chatListItem.icon.color - image.isIdenticon: draggable.chatListItem.image.isIdenticon - image.source: draggable.chatListItem.image.source + asset.color: draggable.chatListItem.asset.color + asset.imgIsIdenticon: draggable.chatListItem.asset.imgIsIdenticon + asset.name: draggable.chatListItem.asset.name } } } diff --git a/src/StatusQ/Components/StatusChatListItem.qml b/src/StatusQ/Components/StatusChatListItem.qml index 72b1fe66..386cbd80 100644 --- a/src/StatusQ/Components/StatusChatListItem.qml +++ b/src/StatusQ/Components/StatusChatListItem.qml @@ -21,11 +21,8 @@ Rectangle { property bool hasUnreadMessages: false property int notificationsCount: 0 property bool muted: false - property StatusImageSettings image: StatusImageSettings { - width: 24 - height: 24 - } - property StatusIconSettings icon: StatusIconSettings { + + property StatusAssetSettings asset: StatusAssetSettings { width: 24 height: 24 color: Theme.palette.miscColor5 @@ -85,8 +82,7 @@ Rectangle { anchors.left: parent.left anchors.leftMargin: 8 anchors.verticalCenter: parent.verticalCenter - image: root.image - icon: root.icon + asset: root.asset name: root.name } diff --git a/src/StatusQ/Components/StatusCommunityCard.qml b/src/StatusQ/Components/StatusCommunityCard.qml index e0996c58..53ec36b9 100644 --- a/src/StatusQ/Components/StatusCommunityCard.qml +++ b/src/StatusQ/Components/StatusCommunityCard.qml @@ -360,11 +360,11 @@ Rectangle { height: 24 radius: 20 closeButtonVisible: false - icon.emoji: model.emoji - icon.height: 24 - icon.width: icon.height - icon.color: "transparent" - icon.isLetterIdenticon: true + asset.emoji: model.emoji + asset.width: 24 + asset.height: 24 + asset.color: "transparent" + asset.isLetterIdenticon: true title: model.name titleText.font.pixelSize: 13 titleText.color: d.fontColor diff --git a/src/StatusQ/Components/StatusContactVerificationIcons.qml b/src/StatusQ/Components/StatusContactVerificationIcons.qml index 87940921..7d5de323 100644 --- a/src/StatusQ/Components/StatusContactVerificationIcons.qml +++ b/src/StatusQ/Components/StatusContactVerificationIcons.qml @@ -9,16 +9,14 @@ Row { property bool isContact: false property var trustIndicator: StatusContactVerificationIcons.TrustedType.None - property StatusIconSettings mutualConnectionIcon: StatusIconSettings { + property StatusAssetSettings mutualConnectionIcon: StatusAssetSettings { name: "tiny/tiny-contact" color: Theme.palette.indirectColor1 width: dummyImage.width height: dummyImage.height - background: StatusIconBackgroundSettings { - width: 10 - height: 10 - color: Theme.palette.primaryColor1 - } + bgWidth: 10 + bgHeight: 10 + bgColor: Theme.palette.primaryColor1 // Only used to get implicit width and height from the actual image property Image dummyImage: Image { source: mutualConnectionIcon.name ? "../../assets/img/icons/" + mutualConnectionIcon.name + ".svg": "" @@ -26,17 +24,15 @@ Row { } } - property StatusIconSettings trustContactIcon: StatusIconSettings { + property StatusAssetSettings trustContactIcon: StatusAssetSettings { // None and Untrustworthy types, same aspect (Icon will not be visible in case of None type): name: root.trustIndicator === StatusContactVerificationIcons.TrustedType.Verified ? "tiny/tiny-checkmark" : "tiny/subtract" color: Theme.palette.indirectColor1 width: dummyImage.width height: dummyImage.height - background: StatusIconBackgroundSettings { - width: 10 - height: 10 - color: root.trustIndicator === StatusContactVerificationIcons.TrustedType.Verified ? Theme.palette.primaryColor1 : Theme.palette.dangerColor1 - } + bgWidth: 10 + bgHeight: 10 + bgColor: root.trustIndicator === StatusContactVerificationIcons.TrustedType.Verified ? Theme.palette.primaryColor1 : Theme.palette.dangerColor1 // Only used to get implicit width and height from the actual image property Image dummyImage: Image { source: trustContactIcon.name ? "../../assets/img/icons/" + trustContactIcon.name + ".svg": "" @@ -55,25 +51,25 @@ Row { StatusRoundIcon { visible: root.isContact - icon.name: root.mutualConnectionIcon.name - icon.width: root.mutualConnectionIcon.width - icon.height: root.mutualConnectionIcon.height - icon.rotation: root.mutualConnectionIcon.rotation - icon.color: root.mutualConnectionIcon.color - icon.background.color: root.mutualConnectionIcon.background.color - icon.background.width: root.mutualConnectionIcon.background.width - icon.background.height: root.mutualConnectionIcon.background.height + asset.name: root.mutualConnectionIcon.name + asset.width: root.mutualConnectionIcon.width + asset.height: root.mutualConnectionIcon.height + asset.rotation: root.mutualConnectionIcon.rotation + asset.color: root.mutualConnectionIcon.color + asset.bgColor: root.mutualConnectionIcon.bgColor + asset.bgWidth: root.mutualConnectionIcon.bgWidth + asset.bgHeight: root.mutualConnectionIcon.bgHeight } StatusRoundIcon { visible: root.trustIndicator !== StatusContactVerificationIcons.TrustedType.None - icon.name: root.trustContactIcon.name - icon.width: root.trustContactIcon.width - icon.height: root.trustContactIcon.height - icon.rotation: root.trustContactIcon.rotation - icon.color: root.trustContactIcon.color - icon.background.color: root.trustContactIcon.background.color - icon.background.width: root.trustContactIcon.background.width - icon.background.height: root.trustContactIcon.background.height + asset.name: root.trustContactIcon.name + asset.width: root.trustContactIcon.width + asset.height: root.trustContactIcon.height + asset.rotation: root.trustContactIcon.rotation + asset.color: root.trustContactIcon.color + asset.bgColor: root.trustContactIcon.bgColor + asset.bgWidth: root.trustContactIcon.bgWidth + asset.bgHeight: root.trustContactIcon.bgHeight } } diff --git a/src/StatusQ/Components/StatusDescriptionListItem.qml b/src/StatusQ/Components/StatusDescriptionListItem.qml index a970b6e6..01f9b58f 100644 --- a/src/StatusQ/Components/StatusDescriptionListItem.qml +++ b/src/StatusQ/Components/StatusDescriptionListItem.qml @@ -10,7 +10,7 @@ Rectangle { property string subTitle: "" property alias subTitleComponent: statusDescriptionListItemSubTitle property string value: "" - property StatusIconSettings icon: StatusIconSettings { + property StatusAssetSettings asset: StatusAssetSettings { width: 23 height: 23 } @@ -59,7 +59,7 @@ Rectangle { StatusFlatRoundButton { id: statusFlatRoundButton - visible: !!statusDescriptionListItem.icon.name + visible: !!statusDescriptionListItem.asset.name anchors.verticalCenter: statusDescriptionListItemSubTitle.verticalCenter anchors.left: statusDescriptionListItemSubTitle.right anchors.leftMargin: 4 @@ -67,9 +67,9 @@ Rectangle { width: 32 height: 32 - icon.name: statusDescriptionListItem.icon.name - icon.width: statusDescriptionListItem.icon.width - icon.height: statusDescriptionListItem.icon.height + icon.name: statusDescriptionListItem.asset.name + icon.width: statusDescriptionListItem.asset.width + icon.height: statusDescriptionListItem.asset.height StatusToolTip { id: statusToolTip diff --git a/src/StatusQ/Components/StatusExpandableItem.qml b/src/StatusQ/Components/StatusExpandableItem.qml index e027374c..eca0b43d 100644 --- a/src/StatusQ/Components/StatusExpandableItem.qml +++ b/src/StatusQ/Components/StatusExpandableItem.qml @@ -18,19 +18,13 @@ Rectangle { property bool expandable: true property bool expanded: false - property StatusIconSettings icon: StatusIconSettings { - width: !!statusExpandableItem.icon.name.toString() ? 24 : 40 - height: !!statusExpandableItem.icon.name.toString() ? 24 : 40 + property StatusAssetSettings asset: StatusAssetSettings { + width: !statusExpandableItem.asset.isImage ? 24 : 40 + height: !statusExpandableItem.asset.isImage ? 24 : 40 color: Theme.palette.directColor1 - background: StatusIconBackgroundSettings { - width: 32 - height: 32 - color: Theme.palette.primaryColor2 - } - } - property StatusImageSettings image: StatusImageSettings { - width: 40 - height: 40 + bgWidth: 32 + bgHeight: 32 + bgColor: Theme.palette.primaryColor2 } enum Type { @@ -73,8 +67,7 @@ Rectangle { anchors.topMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? 12.5 : 25 anchors.left: parent.left anchors.leftMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? 16 : 11 - image: statusExpandableItem.image - icon: statusExpandableItem.icon + asset: statusExpandableItem.asset name: primaryText.text active: (statusExpandableItem.type !== StatusExpandableItem.Type.Tertiary) } @@ -89,10 +82,10 @@ Rectangle { anchors.verticalCenter: (statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? identicon.verticalCenter : undefined - width: !!additionalText.text ? (button.visible ? parent.width - icon.background.width - button.width - additionalText.contentWidth - 110 : - parent.width - icon.background.width - additionalText.contentWidth - 110) : - (button.visible ? parent.width - icon.background.width - button.width - 70 : - parent.width - icon.background.width - 70) + width: !!additionalText.text ? (button.visible ? parent.width - asset.bgWidth - button.width - additionalText.contentWidth - 110 : + parent.width - asset.bgWidth - additionalText.contentWidth - 110) : + (button.visible ? parent.width - asset.bgWidth - button.width - 70 : + parent.width - asset.bgWidth - 70) font.weight: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? Font.Medium : Font.Normal font.pixelSize: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 15 : 17 diff --git a/src/StatusQ/Components/StatusItemSelector.qml b/src/StatusQ/Components/StatusItemSelector.qml index 8d399f79..feb48838 100644 --- a/src/StatusQ/Components/StatusItemSelector.qml +++ b/src/StatusQ/Components/StatusItemSelector.qml @@ -170,7 +170,8 @@ Rectangle { StatusListItemTag { visible: itemsModel.count === 0 title: root.defaultItemText - image.source: root.defaultItemImageSource + asset.name: root.defaultItemImageSource + asset.isImage: true color: Theme.palette.baseColor2 closeButtonVisible: false titleText.color: Theme.palette.baseColor1 @@ -200,7 +201,8 @@ Rectangle { } StatusListItemTag { title: model.text - image.source: model.imageSource + asset.name: model.imageSource + asset.isImage: true color: Theme.palette.primaryColor3 closeButtonVisible: false titleText.color: Theme.palette.primaryColor1 diff --git a/src/StatusQ/Components/StatusListItem.qml b/src/StatusQ/Components/StatusListItem.qml index c759aa0f..03c9c779 100644 --- a/src/StatusQ/Components/StatusListItem.qml +++ b/src/StatusQ/Components/StatusListItem.qml @@ -34,34 +34,29 @@ Rectangle { property bool loading: false property bool loadingFailed: false - property StatusIconSettings icon: StatusIconSettings { - height: isLetterIdenticon ? 40 : 20 - width: isLetterIdenticon ? 40 : 20 + property StatusAssetSettings asset: StatusAssetSettings { + height: isImage ? 40 : 20 + width: isImage ? 40 : 20 rotation: 0 isLetterIdenticon: false letterSize: 21 charactersLen: 1 - color: isLetterIdenticon ? background.color : type === StatusListItem.Type.Danger ? + color: isLetterIdenticon ? bgColor : type === StatusListItem.Type.Danger ? Theme.palette.dangerColor1 : Theme.palette.primaryColor1 - background: StatusIconBackgroundSettings { - width: 40 - height: 40 - color: { - if (sensor.containsMouse) { - return type === StatusListItem.Type.Secondary || - type === StatusListItem.Type.Danger ? "transparent" : - Theme.palette.primaryColor3 - } - return type === StatusListItem.Type.Danger ? - Theme.palette.dangerColor3 : Theme.palette.primaryColor3 + bgWidth: 40 + bgHeight: 40 + bgColor: { + if (sensor.containsMouse) { + return type === StatusListItem.Type.Secondary || + type === StatusListItem.Type.Danger ? "transparent" : + Theme.palette.primaryColor3 } + return type === StatusListItem.Type.Danger ? + Theme.palette.dangerColor3 : Theme.palette.primaryColor3 } + imgIsIdenticon: false } - property StatusImageSettings image: StatusImageSettings { - width: 40 - height: 40 - isIdenticon: false - } + property StatusIdenticonRingSettings ringSettings: StatusIdenticonRingSettings { initalAngleRad: 0 ringPxSize: 1.5 @@ -143,13 +138,11 @@ Rectangle { anchors.top: parent.top anchors.topMargin: 12 visible: !iconOrImageLoadingOverlay.visible - image: statusListItem.image - icon: statusListItem.icon + asset: statusListItem.asset name: statusListItem.title - active: statusListItem.icon.isLetterIdenticon || - !!statusListItem.icon.name || - !!statusListItem.image.source.toString() || - !!statusListItem.icon.emoji + active: statusListItem.asset.isLetterIdenticon || + !!statusListItem.asset.name || + !!statusListItem.asset.emoji badge.border.color: statusListItem.color ringSettings: statusListItem.ringSettings } diff --git a/src/StatusQ/Components/StatusListItemBadge.qml b/src/StatusQ/Components/StatusListItemBadge.qml index ba6a7f13..bc536008 100644 --- a/src/StatusQ/Components/StatusListItemBadge.qml +++ b/src/StatusQ/Components/StatusListItemBadge.qml @@ -13,17 +13,12 @@ Control { property string primaryText: "" property string secondaryText: "" - property StatusImageSettings image: StatusImageSettings { - height: 16 - width: 16 - isIdenticon: false - } - property StatusIconSettings icon: StatusIconSettings { + property StatusAssetSettings asset: StatusAssetSettings { height: 16 width: 16 isLetterIdenticon: false - background: StatusIconBackgroundSettings {} color: "transparent" + imgIsIdenticon: false } background: Rectangle { @@ -43,22 +38,22 @@ Control { anchors.horizontalCenterOffset: -spacing spacing: 2 StatusRoundedImage { - implicitWidth: root.image.width - implicitHeight: root.image.height - visible: !root.icon.isLetterIdenticon - image.source: root.image.source + implicitWidth: root.asset.width + implicitHeight: root.asset.height + visible: !root.asset.isLetterIdenticon + image.source: root.asset.name border.color: Theme.palette.baseColor1 - border.width: root.image.isIdenticon ? 1 : 0 + border.width: root.asset.imgIsIdenticon ? 1 : 0 } StatusLetterIdenticon { - implicitWidth: root.icon.width - implicitHeight: root.icon.width + implicitWidth: root.asset.width + implicitHeight: root.asset.width letterSize: 11 - visible: root.icon.isLetterIdenticon - color: root.icon.color + visible: root.asset.isLetterIdenticon + color: root.asset.color name: root.primaryText - emoji: root.icon.emoji - emojiSize: root.icon.emojiSize + emoji: root.asset.emoji + emojiSize: root.asset.emojiSize } StatusBaseText { font.weight: Font.Medium diff --git a/src/StatusQ/Components/StatusListItemTag.qml b/src/StatusQ/Components/StatusListItemTag.qml index f6cfbbff..f81e01a0 100644 --- a/src/StatusQ/Components/StatusListItemTag.qml +++ b/src/StatusQ/Components/StatusListItemTag.qml @@ -17,24 +17,17 @@ Rectangle { property bool closeButtonVisible: true signal clicked() - property StatusImageSettings image: StatusImageSettings { - width: 20 - height: 20 - isIdenticon: false - } - - property StatusIconSettings icon: StatusIconSettings { + property StatusAssetSettings asset: StatusAssetSettings { height: 20 width: 20 rotation: 0 isLetterIdenticon: false letterSize: 10 color: Theme.palette.primaryColor1 - background: StatusIconBackgroundSettings { - width: 15 - height: 15 - color: Theme.palette.primaryColor3 - } + bgWidth: 15 + bgHeight: 15 + bgColor: Theme.palette.primaryColor3 + imgIsIdenticon: false } RowLayout { @@ -45,12 +38,10 @@ Rectangle { StatusSmartIdenticon { id: iconOrImage Layout.leftMargin: 4 - image: root.image - icon: root.icon + asset: root.asset name: root.title - active: root.icon.isLetterIdenticon || - !!root.icon.name || - !!root.image.source.toString() + active: root.asset.isLetterIdenticon || + !!root.asset.name } StatusBaseText { diff --git a/src/StatusQ/Components/StatusListPicker.qml b/src/StatusQ/Components/StatusListPicker.qml index 2f3c4c38..54a50aa8 100644 --- a/src/StatusQ/Components/StatusListPicker.qml +++ b/src/StatusQ/Components/StatusListPicker.qml @@ -294,7 +294,7 @@ Item { bottomPadding: 0 placeholderText: root.placeholderSearchText text: root.searchText - input.icon.name: "search" + input.asset.name: "search" onTextChanged: root.searchText = text } @@ -303,11 +303,11 @@ Item { width: content.itemWidth height: content.itemHeight color: mouseArea.containsMouse ? Theme.palette.baseColor4 : "transparent" - image: StatusImageSettings { - source: root.proxy.imageSource(model) ? root.proxy.imageSource(model) : "" + asset: StatusAssetSettings { + name: root.proxy.imageSource(model) ? root.proxy.imageSource(model) : "" width: 15 height: 15 - isIdenticon: false + imgIsIdenticon: false } name: root.proxy.name(model) shortName: root.proxy.shortName(model) diff --git a/src/StatusQ/Components/StatusMemberListItem.qml b/src/StatusQ/Components/StatusMemberListItem.qml index 23bccde5..4eb8de24 100644 --- a/src/StatusQ/Components/StatusMemberListItem.qml +++ b/src/StatusQ/Components/StatusMemberListItem.qml @@ -120,7 +120,6 @@ StatusListItem { } subTitle: d.composeSubtitile() statusListItemSubTitle.font.pixelSize: 10 - icon.isLetterIdenticon: !root.image.source.toString() statusListItemIcon.badge.visible: true statusListItemIcon.badge.color: root.status === 1 ? Theme.palette.successColor1 : Theme.palette.baseColor1 // FIXME color: sensor.containsMouse ? Theme.palette.baseColor2 : Theme.palette.baseColor4 @@ -129,10 +128,8 @@ StatusListItem { implicitWidth: 256 implicitHeight: Math.max(56, statusListItemTitleArea.height + leftPadding) leftPadding: 8 - image.width: 32 - image.height: 32 - icon.width: 32 - icon.height: 32 + asset.width: 32 + asset.height: 32 statusListItemIcon.anchors.verticalCenter: sensor.verticalCenter statusListItemIcon.anchors.top: undefined statusListItemIcon.badge.border.width: 2 diff --git a/src/StatusQ/Components/StatusMessage.qml b/src/StatusQ/Components/StatusMessage.qml index 504393cf..8fc4add8 100644 --- a/src/StatusQ/Components/StatusMessage.qml +++ b/src/StatusQ/Components/StatusMessage.qml @@ -226,20 +226,15 @@ Rectangle { spacing: 8 Item { + implicitWidth: profileImage.width + implicitHeight: profileImage.visible ? profileImage.height : 0 Layout.alignment: Qt.AlignTop - - implicitWidth: profileImage.effectiveSize.width - implicitHeight: profileImage.visible ? profileImage.effectiveSize.height : 0 - StatusSmartIdenticon { id: profileImage - active: root.showHeader visible: active - name: root.messageDetails.sender.userName - image: root.messageDetails.sender.profileImage.imageSettings - icon: root.messageDetails.sender.profileImage.iconSettings + asset: root.messageDetails.sender.profileImage.assetSettings ringSettings: root.messageDetails.sender.profileImage.ringSettings MouseArea { @@ -324,7 +319,8 @@ Rectangle { active: root.messageDetails.contentType === StatusMessage.ContentType.Sticker && !editMode visible: active sourceComponent: StatusSticker { - image.source: root.messageDetails.messageContent + asset.isImage: true + asset.name: root.messageDetails.messageContent onLoaded: root.stickerLoaded() onClicked: { root.stickerClicked() diff --git a/src/StatusQ/Components/StatusMessageDetails.qml b/src/StatusQ/Components/StatusMessageDetails.qml index 246308e9..1945f035 100644 --- a/src/StatusQ/Components/StatusMessageDetails.qml +++ b/src/StatusQ/Components/StatusMessageDetails.qml @@ -6,14 +6,10 @@ QtObject { id: msgDetails property bool amISender: false - property StatusMessageSenderDetails sender: StatusMessageSenderDetails { } - property bool isEdited: false property int contentType: 0 property string messageText: "" property string messageContent: "" property string messageOriginInfo: "" } - - diff --git a/src/StatusQ/Components/StatusNavigationListItem.qml b/src/StatusQ/Components/StatusNavigationListItem.qml index f05653d5..7b107d65 100644 --- a/src/StatusQ/Components/StatusNavigationListItem.qml +++ b/src/StatusQ/Components/StatusNavigationListItem.qml @@ -12,9 +12,9 @@ StatusListItem { implicitWidth: 286 implicitHeight: 48 - icon.background.width: 20 - icon.background.height: 20 - icon.background.color: "transparent" + asset.bgWidth: 20 + asset.bgHeight: 20 + asset.bgColor: "transparent" statusListItemIcon.anchors.topMargin: 14 diff --git a/src/StatusQ/Components/StatusRoundIcon.qml b/src/StatusQ/Components/StatusRoundIcon.qml index e1fbb7e8..c3bab12e 100644 --- a/src/StatusQ/Components/StatusRoundIcon.qml +++ b/src/StatusQ/Components/StatusRoundIcon.qml @@ -5,33 +5,31 @@ import StatusQ.Core.Theme 0.1 Rectangle { id: statusRoundedIcon - property StatusIconSettings icon: StatusIconSettings { + property StatusAssetSettings asset: StatusAssetSettings { width: 24 height: 24 rotation: 0 color: Theme.palette.primaryColor1 - background: StatusIconBackgroundSettings { - width: 40 - height: 40 - color: Theme.palette.primaryColor3 - } + bgWidth: 40 + bgHeight: 40 + bgColor: Theme.palette.primaryColor3 } - color: icon.background.color - implicitWidth: icon.background.width - implicitHeight: icon.background.height - radius: icon.background.width / 2 + color: asset.bgColor + implicitWidth: asset.bgWidth + implicitHeight: asset.bgHeight + radius: asset.bgWidth / 2 StatusIcon { id: statusIcon anchors.centerIn: parent - width: statusRoundedIcon.icon.width - height: statusRoundedIcon.icon.height + width: statusRoundedIcon.asset.width + height: statusRoundedIcon.asset.height - color: statusRoundedIcon.icon.color - icon: statusRoundedIcon.icon.name - rotation: statusRoundedIcon.icon.rotation + color: statusRoundedIcon.asset.color + icon: statusRoundedIcon.asset.name + rotation: statusRoundedIcon.asset.rotation } } diff --git a/src/StatusQ/Components/StatusSmartIdenticon.qml b/src/StatusQ/Components/StatusSmartIdenticon.qml index 8da1d17e..cb50a80c 100644 --- a/src/StatusQ/Components/StatusSmartIdenticon.qml +++ b/src/StatusQ/Components/StatusSmartIdenticon.qml @@ -4,7 +4,7 @@ import StatusQ.Core.Theme 0.1 import StatusQ.Controls 0.1 Loader { - id: statusSmartIdenticon + id: root property string name: "" property int dZ: 100 @@ -12,55 +12,46 @@ Loader { // Badge color properties must be set if badgeItem.visible = true property alias badge: statusBadge - property StatusIconSettings icon: StatusIconSettings { - width: 40 - height: 40 - } - - property StatusImageSettings image: StatusImageSettings { + property StatusAssetSettings asset: StatusAssetSettings { width: 40 height: 40 } property StatusIdenticonRingSettings ringSettings: StatusIdenticonRingSettings { initalAngleRad: 0 - ringPxSize: Math.max(1.5, statusSmartIdenticon.image.width / 24.0) + ringPxSize: Math.max(1.5, root.asset.width/ 24.0) distinctiveColors: Theme.palette.identiconRingColors } - readonly property size effectiveSize: !!statusSmartIdenticon.image.source.toString() - ? Qt.size(statusSmartIdenticon.image.width, statusSmartIdenticon.image.width) - : Qt.size(statusSmartIdenticon.icon.width, statusSmartIdenticon.icon.height) - - sourceComponent: statusSmartIdenticon.icon.isLetterIdenticon ? letterIdenticon : - !!statusSmartIdenticon.image.source.toString() ? roundedImage : - !!statusSmartIdenticon.icon.name.toString() ? roundedIcon : letterIdenticon + sourceComponent: (root.asset.isLetterIdenticon || root.asset.name === "") ? letterIdenticon : + !root.asset.isImage ? roundedIcon : roundedImage Component { id: roundedImage Item { - width: statusSmartIdenticon.image.width - height: statusSmartIdenticon.image.height + width: root.asset.width + height: root.asset.height StatusRoundedImage { id: statusRoundImage width: parent.width height: parent.height - image.source: statusSmartIdenticon.image.source + image.source: root.asset.name showLoadingIndicator: true - border.width: statusSmartIdenticon.image.isIdenticon ? 1 : 0 + border.width: root.asset.imgIsIdenticon ? 1 : 0 border.color: Theme.palette.directColor7 - color: statusSmartIdenticon.image.isIdenticon ? + color: root.asset.imgIsIdenticon ? Theme.palette.statusRoundedImage.backgroundColor : "transparent" } Loader { anchors.centerIn: parent - active: statusRoundImage.image.status === Image.Error + active: root.asset.imgStatus === Image.Error || + statusRoundImage.image.status === Image.Error sourceComponent: letterIdenticon onLoaded: { item.color = Theme.palette.miscColor5 - item.width = statusSmartIdenticon.image.width - item.height = statusSmartIdenticon.image.height + item.width = root.asset.width + item.height = root.asset.height } } } @@ -69,14 +60,14 @@ Loader { Component { id: roundedIcon StatusRoundIcon { - icon.background.width: statusSmartIdenticon.icon.background.width - icon.background.height: statusSmartIdenticon.icon.background.height - icon.background.color: statusSmartIdenticon.icon.background.color - icon.width: statusSmartIdenticon.icon.width - icon.height: statusSmartIdenticon.icon.height - icon.name: statusSmartIdenticon.icon.name - icon.rotation: statusSmartIdenticon.icon.rotation - icon.color: statusSmartIdenticon.icon.color + asset.bgWidth: root.asset.bgWidth + asset.bgHeight: root.asset.bgHeight + asset.bgColor: root.asset.bgColor + asset.width: root.asset.width + asset.height: root.asset.height + asset.name: root.asset.name + asset.rotation: root.asset.rotation + asset.color: root.asset.color } } @@ -84,33 +75,33 @@ Loader { id: letterIdenticon StatusLetterIdenticon { objectName: "statusSmartIdenticonLetter" - width: statusSmartIdenticon.icon.width - height: statusSmartIdenticon.icon.height - color: statusSmartIdenticon.icon.color - name: statusSmartIdenticon.name - emoji: statusSmartIdenticon.icon.emoji - emojiSize: statusSmartIdenticon.icon.emojiSize - letterSize: statusSmartIdenticon.icon.letterSize - charactersLen: statusSmartIdenticon.icon.charactersLen + width: root.asset.width + height: root.asset.height + color: root.asset.color + name: root.name + emoji: root.asset.emoji + emojiSize: root.asset.emojiSize + letterSize: root.asset.letterSize + charactersLen: root.asset.charactersLen } } // Next components are painted above main sourceComponent StatusIdenticonRing { - settings: statusSmartIdenticon.ringSettings + settings: root.ringSettings anchors.fill: parent - z: statusSmartIdenticon.dZ/2 + z: root.dZ/2 } // State component StatusBadge { id: statusBadge visible: false - anchors.bottom: statusSmartIdenticon.bottom - anchors.right: statusSmartIdenticon.right + anchors.bottom: root.bottom + anchors.right: root.right border.width: 3 implicitHeight: 15 implicitWidth: 15 - z: statusSmartIdenticon.dZ + z: root.dZ } } diff --git a/src/StatusQ/Components/StatusTagSelector.qml b/src/StatusQ/Components/StatusTagSelector.qml index d47a3060..f7dc20c8 100644 --- a/src/StatusQ/Components/StatusTagSelector.qml +++ b/src/StatusQ/Components/StatusTagSelector.qml @@ -180,6 +180,7 @@ Item { "isContact": entry.isContact, "ringSpecModel": entry.ringSpecModel, "icon": entry.icon, + "isImage": entry.isImage, "onlineStatus": entry.onlineStatus, "tagIcon": entry.tagIcon ? entry.tagIcon : "", "isReadonly": !!entry.isReadonly}); @@ -412,9 +413,10 @@ Item { isVerified: model.isVerified isUntrustworthy: model.isUntrustworthy isContact: model.isContact - image.source: model.icon - image.isIdenticon: false - icon.color: Theme.palette.userCustomizationColors[root.colorIdForPubkeyGetter(model.pubKey)] + asset.name: model.icon + asset.color: Theme.palette.userCustomizationColors[root.colorIdForPubkeyGetter(model.pubKey)] + asset.isImage: (asset.name !== "") + asset.isLetterIdenticon: (asset.name === "") status: model.onlineStatus statusListItemIcon.badge.border.color: sensor.containsMouse ? Theme.palette.baseColor2 : Theme.palette.baseColor4 ringSettings.ringSpecModel: root.ringSpecModelGetter(model.pubKey) diff --git a/src/StatusQ/Components/StatusToastMessage.qml b/src/StatusQ/Components/StatusToastMessage.qml index e43c7ace..ad7815ed 100644 --- a/src/StatusQ/Components/StatusToastMessage.qml +++ b/src/StatusQ/Components/StatusToastMessage.qml @@ -75,10 +75,10 @@ Control { property int duration: 0 /*! - \qmlproperty StatusIconSettings StatusToastMessage::icon + \qmlproperty StatusAssetSettings StatusToastMessage::icon This property holds a set of settings for the icon of the ToastMessage. */ - property StatusIconSettings icon: StatusIconSettings { + property StatusAssetSettings icon: StatusAssetSettings { width: 23 height: 23 } diff --git a/src/StatusQ/Components/private/statusMessage/StatusMessageReply.qml b/src/StatusQ/Components/private/statusMessage/StatusMessageReply.qml index 9c1d5c78..efa686eb 100644 --- a/src/StatusQ/Components/private/statusMessage/StatusMessageReply.qml +++ b/src/StatusQ/Components/private/statusMessage/StatusMessageReply.qml @@ -58,10 +58,8 @@ Item { id: profileImage Layout.alignment: Qt.AlignTop name: replyDetails.sender.userName - image: replyDetails.sender.profileImage.imageSettings - icon: replyDetails.sender.profileImage.iconSettings + asset: replyDetails.sender.profileImage.assetSettings ringSettings: replyDetails.sender.profileImage.ringSettings - MouseArea { cursorShape: Qt.PointingHandCursor acceptedButtons: Qt.LeftButton | Qt.RightButton @@ -105,9 +103,10 @@ Item { Layout.alignment: Qt.AlignLeft visible: replyDetails.contentType === StatusMessage.ContentType.Sticker StatusSticker { - image.width: 48 - image.height: 48 - image.source: replyDetails.messageContent + asset.width: 48 + asset.height: 48 + asset.name: replyDetails.messageContent + asset.isImage: true } } Item { diff --git a/src/StatusQ/Components/private/statusMessage/StatusSticker.qml b/src/StatusQ/Components/private/statusMessage/StatusSticker.qml index 8909008f..9f332009 100644 --- a/src/StatusQ/Components/private/statusMessage/StatusSticker.qml +++ b/src/StatusQ/Components/private/statusMessage/StatusSticker.qml @@ -10,7 +10,7 @@ Loader { property bool noHover: false property bool noMouseArea: false - property StatusImageSettings image: StatusImageSettings { + property StatusAssetSettings asset: StatusAssetSettings { width: 140 height: 140 } @@ -26,8 +26,8 @@ Loader { color: Theme.palette.baseColor2 radius: 16 - width: image.width - height: image.height + width: asset.width + height: asset.height function reload() { // From the documentation (https://doc.qt.io/qt-5/qml-qtquick-image.html#sourceSize-prop) @@ -53,7 +53,7 @@ Loader { horizontalAlignment: Image.AlignHCenter verticalAlignment: Image.AlignVCenter cache: true - source: image.source + source: asset.name onStatusChanged: { if (status === Image.Ready) { diff --git a/src/StatusQ/Controls/StatusBaseButton.qml b/src/StatusQ/Controls/StatusBaseButton.qml index beabab6b..c5b6bc78 100644 --- a/src/StatusQ/Controls/StatusBaseButton.qml +++ b/src/StatusQ/Controls/StatusBaseButton.qml @@ -19,7 +19,7 @@ Rectangle { Primary } - property StatusIconSettings icon: StatusIconSettings { + property StatusAssetSettings icon: StatusAssetSettings { width: 24 height: 24 } diff --git a/src/StatusQ/Controls/StatusBaseInput.qml b/src/StatusQ/Controls/StatusBaseInput.qml index fb04889a..808043b0 100644 --- a/src/StatusQ/Controls/StatusBaseInput.qml +++ b/src/StatusQ/Controls/StatusBaseInput.qml @@ -218,21 +218,19 @@ Item { property bool showBackground: true /*! - \qmlproperty StatusIconSettings StatusBaseInput::icon + \qmlproperty StatusAssetSettings StatusBaseInput::icon This property holds a set of settings for the icon of the StatusBaseInput. */ - property StatusIconSettings icon: StatusIconSettings { + property StatusAssetSettings asset: StatusAssetSettings { width: 24 height: 24 name: "" color: Theme.palette.baseColor1 emoji: "" letterSize: emoji ? 11 : 14 - background: StatusIconBackgroundSettings { - width: 30 - height: 30 - color: Theme.palette.indirectColor1 - } + bgWidth: 30 + bgHeight: 30 + bgColor: Theme.palette.indirectColor1 } /*! @@ -318,8 +316,8 @@ Item { sourceComponent: { if (root.leftComponent) return root.leftComponent if (!root.leftIcon) return undefined - if (root.icon.emoji || root.icon.isLetterIdenticon) return identiconComponent - if (root.icon.name) return isIconSelectable ? identiconComponent : iconComponent + if (root.asset.emoji || root.asset.isLetterIdenticon) return identiconComponent + if (root.asset.name) return isIconSelectable ? identiconComponent : iconComponent return undefined } } @@ -420,8 +418,8 @@ Item { if (root.rightComponent) return root.rightComponent if (root.clearable) return clearButton if (root.leftIcon) return undefined - if (root.icon.emoji) return identiconComponent - if (root.icon.name) return isIconSelectable ? identiconComponent : iconComponent + if (root.asset.emoji) return identiconComponent + if (root.asset.name) return isIconSelectable ? identiconComponent : iconComponent return undefined } } @@ -455,14 +453,16 @@ Item { StatusSmartIdenticon { id: identicon - icon.width: 24 - icon.height: 24 - icon.background: root.icon.background - icon.color: root.icon.color - icon.letterSize: root.icon.letterSize - icon.emoji: root.icon.emoji - icon.name: !root.icon.emoji ? root.icon.name : "" - icon.isLetterIdenticon: root.icon.isLetterIdenticon + asset.width: 24 + asset.height: 24 + asset.bgWidth: root.asset.bgWidth + asset.bgHeight: root.asset.bgHeight + asset.bgColor: root.asset.bgColor + asset.color: root.asset.color + asset.letterSize: root.asset.letterSize + asset.emoji: root.asset.emoji + asset.name: !root.asset.emoji ? root.asset.name : "" + asset.isLetterIdenticon: root.asset.isLetterIdenticon name: root.letterIconName MouseArea { @@ -482,10 +482,10 @@ Item { StatusIcon { id: statusIcon - icon: root.icon.name - width: root.icon.width - height: root.icon.height - color: root.icon.color + icon: root.asset.name + width: root.asset.width + height: root.asset.height + color: root.asset.color } } } diff --git a/src/StatusQ/Controls/StatusChatCommandButton.qml b/src/StatusQ/Controls/StatusChatCommandButton.qml index 493957c2..15b54a9d 100644 --- a/src/StatusQ/Controls/StatusChatCommandButton.qml +++ b/src/StatusQ/Controls/StatusChatCommandButton.qml @@ -16,10 +16,9 @@ Rectangle { signal clicked(var mouse) - property StatusIconSettings icon: StatusIconSettings { + property StatusAssetSettings icon: StatusAssetSettings { width: 24 height: 24 - background: StatusIconBackgroundSettings {} } color: { @@ -41,14 +40,14 @@ Rectangle { } StatusRoundIcon { - icon.name: root.icon.name - icon.width: root.icon.width - icon.height: root.icon.height - icon.rotation: root.icon.rotation - icon.color: Theme.palette.white - icon.background.width: 40 - icon.background.height: 40 - icon.background.color: root.icon.color + asset.name: root.icon.name + asset.width: root.icon.width + asset.height: root.icon.height + asset.rotation: root.icon.rotation + asset.color: Theme.palette.white + asset.bgWidth: 40 + asset.bgHeight: 40 + asset.bgColor: root.icon.color anchors.top: parent.top anchors.topMargin: 8 anchors.left: parent.left diff --git a/src/StatusQ/Controls/StatusChatInfoButton.qml b/src/StatusQ/Controls/StatusChatInfoButton.qml index 20914bb1..b7c5962c 100644 --- a/src/StatusQ/Controls/StatusChatInfoButton.qml +++ b/src/StatusQ/Controls/StatusChatInfoButton.qml @@ -19,11 +19,8 @@ Rectangle { property string subTitle: "" property bool muted: false property int pinnedMessagesCount: 0 - property StatusImageSettings image: StatusImageSettings { - width: 36 - height: 36 - } - property StatusIconSettings icon: StatusIconSettings { + + property StatusAssetSettings asset: StatusAssetSettings { width: 36 height: 36 charactersLen: 2 @@ -65,8 +62,7 @@ Rectangle { anchors.left: parent.left anchors.leftMargin: 4 anchors.verticalCenter: parent.verticalCenter - image: statusChatInfoButton.image - icon: statusChatInfoButton.icon + asset: statusChatInfoButton.asset name: statusChatInfoButton.title } diff --git a/src/StatusQ/Controls/StatusFlatRoundButton.qml b/src/StatusQ/Controls/StatusFlatRoundButton.qml index f3f12de4..360ce592 100644 --- a/src/StatusQ/Controls/StatusFlatRoundButton.qml +++ b/src/StatusQ/Controls/StatusFlatRoundButton.qml @@ -7,7 +7,7 @@ import StatusQ.Components 0.1 Rectangle { id: statusFlatRoundButton - property StatusIconSettings icon: StatusIconSettings { + property StatusAssetSettings icon: StatusAssetSettings { width: 23 height: 23 rotation: 0 diff --git a/src/StatusQ/Controls/StatusFloatingButtonsSelector.qml b/src/StatusQ/Controls/StatusFloatingButtonsSelector.qml index 98ab715d..df056f4c 100644 --- a/src/StatusQ/Controls/StatusFloatingButtonsSelector.qml +++ b/src/StatusQ/Controls/StatusFloatingButtonsSelector.qml @@ -118,7 +118,7 @@ Row { hoverColor: Theme.palette.statusFloatingButtonHighlight normalColor: Theme.palette.baseColor3 icon.name: "more" - icon.background.color: "transparent" + icon.bgColor: "transparent" onClicked: popupMenu.popup(parent.x, y + height + 8) } } diff --git a/src/StatusQ/Controls/StatusIconTabButton.qml b/src/StatusQ/Controls/StatusIconTabButton.qml index c4879c68..801d630c 100644 --- a/src/StatusQ/Controls/StatusIconTabButton.qml +++ b/src/StatusQ/Controls/StatusIconTabButton.qml @@ -26,14 +26,13 @@ TabButton { id: identicon anchors.horizontalCenter: parent.horizontalCenter anchors.verticalCenter: parent.verticalCenter - image.source: statusIconTabButton.icon.source - image.width: 28 - image.height: 28 - icon.height: statusIconTabButton.icon.height - icon.width: statusIconTabButton.icon.width - icon.name: statusIconTabButton.icon.name - icon.color: (statusIconTabButton.hovered || highlighted || statusIconTabButton.checked) ? Theme.palette.primaryColor1 : statusIconTabButton.icon.color - icon.isLetterIdenticon: statusIconTabButton.name !== "" && !statusIconTabButton.icon.source.toString() + asset.isImage: (statusIconTabButton.icon.source.toString() !== "") + asset.name: asset.isImage ? + statusIconTabButton.icon.source : statusIconTabButton.icon.name + asset.width: asset.isImage ? 28 : statusIconTabButton.icon.width + asset.height: asset.isImage ? 28 : statusIconTabButton.icon.height + asset.color: (statusIconTabButton.hovered || highlighted || statusIconTabButton.checked) ? Theme.palette.primaryColor1 : statusIconTabButton.icon.color + asset.isLetterIdenticon: statusIconTabButton.name !== "" && !asset.isImage name: statusIconTabButton.name } } diff --git a/src/StatusQ/Controls/StatusItemPicker.qml b/src/StatusQ/Controls/StatusItemPicker.qml index 013c9cbe..ba6f52fd 100644 --- a/src/StatusQ/Controls/StatusItemPicker.qml +++ b/src/StatusQ/Controls/StatusItemPicker.qml @@ -39,10 +39,10 @@ Rectangle { id: root /*! - \qmlproperty string StatusItemPicker::image - This property holds the image settings information. + \qmlproperty string StatusItemPicker::asset + This property holds the asset(image/icon) settings information. */ - property StatusImageSettings image + property StatusAssetSettings asset /*! \qmlproperty string StatusItemPicker::name @@ -127,10 +127,10 @@ Rectangle { StatusIcon { id: imageItem anchors.verticalCenter: parent.verticalCenter - source: root.image && root.image.source ? root.image.source : "" - width: root.image ? root.image.width : 0 - height: root.image ? root.image.height : 0 - visible: root.image && root.image.source !== undefined + source: root.asset && root.asset.name ? root.asset.name : "" + width: root.asset ? root.asset.width : 0 + height: root.asset ? root.asset.height : 0 + visible: root.asset && root.asset.name !== undefined } StatusBaseText { diff --git a/src/StatusQ/Controls/StatusPickerButton.qml b/src/StatusQ/Controls/StatusPickerButton.qml index f8bff998..949dd9da 100644 --- a/src/StatusQ/Controls/StatusPickerButton.qml +++ b/src/StatusQ/Controls/StatusPickerButton.qml @@ -14,13 +14,13 @@ Button { property var type: StatusPickerButton.Type.Next /*! - \qmlproperty StatusImageSettings StatusPickerButton::image + \qmlproperty StatusAssetSettings StatusPickerButton::image This property holds the image settings information. */ - property StatusImageSettings image: StatusImageSettings { + property StatusAssetSettings asset: StatusAssetSettings { width: 20 height: 20 - isIdenticon: false + imgIsIdenticon: false } enum Type { @@ -51,11 +51,11 @@ Button { height: root.icon.height } StatusRoundedImage { - visible: root.image.source.toString() !== "" + visible: root.asset.name.toString() !== "" Layout.alignment: Qt.AlignVCenter - Layout.preferredWidth: root.image.width - Layout.preferredHeight: root.image.height - image.source: root.image.source + Layout.preferredWidth: root.asset.width + Layout.preferredHeight: root.asset.height + image.source: root.asset.name } StatusBaseText { Layout.fillWidth: true diff --git a/src/StatusQ/Controls/StatusRoundButton.qml b/src/StatusQ/Controls/StatusRoundButton.qml index 51dca636..f167cd61 100644 --- a/src/StatusQ/Controls/StatusRoundButton.qml +++ b/src/StatusQ/Controls/StatusRoundButton.qml @@ -7,7 +7,7 @@ import StatusQ.Components 0.1 Rectangle { id: statusRoundButton - property StatusIconSettings icon: StatusIconSettings { + property StatusAssetSettings icon: StatusAssetSettings { width: 23 height: 23 rotation: 0 diff --git a/src/StatusQ/Controls/StatusSelectableText.qml b/src/StatusQ/Controls/StatusSelectableText.qml index a56dfa43..16f80a1f 100644 --- a/src/StatusQ/Controls/StatusSelectableText.qml +++ b/src/StatusQ/Controls/StatusSelectableText.qml @@ -7,6 +7,7 @@ import StatusQ.Core 0.1 import StatusQ.Core.Theme 0.1 import StatusQ.Core.Utils 0.1 + Item { id: statusSelectableText diff --git a/src/StatusQ/Controls/StatusTabBarIconButton.qml b/src/StatusQ/Controls/StatusTabBarIconButton.qml index a2012784..00a5a135 100644 --- a/src/StatusQ/Controls/StatusTabBarIconButton.qml +++ b/src/StatusQ/Controls/StatusTabBarIconButton.qml @@ -6,7 +6,7 @@ import StatusQ.Core.Theme 0.1 Item { id: root - property StatusIconSettings icon: StatusIconSettings { + property StatusAssetSettings icon: StatusAssetSettings { width: 24 height: 24 name: "" diff --git a/src/StatusQ/Core/StatusIconSettings.qml b/src/StatusQ/Core/StatusAssetSettings.qml similarity index 75% rename from src/StatusQ/Core/StatusIconSettings.qml rename to src/StatusQ/Core/StatusAssetSettings.qml index ac12ce55..08cbb296 100644 --- a/src/StatusQ/Core/StatusIconSettings.qml +++ b/src/StatusQ/Core/StatusAssetSettings.qml @@ -4,22 +4,33 @@ import StatusQ.Core 0.1 QtObject { id: root + //icon property string name + property url source property real width property real height property color color property color disabledColor - property url source property int rotation property bool isLetterIdenticon property int letterSize: emoji ? 11 : (charactersLen == 1 ? _oneLetterSize : _twoLettersSize) property int charactersLen: 1 property string emoji property string emojiSize: _emojiSize - property StatusIconBackgroundSettings background: StatusIconBackgroundSettings {} // can't have QtObject { id: d } inside QtObject, using '_' to indicate private readonly property int _oneLetterSize: Math.max(15, root.width / 2.0) readonly property int _twoLettersSize: Math.max(12, root.width / 2.2) readonly property string _emojiSize: "%1x%1".arg(Math.max(16, root.width * 0.6)) + + //icon bg + property real bgWidth + property real bgHeight + property int bgRadius + property color bgColor: "transparent" + + //image + property bool isImage: false + property int imgStatus + property bool imgIsIdenticon: false } diff --git a/src/StatusQ/Core/StatusIconBackgroundSettings.qml b/src/StatusQ/Core/StatusIconBackgroundSettings.qml deleted file mode 100644 index f239d11c..00000000 --- a/src/StatusQ/Core/StatusIconBackgroundSettings.qml +++ /dev/null @@ -1,10 +0,0 @@ -import QtQuick 2.13 - -QtObject { - id: statusIconBackgroundSettings - - property color color: "transparent" - property real width - property real height - property int radius -} diff --git a/src/StatusQ/Core/StatusImageSettings.qml b/src/StatusQ/Core/StatusImageSettings.qml deleted file mode 100644 index 080824bd..00000000 --- a/src/StatusQ/Core/StatusImageSettings.qml +++ /dev/null @@ -1,11 +0,0 @@ -import QtQuick 2.13 - -QtObject { - id: statusImageSettings - - property url source - property real width - property real height - property bool isIdenticon: false -} - diff --git a/src/StatusQ/Core/StatusModalHeaderSettings.qml b/src/StatusQ/Core/StatusModalHeaderSettings.qml index 3e72278d..2219153c 100644 --- a/src/StatusQ/Core/StatusModalHeaderSettings.qml +++ b/src/StatusQ/Core/StatusModalHeaderSettings.qml @@ -8,15 +8,11 @@ QtObject { property bool headerImageEditable: false property bool editable: false property Component popupMenu - property StatusImageSettings image: StatusImageSettings { - width: 40 - height: 40 - isIdenticon: false - } - property StatusIconSettings icon: StatusIconSettings { + property StatusAssetSettings asset: StatusAssetSettings { width: 40 height: 40 isLetterIdenticon: false + imgIsIdenticon: false } } diff --git a/src/StatusQ/Core/StatusProfileImageSettings.qml b/src/StatusQ/Core/StatusProfileImageSettings.qml index 5da49f68..7643b60e 100644 --- a/src/StatusQ/Core/StatusProfileImageSettings.qml +++ b/src/StatusQ/Core/StatusProfileImageSettings.qml @@ -3,30 +3,25 @@ import StatusQ.Core.Theme 0.1 QtObject { id: root - - property url source property int width property int height property bool isIdenticon: false property string name property string pubkey - property string image property bool showRing: true property bool interactive: true property int colorId // TODO: default value Utils.colorIdForPubkey(pubkey) property var colorHash // TODO: default value Utils.getColorHashAsJson(pubkey) - property StatusImageSettings imageSettings: StatusImageSettings { - width: root.width - height: root.height - source: root.source - } - - readonly property StatusIconSettings iconSettings: StatusIconSettings { + property StatusAssetSettings assetSettings: StatusAssetSettings { width: root.width height: root.height + name: root.name + isImage: name.includes("data") + isLetterIdenticon: (name === "") + imgIsIdenticon: root.isIdenticon color: Theme.palette.userCustomizationColors[root.colorId] charactersLen: 2 } diff --git a/src/StatusQ/Core/qmldir b/src/StatusQ/Core/qmldir index 02a5ff11..fab4b45e 100644 --- a/src/StatusQ/Core/qmldir +++ b/src/StatusQ/Core/qmldir @@ -3,10 +3,8 @@ module StatusQ.Core StatusBaseText 0.1 StatusBaseText.qml StatusFontSettings 0.1 StatusFontSettings.qml StatusIcon 0.1 StatusIcon.qml -StatusIconSettings 0.1 StatusIconSettings.qml -StatusIconBackgroundSettings 0.1 StatusIconBackgroundSettings.qml +StatusAssetSettings 0.1 StatusAssetSettings.qml StatusIdenticonRingSettings 0.1 StatusIdenticonRingSettings.qml -StatusImageSettings 0.1 StatusImageSettings.qml StatusModalHeaderSettings 0.1 StatusModalHeaderSettings.qml StatusTooltipSettings 0.1 StatusTooltipSettings.qml StatusAppNavBarFilterModel 0.1 StatusAppNavBarFilterModel.qml diff --git a/src/StatusQ/Platform/StatusMacNotification.qml b/src/StatusQ/Platform/StatusMacNotification.qml index 3b296437..ce05dfa9 100644 --- a/src/StatusQ/Platform/StatusMacNotification.qml +++ b/src/StatusQ/Platform/StatusMacNotification.qml @@ -37,17 +37,13 @@ Rectangle { anchors.left: parent.left anchors.leftMargin: 8 anchors.verticalCenter: parent.verticalCenter - image: StatusImageSettings { - width: 40 - height: 40 - source: root.identicon - isIdenticon: true - } - icon: StatusIconSettings { + asset: StatusAssetSettings { width: 40 height: 40 + name: root.identicon letterSize: 15 color: Theme.palette.miscColor5 + imgIsIdenticon: true } name: root.name } diff --git a/src/StatusQ/Popups/StatusMenuItem.qml b/src/StatusQ/Popups/StatusMenuItem.qml index 5c4c1036..241af7af 100644 --- a/src/StatusQ/Popups/StatusMenuItem.qml +++ b/src/StatusQ/Popups/StatusMenuItem.qml @@ -12,15 +12,13 @@ Action { icon.color: "transparent" property int type: StatusMenuItem.Type.Normal property real iconRotation: 0 - property StatusImageSettings image: StatusImageSettings { - height: 16 + property StatusAssetSettings assetSettings: StatusAssetSettings { width: 16 - isIdenticon: false - } - property StatusIconSettings iconSettings: StatusIconSettings { - isLetterIdenticon: false - background: StatusIconBackgroundSettings {} + height: 16 color: "transparent" + isLetterIdenticon: false + imgIsIdenticon: false + name: statusMenuItem.icon.name } property StatusFontSettings fontSettings: StatusFontSettings {} diff --git a/src/StatusQ/Popups/StatusMenuItemDelegate.qml b/src/StatusQ/Popups/StatusMenuItemDelegate.qml index 814eeab3..519cdffc 100644 --- a/src/StatusQ/Popups/StatusMenuItemDelegate.qml +++ b/src/StatusQ/Popups/StatusMenuItemDelegate.qml @@ -34,8 +34,7 @@ MenuItem { StatusIcon { anchors.centerIn: parent width: { - let width = statusPopupMenuItem.action && statusPopupMenuItem.action.icon.width || - statusPopupMenuItem.action.iconSettings && statusPopupMenuItem.action.iconSettings.width + let width = statusPopupMenuItem.action && statusPopupMenuItem.action.assetSettings.width return !!width ? width : 18 } rotation: !!statusPopupMenuItem.action.iconRotation ? statusPopupMenuItem.action.iconRotation : 0 @@ -43,17 +42,16 @@ MenuItem { 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.icon.name !== "") { - return statusPopupMenuItem.action.icon.name; - } else if (!!statusPopupMenuItem.action.iconSettings && statusPopupMenuItem.action.iconSettings.name !== "") { - return statusPopupMenuItem.action.iconSettings.name; + } 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: { - let c = !!statusPopupMenuItem.action.iconSettings && statusPopupMenuItem.action.iconSettings.color || - !!statusPopupMenuItem.action && statusPopupMenuItem.action.icon.color + let c = !!statusPopupMenuItem.action.assetSettings && statusPopupMenuItem.action.assetSettings.color if (!Qt.colorEqual(c, "transparent")) { return c @@ -81,7 +79,7 @@ MenuItem { height: 16 color: { let subMenuItemIcon = statusPopupMenu.subMenuItemIcons[statusPopupMenuItem.subMenuIndex] - return subMenuItemIcon && subMenuItemIcon.color ? subMenuItemIcon.color : statusPopupMenuItem.action.iconSettings.background.color + return subMenuItemIcon && subMenuItemIcon.color ? subMenuItemIcon.color : statusPopupMenuItem.action.assetSettings.bgColor } name: statusPopupMenuItem.text letterSize: 11 @@ -97,13 +95,13 @@ MenuItem { implicitHeight: 24 StatusRoundedImage { anchors.centerIn: parent - width: statusPopupMenuItem.action.image.width - height: statusPopupMenuItem.action.image.height + width: statusPopupMenuItem.action.assetSettings.width + height: statusPopupMenuItem.action.assetSettings.height image.source: statusPopupMenuItem.subMenu ? statusPopupMenu.subMenuItemIcons[statusPopupMenuItem.subMenuIndex].source : - statusPopupMenuItem.action.image.source + statusPopupMenuItem.action.assetSettings.name border.width: (statusPopupMenuItem.subMenu && statusPopupMenu.subMenuItemIcons[statusPopupMenuItem.subMenuIndex].isIdenticon) || - statusPopupMenuItem.action.image.isIdenticon ? 1 : 0 + statusPopupMenuItem.action.assetSettings.imgIsIdenticon ? 1 : 0 border.color: Theme.palette.directColor7 } } @@ -114,12 +112,13 @@ MenuItem { let subMenuItemIcon = statusPopupMenu.subMenuItemIcons && statusPopupMenu.subMenuItemIcons[parent.subMenuIndex] if ((parent.subMenu && subMenuItemIcon && subMenuItemIcon.source) || - statusPopupMenuItem.action.image && !!statusPopupMenuItem.action.image.source.toString()) { + statusPopupMenuItem.action.assetSettings && !!statusPopupMenuItem.action.assetSettings.name.toString() + && statusPopupMenuItem.action.assetSettings.isImage) { return statusRoundImageCmp } return (parent.subMenu && subMenuItemIcon && subMenuItemIcon.isLetterIdenticon) || - (statusPopupMenuItem.action.iconsSettings && statusPopupMenuItem.action.iconSettings.isLetterIdenticon) ? + (statusPopupMenuItem.action.assetSettings && statusPopupMenuItem.action.assetSettings.isLetterIdenticon) ? statusLetterIdenticonCmp : indicatorComponent } anchors.verticalCenter: parent.verticalCenter @@ -127,11 +126,11 @@ MenuItem { anchors.leftMargin: 8 active: { if (enabled) { - let hasIconSettings = !!statusPopupMenuItem.action.icon.name || - (statusPopupMenuItem.action.iconSettings && - (!!statusPopupMenuItem.action.iconSettings.name || !!statusPopupMenuItem.action.iconSettings.isLetterIdenticon)) + let hasIconSettings = !!statusPopupMenuItem.action.assetSettings.name || + (statusPopupMenuItem.action.assetSettings && + (!!statusPopupMenuItem.action.assetSettings.name || !!statusPopupMenuItem.action.assetSettings.isLetterIdenticon)) - let hasImageSettings = statusPopupMenuItem.action.image && !!statusPopupMenuItem.action.image.source.toString() + let hasImageSettings = statusPopupMenuItem.action.assetSettings && !!statusPopupMenuItem.action.assetSettings.name.toString() return enabled && (parent.subMenu && !!statusPopupMenu.subMenuItemIcons[parent.subMenuIndex]) || hasIconSettings || hasImageSettings } diff --git a/src/StatusQ/Popups/StatusModal.qml b/src/StatusQ/Popups/StatusModal.qml index dc63ead5..42bbc2ed 100644 --- a/src/StatusQ/Popups/StatusModal.qml +++ b/src/StatusQ/Popups/StatusModal.qml @@ -224,8 +224,7 @@ QC.Popup { titleElide: header.titleElide subTitle: header.subTitle subTitleElide: header.subTitleElide - image: header.image - icon: header.icon + asset: header.asset popupMenu: header.popupMenu headerImageEditable: header.headerImageEditable editable: header.editable diff --git a/src/StatusQ/Popups/StatusSearchLocationMenu.qml b/src/StatusQ/Popups/StatusSearchLocationMenu.qml index 907be886..d7fa7941 100644 --- a/src/StatusQ/Popups/StatusSearchLocationMenu.qml +++ b/src/StatusQ/Popups/StatusSearchLocationMenu.qml @@ -49,11 +49,11 @@ StatusPopupMenu { } else { item.value = model.value item.text = model.title; - item.iconSettings.name = model.iconName; - item.iconSettings.color = model.iconColor; - item.iconSettings.isLetterIdenticon = !model.imageSource && !model.iconName - item.image.source = model.imageSource; - item.image.isIdenticon = model.isIdenticon; + item.assetSettings.name = !!model.imageSource ? !!model.imageSource : model.iconName; + item.assetSettings.color = model.iconColor; + item.assetSettings.isImage = !!model.imageSource; + item.assetSettings.isLetterIdenticon = !model.imageSource && !model.iconName + item.assetSettings.imgIsIdenticon = model.isIdenticon; root.insertItem(index + numDefaultItems, item); } } @@ -68,10 +68,10 @@ StatusPopupMenu { searchPopup.resetSearchSelection() searchPopup.setSearchSelection(text, "", - image.source, - image.isIdenticon, - iconSettings.name, - iconSettings.color) + "", + assetSettings.isIdenticon, + assetSettings.name, + assetSettings.color) root.itemClicked(value, "") } } @@ -102,10 +102,10 @@ StatusPopupMenu { sourceComponent: StatusSearchPopupMenuItem { value: model.value text: model.text - image.source: model.imageSource - iconSettings.name: model.iconName - iconSettings.color: model.isUserIcon ? Theme.palette.userCustomizationColors[model.colorId] : model.iconColor - iconSettings.charactersLen: model.isUserIcon ? 2 : 1 + assetSettings.isImage: !!model.imageSource + assetSettings.name: !!model.imageSource ? model.imageSource : model.iconName + assetSettings.color: model.isUserIcon ? Theme.palette.userCustomizationColors[model.colorId] : model.iconColor + assetSettings.charactersLen: model.isUserIcon ? 2 : 1 ringSettings.ringSpecModel: model.colorHash onTriggered: { searchPopup.resetSearchSelection() diff --git a/src/StatusQ/Popups/StatusSearchPopup.qml b/src/StatusQ/Popups/StatusSearchPopup.qml index 02908764..b3876c18 100644 --- a/src/StatusQ/Popups/StatusSearchPopup.qml +++ b/src/StatusQ/Popups/StatusSearchPopup.qml @@ -47,12 +47,12 @@ StatusModal { colorHash = "") { searchSelectionButton.primaryText = text searchSelectionButton.secondaryText = secondaryText - searchSelectionButton.image.source = imageSource - searchSelectionButton.image.isIdenticon = isIdenticon - searchSelectionButton.iconSettings.name = iconName - searchSelectionButton.iconSettings.color = isUserIcon ? Theme.palette.userCustomizationColors[colorId] : iconColor - searchSelectionButton.iconSettings.isLetterIdenticon = !iconName && !imageSource - searchSelectionButton.iconSettings.charactersLen = isUserIcon ? 2 : 1 + searchSelectionButton.asset.imgIsIdenticon = isIdenticon + searchSelectionButton.asset.isImage = !!imageSource + searchSelectionButton.asset.name = !!imageSource ? imageSource : iconName + searchSelectionButton.asset.color = isUserIcon ? Theme.palette.userCustomizationColors[colorId] : iconColor + searchSelectionButton.asset.isLetterIdenticon = !iconName && !imageSource + searchSelectionButton.asset.charactersLen = isUserIcon ? 2 : 1 searchSelectionButton.ringSettings.ringSpecModel = !!colorHash ? JSON.parse(colorHash) : {} } @@ -131,19 +131,13 @@ StatusModal { property string primaryText: "" property string secondaryText: "" - property StatusIconSettings iconSettings: StatusIconSettings { + property StatusAssetSettings asset: StatusAssetSettings { width: 16 height: 16 name: "" isLetterIdenticon: false letterSize: charactersLen > 1 ? 8 : 11 - } - - property StatusImageSettings image: StatusImageSettings { - width: 16 - height: 16 - source: "" - isIdenticon: false + imgIsIdenticon: false } property alias ringSettings: identicon.ringSettings @@ -186,13 +180,11 @@ StatusModal { id: identicon Layout.preferredWidth: active ? 16 : 0 Layout.preferredHeight: 16 - image: searchOptionsMenuButton.image - icon: searchOptionsMenuButton.iconSettings + asset: searchOptionsMenuButton.asset name: searchOptionsMenuButton.primaryText active: searchOptionsMenuButton.primaryText !== defaultSearchLocationText && - (searchOptionsMenuButton.iconSettings.name || - searchOptionsMenuButton.iconSettings.isLetterIdenticon || - !!searchOptionsMenuButton.image.source.toString()) + (searchOptionsMenuButton.asset.name || + searchOptionsMenuButton.asset.isLetterIdenticon) } StatusBaseText { @@ -286,16 +278,17 @@ StatusModal { statusListItemSubTitle.height: model.content !== "" ? 20 : 0 statusListItemSubTitle.elide: Text.ElideRight statusListItemSubTitle.color: Theme.palette.directColor1 - icon.isLetterIdenticon: (model.image === "") - icon.color: model.isUserIcon ? Theme.palette.userCustomizationColors[model.colorId] : model.color - icon.charactersLen: model.isUserIcon ? 2 : 1 + asset.isLetterIdenticon: (model.image === "") + asset.color: model.isUserIcon ? Theme.palette.userCustomizationColors[model.colorId] : model.color + asset.charactersLen: model.isUserIcon ? 2 : 1 titleAsideText: root.formatTimestampFn(model.time) - image.source: model.image + asset.name: model.image + asset.isImage: !!model.image badge.primaryText: model.badgePrimaryText badge.secondaryText: model.badgeSecondaryText - badge.image.source: model.badgeImage - badge.icon.isLetterIdenticon: model.badgeIsLetterIdenticon - badge.icon.color: model.badgeIconColor + badge.asset.name: model.badgeImage + badge.asset.isLetterIdenticon: model.badgeIsLetterIdenticon + badge.asset.color: model.badgeIconColor ringSettings.ringSpecModel: model.colorHash onClicked: { diff --git a/src/StatusQ/Popups/StatusSearchPopupMenuItem.qml b/src/StatusQ/Popups/StatusSearchPopupMenuItem.qml index 4b37f5b3..dba6b1db 100644 --- a/src/StatusQ/Popups/StatusSearchPopupMenuItem.qml +++ b/src/StatusQ/Popups/StatusSearchPopupMenuItem.qml @@ -11,20 +11,13 @@ MenuItem { property string value: "" - property StatusImageSettings image: StatusImageSettings { + property StatusAssetSettings assetSettings: StatusAssetSettings { height: 16 width: 16 - isIdenticon: false - } - - property StatusIconSettings iconSettings: StatusIconSettings { - height: 16 - width: 16 - isLetterIdenticon: (root.image.source.toString() === "" - && root.iconSettings.name.toString() === "") - background: StatusIconBackgroundSettings {} + isLetterIdenticon: (name.toString() === "") color: (name === "channel") ? Theme.palette.directColor1 : "transparent" letterSize: charactersLen > 1 ? 8 : 11 + imgIsIdenticon: false } property alias ringSettings: identicon.ringSettings @@ -37,14 +30,13 @@ MenuItem { anchors.left: parent.left anchors.leftMargin: 12 Item { - Layout.preferredWidth: root.iconSettings.width - Layout.preferredHeight: root.iconSettings.height + Layout.preferredWidth: root.assetSettings.width + Layout.preferredHeight: root.assetSettings.height Layout.alignment: Qt.AlignVCenter StatusSmartIdenticon { id: identicon anchors.centerIn: parent - image: root.image - icon: root.iconSettings + asset: root.assetSettings name: root.text ringSettings: root.ringSettings } diff --git a/src/StatusQ/Popups/statusModal/StatusImageWithTitle.qml b/src/StatusQ/Popups/statusModal/StatusImageWithTitle.qml index 8e3f8a8b..edd7f5cb 100644 --- a/src/StatusQ/Popups/statusModal/StatusImageWithTitle.qml +++ b/src/StatusQ/Popups/statusModal/StatusImageWithTitle.qml @@ -17,16 +17,11 @@ Row { signal editButtonClicked signal headerImageClicked - property StatusImageSettings image: StatusImageSettings { - width: 40 - height: 40 - isIdenticon: false - } - - property StatusIconSettings icon: StatusIconSettings { + property StatusAssetSettings asset: StatusAssetSettings { width: 40 height: 40 isLetterIdenticon: false + imgIsIdenticon: false } spacing: 8 @@ -36,21 +31,21 @@ Row { anchors.verticalCenter: parent.verticalCenter width: active ? 40 : 0 sourceComponent: { - if (statusImageWithTitle.icon.isLetterIdenticon) { + if (statusImageWithTitle.asset.isLetterIdenticon) { return statusLetterIdenticon } return statusRoundedImageCmp } - active: statusImageWithTitle.icon.isLetterIdenticon || - !!statusImageWithTitle.image.source.toString() + active: statusImageWithTitle.asset.isLetterIdenticon || + !!statusImageWithTitle.asset.name } Component { id: statusLetterIdenticon StatusLetterIdenticon { - width: statusImageWithTitle.icon.width - height: statusImageWithTitle.icon.height - color: statusImageWithTitle.icon.background.color + width: statusImageWithTitle.asset.width + height: statusImageWithTitle.asset.height + color: statusImageWithTitle.asset.bgColor name: statusImageWithTitle.title } } @@ -58,18 +53,16 @@ Row { Component { id: statusRoundedImageCmp Item { - width: statusImageWithTitle.image.width - height: statusImageWithTitle.image.height + width: statusImageWithTitle.asset.width + height: statusImageWithTitle.asset.height StatusRoundedImage { id: statusRoundedImage objectName: "headerImage" - image.source: statusImageWithTitle.image.source - width: statusImageWithTitle.image.width - height: statusImageWithTitle.image.height - color: statusImageWithTitle.image.isIdenticon ? - Theme.palette.statusRoundedImage.backgroundColor : - "transparent" - border.width: statusImageWithTitle.image.isIdenticon ? 1 : 0 + image.source: statusImageWithTitle.asset.name + width: statusImageWithTitle.asset.width + height: statusImageWithTitle.asset.height + color: Theme.palette.statusRoundedImage.backgroundColor + border.width: 1 border.color: Theme.palette.directColor7 showLoadingIndicator: true } diff --git a/src/StatusQ/Popups/statusModal/StatusModalHeader.qml b/src/StatusQ/Popups/statusModal/StatusModalHeader.qml index e4ba23c3..f026c943 100644 --- a/src/StatusQ/Popups/statusModal/StatusModalHeader.qml +++ b/src/StatusQ/Popups/statusModal/StatusModalHeader.qml @@ -15,8 +15,7 @@ Rectangle { property int subTitleElide property alias actionButton: actionButtonLoader.sourceComponent - property alias image: imageWithTitle.image - property alias icon: imageWithTitle.icon + property alias asset: imageWithTitle.asset property bool editable: false property alias headerImageEditable: imageWithTitle.headerImageEditable property bool hasCloseButton: true diff --git a/src/statusq.qrc b/src/statusq.qrc index 881f5c7d..48f2c024 100644 --- a/src/statusq.qrc +++ b/src/statusq.qrc @@ -135,10 +135,7 @@