never/noctalia-shell
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

NCheckbox+NToggle: better look

Browse source
This commit is contained in:
LemmyCook 2025-09-14 12:03:15 -04:00
parent af0f4818d8
commit b163dab241
2 changed files with 13 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

11
Widgets/NCheckbox.qml
View file

@ -13,7 +13,7 @@ RowLayout {
property bool hovering: false property bool hovering: false
property color activeColor: Color.mPrimary property color activeColor: Color.mPrimary
property color activeOnColor: Color.mOnPrimary property color activeOnColor: Color.mOnPrimary
property int baseSize: Math.max(Style.baseWidgetSize * 0.7, 14) property int baseSize: Style.baseWidgetSize * 0.7
signal toggled(bool checked) signal toggled(bool checked)
signal entered signal entered
@ -35,12 +35,12 @@ RowLayout {
Rectangle { Rectangle {
id: box id: box
implicitWidth: root.baseSize * scaling implicitWidth: Math.round(root.baseSize * scaling)
implicitHeight: root.baseSize * scaling implicitHeight: Math.round(root.baseSize * scaling)
radius: Style.radiusXS * scaling radius: Style.radiusXS * scaling
color: root.checked ? root.activeColor : Color.mSurface color: root.checked ? root.activeColor : Color.mSurface
border.color: Color.mOutline border.color: Color.mOutline
border.width: Math.max(1, Style.borderM * scaling) border.width: Math.max(1, Style.borderS * scaling)
Behavior on color { Behavior on color {
ColorAnimation { ColorAnimation {
@ -60,7 +60,8 @@ RowLayout {
anchors.horizontalCenterOffset: -1 * scaling anchors.horizontalCenterOffset: -1 * scaling
icon: "check" icon: "check"
color: root.activeOnColor color: root.activeOnColor
font.pointSize: Math.max(Style.fontSizeXS, root.baseSize * 0.6) * scaling font.pointSize: Math.max(Style.fontSizeXS, root.baseSize * 0.5) * scaling
font.weight: Style.fontWeightBold
} }
MouseArea { MouseArea {

14
Widgets/NToggle.qml
View file

@ -11,7 +11,7 @@ RowLayout {
property string description: "" property string description: ""
property bool checked: false property bool checked: false
property bool hovering: false property bool hovering: false
property int baseSize: Style.baseWidgetSize * 0.8 property int baseSize: Math.round(Style.baseWidgetSize * 0.8)
signal toggled(bool checked) signal toggled(bool checked)
signal entered signal entered
@ -27,12 +27,12 @@ RowLayout {
Rectangle { Rectangle {
id: switcher id: switcher
implicitWidth: root.baseSize * 1.625 * scaling implicitWidth: Math.round(root.baseSize * 1.625 * scaling)
implicitHeight: root.baseSize * scaling implicitHeight: Math.round(root.baseSize * scaling)
radius: height * 0.5 radius: height * 0.5
color: root.checked ? Color.mPrimary : Color.mSurface color: root.checked ? Color.mPrimary : Color.mSurface
border.color: Color.mOutline border.color: Color.mOutline
border.width: Math.max(1, Style.borderM * scaling) border.width: Math.max(1, Style.borderS* scaling)
Behavior on color { Behavior on color {
ColorAnimation { ColorAnimation {
@ -47,14 +47,14 @@ RowLayout {
} }
Rectangle { Rectangle {
implicitWidth: (root.baseSize - 5) * scaling implicitWidth: Math.round((root.baseSize * 0.8) * scaling)
implicitHeight: (root.baseSize - 5) * scaling implicitHeight: Math.round((root.baseSize * 0.8) * scaling)
radius: height * 0.5 radius: height * 0.5
color: root.checked ? Color.mOnPrimary : Color.mPrimary color: root.checked ? Color.mOnPrimary : Color.mPrimary
border.color: root.checked ? Color.mSurface : Color.mSurface border.color: root.checked ? Color.mSurface : Color.mSurface
border.width: Math.max(1, Style.borderM * scaling) border.width: Math.max(1, Style.borderM * scaling)
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
x: root.checked ? switcher.width - width - 2 * scaling : 2 * scaling x: root.checked ? switcher.width - width - 3 * scaling : 3 * scaling
Behavior on x { Behavior on x {
NumberAnimation { NumberAnimation {