Add offline indicator (#472)

resources/qml/ChatPage.qml

@@ -17,111 +17,118 @@ Rectangle {
 
     color: Nheko.colors.window
 
-    AdaptiveLayout {
+    ColumnLayout {
-        id: adaptiveView
+        spacing: 0
-
         anchors.fill: parent
-        singlePageMode: communityListC.preferredWidth + roomListC.preferredWidth + timlineViewC.minimumWidth > width
-        pageIndex: 1
 
-        Component.onCompleted: initializePageIndex()
+        Rectangle {
-        onSinglePageModeChanged: initializePageIndex()
+            id: offlineIndicator
 
-        function initializePageIndex() {
+            color: Nheko.theme.error
-            if (!singlePageMode)
+            visible: !TimelineManager.isConnected
-                adaptiveView.pageIndex = 0;
+            Layout.preferredHeight: fontMetrics.height + Nheko.paddingMedium
-            else if (Rooms.currentRoom || Rooms.currentRoomPreview.roomid)
+            Layout.fillWidth: true
-                adaptiveView.pageIndex = 2;
-            else
-                adaptiveView.pageIndex = 1;
-        }
 
-        Connections {
+            Label {
-            target: Rooms
+                anchors.centerIn: parent
-            function onCurrentRoomChanged() {
+                text: qsTr("No network connection")
-                adaptiveView.initializePageIndex();
             }
         }
 
-        Connections {
+        AdaptiveLayout {
-            target: Communities
+            id: adaptiveView
-            function onCurrentTagIdChanged() {
-                adaptiveView.initializePageIndex();
-            }
-        }
 
-        onPageIndexChanged: {
+            Layout.fillWidth: true
-            if (adaptiveView.pageIndex == 1 && (Rooms.currentRoom || Rooms.currentRoomPreview.roomid)) {
+            Layout.fillHeight: true
-                Rooms.resetCurrentRoom();
+            singlePageMode: communityListC.preferredWidth + roomListC.preferredWidth + timlineViewC.minimumWidth > width
-            }
+            pageIndex: 1
-        }
 
-        AdaptiveLayoutElement {
+            Component.onCompleted: initializePageIndex()
-            id: communityListC
+            onSinglePageModeChanged: initializePageIndex()
 
-            visible: Settings.groupView
+            function initializePageIndex() {
-            minimumWidth: communitiesList.avatarSize * 4 + Nheko.paddingMedium * 2
+                if (!singlePageMode)
-            collapsedWidth: communitiesList.avatarSize + 2 * Nheko.paddingMedium
+                    adaptiveView.pageIndex = 0;
-            preferredWidth: Settings.communityListWidth >= minimumWidth ? Settings.communityListWidth : collapsedWidth
+                else if (Rooms.currentRoom || Rooms.currentRoomPreview.roomid)
-            maximumWidth: communitiesList.avatarSize * 10 + 2 * Nheko.paddingMedium
+                    adaptiveView.pageIndex = 2;
-
+                else
-            CommunitiesList {
+                    adaptiveView.pageIndex = 1;
-                id: communitiesList
-
-                collapsed: parent.collapsed
             }
 
-            Binding {
+            Connections {
-                target: Settings
+                target: Rooms
-                property: 'communityListWidth'
+                function onCurrentRoomChanged() {
-                value: communityListC.preferredWidth
+                    adaptiveView.initializePageIndex();
-                when: !adaptiveView.singlePageMode
+                }
-                delayed: true
-                restoreMode: Binding.RestoreBindingOrValue
             }
 
-        }
+            AdaptiveLayoutElement {
+                id: communityListC
 
-        AdaptiveLayoutElement {
+                visible: Settings.groupView
-            id: roomListC
+                minimumWidth: communitiesList.avatarSize * 4 + Nheko.paddingMedium * 2
+                collapsedWidth: communitiesList.avatarSize + 2 * Nheko.paddingMedium
+                preferredWidth: Settings.communityListWidth >= minimumWidth ? Settings.communityListWidth : collapsedWidth
+                maximumWidth: communitiesList.avatarSize * 10 + 2 * Nheko.paddingMedium
 
-            minimumWidth: roomlist.avatarSize * 4 + Nheko.paddingSmall * 2
+                CommunitiesList {
-            preferredWidth: (Settings.roomListWidth == - 1)
+                    id: communitiesList
-                ? (roomlist.avatarSize * 5 + Nheko.paddingSmall * 2)
-                : (Settings.roomListWidth >= minimumWidth ? Settings.roomListWidth : collapsedWidth)
-            maximumWidth: roomlist.avatarSize * 10 + Nheko.paddingSmall * 2
-            collapsedWidth: roomlist.avatarSize + 2 * Nheko.paddingMedium
 
-            RoomList {
+                    collapsed: parent.collapsed
-                id: roomlist
+                }
+
+                Binding {
+                    target: Settings
+                    property: 'communityListWidth'
+                    value: communityListC.preferredWidth
+                    when: !adaptiveView.singlePageMode
+                    delayed: true
+                    restoreMode: Binding.RestoreBindingOrValue
+                }
 
-                implicitHeight: chatPage.height
-                collapsed: parent.collapsed
-                anchors.fill: parent
             }
 
-            Binding {
+            AdaptiveLayoutElement {
-                target: Settings
+                id: roomListC
-                property: 'roomListWidth'
+
-                value: roomListC.preferredWidth
+                minimumWidth: roomlist.avatarSize * 4 + Nheko.paddingSmall * 2
-                when: !adaptiveView.singlePageMode
+                preferredWidth: (Settings.roomListWidth == - 1)
-                delayed: true
+                    ? (roomlist.avatarSize * 5 + Nheko.paddingSmall * 2)
-                restoreMode: Binding.RestoreBindingOrValue
+                    : (Settings.roomListWidth >= minimumWidth ? Settings.roomListWidth : collapsedWidth)
+                maximumWidth: roomlist.avatarSize * 10 + Nheko.paddingSmall * 2
+                collapsedWidth: roomlist.avatarSize + 2 * Nheko.paddingMedium
+
+                RoomList {
+                    id: roomlist
+
+                    height: adaptiveView.height
+                    collapsed: parent.collapsed
+                }
+
+                Binding {
+                    target: Settings
+                    property: 'roomListWidth'
+                    value: roomListC.preferredWidth
+                    when: !adaptiveView.singlePageMode
+                    delayed: true
+                    restoreMode: Binding.RestoreBindingOrValue
+                }
+
             }
 
-        }
+            AdaptiveLayoutElement {
+                id: timlineViewC
 
-        AdaptiveLayoutElement {
+                minimumWidth: fontMetrics.averageCharacterWidth * 40 + Nheko.avatarSize + 2 * Nheko.paddingMedium
-            id: timlineViewC
 
-            minimumWidth: fontMetrics.averageCharacterWidth * 40 + Nheko.avatarSize + 2 * Nheko.paddingMedium
+                TimelineView {
+                    id: timeline
 
-            TimelineView {
+                    showBackButton: adaptiveView.singlePageMode
-                id: timeline
+                    room: Rooms.currentRoom
+                    roomPreview: Rooms.currentRoomPreview.roomid ? Rooms.currentRoomPreview : null
+                }
 
-                showBackButton: adaptiveView.singlePageMode
-                room: Rooms.currentRoom
-                roomPreview: Rooms.currentRoomPreview.roomid ? Rooms.currentRoomPreview : null
             }
 
         }

resources/qml/components/AdaptiveLayout.qml

@@ -23,7 +23,6 @@ Container {
 
     onSinglePageModeChanged: if (!singlePageMode) pageIndex = 0
 
-    anchors.fill: parent
     Component.onCompleted: {
         for (var i = 0; i < count - 1; i++) {
             let handle_ = handle.createObject(contentChildren[i]);

src/timeline/TimelineViewManager.cpp

@@ -162,6 +162,14 @@ TimelineViewManager::TimelineViewManager(CallManager *, ChatPage *parent)
             &QApplication::focusWindowChanged,
             this,
             &TimelineViewManager::focusChanged);
+    connect(parent, &ChatPage::connectionLost, this, [this] {
+        isConnected_ = false;
+        emit isConnectedChanged(false);
+    });
+    connect(parent, &ChatPage::connectionRestored, this, [this] {
+        isConnected_ = true;
+        emit isConnectedChanged(true);
+    });
 }
 
 bool

src/timeline/TimelineViewManager.h

@@ -42,6 +42,7 @@ class TimelineViewManager : public QObject
     Q_PROPERTY(
       bool isInitialSync MEMBER isInitialSync_ READ isInitialSync NOTIFY initialSyncChanged)
     Q_PROPERTY(bool isWindowFocused READ isWindowFocused NOTIFY focusChanged)
+    Q_PROPERTY(bool isConnected READ isConnected NOTIFY isConnectedChanged)
 
 public:
     TimelineViewManager(CallManager *callManager, ChatPage *parent = nullptr);
@@ -54,6 +55,7 @@ public:
 
     Q_INVOKABLE bool isInitialSync() const { return isInitialSync_; }
     bool isWindowFocused() const;
+    bool isConnected() const { return isConnected_; }
     Q_INVOKABLE void openImageOverlay(TimelineModel *room, QString mxcUrl, QString eventId);
     Q_INVOKABLE void openImagePackSettings(QString roomid);
     Q_INVOKABLE void saveMedia(QString mxcUrl);
@@ -73,6 +75,7 @@ public:
 signals:
     void activeTimelineChanged(TimelineModel *timeline);
     void initialSyncChanged(bool isInitialSync);
+    void isConnectedChanged(bool state);
     void replyingEventChanged(QString replyingEvent);
     void replyClosed();
     void inviteUsers(QString roomId, QStringList users);
@@ -111,6 +114,7 @@ public slots:
 
 private:
     bool isInitialSync_ = true;
+    bool isConnected_   = true;
 
     RoomlistModel *rooms_          = nullptr;
     CommunitiesModel *communities_ = nullptr;