refactor: remove StatusIconButton from ui/shared/status

fixes #3832
This commit is contained in:
Khushboo Mehta 2021-10-18 12:34:16 +02:00 committed by Iuri Matias
parent 07965a97f7
commit 14b49b800a
24 changed files with 309 additions and 373 deletions

@ -1 +1 @@
Subproject commit e945577e3c97d092bae29d8eb8a475545f3a39e3 Subproject commit 64b2a51c09aca1d66a88b38c449b0579c4222010

View File

@ -1,7 +1,11 @@
import QtQuick 2.1 import QtQuick 2.1
import QtQuick.Controls 2.13 import QtQuick.Controls 2.13
import QtGraphicalEffects 1.13 import QtGraphicalEffects 1.13
import utils 1.0 import utils 1.0
import StatusQ.Controls 0.1
import "../../../../shared" import "../../../../shared"
import "../../../../shared/panels" import "../../../../shared/panels"
import "../../../../shared/status/core" import "../../../../shared/status/core"
@ -101,15 +105,16 @@ Rectangle {
anchors.bottomMargin: 2 anchors.bottomMargin: 2
} }
StatusIconButton { StatusFlatRoundButton {
width: 32
height: 32
id: optionsBtn id: optionsBtn
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
anchors.right: parent.right anchors.right: parent.right
anchors.rightMargin: Style.current.smallPadding anchors.rightMargin: Style.current.smallPadding
icon.name: "dots-icon" icon.name: "more"
onClicked: { type: StatusFlatRoundButton.Type.Tertiary
optionsButtonClicked(optionsBtn.x) onClicked: optionsButtonClicked(optionsBtn.x)
}
} }
} }

View File

@ -1,5 +1,6 @@
import QtQuick 2.13 import QtQuick 2.13
import QtQuick.Controls.Styles 1.0 import QtQuick.Controls.Styles 1.0
import "../../../../../shared" import "../../../../../shared"
import "../../../../../shared/panels" import "../../../../../shared/panels"
import "../../../../../shared/status" import "../../../../../shared/status"
@ -7,6 +8,8 @@ import "../"
import utils 1.0 import utils 1.0
import StatusQ.Controls 0.1
TabViewStyle { TabViewStyle {
id: tabViewStyle id: tabViewStyle
@ -63,19 +66,19 @@ TabViewStyle {
} }
StatusIconButton { StatusFlatRoundButton {
id: closeTabBtn id: closeTabBtn
//% "Start Page" width: 16
visible: control.count > 1 || styleData.title !== qsTrId("start-page") height: 16
enabled: visible
icon.name: "browser/close"
iconColor: Style.current.textColor
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
anchors.right: parent.right anchors.right: parent.right
anchors.rightMargin: Style.current.halfPadding anchors.rightMargin: Style.current.halfPadding
icon.name: "close"
type: StatusFlatRoundButton.Type.Quaternary
//% "Start Page"
visible: control.count > 1 || styleData.title !== qsTrId("start-page")
enabled: visible
onClicked: control.closeButtonClicked(styleData.index) onClicked: control.closeButtonClicked(styleData.index)
width: 16
height: 16
} }
} }
@ -86,13 +89,15 @@ TabViewStyle {
anchors.right: parent.right anchors.right: parent.right
sourceComponent: Component { sourceComponent: Component {
StatusIconButton { StatusFlatRoundButton {
icon.name: "browser/close" id: addButton
iconColor: Style.current.textColor
iconRotation: 45
onClicked: control.openNewTabClicked()
width: 16 width: 16
height: 16 height: 16
icon.name: "close"
icon.rotation: 45
color: "transparent"
type: StatusFlatRoundButton.Type.Quaternary
onClicked: control.openNewTabClicked()
} }
} }
} }

View File

