Skip to content

Adding tablet UI for home #1723

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
dessalines wants to merge 11 commits into
base: main
Choose a base branch
from
Open

Adding tablet UI for home #1723

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
09b507c
Getting multi-pane home working.
dessalines Nov 20, 2024
fbecf47
Adding navigation bar scaffold.
dessalines Nov 20, 2024
78b4915
Fixing back button.
dessalines Nov 20, 2024
7492570
Merge remote-tracking branch 'origin/main' into post_listing_detail_t…
dessalines Nov 20, 2024
e6546cc
Updating to stable compose bom.
dessalines Nov 20, 2024
fe47f61
Merge remote-tracking branch 'origin/main' into post_listing_detail_t…
dessalines Feb 18, 2025
7c846c2
Fixing JDK crash.
dessalines Feb 18, 2025
17828a0
Addressing PR comments
dessalines Feb 19, 2025
9f2f300
Merge branch 'main' into post_listing_detail_tablet_merge_1
dessalines Jun 11, 2026
fd24493
Some mis-merges
dessalines Jun 11, 2026
22968dc
Fixing deps
dessalines Jun 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion app/build.gradle.kts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,6 +140,12 @@ dependencies {
androidTestApi(composeBom)
testImplementation("androidx.arch.core:core-testing:2.2.0")

// Adaptive layouts
implementation("androidx.compose.material3.adaptive:adaptive:1.2.0")
implementation("androidx.compose.material3.adaptive:adaptive-layout:1.2.0")
implementation("androidx.compose.material3.adaptive:adaptive-navigation:1.2.0")
implementation("androidx.compose.material3:material3-adaptive-navigation-suite")

implementation("me.zhanghai.compose.preference:library:1.1.1")

// Freedroidwarn
Expand Down Expand Up @@ -188,7 +194,6 @@ dependencies {
implementation("androidx.room:room-ktx:2.8.4")

// optional - Test helpers
testImplementation("androidx.room:room-testing:2.8.4")
testImplementation("pl.pragmatists:JUnitParams:1.1.1")
androidTestImplementation("androidx.room:room-testing:2.8.4")

Expand Down
1,358 changes: 682 additions & 676 deletions app/src/main/java/com/jerboa/MainActivity.kt
View file
Open in desktop

Large diffs are not rendered by default.

8 changes: 8 additions & 0 deletions app/src/main/java/com/jerboa/Utils.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1413,3 +1413,11 @@ fun Context.getVersionCode(): Int =
}

fun Int.toBool() = this > 0

sealed interface SelectionVisibilityState<out Item> {
object NoSelection : SelectionVisibilityState<Nothing>

data class ShowSelection<Item>(
val selectedItem: Item,
) : SelectionVisibilityState<Item>
}
Comment thread
MV-GH marked this conversation as resolved.
7 changes: 6 additions & 1 deletion app/src/main/java/com/jerboa/model/PostViewModel.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ import it.vercruysse.lemmyapi.dto.ListingType
import kotlinx.coroutines.launch

class PostViewModel(
val id: Either<PostId, CommentId>,
var id: Either<PostId, CommentId>,
) : ViewModel() {
var postRes: ApiState<GetPostResponse> by mutableStateOf(ApiState.Empty)
private set
Expand Down Expand Up @@ -81,6 +81,11 @@ class PostViewModel(
this.getData()
}

fun reInitializeWithNewId(id: Either<PostId, CommentId>) {

@MV-GH MV-GH Nov 20, 2024

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I haven't fully checked it out

But I think the idea was rather that you would recreate a new postViewModel each time.

I haven't this out yet but this might not play well with the state that won't be remembered. Like sorts.

this.id = id
this.getData()
}

fun updateSortType(sortType: CommentSortType) {
this.sortType = sortType
}
Expand Down
1 change: 0 additions & 1 deletion app/src/main/java/com/jerboa/model/PostsViewModel.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ import com.jerboa.db.entity.AnonAccount
import com.jerboa.db.repository.AccountRepository
import com.jerboa.feed.PaginationController
import com.jerboa.feed.PostController
import com.jerboa.findAndUpdatePostHidden
import com.jerboa.toEnumSafe
import it.vercruysse.lemmyapi.datatypes.CreatePostLike
import it.vercruysse.lemmyapi.datatypes.DeletePost
Expand Down
3 changes: 3 additions & 0 deletions app/src/main/java/com/jerboa/ui/components/common/AccountHelpers.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,9 @@ fun getCurrentAccount(accountViewModel: AccountViewModel): Account {
return acc
}

/**
* A special case of toEnumSafe, where the int still exists in the DB.
*/
fun getPostViewMode(appSettingsViewModel: AppSettingsViewModel): PostViewMode =
getEnumFromIntSetting<PostViewMode>(appSettingsViewModel.appSettings) {
it.postViewMode
Expand Down
139 changes: 63 additions & 76 deletions app/src/main/java/com/jerboa/ui/components/common/AppBars.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
package com.jerboa.ui.components.common

import android.annotation.SuppressLint
import android.app.Activity
import androidx.annotation.StringRes
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.core.animateFloatAsState
Expand All @@ -26,8 +25,9 @@ import androidx.compose.material.icons.filled.KeyboardArrowDown
import androidx.compose.material.icons.filled.KeyboardArrowUp
import androidx.compose.material.icons.outlined.*
import androidx.compose.material3.*
import androidx.compose.material3.adaptive.navigationsuite.NavigationSuiteScaffold
import androidx.compose.material3.adaptive.navigationsuite.NavigationSuiteScope
import androidx.compose.runtime.Composable
import androidx.compose.runtime.DisposableEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
Expand All @@ -38,7 +38,6 @@ import androidx.compose.ui.draw.scale
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.toArgb
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.platform.LocalResources
Expand Down Expand Up @@ -113,99 +112,87 @@ fun SimpleTopAppBarPreview() {
}
}

@Composable
fun BottomAppBarAll(
fun NavigationSuiteScope.adaptiveNavigationBar(
selectedTab: NavTab,
onSelect: (NavTab) -> Unit,
onSelectTab: (NavTab) -> Unit,
userViewType: UserViewType,
unreadCounts: Long,
unreadAppCount: Long?,
unreadReportCount: Long?,
showTextDescriptionsInNavbar: Boolean,
) {
// Check for preview mode
if (LocalContext.current is Activity) {
val window = (LocalContext.current as Activity).window
val colorScheme = MaterialTheme.colorScheme

DisposableEffect(Unit) {

@MV-GH MV-GH Nov 20, 2024

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see this is also gone but this was really necessary for the navigation bar to look the same as system navigation bar.

It looked quite odd. I'll check it out later to see how this looks now.

@dessalines dessalines Nov 20, 2024

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't see any need for these now in the jetpack compose code, maybe they were necessary once, but now with edgeToedge , it seems to handle the navbar coloring fine.

@MV-GH MV-GH Nov 20, 2024

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not on older API levels

@MV-GH MV-GH Nov 26, 2024

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Before

image

After

image

I prefer we keep it, this was tested on Android 12, so not even that old.

window.navigationBarColor = colorScheme.surfaceContainer.toArgb()

onDispose {
window.navigationBarColor = colorScheme.background.toArgb()
}
for (tab in NavTab.getEntries(userViewType)) {
val selected = tab == selectedTab
val iconBadgeCount = when (tab) {
NavTab.Inbox -> unreadCounts
NavTab.RegistrationApplications -> unreadAppCount
NavTab.Reports -> unreadReportCount
else -> null
}
}
// If descriptions are hidden, make the bar shorter
val modifier = if (showTextDescriptionsInNavbar) Modifier else Modifier.navigationBarsPadding().height(56.dp)
Comment thread
MV-GH marked this conversation as resolved.
NavigationBar(
modifier = modifier,
) {
for (tab in NavTab.getEntries(userViewType)) {
val selected = tab == selectedTab
val iconBadgeCount = when (tab) {
NavTab.Inbox -> unreadCounts
NavTab.RegistrationApplications -> unreadAppCount
NavTab.Reports -> unreadReportCount
else -> null
}

NavigationBarItem(
icon = {
NavbarIconAndBadge(
iconBadgeCount = iconBadgeCount,
icon =
if (selected) {
tab.iconFilled
} else {
tab.iconOutlined
},
contentDescription = stringResource(tab.contentDescriptionId),
item(
icon = {
NavbarIconAndBadge(
iconBadgeCount = iconBadgeCount,
icon =
if (selected) {
tab.iconFilled
} else {
tab.iconOutlined
},
contentDescription = stringResource(tab.contentDescriptionId),
)
},
label = {
if (showTextDescriptionsInNavbar) {
Text(
textAlign = TextAlign.Center,
fontSize = TextUnit(10f, TextUnitType.Sp),
text = stringResource(tab.textId),
)
},
label = {
if (showTextDescriptionsInNavbar) {
Text(
textAlign = TextAlign.Center,
fontSize = TextUnit(10f, TextUnitType.Sp),
text = stringResource(tab.textId),
)
}
},
selected = selected,
onClick = {
onSelect(tab)
},
)
}
}
},
selected = selected,
onClick = {
onSelectTab(tab)
},
)
}
}

@Preview
@Composable
fun BottomAppBarAllPreview() {
BottomAppBarAll(
selectedTab = NavTab.Home,
onSelect = {},
unreadCounts = 30,
unreadAppCount = 2,
unreadReportCount = 8,
userViewType = UserViewType.AdminOnly,
showTextDescriptionsInNavbar = true,
fun AdaptiveNavigationBarPreview() {
NavigationSuiteScaffold(
navigationSuiteItems = {
adaptiveNavigationBar(
selectedTab = NavTab.Home,
onSelectTab = {},
unreadCounts = 30,
unreadAppCount = 2,
unreadReportCount = 8,
userViewType = UserViewType.AdminOnly,
showTextDescriptionsInNavbar = true,
)
},
)
}

@Preview
@Composable
fun BottomAppBarAllNoDescriptionsPreview() {
BottomAppBarAll(
selectedTab = NavTab.Home,
onSelect = {},
unreadCounts = 30,
unreadAppCount = null,
unreadReportCount = null,
userViewType = UserViewType.Normal,
showTextDescriptionsInNavbar = false,
fun AdaptiveNavigationBarNoDescriptionsPreview() {
NavigationSuiteScaffold(
navigationSuiteItems = {
adaptiveNavigationBar(
selectedTab = NavTab.Home,
onSelectTab = {},
unreadCounts = 30,
unreadAppCount = 2,
unreadReportCount = 8,
userViewType = UserViewType.AdminOnly,
showTextDescriptionsInNavbar = false,
)
},
)
}

Expand Down
4 changes: 4 additions & 0 deletions app/src/main/java/com/jerboa/ui/components/common/DrawerItems.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,3 +97,7 @@ fun IconAndTextDrawerItemWithMorePreview() {
more = true,
)
}

@Composable
fun selectedItemContainerColor(selected: Boolean) =
if (!selected) MaterialTheme.colorScheme.surface else MaterialTheme.colorScheme.surfaceVariant
Comment thread
MV-GH marked this conversation as resolved.
2 changes: 2 additions & 0 deletions app/src/main/java/com/jerboa/ui/components/community/CommunityScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import androidx.lifecycle.viewmodel.compose.viewModel
import arrow.core.Either
import com.jerboa.JerboaAppState
import com.jerboa.R
import com.jerboa.SelectionVisibilityState
import com.jerboa.api.ApiState
import com.jerboa.datatypes.BanFromCommunityData
import com.jerboa.db.entity.isAnon
Expand Down Expand Up @@ -457,6 +458,7 @@ fun CommunityScreen(
swipeToActionPreset = swipeToActionPreset,
disableVideoAutoplay = disableVideoAutoplay,
lowBandwidthMode = lowBandwidthMode,
selectionState = SelectionVisibilityState.NoSelection,
)
}

Expand Down
Loading