From dfae538154cfe7f2f813694650ace226c6ef3e60 Mon Sep 17 00:00:00 2001
From: ronso0 <ronso0@mixxx.org>
Date: Thu, 4 Apr 2024 16:04:18 +0200
Subject: [PATCH 1/2] Controller settings: allow :hwbtn:`LABEL` syntax for
 styling

Co-authored-by: Swiftb0y <12380386+Swiftb0y@users.noreply.github.com>
Co-authored-by: Jan Holthuis <jholthuis@mixxx.org>
---
 src/controllers/legacycontrollersettings.cpp | 30 ++++++++++++++++++--
 1 file changed, 28 insertions(+), 2 deletions(-)

diff --git a/src/controllers/legacycontrollersettings.cpp b/src/controllers/legacycontrollersettings.cpp
index 918e5ea9c99e..4b4a26a58ddd 100644
--- a/src/controllers/legacycontrollersettings.cpp
+++ b/src/controllers/legacycontrollersettings.cpp
@@ -11,6 +11,32 @@
 
 #include "moc_legacycontrollersettings.cpp"
 
+namespace {
+
+// Regex that allows to use :hwbtn:`LABELSTRING` in xml controller settings xml
+const QRegularExpression kHwbtnRe(QStringLiteral(":hwbtn:`([^`]*)`"));
+
+const QString kHwbtnStyleWrapper = QStringLiteral(
+        "<span style='"
+        "background: #343131;"
+        "color: #d9d9d9;"
+        "font-size: 70%;"
+        "font-weight: 600;"
+        "line-height: 120%;"
+        "text-transform: uppercase;"
+        // Padding does only work with block and table-cell elements, not
+        // inline span. Hence, wrapping the string in `&nbsp;` is the only way
+        // to get the desired look here. See the Qt documentation for details:
+        // https://doc.qt.io/qt-6/richtext-html-subset.html#css-properties
+        // \\1 is the RegEx match group 1.
+        "'>&nbsp;\\1&nbsp;</span>");
+
+QString replaceMarkupStyleStr(QString str) {
+    return str.replace(kHwbtnRe, kHwbtnStyleWrapper);
+}
+
+} // namespace
+
 LegacyControllerSettingBuilder* LegacyControllerSettingBuilder::instance() {
     static LegacyControllerSettingBuilder* s_self = nullptr;
 
@@ -32,11 +58,11 @@ LegacyControllerSettingBuilder::LegacyControllerSettingBuilder() {
 
 AbstractLegacyControllerSetting::AbstractLegacyControllerSetting(const QDomElement& element) {
     m_variableName = element.attribute("variable").trimmed();
-    m_label = element.attribute("label", m_variableName).trimmed();
+    m_label = replaceMarkupStyleStr(element.attribute("label", m_variableName).trimmed());
 
     QDomElement description = element.firstChildElement("description");
     if (!description.isNull()) {
-        m_description = description.text().trimmed();
+        m_description = replaceMarkupStyleStr(description.text().trimmed());
     }
 }
 

From 81a41880f3d21e23cf24558b6c5f8638803a2462 Mon Sep 17 00:00:00 2001
From: ronso0 <ronso0@mixxx.org>
Date: Thu, 4 Apr 2024 16:04:35 +0200
Subject: [PATCH 2/2] use :hwbtn: for Traktor S4 Mk3 settings

---
 .../Traktor Kontrol S4 MK3.hid.xml            | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/res/controllers/Traktor Kontrol S4 MK3.hid.xml b/res/controllers/Traktor Kontrol S4 MK3.hid.xml
index 0c6f835c9723..615dd69b7818 100644
--- a/res/controllers/Traktor Kontrol S4 MK3.hid.xml	
+++ b/res/controllers/Traktor Kontrol S4 MK3.hid.xml	
@@ -102,9 +102,9 @@
                 variable="gridButtonBlinkOverBeat"
                 type="boolean"
                 default="false"
-                label="Make the &lt;tt style='background-color: #111111; color: #d9d9d9;padding: 2px;'&gt;GRID&lt;/tt&gt; button blink over the beat">
+                label="Make the :hwbtn:`GRID` button blink over the beat">
                 <description>
-                    This will make the &lt;tt style="background-color: #111111; color: #d9d9d9;padding: 2px;"&gt;GRID&lt;/tt&gt; button blink when the track is going over a detected beat. This can help adjusting the beat grid or BPM.
+                    This will make the :hwbtn:`GRID` button blink when the track is going over a detected beat. This can help adjusting the beat grid or BPM.
                 </description>
             </option>
             <option
@@ -176,9 +176,9 @@
                 variable="useKeylockOnMaster"
                 type="boolean"
                 default="false"
-                label="Keylock on &lt;tt style='background-color: #111111; color: #d9d9d9;padding: 2px;'&gt;SHIFT&lt;/tt&gt;+&lt;tt style='background-color: #111111; color: #d9d9d9;padding: 2px;'&gt;MASTER&lt;/tt&gt; instead of &lt;tt style='background-color: #111111; color: #d9d9d9;padding: 2px;'&gt;SHIFT&lt;/tt&gt;+&lt;tt style='background-color: #111111; color: #d9d9d9;padding: 2px;'&gt;SYNC&lt;/tt&gt;">
+                label="Keylock on :hwbtn:`SHIFT`+:hwbtn:`MASTER` instead of :hwbtn:`SHIFT`+:hwbtn:`SYNC`">
                 <description>
-                    This setting toggles the keylock on push instead of release, as there is a long-press action on &lt;tt style="background-color: #111111; color: #d9d9d9;padding: 2px;"&gt;SHIFT&lt;/tt&gt;+&lt;tt style="background-color: #111111; color: #d9d9d9;padding: 2px;"&gt;SYNC&lt;/tt&gt; (copy key).
+                    This setting toggles the keylock on push instead of release, as there is a long-press action on :hwbtn:`SHIFT`+:hwbtn:`SYNC` (copy key).
                 </description>
             </option>
             <option
@@ -369,7 +369,7 @@
                     <value label="Times Played">18</value>
                     <value label="Rating">19</value>
                     <value label="Key">20</value>
-                    <description>First column when iterating over sortable library columns using &lt;tt style="background-color: #111111; color: #d9d9d9;padding: 2px;"&gt;VIEW&lt;/tt&gt;+Library Encoder press</description>
+                    <description>First column when iterating over sortable library columns using :hwbtn:`VIEW`+Library Encoder press</description>
                 </option>
                 <option
                     variable="librarySortableColumns2Value"
@@ -396,7 +396,7 @@
                     <value label="Times Played">18</value>
                     <value label="Rating">19</value>
                     <value label="Key">20</value>
-                    <description>Second column when iterating over sortable library columns using &lt;tt style="background-color: #111111; color: #d9d9d9;padding: 2px;"&gt;VIEW&lt;/tt&gt;+Library Encoder press</description>
+                    <description>Second column when iterating over sortable library columns using :hwbtn:`VIEW`+Library Encoder press</description>
                 </option>
                 <option
                     variable="librarySortableColumns3Value"
@@ -423,7 +423,7 @@
                     <value label="Times Played">18</value>
                     <value label="Rating">19</value>
                     <value label="Key">20</value>
-                    <description>Third column when iterating over sortable library columns using &lt;tt style="background-color: #111111; color: #d9d9d9;padding: 2px;"&gt;VIEW&lt;/tt&gt;+Library Encoder press</description>
+                    <description>Third column when iterating over sortable library columns using :hwbtn:`VIEW`+Library Encoder press</description>
                 </option>
                 <option
                     variable="librarySortableColumns4Value"
@@ -450,7 +450,7 @@
                     <value label="Times Played">18</value>
                     <value label="Rating">19</value>
                     <value label="Key" default="true">20</value>
-                    <description>Fourth column when iterating over sortable library columns using &lt;tt style="background-color: #111111; color: #d9d9d9;padding: 2px;"&gt;VIEW&lt;/tt&gt;+Library Encoder press</description>
+                    <description>Fourth column when iterating over sortable library columns using :hwbtn:`VIEW`+Library Encoder press</description>
                 </option>
                 <option
                     variable="librarySortableColumns5Value"
@@ -477,7 +477,7 @@
                     <value label="Times Played">18</value>
                     <value label="Rating">19</value>
                     <value label="Key">20</value>
-                    <description>Fifth column when iterating over sortable library columns using &lt;tt style="background-color: #111111; color: #d9d9d9;padding: 2px;"&gt;VIEW&lt;/tt&gt;+Library Encoder press</description>
+                    <description>Fifth column when iterating over sortable library columns using :hwbtn:`VIEW`+Library Encoder press</description>
                 </option>
                 <option
                     variable="librarySortableColumns6Value"
@@ -504,7 +504,7 @@
                     <value label="Times Played">18</value>
                     <value label="Rating">19</value>
                     <value label="Key">20</value>
-                    <description>Sixth column when iterating over sortable library columns using &lt;tt style="background-color: #111111; color: #d9d9d9;padding: 2px;"&gt;VIEW&lt;/tt&gt;+Library Encoder press</description>
+                    <description>Sixth column when iterating over sortable library columns using :hwbtn:`VIEW`+Library Encoder press</description>
                 </option>
             </row>
         </group>