Add Icons preview.
This commit is contained in:
Benoit Marty
parent
b690dc3a78
commit
45d45ecc87
2 changed files with 262 additions and 0 deletions
|
|
@ -0,0 +1,144 @@
|
|||
/*
|
||||
* Copyright (c) 2023 New Vector Ltd
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
package io.element.android.libraries.designsystem.icons
|
||||
|
||||
import io.element.android.libraries.designsystem.R
|
||||
|
||||
internal val iconsCompound = listOf(
|
||||
R.drawable.ic_compound_arrow_left,
|
||||
R.drawable.ic_compound_arrow_right,
|
||||
R.drawable.ic_compound_arrow_up_right,
|
||||
R.drawable.ic_compound_block,
|
||||
R.drawable.ic_compound_chat,
|
||||
R.drawable.ic_compound_chat_new,
|
||||
R.drawable.ic_compound_chat_problem,
|
||||
R.drawable.ic_compound_check,
|
||||
R.drawable.ic_compound_check_circle,
|
||||
R.drawable.ic_compound_chevron_down,
|
||||
R.drawable.ic_compound_chevron_left,
|
||||
R.drawable.ic_compound_chevron_right,
|
||||
R.drawable.ic_compound_chevron_up_down,
|
||||
R.drawable.ic_compound_close,
|
||||
R.drawable.ic_compound_computer,
|
||||
R.drawable.ic_compound_delete,
|
||||
R.drawable.ic_compound_download,
|
||||
R.drawable.ic_compound_drag_grid,
|
||||
R.drawable.ic_compound_drag_list,
|
||||
R.drawable.ic_compound_end_call,
|
||||
R.drawable.ic_compound_error,
|
||||
R.drawable.ic_compound_export_archive,
|
||||
R.drawable.ic_compound_extensions,
|
||||
R.drawable.ic_compound_favourite_off,
|
||||
R.drawable.ic_compound_favourite_on,
|
||||
R.drawable.ic_compound_files,
|
||||
R.drawable.ic_compound_filter,
|
||||
R.drawable.ic_compound_grid_view,
|
||||
R.drawable.ic_compound_info,
|
||||
R.drawable.ic_compound_leave,
|
||||
R.drawable.ic_compound_link,
|
||||
R.drawable.ic_compound_lock,
|
||||
R.drawable.ic_compound_lock_off,
|
||||
R.drawable.ic_compound_marker_read_receipts,
|
||||
R.drawable.ic_compound_mention,
|
||||
R.drawable.ic_compound_mic_off_outline,
|
||||
R.drawable.ic_compound_mic_off_solid,
|
||||
R.drawable.ic_compound_mic_on_outline,
|
||||
R.drawable.ic_compound_mic_on_solid,
|
||||
R.drawable.ic_compound_mobile,
|
||||
R.drawable.ic_compound_notifications,
|
||||
R.drawable.ic_compound_notifications_off,
|
||||
R.drawable.ic_compound_notifications_solid,
|
||||
R.drawable.ic_compound_notifications_solid_off,
|
||||
R.drawable.ic_compound_offline,
|
||||
R.drawable.ic_compound_overflow_horizontal,
|
||||
R.drawable.ic_compound_overflow_vertical,
|
||||
R.drawable.ic_compound_polls,
|
||||
R.drawable.ic_compound_pop_out,
|
||||
R.drawable.ic_compound_public,
|
||||
R.drawable.ic_compound_search,
|
||||
R.drawable.ic_compound_settings,
|
||||
R.drawable.ic_compound_settings_solid,
|
||||
R.drawable.ic_compound_share,
|
||||
R.drawable.ic_compound_share_android,
|
||||
R.drawable.ic_compound_share_screen_outline,
|
||||
R.drawable.ic_compound_share_screen_solid,
|
||||
R.drawable.ic_compound_spotlight_view,
|
||||
R.drawable.ic_compound_threads,
|
||||
R.drawable.ic_compound_threads_solid,
|
||||
R.drawable.ic_compound_user_add,
|
||||
R.drawable.ic_compound_user_add_solid,
|
||||
R.drawable.ic_compound_user_profile,
|
||||
R.drawable.ic_compound_verified,
|
||||
R.drawable.ic_compound_video_call,
|
||||
R.drawable.ic_compound_video_call_declined,
|
||||
R.drawable.ic_compound_video_call_missed,
|
||||
R.drawable.ic_compound_video_call_off,
|
||||
R.drawable.ic_compound_visibility_off,
|
||||
R.drawable.ic_compound_visibility_on,
|
||||
R.drawable.ic_compound_voice_call,
|
||||
R.drawable.ic_compound_web_browser,
|
||||
)
|
||||
|
||||
internal val iconsSeptember = listOf(
|
||||
R.drawable.ic_september_add_reaction,
|
||||
R.drawable.ic_september_attachment,
|
||||
R.drawable.ic_september_compose_button,
|
||||
R.drawable.ic_september_copy,
|
||||
R.drawable.ic_september_decryption_error,
|
||||
R.drawable.ic_september_edit_outline,
|
||||
R.drawable.ic_september_edit_solid_16,
|
||||
R.drawable.ic_september_forward,
|
||||
R.drawable.ic_september_location,
|
||||
R.drawable.ic_september_photo_camera,
|
||||
R.drawable.ic_september_photo_video_library,
|
||||
R.drawable.ic_september_reply,
|
||||
R.drawable.ic_september_send,
|
||||
R.drawable.ic_september_take_photo_camera,
|
||||
R.drawable.ic_september_text_formatting,
|
||||
R.drawable.ic_september_video_call,
|
||||
R.drawable.ic_september_view_source,
|
||||
)
|
||||
|
||||
internal val iconsOther = listOf(
|
||||
R.drawable.ic_content_copy,
|
||||
R.drawable.ic_delete,
|
||||
R.drawable.ic_developer_mode,
|
||||
R.drawable.ic_door_open_24,
|
||||
R.drawable.ic_edit,
|
||||
R.drawable.ic_edit_square,
|
||||
R.drawable.ic_forward,
|
||||
R.drawable.ic_groups,
|
||||
R.drawable.ic_indent_decrease,
|
||||
R.drawable.ic_indent_increase,
|
||||
R.drawable.ic_inline_code,
|
||||
R.drawable.ic_italic,
|
||||
R.drawable.ic_link,
|
||||
R.drawable.ic_mention,
|
||||
R.drawable.ic_mute,
|
||||
R.drawable.ic_numbered_list,
|
||||
R.drawable.ic_plus,
|
||||
R.drawable.ic_poll,
|
||||
R.drawable.ic_poll_end,
|
||||
R.drawable.ic_quote,
|
||||
R.drawable.ic_reply,
|
||||
R.drawable.ic_report_content,
|
||||
R.drawable.ic_search,
|
||||
R.drawable.ic_share,
|
||||
R.drawable.ic_strikethrough,
|
||||
R.drawable.ic_thread_decoration,
|
||||
R.drawable.ic_underline,
|
||||
)
|
||||
|
|
@ -0,0 +1,118 @@
|
|||
/*
|
||||
* Copyright (c) 2023 New Vector Ltd
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
package io.element.android.libraries.designsystem.icons
|
||||
|
||||
import androidx.compose.foundation.layout.Arrangement
|
||||
import androidx.compose.foundation.layout.Column
|
||||
import androidx.compose.foundation.layout.Row
|
||||
import androidx.compose.foundation.layout.fillMaxWidth
|
||||
import androidx.compose.foundation.layout.padding
|
||||
import androidx.compose.foundation.layout.width
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.ui.Alignment
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.platform.LocalContext
|
||||
import androidx.compose.ui.text.style.TextAlign
|
||||
import androidx.compose.ui.unit.dp
|
||||
import io.element.android.libraries.designsystem.preview.DayNightPreviews
|
||||
import io.element.android.libraries.designsystem.preview.ElementPreview
|
||||
import io.element.android.libraries.designsystem.theme.components.Icon
|
||||
import io.element.android.libraries.designsystem.theme.components.Text
|
||||
import io.element.android.libraries.theme.ElementTheme
|
||||
|
||||
@DayNightPreviews
|
||||
@Composable
|
||||
internal fun IconsCompoundPreview() = ElementPreview {
|
||||
IconsPreview(
|
||||
title = "R.drawable.ic_compound_*",
|
||||
iconsList = iconsCompound,
|
||||
iconNameTransform = { name ->
|
||||
name.removePrefix("ic_compound_")
|
||||
.replace("_", " ")
|
||||
})
|
||||
}
|
||||
|
||||
@DayNightPreviews
|
||||
@Composable
|
||||
internal fun IconsSeptemberPreview() = ElementPreview {
|
||||
IconsPreview(
|
||||
title = "R.drawable.ic_september_*",
|
||||
iconsList = iconsSeptember,
|
||||
iconNameTransform = { name ->
|
||||
name.removePrefix("ic_september_")
|
||||
.replace("_", " ")
|
||||
})
|
||||
}
|
||||
|
||||
@DayNightPreviews
|
||||
@Composable
|
||||
internal fun IconsOtherPreview() = ElementPreview {
|
||||
IconsPreview(
|
||||
title = "R.drawable.ic_*",
|
||||
iconsList = iconsOther,
|
||||
iconNameTransform = { name ->
|
||||
name.removePrefix("ic_")
|
||||
.replace("_", " ")
|
||||
})
|
||||
}
|
||||
|
||||
@Composable
|
||||
private fun IconsPreview(
|
||||
title: String,
|
||||
iconsList: List<Int>,
|
||||
iconNameTransform: (String) -> String,
|
||||
modifier: Modifier = Modifier,
|
||||
) = ElementPreview {
|
||||
val context = LocalContext.current
|
||||
Column(
|
||||
modifier = modifier,
|
||||
verticalArrangement = Arrangement.spacedBy(2.dp),
|
||||
) {
|
||||
Text(
|
||||
modifier = Modifier.fillMaxWidth(),
|
||||
style = ElementTheme.typography.fontHeadingSmMedium,
|
||||
text = title,
|
||||
textAlign = TextAlign.Center,
|
||||
)
|
||||
iconsList.chunked(8).forEach { iconsRow ->
|
||||
Row(horizontalArrangement = Arrangement.spacedBy(1.dp)) {
|
||||
iconsRow.forEach { icon ->
|
||||
Column(
|
||||
modifier = Modifier.width(48.dp),
|
||||
horizontalAlignment = Alignment.CenterHorizontally,
|
||||
) {
|
||||
Icon(
|
||||
modifier = Modifier.padding(2.dp),
|
||||
resourceId = icon,
|
||||
contentDescription = null,
|
||||
)
|
||||
Text(
|
||||
text = iconNameTransform(
|
||||
context.resources
|
||||
.getResourceEntryName(icon)
|
||||
),
|
||||
modifier = Modifier.fillMaxWidth(),
|
||||
textAlign = TextAlign.Center,
|
||||
style = ElementTheme.typography.fontBodyXsMedium,
|
||||
color = ElementTheme.colors.textSecondary,
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue