Bug 1814994 - Create Tabs Tray list and grid layouts
parent
fd61f88da2
commit
0acebea167
@ -0,0 +1,145 @@
|
|||||||
|
/* This Source Code Form is subject to the terms of the Mozilla Public
|
||||||
|
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||||
|
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||||
|
|
||||||
|
package org.mozilla.fenix.tabstray
|
||||||
|
|
||||||
|
import androidx.compose.foundation.background
|
||||||
|
import androidx.compose.foundation.layout.Box
|
||||||
|
import androidx.compose.foundation.layout.Spacer
|
||||||
|
import androidx.compose.foundation.layout.fillMaxSize
|
||||||
|
import androidx.compose.foundation.layout.height
|
||||||
|
import androidx.compose.foundation.lazy.LazyColumn
|
||||||
|
import androidx.compose.foundation.lazy.grid.GridCells
|
||||||
|
import androidx.compose.foundation.lazy.grid.GridItemSpan
|
||||||
|
import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
|
||||||
|
import androidx.compose.foundation.lazy.grid.items
|
||||||
|
import androidx.compose.foundation.lazy.grid.rememberLazyGridState
|
||||||
|
import androidx.compose.foundation.lazy.items
|
||||||
|
import androidx.compose.foundation.lazy.rememberLazyListState
|
||||||
|
import androidx.compose.runtime.Composable
|
||||||
|
import androidx.compose.ui.Modifier
|
||||||
|
import androidx.compose.ui.res.dimensionResource
|
||||||
|
import androidx.compose.ui.unit.dp
|
||||||
|
import mozilla.components.browser.state.state.ContentState
|
||||||
|
import mozilla.components.browser.state.state.TabSessionState
|
||||||
|
import org.mozilla.fenix.R
|
||||||
|
import org.mozilla.fenix.compose.annotation.LightDarkPreview
|
||||||
|
import org.mozilla.fenix.compose.tabstray.TabGridItem
|
||||||
|
import org.mozilla.fenix.compose.tabstray.TabListItem
|
||||||
|
import org.mozilla.fenix.tabstray.ext.MIN_COLUMN_WIDTH_DP
|
||||||
|
import org.mozilla.fenix.theme.FirefoxTheme
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Top-level UI for displaying a list of tabs.
|
||||||
|
*
|
||||||
|
* @param tabs The list of [TabSessionState] to display.
|
||||||
|
*/
|
||||||
|
@Composable
|
||||||
|
fun TabList(
|
||||||
|
tabs: List<TabSessionState>,
|
||||||
|
) {
|
||||||
|
val tabListBottomPadding = dimensionResource(id = R.dimen.tab_tray_list_bottom_padding)
|
||||||
|
val state = rememberLazyListState()
|
||||||
|
|
||||||
|
LazyColumn(
|
||||||
|
modifier = Modifier.fillMaxSize(),
|
||||||
|
state = state,
|
||||||
|
) {
|
||||||
|
items(
|
||||||
|
items = tabs,
|
||||||
|
key = { tab -> tab.id },
|
||||||
|
) { tab ->
|
||||||
|
TabListItem(
|
||||||
|
tab = tab,
|
||||||
|
onCloseClick = {},
|
||||||
|
onMediaClick = {},
|
||||||
|
onClick = {},
|
||||||
|
onLongClick = {},
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
item {
|
||||||
|
Spacer(modifier = Modifier.height(tabListBottomPadding))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Top-level UI for displaying a grid of tabs.
|
||||||
|
*
|
||||||
|
* @param tabs The list of [TabSessionState] to display.
|
||||||
|
*/
|
||||||
|
@Composable
|
||||||
|
fun TabGrid(
|
||||||
|
tabs: List<TabSessionState>,
|
||||||
|
) {
|
||||||
|
val tabListBottomPadding = dimensionResource(id = R.dimen.tab_tray_list_bottom_padding)
|
||||||
|
val state = rememberLazyGridState()
|
||||||
|
|
||||||
|
LazyVerticalGrid(
|
||||||
|
columns = GridCells.Adaptive(minSize = MIN_COLUMN_WIDTH_DP.dp),
|
||||||
|
modifier = Modifier.fillMaxSize(),
|
||||||
|
state = state,
|
||||||
|
) {
|
||||||
|
items(
|
||||||
|
items = tabs,
|
||||||
|
key = { tab -> tab.id },
|
||||||
|
) { tab ->
|
||||||
|
TabGridItem(
|
||||||
|
tab = tab,
|
||||||
|
onCloseClick = {},
|
||||||
|
onMediaClick = {},
|
||||||
|
onClick = {},
|
||||||
|
onLongClick = {},
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
item(span = { GridItemSpan(maxLineSpan) }) {
|
||||||
|
Spacer(modifier = Modifier.height(tabListBottomPadding))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@LightDarkPreview
|
||||||
|
@Composable
|
||||||
|
private fun TabListPreview() {
|
||||||
|
FirefoxTheme {
|
||||||
|
Box(
|
||||||
|
modifier = Modifier
|
||||||
|
.fillMaxSize()
|
||||||
|
.background(FirefoxTheme.colors.layer1),
|
||||||
|
) {
|
||||||
|
TabList(
|
||||||
|
tabs = generateFakeTabsList(),
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@LightDarkPreview
|
||||||
|
@Composable
|
||||||
|
private fun TabGridPreview() {
|
||||||
|
FirefoxTheme {
|
||||||
|
Box(
|
||||||
|
modifier = Modifier
|
||||||
|
.fillMaxSize()
|
||||||
|
.background(FirefoxTheme.colors.layer1),
|
||||||
|
) {
|
||||||
|
TabGrid(
|
||||||
|
tabs = generateFakeTabsList(),
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private fun generateFakeTabsList(tabCount: Int = 10): List<TabSessionState> {
|
||||||
|
val fakeTab = TabSessionState(
|
||||||
|
id = "tabId",
|
||||||
|
content = ContentState(
|
||||||
|
url = "www.mozilla.com",
|
||||||
|
),
|
||||||
|
)
|
||||||
|
|
||||||
|
return List(tabCount) { fakeTab }
|
||||||
|
}
|
Loading…
Reference in New Issue