From 32e69e6a8edb3dd036d697a5cb434a2eb7366259 Mon Sep 17 00:00:00 2001 From: Khushboo Mehta Date: Wed, 20 Oct 2021 16:35:54 +0200 Subject: [PATCH] feat(StatusSmartIdenticon): Created a new StatusQ componnent to accomodate: 1. A StatusRoundedImage 2. StatusRoundIcon 3. LetterIdenticon Fallback in case of an error in loading Image to the LetterIdenticon --- ui/StatusQ/sandbox/ListItems.qml | 2 +- .../StatusQ/Components/StatusChatListItem.qml | 52 +++---------- .../Components/StatusExpandableItem.qml | 39 ++-------- .../src/StatusQ/Components/StatusListItem.qml | 57 ++------------ .../Components/StatusSmartIdenticon.qml | 78 +++++++++++++++++++ ui/StatusQ/src/StatusQ/Components/qmldir | 1 + .../StatusQ/Controls/StatusChatInfoButton.qml | 56 ++++--------- .../StatusQ/Controls/StatusIconTabButton.qml | 60 +++----------- .../src/StatusQ/Core/StatusIconSettings.qml | 1 + .../src/StatusQ/Popups/StatusSearchPopup.qml | 65 +++------------- .../Popups/StatusSearchPopupMenuItem.qml | 36 +++------ 11 files changed, 154 insertions(+), 293 deletions(-) create mode 100644 ui/StatusQ/src/StatusQ/Components/StatusSmartIdenticon.qml diff --git a/ui/StatusQ/sandbox/ListItems.qml b/ui/StatusQ/sandbox/ListItems.qml index 1b77c386de..0d7ac34ff4 100644 --- a/ui/StatusQ/sandbox/ListItems.qml +++ b/ui/StatusQ/sandbox/ListItems.qml @@ -286,7 +286,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I StatusListItem { title: "Title" icon.isLetterIdenticon: true - icon.background.color: "orange" + icon.color: "orange" } StatusListItem { diff --git a/ui/StatusQ/src/StatusQ/Components/StatusChatListItem.qml b/ui/StatusQ/src/StatusQ/Components/StatusChatListItem.qml index 3d946a1dc2..735042d034 100644 --- a/ui/StatusQ/src/StatusQ/Components/StatusChatListItem.qml +++ b/ui/StatusQ/src/StatusQ/Components/StatusChatListItem.qml @@ -20,9 +20,15 @@ Rectangle { property bool hasUnreadMessages: false property bool hasMention: false property bool muted: false - property StatusImageSettings image: StatusImageSettings {} + property StatusImageSettings image: StatusImageSettings { + width: 24 + height: 24 + } property StatusIconSettings icon: StatusIconSettings { + width: 24 + height: 24 color: Theme.palette.miscColor5 + letterSize: 15 } property int type: StatusChatListItem.Type.PublicChat property bool highlighted: false @@ -67,50 +73,14 @@ Rectangle { onClicked: statusChatListItem.clicked(mouse) - Loader { + StatusSmartIdenticon { id: identicon anchors.left: parent.left anchors.leftMargin: 8 anchors.verticalCenter: parent.verticalCenter - - sourceComponent: !!statusChatListItem.image.source.toString() ? - statusRoundedImageCmp : statusLetterIdenticonCmp - } - - Component { - id: statusLetterIdenticonCmp - StatusLetterIdenticon { - height: 24 - width: 24 - name: statusChatListItem.name - letterSize: 15 - color: statusChatListItem.icon.color - } - } - - Component { - id: statusRoundedImageCmp - Item { - height: 24 - width: 24 - StatusRoundedImage { - id: statusRoundedImage - width: parent.width - height: parent.height - image.source: statusChatListItem.image.source - showLoadingIndicator: true - color: statusChatListItem.image.isIdenticon ? - Theme.palette.statusRoundedImage.backgroundColor : - "transparent" - border.width: statusChatListItem.image.isIdenticon ? 1 : 0 - border.color: Theme.palette.directColor7 - } - - Loader { - sourceComponent: statusLetterIdenticonCmp - active: statusRoundedImage.image.status === Image.Error - } - } + image: statusChatListItem.image + icon: statusChatListItem.icon + name: statusChatListItem.name } StatusIcon { diff --git a/ui/StatusQ/src/StatusQ/Components/StatusExpandableItem.qml b/ui/StatusQ/src/StatusQ/Components/StatusExpandableItem.qml index 93ab180a9c..33d78faec5 100644 --- a/ui/StatusQ/src/StatusQ/Components/StatusExpandableItem.qml +++ b/ui/StatusQ/src/StatusQ/Components/StatusExpandableItem.qml @@ -18,6 +18,8 @@ Rectangle { property bool expanded: false property StatusIconSettings icon: StatusIconSettings { + width: !!statusExpandableItem.icon.name.toString() ? 24 : 40 + height: !!statusExpandableItem.icon.name.toString() ? 24 : 40 color: Theme.palette.directColor1 background: StatusIconBackgroundSettings { width: 32 @@ -55,44 +57,17 @@ Rectangle { visible: (statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) } - Loader { + + StatusSmartIdenticon { id: identicon anchors.top: parent.top anchors.topMargin: 25 anchors.left: parent.left anchors.leftMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? 0 : 11 + image: statusExpandableItem.image + icon: statusExpandableItem.icon + name: primaryText.text active: (statusExpandableItem.type !== StatusExpandableItem.Type.Tertiary) - sourceComponent: !!statusExpandableItem.image.source.toString() ? roundedImage : - !!statusExpandableItem.icon.name.toString() ? roundedIcon : letterIdenticon - } - - Component { - id: roundedImage - StatusRoundedImage { - image.source: statusExpandableItem.image.source - } - } - - Component { - id: roundedIcon - StatusRoundIcon { - icon.background.width: statusExpandableItem.icon.background.width - icon.background.height: statusExpandableItem.icon.background.height - icon.background.color: statusExpandableItem.icon.background.color - icon.color: statusExpandableItem.icon.color - icon.name: statusExpandableItem.icon.name - } - } - - Component { - id: letterIdenticon - StatusLetterIdenticon { - height: 40 - width: 40 - name: primaryText.text - letterSize: 20 - color: Theme.palette.miscColor5 - } } StatusBaseText { diff --git a/ui/StatusQ/src/StatusQ/Components/StatusListItem.qml b/ui/StatusQ/src/StatusQ/Components/StatusListItem.qml index 38431af2b3..bfb00df8b2 100644 --- a/ui/StatusQ/src/StatusQ/Components/StatusListItem.qml +++ b/ui/StatusQ/src/StatusQ/Components/StatusListItem.qml @@ -47,11 +47,12 @@ Rectangle { property real rightPadding: 16 property bool enabled: true property StatusIconSettings icon: StatusIconSettings { - height: 20 - width: 20 + height: isLetterIdenticon ? 40 : 20 + width: isLetterIdenticon ? 40 : 20 rotation: 0 isLetterIdenticon: false - color: type === StatusListItem.Type.Danger ? + letterSize: 21 + color: isLetterIdenticon ? background.color : type === StatusListItem.Type.Danger ? Theme.palette.dangerColor1 : Theme.palette.primaryColor1 background: StatusIconBackgroundSettings { width: 40 @@ -110,62 +111,20 @@ Rectangle { statusListItem.clicked(statusListItem.itemId) } - Loader { + StatusSmartIdenticon { id: iconOrImage anchors.left: parent.left anchors.leftMargin: statusListItem.leftPadding anchors.top: parent.top anchors.topMargin: 12 - sourceComponent: { - if (statusListItem.icon.isLetterIdenticon) { - return statusLetterIdenticon - } - return !!statusListItem.icon.name ? statusRoundedIcon : statusRoundedImage - } - + image: statusListItem.image + icon: statusListItem.icon + name: statusListItem.title active: statusListItem.icon.isLetterIdenticon || !!statusListItem.icon.name || !!statusListItem.image.source.toString() } - Component { - id: statusRoundedIcon - StatusRoundIcon { - icon.width: statusListItem.icon.width - icon.height: statusListItem.icon.height - icon.name: statusListItem.icon.name - icon.rotation: statusListItem.icon.rotation - icon.color: statusListItem.icon.color - color: statusListItem.icon.background.color - width: statusListItem.icon.background.width - height: statusListItem.icon.background.height - } - } - - Component { - id: statusRoundedImage - StatusRoundedImage { - image.source: statusListItem.image.source - image.height: statusListItem.image.height - image.width: statusListItem.image.width - color: statusListItem.image.isIdenticon ? - Theme.palette.statusRoundedImage.backgroundColor : - "transparent" - border.width: statusListItem.image.isIdenticon ? 1 : 0 - border.color: Theme.palette.directColor7 - } - } - - Component { - id: statusLetterIdenticon - StatusLetterIdenticon { - width: statusListItem.icon.background.width - height: statusListItem.icon.background.height - color: statusListItem.icon.background.color - name: statusListItem.title - } - } - Item { id: statusListItemTitleArea anchors.left: iconOrImage.active ? iconOrImage.right : parent.left diff --git a/ui/StatusQ/src/StatusQ/Components/StatusSmartIdenticon.qml b/ui/StatusQ/src/StatusQ/Components/StatusSmartIdenticon.qml new file mode 100644 index 0000000000..c058af76cf --- /dev/null +++ b/ui/StatusQ/src/StatusQ/Components/StatusSmartIdenticon.qml @@ -0,0 +1,78 @@ +import QtQuick 2.13 +import StatusQ.Core 0.1 +import StatusQ.Core.Theme 0.1 + +Loader { + id: statusSmartIdenticon + + property string name: "" + + property StatusIconSettings icon: StatusIconSettings { + width: 40 + height: 40 + } + + property StatusImageSettings image: StatusImageSettings { + width: 40 + height: 40 + } + + sourceComponent: statusSmartIdenticon.icon.isLetterIdenticon ? letterIdenticon : + !!statusSmartIdenticon.image.source.toString() ? roundedImage : + !!statusSmartIdenticon.icon.name.toString() ? roundedIcon : letterIdenticon + + Component { + id: roundedImage + Item { + width: statusSmartIdenticon.image.width + height: statusSmartIdenticon.image.height + StatusRoundedImage { + id: statusRoundImage + width: parent.width + height: parent.height + image.source: statusSmartIdenticon.image.source + showLoadingIndicator: true + border.width: statusSmartIdenticon.image.isIdenticon ? 1 : 0 + border.color: Theme.palette.directColor7 + color: statusSmartIdenticon.image.isIdenticon ? + Theme.palette.statusRoundedImage.backgroundColor : + "transparent" + } + Loader { + anchors.centerIn: parent + active: statusRoundImage.image.status === Image.Error + sourceComponent: letterIdenticon + onLoaded: { + item.color = Theme.palette.miscColor5 + item.width = statusSmartIdenticon.image.width + item.height = statusSmartIdenticon.image.height + } + } + } + } + + 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 + } + } + + Component { + id: letterIdenticon + StatusLetterIdenticon { + width: statusSmartIdenticon.icon.width + height: statusSmartIdenticon.icon.height + color: statusSmartIdenticon.icon.color + name: statusSmartIdenticon.name + letterSize: statusSmartIdenticon.icon.letterSize + } + } +} diff --git a/ui/StatusQ/src/StatusQ/Components/qmldir b/ui/StatusQ/src/StatusQ/Components/qmldir index 003e8003b6..de76bcd3d4 100644 --- a/ui/StatusQ/src/StatusQ/Components/qmldir +++ b/ui/StatusQ/src/StatusQ/Components/qmldir @@ -22,3 +22,4 @@ StatusRoundedImage 0.1 StatusRoundedImage.qml StatusMacWindowButtons 0.1 StatusMacWindowButtons.qml StatusListItemBadge 0.1 StatusListItemBadge.qml StatusExpandableItem 0.1 StatusExpandableItem.qml +StatusSmartIdenticon 0.1 StatusSmartIdenticon.qml diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusChatInfoButton.qml b/ui/StatusQ/src/StatusQ/Controls/StatusChatInfoButton.qml index 517b4bf672..1758d9f2e7 100644 --- a/ui/StatusQ/src/StatusQ/Controls/StatusChatInfoButton.qml +++ b/ui/StatusQ/src/StatusQ/Controls/StatusChatInfoButton.qml @@ -18,8 +18,15 @@ Rectangle { property string subTitle: "" property bool muted: false property int pinnedMessagesCount: 0 - property StatusImageSettings image: StatusImageSettings {} - property StatusIconSettings icon: StatusIconSettings {} + property StatusImageSettings image: StatusImageSettings { + width: 36 + height: 36 + } + property StatusIconSettings icon: StatusIconSettings { + width: 36 + height: 36 + letterSize: 20 + } property int type: StatusChatInfoButton.Type.PublicChat property alias tooltip: statusToolTip property alias sensor: sensor @@ -50,51 +57,14 @@ Rectangle { onClicked: statusChatInfoButton.clicked(mouse) - Loader { + StatusSmartIdenticon { id: identicon - anchors.left: parent.left anchors.leftMargin: 4 anchors.verticalCenter: parent.verticalCenter - - sourceComponent: !!statusChatInfoButton.image.source.toString() ? - statusRoundImageComponent : - statusLetterIdenticonComponent - } - - Component { - id: statusRoundImageComponent - - Item { - width: 36 - height: 36 - StatusRoundedImage { - id: statusRoundImage - width: parent.width - height: parent.height - image.source: statusChatInfoButton.image.source - showLoadingIndicator: true - border.width: statusChatInfoButton.image.isIdenticon ? 1 : 0 - border.color: Theme.palette.directColor7 - } - Loader { - sourceComponent: statusLetterIdenticonComponent - anchors.verticalCenter: parent.verticalCenter - anchors.horizontalCenter: parent.horizontalCenter - active: statusRoundImage.image.status === Image.Error - } - } - } - - Component { - id: statusLetterIdenticonComponent - - StatusLetterIdenticon { - width: 36 - height: 36 - name: statusChatInfoButton.title - color: statusChatInfoButton.icon.color - } + image: statusChatInfoButton.image + icon: statusChatInfoButton.icon + name: statusChatInfoButton.title } Item { diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusIconTabButton.qml b/ui/StatusQ/src/StatusQ/Controls/StatusIconTabButton.qml index dcb031013c..f121ba57a6 100644 --- a/ui/StatusQ/src/StatusQ/Controls/StatusIconTabButton.qml +++ b/ui/StatusQ/src/StatusQ/Controls/StatusIconTabButton.qml @@ -20,56 +20,20 @@ TabButton { contentItem: Item { anchors.fill: parent - - Loader { - active: true + StatusSmartIdenticon { + id: identicon anchors.horizontalCenter: parent.horizontalCenter anchors.verticalCenter: parent.verticalCenter - sourceComponent: statusIconTabButton.name !== "" && !icon.source.toString() ? letterIdenticon : - !!icon.source.toString() ? imageIcon : defaultIcon - } - - Component { - id: defaultIcon - StatusIcon { - icon: statusIconTabButton.icon.name - height: statusIconTabButton.icon.height - width: statusIconTabButton.icon.width - color: (statusIconTabButton.hovered || highlighted || statusIconTabButton.checked) ? Theme.palette.primaryColor1 : statusIconTabButton.icon.color - } - } - - Component { - id: imageIcon - Item { - width: 28 - height: 28 - StatusRoundedImage { - id: statusRoundImage - showLoadingIndicator: true - width: parent.width - height: parent.height - image.source: icon.source - } - Loader { - sourceComponent:letterIdenticon - - anchors.verticalCenter: parent.verticalCenter - anchors.horizontalCenter: parent.horizontalCenter - active: statusRoundImage.image.status === Image.Error - } - } - } - - Component { - id: letterIdenticon - StatusLetterIdenticon { - width: 26 - height: 26 - letterSize: 15 - name: statusIconTabButton.name - color: (statusIconTabButton.hovered || highlighted || statusIconTabButton.checked) ? Theme.palette.primaryColor1 : statusIconTabButton.icon.color - } + 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() + icon.letterSize: 15 + name: statusIconTabButton.name } } diff --git a/ui/StatusQ/src/StatusQ/Core/StatusIconSettings.qml b/ui/StatusQ/src/StatusQ/Core/StatusIconSettings.qml index 7e97ca4358..53b9f3e205 100644 --- a/ui/StatusQ/src/StatusQ/Core/StatusIconSettings.qml +++ b/ui/StatusQ/src/StatusQ/Core/StatusIconSettings.qml @@ -12,5 +12,6 @@ QtObject { property url source property int rotation property bool isLetterIdenticon + property int letterSize property StatusIconBackgroundSettings background: StatusIconBackgroundSettings {} } diff --git a/ui/StatusQ/src/StatusQ/Popups/StatusSearchPopup.qml b/ui/StatusQ/src/StatusQ/Popups/StatusSearchPopup.qml index 0af4c0a24f..747409e801 100644 --- a/ui/StatusQ/src/StatusQ/Popups/StatusSearchPopup.qml +++ b/ui/StatusQ/src/StatusQ/Popups/StatusSearchPopup.qml @@ -113,11 +113,16 @@ StatusModal { property string primaryText: "" property string secondaryText: "" property StatusIconSettings iconSettings: StatusIconSettings { + width: 16 + height: 16 name: "" isLetterIdenticon: false + letterSize: 11 } property StatusImageSettings image: StatusImageSettings { + width: 16 + height: 16 source: "" isIdenticon: false } @@ -155,67 +160,17 @@ StatusModal { font.weight: Font.Medium } - Loader { + StatusSmartIdenticon { + id: identicon Layout.preferredWidth: active ? 16 : 0 Layout.preferredHeight: 16 + image: searchOptionsMenuButton.image + icon: searchOptionsMenuButton.iconSettings + name: searchOptionsMenuButton.primaryText active: searchOptionsMenuButton.primaryText !== defaultSearchLocationText && (searchOptionsMenuButton.iconSettings.name || searchOptionsMenuButton.iconSettings.isLetterIdenticon || !!searchOptionsMenuButton.image.source.toString()) - - sourceComponent: { - if (!!searchOptionsMenuButton.image.source.toString()) { - return statusRoundedImageCmp - } - if (!!searchOptionsMenuButton.iconSettings.isLetterIdenticon || !searchOptionsMenuButton.iconSettings.name) { - return statusLetterIdenticonCmp - } - return statusIconCmp - } - } - - Component { - id: statusIconCmp - StatusIcon { - width: 16 - icon: searchOptionsMenuButton.iconSettings.name - color: searchOptionsMenuButton.iconSettings.color - } - } - - Component { - id: statusRoundedImageCmp - Item { - width: 16 - height: 16 - StatusRoundedImage { - id: statusRoundedImage - implicitWidth: parent.width - implicitHeight: parent.height - image.source: searchOptionsMenuButton.image.source - color: searchOptionsMenuButton.image.isIdenticon ? - Theme.palette.statusRoundedImage.backgroundColor : - "transparent" - border.width: searchOptionsMenuButton.image.isIdenticon ? 1 : 0 - border.color: Theme.palette.directColor7 - } - - Loader { - sourceComponent: statusLetterIdenticonCmp - active: statusRoundedImage.image.status === Image.Error - } - } - } - - Component { - id: statusLetterIdenticonCmp - StatusLetterIdenticon { - implicitWidth: 16 - implicitHeight: 16 - letterSize: 11 - color: searchOptionsMenuButton.iconSettings.color - name: searchOptionsMenuButton.primaryText - } } StatusBaseText { diff --git a/ui/StatusQ/src/StatusQ/Popups/StatusSearchPopupMenuItem.qml b/ui/StatusQ/src/StatusQ/Popups/StatusSearchPopupMenuItem.qml index 879449689a..38b0843b7d 100644 --- a/ui/StatusQ/src/StatusQ/Popups/StatusSearchPopupMenuItem.qml +++ b/ui/StatusQ/src/StatusQ/Popups/StatusSearchPopupMenuItem.qml @@ -22,7 +22,8 @@ MenuItem { isLetterIdenticon: (root.image.source.toString() === "" && root.iconSettings.name.toString() === "") background: StatusIconBackgroundSettings {} - color: "transparent" + color: (name === "channel") ? Theme.palette.directColor1 : "transparent" + letterSize: 11 } background: Rectangle { @@ -32,30 +33,17 @@ MenuItem { contentItem: RowLayout { anchors.left: parent.left anchors.leftMargin: 12 - StatusIcon { - Layout.preferredWidth: visible ? root.iconSettings.width : 0 - Layout.preferredHeight: visible ? root.iconSettings.height : 0 + Item { + Layout.preferredWidth: root.iconSettings.width + Layout.preferredHeight: root.iconSettings.height Layout.alignment: Qt.AlignVCenter - visible: !!root.iconSettings.name && !root.image.source.toString() - icon: root.iconSettings.name - color: (icon === "channel")? Theme.palette.directColor1 : root.iconSettings.color - } - StatusRoundedImage { - Layout.preferredWidth: visible ? root.image.width : 0 - Layout.preferredHeight: visible ? root.image.height : 0 - Layout.alignment: Qt.AlignVCenter - visible: root.image.source.toString() !== "" - image.source: root.image.source - border.width: root.image.isIdenticon ? 1 : 0 - border.color: Theme.palette.directColor7 - } - StatusLetterIdenticon { - Layout.preferredWidth: visible ? root.iconSettings.width : 0 - Layout.preferredHeight: visible ? root.iconSettings.height : 0 - visible: root.iconSettings.isLetterIdenticon && !root.iconSettings.name && !root.image.source.toString() - color: root.iconSettings.color - name: root.text - letterSize: 11 + StatusSmartIdenticon { + id: identicon + anchors.centerIn: parent + image: root.image + icon: root.iconSettings + name: root.text + } } StatusBaseText { Layout.fillWidth: true