add new example 'debug-ui' (to be integrated in your mobile app)

examples/debug-ui/qml/debug/DebugDialog.qml

@@ -0,0 +1,84 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import "." as Ext
+
+Rectangle {
+  id: debugDialog
+  objectName: "debug_dialog"
+  color: "#f0f0f0"
+  visible: false
+
+  ColumnLayout {
+    anchors.fill: parent
+    spacing: 0
+
+    Ext.MenuBack {
+      id: menuBack
+      Layout.fillWidth: true
+      label: "Debug Dialog"
+    }
+
+    TextField {
+      id: debugInput
+      objectName: "debug_input"
+      Layout.fillWidth: true
+      font.family: "Hack"
+      font.pixelSize: 18
+      inputMethodHints: Qt.ImhNoAutoUppercase | Qt.ImhNoPredictiveText
+      text: ":q"
+
+      onAccepted: Lisp.call("dialogs:exited")
+    }
+
+    Text {
+      id: label
+      Layout.fillWidth: true
+      leftPadding: 8
+      rightPadding: 8
+      topPadding: 8
+      bottomPadding: 8
+      font.family: "Hack"
+      font.pixelSize: 14
+      text: ":r1 etc. restart / :h help / :q quit"
+    }
+
+    Rectangle {
+      id: line
+      Layout.fillWidth: true
+      height: 1
+      color: "#d0d0d0"
+    }
+
+    ListView {
+      id: debugText
+      objectName: "debug_text"
+      Layout.fillWidth: true
+      Layout.fillHeight: true
+      contentWidth: parent.width * 5
+      clip: true
+      model: debugModel
+      flickableDirection: Flickable.HorizontalAndVerticalFlick
+
+      delegate: Text {
+        padding: 8
+        textFormat: Text.PlainText
+        font.pixelSize: 16
+        font.family: "Hack"
+        font.bold: model.bold
+        text: model.text
+        color: model.color
+      }
+    }
+
+    ListModel {
+      id: debugModel
+      objectName: "debug_model"
+
+      function appendOutput(data) {
+        append(data)
+        debugText.positionViewAtEnd()
+      }
+    }
+  }
+}

examples/debug-ui/qml/debug/Flickable.qml

@@ -0,0 +1,22 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import "." as Ext
+
+Flickable {
+  clip: true
+
+  ScrollBar.vertical: Ext.ScrollBar {}
+
+  function ensureVisible(r) {
+    if (main.skipEnsureVisible)
+      return;
+    if (contentX >= r.x)
+      contentX = r.x;
+    else if (contentX + width <= r.x + r.width)
+      contentX = r.x + r.width - width;
+    if (contentY >= r.y)
+      contentY = r.y;
+    else if (contentY + height <= r.y + r.height)
+      contentY = r.y + r.height - height;
+  }
+}

examples/debug-ui/qml/debug/MenuBack.qml

@@ -0,0 +1,53 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+
+Rectangle {
+  id: menuBack
+  width: main.width
+  height: backButton.height
+  color: "#f0f0f0"
+
+  property alias label: label.text
+
+  Button {
+    id: backButton
+    height: main.small ? 40 : 46
+    width: 80
+
+    background: Rectangle {
+      Text {
+        id: iconBack
+        x: 10
+        height: backButton.height
+        verticalAlignment: Text.AlignVCenter
+        font.family: fontAwesome.name
+        font.pixelSize: 32
+        color: "#007aff"
+        text: "\uf104"
+      }
+
+      Text {
+        x: 30
+        height: backButton.height * 1.1 // align correction (different font from above)
+        verticalAlignment: Text.AlignVCenter
+        font.pixelSize: 20
+        font.weight: Font.DemiBold
+        color: iconBack.color
+        text: "Repl"
+        visible: (Qt.platform.os === "ios")
+      }
+
+      implicitWidth: 90
+      color: menuBack.color
+    }
+
+    onPressed: Lisp.call("dialogs:exited")
+  }
+
+  Text {
+    id: label
+    anchors.centerIn: parent
+    font.pixelSize: 20
+    font.weight: Font.DemiBold
+  }
+}

examples/debug-ui/qml/debug/ScrollBar.qml

@@ -0,0 +1,32 @@
+// This is a modified version taken from the QML sources
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+
+ScrollBar {
+  id: control
+  orientation: Qt.Vertical
+
+  contentItem: Rectangle {
+    implicitWidth: 12
+    implicitHeight: 100
+    radius: width / 2
+    color: control.pressed ? "#202020" : "#909090"
+    opacity: 0.0
+
+    states: State {
+      name: "active"
+      when: (control.active && control.size < 1.0)
+      PropertyChanges { target: control.contentItem; opacity: 0.75 }
+    }
+
+    transitions: Transition {
+      from: "active"
+      SequentialAnimation {
+        PauseAnimation { duration: 450 }
+        NumberAnimation { target: control.contentItem; duration: 200; property: "opacity"; to: 0.0 }
+      }
+    }
+  }
+}
+

examples/debug-ui/qml/debug/TextField.qml

@@ -0,0 +1,10 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+
+TextField {
+  font.pixelSize: 18
+  palette {
+    highlight: "#007aff"
+    highlightedText: "white"
+  }
+}

examples/debug-ui/qml/main.qml

@@ -0,0 +1,40 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Window 2.15
+import 'debug/' as Dbg
+
+StackView {
+  id: main
+  objectName: "main"
+  width: 800  // alternatively: Screen.desktopAvailableWidth
+  height: 600 // alternatively: Screen.desktopAvailableHeight
+  initialItem: mainRect
+  Screen.orientationUpdateMask: Qt.LandscapeOrientation | Qt.PortraitOrientation | Qt.InvertedLandscapeOrientation
+
+  // show/hide dialogs
+
+  function pushDialog(name)  {
+    switch (name) {
+      case "debug": main.push(dialogDebug); break
+    }
+  }
+
+  function popDialog() { main.pop() }
+
+  // fonts (must stay here, before using them below)
+
+  FontLoader { id: fontHack;     source: "fonts/Hack-Regular.ttf" }        // code
+  FontLoader { id: fontHackBold; source: "fonts/Hack-Bold.ttf" }
+  FontLoader { id: fontAwesome;  source: "fonts/fontawesome-webfont.ttf" } // icons
+
+  // items
+
+  Rectangle {
+    id: mainRect
+    color: "lavender"
+  }
+
+  // dialogs
+
+  Dbg.DebugDialog { id: dialogDebug }
+}