Skip to content

Commit 063c8bd

Browse files
moWerkmoWerk
committed
Remove Checkmark and Refine UI
Polish QuickSettingsPage UI for consistency and better visibility. - Remove checkmark icon from ListView delegate and dragProxy for cleaner layout. - Remove PageHeader, set ListView header height to 0, and update autoScrollTimer minContentY to 0. - Increase rowHeight to Dims.h(18) and use for all rows, removing labelHeight property. - Increase iconRectangle size to Dims.w(16) and leftMargin to Dims.l(14) in delegate and dragProxy. - Adjust opacity: iconRectangle (0.2 unavailable, 0.7 enabled), toggleIcon (0.4 unavailable, 0.8 disabled), Label (0.5 unavailable, 0.6 disabled), dragProxy (0.8 icon, 0.9 text). - Increase label font.pixelSize to Dims.l(6) for better readability. - Extend longPressTimer interval to 500ms to prevent accidental drags. - Set boundsBehavior to Flickable.DragAndOvershootBounds for scroll feedback and to fix toggle misfires.
1 parent 93f75ea commit 063c8bd

File tree

1 file changed

+32
-71
lines changed

1 file changed

+32
-71
lines changed

‎src/qml/QuickSettingsPage.qml‎

Lines changed: 32 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -105,8 +105,7 @@ Item {
105105
]
106106