@ -62,38 +62,42 @@ Rectangle {
} }
} }
StatusIconButton { StatusQControls.StatusFlatRoundButton {
id: backButton id: backButton
icon.name: "leave_chat" width: 32
disabledColor: Style.current.lightGrey height: 32
icon.height: 20
icon.width: 20
icon.name: "left"
icon.disabledColor: Style.current.lightGrey
type: StatusQControls.StatusFlatRoundButton.Type.Tertiary
enabled: currentWebView && currentWebView.canGoBack
Layout.leftMargin: browserHeader.innerMargin
onClicked: currentWebView.goBack() onClicked: currentWebView.goBack()
onPressAndHold: { onPressAndHold: {
if (currentWebView && (currentWebView.canGoBack || currentWebView.canGoForward)){ if (currentWebView && (currentWebView.canGoBack || currentWebView.canGoForward)){
historyMenu.popup(backButton.x, backButton.y + backButton.height) historyMenu.popup(backButton.x, backButton.y + backButton.height)
} }
} }
enabled: currentWebView && currentWebView.canGoBack
width: 24
height: 24
Layout.leftMargin: browserHeader.innerMargin
padding: 6
} }
StatusIconButton { StatusQControls.StatusFlatRoundButton {
id: forwardButton id: forwardButton
icon.name: "leave_chat" width: 32
iconRotation: 180 height: 32
disabledColor: Style.current.lightGrey icon.width: 20
icon.height: 20
icon.name: "right"
icon.disabledColor: Style.current.lightGrey
type: StatusQControls.StatusFlatRoundButton.Type.Tertiary
enabled: currentWebView && currentWebView.canGoForward
Layout.leftMargin: -browserHeader.innerMargin/2
onClicked: currentWebView.goForward() onClicked: currentWebView.goForward()
onPressAndHold: { onPressAndHold: {
if (currentWebView && (currentWebView.canGoBack || currentWebView.canGoForward)){ if (currentWebView && (currentWebView.canGoBack || currentWebView.canGoForward)){
historyMenu.popup(forwardButton.x, forwardButton.y + forwardButton.height) historyMenu.popup(forwardButton.x, forwardButton.y + forwardButton.height)
} }
} }
enabled: currentWebView && currentWebView.canGoForward
width: 24
height: 24
Layout.leftMargin: -browserHeader.innerMargin/2
} }
StyledTextField { StyledTextField {
@ -160,27 +164,31 @@ Rectangle {
} }
} }
StatusIconButton { StatusQControls.StatusFlatRoundButton {
id: addFavoriteBtn id: addFavoriteBtn
visible: !!currentWebView && !!currentWebView.url width: 24
icon.name: !!browserHeader.currentFavorite ? "browser/favoriteActive" : "browser/favorite" height: 24
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
anchors.right: reloadBtn.left anchors.right: reloadBtn.left
anchors.rightMargin: Style.current.halfPadding anchors.rightMargin: Style.current.halfPadding
visible: !!currentWebView && !!currentWebView.url
icon.source: !!browserHeader.currentFavorite ? Style.svg("browser/favoriteActive") : Style.svg("browser/favorite")
color: "transparent"
type: StatusQControls.StatusFlatRoundButton.Type.Tertiary
onClicked: addNewFavoritelClicked(addFavoriteBtn.x) onClicked: addNewFavoritelClicked(addFavoriteBtn.x)
width: 24
height: 24
} }
StatusIconButton { StatusQControls.StatusFlatRoundButton {
id: reloadBtn id: reloadBtn
icon.name: currentWebView && currentWebView.loading ? "close" : "browser/refresh" width: 24
height: 24
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
anchors.right: parent.right anchors.right: parent.right
anchors.rightMargin: Style.current.halfPadding anchors.rightMargin: Style.current.halfPadding
icon.name: currentWebView && currentWebView.loading ? "close-circle" : "refresh"
color: "transparent"
type: StatusQControls.StatusFlatRoundButton.Type.Tertiary
onClicked: currentWebView && currentWebView.loading ? currentWebView.stop() : currentWebView.reload() onClicked: currentWebView && currentWebView.loading ? currentWebView.stop() : currentWebView.reload()
width: 24
height: 24
} }
} }
@ -197,9 +205,14 @@ Rectangle {
Component { Component {
id: notConnectedBtnCompoent id: notConnectedBtnCompoent
StatusIconButton { StatusQControls.StatusFlatRoundButton {
id: accountBtn id: accountBtn
icon.name: "walletIcon" width: 24
height: 24
icon.width: 24
icon.height: 24
icon.name: "filled-account"
type: StatusQControls.StatusFlatRoundButton.Type.Tertiary
onClicked: { onClicked: {
if (browserWalletMenu.opened) { if (browserWalletMenu.opened) {
browserWalletMenu.close() browserWalletMenu.close()
@ -207,14 +220,9 @@ Rectangle {
browserWalletMenu.open() browserWalletMenu.open()
} }
} }
width: 24
height: 24
padding: 6
} }
} }
Component { Component {
id: connectedBtnComponent id: connectedBtnComponent
StatusQControls.StatusFlatButton { StatusQControls.StatusFlatButton {
@ -241,9 +249,15 @@ Rectangle {
y: parent.height y: parent.height
} }
StatusIconButton { StatusQControls.StatusFlatRoundButton {
id: settingsMenuButton id: settingsMenuButton
icon.name: "dots-icon" implicitHeight: 32
implicitWidth: 32
icon.width: 24
icon.height: 24
icon.name: "more"
type: StatusQControls.StatusFlatRoundButton.Type.Tertiary
Layout.rightMargin: browserHeader.innerMargin
onClicked: { onClicked: {
if (settingsMenu.opened) { if (settingsMenu.opened) {
settingsMenu.close() settingsMenu.close()
@ -251,10 +265,6 @@ Rectangle {
settingsMenu.open() settingsMenu.open()
} }
} }
width: 24
height: 24
Layout.rightMargin: browserHeader.innerMargin
padding: 6
} }
} }

View File

@ -1,9 +1,13 @@
import QtQuick 2.1 import QtQuick 2.1
import QtGraphicalEffects 1.13 import QtGraphicalEffects 1.13
import utils 1.0 import utils 1.0
import StatusQ.Controls 0.1 import StatusQ.Controls 0.1
import "../../../../shared"
import "../../../../shared/status"
import "../controls" import "../controls"
Rectangle { Rectangle {
@ -106,15 +110,13 @@ Rectangle {
StatusFlatRoundButton { StatusFlatRoundButton {
id: closeBtn id: closeBtn
width: 32
height: 32
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
anchors.right: parent.right anchors.right: parent.right
anchors.rightMargin: Style.current.padding anchors.rightMargin: Style.current.smallPadding
type: StatusFlatRoundButton.Type.Secondary
icon.name: "close" icon.name: "close"
onClicked: { type: StatusFlatRoundButton.Type.Quaternary
downloadBar.isVisible = false onClicked: downloadBar.isVisible = false
}
} }
} }

View File

@ -52,13 +52,15 @@ import QtQuick 2.13
import QtQuick.Controls 2.13 import QtQuick.Controls 2.13
import QtGraphicalEffects 1.13 import QtGraphicalEffects 1.13
import QtQuick.Layouts 1.0 import QtQuick.Layouts 1.0
import "../../../../shared" import "../../../../shared"
import "../../../../shared/panels" import "../../../../shared/panels"
import "../../../../shared/controls" import "../../../../shared/controls"
import "../../../../shared/status"
import utils 1.0 import utils 1.0
import StatusQ.Controls 0.1
Rectangle { Rectangle {
id: root id: root
@ -149,28 +151,33 @@ Rectangle {
anchors.bottomMargin: 5 anchors.bottomMargin: 5
} }
StatusIconButton { StatusFlatRoundButton {
icon.name: "caret" id: prevBtn
implicitWidth: 32
implicitHeight: 32
icon.name: "previous"
enabled: numberOfMatches > 0 enabled: numberOfMatches > 0
iconRotation: 90 type: StatusFlatRoundButton.Type.Tertiary
onClicked: root.findPrevious() onClicked: root.findPrevious()
icon.width: 14
} }
StatusIconButton { StatusFlatRoundButton {
icon.name: "caret" id: nextBtn
implicitWidth: 32
implicitHeight: 32
icon.name: "next"
enabled: numberOfMatches > 0 enabled: numberOfMatches > 0
iconRotation: -90 type: StatusFlatRoundButton.Type.Tertiary
onClicked: root.findNext() onClicked: root.findNext()
icon.width: 14
} }
StatusIconButton { StatusFlatRoundButton {
icon.name: "close" id: closeBtn
implicitWidth: 32
implicitHeight: 32
icon.name: "close-circle"
type: StatusFlatRoundButton.Type.Tertiary
onClicked: root.visible = false onClicked: root.visible = false
icon.width: 20
} }
} }
} }

View File

@ -2,10 +2,13 @@ import QtQuick 2.13
import QtQuick.Controls 2.13 import QtQuick.Controls 2.13
import QtQuick.Layouts 1.13 import QtQuick.Layouts 1.13
import QtGraphicalEffects 1.13 import QtGraphicalEffects 1.13
import utils 1.0 import utils 1.0
import StatusQ.Controls 0.1
import "../../../../shared" import "../../../../shared"
import "../../../../shared/panels" import "../../../../shared/panels"
import "../../../../shared/status"
import "../../../../shared/controls" import "../../../../shared/controls"
import "../../Wallet/views" import "../../Wallet/views"
import "../stores" import "../stores"
@ -147,15 +150,14 @@ Popup {
textToCopy: accountSelector.selectedAccount.address textToCopy: accountSelector.selectedAccount.address
} }
StatusIconButton { StatusFlatRoundButton {
id: sendBtn id: sendBtn
icon.name: "send" width: 40
width: 20 height: 40
height: 20
anchors.right: parent.right anchors.right: parent.right
anchors.top: parent.top anchors.top: parent.top
anchors.topMargin: Style.current.padding anchors.topMargin: Style.current.halfPadding
iconColor: Style.current.primary icon.name: "send"
onClicked: { onClicked: {
sendModal.selectFromAccount.selectedAccount = accountSelector.selectedAccount sendModal.selectFromAccount.selectedAccount = accountSelector.selectedAccount
sendModal.open() sendModal.open()

View File

@ -3,6 +3,9 @@ import QtQuick.Controls 2.13
import QtQuick.Layouts 1.13 import QtQuick.Layouts 1.13
import utils 1.0 import utils 1.0
import StatusQ.Controls 0.1
import "../../../../shared" import "../../../../shared"
import "../../../../shared/popups" import "../../../../shared/popups"
import "../../../../shared/panels" import "../../../../shared/panels"
@ -18,30 +21,26 @@ Row {
height: acceptBtn.height height: acceptBtn.height
spacing: Style.current.halfPadding spacing: Style.current.halfPadding
StatusIconButton { StatusFlatRoundButton {
id: acceptBtn id: acceptBtn
icon.name: "check-circle"
onClicked: root.acceptClicked()
width: 32 width: 32
height: 32 height: 32
padding: 6
iconColor: Style.current.success
hoveredIconColor: Style.current.success
highlightedBackgroundColor: Utils.setColorAlpha(Style.current.success, 0.1)
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
icon.name: "checkmark-circle"
icon.color: Style.current.success
backgroundHoverColor: Utils.setColorAlpha(Style.current.success, 0.1)
onClicked: root.acceptClicked()
} }
StatusIconButton { StatusFlatRoundButton {
id: declineBtn id: declineBtn
icon.name: "close"
onClicked: root.declineClicked()
width: 32 width: 32
height: 32 height: 32
padding: 6
iconColor: Style.current.danger
hoveredIconColor: Style.current.danger
highlightedBackgroundColor: Utils.setColorAlpha(Style.current.danger, 0.1)
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
icon.name: "close-circle"
icon.color: Style.current.danger
backgroundHoverColor: Utils.setColorAlpha(Style.current.danger, 0.1)
onClicked: root.declineClicked()
} }
StatusContextMenuButton { StatusContextMenuButton {

View File

@ -1,9 +1,8 @@
import QtQuick 2.13 import QtQuick 2.13
import QtGraphicalEffects 1.13 import QtGraphicalEffects 1.13
import "../../../../shared/status" import StatusQ.Controls 0.1
import StatusQ.Controls 0.1 as StatusQ
import utils 1.0 import utils 1.0
Rectangle { Rectangle {
@ -64,11 +63,14 @@ Rectangle {
anchors.verticalCenter: buttonsContainer.verticalCenter anchors.verticalCenter: buttonsContainer.verticalCenter
height: parent.height - 2 * buttonsContainer.containerMargin height: parent.height - 2 * buttonsContainer.containerMargin
StatusIconButton { StatusFlatRoundButton {
id: emojiBtn id: emojiBtn
icon.name: "emoji"
width: 32 width: 32
height: 32 height: 32
icon.name: "reaction-b"
type: StatusFlatRoundButton.Type.Tertiary
//% "Add reaction"
tooltip.text: qsTrId("add-reaction")
onClicked: { onClicked: {
setMessageActive(messageId, true) setMessageActive(messageId, true)
// Set parent, X & Y positions for the messageContextMenu // Set parent, X & Y positions for the messageContextMenu
@ -77,22 +79,17 @@ Rectangle {
buttonsContainer.messageContextMenu.setYPosition = function() { return (-buttonsContainer.messageContextMenu.height - 4)} buttonsContainer.messageContextMenu.setYPosition = function() { return (-buttonsContainer.messageContextMenu.height - 4)}
clickMessage(false, false, false, null, true) clickMessage(false, false, false, null, true)
} }
onHoveredChanged: { onHoveredChanged: buttonsContainer.hoverChanged(this.hovered)
buttonsContainer.hoverChanged(this.hovered)
}
StatusQ.StatusToolTip {
visible: emojiBtn.hovered
//% "Add reaction"
text: qsTrId("add-reaction")
}
} }
StatusIconButton { StatusFlatRoundButton {
id: replyBtn id: replyBtn
icon.name: "reply"
width: 32 width: 32
height: 32 height: 32
icon.name: "reply"
type: StatusFlatRoundButton.Type.Tertiary
//% "Reply"
tooltip.text: qsTrId("message-reply")
onClicked: { onClicked: {
SelectedMessage.set(messageId, fromAuthor); SelectedMessage.set(messageId, fromAuthor);
showReplyArea() showReplyArea()
@ -100,45 +97,34 @@ Rectangle {
messageContextMenu.closeParentPopup() messageContextMenu.closeParentPopup()
} }
} }
onHoveredChanged: { onHoveredChanged: buttonsContainer.hoverChanged(this.hovered)
buttonsContainer.hoverChanged(this.hovered)
}
StatusQ.StatusToolTip {
visible: replyBtn.hovered
//% "Reply"
text: qsTrId("message-reply")
}
} }
Loader { Loader {
id: editBtn id: editBtn
sourceComponent: StatusIconButton { active: isText && !isEdit && isCurrentUser && showEdit
sourceComponent: StatusFlatRoundButton {
id: btn id: btn
icon.name: "edit-message"
width: 32 width: 32
height: 32 height: 32
onClicked: { icon.source: Style.svg("edit-message")
isEdit = true type: StatusFlatRoundButton.Type.Tertiary
} //% "Edit"
onHoveredChanged: { tooltip.text: qsTrId("edit")
buttonsContainer.hoverChanged(btn.hovered) onClicked: isEdit = true
} onHoveredChanged: buttonsContainer.hoverChanged(btn.hovered)
StatusQ.StatusToolTip {
visible: btn.hovered
//% "Edit"
text: qsTrId("edit")
}
} }
} }
StatusIconButton { StatusFlatRoundButton {
id: otherBtn id: otherBtn
visible: showMoreButton
icon.name: "dots-icon"
width: 32 width: 32
height: 32 height: 32
visible: showMoreButton
icon.name: "more"
type: StatusFlatRoundButton.Type.Tertiary
//% "More"
tooltip.text: qsTrId("more")
onClicked: { onClicked: {
if (typeof isMessageActive !== "undefined") { if (typeof isMessageActive !== "undefined") {
setMessageActive(messageId, true) setMessageActive(messageId, true)
@ -149,14 +135,7 @@ Rectangle {
buttonsContainer.messageContextMenu.setYPosition = function() { return (-buttonsContainer.messageContextMenu.height - 4)} buttonsContainer.messageContextMenu.setYPosition = function() { return (-buttonsContainer.messageContextMenu.height - 4)}
clickMessage(false, isSticker, false, null, false, true); clickMessage(false, isSticker, false, null, false, true);
} }
onHoveredChanged: { onHoveredChanged: buttonsContainer.hoverChanged(this.hovered)
buttonsContainer.hoverChanged(this.hovered)
}
StatusQ.StatusToolTip {
visible: otherBtn.hovered
//% "More"
text: qsTrId("more")
}
} }
} }
} }

View File

@ -51,19 +51,21 @@ Rectangle {
height: 50 height: 50
} }
StatusIconButton {
icon.name: "close" StatusQControls.StatusFlatRoundButton {
id: closeImg id: closeImg
implicitWidth: 32
implicitHeight: 32
anchors.top: parent.top anchors.top: parent.top
anchors.topMargin: 10 anchors.topMargin: 10
anchors.right: parent.right anchors.right: parent.right
anchors.rightMargin: 10 anchors.rightMargin: 10
icon.height: 20 icon.height: 20
icon.width: 20 icon.width: 20
iconColor: Style.current.midGrey icon.name: "close-circle"
onClicked: { type: StatusQControls.StatusFlatRoundButton.Type.Tertiary
appSettings.hideChannelSuggestions = true onClicked: appSettings.hideChannelSuggestions = true
}
} }
StatusBaseText { StatusBaseText {

View File

@ -10,6 +10,8 @@ import "../controls"
//TODO remove this or make view //TODO remove this or make view
import "../views" import "../views"
import StatusQ.Controls 0.1
MouseArea { MouseArea {
id: root id: root
@ -131,19 +133,20 @@ MouseArea {
} }
} }
StatusIconButton { StatusFlatRoundButton {
id: emojiBtn id: emojiBtn
visible: root.hovered width: 32
highlighted: visible height: 32
anchors.top: rootRect.top anchors.top: rootRect.top
anchors.topMargin: -height / 4 anchors.topMargin: -height / 4
anchors.right: rootRect.right anchors.right: rootRect.right
anchors.rightMargin: Style.current.halfPadding anchors.rightMargin: Style.current.halfPadding
highlightedIconColor: Style.current.secondaryText visible: root.hovered
highlightedBackgroundColor: Style.current.background icon.name: "reaction-b"
icon.name: "emoji"
icon.width: 20 icon.width: 20
icon.height: 20 icon.height: 20
type: StatusFlatRoundButton.Type.Tertiary
backgroundHoverColor: Style.current.background
onClicked: { onClicked: {
// Set parent, X & Y positions for the messageContextMenu // Set parent, X & Y positions for the messageContextMenu
messageContextMenu.parent = emojiBtn messageContextMenu.parent = emojiBtn

View File

@ -10,7 +10,6 @@ import "../../../../../shared/panels"
import "../../../../../shared/status" import "../../../../../shared/status"
import utils 1.0 import utils 1.0
import "."
Rectangle { Rectangle {
id: root id: root
@ -42,16 +41,18 @@ Rectangle {
height: 50 height: 50
} }
StatusIconButton { StatusQControls.StatusFlatRoundButton {
icon.name: "close"
id: closeImg id: closeImg
implicitWidth: 32
implicitHeight: 32
anchors.top: parent.top anchors.top: parent.top
anchors.topMargin: 10 anchors.topMargin: 10
anchors.right: parent.right anchors.right: parent.right
anchors.rightMargin: 10 anchors.rightMargin: 10
icon.height: 20 icon.height: 20
icon.width: 20 icon.width: 20
iconColor: Style.current.darkGrey icon.name: "close-circle"
type: StatusQControls.StatusFlatRoundButton.Type.Tertiary
onClicked: { onClicked: {
let hiddenBannerIds = appSettings.hiddenCommunityWelcomeBanners let hiddenBannerIds = appSettings.hiddenCommunityWelcomeBanners
hiddenBannerIds.push(chatsModel.communities.activeCommunity.id) hiddenBannerIds.push(chatsModel.communities.activeCommunity.id)

View File

@ -6,7 +6,6 @@ import utils 1.0
import StatusQ.Controls 0.1 as StatusQ import StatusQ.Controls 0.1 as StatusQ
import "../../../../shared" import "../../../../shared"
import "../../../../shared/status"
import "../../../../shared/popups" import "../../../../shared/popups"
import "../controls" import "../controls"
@ -41,25 +40,20 @@ Item {
Component { Component {
id: markReadBtnComponent id: markReadBtnComponent
StatusIconButton { StatusQ.StatusFlatRoundButton {
id: markReadBtn id: markReadBtn
icon.name: "double-check"
iconColor: Style.current.primary
icon.width: 24
icon.height: 24
width: 32 width: 32
height: 32 height: 32
icon.width: 24
icon.height: 24
icon.source: Style.svg("double-check")
color: "transparent"
//% "Mark as Read"
tooltip.text: qsTrId("mark-as-read")
tooltip.orientation: StatusQ.StatusToolTip.Orientation.Left
tooltip.x: -tooltip.width - Style.current.padding
tooltip.y: markReadBtn.height / 2 - height / 2 + 4
onClicked: chatsModel.activityNotificationList.markActivityCenterNotificationRead(model.id, model.message.communityId, model.message.chatId, model.notificationType) onClicked: chatsModel.activityNotificationList.markActivityCenterNotificationRead(model.id, model.message.communityId, model.message.chatId, model.notificationType)
StatusQ.StatusToolTip {
visible: markReadBtn.hovered
//% "Mark as Read"
text: qsTrId("mark-as-read")
orientation: StatusQ.StatusToolTip.Orientation.Left// "left"
x: - width - Style.current.padding
y: markReadBtn.height / 2 - height / 2 + 4
}
} }
} }

View File

@ -289,14 +289,14 @@ Column {
border.color: Style.current.border border.color: Style.current.border
color:Style.current.background color:Style.current.background
StatusIconButton { StatusFlatRoundButton {
icon.name: "close"
icon.width: 20
icon.height: 20
anchors.top: parent.top anchors.top: parent.top
anchors.topMargin: Style.current.smallPadding anchors.topMargin: Style.current.smallPadding
anchors.right: parent.right anchors.right: parent.right
anchors.rightMargin: Style.current.smallPadding anchors.rightMargin: Style.current.smallPadding
icon.width: 20
icon.height: 20
icon.name: "close-circle"
onClicked: { onClicked: {
enableLinkRoot.height = 0 enableLinkRoot.height = 0
enableLinkRoot.visible = false enableLinkRoot.visible = false

View File

@ -6,13 +6,13 @@ import utils 1.0
import "../../../../shared" import "../../../../shared"
import "../../../../shared/panels" import "../../../../shared/panels"
import "../../../../shared/popups" import "../../../../shared/popups"
import "../../../../shared/status"
import "../popups" import "../popups"
import StatusQ.Core 0.1 import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1 import StatusQ.Core.Theme 0.1
import StatusQ.Components 0.1 import StatusQ.Components 0.1
import StatusQ.Controls 0.1
Item { Item {
id: root id: root
@ -111,18 +111,15 @@ Item {
font.pixelSize: 15 font.pixelSize: 15
} }
StatusIconButton { StatusFlatRoundButton {
id: qrCodeButton id: qrCodeButton
anchors.right: parent.right
height: 32
width: 32 width: 32
radius: 8 height: 32
anchors.right: parent.right
anchors.verticalCenter: profileImgContainer.verticalCenter anchors.verticalCenter: profileImgContainer.verticalCenter
icon.name: "qr-code-icon" icon.name: "qr"
iconColor: Style.current.textColor type: StatusFlatRoundButton.Type.Quaternary
onClicked: { onClicked: qrCodePopup.open()
qrCodePopup.open()
}
} }
Separator { Separator {

View File

@ -3,6 +3,9 @@ import QtQuick.Controls 2.13
import QtGraphicalEffects 1.13 import QtGraphicalEffects 1.13
import utils 1.0 import utils 1.0
import StatusQ.Core.Theme 0.1
import StatusQ.Controls 0.1
import "../" import "../"
import "../views" import "../views"
import "../panels" import "../panels"
@ -116,18 +119,19 @@ Item {
} }
} }
StatusIconButton { StatusFlatRoundButton {
id: clearBtn id: clearBtn
icon.name: "close-icon" width: 20
type: "secondary" height: 20
visible: chatKey.text !== ""
icon.width: 14
icon.height: 14
width: 14
height: 14
anchors.right: parent.right anchors.right: parent.right
anchors.rightMargin: Style.current.padding anchors.rightMargin: Style.current.padding
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
icon.name: "clear"
visible: chatKey.text !== ""
icon.width: 20
icon.height: 20
type: StatusFlatRoundButton.Type.Tertiary
color: "transparent"
onClicked: { onClicked: {
chatKey.text = ""; chatKey.text = "";
chatKey.forceActiveFocus(Qt.MouseFocusReason); chatKey.forceActiveFocus(Qt.MouseFocusReason);

View File

@ -14,6 +14,7 @@ import "../../app/AppLayouts/Chat/panels"
import "./emojiList.js" as EmojiJSON import "./emojiList.js" as EmojiJSON
import StatusQ.Core.Theme 0.1 import StatusQ.Core.Theme 0.1
import StatusQ.Controls 0.1 as StatusQ
Rectangle { Rectangle {
id: control id: control
@ -698,13 +699,16 @@ Rectangle {
} }
} }
StatusIconButton { StatusQ.StatusFlatRoundButton {
id: chatCommandsBtn id: chatCommandsBtn
icon.name: "chat-commands" width: 32
height: 32
anchors.left: parent.left anchors.left: parent.left
anchors.leftMargin: 4 anchors.leftMargin: 4
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
anchors.bottomMargin: 16 anchors.bottomMargin: 16
icon.name: "chat-commands"
type: StatusQ.StatusFlatRoundButton.Type.Tertiary
visible: !isEdit && control.chatType === Constants.chatTypeOneToOne && !control.isStatusUpdateInput visible: !isEdit && control.chatType === Constants.chatTypeOneToOne && !control.isStatusUpdateInput
enabled: !control.isContactBlocked enabled: !control.isContactBlocked
onClicked: { onClicked: {
@ -714,18 +718,18 @@ Rectangle {
} }
} }
StatusIconButton { StatusQ.StatusFlatRoundButton {
id: imageBtn id: imageBtn
icon.name: "images_icon" width: 32
icon.height: 18 height: 32
icon.width: 20
anchors.left: chatCommandsBtn.visible ? chatCommandsBtn.right : parent.left anchors.left: chatCommandsBtn.visible ? chatCommandsBtn.right : parent.left
anchors.leftMargin: chatCommandsBtn.visible ? 2 : 4 anchors.leftMargin: chatCommandsBtn.visible ? 2 : 4
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
anchors.bottomMargin: 16 anchors.bottomMargin: 16
icon.name: "image"
type: StatusQ.StatusFlatRoundButton.Type.Tertiary
visible: !isEdit && control.chatType !== Constants.chatTypePublic && !control.isStatusUpdateInput visible: !isEdit && control.chatType !== Constants.chatTypePublic && !control.isStatusUpdateInput
enabled: !control.isContactBlocked enabled: !control.isContactBlocked
onClicked: { onClicked: {
highlighted = true highlighted = true
imageDialog.open() imageDialog.open()
@ -954,28 +958,26 @@ Rectangle {
} }
StatusChatInputTextFormationAction { StatusChatInputTextFormationAction {
wrapper: "**" wrapper: "**"
icon.name: "format-text-bold" icon.name: "bold"
//% "Bold" //% "Bold"
text: qsTrId("bold") text: qsTrId("bold")
} }
StatusChatInputTextFormationAction { StatusChatInputTextFormationAction {
wrapper: "*" wrapper: "*"
icon.name: "format-text-italic" icon.name: "italic"
//% "Italic" //% "Italic"
text: qsTrId("italic") text: qsTrId("italic")
checked: (textFormatMenu.surroundedBy("*") && !textFormatMenu.surroundedBy("**")) || textFormatMenu.surroundedBy("***") checked: (textFormatMenu.surroundedBy("*") && !textFormatMenu.surroundedBy("**")) || textFormatMenu.surroundedBy("***")
} }
StatusChatInputTextFormationAction { StatusChatInputTextFormationAction {
wrapper: "~~" wrapper: "~~"
icon.name: "format-text-strike-through" icon.name: "strikethrough"
icon.width: 45
//% "Strikethrough" //% "Strikethrough"
text: qsTrId("strikethrough") text: qsTrId("strikethrough")
} }
StatusChatInputTextFormationAction { StatusChatInputTextFormationAction {
wrapper: "`" wrapper: "`"
icon.name: "format-text-code" icon.name: "code"
icon.width: 45
//% "Code" //% "Code"
text: qsTrId("code") text: qsTrId("code")
} }
@ -1054,14 +1056,15 @@ Rectangle {
anchors.rightMargin: Style.current.radius anchors.rightMargin: Style.current.radius
height: emojiBtn.height height: emojiBtn.height
StatusIconButton { StatusQ.StatusFlatRoundButton {
id: imageBtn2 id: imageBtn2
icon.name: "images_icon" implicitHeight: 32
icon.height: 18 implicitWidth: 32
icon.width: 20
anchors.right: sendBtn.left anchors.right: sendBtn.left
anchors.rightMargin: 2 anchors.rightMargin: 2
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
icon.name: "image"
type: StatusQ.StatusFlatRoundButton.Type.Tertiary
visible: control.isStatusUpdateInput visible: control.isStatusUpdateInput
onClicked: { onClicked: {
@ -1094,36 +1097,45 @@ Rectangle {
} }
} }
StatusIconButton { StatusQ.StatusFlatRoundButton {
id: emojiBtn id: emojiBtn
visible: !imageBtn2.visible implicitHeight: 32
implicitWidth: 32
anchors.left: parent.left anchors.left: parent.left
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
icon.name: "emojiBtn" visible: !imageBtn2.visible
type: "secondary" icon.name: "emojis"
type: StatusQ.StatusFlatRoundButton.Type.Tertiary
color: "transparent"
onClicked: togglePopup(emojiPopup, emojiBtn) onClicked: togglePopup(emojiPopup, emojiBtn)
} }
StatusIconButton { StatusQ.StatusFlatRoundButton {
id: gifBtn id: gifBtn
visible: !isEdit && appSettings.isGifWidgetEnabled implicitHeight: 32
implicitWidth: 32
anchors.right: emojiBtn.left anchors.right: emojiBtn.left
anchors.rightMargin: 2 anchors.rightMargin: 2
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
icon.name: "gif-icon" visible: !isEdit && appSettings.isGifWidgetEnabled
type: "secondary" icon.name: "gif"
type: StatusQ.StatusFlatRoundButton.Type.Tertiary
color: "transparent"
onClicked: togglePopup(gifPopup, gifBtn) onClicked: togglePopup(gifPopup, gifBtn)
} }
StatusIconButton { StatusQ.StatusFlatRoundButton {
id: stickersBtn id: stickersBtn
implicitHeight: 32
implicitWidth: 32
width: visible ? 32 : 0
anchors.left: emojiBtn.right anchors.left: emojiBtn.right
anchors.leftMargin: 2 anchors.leftMargin: 2
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
icon.name: "stickers_icon" icon.name: "stickers"
type: StatusQ.StatusFlatRoundButton.Type.Tertiary
visible: !isEdit && networkGuarded && emojiBtn.visible visible: !isEdit && networkGuarded && emojiBtn.visible
width: visible ? 32 : 0 color: "transparent"
type: "secondary"
onClicked: togglePopup(stickersPopup, stickersBtn) onClicked: togglePopup(stickersPopup, stickersBtn)
} }
} }

View File

@ -1,13 +1,16 @@
import QtQuick 2.13 import QtQuick 2.13
import utils 1.0 import utils 1.0
import "../../shared"
StatusIconButton { import StatusQ.Core.Theme 0.1
import StatusQ.Controls 0.1
StatusFlatRoundButton {
id: moreActionsBtn id: moreActionsBtn
implicitHeight: 32
implicitWidth: 32
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
icon.name: "dots-icon" icon.name: "more"
iconColor: Style.current.contextMenuButtonForegroundColor type: StatusFlatRoundButton.Type.Secondary
hoveredIconColor: Style.current.contextMenuButtonForegroundColor backgroundHoverColor: Style.current.contextMenuButtonBackgroundHoverColor
highlightedBackgroundColor: Style.current.contextMenuButtonBackgroundHoverColor
} }

View File

@ -5,6 +5,9 @@ import QtGraphicalEffects 1.0
import StatusQ.Components 0.1 import StatusQ.Components 0.1
import utils 1.0 import utils 1.0
import StatusQ.Controls 0.1
import "../../shared" import "../../shared"
import "../../shared/panels" import "../../shared/panels"
import "../../shared/controls" import "../../shared/controls"
@ -113,18 +116,19 @@ Popup {
} }
} }
StatusIconButton { StatusFlatRoundButton {
id: clearBtn id: clearBtn
icon.name: "close-icon" implicitWidth: 14
type: "secondary" implicitHeight: 14
visible: searchBox.text !== ""
icon.width: 14
icon.height: 14
width: 14
height: 14
anchors.right: searchBox.right anchors.right: searchBox.right
anchors.rightMargin: Style.current.padding anchors.rightMargin: Style.current.padding
anchors.verticalCenter: searchBox.verticalCenter anchors.verticalCenter: searchBox.verticalCenter
icon.name: "clear"
visible: searchBox.text !== ""
icon.width: 14
icon.height: 14
type: StatusFlatRoundButton.Type.Tertiary
color: "transparent"
onClicked: toggleCategory(previousCategory) onClicked: toggleCategory(previousCategory)
} }
} }

View File

@ -1,88 +0,0 @@
import QtQuick 2.13
import QtQuick.Controls 2.13
import QtGraphicalEffects 1.13
import utils 1.0
import "../../shared"
import "../../shared/panels"
RoundButton {
id: control
property string type: "primary"
property color iconColor: Style.current.secondaryText
property color highlightedIconColor: Style.current.blue
property color hoveredIconColor: Style.current.blue
property color highlightedBackgroundColor: Style.current.secondaryBackground
property real highlightedBackgroundOpacity: 1.0
property color disabledColor: iconColor
property int iconRotation: 0
implicitHeight: 32
implicitWidth: 32
icon.height: 20
icon.width: 20
icon.color: {
if (!enabled) {
return control.disabledColor
}
if (hovered) {
return control.hoveredIconColor
}
if (highlighted) {
return control.highlightedIconColor
}
return control.iconColor
}
radius: Style.current.radius
onIconChanged: {
icon.source = icon.name ? Style.svg(icon.name) : ""
}
background: Rectangle {
anchors.fill: parent
opacity: control.highlightedBackgroundOpacity
color: {
if (type === "secondary") {
return "transparent"
}
return hovered || highlighted ? control.highlightedBackgroundColor : "transparent"
}
radius: control.radius
}
contentItem: Item {
anchors.fill: parent
SVGImage {
id: iconImg
visible: false
source: control.icon.source
height: control.icon.height
width: control.icon.width
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
fillMode: Image.PreserveAspectFit
rotation: control.iconRotation
}
ColorOverlay {
visible: control.visible
anchors.fill: iconImg
source: iconImg
color: control.icon.color
antialiasing: true
smooth: true
rotation: control.iconRotation
}
}
MouseArea {
cursorShape: Qt.PointingHandCursor
anchors.fill: parent
onPressed: mouse.accepted = false
}
}

View File

@ -4,7 +4,7 @@ import QtGraphicalEffects 1.13
import QtQuick.Layouts 1.13 import QtQuick.Layouts 1.13
import QtQuick.Dialogs 1.3 import QtQuick.Dialogs 1.3
import StatusQ.Controls 0.1 as StatusQ import StatusQ.Controls 0.1
import utils 1.0 import utils 1.0
Menu { Menu {
@ -61,16 +61,16 @@ Menu {
topPadding: 0 topPadding: 0
action: Action {} action: Action {}
contentItem: Item { contentItem: Item {
StatusIconButton { StatusFlatRoundButton {
width: 32
height: 32
icon.width: 24
icon.height: 24
icon.name: menuItem.action.icon.name icon.name: menuItem.action.icon.name
icon.width: menuItem.action.icon.width
icon.height: menuItem.action.icon.height
onClicked: menuItem.action.actionTriggered()
highlighted: menuItem.action.checked highlighted: menuItem.action.checked
StatusQ.StatusToolTip { tooltip.text: menuItem.action.text
visible: parent.hovered type: StatusFlatRoundButton.Type.Tertiary
text: menuItem.action.text onClicked: menuItem.action.actionTriggered()
}
} }
} }
background: Rectangle { background: Rectangle {

View File

@ -2,20 +2,25 @@ import QtQuick 2.13
import QtQuick.Controls 2.13 import QtQuick.Controls 2.13
import utils 1.0 import utils 1.0
import "../../shared"
import "../../shared/panels"
import "../../shared/status"
StatusIconButton { import StatusQ.Controls 0.1
import "../../shared/panels"
StatusFlatRoundButton {
id: control id: control
property bool selected: false property bool selected: false
icon.name: "walletIcon" icon.source: Style.svg("walletIcon")
icon.width: 24 icon.width: 24
icon.height: 24 icon.height: 24
highlightedBackgroundColor: control.icon.color color: "transparent"
highlightedBackgroundOpacity: 0.1
implicitWidth: 44 Rectangle {
implicitHeight: 44 anchors.fill: parent
color: control.hovered ? control.icon.color : "transparent"
opacity: 0.1
radius: 8
}
Rectangle { Rectangle {
width: 16 width: 16
@ -36,5 +41,4 @@ StatusIconButton {
fillMode: Image.PreserveAspectFit fillMode: Image.PreserveAspectFit
} }
} }
} }

View File

@ -7,7 +7,6 @@ StatusEmojiPopup 1.0 StatusEmojiPopup.qml
StatusEmojiSection 1.0 StatusEmojiSection.qml StatusEmojiSection 1.0 StatusEmojiSection.qml
StatusGifPopup 1.0 StatusGifPopup.qml StatusGifPopup 1.0 StatusGifPopup.qml
StatusGifColumn 1.0 StatusGifColumn.qml StatusGifColumn 1.0 StatusGifColumn.qml
StatusIconButton 1.0 StatusIconButton.qml
StatusImageIdenticon 1.0 StatusImageIdenticon.qml StatusImageIdenticon 1.0 StatusImageIdenticon.qml
StatusRadioButton 1.0 StatusRadioButton.qml StatusRadioButton 1.0 StatusRadioButton.qml
StatusRoundButton 1.0 StatusRoundButton.qml StatusRoundButton 1.0 StatusRoundButton.qml

View File

@ -3,6 +3,9 @@ import QtQuick.Controls 2.13
import QtQuick.Layouts 1.13 import QtQuick.Layouts 1.13
import utils 1.0 import utils 1.0
import StatusQ.Controls 0.1
import "../" import "../"
import "../status" import "../status"
import "../panels" import "../panels"
@ -111,34 +114,23 @@ Item {
} }
} }
StatusIconButton { StatusFlatRoundButton {
id: addContactBtn id: addContactBtn
icon.name: "add-contact"
highlightedBackgroundColor: Utils.setColorAlpha(Style.current.buttonHoveredBackgroundColor, 0.2)
iconColor: Style.current.primary
icon.width: 24
icon.height: 24
width: 32 width: 32
height: 32 height: 32
anchors.right: parent.right anchors.right: parent.right
anchors.rightMargin: Style.current.padding anchors.rightMargin: Style.current.padding
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
icon.width: 24
icon.height: 24
icon.name: "add-contact"
backgroundHoverColor: Utils.setColorAlpha(Style.current.buttonHoveredBackgroundColor, 0.2)
visible: addContactEnabled && !isAddedContact && !checkIcon.visible visible: addContactEnabled && !isAddedContact && !checkIcon.visible
MouseArea { onClicked: {
anchors.fill: parent root.addToContactsButtonClicked(root.pubKey)
hoverEnabled: true mouse.accepted = false
cursorShape: Qt.PointingHandCursor
onEntered: {
foundContact.hovered = true
}
onExited: {
foundContact.hovered = false
}
onClicked: {
root.addToContactsButtonClicked(root.pubKey)
mouse.accepted = false
}
} }
onHoveredChanged: foundContact.hovered = addContactBtn.hovered
} }
SVGImage { SVGImage {