status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
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 Michał Cieślak
parent 6dc77f2ec3
commit 770338a658
5 changed files with 86 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
ui/StatusQ/sandbox/Buttons.qml
View File

@ -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

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

@ -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

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

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

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

@ -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

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

@ -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