Use ES6 template strings

TODO.md

@@ -30,8 +30,6 @@
     - Is auto-sizing actually needed, or can we just set a default manual size?
     - Reducable room sidepane, swipe to show full-window
 
-  - When qml syntax highlighting supports ES6 string interpolation, use that
-
 - Fixes
   - CPU usage
   - `code` not colored in room subtitle

src/qml/Base/HIcon.qml

@@ -8,12 +8,7 @@ Image {
     fillMode: Image.PreserveAspectFit
     visible: Boolean(svgName)
 
-    source:
-        svgName ?
-        ("../../icons/" + (theme ? theme.icons.preferredPack : "thin") +
-         "/" + svgName + ".svg") :
-        ""
-
+    source: svgName ? `../../icons/${iconPack}/${svgName}.svg` : ""
     sourceSize.width: svgName ? dimension : 0
     sourceSize.height: svgName ? dimension : 0
 
@@ -21,6 +16,7 @@ Image {
     property string svgName: ""
     property int dimension: 20
     property color colorize: theme.icons.colorize
+    property string iconPack: theme ? theme.icons.preferredPack : "thin"
 
 
     layer.enabled: ! Qt.colorEqual(colorize, "transparent")

src/qml/Chat/RoomHeader.qml

@@ -68,13 +68,13 @@ Rectangle {
         }
 
         HToolTip {
-            text: name && topic ? (name + "<br>" + topic) : (name || topic)
+            text: name && topic ? (`${name}<br>${topic}`) : (name || topic)
             label.textFormat: Text.StyledText
             visible: text && (nameHover.hovered || topicHover.hovered)
 
             readonly property string name:
                 roomName.truncated ?
-                ("<b>" + chatPage.roomInfo.display_name + "</b>") : ""
+                (`<b>${chatPage.roomInfo.display_name}</b>`) : ""
             readonly property string topic:
                 roomTopic.truncated ?  chatPage.roomInfo.topic : ""
         }

src/qml/Chat/Timeline/EventContent.qml

@@ -19,7 +19,7 @@ HRowLayout {
     readonly property string timeText: Utils.formatTime(model.date, false)
     readonly property string localEchoText:
         model.is_local_echo ?
-        "&nbsp;<font size=" + theme.fontSize.small + "px>⏳</font>" :
+        `&nbsp;<font size=${theme.fontSize.small}px>⏳</font>` :
         ""
 
     readonly property bool pureMedia: ! contentText && linksRepeater.count
@@ -97,15 +97,14 @@ HRowLayout {
                 // For some reason, if there's only one space,
                 // times will be on their own lines most of the time.
                 "  " +
-                "<font size=" + theme.fontSize.small +
-                "px color=" + theme.chat.message.date + '>' +
+                `<font size=${theme.fontSize.small}px ` +
+                      `color=${theme.chat.message.date}>` +
                 timeText +
                 "</font>" +
 
                 // Local echo icon
                 (model.is_local_echo ?
-                 "&nbsp;<font size=" + theme.fontSize.small +
-                 "px>⏳</font>" : "")
+                 `&nbsp;<font size=${theme.fontSize.small}px>⏳</font>` : "")
 
             transform: Translate { x: xOffset }
 

src/qml/Dialogs/SendFilePicker.qml

@@ -15,7 +15,7 @@ HFileDialogOpener {
                 if (destroyWhenDone) destroy()
             },
             (type, args, error, traceback) => {
-                console.error("python:\n" + traceback)
+                console.error(`python:\n${traceback}`)
                 if (destroyWhenDone) destroy()
             })
         }

src/qml/Pages/AddChat/EncryptCheckBox.qml

@@ -6,7 +6,7 @@ HCheckBox {
     subtitle.text:
         qsTr("Protect the room against eavesdropper. Only you " +
              "and those you trust can read the conversation.") +
-        "<br><font color='" + theme.colors.middleBackground + "'>" +
+        `<br><font color="${theme.colors.middleBackground}">` +
         qsTr("Cannot be disabled later!") +
         "</font>"
     subtitle.textFormat: Text.StyledText

src/qml/SidePane/RoomDelegate.qml

@@ -83,9 +83,7 @@ HTileDelegate {
 
         return text.replace(
             /< *span +class=['"]?quote['"]? *>(.+?)<\/ *span *>/g,
-            '<font color="' +
-            theme.sidePane.room.subtitleQuote +
-            '">$1</font>',
+            `<font color="${theme.sidePane.room.subtitleQuote}">$1</font>`,
         )
     }
 

src/qml/UI.qml

@@ -116,7 +116,7 @@ Item {
             }
 
             function showPage(name, properties={}) {
-                let path = "Pages/" + name + ".qml"
+                let path = `Pages/${name}.qml`
                 _show(path, properties)
 
                 window.uiState.page           = path

src/qml/event_handlers.js

@@ -23,7 +23,7 @@ function onCoroutineDone(uuid, result, error, traceback) {
 
         onError ?
             onError(type, args, error, traceback) :
-            console.error("python: " + uuid + "\n" + traceback)
+            console.error(`python: ${uuid}\n${traceback}`)
 
     } else if (onSuccess) { onSuccess(result) }
 

src/qml/utils.js

@@ -85,7 +85,7 @@ function nameColor(name) {
 
 function coloredNameHtml(name, userId, displayText=null, disambiguate=false) {
     // substring: remove leading @
-    return "<font color='" + nameColor(name || userId.substring(1)) + "'>" +
+    return `<font color="${nameColor(name || userId.substring(1))}">` +
            escapeHtml(displayText || name || userId) +
            "</font>"
 }
@@ -210,11 +210,11 @@ function formatDuration(milliseconds) {
     let minutes = Math.floor((totalSeconds % 3600) / 60)
     let seconds = Math.floor(totalSeconds % 60)
 
-    if (seconds < 10) seconds = "0" + seconds
-    if (hours < 1)    return minutes + ":" + seconds
+    if (seconds < 10) seconds = `0${seconds}`
+    if (hours < 1)    return `${minutes}:${seconds}`
 
-    if (minutes < 10) minutes = "0" + minutes
-	return hours + ":" + minutes + ":" + seconds
+    if (minutes < 10) minutes = `0${minutes}`
+    return `${hours}:${minutes}:${seconds}`
 }