Add style components

- Icon
- IconButton
- TextField
- Buttons: text & icon

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 {
+      RowLayout {
-        Layout.preferredWidth: 350
+        PInputField {
-        color: PStyle.foreColor
+          Layout.preferredWidth: 200
-        font: PStyle.font
+          label: qsTr("Instance URL")
+          placeholderText: "ak.gensokyo.shop"
+        }
+
+        PIconButton {
+          id: btn
+          Layout.alignment: Qt.AlignBottom
+          pIcon.name: "arrow-right"
+        }
       }
     }
   }

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

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: ""
+    }
+  }
+}

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

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 = ""
+    }
+  }
+}

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,
+    })
+  }
 }

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
 }

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

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

src/Gui/Style/resources.qrc

@@ -4,5 +4,11 @@
     <file alias="PStyle/PStyle.qml">PStyle/PStyle.qml</file>
     <file alias="PStyle/PText.qml">PStyle/PText.qml</file>
     <file alias="PStyle/PBackground.qml">PStyle/PBackground.qml</file>
+    <file alias="PStyle/PTextField.qml">PStyle/PTextField.qml</file>
+    <file alias="PStyle/PInputField.qml">PStyle/PInputField.qml</file>
+    <file alias="PStyle/PTextButton.qml">PStyle/PTextButton.qml</file>
+    <file alias="PStyle/PRawButton.qml">PStyle/PRawButton.qml</file>
+    <file alias="PStyle/PIconButton.qml">PStyle/PIconButton.qml</file>
+    <file alias="PStyle/PIcon.qml">PStyle/PIcon.qml</file>
   </qresource>
 </RCC>

src/Icons/arrow-right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>

src/resources.qrc

@@ -4,5 +4,7 @@
 
     <file alias="Util/Http.qml">Gui/Util/Http.qml</file>
     <file alias="Util/qmldir">Gui/Util/qmldir</file>
+
+    <file alias="Icons/arrow-right.svg">Icons/arrow-right.svg</file>
   </qresource>
 </RCC>