107107
// Layout properties
108-
property real rowHeight: Dims.h(16)
109-
property real labelHeight: rowHeight * 0.5
108+
property real rowHeight: Dims.h(18)
110109
property int draggedItemIndex: -1
111110
property int targetIndex: -1
112111
property int fixedRowLength: 2
@@ -486,15 +485,15 @@ Item {
486485
model: slotModel
487486
cacheBuffer: Dims.h(60)
488487
maximumFlickVelocity: 1000
489-
boundsBehavior: Flickable.OvershootBounds
488+
boundsBehavior: Flickable.DragAndOvershootBounds
490489

491490
Component.onCompleted: {
492491
forceLayout();
493492
}
494493

495494
header: Item {
496495
width: parent.width
497-
height: title.height
496+
height: 0
498497
}
499498

500499
footer: Item {
@@ -517,7 +516,7 @@ Item {
517516
}
518517

519518
var newContentY = contentY + scrollSpeed;
520-
var minContentY = -title.height;
519+
var minContentY = 0
521520
newContentY = Math.max(minContentY, Math.min(newContentY, contentHeight - height));
522521
contentY = newContentY;
523522
}
@@ -551,7 +550,7 @@ Item {
551550
delegate: Item {
552551
id: delegateItem
553552
width: slotList.width
554-
height: type === "label" ? labelHeight :
553+
height: type === "label" ? rowHeight :
555554
type === "config" ? Math.max(rowHeight * 2, childrenRect.height) :
556555
type === "cycler" ? Math.max(rowHeight * 2, childrenRect.height) :
557556
type === "display" ? Math.max(rowHeight * 2, childrenRect.height) :
@@ -571,7 +570,7 @@ Item {
571570
visible: type === "label"
572571
text: labelText
573572
color: "#ffffff"
574-
font.pixelSize: Dims.l(5)
573+
font.pixelSize: Dims.l(6)
575574
font.italic: true
576575
anchors {
577576
horizontalCenter: parent.horizontalCenter
@@ -657,41 +656,23 @@ Item {
657656
visible: isDragging && type === "toggle"
658657
}
659658

660-
Icon {
661-
id: checkmarkIcon
662-
width: Dims.w(14)
663-
height: Dims.w(14)
664-
name: toggleId && toggleEnabled.value[toggleId] ? "ios-checkmark-circle-outline" : "ios-circle-outline"
665-
color: toggleId && toggleEnabled.value[toggleId] ? "#ffffff" : "#888888"
666-
visible: {
667-
if (type !== "toggle" || toggleId === "" || isDragging) return false;
668-
var toggle = findToggle(toggleId);
669-
return toggle && toggle.available;
670-
}
671-
anchors {
672-
verticalCenter: parent.verticalCenter
673-
left: parent.left
674-
leftMargin: Dims.l(15)
675-
}
676-
}
677-
678659
Rectangle {
679660
id: iconRectangle
680-
width: Dims.w(14)
681-
height: Dims.w(14)
661+
width: Dims.w(16)
662+
height: Dims.w(16)
682663
radius: width / 2
683664
color: "#222222"
684665
opacity: {
685666
if (toggleId === "") return 0;
686667
var toggle = findToggle(toggleId);
687-
if (!toggle || !toggle.available) return 0.3;
668+
if (!toggle || !toggle.available) return 0.2;
688669
return toggleEnabled.value[toggleId] ? 0.7 : 0.3;
689670
}
690671
visible: type === "toggle" && toggleId !== "" && !isDragging
691672
anchors {
692673
verticalCenter: parent.verticalCenter
693-
left: checkmarkIcon.right
694-
leftMargin: Dims.l(2)
674+
left: parent.left
675+
leftMargin: Dims.l(14)
695676
}
696677
Icon {
697678
id: toggleIcon
@@ -703,8 +684,8 @@ Item {
703684
opacity: {
704685
if (toggleId === "") return 0;
705686
var toggle = findToggle(toggleId);
706-
if (!toggle || !toggle.available) return 0.5;
707-
return toggleEnabled.value[toggleId] ? 1.0 : 0.5;
687+
if (!toggle || !toggle.available) return 0.4;
688+
return toggleEnabled.value[toggleId] ? 1.0 : 0.8;
708689
}
709690
visible: toggleId !== ""
710691
}
@@ -717,19 +698,23 @@ Item {
717698
if (toggleId === "") return 0;
718699
var toggle = findToggle(toggleId);
719700
if (!toggle || !toggle.available) return 0.5;
720-
return toggleEnabled.value[toggleId] ? 1.0 : 0.5;
701+
return toggleEnabled.value[toggleId] ? 1.0 : 0.6;
721702
}
722703
visible: type === "toggle" && toggleId !== "" && !isDragging
723704
anchors {
724705
verticalCenter: parent.verticalCenter
725706
left: iconRectangle.right
726-
leftMargin: Dims.l(2)
707+
leftMargin: Dims.l(4)
708+
}
709+
font {
710+
pixelSize: Dims.l(8)
711+
styleName: "Light"
727712
}
728713
}
729714

730715
Timer {
731716
id: longPressTimer
732-
interval: 400
717+
interval: 500
733718
repeat: false
734719
property bool dragPending: false
735720

@@ -868,7 +853,7 @@ Item {
868853
targetIndex = -1;
869854
autoScrollTimer.scrollSpeed = 0;
870855
longPressTimer.stop();
871-
} else if (type === "toggle" && toggleId && pressDuration < 400) {
856+
} else if (type === "toggle" && toggleId && pressDuration < 500) {
872857
longPressTimer.stop();
873858
var newEnabled = Object.assign({}, toggleEnabled.value);
874859
var isFixedToggle = isToggleInFixedRow(toggleId);
@@ -927,40 +912,17 @@ Item {
927912
forceOn: dragProxy.visible
928913
}
929914

930-
Icon {
931-
id: dragCheckmark
932-
width: Dims.w(14)
933-
height: Dims.w(14)
934-
name: draggedItemIndex >= 0 &&
935-
draggedItemIndex < slotModel.count &&
936-
slotModel.get(draggedItemIndex) &&
937-
slotModel.get(draggedItemIndex).toggleId &&
938-
toggleEnabled.value[slotModel.get(draggedItemIndex).toggleId]
939-
? "ios-checkmark-circle-outline" : "ios-circle-outline"
940-
color: draggedItemIndex >= 0 &&
941-
draggedItemIndex < slotModel.count &&
942-
slotModel.get(draggedItemIndex) &&
943-
slotModel.get(draggedItemIndex).toggleId &&
944-
toggleEnabled.value[slotModel.get(draggedItemIndex).toggleId]
945-
? "#ffffff" : "#888888"
946-
anchors {
947-
verticalCenter: parent.verticalCenter
948-
left: parent.left
949-
leftMargin: Dims.l(10)
950-
}
951-
}
952-
953915
Rectangle {
954916
id: dragIconRect
955-
width: Dims.w(14)
956-
height: Dims.w(14)
917+
width: Dims.w(16)
918+
height: Dims.w(16)
957919
radius: width / 2
958920
color: "#222222"
959-
opacity: 0.7
921+
opacity: 0.8
960922
anchors {
961923
verticalCenter: parent.verticalCenter
962-
left: dragCheckmark.right
963-
leftMargin: Dims.l(2)
924+
left: parent.left
925+
leftMargin: Dims.l(14)
964926
}
965927
Icon {
966928
name: dragProxy.icon
@@ -975,17 +937,16 @@ Item {
975937
Label {
976938
text: dragProxy.text
977939
color: "#ffffff"
940+
opacity: 0.9
978941
anchors {
979942
verticalCenter: parent.verticalCenter
980943
left: dragIconRect.right
981-
leftMargin: Dims.l(2)
944+
leftMargin: Dims.l(4)
945+
}
946+
font {
947+
pixelSize: Dims.l(8)
948+
styleName: "Light"
982949
}
983950
}
984951
}
985-
986-
PageHeader {
987-
id: title
988-
//% "Quick Settings"
989-
text: qsTrId("id-quicksettings-page")
990-
}
991952
}

0 commit comments

Comments
 (0)