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 11:00:03 +02:00 committed by Iuri Matias
parent 9d8fe87fd8
commit 23e1307659
10 changed files with 289 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
ui/app/AppLayouts/Profile/Sections/AdvancedContainer.qml
View File

@ -97,6 +97,31 @@ Item {
text: qsTrId("under-development-nnote--you-will-be-logged-out-and-all-installed-nsticker-packs-will-be-removed-and-will-nneed-to-be-reinstalled--purchased-sticker-npacks-will-not-need-to-be-re-purchased-")
}
}
RowLayout {
id: uiCatalong
anchors.top: networkTabSettings.bottom
anchors.topMargin: 20
anchors.left: parent.left
anchors.leftMargin: 24
Component.onCompleted: {
uiComponentBtn.enabled = false
}
StyledText {
text: qsTr("UI Components")
}
Switch {
checked: uiComponentBtn.enabled
onCheckedChanged: function(value) {
uiComponentBtn.enabled = this.checked
}
}
StyledText {
text: qsTr("Developer setting")
}
}
}
/*##^##

110
ui/app/AppLayouts/UIComponents/UIComponents.qml Normal file
View File

@ -0,0 +1,110 @@
import QtQuick 2.13
import QtQuick.Controls 2.13
import QtQuick.Layouts 1.13
import "../../../imports"
import "../../../shared"
import "../../../shared/status"
Item {
id: uiComponentCatalog
Layout.fillHeight: true
Layout.fillWidth: true
ColumnLayout {
id: buttons
spacing: 6
RowLayout {
Text {
text: "Buttons"
}
}
RowLayout {
StButton {
text: "Primary Large Button"
}
StButton {
text: "Secondary Large Button"
type: "secondary"
}
StButton {
text: "Primary Small Button"
size: "small"
}
StButton {
text: "Secondary Small Button"
type: "secondary"
size: "small"
}
StRoundButton {
text: "\u2713"
}
}
RowLayout {
StButton {
text: "Primary Large Button"
enabled: false
}
StButton {
text: "Secondary Large Button"
type: "secondary"
enabled: false
}
StButton {
text: "Primary Small Button"
enabled: false
size: "small"
}
StButton {
text: "Secondary Small Button"
type: "secondary"
enabled: false
size: "small"
}
StRoundButton {
}
}
RowLayout {
StButton {
text: "Primary Large Button"
state: "pending"
}
StButton {
text: "Secondary Large Button"
type: "secondary"
state: "pending"
}
StButton {
text: "Primary Large Button"
state: "pending"
size: "small"
}
StButton {
text: "Secondary Large Button"
type: "secondary"
state: "pending"
size: "small"
}
StRoundButton {
}
}
}
}

1
ui/app/AppLayouts/qmldir
View File

@ -2,3 +2,4 @@ ChatLayout 1.0 Chat/ChatLayout.qml
NodeLayout 1.0 Node/NodeLayout.qml
ProfileLayout 1.0 Profile/ProfileLayout.qml
WalletLayout 1.0 Wallet/WalletLayout.qml
UIComponents 1.0 UIComponents/UIComponents.qml

33
ui/app/AppMain.qml
View File

@ -154,6 +154,33 @@ RowLayout {
source: parent.checked ? "img/nodeActive.svg" : "img/node.svg"
}
}
TabButton {
id: uiComponentBtn
enabled: isExperimental === "1"
visible: this.enabled
width: 40
height: this.enabled ? 40 : 0
text: ""
anchors.topMargin: this.enabled ? 50 : 0
anchors.horizontalCenter: parent.horizontalCenter
anchors.top: nodeBtn.top
background: Rectangle {
color: Style.current.secondaryBackground
opacity: parent.checked ? 1 : 0
radius: 50
}
SVGImage {
id: image5
height: 24
width: 24
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
fillMode: Image.PreserveAspectFit
source: parent.checked ? "img/nodeActive.svg" : "img/node.svg"
}
}
}
StackLayout {
@ -192,6 +219,12 @@ RowLayout {
Layout.alignment: Qt.AlignLeft | Qt.AlignTop
Layout.fillHeight: true
}
UIComponents {
Layout.fillWidth: true
Layout.alignment: Qt.AlignLeft | Qt.AlignTop
Layout.fillHeight: true
}
}
}

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

@ -40,4 +40,9 @@ Theme {
property color primaryMenuItemHover: blue
property color primaryMenuItemTextHover: almostBlack
property color backgroundTertiary: tenPercentBlue
property color buttonForegroundColor: blue
property color buttonBackgroundColor: secondaryBackground
property color roundedButtonForegroundColor: white
property color roundedButtonBackgroundColor: secondaryBackground
}

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

@ -39,4 +39,11 @@ Theme {
property color primaryMenuItemHover: blue
property color primaryMenuItemTextHover: white
property color backgroundTertiary: tenPercentBlue
property color buttonForegroundColor: blue
property color buttonBackgroundColor: secondaryBackground
property color buttonDisabledForegroundColor: darkGrey
property color buttonDisabledBackgroundColor: grey
property color roundedButtonForegroundColor: white
property color roundedButtonBackgroundColor: secondaryBackground
}

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

@ -33,6 +33,13 @@ QtObject {
property color secondaryBackground
property color modalBackground
property color buttonForegroundColor
property color buttonBackgroundColor
property color buttonDisabledForegroundColor
property color buttonDisabledBackgroundColor
property color roundedButtonForegroundColor
property color roundedButtonBackgroundColor
property int xlPadding: 32
property int bigPadding: 24
property int padding: 16

64
ui/shared/status/StButton.qml Normal file
View File

@ -0,0 +1,64 @@
import QtQuick 2.13
import QtQuick.Controls 2.13
import QtQml 2.14
import "../../imports"
import "../../shared"
Button {
property string type: "primary"
property string size: "large"
property string state: "default"
id: control
font.pixelSize: size === "small" ? 13 : 15
font.weight: Font.Medium
implicitHeight: size === "small" ? 38 : 44
implicitWidth: buttonLabel.implicitWidth + 2 * Style.current.padding
enabled: state === "default"
contentItem: Item {
anchors.fill: parent
Text {
id: buttonLabel
text: control.text
font: control.font
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
anchors.fill: parent
color: !enabled ? Style.current.buttonDisabledForegroundColor : Style.current.buttonForegroundColor
visible: !loadingIndicator.visible
}
LoadingImage {
id: loadingIndicator
visible: control.state === "pending"
height: loadingIndicator.visible ?
control.size === "large" ?
23 : 17
: 0
width: loadingIndicator.height
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
}
}
background: Rectangle {
radius: Style.current.radius
anchors.fill: parent
color: {
if (type === "secondary") {
return hovered ? Style.current.buttonBackgroundColor : "transparent"
}
return !enabled ? Style.current.buttonDisabledBackgroundColor :
hovered ? Qt.darker(Style.current.buttonBackgroundColor, 1.1) :
Style.current.buttonBackgroundColor
}
}
MouseArea {
cursorShape: Qt.PointingHandCursor
anchors.fill: parent
onPressed: mouse.accepted = false
}
}

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

@ -0,0 +1,35 @@
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 */
/* } */
/* } */
}

2
ui/shared/status/qmldir Normal file
View File

@ -0,0 +1,2 @@
StButton 1.0 StButton.qml
StRoundButton 1.0 StRoundButton.qml