[WIP] Port the Linux app to QML and partially implement the macOS design

.github/workflows/main.yml

@@ -44,7 +44,7 @@ jobs:
         # Create a new keychian and make it default
         security create-keychain -p password build.keychain
         security default-keychain -s ~/Library/Keychains/build.keychain
-        
+
         # Mac Developer Certificate
         base64 -D <<< "${{ secrets.CERT_MACOS_DEVELOPER }}" > Bundle_cert_macos_developer.p12
         security import ./Bundle_cert_macos_developer.p12 -k ~/Library/Keychains/build.keychain -P ${{ secrets.CERT_MACOS_DEVELOPER_PASSWORD }} -T /usr/bin/codesign
@@ -65,7 +65,7 @@ jobs:
         security unlock-keychain -p password ~/Library/Keychains/build.keychain
         security set-keychain-settings -lu
         security set-key-partition-list -S apple-tool:,apple:,codesign: -s -k password ~/Library/Keychains/build.keychain
-    
+
     - name: Cache cocoapods
       uses: actions/cache@v2
       with:
@@ -190,7 +190,7 @@ jobs:
     - name: Install dependencies
       run: |
         sudo apt update
-        sudo apt install libxss1 libgstreamer-plugins-base1.0-0 libgstreamer1.0-0 qt5-default libqt5gui5 libqt5printsupport5 libqt5quickwidgets5 libqt5x11extras5 libqt5networkauth5 libxss1
+        sudo apt install libxss1 libgstreamer-plugins-base1.0-0 libgstreamer1.0-0 qt5-default libqt5gui5 libqt5printsupport5 libqt5quickwidgets5 libqt5x11extras5 libqt5networkauth5 libxss1 libqt5quickwidgets5
         sudo apt install patchelf binutils cmake pkg-config qtbase5-dev libqt5x11extras5-dev qtbase5-private-dev libqt5networkauth5-dev libssl-dev libxss-dev libxmu-dev
     - name: Build the Linux binary
       run: |

CMakeLists.txt

@@ -18,6 +18,12 @@ option(TOGGL_PRODUCTION_BUILD "Use production servers in the app" OFF)
 option(TOGGL_ALLOW_UPDATE_CHECK "Allow the app to check for updates" OFF)
 option(USE_BUNDLED_LIBRARIES "Prefer bundled libraries to bundled ones" OFF)
 option(INSTALL_HIRES_ICONS "Do not install icons over 512x512" OFF)
+option(TOGGL_BUILD_TESTS "Build the Toggl test suite" ON)
+
+set(ENV{OPENSSL_ROOT_DIR} ${OPENSSL_ROOT_DIR})
+if (NOT "${OPENSSL_ROOT_DIR}" STREQUAL "")
+    include_directories("${OPENSSL_ROOT_DIR}/include")
+endif()
 
 set(ENV{OPENSSL_ROOT_DIR} ${OPENSSL_ROOT_DIR})
 if (NOT "${OPENSSL_ROOT_DIR}" STREQUAL "")
@@ -50,9 +56,11 @@ include(FindPkgConfig)
 
 # Look for Qt
 find_package(Qt5Widgets CONFIG REQUIRED)
+find_package(Qt5QuickWidgets CONFIG REQUIRED)
 find_package(Qt5DBus CONFIG REQUIRED)
 find_package(Qt5Network CONFIG REQUIRED)
 find_package(Qt5NetworkAuth CONFIG REQUIRED)
+find_package(Qt5Quick CONFIG REQUIRED)
 # We need to include private headers manually
 include_directories( ${Qt5Widgets_PRIVATE_INCLUDE_DIRS} )
 if (UNIX AND NOT APPLE)

Makefile

@@ -144,6 +144,11 @@ qa: lint fmt cppclean test
 
 fmt: fmt_lib fmt_ui
 
+
+app_qt:
+	mkdir -p build && cd build && cmake -DOPENSSL_ROOT_DIR="/usr/local/opt/[email protected]" -DTOGGL_BUILD_TESTS=OFF .. && make
+	./build/src/ui/linux/TogglDesktop/TogglDesktop
+
 ifeq ($(uname), Linux)
 app:
 	mkdir -p build && cd build && cmake .. && make

src/CMakeLists.txt

@@ -30,6 +30,7 @@ include_directories(
     ${LUA_INCLUDE_DIRS}
     ${JSONCPP_INCLUDE_DIRS}
     ${POCO_INCLUDE_DIRS}
+    "$ENV{OPENSSL_ROOT_DIR}/include"
 )
 
 # TogglDesktopLibrary sources
