mirror of
https://github.com/status-im/status-desktop.git
synced 2025-01-15 17:16:26 +00:00
WIP SAVEPOINT
This commit is contained in:
Pascal Precht
Iuri Matias
parent
23e1307659
commit
c142d7a99f
@ -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
3
ui/app/img/arrow-right.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 643 B |
@ -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
|
||||
}
|
||||
|
||||
@ -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
|
||||
}
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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 */
|
||||
/* } */
|
||||
/* } */
|
||||
}
|
||||
83
ui/shared/status/StatusRoundButton.qml
Normal file
83
ui/shared/status/StatusRoundButton.qml
Normal 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
|
||||
}
|
||||
}
|
||||
@ -1,2 +1,2 @@
|
||||
StButton 1.0 StButton.qml
|
||||
StRoundButton 1.0 StRoundButton.qml
|
||||
StatusButton 1.0 StatusButton.qml
|
||||
StatusRoundButton 1.0 StatusRoundButton.qml
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user