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: Replace and remove StatusRoundButton under ui/shared/status 

closes #3898
This commit is contained in:
Khushboo Mehta 2021-10-25 21:37:44 +02:00 committed by Khushboo-dev-cpp
parent 2db77fa31c
commit 7114240e72
15 changed files with 51 additions and 249 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -163,6 +163,7 @@ ModalPopup {
anchors.bottom: parent.bottom
anchors.right: parent.right
icon.name: "arrow-right"
type: StatusFlatRoundButton.Type.Secondary
icon.width: 20
icon.height: 16
enabled: !!pubKeys.length

1
ui/app/AppLayouts/Chat/views/ContactsColumnView.qml
View File

@ -5,7 +5,6 @@ import QtQuick.Layouts 1.13
import utils 1.0
import "../../../../shared"
import "../../../../shared/status"
import "../panels"
import "../popups"

3
ui/app/AppLayouts/Onboarding/popups/EnterSeedPhraseModal.qml
View File

@ -8,7 +8,8 @@ import "../../../../shared"
import "../../../../shared/popups"
import "../../../../shared/panels"
import "../../../../shared/controls"
import "../../../../shared/status"
import StatusQ.Controls 0.1
// TODO: replace with StatusModal
ModalPopup {

7
ui/app/AppLayouts/Onboarding/views/LoginView.qml
View File

@ -198,10 +198,11 @@ Item {
}
}
StatusRoundButton {
StatusQControls.StatusRoundButton {
id: submitBtn
size: "medium"
type: "secondary"
width: 40
height: 40
type: StatusQControls.StatusRoundButton.Type.Secondary
icon.name: "arrow-right"
icon.width: 18
icon.height: 14

11
ui/app/AppLayouts/Profile/popups/NetworksModal.qml
View File

@ -11,6 +11,8 @@ import "../../../../shared/status"
import "../controls"
import "../panels"
import StatusQ.Controls 0.1 as StatusQControls
// TODO: replace with StatusQ component
ModalPopup {
id: popup
@ -40,11 +42,12 @@ ModalPopup {
width: parent.width
height: addButton.height
StatusRoundButton {
StatusQControls.StatusRoundButton {
id: addButton
icon.name: "plusSign"
size: "medium"
type: "secondary"
width: 40
height: 40
icon.name: "add"
type: StatusQControls.StatusRoundButton.Type.Secondary
anchors.verticalCenter: parent.verticalCenter
}

17
ui/app/AppLayouts/Profile/views/ContactsView.qml
View File

@ -3,13 +3,15 @@ import QtQuick.Controls 2.13
import QtQuick.Layouts 1.13
import StatusQ.Components 0.1
import StatusQ.Controls 0.1
import StatusQ.Core.Theme 0.1
import utils 1.0
import "../../../../shared/popups"
import "../../../../shared/panels"
import "../../../../shared/controls"
import "../../../../shared/views"
import "../../../../shared/status"
import "../panels"
import "../popups"
@ -49,9 +51,10 @@ Item {
StatusRoundButton {
id: addButton
icon.name: "plusSign"
size: "medium"
type: "secondary"
width: 40
height: 40
icon.name: "add"
type: StatusRoundButton.Type.Secondary
anchors.verticalCenter: parent.verticalCenter
}
@ -85,11 +88,11 @@ Item {
StatusRoundButton {
id: blockButton
anchors.verticalCenter: parent.verticalCenter
icon.name: "block-icon"
icon.color: Style.current.lightBlue
width: 40
height: 40
anchors.verticalCenter: parent.verticalCenter
icon.name: "cancel"
icon.color: Theme.palette.primaryColor1
}
StyledText {

9
ui/app/AppLayouts/Profile/views/EnsListView.qml
View File

@ -6,11 +6,11 @@ import utils 1.0
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Controls 0.1
import "../popups"
import "../../../../shared"
import "../../../../shared/panels"
import "../../../../shared/status"
//TODO remove these dependencies in imports
import "../../Chat/views"
@ -152,10 +152,11 @@ Item {
StatusRoundButton {
id: addButton
icon.name: "plusSign"
size: "medium"
type: "secondary"
width: 40
height: 40
anchors.verticalCenter: parent.verticalCenter
icon.name: "add"
type: StatusRoundButton.Type.Secondary
}
StatusBaseText {

11
ui/app/AppLayouts/Profile/views/EnsSearchView.qml
View File

@ -4,6 +4,7 @@ import QtQuick.Controls 2.14
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Controls 0.1 as StatusQControls
import utils 1.0
import "../../../../shared"
@ -169,16 +170,14 @@ Item {
}
}
// TODO: replace with StatusQ component
StatusRoundButton {
StatusQControls.StatusRoundButton {
id: btnContinue
width: 44
height: 44
width: 40
height: 40
anchors.top: circleAt.bottom
anchors.topMargin: Style.current.bigPadding
anchors.right: parent.right
size: "medium"
type: "secondary"
type: StatusQControls.StatusRoundButton.Type.Secondary
icon.name: "arrow-right"
icon.width: 18
icon.height: 14

11
ui/app/AppLayouts/Wallet/controls/AddAccountButton.qml
View File

@ -1,15 +1,16 @@
import QtQuick 2.13
import QtQuick.Controls 2.13
import "../../../../shared/status"
import StatusQ.Controls 0.1
StatusRoundButton {
id: btnAdd
property bool checked: false
width: 36
height: 36
icon.name: "plusSign"
pressedIconRotation: 45
size: "medium"
type: "secondary"
icon.name: "add"
icon.rotation: checked ? 45 : 0
type: StatusRoundButton.Type.Secondary
onPressed: checked = !checked
}

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

@ -12,6 +12,8 @@ import "../controls"
import "../views"
import "."
import StatusQ.Controls 0.1 as StatusQControls
// TODO: replace with StatusModal
ModalPopup {
id: root
@ -220,7 +222,7 @@ ModalPopup {
width: parent.width
height: btnNext.height
StatusRoundButton {
StatusQControls.StatusRoundButton {
id: btnBack
anchors.left: parent.left
visible: !stack.isFirstGroup

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

@ -182,7 +182,7 @@ ModalPopup {
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: {

209
ui/shared/status/StatusRoundButton.qml
View File

@ -1,209 +0,0 @@
import QtQuick 2.13
import QtQuick.Controls 2.13
import QtGraphicalEffects 1.13
import QtQml 2.14
import StatusQ.Components 0.1
import utils 1.0
import "../../shared/panels"
RoundButton {
property string type: "primary"
property string size: "large"
property int pressedIconRotation: 0
property alias iconX: iconImg.x
id: control
font.pixelSize: 15
font.weight: Font.Medium
implicitWidth: {
switch(size) {
case "large":
return 44
case "medium":
return 40
case "small":
return 32
default:
return 44
}
}
implicitHeight: implicitWidth
enabled: state === "default" || state === "pressed"
rotation: 0
state: "default"
states: [
State {
name: "default"
PropertyChanges {
target: iconColorOverlay
visible: true
rotation: 0
}
PropertyChanges {
target: loadingIndicator
active: false
}
},
State {
name: "pressed"
PropertyChanges {
target: iconColorOverlay
rotation: control.pressedIconRotation
visible: true
}
PropertyChanges {
target: loadingIndicator
active: false
}
},
State {
name: "pending"
PropertyChanges {
target: loadingIndicator
active: true
}
PropertyChanges {
target: iconColorOverlay
visible: false
}
}
]
transitions: [
Transition {
from: "default"
to: "pressed"
RotationAnimation {
duration: 150
direction: RotationAnimation.Clockwise
easing.type: Easing.InCubic
}
},
Transition {
from: "pressed"
to: "default"
RotationAnimation {
duration: 150
direction: RotationAnimation.Counterclockwise
easing.type: Easing.OutCubic
}
}
]
icon.height: {
switch(size) {
case "large":
return 20
case "medium":
return 14
case "small":
return 12
default:
return 20
}
}
icon.width: {
switch(size) {
case "large":
return 20
case "medium":
return 14
case "small":
return 12
default:
return 20
}
}
icon.color: type === "secondary" ?
!enabled ?
Style.current.roundedButtonSecondaryDisabledForegroundColor :
Style.current.roundedButtonSecondaryForegroundColor
:
!enabled ?
Style.current.roundedButtonDisabledForegroundColor :
Style.current.roundedButtonForegroundColor
onIconChanged: {
icon.source = icon.name ? Style.svg(icon.name) : ""
}
background: Rectangle {
anchors.fill: parent
opacity: hovered && size === "large" && type !== "secondary" ? 0.2 : 1
color: {
if (size === "medium" || size === "small" || type === "secondary") {
return !enabled ? Style.current.roundedButtonSecondaryDisabledBackgroundColor :
hovered ? (control.type === "warn" ? Style.current.red : Style.current.roundedButtonSecondaryHoveredBackgroundColor) :
(control.type === "warn" ? Style.current.lightRed : Style.current.roundedButtonSecondaryBackgroundColor)
}
return !enabled ?
Style.current.roundedButtonDisabledBackgroundColor :
hovered ? (control.type === "warn" ? Style.current.red : Style.current.buttonHoveredBackgroundColor) :
(control.type === "warn" ? Style.current.lightRed : Style.current.roundedButtonBackgroundColor)
}
radius: parent.width / 2
}
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
}
Component {
id: loadingComponent
StatusLoadingIndicator {
color: control.size === "medium" || control.size === "small" ?
Style.current.roundedButtonSecondaryDisabledForegroundColor :
Style.current.roundedButtonDisabledForegroundColor
}
}
Loader {
id: loadingIndicator
sourceComponent: loadingComponent
height: size === "small" ? 14 : 18
width: loadingIndicator.height
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
}
ColorOverlay {
id: iconColorOverlay
anchors.fill: iconImg
source: iconImg
color: {
if (type === "secondary") {
return !control.enabled ?
Style.current.roundedButtonSecondaryDisabledForegroundColor :
(control.type === "warn" ? Style.current.danger : Style.current.roundedButtonSecondaryForegroundColor)
}
return !control.enabled ?
Style.current.roundedButtonDisabledForegroundColor :
(control.type === "warn" ? Style.current.danger : Style.current.roundedButtonForegroundColor)
}
antialiasing: true
}
}
MouseArea {
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
anchors.fill: parent
onPressed: mouse.accepted = false
}
}

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

@ -3,14 +3,12 @@ import QtQuick.Controls 2.13
import QtQuick.Layouts 1.3
import QtGraphicalEffects 1.0
import StatusQ.Components 0.1
import utils 1.0
import StatusQ.Controls 0.1 as StatusQControls
import StatusQ.Components 0.1
import "../../shared/panels"
import "../../shared/status"
//TODO improve this!
import "../../app/AppLayouts/Chat/stores"
@ -185,9 +183,10 @@ Popup {
StatusQControls.StatusFlatRoundButton {
id: btnAddStickerPack
icon.name: "add"
implicitWidth: 24
implicitHeight: 24
type: StatusRoundButton.Type.Secondary
icon.name: "add"
state: root.stickerPacksLoaded ? "default" : "pending"
onClicked: {
stickersContainer.visible = false

1
ui/shared/status/qmldir
View File

@ -7,7 +7,6 @@ StatusEmojiSection 1.0 StatusEmojiSection.qml
StatusGifPopup 1.0 StatusGifPopup.qml
StatusGifColumn 1.0 StatusGifColumn.qml
StatusImageIdenticon 1.0 StatusImageIdenticon.qml
StatusRoundButton 1.0 StatusRoundButton.qml
StatusSectionHeadline 1.0 StatusSectionHeadline.qml
StatusStickerButton 1.0 StatusStickerButton.qml
StatusStickerList 1.0 StatusStickerList.qml

6
ui/shared/views/TransactionSigner.qml
View File

@ -9,6 +9,8 @@ import "../status"
import "../panels"
import "../controls"
import StatusQ.Controls 0.1 as StatusQControls
Item {
id: root
height: signingPhraseItem.height + signingPhrase.height + txtPassword.height + Style.current.smallPadding + Style.current.bigPadding
@ -52,7 +54,7 @@ Item {
text: qsTrId("signing-phrase")
}
StatusRoundButton {
StatusQControls.StatusRoundButton {
id: infoButton
anchors.left: labelSigningPhrase.right
anchors.leftMargin: 7
@ -79,7 +81,7 @@ Item {
text: root.signingPhrase
}
StatusRoundButton {
StatusQControls.StatusRoundButton {
id: passwordInfoButton
anchors.left: parent.left
anchors.leftMargin: 67