Add Icons preview.
This commit is contained in:
Benoit Marty
parent
e01f32091f
commit
fd20bf102e
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