From 3ecf73ef588b222c47c0ab47564a554276b7eeda Mon Sep 17 00:00:00 2001 From: "B.Melnik" Date: Tue, 25 May 2021 14:53:40 +0300 Subject: [PATCH] refactor(Controls): make use of newly introduced StatusIconSettings in button controls Closes #57 --- sandbox/Buttons.qml | 30 +++++----- src/StatusQ/Controls/StatusBaseButton.qml | 12 +++- src/StatusQ/Controls/StatusFlatButton.qml | 4 +- .../Controls/StatusFlatRoundButton.qml | 59 ++++++++++--------- src/StatusQ/Controls/StatusRoundButton.qml | 59 ++++++++++--------- 5 files changed, 86 insertions(+), 78 deletions(-) diff --git a/sandbox/Buttons.qml b/sandbox/Buttons.qml index f1a261a3..7afe615c 100644 --- a/sandbox/Buttons.qml +++ b/sandbox/Buttons.qml @@ -137,16 +137,16 @@ Grid { // blue StatusRoundButton { - icon: "info" + icon.name: "info" } StatusRoundButton { - icon: "info" + icon.name: "info" enabled: false } StatusRoundButton { - icon: "info" + icon.name: "info" loading: true } @@ -154,18 +154,18 @@ Grid { StatusRoundButton { type: StatusRoundButton.Type.Secondary - icon: "info" + icon.name: "info" } StatusRoundButton { type: StatusRoundButton.Type.Secondary - icon: "info" + icon.name: "info" enabled: false } StatusRoundButton { type: StatusRoundButton.Type.Secondary - icon: "info" + icon.name: "info" loading: true } @@ -175,20 +175,20 @@ Grid { width: 44 height: 44 - icon: "info" + icon.name: "info" } StatusFlatRoundButton { width: 44 height: 44 - icon: "info" + icon.name: "info" enabled: false } StatusFlatRoundButton { width: 44 height: 44 - icon: "info" + icon.name: "info" loading: true } @@ -199,14 +199,14 @@ Grid { width: 44 height: 44 - icon: "info" + icon.name: "info" } StatusFlatRoundButton { type: StatusFlatRoundButton.Type.Secondary width: 44 height: 44 - icon: "info" + icon.name: "info" enabled: false } @@ -214,24 +214,24 @@ Grid { type: StatusFlatRoundButton.Type.Secondary width: 44 height: 44 - icon: "info" + icon.name: "info" loading: true } StatusFlatButton { - iconName: "info" + icon.name: "info" text: "Button" size: StatusBaseButton.Size.Small } StatusFlatButton { - iconName: "info" + icon.name: "info" text: "Button" enabled: false size: StatusBaseButton.Size.Small } StatusFlatButton { - iconName: "info" + icon.name: "info" text: "Button" loading: true size: StatusBaseButton.Size.Small diff --git a/src/StatusQ/Controls/StatusBaseButton.qml b/src/StatusQ/Controls/StatusBaseButton.qml index 0ce98ef8..0fc7426c 100644 --- a/src/StatusQ/Controls/StatusBaseButton.qml +++ b/src/StatusQ/Controls/StatusBaseButton.qml @@ -16,7 +16,10 @@ Rectangle { Danger } - property alias iconName: icon.icon + property StatusIconSettings icon: StatusIconSettings { + width: 24 + height: 24 + } property bool loading: false @@ -87,9 +90,12 @@ Rectangle { anchors.verticalCenter: parent.verticalCenter spacing: 4 StatusIcon { - id: icon + id: statusIcon + width: statusBaseButton.icon.width + height: statusBaseButton.icon.height + icon: statusBaseButton.icon.name anchors.verticalCenter: parent.verticalCenter - visible: !loading && iconName !== "" + visible: !loading && statusBaseButton.icon.name !== "" color: statusBaseButton.enabled ? textColor : disabledTextColor } // Icon diff --git a/src/StatusQ/Controls/StatusFlatButton.qml b/src/StatusQ/Controls/StatusFlatButton.qml index bf8cde78..4a64713a 100644 --- a/src/StatusQ/Controls/StatusFlatButton.qml +++ b/src/StatusQ/Controls/StatusFlatButton.qml @@ -16,6 +16,6 @@ StatusBaseButton { border.color: type === StatusBaseButton.Type.Normal || hovered ? "transparent" : Theme.palette.baseColor2 - rightPadding: iconName !== "" ? 18 : defaultRightPadding - leftPadding: iconName !== "" ? 14 : defaultLeftPadding + rightPadding: icon.name !== "" ? 18 : defaultRightPadding + leftPadding: icon.name !== "" ? 14 : defaultLeftPadding } diff --git a/src/StatusQ/Controls/StatusFlatRoundButton.qml b/src/StatusQ/Controls/StatusFlatRoundButton.qml index 17532c1b..36070d86 100644 --- a/src/StatusQ/Controls/StatusFlatRoundButton.qml +++ b/src/StatusQ/Controls/StatusFlatRoundButton.qml @@ -7,7 +7,28 @@ import StatusQ.Components 0.1 Rectangle { id: statusFlatRoundButton - property alias icon: iconSettings.name + property StatusIconSettings icon: StatusIconSettings { + width: 23 + height: 23 + + color: { + switch(statusFlatRoundButton.type) { + case StatusFlatRoundButton.Type.Secondary: + return Theme.palette.directColor1; + case StatusFlatRoundButton.Type.Primary: + return Theme.palette.primaryColor1; + } + } + + property color disabledColor: { + switch(statusFlatRoundButton.type) { + case StatusFlatRoundButton.Type.Secondary: + return Theme.palette.baseColor1; + case StatusFlatRoundButton.Type.Primary: + return Theme.palette.baseColor1; + } + } + } property bool loading: false @@ -27,28 +48,6 @@ Rectangle { /// Implementation - QtObject { - id: iconSettings - property alias name: statusIcon.icon - property color color: { - switch(statusFlatRoundButton.type) { - case StatusFlatRoundButton.Type.Secondary: - return Theme.palette.directColor1; - case StatusFlatRoundButton.Type.Primary: - return Theme.palette.primaryColor1; - } - } - - property color disabledColor: { - switch(statusFlatRoundButton.type) { - case StatusFlatRoundButton.Type.Secondary: - return Theme.palette.baseColor1; - case StatusFlatRoundButton.Type.Primary: - return Theme.palette.baseColor1; - } - } - } - QtObject { id: backgroundSettings @@ -105,14 +104,16 @@ Rectangle { anchors.centerIn: parent visible: !loading - width: statusFlatRoundButton.width - 20 - height: statusFlatRoundButton.height - 20 + icon: statusFlatRoundButton.icon.name + + width: statusFlatRoundButton.icon.width + height: statusFlatRoundButton.icon.height color: { if (statusFlatRoundButton.enabled) { - return iconSettings.color + return statusFlatRoundButton.icon.color } else { - return iconSettings.disabledColor + return statusFlatRoundButton.icon.disabledColor } } } // Icon @@ -122,9 +123,9 @@ Rectangle { sourceComponent: StatusLoadingIndicator { color: { if (statusFlatRoundButton.enabled) { - return iconSettings.color + return statusFlatRoundButton.icon.color } else { - return iconSettings.disabledColor + return statusFlatRoundButton.icon.disabledColor } } } // Indicator diff --git a/src/StatusQ/Controls/StatusRoundButton.qml b/src/StatusQ/Controls/StatusRoundButton.qml index 383737b9..98b6206c 100644 --- a/src/StatusQ/Controls/StatusRoundButton.qml +++ b/src/StatusQ/Controls/StatusRoundButton.qml @@ -7,7 +7,28 @@ import StatusQ.Components 0.1 Rectangle { id: statusRoundButton - property alias icon: iconSettings.name + property StatusIconSettings icon: StatusIconSettings { + width: 23 + height: 23 + + color: { + switch(statusRoundButton.type) { + case StatusRoundButton.Type.Primary: + return Theme.palette.primaryColor1; + case StatusRoundButton.Type.Secondary: + return Theme.palette.indirectColor1; + } + } + + property color disabledColor: { + switch(statusRoundButton.type) { + case StatusRoundButton.Type.Primary: + return Theme.palette.baseColor1; + case StatusRoundButton.Type.Secondary: + return Theme.palette.indirectColor1; + } + } + } property bool loading: false @@ -27,28 +48,6 @@ Rectangle { /// Implementation - QtObject { - id: iconSettings - property alias name: statusIcon.icon - property color color: { - switch(statusRoundButton.type) { - case StatusRoundButton.Type.Primary: - return Theme.palette.primaryColor1; - case StatusRoundButton.Type.Secondary: - return Theme.palette.indirectColor1; - } - } - - property color disabledColor: { - switch(statusRoundButton.type) { - case StatusRoundButton.Type.Primary: - return Theme.palette.baseColor1; - case StatusRoundButton.Type.Secondary: - return Theme.palette.indirectColor1; - } - } - } - QtObject { id: backgroundSettings @@ -107,14 +106,16 @@ Rectangle { anchors.centerIn: parent visible: !loading - width: statusRoundButton.width - 20 - height: statusRoundButton.height - 20 + icon: statusRoundButton.icon.name + + width: statusRoundButton.icon.width + height: statusRoundButton.icon.height color: { if (statusRoundButton.enabled) { - return iconSettings.color + return statusRoundButton.icon.color } else { - return iconSettings.disabledColor + return statusRoundButton.icon.disabledColor } } } // Icon @@ -124,9 +125,9 @@ Rectangle { sourceComponent: StatusLoadingIndicator { color: { if (statusRoundButton.enabled) { - return iconSettings.color + return statusRoundButton.icon.color } else { - return iconSettings.disabledColor + return statusRoundButton.icon.disabledColor } } } // Indicator