Fix width and wordwrap of text in CheckBox and VisibilityBox

src/framework/ui/view/uitheme.cpp

@@ -670,13 +670,11 @@ int UiTheme::pixelMetric(QStyle::PixelMetric metric, const QStyleOption* option,
     switch (metric) {
     case PM_IndicatorWidth: // Checkbox
     case PM_IndicatorHeight:
-        return 20;
-    case PM_CheckBoxLabelSpacing:
-        return 8;
     case PM_ExclusiveIndicatorWidth: // Radio button
     case PM_ExclusiveIndicatorHeight:
         return 20;
-    case PM_RadioButtonLabelSpacing:
+    case PM_CheckBoxLabelSpacing: // Checkbox
+    case PM_RadioButtonLabelSpacing: // Radio button
         return 6;
     case PM_ToolBarHandleExtent: // Toolbars
         return 32;

src/framework/uicomponents/qml/MuseScore/UiComponents/CheckBox.qml

@@ -20,7 +20,8 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 import QtQuick 2.15
-import QtQuick.Layouts 1.3
+import QtQuick.Layouts 1.15
+
 import MuseScore.Ui 1.0
 
 FocusScope {
@@ -31,14 +32,13 @@ FocusScope {
 
     property alias text: label.text
     property alias font: label.font
-    property alias wrapMode: label.wrapMode
 
     property alias navigation: navCtrl
 
     signal clicked
 
-    implicitHeight: contentRow.height
-    implicitWidth: contentRow.width
+    implicitHeight: contentRow.implicitHeight
+    implicitWidth: contentRow.implicitWidth
 
     opacity: root.enabled ? 1.0 : ui.theme.itemOpacityDisabled
 
@@ -68,10 +68,7 @@ FocusScope {
 
     RowLayout {
         id: contentRow
-
-        height: Math.max(box.height, label.implicitHeight)
-
-        spacing: 8
+        spacing: 6
 
         Rectangle {
             id: box
@@ -98,15 +95,16 @@ FocusScope {
 
         StyledTextLabel {
             id: label
+            visible: !isEmpty
 
-            Layout.preferredWidth: root.width > 0 ? Math.min(root.width, label.implicitWidth) : label.implicitWidth
+            readonly property real availableWidth: root.width - contentRow.spacing - box.width
+
+            Layout.preferredWidth: availableWidth > 0 ? Math.min(availableWidth, label.implicitWidth) : label.implicitWidth
             Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
 
             horizontalAlignment: Text.AlignLeft
             wrapMode: Text.WordWrap
             maximumLineCount: 2
-
-            visible: Boolean(text)
         }
     }
 

src/framework/uicomponents/qml/MuseScore/UiComponents/VisibilityBox.qml

@@ -35,16 +35,13 @@ FocusScope {
 
     signal visibleToggled()
 
-    height: 30
-    width: content.implicitWidth
+    implicitHeight: contentRow.implicitHeight
+    implicitWidth: contentRow.implicitWidth
 
-    opacity: root.enabled ? 1.0 : 0.7
+    opacity: root.enabled ? 1.0 : ui.theme.itemOpacityDisabled
 
     RowLayout {
-        id: content
-
-        anchors.fill: parent
-
+        id: contentRow
         spacing: 2
 
         FlatButton {
@@ -53,6 +50,15 @@ FocusScope {
             Layout.alignment: Qt.AlignVCenter
             Layout.preferredWidth: width
 
+            // Make mouse area fill the whole area to get desired hover effect
+            readonly property rect mouseAreaRect: contentRow.mapToItem(this, 0, 0, contentRow.width, contentRow.height)
+
+            mouseArea.anchors.fill: null
+            mouseArea.x: mouseAreaRect.x
+            mouseArea.y: mouseAreaRect.y
+            mouseArea.width: mouseAreaRect.width
+            mouseArea.height: mouseAreaRect.height
+
             icon: root.isVisible ? IconCode.VISIBILITY_ON : IconCode.VISIBILITY_OFF
             transparent: true
 
@@ -66,26 +72,16 @@ FocusScope {
 
         StyledTextLabel {
             id: label
+            visible: !isEmpty
 
-            Layout.alignment: Qt.AlignVCenter
-            Layout.fillWidth: true
+            readonly property real availableWidth: root.width - contentRow.spacing - eyeButton.width
+
+            Layout.preferredWidth: availableWidth > 0 ? Math.min(availableWidth, label.implicitWidth) : label.implicitWidth
+            Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
 
             horizontalAlignment: Text.AlignLeft
             wrapMode: Text.WordWrap
             maximumLineCount: 2
-
-            visible: Boolean(text)
-        }
-    }
-
-    MouseArea {
-        id: clickableArea
-
-        anchors.fill: content
-        anchors.margins: -4
-
-        onClicked: {
-            root.visibleToggled()
         }
     }
 }

src/instrumentsscene/qml/MuseScore/InstrumentsScene/internal/StaffSettingsPopup.qml

@@ -151,7 +151,6 @@ StyledPopupView {
             navigation.row: 21 // after small staff CheckBox
 
             text: qsTrc("instruments", "Hide all measures that do not contain notation (cutaway)")
-            wrapMode: Text.WordWrap
 
             checked: settingsModel.cutawayEnabled