Extract compound tokens and theming to compound-android library (#1888)

* Replace tokens & icons with the external Compound ones

---------

Co-authored-by: ElementBot <benoitm+elementbot@element.io>
This commit is contained in:
Jorge Martin Espinosa 2023-11-27 10:30:07 +01:00 committed by GitHub
parent 8fc2bf391f
commit a8b85fb4e6
1185 changed files with 1878 additions and 6090 deletions

View file

@ -37,7 +37,7 @@ import io.element.android.libraries.designsystem.atomic.atoms.UnreadIndicatorAto
import io.element.android.libraries.designsystem.preview.PreviewsDayNight
import io.element.android.libraries.designsystem.preview.ElementPreview
import io.element.android.libraries.designsystem.theme.components.Text
import io.element.android.libraries.theme.ElementTheme
import io.element.android.compound.theme.ElementTheme
import io.element.android.libraries.ui.strings.CommonStrings
@Composable

View file

@ -24,6 +24,8 @@ import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import io.element.android.compound.theme.ElementTheme
import io.element.android.compound.tokens.generated.CompoundIcons
import io.element.android.libraries.designsystem.components.list.ListItemContent
import io.element.android.libraries.designsystem.preview.ElementPreview
import io.element.android.libraries.designsystem.preview.PreviewsDayNight
@ -32,9 +34,7 @@ import io.element.android.libraries.designsystem.theme.components.ListItem
import io.element.android.libraries.designsystem.theme.components.ListItemStyle
import io.element.android.libraries.designsystem.theme.components.ModalBottomSheet
import io.element.android.libraries.designsystem.theme.components.Text
import io.element.android.libraries.designsystem.utils.CommonDrawables
import io.element.android.libraries.matrix.api.core.RoomId
import io.element.android.libraries.theme.ElementTheme
import io.element.android.libraries.ui.strings.CommonStrings
@OptIn(ExperimentalMaterial3Api::class)
@ -87,8 +87,8 @@ private fun RoomListModalBottomSheetContent(
},
modifier = Modifier.clickable { onRoomSettingsClicked(contextMenu.roomId) },
leadingContent = ListItemContent.Icon(
iconSource = IconSource.Resource(
CommonDrawables.ic_compound_settings,
iconSource = IconSource.Vector(
CompoundIcons.Settings,
contentDescription = stringResource(id = CommonStrings.common_settings)
)
),
@ -98,8 +98,8 @@ private fun RoomListModalBottomSheetContent(
headlineContent = { Text(text = stringResource(id = CommonStrings.action_leave_room)) },
modifier = Modifier.clickable { onLeaveRoomClicked(contextMenu.roomId) },
leadingContent = ListItemContent.Icon(
iconSource = IconSource.Resource(
CommonDrawables.ic_compound_leave,
iconSource = IconSource.Vector(
CompoundIcons.Leave,
contentDescription = stringResource(id = CommonStrings.action_leave_room)
)
),

View file

@ -46,6 +46,8 @@ import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.DpOffset
import androidx.compose.ui.unit.DpSize
import androidx.compose.ui.unit.dp
import io.element.android.compound.theme.ElementTheme
import io.element.android.compound.tokens.generated.CompoundIcons
import io.element.android.features.roomlist.impl.R
import io.element.android.libraries.designsystem.atomic.atoms.RedIndicatorAtom
import io.element.android.libraries.designsystem.components.avatar.Avatar
@ -65,14 +67,12 @@ 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.MediumTopAppBar
import io.element.android.libraries.designsystem.theme.components.Text
import io.element.android.libraries.designsystem.utils.CommonDrawables
import io.element.android.libraries.designsystem.utils.LogCompositions
import io.element.android.libraries.matrix.api.core.UserId
import io.element.android.libraries.matrix.api.user.MatrixUser
import io.element.android.libraries.matrix.ui.model.getAvatarData
import io.element.android.libraries.testtags.TestTags
import io.element.android.libraries.testtags.testTag
import io.element.android.libraries.theme.ElementTheme
import io.element.android.libraries.ui.strings.CommonStrings
private val avatarBloomSize = 430.dp
@ -218,7 +218,7 @@ private fun DefaultRoomListTopBar(
onClick = onSearchClicked,
) {
Icon(
resourceId = CommonDrawables.ic_compound_search,
imageVector = CompoundIcons.Search,
contentDescription = stringResource(CommonStrings.action_search),
)
}
@ -226,7 +226,7 @@ private fun DefaultRoomListTopBar(
onClick = { showMenu = !showMenu }
) {
Icon(
resourceId = CommonDrawables.ic_compound_overflow_vertical,
imageVector = CompoundIcons.OverflowVertical,
contentDescription = null,
)
}
@ -242,7 +242,7 @@ private fun DefaultRoomListTopBar(
text = { Text(stringResource(id = CommonStrings.action_invite)) },
leadingIcon = {
Icon(
resourceId = CommonDrawables.ic_compound_share_android,
imageVector = CompoundIcons.ShareAndroid,
tint = ElementTheme.materialColors.secondary,
contentDescription = null,
)
@ -256,7 +256,7 @@ private fun DefaultRoomListTopBar(
text = { Text(stringResource(id = CommonStrings.common_report_a_problem)) },
leadingIcon = {
Icon(
resourceId = CommonDrawables.ic_compound_chat_problem,
imageVector = CompoundIcons.ChatProblem,
tint = ElementTheme.materialColors.secondary,
contentDescription = null,
)

View file

@ -36,7 +36,7 @@ import io.element.android.libraries.designsystem.components.avatar.AvatarSize
import io.element.android.libraries.designsystem.preview.PreviewsDayNight
import io.element.android.libraries.designsystem.preview.ElementPreview
import io.element.android.libraries.designsystem.theme.placeholderBackground
import io.element.android.libraries.theme.ElementTheme
import io.element.android.compound.theme.ElementTheme
/**
* https://www.figma.com/file/0MMNu7cTOzLOlWb7ctTkv3/Element-X?node-id=6547%3A147623

View file

@ -35,12 +35,12 @@ import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.res.vectorResource
import androidx.compose.ui.text.AnnotatedString
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.PreviewParameter
import androidx.compose.ui.unit.dp
import io.element.android.compound.theme.ElementTheme
import io.element.android.compound.tokens.generated.CompoundIcons
import io.element.android.features.roomlist.impl.model.RoomListRoomSummary
import io.element.android.features.roomlist.impl.model.RoomListRoomSummaryProvider
import io.element.android.libraries.core.extensions.orEmpty
@ -54,9 +54,7 @@ import io.element.android.libraries.designsystem.theme.roomListRoomMessage
import io.element.android.libraries.designsystem.theme.roomListRoomMessageDate
import io.element.android.libraries.designsystem.theme.roomListRoomName
import io.element.android.libraries.designsystem.theme.unreadIndicator
import io.element.android.libraries.designsystem.utils.CommonDrawables
import io.element.android.libraries.matrix.api.room.RoomNotificationMode
import io.element.android.libraries.theme.ElementTheme
internal val minHeight = 84.dp
@ -178,7 +176,7 @@ private fun RowScope.LastMessageAndIndicatorRow(room: RoomListRoomSummary) {
if (room.hasOngoingCall) {
Icon(
modifier = Modifier.size(16.dp),
resourceId = CommonDrawables.ic_compound_video_call,
imageVector = CompoundIcons.VideoCall,
contentDescription = null,
tint = ElementTheme.colors.unreadIndicator,
)
@ -199,14 +197,14 @@ private fun NotificationIcon(room: RoomListRoomSummary) {
Icon(
modifier = Modifier.size(16.dp),
contentDescription = null,
imageVector = ImageVector.vectorResource(CommonDrawables.ic_compound_mention),
imageVector = CompoundIcons.Mention,
tint = tint,
)
RoomNotificationMode.MUTE ->
Icon(
modifier = Modifier.size(16.dp),
contentDescription = null,
imageVector = ImageVector.vectorResource(CommonDrawables.ic_compound_notifications_solid_off),
imageVector = CompoundIcons.NotificationsSolidOff,
tint = tint,
)
}

View file

@ -48,6 +48,7 @@ import androidx.compose.ui.input.pointer.pointerInput
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.Velocity
import androidx.compose.ui.unit.dp
import io.element.android.compound.tokens.generated.CompoundIcons
import io.element.android.features.roomlist.impl.RoomListEvents
import io.element.android.features.roomlist.impl.RoomListState
import io.element.android.features.roomlist.impl.aRoomListState
@ -56,14 +57,13 @@ import io.element.android.features.roomlist.impl.contentType
import io.element.android.features.roomlist.impl.model.RoomListRoomSummary
import io.element.android.libraries.designsystem.components.button.BackButton
import io.element.android.libraries.designsystem.modifiers.applyIf
import io.element.android.libraries.designsystem.preview.PreviewsDayNight
import io.element.android.libraries.designsystem.preview.ElementPreview
import io.element.android.libraries.designsystem.preview.PreviewsDayNight
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.Scaffold
import io.element.android.libraries.designsystem.theme.components.TextField
import io.element.android.libraries.designsystem.theme.components.TopAppBar
import io.element.android.libraries.designsystem.utils.CommonDrawables
import io.element.android.libraries.designsystem.utils.copy
import io.element.android.libraries.matrix.api.core.RoomId
import io.element.android.libraries.ui.strings.CommonStrings
@ -153,7 +153,7 @@ private fun RoomListSearchResultContent(
state.eventSink(RoomListEvents.UpdateFilter(""))
}) {
Icon(
resourceId = CommonDrawables.ic_compound_close,
imageVector = CompoundIcons.Close,
contentDescription = stringResource(CommonStrings.action_cancel)
)
}