Feat: Misc Update

Editor/Qml/EButton.qml

@@ -1,6 +1,8 @@
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Controls.Basic
+import QtQuick.Layouts
+import QtQuick.Effects
 
 Item {
     enum Style {
@@ -20,6 +22,7 @@ Item {
     }
 
     property string text: ''
+    property string icon: ''
     property bool disabled: false
     property int style: EButton.Style.Primary
     property int size: EButton.Size.Middle
@@ -40,28 +43,39 @@ Item {
         bottomPadding: 5 + 2 * (root.size - 1)
         width: root.width
 
-        contentItem: Text {
-            text: root.text
-            font.pixelSize: ETheme.contentFontSize
-            font.family: ETheme.fontFamily
-            color: ETheme.fontColor
-            horizontalAlignment: Text.AlignHCenter
-            verticalAlignment: Text.AlignVCenter
-            elide: Text.ElideNone
+        contentItem: RowLayout {
+            spacing: 6
+
+            EIcon {
+                name: root.icon
+                visible: root.icon !== ''
+            }
+
+            Text {
+                Layout.fillWidth: true
+                text: root.text
+                font.pixelSize: ETheme.contentFontSize
+                font.family: ETheme.fontFamily
+                color: ETheme.fontColor
+                horizontalAlignment: Text.AlignHCenter
+                verticalAlignment: Text.AlignVCenter
+                elide: Text.ElideNone
+                visible: root.text !== ''
+            }
         }
 
         background: Rectangle {
-            function getBackgroundColor(style, focus, disabled)
+            function getBackgroundColor(style, focus, hovered, disabled)
             {
                 if (disabled) {
                     return ETheme.disabledColor;
                 } else if (style === EButton.Style.Secondary) {
-                    return focus ? ETheme.secondaryFocusColor : ETheme.secondaryColor;
+                    return focus ? ETheme.secondaryFocusColor : (hovered ? ETheme.secondaryHoverColor : ETheme.secondaryColor);
                 }
-                return focus ? ETheme.primaryFocusColor : ETheme.primaryColor;
+                return focus ? ETheme.primaryFocusColor : (hovered ? ETheme.primaryHoverColor : ETheme.primaryColor);
             }
 
-            color: getBackgroundColor(root.style, parent.down, root.disabled)
+            color: getBackgroundColor(root.style, parent.down, parent.hovered, root.disabled)
             radius: 5 + root.shape * 8
         }
     }

Editor/Qml/EIcon.qml

@@ -0,0 +1,26 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Controls.Basic
+import QtQuick.Effects
+
+Item {
+    property string name: ''
+    property int size: ETheme.iconFontSize
+
+    id: 'root'
+    implicitWidth: imageWidget.implicitWidth
+    implicitHeight: imageWidget.implicitHeight
+
+    Image {
+        id: 'imageWidget'
+        source: root.name === '' ? '' : 'Resource/Icon/%1.svg'.arg(root.name)
+        sourceSize.width: root.size
+        sourceSize.height: root.size
+        layer.enabled: true
+        layer.effect: MultiEffect {
+            brightness: 1
+            colorization: 1
+            colorizationColor: ETheme.fontColor;
+        }
+    }
+}

Editor/Qml/ETheme.qml

@@ -5,8 +5,10 @@ import QtQuick
 QtObject {
     property color bgColor: Qt.color('#212121')
     property color primaryColor: Qt.color('#e74c3c')
+    property color primaryHoverColor: Qt.color('#ce4d40')
     property color primaryFocusColor: Qt.color('#c0392b')
     property color secondaryColor: Qt.color('#d58845')
+    property color secondaryHoverColor: Qt.color('#d58845')
     property color secondaryFocusColor: Qt.color('#9b6a40')
     property color disabledColor: Qt.color('#676563')
     property color fontColor: Qt.color('#ecf0f1')
@@ -18,5 +20,6 @@ QtObject {
     property int title2FontSize: 18
     property int title3FontSize: 16
     property int contentFontSize: 14
+    property int iconFontSize: 18
     property string fontFamily: 'MiSans'
 }

Editor/Qml/EWidgetSamples.qml

@@ -97,6 +97,41 @@ Rectangle {
                 }
             }
 
+            RowLayout {
+                Layout.margins: 5
+
+                EButton {
+                    text: 'Icon Button 1'
+                    icon: 'home'
+                    onClicked: {
+                        console.log('icon button clicked')
+                    }
+                }
+
+                EButton {
+                    text: 'Icon Button 2'
+                    icon: 'anchor'
+                    onClicked: {
+                        console.log('icon button clicked')
+                    }
+                }
+
+                EButton {
+                    icon: 'alarm'
+                    onClicked: {
+                        console.log('icon button clicked')
+                    }
+                }
+
+                EButton {
+                    icon: 'api'
+                    shape: EButton.Shape.Round
+                    onClicked: {
+                        console.log('icon button clicked')
+                    }
+                }
+            }
+
             RowLayout {
                 Layout.margins: 5
 
@@ -111,7 +146,7 @@ Rectangle {
 
             RowLayout {
                 Layout.leftMargin: 5
-                Layout.topMargin: 10
+                Layout.topMargin: 15
 
                 EText {
                     text: 'Texts'
@@ -157,6 +192,86 @@ Rectangle {
                     style: EText.Style.Italic
                 }
             }
+
+            RowLayout {
+                Layout.leftMargin: 5
+                Layout.topMargin: 15
+
+                EText {
+                    text: 'Icons'
+                    style: EText.Style.Title1
+                }
+            }
+
+            RowLayout {
+                Layout.leftMargin: 5
+
+                EIcon { name: 'arrow-left' }
+                EIcon { name: 'arrow-left-up' }
+                EIcon { name: 'arrow-up' }
+                EIcon { name: 'arrow-right-up' }
+                EIcon { name: 'arrow-right' }
+                EIcon { name: 'arrow-right-down' }
+                EIcon { name: 'arrow-down' }
+                EIcon { name: 'arrow-left-down' }
+
+                EIcon { name: 'arrow-left-circle' }
+                EIcon { name: 'arrow-left-up-circle' }
+                EIcon { name: 'arrow-up-circle' }
+                EIcon { name: 'arrow-right-up-circle' }
+                EIcon { name: 'arrow-right-circle' }
+                EIcon { name: 'arrow-right-down-circle' }
+                EIcon { name: 'arrow-down-circle' }
+                EIcon { name: 'arrow-left-down-circle' }
+
+                EIcon { name: 'caret-left' }
+                EIcon { name: 'caret-up' }
+                EIcon { name: 'caret-right' }
+                EIcon { name: 'caret-down' }
+
+                EIcon { name: 'chevron-left' }
+                EIcon { name: 'chevron-up' }
+                EIcon { name: 'chevron-right' }
+                EIcon { name: 'chevron-down' }
+
+                EIcon { name: 'chevron-left-double' }
+                EIcon { name: 'chevron-up-double' }
+                EIcon { name: 'chevron-right-double' }
+                EIcon { name: 'chevron-down-double' }
+            }
+
+            RowLayout {
+                Layout.leftMargin: 5
+
+                EIcon { name: 'download' }
+                EIcon { name: 'login' }
+                EIcon { name: 'logout' }
+                EIcon { name: 'fullscreen-1' }
+                EIcon { name: 'fullscreen-exit-1' }
+                EIcon { name: 'load' }
+                EIcon { name: 'filter' }
+                EIcon { name: 'dashboard' }
+                EIcon { name: 'add-rectangle' }
+                EIcon { name: 'app' }
+                EIcon { name: 'hard-disk-storage' }
+                EIcon { name: 'share' }
+                EIcon { name: 'system-log' }
+                EIcon { name: 'system-code' }
+                EIcon { name: 'system-setting' }
+                EIcon { name: 'hourglass' }
+                EIcon { name: 'more' }
+                EIcon { name: 'service' }
+                EIcon { name: 'drag-move' }
+                EIcon { name: 'focus' }
+                EIcon { name: 'fill-color' }
+                EIcon { name: 'sip' }
+                EIcon { name: 'slice' }
+                EIcon { name: 'copy' }
+                EIcon { name: 'file-add' }
+                EIcon { name: 'folder-add' }
+                EIcon { name: 'folder' }
+                EIcon { name: 'folder-import' }
+            }
         }
     }
 }