use QT auto scaling (#100)

* [ubports-seabass] fix issues with scaling on external displays (use QT_AUTO_SCREE_SCALE_FACTOR)
* [ubports-seabass] improve searchbox styling for Suru Dark theme

editor/src/css/search.css

@@ -86,4 +86,12 @@
 .ace_button[action="toggleReplace"]:hover::before {
   left: 0;
   right: auto;
+}
+
+.ace_button.checked[action="toggleReplace"] {
+  opacity: 0.7
+}
+
+.ace_button.checked[action="toggleReplace"]:hover {
+  opacity: 1
 }

editor/src/theme.js

@@ -25,6 +25,8 @@ export function setSearchBarColors (colors) {
   styleElem.sheet.cssRules[6].style.backgroundColor = colors.foregroundColor
   styleElem.sheet.cssRules[6].style.setProperty('border-color', colors.borderColor, 'important')
   styleElem.sheet.cssRules[6].style.color = colors.textColor
+
+  styleElem.sheet.cssRules[7].style.borderColor = colors.borderColor
 }
 
 export function getThemeStyleElem () {

harbour-seabass/html/index.html

@@ -49,8 +49,6 @@
     }
     .ace_tooltip.ace_doc-tooltip {
       /* background-color: #foregroundColor */
-    }
-    .ace_tooltip.ace_doc-tooltip {
       /* color: #foregroundText */
     }
     .ace_button,
@@ -74,6 +72,9 @@
       /* border-color: #borderColor */
       /* color: #textColor */
     }
+    .ace_button.checked[action="toggleReplace"] {
+      /* border-color: #borderColor */
+    }
   </style>
 </head>
 

package.json

@@ -20,28 +20,28 @@
   "author": "Mikhael Milikhin",
   "license": "MIT",
   "devDependencies": {
-    "@babel/core": "^7.11.4",
-    "@babel/plugin-proposal-class-properties": "^7.10.4",
-    "@babel/plugin-transform-runtime": "^7.11.0",
-    "@babel/preset-env": "^7.11.0",
+    "@babel/core": "^7.12.3",
+    "@babel/plugin-proposal-class-properties": "^7.12.1",
+    "@babel/plugin-transform-runtime": "^7.12.1",
+    "@babel/preset-env": "^7.12.1",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^25.4.0",
-    "babel-loader": "^8.1.0",
+    "babel-loader": "^8.2.1",
     "babel-polyfill": "^6.26.0",
     "clean-webpack-plugin": "^3.0.0",
-    "copy-webpack-plugin": "^6.0.3",
-    "core-js": "^3.6.5",
+    "copy-webpack-plugin": "^6.3.1",
+    "core-js": "^3.7.0",
     "css-loader": "^3.6.0",
-    "file-loader": "^6.0.0",
+    "file-loader": "^6.2.0",
     "jest": "^25.5.4",
     "standard": "^14.3.4",
-    "style-loader": "^1.2.1",
+    "style-loader": "^1.3.0",
     "uuid": "^7.0.3",
-    "webpack": "^4.44.1",
+    "webpack": "^4.44.2",
     "webpack-cli": "^3.3.12"
   },
   "dependencies": {
     "ace-builds": "^1.4.12",
-    "blueimp-md5": "^2.17.0"
+    "blueimp-md5": "^2.18.0"
   }
 }

ubports-seabass/html/index.html

@@ -40,6 +40,9 @@
       /* border-color: #borderColor */
       /* color: #textColor */
     }
+    .ace_button.checked[action="toggleReplace"] {
+      /* border-color: #borderColor */
+    }
   </style>
 </head>
 

ubports-seabass/manifest.json.in

@@ -10,7 +10,7 @@
             "content-hub": "content-hub.json"
         }
     },
-    "version": "0.11.0",
+    "version": "0.11.1",
     "maintainer": "Mikhael Milikhin <[email protected]>",
     "framework" : "ubuntu-sdk-16.04"
 }

ubports-seabass/po/seabass2.mikhael.pot

@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: seabass2.mikhael\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2020-09-20 16:26+0000\n"
+"POT-Creation-Date: 2020-11-16 20:03+0000\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <[email protected]>\n"
@@ -27,24 +27,24 @@ msgid ""
 "list of contributors!"
 msgstr ""
 
-#: ../qml/Main.qml:26
+#: ../qml/Main.qml:27
 msgid "Welcome"
 msgstr ""
 
-#: ../qml/Main.qml:27 seabass2.desktop.in.h:1
+#: ../qml/Main.qml:28 seabass2.desktop.in.h:1
 msgid "Seabass2"
 msgstr ""
 
