status-im
/
status-qml
mirror of
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

refactor(Controls): make use of newly introduced StatusIconSettings in button controls 

Closes #57
This commit is contained in:
B.Melnik 2021-05-25 14:53:40 +03:00 committed by Pascal Precht
parent ee4a7c8824
commit 3ecf73ef58
No known key found for this signature in database
GPG Key ID: 0EE28D8D6FD85D7D
5 changed files with 86 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
sandbox/Buttons.qml
View File

@ -137,16 +137,16 @@ Grid {
// blue // blue
StatusRoundButton { StatusRoundButton {
icon: "info" icon.name: "info"
} }
StatusRoundButton { StatusRoundButton {
icon: "info" icon.name: "info"
enabled: false enabled: false
} }
StatusRoundButton { StatusRoundButton {
icon: "info" icon.name: "info"
loading: true loading: true
} }
@ -154,18 +154,18 @@ Grid {
StatusRoundButton { StatusRoundButton {
type: StatusRoundButton.Type.Secondary type: StatusRoundButton.Type.Secondary
icon: "info" icon.name: "info"
} }
StatusRoundButton { StatusRoundButton {
type: StatusRoundButton.Type.Secondary type: StatusRoundButton.Type.Secondary
icon: "info" icon.name: "info"
enabled: false enabled: false
} }
StatusRoundButton { StatusRoundButton {
type: StatusRoundButton.Type.Secondary type: StatusRoundButton.Type.Secondary
icon: "info" icon.name: "info"
loading: true loading: true
} }
@ -175,20 +175,20 @@ Grid {
width: 44 width: 44
height: 44 height: 44
icon: "info" icon.name: "info"
} }
StatusFlatRoundButton { StatusFlatRoundButton {
width: 44 width: 44
height: 44 height: 44
icon: "info" icon.name: "info"
enabled: false enabled: false
} }
StatusFlatRoundButton { StatusFlatRoundButton {
width: 44 width: 44
height: 44 height: 44
icon: "info" icon.name: "info"
loading: true loading: true
} }
@ -199,14 +199,14 @@ Grid {
width: 44 width: 44
height: 44 height: 44
icon: "info" icon.name: "info"
} }
StatusFlatRoundButton { StatusFlatRoundButton {
type: StatusFlatRoundButton.Type.Secondary type: StatusFlatRoundButton.Type.Secondary
width: 44 width: 44
height: 44 height: 44
icon: "info" icon.name: "info"
enabled: false enabled: false
} }
@ -214,24 +214,24 @@ Grid {
type: StatusFlatRoundButton.Type.Secondary type: StatusFlatRoundButton.Type.Secondary
width: 44 width: 44
height: 44 height: 44
icon: "info" icon.name: "info"
loading: true loading: true
} }
StatusFlatButton { StatusFlatButton {
iconName: "info" icon.name: "info"
text: "Button" text: "Button"
size: StatusBaseButton.Size.Small size: StatusBaseButton.Size.Small
} }
StatusFlatButton { StatusFlatButton {
iconName: "info" icon.name: "info"
text: "Button" text: "Button"
enabled: false enabled: false
size: StatusBaseButton.Size.Small size: StatusBaseButton.Size.Small
} }
StatusFlatButton { StatusFlatButton {
iconName: "info" icon.name: "info"
text: "Button" text: "Button"
loading: true loading: true
size: StatusBaseButton.Size.Small size: StatusBaseButton.Size.Small

12
src/StatusQ/Controls/StatusBaseButton.qml
View File

@ -16,7 +16,10 @@ Rectangle {
Danger Danger
} }
property alias iconName: icon.icon property StatusIconSettings icon: StatusIconSettings {
width: 24
height: 24
}
property bool loading: false property bool loading: false
@ -87,9 +90,12 @@ Rectangle {
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
spacing: 4 spacing: 4
StatusIcon { StatusIcon {
id: icon id: statusIcon
width: statusBaseButton.icon.width
height: statusBaseButton.icon.height
icon: statusBaseButton.icon.name
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
visible: !loading && iconName !== "" visible: !loading && statusBaseButton.icon.name !== ""
color: statusBaseButton.enabled ? textColor color: statusBaseButton.enabled ? textColor
: disabledTextColor : disabledTextColor
} // Icon } // Icon

4
src/StatusQ/Controls/StatusFlatButton.qml
View File

@ -16,6 +16,6 @@ StatusBaseButton {
border.color: type === StatusBaseButton.Type.Normal || hovered ? "transparent" border.color: type === StatusBaseButton.Type.Normal || hovered ? "transparent"
: Theme.palette.baseColor2 : Theme.palette.baseColor2
rightPadding: iconName !== "" ? 18 : defaultRightPadding rightPadding: icon.name !== "" ? 18 : defaultRightPadding
leftPadding: iconName !== "" ? 14 : defaultLeftPadding leftPadding: icon.name !== "" ? 14 : defaultLeftPadding
} }

59
src/StatusQ/Controls/StatusFlatRoundButton.qml
View File

@ -7,7 +7,28 @@ import StatusQ.Components 0.1
Rectangle { Rectangle {
id: statusFlatRoundButton 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 property bool loading: false
@ -27,28 +48,6 @@ Rectangle {
/// Implementation /// 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 { QtObject {
id: backgroundSettings id: backgroundSettings
@ -105,14 +104,16 @@ Rectangle {
anchors.centerIn: parent anchors.centerIn: parent
visible: !loading visible: !loading
width: statusFlatRoundButton.width - 20 icon: statusFlatRoundButton.icon.name
height: statusFlatRoundButton.height - 20
width: statusFlatRoundButton.icon.width
height: statusFlatRoundButton.icon.height
color: { color: {
if (statusFlatRoundButton.enabled) { if (statusFlatRoundButton.enabled) {
return iconSettings.color return statusFlatRoundButton.icon.color
} else { } else {
return iconSettings.disabledColor return statusFlatRoundButton.icon.disabledColor
} }
} }
} // Icon } // Icon
@ -122,9 +123,9 @@ Rectangle {
sourceComponent: StatusLoadingIndicator { sourceComponent: StatusLoadingIndicator {
color: { color: {
if (statusFlatRoundButton.enabled) { if (statusFlatRoundButton.enabled) {
return iconSettings.color return statusFlatRoundButton.icon.color
} else { } else {
return iconSettings.disabledColor return statusFlatRoundButton.icon.disabledColor
} }
} }
} // Indicator } // Indicator

59
src/StatusQ/Controls/StatusRoundButton.qml
View File

@ -7,7 +7,28 @@ import StatusQ.Components 0.1
Rectangle { Rectangle {
id: statusRoundButton 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 property bool loading: false
@ -27,28 +48,6 @@ Rectangle {
/// Implementation /// 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 { QtObject {
id: backgroundSettings id: backgroundSettings
@ -107,14 +106,16 @@ Rectangle {
anchors.centerIn: parent anchors.centerIn: parent
visible: !loading visible: !loading
width: statusRoundButton.width - 20 icon: statusRoundButton.icon.name
height: statusRoundButton.height - 20
width: statusRoundButton.icon.width
height: statusRoundButton.icon.height
color: { color: {
if (statusRoundButton.enabled) { if (statusRoundButton.enabled) {
return iconSettings.color return statusRoundButton.icon.color
} else { } else {
return iconSettings.disabledColor return statusRoundButton.icon.disabledColor
} }
} }
} // Icon } // Icon
@ -124,9 +125,9 @@ Rectangle {
sourceComponent: StatusLoadingIndicator { sourceComponent: StatusLoadingIndicator {
color: { color: {
if (statusRoundButton.enabled) { if (statusRoundButton.enabled) {
return iconSettings.color return statusRoundButton.icon.color
} else { } else {
return iconSettings.disabledColor return statusRoundButton.icon.disabledColor
} }
} }
} // Indicator } // Indicator