[Room List] Show offline indicator when the device is offline #239
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| Add a `NetworkMonitor` component to track the network connection status |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| /* | ||
| * Copyright (c) 2022 New Vector Ltd | ||
| * | ||
| * Licensed under the Apache License, Version 2.0 (the "License"); | ||
| * you may not use this file except in compliance with the License. | ||
| * You may obtain a copy of the License at | ||
| * | ||
| * http://www.apache.org/licenses/LICENSE-2.0 | ||
| * | ||
| * Unless required by applicable law or agreed to in writing, software | ||
| * distributed under the License is distributed on an "AS IS" BASIS, | ||
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
| * See the License for the specific language governing permissions and | ||
| * limitations under the License. | ||
| */ | ||
|
|
||
| // TODO: Remove once https://youtrack.jetbrains.com/issue/KTIJ-19369 is fixed | ||
| @Suppress("DSL_SCOPE_VIOLATION") | ||
| plugins { | ||
| id("io.element.android-compose-library") | ||
| } | ||
|
|
||
| android { | ||
| namespace = "io.element.android.features.networkmonitor.api" | ||
| } | ||
|
|
||
| dependencies { | ||
| implementation(libs.coroutines.core) | ||
| implementation(projects.libraries.designsystem) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| /* | ||
| * Copyright (c) 2023 New Vector Ltd | ||
| * | ||
| * Licensed under the Apache License, Version 2.0 (the "License"); | ||
| * you may not use this file except in compliance with the License. | ||
| * You may obtain a copy of the License at | ||
| * | ||
| * http://www.apache.org/licenses/LICENSE-2.0 | ||
| * | ||
| * Unless required by applicable law or agreed to in writing, software | ||
| * distributed under the License is distributed on an "AS IS" BASIS, | ||
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
| * See the License for the specific language governing permissions and | ||
| * limitations under the License. | ||
| */ | ||
|
|
||
| package io.element.android.features.networkmonitor.api | ||
|
|
||
| import kotlinx.coroutines.flow.Flow | ||
|
|
||
| interface NetworkMonitor { | ||
| val connectivity: Flow<NetworkStatus> | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| /* | ||
| * Copyright (c) 2023 New Vector Ltd | ||
| * | ||
| * Licensed under the Apache License, Version 2.0 (the "License"); | ||
| * you may not use this file except in compliance with the License. | ||
| * You may obtain a copy of the License at | ||
| * | ||
| * http://www.apache.org/licenses/LICENSE-2.0 | ||
| * | ||
| * Unless required by applicable law or agreed to in writing, software | ||
| * distributed under the License is distributed on an "AS IS" BASIS, | ||
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
| * See the License for the specific language governing permissions and | ||
| * limitations under the License. | ||
| */ | ||
|
|
||
| package io.element.android.features.networkmonitor.api | ||
|
|
||
| enum class NetworkStatus { | ||
| Online, | ||
| Offline | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,103 @@ | ||
| /* | ||
| * Copyright (c) 2023 New Vector Ltd | ||
| * | ||
| * Licensed under the Apache License, Version 2.0 (the "License"); | ||
| * you may not use this file except in compliance with the License. | ||
| * You may obtain a copy of the License at | ||
| * | ||
| * http://www.apache.org/licenses/LICENSE-2.0 | ||
| * | ||
| * Unless required by applicable law or agreed to in writing, software | ||
| * distributed under the License is distributed on an "AS IS" BASIS, | ||
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
| * See the License for the specific language governing permissions and | ||
| * limitations under the License. | ||
| */ | ||
|
|
||
| package io.element.android.features.networkmonitor.api.ui | ||
|
|
||
| import androidx.compose.animation.AnimatedVisibility | ||
| import androidx.compose.animation.expandVertically | ||
| import androidx.compose.animation.shrinkVertically | ||
| import androidx.compose.foundation.Image | ||
| import androidx.compose.foundation.background | ||
| import androidx.compose.foundation.layout.Arrangement | ||
| import androidx.compose.foundation.layout.Row | ||
| import androidx.compose.foundation.layout.Spacer | ||
| import androidx.compose.foundation.layout.fillMaxWidth | ||
| import androidx.compose.foundation.layout.padding | ||
| import androidx.compose.foundation.layout.size | ||
| import androidx.compose.foundation.layout.statusBarsPadding | ||
| import androidx.compose.foundation.layout.width | ||
| import androidx.compose.material.Text | ||
| import androidx.compose.material.icons.Icons | ||
| import androidx.compose.material.icons.outlined.WifiOff | ||
| import androidx.compose.material3.MaterialTheme | ||
| import androidx.compose.runtime.Composable | ||
| import androidx.compose.ui.Alignment | ||
| import androidx.compose.ui.Modifier | ||
| import androidx.compose.ui.graphics.ColorFilter | ||
| import androidx.compose.ui.tooling.preview.Preview | ||
| import androidx.compose.ui.unit.dp | ||
| import io.element.android.libraries.designsystem.ElementTextStyles | ||
| import io.element.android.libraries.designsystem.preview.ElementPreviewDark | ||
| import io.element.android.libraries.designsystem.preview.ElementPreviewLight | ||
| import io.element.android.libraries.designsystem.theme.LocalColors | ||
|
|
||
| @Composable | ||
| fun ConnectivityIndicatorView( | ||
| isOnline: Boolean, | ||
| modifier: Modifier = Modifier | ||
| ) { | ||
| // Display the network indicator with an animation | ||
| AnimatedVisibility( | ||
| visible = !isOnline, | ||
| enter = expandVertically(), | ||
| exit = shrinkVertically(), | ||
| ) { | ||
| Row( | ||
| modifier | ||
| .fillMaxWidth() | ||
| .background(LocalColors.current.gray400) | ||
| .statusBarsPadding() | ||
| .padding(vertical = 6.dp), | ||
| horizontalArrangement = Arrangement.Center, | ||
| verticalAlignment = Alignment.Bottom, | ||
| ) { | ||
| val tint = MaterialTheme.colorScheme.primary | ||
| Image( | ||
| imageVector = Icons.Outlined.WifiOff, | ||
| contentDescription = null, | ||
| colorFilter = ColorFilter.tint(tint), | ||
| modifier = Modifier.size(16.dp), | ||
| ) | ||
| Spacer(modifier = Modifier.width(8.dp)) | ||
| Text(text = "Offline", style = ElementTextStyles.Regular.bodyMD, color = tint) | ||
|
There was a problem hiding this comment. I suppose this string should be defined in localazy |
||
| } | ||
| } | ||
|
|
||
| // Show missing status bar padding when the indicator is not visible | ||
|
There was a problem hiding this comment. This comment does not really match the behavior, I would expect to have the code below surrounded by There was a problem hiding this comment. Actually, the message is accurate, although it's a bit difficult to follow: the There was a problem hiding this comment. OK, I understand. I would have made the padding always visible and the network status bar not include the padding. It would also fix the weird effect (to me!) to see the status bar moving under the system top status bar. But not a blocker, thanks for the explanaition. There was a problem hiding this comment. I tried to do that at first with a Box, but as the TopAppBar needs to move down when the indicator appears, it was quite hard to build it that way. There might be a simpler solution though. |
||
| AnimatedVisibility( | ||
| visible = isOnline, | ||
| enter = expandVertically(), | ||
| exit = shrinkVertically(), | ||
| ) { | ||
| Spacer(modifier = Modifier.statusBarsPadding()) | ||
| } | ||
| } | ||
|
|
||
| @Preview | ||
| @Composable | ||
| internal fun PreviewLightConnectivityIndicatorView() { | ||
| ElementPreviewLight { | ||
| ConnectivityIndicatorView(isOnline = false) | ||
| } | ||
| } | ||
|
|
||
| @Preview | ||
| @Composable | ||
| internal fun PreviewDarkConnectivityIndicatorView() { | ||
| ElementPreviewDark { | ||
| ConnectivityIndicatorView(isOnline = false) | ||
| } | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| /* | ||
| * Copyright (c) 2022 New Vector Ltd | ||
| * | ||
| * Licensed under the Apache License, Version 2.0 (the "License"); | ||
| * you may not use this file except in compliance with the License. | ||
| * You may obtain a copy of the License at | ||
| * | ||
| * http://www.apache.org/licenses/LICENSE-2.0 | ||
| * | ||
| * Unless required by applicable law or agreed to in writing, software | ||
| * distributed under the License is distributed on an "AS IS" BASIS, | ||
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
| * See the License for the specific language governing permissions and | ||
| * limitations under the License. | ||
| */ | ||
|
|
||
| // TODO: Remove once https://youtrack.jetbrains.com/issue/KTIJ-19369 is fixed | ||
| @Suppress("DSL_SCOPE_VIOLATION") | ||
| plugins { | ||
| id("io.element.android-library") | ||
| alias(libs.plugins.anvil) | ||
| } | ||
|
|
||
| anvil { | ||
| generateDaggerFactories.set(true) | ||
| } | ||
|
|
||
| android { | ||
| namespace = "io.element.android.features.networkmonitor.impl" | ||
| } | ||
|
|
||
| dependencies { | ||
| implementation(libs.coroutines.core) | ||
| implementation(libs.dagger) | ||
| implementation(projects.libraries.core) | ||
| implementation(projects.libraries.di) | ||
| api(projects.features.networkmonitor.api) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| <!-- | ||
| ~ Copyright (c) 2023 New Vector Ltd | ||
| ~ | ||
| ~ Licensed under the Apache License, Version 2.0 (the "License"); | ||
| ~ you may not use this file except in compliance with the License. | ||
| ~ You may obtain a copy of the License at | ||
| ~ | ||
| ~ http://www.apache.org/licenses/LICENSE-2.0 | ||
| ~ | ||
| ~ Unless required by applicable law or agreed to in writing, software | ||
| ~ distributed under the License is distributed on an "AS IS" BASIS, | ||
| ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
| ~ See the License for the specific language governing permissions and | ||
| ~ limitations under the License. | ||
| --> | ||
|
|
||
| <manifest xmlns:android="http://schemas.android.com/apk/res/android"> | ||
| <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> | ||
| </manifest> |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The animation is mixing with the animation when switching between room list and message list, this is a bit weird. It should just animate when the network state changes.