Fix color for media viewer according to Figma.

This commit is contained in:
Benoit Marty 2025-01-23 15:37:09 +01:00
parent ed80ca9899
commit 8d049e134f
4 changed files with 24 additions and 6 deletions

View file

@ -26,7 +26,6 @@ import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.stringResource import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.PreviewParameter import androidx.compose.ui.tooling.preview.PreviewParameter
@ -40,6 +39,7 @@ import io.element.android.libraries.designsystem.theme.components.Icon
import io.element.android.libraries.designsystem.theme.components.IconButton import io.element.android.libraries.designsystem.theme.components.IconButton
import io.element.android.libraries.designsystem.theme.components.Slider import io.element.android.libraries.designsystem.theme.components.Slider
import io.element.android.libraries.designsystem.theme.components.Text import io.element.android.libraries.designsystem.theme.components.Text
import io.element.android.libraries.mediaviewer.impl.util.bgCanvasWithTransparency
import io.element.android.libraries.ui.strings.CommonStrings import io.element.android.libraries.ui.strings.CommonStrings
@Composable @Composable
@ -58,7 +58,7 @@ fun MediaPlayerControllerView(
) { ) {
Box( Box(
modifier = Modifier modifier = Modifier
.background(color = Color(0x99101317)) .background(color = bgCanvasWithTransparency)
.padding(horizontal = 8.dp, vertical = 4.dp), .padding(horizontal = 8.dp, vertical = 4.dp),
contentAlignment = Alignment.Center, contentAlignment = Alignment.Center,
) { ) {

View file

@ -0,0 +1,16 @@
/*
* Copyright 2025 New Vector Ltd.
*
* SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
* Please see LICENSE files in the repository root for full details.
*/
package io.element.android.libraries.mediaviewer.impl.util
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color
import io.element.android.compound.theme.ElementTheme
val bgCanvasWithTransparency: Color
@Composable
get() = ElementTheme.colors.bgCanvasDefault.copy(alpha = 0.6f)

View file

@ -16,6 +16,7 @@ import androidx.compose.runtime.getValue
import androidx.compose.runtime.rememberUpdatedState import androidx.compose.runtime.rememberUpdatedState
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.Color
import io.element.android.compound.theme.ElementTheme
import kotlinx.coroutines.delay import kotlinx.coroutines.delay
import me.saket.telephoto.flick.FlickToDismiss import me.saket.telephoto.flick.FlickToDismiss
import me.saket.telephoto.flick.FlickToDismissState import me.saket.telephoto.flick.FlickToDismissState
@ -90,5 +91,5 @@ private fun backgroundColorFor(flickState: FlickToDismissState): Color {
}, },
label = "Background alpha", label = "Background alpha",
) )
return Color.Black.copy(alpha = animatedAlpha) return ElementTheme.colors.bgCanvasDefault.copy(alpha = animatedAlpha)
} }

View file

@ -78,6 +78,7 @@ import io.element.android.libraries.mediaviewer.impl.details.MediaDetailsBottomS
import io.element.android.libraries.mediaviewer.impl.local.LocalMediaView import io.element.android.libraries.mediaviewer.impl.local.LocalMediaView
import io.element.android.libraries.mediaviewer.impl.local.PlayableState import io.element.android.libraries.mediaviewer.impl.local.PlayableState
import io.element.android.libraries.mediaviewer.impl.local.rememberLocalMediaViewState import io.element.android.libraries.mediaviewer.impl.local.rememberLocalMediaViewState
import io.element.android.libraries.mediaviewer.impl.util.bgCanvasWithTransparency
import io.element.android.libraries.ui.strings.CommonStrings import io.element.android.libraries.ui.strings.CommonStrings
import kotlinx.coroutines.delay import kotlinx.coroutines.delay
import me.saket.telephoto.zoomable.ZoomSpec import me.saket.telephoto.zoomable.ZoomSpec
@ -209,7 +210,7 @@ fun MediaViewerView(
} }
}, },
colors = TopAppBarDefaults.topAppBarColors( colors = TopAppBarDefaults.topAppBarColors(
containerColor = Color.Black.copy(alpha = 0.6f), containerColor = bgCanvasWithTransparency,
), ),
navigationIcon = { BackButton(onClick = onBackClick) }, navigationIcon = { BackButton(onClick = onBackClick) },
) )
@ -455,7 +456,7 @@ private fun MediaViewerTopBar(
} }
}, },
colors = TopAppBarDefaults.topAppBarColors( colors = TopAppBarDefaults.topAppBarColors(
containerColor = Color.Black.copy(alpha = 0.6f), containerColor = bgCanvasWithTransparency,
), ),
navigationIcon = { BackButton(onClick = onBackClick) }, navigationIcon = { BackButton(onClick = onBackClick) },
actions = { actions = {
@ -501,7 +502,7 @@ private fun MediaViewerBottomBar(
Column( Column(
modifier = modifier modifier = modifier
.fillMaxWidth() .fillMaxWidth()
.background(Color(0x99101317)) .background(bgCanvasWithTransparency)
.onSizeChanged { .onSizeChanged {
onHeightChange(it.height) onHeightChange(it.height)
}, },