377 - update - the illustrations for the innovation cup theme

changelog.md

@@ -16,6 +16,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - \[Demo\] Change buttons screens by removing style customization and adding a code implementation section ([#339](https://github.com/Orange-OpenSource/ods-android/issues/339))
+- \[Demo\] Display black and white illustrations for non Orange themes ([#386](https://github.com/Orange-OpenSource/ods-android/issues/386))
 - \[Doc\] Use ODS Jekyll theme header to display favicons on documentation github pages ([#370](https://github.com/Orange-OpenSource/ods-android/issues/370))
 - \[Lib\] Replace `tint` parameter of `OdsIconButton` composable methods by `displaySurface` ([#294](https://github.com/Orange-OpenSource/ods-android/issues/294))
 

demo/src/main/java/com/orange/ods/demo/ui/MainScreen.kt

@@ -53,8 +53,8 @@ import com.orange.ods.demo.ui.components.tabs.ScrollableTabRow
 import com.orange.ods.demo.ui.guidelines.addGuidelinesGraph
 import com.orange.ods.demo.ui.utilities.composable.RadioButtonListItem
 import com.orange.ods.demo.ui.utilities.extension.isDarkModeEnabled
+import com.orange.ods.demo.ui.utilities.extension.isOrange
 import com.orange.ods.theme.OdsThemeConfigurationContract
-import com.orange.ods.theme.orange.OrangeThemeConfiguration
 import com.orange.ods.utilities.extension.orElse
 
 @Preview(showBackground = true, uiMode = UI_MODE_NIGHT_YES)
@@ -152,7 +152,7 @@ fun MainScreen(themeConfigurations: Set<OdsThemeConfigurationContract>, mainView
 private fun getCurrentThemeConfiguration(storedUserThemeName: String?, themeConfigurations: Set<OdsThemeConfigurationContract>): OdsThemeConfigurationContract {
     // Return the stored user theme configuration if it exists. If not, return the Orange theme configuration or the first existing theme configuration
     return themeConfigurations.firstOrNull { it.name == storedUserThemeName }
-        .orElse { themeConfigurations.firstOrNull { it.name == OrangeThemeConfiguration.OrangeThemeName } }
+        .orElse { themeConfigurations.firstOrNull { it.isOrange } }
         .orElse { themeConfigurations.first() }
 }
 

demo/src/main/java/com/orange/ods/demo/ui/about/AboutScreen.kt

@@ -32,6 +32,7 @@ import com.orange.ods.compose.text.OdsTextCaption
 import com.orange.ods.compose.text.OdsTextH4
 import com.orange.ods.demo.R
 import com.orange.ods.demo.ui.LocalMainTopAppBarManager
+import com.orange.ods.demo.ui.utilities.DrawableManager
 import com.orange.ods.demo.ui.utilities.compat.PackageManagerCompat
 import com.orange.ods.demo.ui.utilities.extension.versionCode
 import com.orange.ods.utilities.extension.ifNotNull
@@ -50,7 +51,7 @@ fun AboutScreen(onAboutItemClick: (Long) -> Unit) {
         Image(
             modifier = Modifier
                 .fillMaxWidth(),
-            painter = painterResource(id = R.drawable.il_about),
+            painter = painterResource(id = DrawableManager.getDrawableResIdForCurrentTheme(resId = R.drawable.il_about)),
             contentScale = ContentScale.Crop,
             contentDescription = null
         )

demo/src/main/java/com/orange/ods/demo/ui/components/ComponentDetailScreen.kt

@@ -33,6 +33,7 @@ import com.orange.ods.compose.component.list.iconType
 import com.orange.ods.compose.text.OdsTextSubtitle2
 import com.orange.ods.demo.R
 import com.orange.ods.demo.ui.LocalMainTopAppBarManager
+import com.orange.ods.demo.ui.utilities.DrawableManager
 import com.orange.ods.demo.ui.utilities.composable.DetailScreenHeader
 
 @Composable
@@ -53,7 +54,7 @@ fun ComponentDetailScreen(
                 .padding(bottom = dimensionResource(id = R.dimen.screen_vertical_margin))
         ) {
             DetailScreenHeader(
-                imageRes = component.imageRes,
+                imageRes = DrawableManager.getDrawableResIdForCurrentTheme(resId = component.imageRes),
                 imageAlignment = component.imageAlignment,
                 descriptionRes = component.descriptionRes
             )

demo/src/main/java/com/orange/ods/demo/ui/components/ComponentsScreen.kt

@@ -29,6 +29,7 @@ import androidx.compose.ui.res.stringResource
 import com.orange.ods.compose.component.card.OdsSmallCard
 import com.orange.ods.demo.R
 import com.orange.ods.demo.ui.LocalMainTopAppBarManager
+import com.orange.ods.demo.ui.utilities.DrawableManager
 import com.orange.ods.utilities.extension.orElse
 
 @Composable
@@ -59,10 +60,12 @@ fun ComponentsScreen(onComponentClick: (Long) -> Unit) {
 
 @Composable
 private fun RowScope.ComponentCard(component: Component, onComponentClick: (Long) -> Unit) {
+    val smallImageResId = component.smallImageRes?.let { DrawableManager.getDrawableResIdForCurrentTheme(resId = it) }
+    val imageResId = DrawableManager.getDrawableResIdForCurrentTheme(resId = component.imageRes)
     OdsSmallCard(
         modifier = Modifier.weight(0.5f),
         title = stringResource(id = component.titleRes),
-        image = painterResource(id = component.smallImageRes.orElse { component.imageRes }),
+        image = painterResource(id = smallImageResId.orElse { imageResId }),
         imageBackgroundColor = Color(Component.ImageBackgroundColor),
         imageContentScale = ContentScale.Fit,
         imageAlignment = component.imageAlignment,

demo/src/main/java/com/orange/ods/demo/ui/guidelines/GuidelinesScreen.kt

@@ -24,6 +24,7 @@ import androidx.compose.ui.res.stringResource
 import com.orange.ods.compose.component.card.OdsImageFirstCard
 import com.orange.ods.demo.R
 import com.orange.ods.demo.ui.LocalMainTopAppBarManager
+import com.orange.ods.demo.ui.utilities.DrawableManager
 
 @Composable
 fun GuidelinesScreen(onGuidelineClick: (String) -> Unit) {
@@ -40,7 +41,7 @@ fun GuidelinesScreen(onGuidelineClick: (String) -> Unit) {
         Guideline.values().forEach { guideline ->
             OdsImageFirstCard(
                 title = stringResource(id = guideline.titleRes),
-                image = painterResource(id = guideline.imageRes),
+                image = painterResource(id = DrawableManager.getDrawableResIdForCurrentTheme(resId = guideline.imageRes)),
                 imageContentScale = guideline.imageContentScale,
                 imageBackgroundColor = guideline.imageBackgroundColor,
                 imageAlignment = guideline.imageAlignment,

demo/src/main/java/com/orange/ods/demo/ui/guidelines/spacing/GuidelineSpacingScreen.kt

@@ -30,9 +30,12 @@ import com.orange.ods.compose.component.list.divider
 import com.orange.ods.compose.text.OdsTextCaption
 import com.orange.ods.compose.text.OdsTextSubtitle1
 import com.orange.ods.demo.R
+import com.orange.ods.demo.ui.LocalMainThemeManager
 import com.orange.ods.demo.ui.LocalMainTopAppBarManager
 import com.orange.ods.demo.ui.guidelines.Guideline
+import com.orange.ods.demo.ui.utilities.DrawableManager
 import com.orange.ods.demo.ui.utilities.composable.DetailScreenHeader
+import com.orange.ods.demo.ui.utilities.extension.isOrange
 import java.text.DecimalFormat
 import java.text.DecimalFormatSymbols
 import java.util.*
@@ -46,7 +49,7 @@ fun GuidelineSpacingScreen() {
     LazyColumn(contentPadding = PaddingValues(bottom = dimensionResource(id = R.dimen.spacing_m))) {
         item {
             DetailScreenHeader(
-                imageRes = R.drawable.il_spacing,
+                imageRes = DrawableManager.getDrawableResIdForCurrentTheme(resId = R.drawable.il_spacing),
                 imageAlignment = Guideline.Spacing.imageAlignment,
                 descriptionRes = R.string.guideline_spacing_description
             )
@@ -83,6 +86,7 @@ private fun GuidelineSpacingImage(spacing: Spacing) {
     val spacingWidth = dimensionResource(id = spacing.dimenRes).coerceAtLeast(1.dp)
     val imageWidth = dimensionResource(id = R.dimen.guideline_spacing_image_width)
     val imageHeight = dimensionResource(id = R.dimen.guideline_spacing_image_height)
+    val isOrangeTheme = LocalMainThemeManager.current.currentThemeConfiguration.isOrange
 
     Canvas(
         modifier = Modifier
@@ -99,8 +103,9 @@ private fun GuidelineSpacingImage(spacing: Spacing) {
             Size(imageWidth.toPx(), bannerHeight.toPx())
         )
         // Spacing
+        val spacingColor = if (isOrangeTheme) 0xff4bb4e6 else 0xff949494
         drawRect(
-            Color(0xff4bb4e6),
+            Color(spacingColor),
             Offset(((imageWidth - spacingWidth) / 2.0f).toPx(), 0.0f),
             Size(spacingWidth.toPx(), imageHeight.toPx())
         )

demo/src/main/java/com/orange/ods/demo/ui/guidelines/typography/GuidelineTypographyScreen.kt

@@ -34,6 +34,7 @@ import com.orange.ods.compose.theme.OdsTheme
 import com.orange.ods.demo.R
 import com.orange.ods.demo.ui.LocalMainTopAppBarManager
 import com.orange.ods.demo.ui.LocalOdsDemoGuideline
+import com.orange.ods.demo.ui.utilities.DrawableManager
 import com.orange.ods.demo.ui.utilities.composable.DetailScreenHeader
 import com.orange.ods.demo.ui.utilities.getStringName
 import com.orange.ods.theme.guideline.GuidelineTextStyle
@@ -49,7 +50,10 @@ fun GuidelineTypographyScreen() {
         verticalArrangement = Arrangement.spacedBy(dimensionResource(id = R.dimen.spacing_m))
     ) {
         item {
-            DetailScreenHeader(imageRes = R.drawable.il_typography, descriptionRes = R.string.guideline_typography_description)
+            DetailScreenHeader(
+                imageRes = DrawableManager.getDrawableResIdForCurrentTheme(resId = R.drawable.il_typography),
+                descriptionRes = R.string.guideline_typography_description
+            )
         }
         if (guidelineTypography.isEmpty()) {
             item {

demo/src/main/java/com/orange/ods/demo/ui/utilities/DrawableManager.kt

@@ -0,0 +1,63 @@
+/*
+ *
+ *  Copyright 2021 Orange
+ *
+ *  Use of this source code is governed by an MIT-style
+ *  license that can be found in the LICENSE file or at
+ *  https://opensource.org/licenses/MIT.
+ * /
+ */
+
+package com.orange.ods.demo.ui.utilities
+
+import androidx.annotation.DrawableRes
+import androidx.compose.runtime.Composable
+import com.orange.ods.demo.R
+import com.orange.ods.demo.ui.LocalMainThemeManager
+import com.orange.ods.demo.ui.utilities.extension.isOrange
+import com.orange.ods.utilities.extension.orElse
+
+object DrawableManager {
+
+    private val orangeResIdByGenericResId = mapOf(
+        // About
+        R.drawable.il_about_generic to R.drawable.il_about,
+        // Guidelines
+        R.drawable.il_color_generic to R.drawable.il_color,
+        R.drawable.il_spacing_generic to R.drawable.il_spacing,
+        R.drawable.il_typography_generic to R.drawable.il_typography,
+        // Components
+        R.drawable.il_app_bars_top_generic to R.drawable.il_app_bars_top,
+        R.drawable.il_app_bars_top_small_generic to R.drawable.il_app_bars_top_small,
+        R.drawable.il_bottom_navigation_generic to R.drawable.il_bottom_navigation,
+        R.drawable.il_buttons_generic to R.drawable.il_buttons,
+        R.drawable.il_buttons_small_generic to R.drawable.il_buttons_small,
+        R.drawable.il_cards_generic to R.drawable.il_cards,
+        R.drawable.il_checkboxes_generic to R.drawable.il_checkboxes,
+        R.drawable.il_chips_generic to R.drawable.il_chips,
+        R.drawable.il_chips_small_generic to R.drawable.il_chips_small,
+        R.drawable.il_dialogs_generic to R.drawable.il_dialogs,
+        R.drawable.il_lists_generic to R.drawable.il_lists,
+        R.drawable.il_progress_generic to R.drawable.il_progress,
+        R.drawable.il_radio_buttons_generic to R.drawable.il_radio_buttons,
+        R.drawable.il_sliders_generic to R.drawable.il_sliders,
+        R.drawable.il_snackbars_generic to R.drawable.il_snackbars,
+        R.drawable.il_snackbars_small_generic to R.drawable.il_snackbars_small,
+        R.drawable.il_switches_generic to R.drawable.il_switches,
+        R.drawable.il_switches_small_generic to R.drawable.il_switches_small,
+        R.drawable.il_tabs_generic to R.drawable.il_tabs,
+        R.drawable.il_tabs_small_generic to R.drawable.il_tabs_small,
+        R.drawable.il_text_fields_generic to R.drawable.il_text_fields,
+        R.drawable.il_text_fields_small_generic to R.drawable.il_text_fields_small,
+    )
+
+    private val genericResIdByOrangeResId = orangeResIdByGenericResId.entries.associate { it.value to it.key }
+
+    @Composable
+    fun getDrawableResIdForCurrentTheme(@DrawableRes resId: Int): Int {
+        val isOrangeTheme = LocalMainThemeManager.current.currentThemeConfiguration.isOrange
+        val currentThemeResId = if (isOrangeTheme) orangeResIdByGenericResId[resId] else genericResIdByOrangeResId[resId]
+
+        return currentThemeResId.orElse { resId }
+    }
+}

demo/src/main/java/com/orange/ods/demo/ui/utilities/extension/OdsThemeConfigurationContractExt.kt

@@ -0,0 +1,17 @@
+/*
+ *
+ *  Copyright 2021 Orange
+ *
+ *  Use of this source code is governed by an MIT-style
+ *  license that can be found in the LICENSE file or at
+ *  https://opensource.org/licenses/MIT.
+ * /
+ */
+
+package com.orange.ods.demo.ui.utilities.extension
+
+import com.orange.ods.theme.OdsThemeConfigurationContract
+import com.orange.ods.theme.orange.OrangeThemeConfiguration
+
+val OdsThemeConfigurationContract.isOrange: Boolean
+    get() = name == OrangeThemeConfiguration.OrangeThemeName

demo/src/main/res/drawable/il_bottom_navigation_generic.xml

@@ -0,0 +1,72 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="400dp"
+    android:height="200dp"
+    android:viewportWidth="400"
+    android:viewportHeight="200">
+  <path
+      android:pathData="M0,0h400v200h-400z"
+      android:fillColor="#1b1b1b"/>
+  <group>
+    <clip-path
+        android:pathData="M0,0h400v200h-400z"/>
+    <path
+        android:pathData="M328.96,146.46c0,16.82 -13.64,30.46 -30.47,30.46H101.51c-16.82,-0.01 -30.47,-13.64 -30.46,-30.47V-278c0,-16.82 13.64,-30.46 30.46,-30.46h196.99c16.83,0 30.46,13.63 30.46,30.46V146.46Z"
+        android:fillColor="#333"/>
+    <path
+        android:pathData="M83.23,-218.81h233.55v341.18h-233.55z"
+        android:fillColor="#1b1b1b"/>
+    <path
+        android:fillColor="#FF000000"
+        android:pathData="M238.98,70.49h77.88v58.9h-77.88z"/>
+    <path
+        android:pathData="M238.98,70.49h77.88v58.9h-77.88z"
+        android:fillColor="#00121212"/>
+    <path
+        android:fillColor="#FF000000"
+        android:pathData="M161.1,70.49h77.88v58.9h-77.88z"/>
+    <path
+        android:pathData="M161.1,70.49h77.88v58.9h-77.88z"
+        android:fillColor="#00121212"/>
+    <path
+        android:fillColor="#FF000000"
+        android:pathData="M83.22,70.49h77.88v58.9h-77.88z"/>
+    <path
+        android:pathData="M83.22,70.49h77.88v58.9h-77.88z"
+        android:fillColor="#00121212"/>
+    <path
+        android:pathData="M238.98,70.49l-77.88,0l-77.88,0l0,58.91l77.88,0l77.88,0l77.88,0l0,-58.91l-77.88,0z"
+        android:fillColor="#2f2f2f"/>
+    <path
+        android:pathData="M121.65,106.8l-1.95,-1.74c-6.94,-6.17 -11.52,-10.24 -11.52,-15.23 0,-4.02 3.26,-7.28 7.27,-7.28 0.05,0 0.09,0 0.14,0 2.32,0.01 4.53,1.02 6.06,2.76 1.53,-1.74 3.74,-2.75 6.06,-2.76 4.02,-0.07 7.33,3.12 7.41,7.14 0,0.05 0,0.09 0,0.14 0,5 -4.58,9.06 -11.52,15.25l-1.95,1.72Z"
+        android:fillColor="#949494"/>
+    <path
+        android:pathData="M97.83,119.5L146.49,119.5"
+        android:strokeWidth="4"
+        android:fillColor="#00000000"
+        android:strokeColor="#949494"/>
+    <path
+        android:pathData="M277.92,108.15c-7.44,0 -13.47,-6.03 -13.47,-13.47s6.03,-13.47 13.47,-13.47 13.47,6.03 13.47,13.47c0,7.44 -6.03,13.46 -13.47,13.47ZM276.57,98.72v2.69h2.69v-2.69h-2.69ZM276.57,87.94v8.08h2.69v-8.08h-2.69Z"
+        android:strokeAlpha="0.6"
+        android:fillColor="#ccc"
+        android:fillAlpha="0.6"/>
+    <path
+        android:pathData="M253.59,119.5L302.25,119.5"
+        android:strokeAlpha="0.6"
+        android:strokeWidth="4"
+        android:fillColor="#00000000"
+        android:strokeColor="#ccc"
+        android:fillAlpha="0.6"/>
+    <path
+        android:pathData="M175.71,119.5L224.37,119.5"
+        android:strokeAlpha="0.6"
+        android:strokeWidth="4"
+        android:fillColor="#00000000"
+        android:strokeColor="#ccc"
+        android:fillAlpha="0.6"/>
+    <path
+        android:pathData="M200.04,107.48c-1.49,0 -2.69,-1.21 -2.69,-2.69h5.39c0,1.49 -1.21,2.69 -2.69,2.69ZM210.82,103.44h-21.55v-1.35l2.69,-2.69v-6.74c-0.04,-1.94 0.51,-3.85 1.58,-5.47 1.06,-1.54 2.66,-2.63 4.48,-3.04v-0.92c0,-1.12 0.9,-2.02 2.02,-2.02s2.02,0.9 2.02,2.02v0.92c1.82,0.42 3.42,1.51 4.48,3.05 1.07,1.62 1.63,3.52 1.59,5.46v6.74l2.69,2.69v1.35Z"
+        android:strokeAlpha="0.6"
+        android:fillColor="#ccc"
+        android:fillAlpha="0.6"/>
+  </group>
+</vector>

demo/src/main/res/drawable/il_cards_generic.xml

@@ -0,0 +1,83 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="400dp"
+    android:height="200dp"
+    android:viewportWidth="400"
+    android:viewportHeight="200">
+  <path
+      android:pathData="M0,0h400v200h-400z"
+      android:fillColor="#1b1b1b"/>
+  <path
+      android:pathData="M50.8,22.72L183.71,22.72A2.85,2.85 0,0 1,186.56 25.57L186.56,174.44A2.85,2.85 0,0 1,183.71 177.29L50.8,177.29A2.85,2.85 0,0 1,47.95 174.44L47.95,25.57A2.85,2.85 0,0 1,50.8 22.72z"
+      android:fillColor="#fff"/>
+  <path
+      android:pathData="M47.84,51.53h138.61v78.41h-138.61z"
+      android:fillColor="#999"/>
+  <path
+      android:pathData="M62.63,37.39m-8.14,0a8.14,8.14 0,1 1,16.28 0a8.14,8.14 0,1 1,-16.28 0"
+      android:fillColor="#999"/>
+  <path
+      android:pathData="M77.41,30.32h38.35v5.57h-38.35z"
+      android:fillColor="#999"/>
+  <path
+      android:pathData="M77.41,41.25h17.57v4.28h-17.57z"
+      android:fillColor="#999"/>
+  <path
+      android:pathData="M168.24,33.54h7.71v7.71h-7.71z"
+      android:fillColor="#999"/>
+  <path
+      android:pathData="M54.48,138.51h105.62v3.21h-105.62z"
+      android:fillColor="#999"/>
+  <path
+      android:pathData="M54.48,147.51h99.83v3h-99.83z"
+      android:fillColor="#999"/>
+  <path
+      android:pathData="M54.48,161.03h24.42v6.61h-24.42z"
+      android:fillColor="#949494"/>
+  <path
+      android:pathData="M92.19,161.03h24.42v6.61h-24.42z"
+      android:fillColor="#949494"/>
+  <path
+      android:pathData="M216.4,22.72L349.31,22.72A2.85,2.85 0,0 1,352.16 25.57L352.16,174.44A2.85,2.85 0,0 1,349.31 177.29L216.4,177.29A2.85,2.85 0,0 1,213.55 174.44L213.55,25.57A2.85,2.85 0,0 1,216.4 22.72z"
+      android:fillColor="#333"/>
+  <path
+      android:pathData="M213.44,51.53h138.61v78.41h-138.61z"
+      android:strokeAlpha="0.6"
+      android:fillColor="#999"
+      android:fillAlpha="0.6"/>
+  <path
+      android:pathData="M228.22,37.39m-8.14,0a8.14,8.14 0,1 1,16.28 0a8.14,8.14 0,1 1,-16.28 0"
+      android:strokeAlpha="0.6"
+      android:fillColor="#999"
+      android:fillAlpha="0.6"/>
+  <path
+      android:pathData="M243.01,30.32h38.35v5.57h-38.35z"
+      android:strokeAlpha="0.6"
+      android:fillColor="#999"
+      android:fillAlpha="0.6"/>
+  <path
+      android:pathData="M243.01,41.25h17.57v4.28h-17.57z"
+      android:strokeAlpha="0.6"
+      android:fillColor="#999"
+      android:fillAlpha="0.6"/>
+  <path
+      android:pathData="M333.84,33.54h7.71v7.71h-7.71z"
+      android:strokeAlpha="0.6"
+      android:fillColor="#999"
+      android:fillAlpha="0.6"/>
+  <path
+      android:pathData="M220.08,138.51h105.62v3.21h-105.62z"
+      android:strokeAlpha="0.6"
+      android:fillColor="#999"
+      android:fillAlpha="0.6"/>
+  <path
+      android:pathData="M220.08,147.51h99.83v3h-99.83z"
+      android:strokeAlpha="0.6"
+      android:fillColor="#999"
+      android:fillAlpha="0.6"/>
+  <path
+      android:pathData="M220.08,161.03h24.42v6.61h-24.42z"
+      android:fillColor="#949494"/>
+  <path
+      android:pathData="M257.79,161.03h24.42v6.61h-24.42z"
+      android:fillColor="#949494"/>
+</vector>