update

src/controls/FilledButton.qml

@@ -1,28 +0,0 @@
-//@uri FluentUI
-import QtQuick 2.15
-import QtQuick.Controls 2.15
-import QtQuick.Controls.Material 2.15
-
-Rectangle {
-    id: button
-    width: 100
-    height: 40
-    radius: 4
-    color: Material.accent
-    border.color: Material.accent
-
-    Text {
-        id: buttonText
-        text: "Button"
-        color: "white"
-        font.pixelSize: 14
-        anchors.centerIn: parent
-    }
-
-    MouseArea {
-        anchors.fill: parent
-        onClicked: {
-            console.log("Button clicked")
-        }
-    }
-}

src/controls/FluButton.qml

@@ -10,17 +10,16 @@ Rectangle {
     property int topPadding: 8
     property int bottomPadding: 8
     property bool disabled: false
+    signal clicked
     radius: 4
-    color: "#FFFFFF"
-
-    width: childrenRect.width
-    height: childrenRect.height
-
-    border.color: "#eeeeee"
+    color: button_mouse.containsMouse ? "#eeeeee" : "#FFFFFF"
+    width: button_text.implicitWidth
+    height: button_text.implicitHeight
+    border.color: "#cccccc"
     border.width: 1
 
     Text {
-        id: buttonText
+        id: button_text
         text: "Standard Button"
         color: "#000000"
         font.pixelSize: 13
@@ -32,9 +31,11 @@ Rectangle {
     }
 
     MouseArea {
+        id:button_mouse
         anchors.fill: parent
+        hoverEnabled: true
         onClicked: {
-            console.log("Button clicked")
+            button.clicked()
         }
     }
 }

src/controls/FluCheckBox.qml

@@ -0,0 +1,5 @@
+import QtQuick 2.15
+
+Item {
+
+}

src/controls/FluComboBox.qml

@@ -0,0 +1,5 @@
+import QtQuick 2.15
+
+Item {
+
+}

src/controls/FluDropDownButton.qml

@@ -0,0 +1,5 @@
+import QtQuick 2.15
+
+Item {
+
+}

src/controls/FluFilledButton.qml

@@ -0,0 +1,49 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Controls.Material 2.15
+
+Rectangle {
+    id: button
+
+    property int startPadding : 15
+    property int endPadding : 15
+    property int topPadding: 8
+    property int bottomPadding: 8
+    property bool disabled: false
+    property color primaryColor : "#0064B0"
+    signal clicked
+    radius: 4
+    color:{
+        if(disabled){
+            return "#C7C7C7"
+        }
+        return  button_mouse.containsMouse ? Qt.lighter(primaryColor,1.15) : primaryColor
+    }
+    width: button_text.implicitWidth
+    height: button_text.implicitHeight
+    border.color: "#cccccc"
+    border.width: 1
+
+    Text {
+        id: button_text
+        text: "Standard Button"
+        color: "#FFFFFFFF"
+        font.pixelSize: 13
+        leftPadding: button.startPadding
+        rightPadding: button.endPadding
+        topPadding: button.topPadding
+        bottomPadding: button.bottomPadding
+        anchors.centerIn: parent
+    }
+
+    MouseArea {
+        id:button_mouse
+        anchors.fill: parent
+        hoverEnabled: true
+        onClicked: {
+            if(disabled)
+                return
+            button.clicked()
+        }
+    }
+}

src/controls/FluIconButton.qml

@@ -0,0 +1,20 @@
+import QtQuick 2.15
+
+Rectangle {
+
+    width: text.implicitWidth
+    height: text.implicitHeight
+
+    property int icon
+
+    Text {
+        id:text
+        font.family: "fontawesome"
+        font.pixelSize: 16
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+//        text:icon
+        text: (String.fromCharCode(icon).toString(16));
+    }
+
+}

src/controls/FluProgressBar.qml

@@ -0,0 +1,5 @@
+import QtQuick 2.15
+
+Item {
+
+}

src/controls/FluProgressRing.qml

@@ -0,0 +1,5 @@
+import QtQuick 2.15
+
+Item {
+
+}

src/controls/FluRadioButton.qml

@@ -0,0 +1,5 @@
+import QtQuick 2.15
+
+Item {
+
+}

src/controls/FluSlider.qml

@@ -0,0 +1,5 @@
+import QtQuick 2.15
+
+Item {
+
+}

src/controls/FluText.qml

@@ -0,0 +1,73 @@
+import QtQuick 2.15
+
+
+Text {
+
+    id:text
+
+    enum FontStyle {
+        Display,
+        TitleLarge,
+        Title,
+        Subtitle,
+        BodyLarge,
+        BodyStrong,
+        Body,
+        Caption
+    }
+
+    property int fontStyle: FluText.Display
+    property color textColor: "#333333"
+
+    property int pixelSize : 16
+
+    color: textColor
+
+    Component.onCompleted: {
+        setFontStyle(fontStyle)
+    }
+
+    onStyleChanged: {
+        setFontStyle(fontStyle)
+    }
+
+    function setFontStyle(fontStyle) {
+        switch (fontStyle) {
+            case FluText.Display:
+                font.bold = true
+                font.pixelSize = text.pixelSize * 4
+                break
+            case FluText.TitleLarge:
+                font.bold = true
+                font.pixelSize = text.pixelSize * 2
+                break
+            case FluText.Title:
+                font.bold = true
+                font.pixelSize = text.pixelSize * 1.5
+                break
+            case FluText.Subtitle:
+                font.bold = true
+                font.pixelSize = text.pixelSize * 0.9
+                break
+            case FluText.BodyLarge:
+                font.bold = false
+                font.pixelSize = text.pixelSize * 1.1
+                break
+            case FluText.BodyStrong:
+                font.bold = true
+                font.pixelSize = text.pixelSize * 1.0
+                break
+            case FluText.Body:
+                font.bold = false
+                font.pixelSize = text.pixelSize
+                break
+            case FluText.Caption:
+                font.bold = false
+                font.pixelSize = text.pixelSize * 0.8
+                break
+            default:
+                break
+        }
+    }
+
+}

src/controls/FluTextBox.qml

@@ -0,0 +1,5 @@
+import QtQuick 2.15
+
+Item {
+
+}

src/controls/FluTimePicker.qml

@@ -0,0 +1,7 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Shapes 1.15
+
+Item {
+
+}

src/controls/FluToggleSwitch.qml

@@ -0,0 +1,30 @@
+import QtQuick 2.0
+import QtQuick.Controls 2.0
+
+Switch {
+    id: root
+    property color checkedColor: "#0064B0"
+
+    indicator: Rectangle {
+        width: 40
+        height: 20
+        radius: height / 2
+        color: root.checked ? checkedColor : "white"
+        border.width: 1
+        border.color: root.checked ? checkedColor : "#666666"
+
+        Rectangle {
+            x: root.checked ? parent.width - width - 4 : 4
+            width: root.checked ? parent.height - 8 : parent.height - 8
+            height: width
+            radius: width / 2
+            anchors.verticalCenter: parent.verticalCenter
+            color: root.checked ? "#FFFFFF" : "#666666"
+//            border.color: "#D5D5D5"
+
+            Behavior on x {
+                NumberAnimation { duration: 200 }
+            }
+        }
+    }
+}