@@ -61,6 +62,7 @@ set(LIBRARY_SOURCE_FILES
     context.cc
     error.cc
     feedback.cc
+    error.cc
     gui.cc
     help_article.cc
     https_client.cc

src/lib/osx/TogglDesktopLibrary.xcodeproj/project.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>IDEDidComputeMac32BitWarning</key>
+	<true/>
+</dict>
+</plist>

src/ui/linux/TogglDesktop/Arrow.qml

@@ -0,0 +1,23 @@
+import QtQuick 2.0
+
+Item {
+    width: 7
+    height: 3
+    Rectangle {
+        smooth: true
+        anchors.verticalCenter: parent.verticalCenter
+        width: 4
+        height: 1
+        rotation: 45
+        opacity: 0.5
+    }
+    Rectangle {
+        smooth: true
+        x: 3
+        anchors.verticalCenter: parent.verticalCenter
+        width: 4
+        height: 1
+        rotation: -45
+        opacity: 0.5
+    }
+}

src/ui/linux/TogglDesktop/AutocompleteView.qml

@@ -0,0 +1,201 @@
+import QtQuick 2.12
+import QtQuick.Layouts 1.12
+import QtQuick.Controls 1.4
+
+Item {
+    id: root
+    height: 500
+
+    property real maximumHeight: 500
+
+    property var model: null
+    property QtObject currentItem: list.currentItem ? list.currentItem.autocompleteData : null
+
+    property string filter: ""
+    onFilterChanged: {
+        toggl.minitimerAutocomplete.setFilter(filter)
+        list.currentIndex = -1
+    }
+    onVisibleChanged: list.currentIndex = -1
+
+    function upPressed() {
+        //console.log("Current index: " + list.currentIndex)
+        //console.log("There is " + list.count + " rows")
+        //console.log("Model reports " + model.count() + " rows")
+        for (var i = list.currentIndex - 1; i > 0 ; --i) {
+            if (model.get(i).Type < 10) {
+                list.currentIndex = i
+                list.positionViewAtIndex(i, ListView.Center)
+                //console.log("Current index: " + list.currentIndex)
+                return
+            }
+        }
+        //console.log("Current index: " + list.currentIndex)
+    }
+    function downPressed() {
+        //console.log("Current index: " + list.currentIndex)
+        //console.log("There is " + list.count + " rows")
+        //console.log("Model reports " + model.count() + " rows")
+        for (var i = list.currentIndex + 1; i < list.count; i++) {
+            if (model.get(i).Type < 10) {
+                list.currentIndex = i
+                list.positionViewAtIndex(i, ListView.Center)
+                //console.log("Current index: " + list.currentIndex)
+                return
+            }
+        }
+        //console.log("Current index: " + list.currentIndex)
+    }
+
+    Text {
+        z: 20
+        text: list.currentItem ? list.currentItem.autocompleteData.Description : ""
+    }
+
+    Rectangle {
+        z: -1
+        anchors.fill: parent
+        color: setAlpha(mainPalette.shadow, 0.5)
+    }
+
+    ScrollView {
+        id: scrollArea
+        width: parent.width
+        height: root.maximumHeight
+        clip: true
+        ListView {
+            id: list
+            model: root.model
+            currentIndex: -1
+            onCurrentIndexChanged: {
+                console.log(currentIndex)
+            }
+
+            onCountChanged: {
+                var base = list.visibleChildren[0]
+                var listViewHeight = 0
+                if (!base)
+                    return
+                for (var i = 0; i < base.visibleChildren.length; i++)
+                    listViewHeight += base.visibleChildren[i].height
+                list.height = Math.min(listViewHeight, root.maximumHeight)
+            }
+            highlightFollowsCurrentItem: true
+            highlight: Rectangle {
+                z: 30
+                color: "light gray"
+                opacity: 0.5
+                width: root.width
+                height: 24
+            }
+            delegate: Loader {
+                // TODO use the enum instead of magic values
+                sourceComponent: autocompleteData && autocompleteData.Type === 13 ? workspaceDelegate :
+                                 autocompleteData && autocompleteData.Type === 12 ? clientDelegate :
+                                 autocompleteData && autocompleteData.Type === 11 ? headerDelegate :
+                                                                regularDelegate
+                property var autocompleteData: modelData
+                property int index: index
+            }
+        }
+    }
+
+    Component {
+        id: workspaceDelegate
+
+        Rectangle {
+            height: 40
+            width: root.width
+            color: mainPalette.base
+            Text {
+                anchors.centerIn: parent
+                color: mainPalette.text
+
+                text: autocompleteData && autocompleteData.Description
+                font.pointSize: 14
+            }
+            Rectangle {
+                anchors {
+                    left: parent.left
+                    bottom: parent.bottom
+                    right: parent.right
+                }
+                height: 1
+                color: mainPalette.alternateBase
+            }
+        }
+    }
+
+    Component {
+        id: clientDelegate
+
+
+        Rectangle {
+            height: 30
+            width: root.width
+            color: mainPalette.base
+            Text {
+                anchors.left: parent.left
+                anchors.leftMargin: 12
+                anchors.verticalCenter: parent.verticalCenter
+                height: 24
+                x: 9
+                color: mainPalette.text
+
+                text: autocompleteData && autocompleteData.Description
+            }
+        }
+    }
+
+    Component {
+        id: headerDelegate
+
+        Rectangle {
+            height: 30
+            width: root.width
+            color: mainPalette.base
+            Text {
+                anchors.left: parent.left
+                anchors.leftMargin: 12
+                anchors.verticalCenter: parent.verticalCenter
+                text: autocompleteData && autocompleteData.Description
+                color: mainPalette.text
+                font.pointSize: 11
+            }
+        }
+    }
+
+    Component {
+        id: regularDelegate
+
+        Rectangle {
+            height: 30
+            width: root.width
+            color: mainPalette.base
+
+            Text {
+                anchors.fill: parent
+                anchors.left: parent.left
+                anchors.leftMargin: 18
+                verticalAlignment: Text.AlignVCenter
+                x: 9
+                textFormat: Text.RichText
+                property string timeEntry: autocompleteData ? autocompleteData.Description : ""
+                property string project: autocompleteData && autocompleteData.ProjectLabel.length > 0 ?
+                                             "<font color=" + autocompleteData.ProjectColor + "> • " + autocompleteData.ProjectLabel + "</font>" :
+                                             ""
+                property string task: autocompleteData && autocompleteData.TaskLabel.length > 0 ? " " + autocompleteData.TaskLabel : ""
+                text: (ListView.isCurrentItem ? "Iscurrent" : "") + timeEntry + project + task
+                font.pointSize: 12
+                color: mainPalette.text
+            }
+            MouseArea {
+                id: delegateMouse
+                anchors.fill: parent
+                hoverEnabled: true
+                onContainsMouseChanged: {
+                }
+            }
+        }
+    }
+}

src/ui/linux/TogglDesktop/CMakeLists.txt

@@ -14,67 +14,45 @@ include_directories(
 
 # TogglDesktop sources
 set(BINARY_SOURCE_FILES
-    aboutdialog.cpp
-    autocompletecombobox.cpp
-    autocompletelistview.cpp
     autocompletelistmodel.cpp
     autocompleteview.cpp
-    clickablelabel.cpp
-    colorpicker.cpp
     countryview.cpp
-    errorviewcontroller.cpp
-    feedbackdialog.cpp
     genericview.cpp
     idlenotificationwidget.cpp
-    loginwidget.cpp
     main.cpp
-    mainwindowcontroller.cpp
+    mainwindow.cpp
     networkmanagement.cpp
-    overlaywidget.cpp
     powermanagement.cpp
     preferencesdialog.cpp
+    qmlobjectlist.cc
     settingsview.cpp
     singleapplication.cpp
     systemtray.cpp
-    timeentrycellwidget.cpp
-    timeentryeditorwidget.cpp
-    timeentrylistwidget.cpp
     timeentryview.cpp
-    timerwidget.cpp
     toggl.cpp
 
     # Resources have to be listed
     Resources.qrc
 
     # it's better to list UI files
-    aboutdialog.ui
-    colorpicker.ui
-    errorviewcontroller.ui
-    feedbackdialog.ui
     idlenotificationwidget.ui
-    loginwidget.ui
-    mainwindowcontroller.ui
-    overlaywidget.ui
+    mainwindow.ui
     preferencesdialog.ui
-    timeentrycellwidget.ui
-    timeentryeditorwidget.ui
-    timeentrylistwidget.ui
-    timerwidget.ui
 )
 
-if (UNIX AND NOT APPLE)
-    set (TOGGLDESKTOP_ADDITIONAL_LIBS
-        -lX11 -lXss
+if (APPLE)
+    set(BINARY_SOURCE_FILES ${BINARY_SOURCE_FILES}
+        macosSpecific.mm
     )
 endif()
 
 # Set up compilation targets
-add_executable(TogglDesktop ${BINARY_SOURCE_FILES})
+add_executable(TogglDesktop ${BINARY_SOURCE_FILES} ${PLATFORM_SPECIFIC_FILES})
 
 # And list the dependencies between them (and system libraries)
 target_link_libraries(TogglDesktop PRIVATE
     TogglDesktopLibrary
-    Qt5::Widgets Qt5::DBus Qt5::NetworkAuth
+    Qt5::Widgets Qt5::DBus Qt5::NetworkAuth Qt5::Qml Qt5::Quick Qt5::QuickWidgets
     ${QXT_LIBRARIES}
     Bugsnag
     ${TOGGLDESKTOP_ADDITIONAL_LIBS}