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

WIP SAVEPOINT

This commit is contained in:
Pascal Precht 2020-08-25 13:15:18 +02:00 committed by Iuri Matias
parent 23e1307659
commit c142d7a99f
9 changed files with 156 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
ui/app/AppLayouts/UIComponents/UIComponents.qml
View File

@ -22,88 +22,116 @@ Item {
}
RowLayout {
StButton {
StatusButton {
text: "Primary Large Button"
}
StButton {
StatusButton {
text: "Secondary Large Button"
type: "secondary"
}
StButton {
StatusButton {
text: "Primary Small Button"
size: "small"
}
StButton {
StatusButton {
text: "Secondary Small Button"
type: "secondary"
size: "small"
}
StRoundButton {
text: "\u2713"
StatusRoundButton {
icon.name: "arrow-right"
icon.height: 15
icon.width: 20
}
StatusRoundButton {
type: "secondary"
size: "medium"
icon.name: "arrow-right"
icon.height: 15
icon.width: 20
}
}
RowLayout {
StButton {
StatusButton {
text: "Primary Large Button"
enabled: false
}
StButton {
StatusButton {
text: "Secondary Large Button"
type: "secondary"
enabled: false
}
StButton {
StatusButton {
text: "Primary Small Button"
enabled: false
size: "small"
}
StButton {
StatusButton {
text: "Secondary Small Button"
type: "secondary"
enabled: false
size: "small"
}
StRoundButton {
StatusRoundButton {
icon.name: "arrow-right"
icon.height: 15
icon.width: 20
enabled: false
}
StatusRoundButton {
type: "secondary"
size: "medium"
icon.name: "arrow-right"
icon.height: 15
icon.width: 20
enabled: false
}
}
RowLayout {
StButton {
StatusButton {
text: "Primary Large Button"
state: "pending"
}
StButton {
StatusButton {
text: "Secondary Large Button"
type: "secondary"
state: "pending"
}
StButton {
StatusButton {
text: "Primary Large Button"
state: "pending"
size: "small"
}
StButton {
StatusButton {
text: "Secondary Large Button"
type: "secondary"
state: "pending"
size: "small"
}
StRoundButton {
StatusRoundButton {
state: "pending"
}
StatusRoundButton {
type: "secondary"
size: "medium"
state: "pending"
}
}
}

3
ui/app/img/arrow-right.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="22" height="16" viewBox="0 0 22 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.7147 1.61872C12.373 1.27701 12.373 0.72299 12.7147 0.381282C13.0564 0.0395728 13.6104 0.0395728 13.9521 0.381282L20.9521 7.38128C21.2938 7.72299 21.2938 8.27701 20.9521 8.61872L13.9521 15.6187C13.6104 15.9604 13.0564 15.9604 12.7147 15.6187C12.373 15.277 12.373 14.723 12.7147 14.3813L17.2252 9.87081C17.5926 9.50333 17.3324 8.875 16.8127 8.875H1.66675C1.1835 8.875 0.791748 8.48325 0.791748 8C0.791748 7.51675 1.1835 7.125 1.66675 7.125H16.8127C17.3324 7.125 17.5926 6.49667 17.2252 6.12919L12.7147 1.61872Z" fill="#4360DF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 643 B

11
ui/imports/Themes/DarkTheme.qml
View File

@ -10,6 +10,7 @@ Theme {
property color lightBlue: "#ECEFFC"
property color cyan: "#00FFFF"
property color blue: "#758EF0"
property color darkAccentBlue: "#2946C4"
property color transparent: "#00000000"
property color darkGrey: "#838C91"
property color lightBlueText: "#8f9fec"
@ -43,6 +44,16 @@ Theme {
property color buttonForegroundColor: blue
property color buttonBackgroundColor: secondaryBackground
property color buttonDisabledForegroundColor: darkGrey
property color buttonDisabledBackgroundColor: grey
property color roundedButtonForegroundColor: white
property color roundedButtonBackgroundColor: secondaryBackground
property color roundedButtonSecondaryForegroundColor: white
property color roundedButtonSecondaryBackgroundColor: buttonForegroundColor
property color roundedButtonSecondaryHoveredBackgroundColor: darkAccentBlue
property color roundedButtonDisabledForegroundColor: buttonDisabledForegroundColor
property color roundedButtonDisabledBackgroundColor: buttonDisabledBackgroundColor
property color roundedButtonSecondaryDisabledForegroundColor: roundedButtonForegroundColor
property color roundedButtonSecondaryDisabledBackgroundColor: buttonDisabledForegroundColor
}

11
ui/imports/Themes/LightTheme.qml
View File

@ -9,6 +9,7 @@ Theme {
property color lightBlue: "#ECEFFC"
property color cyan: "#00FFFF"
property color blue: "#4360DF"
property color darkAccentBlue: "#2946C4"
property color transparent: "#00000000"
property color darkGrey: "#939BA1"
property color lightBlueText: "#8f9fec"
@ -44,6 +45,14 @@ Theme {
property color buttonBackgroundColor: secondaryBackground
property color buttonDisabledForegroundColor: darkGrey
property color buttonDisabledBackgroundColor: grey
property color roundedButtonForegroundColor: white
property color roundedButtonForegroundColor: buttonForegroundColor
property color roundedButtonBackgroundColor: secondaryBackground
property color roundedButtonSecondaryForegroundColor: white
property color roundedButtonSecondaryBackgroundColor: buttonForegroundColor
property color roundedButtonSecondaryHoveredBackgroundColor: darkAccentBlue
property color roundedButtonDisabledForegroundColor: buttonDisabledForegroundColor
property color roundedButtonDisabledBackgroundColor: buttonDisabledBackgroundColor
property color roundedButtonSecondaryDisabledForegroundColor: white
property color roundedButtonSecondaryDisabledBackgroundColor: buttonDisabledForegroundColor
}

1
ui/imports/Themes/Theme.qml
View File

@ -39,6 +39,7 @@ QtObject {
property color buttonDisabledBackgroundColor
property color roundedButtonForegroundColor
property color roundedButtonBackgroundColor
property color roundedButtonSecondaryBackgroundColor
property int xlPadding: 32
property int bigPadding: 24

35
ui/shared/status/StRoundButton.qml
View File

@ -1,35 +0,0 @@
import QtQuick 2.13
import QtQuick.Controls 2.13
import QtQml 2.14
import "../../imports"
import "../../shared"
RoundButton {
property string type: "primary"
property string state: "default"
font.pixelSize: 15
font.weight: Font.Medium
enabled: state === "default"
id: control
height: 44
width: 44
/* background: Rectangle { */
/* color: Style.current.roundedButtonBackgroundColor */
/* radius: parent.width / 2 */
/* } */
/* contentItem: Item { */
/* anchors.fill: parent */
/* LoadingImage { */
/* id: loadingIndicator */
/* visible: control.state === "pending" */
/* height: loadingIndicator.visible ? 23 : 0 */
/* width: loadingIndicator.height */
/* anchors.horizontalCenter: parent.horizontalCenter */
/* anchors.verticalCenter: parent.verticalCenter */
/* } */
/* } */
}

0
ui/shared/status/StButton.qml → ui/shared/status/StatusButton.qml
View File

83
ui/shared/status/StatusRoundButton.qml Normal file
View File

@ -0,0 +1,83 @@
import QtQuick 2.13
import QtQuick.Controls 2.13
import QtGraphicalEffects 1.13
import QtQml 2.14
import "../../imports"
import "../../shared"
RoundButton {
property string type: "primary"
property string state: "default"
property string size: "large"
id: control
font.pixelSize: 15
font.weight: Font.Medium
implicitWidth: size === "medium" ? 40 : 44
implicitHeight: size === "medium" ? 40 : 44
enabled: state === "default"
icon.source: "../../app/img/" + icon.name + ".svg"
icon.height: size === "medium" ? 14 : 20
icon.width: size === "medium" ? 14 : 20
icon.color: type === "secondary" ?
!enabled ?
Style.current.roundedButtonSecondaryDisabledForegroundColor :
Style.current.roundedButtonSecondaryForegroundColor
:
!enabled ?
Style.current.roundedButtonDisabledForegroundColor :
Style.current.roundedButtonForegroundColor
background: Rectangle {
anchors.fill: parent
color: {
if (type === "secondary") {
return !enabled ? Style.current.roundedButtonSecondaryDisabledBackgroundColor :
hovered ? Style.current.roundedButtonSecondaryHoveredBackgroundColor :
Style.current.roundedButtonSecondaryBackgroundColor
}
return !enabled ?
Style.current.roundedButtonDisabledBackgroundColor :
Style.current.roundedButtonBackgroundColor
}
radius: parent.width / 2
}
LoadingImage {
id: loadingIndicator
visible: false
height: 18
width: loadingIndicator.height
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
}
ColorOverlay {
id: colorOverlay
anchors.fill: loadingIndicator
visible: control.state === "pending"
source: loadingIndicator
color: control.type === "secondary" ?
Style.current.roundedButtonSecondaryDisabledForegroundColor :
Style.current.roundedButtonDisabledForegroundColor
antialiasing: true
RotationAnimator {
target: colorOverlay
from: 0
to: 360
duration: 1200
running: true
loops: Animation.Infinite
}
}
MouseArea {
cursorShape: Qt.PointingHandCursor
anchors.fill: parent
onPressed: mouse.accepted = false
}
}

4
ui/shared/status/qmldir
View File

@ -1,2 +1,2 @@
StButton 1.0 StButton.qml
StRoundButton 1.0 StRoundButton.qml
StatusButton 1.0 StatusButton.qml
StatusRoundButton 1.0 StatusRoundButton.qml