Timestamp improvements
This commit is contained in:
parent
6c941e02e3
commit
3776b1c025
5 changed files with 24 additions and 10 deletions
|
|
@ -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))
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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)
|
||||||
|
|
|
||||||
|
|
@ -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,
|
||||||
)
|
)
|
||||||
|
|
|
||||||
|
|
@ -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,
|
||||||
)
|
)
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue