fix: Update StatusRoundButton colours
Update StatusRoundButton colours to support a "tertiary" style (background and icon color overlay), as well as tertiary hover colour. Fix the modal header close button so that it more closely matches the design. Replace the buttons in the onboarding modals with StatusRoundButtons were possible.
This commit is contained in:
parent
8bac59e98c
commit
1d2774283f
|
@ -1,8 +1,10 @@
|
|||
import QtQuick 2.13
|
||||
import QtQuick.Controls 2.13
|
||||
import QtQuick.Layouts 1.13
|
||||
import QtGraphicalEffects 1.13
|
||||
import "../../../../imports"
|
||||
import "../../../../shared"
|
||||
import "../../../../shared/status"
|
||||
import "./"
|
||||
|
||||
Rectangle {
|
||||
|
@ -32,39 +34,16 @@ Rectangle {
|
|||
identicon = "";
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
StatusIconButton {
|
||||
id: closeButton
|
||||
height: 32
|
||||
width: 32
|
||||
type: "secondary"
|
||||
icon.name: "close"
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin: Style.current.padding
|
||||
anchors.rightMargin: Style.current.padding
|
||||
anchors.right: parent.right
|
||||
radius: 8
|
||||
|
||||
SVGImage {
|
||||
id: closeModalImg
|
||||
source: "../../../../shared/img/close.svg"
|
||||
width: 25
|
||||
height: 25
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
id: closeReplyArea
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
onExited: {
|
||||
closeButton.color = Style.current.white
|
||||
}
|
||||
onEntered: {
|
||||
closeButton.color = Style.current.grey
|
||||
}
|
||||
onClicked: {
|
||||
chatColumn.hideExtendedArea()
|
||||
}
|
||||
onClicked: {
|
||||
chatColumn.hideExtendedArea()
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -104,11 +83,11 @@ Rectangle {
|
|||
anchors.top: replyToUsername.bottom
|
||||
anchors.topMargin: 8
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: Style.current.padding
|
||||
anchors.rightMargin: Style.current.padding * 2 + closeButton.width
|
||||
elide: Text.ElideRight
|
||||
wrapMode: Text.Wrap
|
||||
font.pixelSize: 15
|
||||
textFormat: Text.RichText
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
@ -29,8 +29,8 @@ Rectangle {
|
|||
SVGImage {
|
||||
id: closeModalImg
|
||||
source: "../../../../shared/img/close.svg"
|
||||
width: 25
|
||||
height: 25
|
||||
width: 11
|
||||
height: 11
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
|
|
@ -207,6 +207,7 @@ DISTFILES += \
|
|||
app/AppLayouts/Chat/ChatColumn/ChatMessages.qml \
|
||||
app/AppLayouts/Chat/ChatColumn/EmptyChat.qml \
|
||||
app/AppLayouts/Chat/ChatColumn/Message.qml \
|
||||
app/AppLayouts/Chat/ChatColumn/ReplyArea.qml \
|
||||
app/AppLayouts/Chat/ChatColumn/TopBar.qml \
|
||||
app/AppLayouts/Chat/ChatColumn/qmldir \
|
||||
app/AppLayouts/Chat/ChatLayout.qml \
|
||||
|
|
|
@ -3,9 +3,11 @@ import QtQuick.Controls 2.13
|
|||
import QtGraphicalEffects 1.13
|
||||
import "../imports"
|
||||
import "../shared"
|
||||
import "../shared/status"
|
||||
|
||||
ModalPopup {
|
||||
property var onConfirmSeedClick: function () {}
|
||||
property alias error: errorText.text
|
||||
id: popup
|
||||
title: qsTr("Enter seed phrase")
|
||||
height: 400
|
||||
|
@ -14,28 +16,44 @@ ModalPopup {
|
|||
mnemonicTextField.text = "";
|
||||
mnemonicTextField.forceActiveFocus(Qt.MouseFocusReason)
|
||||
}
|
||||
|
||||
TextArea {
|
||||
id: mnemonicTextField
|
||||
height: 44
|
||||
wrapMode: Text.WordWrap
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
font.pixelSize: 15
|
||||
placeholderText: qsTr("Start with the first word")
|
||||
placeholderTextColor: Style.current.secondaryText
|
||||
anchors.top: parent.top
|
||||
anchors.bottom: errorText.top
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 76
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 76
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
wrapMode: Text.WordWrap
|
||||
horizontalAlignment: TextEdit.AlignHCenter
|
||||
verticalAlignment: TextEdit.AlignVCenter
|
||||
font.pixelSize: 15
|
||||
font.bold: true
|
||||
placeholderText: qsTr("Start with the first word")
|
||||
placeholderTextColor: Style.current.secondaryText
|
||||
|
||||
color: Style.current.textColor
|
||||
|
||||
Keys.onReturnPressed: {
|
||||
submitBtn.clicked()
|
||||
}
|
||||
KeyNavigation.priority: KeyNavigation.BeforeItem
|
||||
KeyNavigation.tab: submitBtn
|
||||
}
|
||||
|
||||
StyledText {
|
||||
id: errorText
|
||||
visible: !!text && text != ""
|
||||
color: Style.current.danger
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.bottom: helpText.top
|
||||
anchors.bottomMargin: Style.current.smallPadding
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
}
|
||||
|
||||
StyledText {
|
||||
id: helpText
|
||||
//% "Enter 12, 15, 18, 21 or 24 words.\nSeperate words by a single space."
|
||||
text: qsTrId("enter-12--15--18--21-or-24-words--nseperate-words-by-a-single-space-")
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
|
@ -45,33 +63,15 @@ ModalPopup {
|
|||
font.pixelSize: 12
|
||||
}
|
||||
|
||||
footer: Button {
|
||||
footer: StatusRoundButton {
|
||||
id: submitBtn
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.topMargin: Style.current.padding
|
||||
anchors.right: parent.right
|
||||
width: 44
|
||||
height: 44
|
||||
background: Rectangle {
|
||||
radius: 50
|
||||
color: Style.current.buttonBackgroundColor
|
||||
}
|
||||
|
||||
SVGImage {
|
||||
sourceSize.height: 15
|
||||
sourceSize.width: 20
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
source: "../app/img/arrow-right.svg"
|
||||
fillMode: Image.PreserveAspectFit
|
||||
|
||||
ColorOverlay {
|
||||
anchors.fill: parent
|
||||
source: parent
|
||||
color: Style.current.buttonForegroundColor
|
||||
antialiasing: true
|
||||
}
|
||||
}
|
||||
icon.name: "arrow-right"
|
||||
icon.width: 20
|
||||
icon.height: 16
|
||||
enabled: mnemonicTextField.text.length > 0
|
||||
|
||||
onClicked : {
|
||||
if (mnemonicTextField.text === "") {
|
||||
|
|
|
@ -15,19 +15,16 @@ Item {
|
|||
property bool wentNext: false
|
||||
id: enterSeedPhraseModal
|
||||
onConfirmSeedClick: function (mnemonic) {
|
||||
let error = "";
|
||||
error = "";
|
||||
|
||||
if(!Utils.isMnemonic(mnemonic)){
|
||||
//% "Invalid mnemonic"
|
||||
error = qsTrId("invalid-mnemonic")
|
||||
error = qsTr("Invalid seed phrase")
|
||||
} else {
|
||||
error = onboardingModel.validateMnemonic(mnemonic)
|
||||
}
|
||||
|
||||
if (error != "") {
|
||||
errorSound.play()
|
||||
invalidSeedPhraseModal.error = error
|
||||
invalidSeedPhraseModal.open()
|
||||
} else {
|
||||
wentNext = true
|
||||
enterSeedPhraseModal.close()
|
||||
|
@ -48,10 +45,6 @@ Item {
|
|||
existingKeyView.onClosed()
|
||||
}
|
||||
}
|
||||
|
||||
InvalidSeedPhraseModal {
|
||||
id: invalidSeedPhraseModal
|
||||
}
|
||||
}
|
||||
|
||||
/*##^##
|
||||
|
|
|
@ -27,34 +27,14 @@ ModalPopup {
|
|||
selectedIndex = index
|
||||
}
|
||||
}
|
||||
footer: Button {
|
||||
footer: StatusRoundButton {
|
||||
id: submitBtn
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.topMargin: Style.current.padding
|
||||
anchors.right: parent.right
|
||||
width: 44
|
||||
height: 44
|
||||
background: Rectangle {
|
||||
radius: 50
|
||||
color: Style.current.buttonBackgroundColor
|
||||
}
|
||||
|
||||
SVGImage {
|
||||
sourceSize.height: 15
|
||||
sourceSize.width: 20
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
source: "../app/img/arrow-right.svg"
|
||||
fillMode: Image.PreserveAspectFit
|
||||
|
||||
ColorOverlay {
|
||||
anchors.fill: parent
|
||||
source: parent
|
||||
color: Style.current.buttonForegroundColor
|
||||
antialiasing: true
|
||||
}
|
||||
}
|
||||
|
||||
icon.name: "arrow-right"
|
||||
icon.width: 20
|
||||
icon.height: 16
|
||||
onClicked : {
|
||||
onNextClick(selectedIndex);
|
||||
popup.close()
|
||||
|
|
|
@ -8,4 +8,3 @@ Slide 1.0 Slide.qml
|
|||
EnterSeedPhraseModal 1.0 EnterSeedPhraseModal.qml
|
||||
CreatePasswordModal 1.0 CreatePasswordModal.qml
|
||||
GenKeyModal 1.0 GenKeyModal.qml
|
||||
InvalidSeedPhraseModal 1.0 InvalidSeedPhraseModal.qml
|
||||
|
|
|
@ -32,46 +32,48 @@ Popup {
|
|||
|
||||
Item {
|
||||
id: headerContent
|
||||
width: parent.width
|
||||
height: {
|
||||
var idx = !!title ? 0 : 1
|
||||
return children[idx] && children[idx].height + Style.current.padding
|
||||
return children[idx] && children[idx].height
|
||||
}
|
||||
anchors.top: parent.top
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
|
||||
anchors.topMargin: Style.current.padding
|
||||
anchors.bottomMargin: Style.current.padding
|
||||
anchors.rightMargin: Style.current.padding
|
||||
anchors.leftMargin: Style.current.padding
|
||||
|
||||
StyledText {
|
||||
text: title
|
||||
anchors.top: parent.top
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.left: parent.left
|
||||
font.bold: true
|
||||
font.pixelSize: 17
|
||||
anchors.topMargin: Style.current.padding
|
||||
anchors.bottomMargin: Style.current.padding
|
||||
height: 24
|
||||
visible: !!title
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: closeButton
|
||||
property bool hovered: false
|
||||
height: 32
|
||||
width: 32
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin: Style.current.padding
|
||||
anchors.rightMargin: Style.current.padding
|
||||
anchors.right: parent.right
|
||||
anchors.top: headerContent.top
|
||||
anchors.topMargin: -4
|
||||
anchors.right: headerContent.right
|
||||
anchors.rightMargin: -4
|
||||
radius: 8
|
||||
color: Style.current.transparent
|
||||
color: hovered ? Style.current.backgroundHover : Style.current.transparent
|
||||
|
||||
SVGImage {
|
||||
id: closeModalImg
|
||||
source: "./img/close.svg"
|
||||
width: 25
|
||||
height: 25
|
||||
width: 11
|
||||
height: 11
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
@ -87,10 +89,10 @@ Popup {
|
|||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
onExited: {
|
||||
closeButton.color = Style.current.transparent
|
||||
closeButton.hovered = false
|
||||
}
|
||||
onEntered: {
|
||||
closeButton.color = Style.current.border
|
||||
closeButton.hovered = true
|
||||
}
|
||||
onClicked: {
|
||||
popup.close()
|
||||
|
|
|
@ -1,3 +1,3 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 10.574L7.72275 6.2968C7.32616 5.90021 6.68994 5.90241 6.29617 6.29617C5.89966 6.69269 5.90269 7.32864 6.2968 7.72275L10.574 12L6.2968 16.2772C5.90021 16.6738 5.90241 17.3101 6.29617 17.7038C6.69269 18.1003 7.32864 18.0973 7.72275 17.7032L12 13.426L16.2772 17.7032C16.6738 18.0998 17.3101 18.0976 17.7038 17.7038C18.1003 17.3073 18.0973 16.6714 17.7032 16.2772L13.426 12L17.7032 7.72275C18.0998 7.32616 18.0976 6.68994 17.7038 6.29617C17.3073 5.89966 16.6714 5.90269 16.2772 6.2968L12 10.574Z" fill="black"/>
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10.4697 11.5303C10.7626 11.8232 11.2374 11.8232 11.5303 11.5303C11.8232 11.2374 11.8232 10.7626 11.5303 10.4697L7.41421 6.35355C7.21895 6.15829 7.21895 5.84171 7.41421 5.64645L11.5303 1.53033C11.8232 1.23744 11.8232 0.762564 11.5303 0.46967C11.2374 0.176777 10.7626 0.176777 10.4697 0.46967L6.35355 4.58579C6.15829 4.78105 5.84171 4.78105 5.64645 4.58579L1.53033 0.46967C1.23744 0.176777 0.762563 0.176777 0.46967 0.46967C0.176777 0.762563 0.176777 1.23744 0.46967 1.53033L4.58579 5.64645C4.78105 5.84171 4.78105 6.15829 4.58579 6.35355L0.46967 10.4697C0.176777 10.7626 0.176777 11.2374 0.46967 11.5303C0.762563 11.8232 1.23744 11.8232 1.53033 11.5303L5.64645 7.41421C5.84171 7.21895 6.15829 7.21895 6.35355 7.41421L10.4697 11.5303Z" fill="black"/>
|
||||
</svg>
|
||||
|
|
Before Width: | Height: | Size: 664 B After Width: | Height: | Size: 862 B |
|
@ -76,7 +76,7 @@ RoundButton {
|
|||
}
|
||||
return !enabled ?
|
||||
Style.current.roundedButtonDisabledBackgroundColor :
|
||||
Style.current.roundedButtonBackgroundColor
|
||||
hovered ? Qt.darker(Style.current.buttonBackgroundColor, 1.1) : Style.current.roundedButtonBackgroundColor
|
||||
}
|
||||
radius: parent.width / 2
|
||||
}
|
||||
|
@ -117,9 +117,16 @@ RoundButton {
|
|||
anchors.fill: iconImg
|
||||
visible: control.state === "default"
|
||||
source: iconImg
|
||||
color: control.size === "medium" || control.size === "small" ?
|
||||
Style.current.roundedButtonSecondaryDisabledForegroundColor :
|
||||
Style.current.roundedButtonDisabledForegroundColor
|
||||
color: {
|
||||
if (size === "medium" || size == "small") {
|
||||
return !control.enabled ?
|
||||
Style.current.roundedButtonSecondaryDisabledForegroundColor :
|
||||
Style.current.roundedButtonSecondaryForegroundColor
|
||||
}
|
||||
return !control.enabled ?
|
||||
Style.current.roundedButtonDisabledForegroundColor :
|
||||
Style.current.roundedButtonForegroundColor
|
||||
}
|
||||
antialiasing: true
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue