Timestamp improvements

This commit is contained in:
Jorge Martín 2023-05-26 14:37:39 +02:00
parent 6c941e02e3
commit 3776b1c025
5 changed files with 24 additions and 10 deletions

View file

@ -87,7 +87,9 @@ import io.element.android.libraries.designsystem.components.avatar.Avatar
import io.element.android.libraries.designsystem.components.avatar.AvatarData import io.element.android.libraries.designsystem.components.avatar.AvatarData
import io.element.android.libraries.designsystem.preview.ElementPreviewDark import io.element.android.libraries.designsystem.preview.ElementPreviewDark
import io.element.android.libraries.designsystem.preview.ElementPreviewLight import io.element.android.libraries.designsystem.preview.ElementPreviewLight
import io.element.android.libraries.designsystem.theme.ElementColors
import io.element.android.libraries.designsystem.theme.ElementTheme import io.element.android.libraries.designsystem.theme.ElementTheme
import io.element.android.libraries.designsystem.theme.LocalColors
import io.element.android.libraries.designsystem.theme.components.FloatingActionButton import io.element.android.libraries.designsystem.theme.components.FloatingActionButton
import io.element.android.libraries.designsystem.theme.components.Icon import io.element.android.libraries.designsystem.theme.components.Icon
import io.element.android.libraries.designsystem.theme.components.Text import io.element.android.libraries.designsystem.theme.components.Text
@ -363,12 +365,11 @@ fun MessageEventLayout(
ContentView() ContentView()
Box( Box(
modifier = Modifier modifier = Modifier
.wrapContentSize() .padding(horizontal = 4.dp, vertical = 4.dp)
.padding(horizontal = 4.dp, vertical = 2.dp) .background(LocalColors.current.gray300, RoundedCornerShape(10.0.dp))
.background(Color(0xFFF0F2F5), RoundedCornerShape(10.0.dp)) // TODO: add the color with its dark variant
.align(Alignment.BottomEnd) .align(Alignment.BottomEnd)
) { ) {
TimestampView(Modifier.padding(horizontal = 8.dp, vertical = 4.dp)) TimestampView(Modifier.padding(horizontal = 4.dp, vertical = 2.dp))
} }
} }
} }

View file

@ -75,5 +75,7 @@ val LinkColor = Color(0xFF0086E6)
val TextColorCriticalLight = Color(0xFFD51928) val TextColorCriticalLight = Color(0xFFD51928)
val TextColorCriticalDark = Color(0xfffd3e3c) val TextColorCriticalDark = Color(0xfffd3e3c)
val Gray_400_Light = Color(0xFFE1E6EC) val Compound_Gray_300_Light = Color(0xFFF0F2F5)
val Gray_400_Dark = Color(0xFF26282D) val Compound_Gray_300_Dark = Color(0xFF1D1F24)
val Compound_Gray_400_Light = Color(0xFFE1E6EC)
val Compound_Gray_400_Dark = Color(0xFF26282D)

View file

@ -23,10 +23,11 @@ import androidx.compose.ui.tooling.preview.Preview
import io.element.android.libraries.designsystem.Azure import io.element.android.libraries.designsystem.Azure
import io.element.android.libraries.designsystem.Black_800 import io.element.android.libraries.designsystem.Black_800
import io.element.android.libraries.designsystem.Black_950 import io.element.android.libraries.designsystem.Black_950
import io.element.android.libraries.designsystem.Compound_Gray_300_Dark
import io.element.android.libraries.designsystem.DarkGrey import io.element.android.libraries.designsystem.DarkGrey
import io.element.android.libraries.designsystem.Gray_300 import io.element.android.libraries.designsystem.Gray_300
import io.element.android.libraries.designsystem.Gray_400 import io.element.android.libraries.designsystem.Gray_400
import io.element.android.libraries.designsystem.Gray_400_Dark import io.element.android.libraries.designsystem.Compound_Gray_400_Dark
import io.element.android.libraries.designsystem.Gray_450 import io.element.android.libraries.designsystem.Gray_450
import io.element.android.libraries.designsystem.SystemGrey5Dark import io.element.android.libraries.designsystem.SystemGrey5Dark
import io.element.android.libraries.designsystem.SystemGrey6Dark import io.element.android.libraries.designsystem.SystemGrey6Dark
@ -39,7 +40,8 @@ fun elementColorsDark() = ElementColors(
messageHighlightedBackground = Azure, messageHighlightedBackground = Azure,
quaternary = Gray_400, quaternary = Gray_400,
quinary = Gray_450, quinary = Gray_450,
gray400 = Gray_400_Dark, gray300 = Compound_Gray_300_Dark,
gray400 = Compound_Gray_400_Dark,
textActionCritical = TextColorCriticalDark, textActionCritical = TextColorCriticalDark,
isLight = false, isLight = false,
) )

