status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

refactor(ui/shared): replace legacy StatusButton with StatusQ button

This commit is contained in:
Pascal Precht 2021-10-21 17:07:13 +02:00 committed by r4bbit.eth
parent 173943f1be
commit f3f5826c51
21 changed files with 85 additions and 231 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
ui/app/AppLayouts/Chat/popups/GroupChatPopup.qml
View File

@ -4,12 +4,13 @@ import QtQuick.Layouts 1.3
import QtQml.Models 2.3
import utils 1.0
import "../../../../shared"
import StatusQ.Controls 0.1
import "../../../../shared/controls"
import "../../../../shared/popups"
import "../../../../shared/panels"
import "../../../../shared/views"
import "../../../../shared/status"
import "../panels"
import "../controls"
@ -156,13 +157,12 @@ ModalPopup {
width: parent.width
height: btnSelectMembers.height
StatusRoundButton {
StatusFlatRoundButton {
id: btnSelectMembers
visible: selectChatMembers
anchors.bottom: parent.bottom
anchors.right: parent.right
icon.name: "arrow-right"
type: "secondary"
icon.width: 20
icon.height: 16
enabled: !!pubKeys.length
@ -182,7 +182,7 @@ ModalPopup {
icon.name: "arrow-right"
icon.width: 20
icon.height: 16
rotation: 180
icon.rotation: 180
onClicked : {
selectChatMembers = true
}

9
ui/app/AppLayouts/Chat/popups/GroupInfoPopup.qml
View File

@ -4,6 +4,7 @@ import QtQuick.Layouts 1.13
import utils 1.0
import StatusQ.Controls 0.1 as StatusQControls
import StatusQ.Components 0.1 as StatusQ
import "../../../../shared"
@ -379,7 +380,7 @@ ModalPopup {
visible: popup.isAdmin
width: parent.width
height: children[0].height
StatusButton {
StatusQControls.StatusButton {
visible: !addMembers
anchors.right: parent.right
//% "Add members"
@ -390,7 +391,7 @@ ModalPopup {
}
}
StatusRoundButton {
StatusQControls.StatusRoundButton {
id: btnBack
visible: addMembers
anchors.bottom: parent.bottom
@ -398,14 +399,14 @@ ModalPopup {
icon.name: "arrow-right"
icon.width: 20
icon.height: 16
rotation: 180
icon.rotation: 180
onClicked : {
addMembers = false;
resetSelectedMembers();
}
}
StatusButton {
StatusQControls.StatusButton {
id: btnSelectMembers
visible: addMembers
enabled: memberCount >= currMemberCount

13
ui/app/AppLayouts/Chat/views/CompactMessageView.qml
View File

@ -1,11 +1,13 @@
import QtQuick 2.13
import QtGraphicalEffects 1.13
import "../../../../shared"
import utils 1.0
import StatusQ.Controls 0.1 as StatusQControls
import "../../../../shared/panels"
import "../../../../shared/controls"
import "../../../../shared/status"
import utils 1.0
import "../panels"
import "../controls"
@ -381,12 +383,11 @@ Item {
}
}
StatusButton {
StatusQControls.StatusFlatButton {
id: cancelBtn
anchors.left: parent.left
anchors.leftMargin: Style.current.halfPadding
anchors.top: editTextInput.bottom
bgColor: Style.current.transparent
//% "Cancel"
text: qsTrId("browsing-cancel")
onClicked: {
@ -396,7 +397,7 @@ Item {
}
}
StatusButton {
StatusQControls.StatusButton {
id: saveBtn
anchors.left: cancelBtn.right
anchors.leftMargin: Style.current.halfPadding

6
ui/app/AppLayouts/Profile/views/EnsDetailsView.qml
View File

@ -3,7 +3,7 @@ import QtQuick.Layouts 1.3
import QtQuick.Controls 2.14
import StatusQ.Core 0.1
import StatusQ.Controls 0.1
import StatusQ.Controls 0.1 as StatusQControls
import StatusQ.Components 0.1
import utils 1.0
@ -125,7 +125,7 @@ Item {
}
}
StatusButton {
StatusQControls.StatusButton {
id: releaseBtn
visible: false
enabled: false
@ -150,7 +150,7 @@ Item {
}
StatusButton {
StatusQControls.StatusButton {
anchors.bottom: parent.bottom
anchors.bottomMargin: Style.current.padding
anchors.horizontalCenter: parent.horizontalCenter

8
ui/shared/controls/GasSelector.qml
View File

@ -3,8 +3,9 @@ import QtQuick.Controls 2.13
import QtQuick.Layouts 1.13
import utils 1.0
import "../status"
import "../"
import StatusQ.Controls 0.1
import "../panels"
import "."
@ -210,7 +211,7 @@ Item {
color: Style.current.secondaryText
}
StatusButton {
StatusFlatButton {
visible: false // Change to TRUE once EIP1559 suggestions are revised
id: buttonAdvanced
anchors.verticalCenter: prioritytext.verticalCenter
@ -220,7 +221,6 @@ Item {
qsTrId("use-suggestions") :
//% "Use custom"
qsTrId("use-custom")
flat: true
font.pixelSize: 13
onClicked: advancedMode = !advancedMode
}

9
ui/shared/controls/Input.qml
View File

@ -1,13 +1,11 @@
import QtQuick 2.13
import QtQuick.Controls 2.13
import StatusQ.Controls 0.1
import StatusQ.Popups 0.1
import utils 1.0
import "./"
import "../status"
import "../"
import "../panels"
import "../controls"
@ -172,8 +170,7 @@ Item {
}
height: 28
font.pixelSize: 12
borderColor: Style.current.blue
showBorder: true
size: StatusBaseButton.Size.Small
onClicked: {
if (inputBox.copyToClipboard) {
chatsModel.copyToClipboard(inputBox.textToCopy ? inputBox.textToCopy : inputValue.text)

1
ui/shared/keycard/PairingModal.qml
View File

@ -5,7 +5,6 @@ import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Controls 0.1
import StatusQ.Popups 0.1
import "../../shared"
import "../../shared/controls"
StatusModal {

7
ui/shared/popups/BlockContactConfirmationDialog.qml
View File

@ -3,9 +3,10 @@ import QtQuick.Controls 2.13
import QtQuick.Layouts 1.13
import utils 1.0
import "../status"
import StatusQ.Controls 0.1
import "../panels"
import "../"
import "."
// TODO: replace with StatusModal
@ -39,7 +40,7 @@ ModalPopup {
StatusButton {
anchors.right: parent.right
anchors.rightMargin: Style.current.smallPadding
type: "warn"
type: StatusBaseButton.Type.Danger
//% "Block User"
text: qsTrId("block-user")
anchors.bottom: parent.bottom

4
ui/shared/popups/DownloadModal.qml
View File

@ -3,9 +3,9 @@ import QtQuick.Controls 2.13
import QtQuick.Layouts 1.13
import utils 1.0
import "../status"
import StatusQ.Controls 0.1
import "../panels"
import "../"
import "."
// TODO: replace with StatusModal

5
ui/shared/popups/ImageCropperModal.qml
View File

@ -3,8 +3,9 @@ import QtQuick.Controls 2.13
import QtQuick.Layouts 1.13
import utils 1.0
import "../"
import "../status"
import StatusQ.Controls 0.1
import "../controls"
import "."

9
ui/shared/popups/SendModal.qml
View File

@ -4,11 +4,12 @@ import QtQuick.Layouts 1.13
import QtQuick.Dialogs 1.3
import utils 1.0
import "../"
import StatusQ.Controls 0.1
import "../panels"
import "../controls"
import "../views"
import "../status"
import "."
// TODO: replace with StatusModal
@ -226,7 +227,7 @@ ModalPopup {
icon.name: "arrow-right"
icon.width: 20
icon.height: 16
rotation: 180
icon.rotation: 180
onClicked: {
stack.back()
}
@ -245,7 +246,7 @@ ModalPopup {
//% "Next"
text: qsTrId("next")
enabled: stack.currentGroup.isValid && !stack.currentGroup.isPending
state: stack.currentGroup.isPending ? "pending" : "default"
loading: stack.currentGroup.isPending
onClicked: {
const validity = stack.currentGroup.validate()
if (validity.isValid && !validity.isPending) {

7
ui/shared/popups/TransactionSettingsConfirmationPopup.qml
View File

@ -3,9 +3,10 @@ import QtQuick.Controls 2.13
import QtQuick.Layouts 1.13
import utils 1.0
import "../status"
import StatusQ.Controls 0.1
import "../panels"
import "../"
import "."
// TODO: replace with StatusModal
@ -245,7 +246,7 @@ ModalPopup {
StatusButton {
id: confirmButton
type: "warn"
type: StatusBaseButton.Type.Danger
anchors.right: parent.right
anchors.rightMargin: Style.current.smallPadding
text: qsTr("Continue anyway")

6
ui/shared/popups/UnblockContactConfirmationDialog.qml
View File

@ -3,7 +3,9 @@ import QtQuick.Controls 2.13
import QtQuick.Layouts 1.13
import utils 1.0
import "../status"
import StatusQ.Controls 0.1
import "../panels"
import "./"
@ -40,7 +42,7 @@ ModalPopup {
StatusButton {
anchors.right: parent.right
anchors.rightMargin: Style.current.smallPadding
type: "warn"
type: StatusBaseButton.Type.Danger
//% "Unblock User"
text: qsTrId("unblock-user")
anchors.bottom: parent.bottom

143
ui/shared/status/StatusButton.qml
View File

@ -1,143 +0,0 @@
import QtQuick 2.13
import QtQuick.Controls 2.13
import QtQml 2.14
import QtGraphicalEffects 1.13
import utils 1.0
import "../../shared"
import "../../shared/panels"
import "./core"
Button {
property string type: "primary"
property string size: "large"
property string state: "default"
property color color: type === "warn" ? Style.current.danger : Style.current.buttonForegroundColor
property color bgColor: type === "warn" ? Style.current.buttonWarnBackgroundColor : Style.current.buttonBackgroundColor
property color borderColor: color
property color hoveredBorderColor: color
property bool forceBgColorOnHover: false
property int borderRadius: Style.current.radius
property color bgHoverColor: {
if (type === "warn") {
if (showBorder) {
return Style.current.buttonOutlineHoveredWarnBackgroundColor
}
return Style.current.buttonHoveredWarnBackgroundColor
}
return Style.current.buttonBackgroundColorHover
}
property bool disableColorOverlay: false
property bool showBorder: false
property int iconRotation: 0
id: control
font.pixelSize: size === "small" ? 13 : 15
font.family: Style.current.fontRegular.name
font.weight: Font.Medium
implicitHeight: flat ? 32 : (size === "small" ? 38 : 44)
implicitWidth: buttonLabel.implicitWidth + (flat ? 3* Style.current.halfPadding : 2 * Style.current.padding) +
(iconLoader.active ? iconLoader.width : 0)
enabled: state === "default"
contentItem: Item {
id: content
anchors.fill: parent
anchors.horizontalCenter: parent.horizontalCenter
Loader {
id: iconLoader
active: !!control.icon && !!control.icon.source.toString()
anchors.left: parent.left
anchors.leftMargin: Style.current.halfPadding
anchors.verticalCenter: parent.verticalCenter
sourceComponent: SVGImage {
id: iconImg
source: control.icon.source
height: control.icon.height
width: control.icon.width
fillMode: Image.PreserveAspectFit
rotation: control.iconRotation
ColorOverlay {
enabled: !control.disableColorOverlay
anchors.fill: iconImg
source: iconImg
color: control.disableColorOverlay ? "transparent" : buttonLabel.color
antialiasing: true
smooth: true
rotation: control.iconRotation
}
}
}
Text {
id: buttonLabel
text: control.text
font: control.font
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.right: iconLoader.active ? undefined : parent.right
anchors.left: iconLoader.active ? iconLoader.right : parent.left
anchors.leftMargin: iconLoader.active ? Style.current.smallPadding : 0
color: {
if (!enabled) {
return Style.current.buttonDisabledForegroundColor
} else if (type !== "warn" && (hovered || highlighted)) {
return control.color !== Style.current.buttonForegroundColor ?
control.color : Style.current.blue
}
return control.color
}
visible: !loadingIndicator.active
}
Loader {
id: loadingIndicator
active: control.state === "pending"
sourceComponent: StatusLoadingIndicator {}
height: loadingIndicator.visible ?
control.size === "large" ?
23 : 17
: 0
width: loadingIndicator.height
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
}
}
background: Rectangle {
radius: borderRadius
anchors.fill: parent
border.width: flat || showBorder ? 1 : 0
border.color: {
if (hovered) {
return control.hoveredBorderColor !== control.borderColor ? control.hoveredBorderColor : control.borderColor
}
if (showBorder && enabled) {
return control.borderColor
}
return Style.current.transparent
}
color: {
if (flat) {
return hovered && forceBgColorOnHover ? control.bgHoverColor : "transparent"
}
if (type === "secondary") {
return hovered || control.highlighted ? control.bgColor : "transparent"
}
return !enabled ? (control.bgColor === Style.current.transparent ? control.bgColor : Style.current.buttonDisabledBackgroundColor) :
(hovered ? control.bgHoverColor : control.bgColor)
}
}
MouseArea {
cursorShape: Qt.PointingHandCursor
anchors.fill: parent
onPressed: mouse.accepted = false
}
}

26
ui/shared/status/StatusChatInput.qml
View File

@ -7,6 +7,7 @@ import QtQuick.Dialogs 1.3
import DotherSide 0.1
import utils 1.0
import "../../shared"
import "../../shared/panels"
import "../../app/AppLayouts/Chat/panels"
@ -1073,24 +1074,16 @@ Rectangle {
}
}
StatusButton {
StatusQ.StatusFlatButton {
id: sendBtn
icon.source: Style.svg("send")
icon.width: 16
icon.height: 18
borderRadius: 16
//% "Send"
text: qsTrId("command-button-send")
type: "secondary"
flat: true
showBorder: true
forceBgColorOnHover: true
icon.name: "send"
text: qsTr("Send")
size: StatusQ.StatusBaseButton.Size.Small
anchors.right: parent.right
anchors.rightMargin: Style.current.halfPadding
anchors.bottom: parent.bottom
anchors.verticalCenter: parent.verticalCenter
visible: imageBtn2.visible
highlighted: chatsModel.plainText(Emoji.deparse(messageInputField.text)).length > 0 || isImage
enabled: highlighted && messageInputField.length < messageLimit
enabled: (chatsModel.plainText(Emoji.deparse(messageInputField.text)).length > 0 || isImage) && messageInputField.length < messageLimit
onClicked: function (event) {
control.sendMessage(event)
control.hideExtendedArea();
@ -1141,7 +1134,7 @@ Rectangle {
}
}
StatusButton {
StatusQ.StatusButton {
id: unblockBtn
visible: control.isContactBlocked
height: messageInput.height - Style.current.halfPadding
@ -1149,9 +1142,8 @@ Rectangle {
anchors.rightMargin: Style.current.halfPadding
anchors.bottom: parent.bottom
anchors.bottomMargin: Style.current.padding
borderRadius: Style.current.radius
text: qsTr("Unblock")
type: "warn"
type: StatusQ.StatusBaseButton.Type.Danger
onClicked: function (event) {
profileModel.contacts.unblockContact(chatsModel.channelView.activeChannel.id)
}

9
ui/shared/status/StatusETHTransactionModal.qml
View File

@ -4,8 +4,9 @@ import QtQuick.Layouts 1.13
import QtQuick.Dialogs 1.3
import utils 1.0
import "../../shared"
import "../../shared/status"
import StatusQ.Controls 0.1 as StatusQControls
import "../../shared/controls"
import "../../shared/views"
import "../../shared/popups"
@ -175,7 +176,7 @@ ModalPopup {
width: parent.width
height: btnNext.height
StatusRoundButton {
StatusQControls.StatusRoundButton {
id: btnBack
anchors.left: parent.left
icon.name: "arrow-right"
@ -199,7 +200,7 @@ ModalPopup {
}
}
StatusButton {
StatusQControls.StatusButton {
id: btnNext
anchors.right: parent.right
//% "Next"

13
ui/shared/status/StatusGifPopup.qml
View File

@ -2,13 +2,12 @@ import QtQuick 2.13
import QtQuick.Controls 2.13
import QtQuick.Layouts 1.3
import QtGraphicalEffects 1.0
import StatusQ.Components 0.1
import StatusQ.Controls 0.1 as StatusQControls
import utils 1.0
import StatusQ.Controls 0.1
import "../../shared"
import "../../shared/panels"
import "../../shared/controls"
@ -116,7 +115,7 @@ Popup {
}
}
StatusFlatRoundButton {
StatusQControls.StatusFlatRoundButton {
id: clearBtn
implicitWidth: 14
implicitHeight: 14
@ -127,7 +126,7 @@ Popup {
visible: searchBox.text !== ""
icon.width: 14
icon.height: 14
type: StatusFlatRoundButton.Type.Tertiary
type: StatusQControls.StatusFlatRoundButton.Type.Tertiary
color: "transparent"
onClicked: toggleCategory(previousCategory)
}
@ -250,7 +249,7 @@ Popup {
color: Style.current.secondaryText
}
StatusButton {
StatusQControls.StatusButton {
id: removeBtn
anchors.horizontalCenter: parent.horizontalCenter
text: qsTr("Enable")
@ -286,7 +285,7 @@ Popup {
color: Style.current.secondaryText
}
StatusButton {
StatusQControls.StatusButton {
id: retryBtn
anchors.top: emptyText.bottom
anchors.topMargin: Style.current.padding

13
ui/shared/status/StatusSNTTransactionModal.qml
View File

@ -4,8 +4,9 @@ import QtQuick.Layouts 1.13
import QtQuick.Dialogs 1.3
import utils 1.0
import "../../shared"
import "../../shared/status"
import StatusQ.Controls 0.1 as StatusQControls
import "../../shared/views"
import "../../shared/controls"
import "../../shared/popups"
@ -183,13 +184,13 @@ ModalPopup {
width: parent.width
height: btnNext.height
StatusRoundButton {
StatusQControls.StatusRoundButton {
id: btnBack
anchors.left: parent.left
icon.name: "arrow-right"
icon.width: 20
icon.height: 16
rotation: 180
icon.rotation: 180
visible: stack.currentGroup.showBackBtn
enabled: stack.currentGroup.isValid || stack.isLastGroup
onClicked: {
@ -207,13 +208,13 @@ ModalPopup {
}
}
StatusButton {
StatusQControls.StatusButton {
id: btnNext
anchors.right: parent.right
//% "Next"
text: qsTrId("next")
enabled: stack.currentGroup.isValid && !stack.currentGroup.isPending
state: stack.currentGroup.isPending ? "pending" : "default"
loading: stack.currentGroup.isPending
onClicked: {
const validity = stack.currentGroup.validate()
if (validity.isValid && !validity.isPending) {

12
ui/shared/status/StatusStickersPopup.qml
View File

@ -4,7 +4,9 @@ import QtQuick.Layouts 1.3
import QtGraphicalEffects 1.0
import utils 1.0
import "../../shared"
import StatusQ.Controls 0.1 as StatusQControls
import "../../shared/panels"
import "../../shared/status/core"
import "../../shared/status"
@ -130,7 +132,7 @@ Popup {
}
}
StatusButton {
StatusQControls.StatusButton {
visible: lblNoStickersYet.visible
//% "Get Stickers"
text: qsTrId("get-stickers")
@ -180,11 +182,9 @@ Popup {
Layout.bottomMargin: 8
Layout.alignment: Qt.AlignTop | Qt.AlignLeft
StatusRoundButton {
StatusQControls.StatusFlatRoundButton {
id: btnAddStickerPack
size: "medium"
type: "secondary"
icon.name: "plusSign"
icon.name: "add"
implicitWidth: 24
implicitHeight: 24
state: root.stickerPacksLoaded ? "default" : "pending"

1
ui/shared/status/qmldir
View File

@ -1,4 +1,3 @@
StatusButton 1.0 StatusButton.qml
StatusChatCommandButton 1.0 StatusChatCommandButton.qml
StatusChatCommandPopup 1.0 StatusChatCommandPopup.qml
StatusChatInput 1.0 StatusChatInput.qml

5
ui/shared/views/NoFriendsRectangle.qml
View File

@ -1,8 +1,9 @@
import QtQuick 2.13
import utils 1.0
import "../"
import "../status"
import StatusQ.Controls 0.1
import "../popups"
import "../panels"