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

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:
emizzle 2020-09-30 22:33:26 +10:00 committed by Iuri Matias
parent 8bac59e98c
commit 1d2774283f
10 changed files with 78 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
ui/app/AppLayouts/Chat/ChatColumn/ReplyArea.qml
View File

@ -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,7 +83,7 @@ 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

4
ui/app/AppLayouts/Chat/ChatColumn/SendImageArea.qml
View File

@ -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
}

1
ui/nim-status-client.pro
View File

@ -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 \

62
ui/onboarding/EnterSeedPhraseModal.qml
View File

@ -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 === "") {

11
ui/onboarding/ExistingKey.qml
View File

@ -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
}
}
/*##^##

28
ui/onboarding/GenKeyModal.qml
View File

@ -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()

1
ui/onboarding/qmldir
View File

@ -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

30
ui/shared/ModalPopup.qml
View File

@ -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()

4
ui/shared/img/close.svg
View File

@ -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>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 664 B

After

Width:  |  Height:  |  Size: 862 B

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

@ -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
}