feat: Add isInvertedTheme param

Same as #825
cozy · May 19, 2023 · f2ffde5 · f2ffde5
1 parent 321e078
commit f2ffde5
Show file tree

Hide file tree

Showing 10 changed files with 192 additions and 50 deletions.
diff --git a/README.md b/README.md
@@ -41,6 +41,8 @@ window.cozy.bar.init({
 - `lang` is extracted from the `lang` attribute of the `<html>` tag. Defaults to 'en'
 - `iconPath` uses the favicon 32px. Defaults to a blank GIF
 
+To make the icon of Cozy(`icon-cozy-home.svg`) compatible with an inverted theme, please set the parameter `isInvertedTheme` to `true`
+
 ## Help link
 
 Help link is defined in your Cozy's [configuration file](https://github.com/cozy/cozy-stack/blob/master/docs/config.md#main-configuration-file), in the `context` section. See the `cozy.example.yaml` file [provided by the stack](https://github.com/cozy/cozy-stack/blob/master/cozy.example.yaml#L80).

diff --git a/src/components/Apps/AppItem.jsx b/src/components/Apps/AppItem.jsx
@@ -1,13 +1,14 @@
 import React from 'react'
 import get from 'lodash/get'
-import { appShape } from 'proptypes/index'
-import { models } from 'cozy-client'
+import PropTypes from 'prop-types'
 
+import { models } from 'cozy-client'
 import AppIcon from 'cozy-ui/transpiled/react/AppIcon'
 import AppLinker from 'cozy-ui/transpiled/react/AppLinker'
+
 import HomeIcon from 'components/Apps/IconCozyHome'
+import { appShape } from 'proptypes/index'
 import stack from 'lib/stack'
-import PropTypes from 'prop-types'
 
 const getAppDisplayName = get(models, 'applications.getAppDisplayName', app => {
   return app.namePrefix && app.namePrefix.toLowerCase() !== 'cozy'
@@ -64,7 +65,8 @@ export class AppItem extends React.Component {
   }
 
   render() {
-    const { useHomeIcon, app } = this.props
+    const { useHomeIcon, app, isInvertedTheme } = this.props
+
     const dataIcon = app.slug ? `icon-${app.slug}` : ''
     const appName = getAppDisplayName(app)
 
@@ -89,7 +91,10 @@ export class AppItem extends React.Component {
                 onClick={onClick}
               >
                 {useHomeIcon ? (
-                  <HomeIcon className="coz-nav-apps-item-icon" />
+                  <HomeIcon
+                    className="coz-nav-apps-item-icon"
+                    isInvertedTheme={isInvertedTheme}
+                  />
                 ) : (
                   <AppIcon
                     app={app}
@@ -110,7 +115,9 @@ export class AppItem extends React.Component {
 
 AppItem.propTypes = {
   app: appShape.isRequired,
-  useHomeIcon: PropTypes.bool
+  useHomeIcon: PropTypes.bool,
+  isInvertedTheme: PropTypes.bool,
+  onAppSwitch: PropTypes.func
 }
 
 export default AppItem
diff --git a/src/components/Apps/AppNavButtons.jsx b/src/components/Apps/AppNavButtons.jsx
@@ -1,5 +1,6 @@
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
+import PropTypes from 'prop-types'
 
 import BottomIcon from 'cozy-ui/transpiled/react/Icons/Bottom'
 import Icon from 'cozy-ui/transpiled/react/Icon'
@@ -19,6 +20,7 @@ class AppNavButton extends Component {
       appNamePrefix,
       appSlug,
       iconPath,
+      isInvertedTheme,
       isFetchingApps,
       isPublic,
       opened,
@@ -52,7 +54,7 @@ class AppNavButton extends Component {
 
     return (
       <div className={`coz-nav-apps-btns${isHomeApp ? ' --currentHome' : ''}`}>
-        <ButtonCozyHome homeHref={homeHref} />
+        <ButtonCozyHome homeHref={homeHref} isInvertedTheme={isInvertedTheme} />
 
         {!isHomeApp && <span className="coz-nav-apps-btns-sep" />}
 
@@ -81,6 +83,23 @@ class AppNavButton extends Component {
   }
 }
 
+AppNavButton.propTypes = {
+  homeApp: PropTypes.shape({
+    isCurrentApp: PropTypes.bool,
+    slug: PropTypes.string,
+    href: PropTypes.string
+  }),
+  handleClick: PropTypes.func,
+  appName: PropTypes.string,
+  appNamePrefix: PropTypes.string,
+  appSlug: PropTypes.string,
+  iconPath: PropTypes.string,
+  isInvertedTheme: PropTypes.bool,
+  isFetchingApps: PropTypes.bool,
+  isPublic: PropTypes.bool,
+  opened: PropTypes.bool
+}
+
 const mapStateToProps = state => ({
   homeApp: getHomeApp(state),
   isFetchingApps: isFetchingApps(state)

diff --git a/src/components/Apps/AppsContent.jsx b/src/components/Apps/AppsContent.jsx
@@ -1,14 +1,13 @@
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
-import Proptypes from 'prop-types'
+import PropTypes from 'prop-types'
 
 import { translate } from 'cozy-ui/transpiled/react/I18n'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import CloudIcon from 'cozy-ui/transpiled/react/Icons/Cloud'
-
 import withBreakpoints from 'cozy-ui/transpiled/react/helpers/withBreakpoints'
-import { getApps, getHomeApp, isFetchingApps } from 'lib/reducers'
 
+import { getApps, getHomeApp, isFetchingApps } from 'lib/reducers'
 import AppItem from 'components/Apps/AppItem'
 import AppItemPlaceholder from 'components/Apps/AppItemPlaceholder'
 
@@ -27,7 +26,8 @@ export class AppsContent extends Component {
       breakpoints,
       homeApp,
       isFetchingApps,
-      onAppSwitch
+      onAppSwitch,
+      isInvertedTheme
     } = this.props
     const { isMobile } = breakpoints
     const isHomeApp = homeApp && homeApp.isCurrentApp
@@ -41,7 +41,12 @@ export class AppsContent extends Component {
       <div className="coz-nav-pop-content">
         <ul className="coz-nav-group">
           {isMobile && homeApp && (
-            <AppItem app={homeApp} useHomeIcon onAppSwitch={onAppSwitch} />
+            <AppItem
+              app={homeApp}
+              useHomeIcon
+              onAppSwitch={onAppSwitch}
+              isInvertedTheme={isInvertedTheme}
+            />
           )}
           {isFetchingApps
             ? new Array(3)
@@ -51,7 +56,12 @@ export class AppsContent extends Component {
                 .filter(app => app.slug !== homeSlug)
                 .sort(sorter(this.translateApp))
                 .map((app, index) => (
-                  <AppItem app={app} key={index} onAppSwitch={onAppSwitch} />
+                  <AppItem
+                    app={app}
+                    key={index}
+                    onAppSwitch={onAppSwitch}
+                    isInvertedTheme={isInvertedTheme}
+                  />
                 ))}
         </ul>
         {homeApp && !isMobile && !isHomeApp && (
@@ -64,13 +74,17 @@ export class AppsContent extends Component {
     )
   }
 }
+
 AppsContent.propTypes = {
-  homeApp: Proptypes.shape({
-    isCurrentApp: Proptypes.bool,
-    slug: Proptypes.string
+  homeApp: PropTypes.shape({
+    isCurrentApp: PropTypes.bool,
+    slug: PropTypes.string,
+    href: PropTypes.string
   }),
-  apps: Proptypes.array,
-  isFetchingApps: Proptypes.bool.isRequired
+  apps: PropTypes.array,
+  isFetchingApps: PropTypes.bool.isRequired,
+  onAppSwitch: PropTypes.func,
+  isInvertedTheme: PropTypes.bool
 }
 const translateApp = t => app => {
   const namePrefix = app.namePrefix

diff --git a/src/components/Apps/ButtonCozyHome.jsx b/src/components/Apps/ButtonCozyHome.jsx
@@ -1,11 +1,16 @@
 import React from 'react'
-import { isFlagshipApp } from 'cozy-device-helper'
+import PropTypes from 'prop-types'
 
 import flag from 'cozy-flags'
+import { isFlagshipApp } from 'cozy-device-helper'
 
 import IconCozyHome from './IconCozyHome'
 
-export const ButtonCozyHome = ({ webviewContext, homeHref }) => {
+export const ButtonCozyHome = ({
+  webviewContext,
+  homeHref,
+  isInvertedTheme
+}) => {
   if (isFlagshipApp() || flag('flagship.debug'))
     return (
       <a
@@ -14,20 +19,36 @@ export const ButtonCozyHome = ({ webviewContext, homeHref }) => {
         }}
         className="coz-nav-apps-btns-home --is-flagship"
       >
-        <IconCozyHome className="coz-nav-apps-btns-home-svg" />
+        <IconCozyHome
+          className="coz-nav-apps-btns-home-svg"
+          isInvertedTheme={isInvertedTheme}
+        />
       </a>
     )
 
-  if (homeHref)
+  if (homeHref) {
     return (
       <a href={homeHref} className="coz-nav-apps-btns-home">
-        <IconCozyHome className="coz-nav-apps-btns-home-svg" />
+        <IconCozyHome
+          className="coz-nav-apps-btns-home-svg"
+          isInvertedTheme={isInvertedTheme}
+        />
       </a>
     )
+  }
 
   return (
     <span className="coz-nav-apps-btns-home">
-      <IconCozyHome className="coz-nav-apps-btns-home-svg" />
+      <IconCozyHome
+        className="coz-nav-apps-btns-home-svg"
+        isInvertedTheme={isInvertedTheme}
+      />
     </span>
   )
 }
+
+ButtonCozyHome.propTypes = {
+  webviewContext: PropTypes.object,
+  homeHref: PropTypes.string,
+  isInvertedTheme: PropTypes.bool
+}
diff --git a/src/components/Apps/IconCozyHome.jsx b/src/components/Apps/IconCozyHome.jsx
@@ -1,4 +1,5 @@
 import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
 
 import AppIcon from 'cozy-ui/transpiled/react/AppIcon'
 
@@ -21,9 +22,13 @@ function SvgIconCozyHome(props) {
 
 class IconCozyHome extends PureComponent {
   render() {
-    const { className } = this.props
-    const fetchIcon = () =>
-      `${stack.get.cozyURL()}/assets/images/icon-cozy-home.svg`
+    const { className, isInvertedTheme } = this.props
+    const fetchIcon = () => {
+      if (isInvertedTheme) {
+        return `${stack.get.cozyURL()}/assets/images/icon-cozy-home-inverted.svg`
+      }
+      return `${stack.get.cozyURL()}/assets/images/icon-cozy-home.svg`
+    }
 
     return (
       <AppIcon
@@ -35,4 +40,9 @@ class IconCozyHome extends PureComponent {
   }
 }
 
+IconCozyHome.propTypes = {
+  className: PropTypes.string,
+  isInvertedTheme: PropTypes.bool
+}
+
 export default IconCozyHome
diff --git a/src/components/Apps/index.jsx b/src/components/Apps/index.jsx
@@ -1,4 +1,5 @@
 import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 
 import AppsContent from 'components/Apps/AppsContent'
 import AppNavButtons from 'components/Apps/AppNavButtons'
@@ -39,7 +40,14 @@ class Apps extends Component {
 
   // data-tutorial attribute allows to be targeted in an application tutorial
   render() {
-    const { appName, appNamePrefix, appSlug, iconPath, isPublic } = this.props
+    const {
+      appName,
+      appNamePrefix,
+      appSlug,
+      iconPath,
+      isPublic,
+      isInvertedTheme
+    } = this.props
     const { opened } = this.state
     return (
       <nav
@@ -56,17 +64,27 @@ class Apps extends Component {
           handleClick={this.toggleMenu}
           opened={opened}
           isPublic={isPublic}
+          isInvertedTheme={isInvertedTheme}
         />
         <div
           className="coz-nav-pop coz-nav-pop--apps"
           id="coz-nav-pop--apps"
           aria-hidden={!opened}
         >
-          <AppsContent />
+          <AppsContent isInvertedTheme={isInvertedTheme} />
         </div>
       </nav>
     )
   }
 }
 
+Apps.propTypes = {
+  appName: PropTypes.string,
+  appNamePrefix: PropTypes.string,
+  appSlug: PropTypes.string,
+  iconPath: PropTypes.string,
+  isPublic: PropTypes.bool,
+  isInvertedTheme: PropTypes.bool
+}
+
 export default Apps