View file

@ -26,7 +26,8 @@ import io.element.android.libraries.designsystem.Gray_100
import io.element.android.libraries.designsystem.Gray_150 import io.element.android.libraries.designsystem.Gray_150
import io.element.android.libraries.designsystem.Gray_200 import io.element.android.libraries.designsystem.Gray_200
import io.element.android.libraries.designsystem.Gray_25 import io.element.android.libraries.designsystem.Gray_25
import io.element.android.libraries.designsystem.Gray_400_Light import io.element.android.libraries.designsystem.Compound_Gray_300_Light
import io.element.android.libraries.designsystem.Compound_Gray_400_Light
import io.element.android.libraries.designsystem.Gray_50 import io.element.android.libraries.designsystem.Gray_50
import io.element.android.libraries.designsystem.SystemGrey5Light import io.element.android.libraries.designsystem.SystemGrey5Light
import io.element.android.libraries.designsystem.SystemGrey6Light import io.element.android.libraries.designsystem.SystemGrey6Light
@ -39,7 +40,8 @@ fun elementColorsLight() = ElementColors(
messageHighlightedBackground = Azure, messageHighlightedBackground = Azure,
quaternary = Gray_100, quaternary = Gray_100,
quinary = Gray_50, quinary = Gray_50,
gray400 = Gray_400_Light, gray300 = Compound_Gray_300_Light,
gray400 = Compound_Gray_400_Light,
textActionCritical = TextColorCriticalLight, textActionCritical = TextColorCriticalLight,
isLight = true, isLight = true,
) )

View file

@ -29,6 +29,7 @@ class ElementColors(
messageHighlightedBackground: Color, messageHighlightedBackground: Color,
quaternary: Color, quaternary: Color,
quinary: Color, quinary: Color,
gray300: Color,
gray400: Color, gray400: Color,
textActionCritical: Color, textActionCritical: Color,
isLight: Boolean isLight: Boolean
@ -46,6 +47,9 @@ class ElementColors(
var quinary by mutableStateOf(quinary) var quinary by mutableStateOf(quinary)
private set private set
var gray300 by mutableStateOf(gray400)
private set
var gray400 by mutableStateOf(gray400) var gray400 by mutableStateOf(gray400)
private set private set
@ -61,6 +65,7 @@ class ElementColors(
messageHighlightedBackground: Color = this.messageHighlightedBackground, messageHighlightedBackground: Color = this.messageHighlightedBackground,
quaternary: Color = this.quaternary, quaternary: Color = this.quaternary,
quinary: Color = this.quinary, quinary: Color = this.quinary,
gray300: Color = this.gray300,
gray400: Color = this.gray400, gray400: Color = this.gray400,
textActionCritical: Color = this.textActionCritical, textActionCritical: Color = this.textActionCritical,
isLight: Boolean = this.isLight, isLight: Boolean = this.isLight,
@ -70,6 +75,7 @@ class ElementColors(
messageHighlightedBackground = messageHighlightedBackground, messageHighlightedBackground = messageHighlightedBackground,
quaternary = quaternary, quaternary = quaternary,
quinary = quinary, quinary = quinary,
gray300 = gray300,
gray400 = gray400, gray400 = gray400,
textActionCritical = textActionCritical, textActionCritical = textActionCritical,
isLight = isLight, isLight = isLight,
@ -81,6 +87,7 @@ class ElementColors(
messageHighlightedBackground = other.messageHighlightedBackground messageHighlightedBackground = other.messageHighlightedBackground
quaternary = other.quaternary quaternary = other.quaternary
quinary = other.quinary quinary = other.quinary
gray300 = other.gray300
gray400 = other.gray400 gray400 = other.gray400
textActionCritical = other.textActionCritical textActionCritical = other.textActionCritical
isLight = other.isLight isLight = other.isLight