diff --git a/src/Gui/Splash.qml b/src/Gui/Splash.qml index 55c22b8..e63ca11 100644 --- a/src/Gui/Splash.qml +++ b/src/Gui/Splash.qml @@ -1,6 +1,7 @@ import QtQuick import QtQuick.Window import QtQuick.Layouts +import QtQuick.Controls import Util import "PStyle" @@ -18,14 +19,23 @@ Window { anchors.centerIn: parent PText { + Layout.alignment: Qt.AlignHCenter text: qsTr("QutePleroma") - font.pointSize: 36 + font: PStyle.getFont(36) } - TextInput { - Layout.preferredWidth: 350 - color: PStyle.foreColor - font: PStyle.font + RowLayout { + PInputField { + Layout.preferredWidth: 200 + label: qsTr("Instance URL") + placeholderText: "ak.gensokyo.shop" + } + + PIconButton { + id: btn + Layout.alignment: Qt.AlignBottom + pIcon.name: "arrow-right" + } } } } diff --git a/src/Gui/Style/PStyle/PIcon.qml b/src/Gui/Style/PStyle/PIcon.qml new file mode 100644 index 0000000..5fc056b --- /dev/null +++ b/src/Gui/Style/PStyle/PIcon.qml @@ -0,0 +1,25 @@ +import QtQuick +import Qt5Compat.GraphicalEffects + +Image { + id: icon + + property string name: "" + property int dimension: 18 + property color colorize: PStyle.foreColor + + cache: true + asynchronous: true + fillMode: Image.PreserveAspectFit + source: name ? `qrc:/Icons/${name}.svg` : "" + smooth: false + + sourceSize.width: name ? dimension : 0 + sourceSize.height: name ? dimension : 0 + + layer.enabled: ! Qt.colorEqual(colorize, "transparent") + layer.effect: ColorOverlay { + color: icon.colorize + cached: icon.cache + } +} \ No newline at end of file diff --git a/src/Gui/Style/PStyle/PIconButton.qml b/src/Gui/Style/PStyle/PIconButton.qml new file mode 100644 index 0000000..92010cd --- /dev/null +++ b/src/Gui/Style/PStyle/PIconButton.qml @@ -0,0 +1,23 @@ +import QtQuick.Controls +import QtQuick.Layouts +import "." + +PRawButton { + id: btn + + topPadding: 8 + bottomPadding: topPadding + rightPadding: 8 + leftPadding: rightPadding + + property alias pIcon: icon + + contentItem: RowLayout { + property alias buttonText: icon + + PIcon { + id: icon + name: "" + } + } +} \ No newline at end of file diff --git a/src/Gui/Style/PStyle/PInputField.qml b/src/Gui/Style/PStyle/PInputField.qml new file mode 100644 index 0000000..88850f0 --- /dev/null +++ b/src/Gui/Style/PStyle/PInputField.qml @@ -0,0 +1,18 @@ +import QtQuick.Layouts +import "." + +ColumnLayout { + property alias label: lbl.text + property alias placeholderText: tf.placeholderText + spacing: 2 + + PText { + id: lbl + font.pointSize: 10 + } + + PTextField { + id: tf + Layout.fillWidth: true + } +} \ No newline at end of file diff --git a/src/Gui/Style/PStyle/PRawButton.qml b/src/Gui/Style/PStyle/PRawButton.qml new file mode 100644 index 0000000..fd10f2b --- /dev/null +++ b/src/Gui/Style/PStyle/PRawButton.qml @@ -0,0 +1,85 @@ +import QtQuick +import QtQuick.Controls +import "." + +Button { + id: btn + hoverEnabled: true + scale: state === "Pressed" ? 0.96 : 1.0 + + background: PBackground { + id: background + color: Qt.darker(PStyle.backColor, 1.8) + + border.width: 1 + border.color: PStyle.foreColor + } + + states: [ + State { + name: "Hovering" + PropertyChanges { + target: background + color: Qt.lighter(PStyle.backColor, 1.6) + } + PropertyChanges { + target: contentItem.buttonText + colorize: Qt.lighter(PStyle.foreColor, 1.2) + } + }, + State { + name: "Pressed" + PropertyChanges { + target: background + color: Qt.darker(PStyle.backColor, 3) + } + PropertyChanges { + target: contentItem.buttonText + colorize: Qt.darker(PStyle.foreColor, 2.4) + } + } + ] + + transitions: [ + Transition { + from: "" + to: "Hovering" + ColorAnimation { + duration: PStyle.animationDuration + } + }, + + Transition { + from: "*" + to: "Pressed" + ColorAnimation { + duration: PStyle.animationDuration + } + } + ] + + Behavior on scale { + NumberAnimation { + duration: PStyle.animationDuration + easing.type: Easing.InOutQuad + } + } + + MouseArea { + hoverEnabled: true + anchors.fill: btn + onEntered: { + btn.state = 'Hovering' + cursorShape = Qt.PointingHandCursor + } + onExited: { btn.state = '' } + onClicked: { btn.clicked() } + onPressed: { btn.state = "Pressed" } + onReleased: { + if (containsMouse) + btn.state = "Hovering" + else + btn.state = "" + } + } +} \ No newline at end of file diff --git a/src/Gui/Style/PStyle/PStyle.qml b/src/Gui/Style/PStyle/PStyle.qml index f38a745..0140fce 100644 --- a/src/Gui/Style/PStyle/PStyle.qml +++ b/src/Gui/Style/PStyle/PStyle.qml @@ -9,8 +9,17 @@ QtObject { property color backColor: Qt.hsva(0, 0, 0.1, 1) property color backColorDark: Qt.darker(backColor, 1.2) + property double animationDuration: 100 + property font font: Qt.font({ - family: "Roboto", + family: "HackGen Console", pointSize: 12, }) + + function getFont(size = 12) { + return Qt.font({ + family: "HackGen Console", + pointSize: size, + }) + } } \ No newline at end of file diff --git a/src/Gui/Style/PStyle/PText.qml b/src/Gui/Style/PStyle/PText.qml index e41b22f..732b74d 100644 --- a/src/Gui/Style/PStyle/PText.qml +++ b/src/Gui/Style/PStyle/PText.qml @@ -2,6 +2,9 @@ import QtQuick import "." Text { + id: txt + property alias colorize: txt.color + color: PStyle.foreColor font: PStyle.font } \ No newline at end of file diff --git a/src/Gui/Style/PStyle/PTextButton.qml b/src/Gui/Style/PStyle/PTextButton.qml new file mode 100644 index 0000000..fc422ba --- /dev/null +++ b/src/Gui/Style/PStyle/PTextButton.qml @@ -0,0 +1,22 @@ +import QtQuick.Controls +import QtQuick.Layouts +import "." + +PRawButton { + id: btn + + topPadding: 8 + bottomPadding: topPadding + rightPadding: text ? 24 : 8 + leftPadding: rightPadding + + contentItem: RowLayout { + property alias buttonText: txt + + PText { + id: txt + Layout.alignment: Qt.AlignHCenter + text: btn.text + } + } +} \ No newline at end of file diff --git a/src/Gui/Style/PStyle/PTextField.qml b/src/Gui/Style/PStyle/PTextField.qml new file mode 100644 index 0000000..90e44e9 --- /dev/null +++ b/src/Gui/Style/PStyle/PTextField.qml @@ -0,0 +1,19 @@ +import QtQuick.Controls +import "." + +TextField { + color: PStyle.foreColor + font: PStyle.font + placeholderTextColor: Qt.darker(PStyle.foreColor, 1.8) + padding: 8 + + background: PBackground { + id: background + color: Qt.darker(PStyle.backColor, 1.8) + + border.width: 1 + border.color: PStyle.foreColor + } + + property alias bBackground: background +} \ No newline at end of file diff --git a/src/Gui/Style/resources.qrc b/src/Gui/Style/resources.qrc index 31ad281..8bf25de 100644 --- a/src/Gui/Style/resources.qrc +++ b/src/Gui/Style/resources.qrc @@ -4,5 +4,11 @@ PStyle/PStyle.qml PStyle/PText.qml PStyle/PBackground.qml + PStyle/PTextField.qml + PStyle/PInputField.qml + PStyle/PTextButton.qml + PStyle/PRawButton.qml + PStyle/PIconButton.qml + PStyle/PIcon.qml \ No newline at end of file diff --git a/src/Icons/arrow-right.svg b/src/Icons/arrow-right.svg new file mode 100644 index 0000000..939b57c --- /dev/null +++ b/src/Icons/arrow-right.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/resources.qrc b/src/resources.qrc index efa0967..17ebe5c 100644 --- a/src/resources.qrc +++ b/src/resources.qrc @@ -4,5 +4,7 @@ Gui/Util/Http.qml Gui/Util/qmldir + + Icons/arrow-right.svg \ No newline at end of file