-#: ../qml/Main.qml:58
+#: ../qml/Main.qml:60
 msgid "Unable to read file. Please ensure that you have read access to the %1"
 msgstr ""
 
-#: ../qml/Main.qml:59
+#: ../qml/Main.qml:61
 msgid ""
 "Unable to write the file. Please ensure that you have write access to %1"
 msgstr ""
 
-#: ../qml/Main.qml:247
+#: ../qml/Main.qml:251
 msgid "Build (%1) failed. See build output for details"
 msgstr ""
 
@@ -113,7 +113,7 @@ msgstr ""
 msgid "Files"
 msgstr ""
 
-#: ../qml/components/FileList.qml:247
+#: ../qml/components/FileList.qml:248
 msgid "%1 will be deleted"
 msgstr ""
 

ubports-seabass/qml/Main.qml

@@ -1,4 +1,5 @@
 import QtQuick 2.9
+import QtQuick.Window 2.2
 import QtQuick.Layouts 1.3
 import QtQuick.Controls 2.2
 import QtQuick.Controls.Suru 2.2
@@ -25,7 +26,7 @@ ApplicationWindow {
   readonly property bool isWide: width >= Suru.units.gu(100)
   readonly property string defaultTitle: i18n.tr("Welcome")
   readonly property string defaultSubTitle: i18n.tr("Seabass2")
-  readonly property string version: "0.11.0"
+  readonly property string version: "0.11.1"
   property int activeTheme: parseInt(settings.theme)
 
   Component.onCompleted: {
@@ -47,7 +48,8 @@ ApplicationWindow {
     isDarkTheme: QmlJs.isDarker(theme.palette.normal.background,
       theme.palette.normal.backgroundText)
     backgroundColor: theme.palette.normal.background
-    borderColor: theme.palette.normal.overlaySecondaryText
+    borderColor: QmlJs.isDarker(theme.palette.normal.background,
+      theme.palette.normal.backgroundText) ? Suru.darkMid: Suru.lightMid
     textColor: theme.palette.normal.backgroundSecondaryText
     linkColor: theme.palette.normal.backgroundText
     foregroundColor: theme.palette.normal.foreground
@@ -149,7 +151,9 @@ ApplicationWindow {
     id: pageStack
     initialItem: mainView
     anchors.fill: parent
-    anchors.bottomMargin: Qt.inputMethod.visible ? Qt.inputMethod.keyboardRectangle.height : 0
+    anchors.bottomMargin: Qt.inputMethod.visible
+      ? Qt.inputMethod.keyboardRectangle.height / Screen.devicePixelRatio
+      : 0
   }
 
   CustomComponents.ErrorDialog {

ubports-seabass/qml/components/FileList.qml

@@ -187,7 +187,8 @@ Item {
               anchors.verticalCenter: parent.verticalCenter
               spacing: units.gu(1)
               CustomComponents.Icon {
-                height: parent.height
+                Layout.preferredWidth: units.gu(2)
+                Layout.preferredHeight: units.gu(2)
                 name: model.isFile
                   ? QmlJs.getFileIcon(model.name)
                   : directoryModel.getDirIcon(model.path, model.isExpanded)

ubports-seabass/qml/components/common/Icon.qml

@@ -8,4 +8,5 @@ import Ubuntu.Components.Themes 1.3
 UITK.Icon {
   color: theme.palette.normal.backgroundText
   height: Suru.units.gu(2)
+  width: Suru.units.gu(2)
 }

ubports-seabass/qml/components/common/MenuItem.qml

@@ -16,6 +16,8 @@ MenuItem {
 
     CustomComponents.Icon {
       name: root.icon
+      Layout.preferredWidth: Suru.units.gu(2)
+      Layout.preferredHeight: Suru.units.gu(2)
       Layout.leftMargin: Suru.units.gu(1)
       Layout.rightMargin: Suru.units.gu(1)
     }

ubports-seabass/qml/components/tabs/TabButton.qml

@@ -125,7 +125,7 @@ TabButton {
           id: closeIcon
           name: isBusy ? 'package-x-generic-symbolic' : 'close'
           height: tabLabel.height
-          width: height
+          width: Suru.units.gu(2)
           anchors.centerIn: parent
           color: isBusy ? Suru.highlightColor : tabLabel.color
           opacity: isBusy ? 0.25 : 1

ubports-seabass/start.sh

@@ -1,3 +1,4 @@
 QT_QUICK_CONTROLS_CONF=qml/qtquickcontrols2.conf \
+QT_AUTO_SCREEN_SCALE_FACTOR=1 \
 QTWEBENGINE_CHROMIUM_FLAGS="$QTWEBENGINE_CHROMIUM_FLAGS --disable-pinch" \
 exec qmlscene qml/Main.qml