add background color in AppCard (#838)

* add background color in AppCard

* Add background color in AppCard (#681)

* Add background color in AppCard

* add line to changelog

* Add primaryBackgroundColor and secondaryBackgroundColor color in AppCard (#838)

* Add primaryBackgroundColor and secondaryBackgroundColor color color in AppCard

* add line to changelog

* Fix defaults for App card.

Author: bugtype

CHANGELOG.md

@@ -6,6 +6,9 @@
 * Fix: Filtering with a 1-digit number (#831), thanks to [Pascal Giguère](https://github.com/pgiguere1)
 * Fix: Databrowser shows correct count of filtered objects, thanks to [Tom Engelbrecht](https://github.com/engel)
 
+### 1.1.3
+* Feature: Add primaryBackgroundColor and secondaryBackgroundColor in AppCard, thanks to [AreyouHappy](https://github.com/AreyouHappy)
+
 ### 1.1.2
 
 * Fix: An issue introduced when using readOnlyMasterKey would make all users readOnly after one has logged in.

Parse-Dashboard/parse-dashboard-config.json

@@ -4,7 +4,9 @@
     "appId": "",
     "masterKey": "",
     "appName": "",
-    "iconName": ""
+    "iconName": "",
+    "primaryBackgroundColor": "",
+    "secondaryBackgroundColor": ""
   }],
   "iconsFolder": "icons"
 }

README.md

@@ -16,6 +16,7 @@ Parse Dashboard is a standalone dashboard for managing your Parse apps. You can
       * [Single app](#single-app)
   * [Managing Multiple Apps](#managing-multiple-apps)
   * [App Icon Configuration](#app-icon-configuration)
+  * [App Background Color Configuration](#app-background-color-configuration)
   * [Other Configuration Options](#other-configuration-options)
 * [Running as Express Middleware](#running-as-express-middleware)
 * [Deploying Parse Dashboard](#deploying-parse-dashboard)
@@ -153,6 +154,33 @@ Parse Dashboard supports adding an optional icon for each app, so you can identi
 }
 ```
 
+## App Background Color Configuration
+
+Parse Dashboard supports adding an optional background color for each app, so you can identify them easier in the list. To do so, you *must* use the configuration file, define an `primaryBackgroundColor` and `secondaryBackgroundColor` in it, parameter for each app. It is `CSS style`. To visualize what it means, in the following example `backgroundColor` is a configuration file:
+
+```json
+{
+  "apps": [
+    {
+      "serverURL": "http://localhost:1337/parse",
+      "appId": "myAppId",
+      "masterKey": "myMasterKey",
+      "appName": "My Parse Server App",
+      "primaryBackgroundColor": "#FFA500", // Orange
+      "secondaryBackgroundColor": "#FF4500" // OrangeRed
+    },
+    {
+      "serverURL": "http://localhost:1337/parse",
+      "appId": "myAppId",
+      "masterKey": "myMasterKey",
+      "appName": "My Parse Server App [2]",
+      "primaryBackgroundColor": "rgb(255, 0, 0)", // Red
+      "secondaryBackgroundColor": "rgb(204, 0, 0)" // DarkRed
+    }
+  ]
+}
+```
+
 ## Other Configuration Options
 
 You can set `appNameForURL` in the config file for each app to control the url of your app within the dashboard. This can make it easier to use bookmarks or share links on your dashboard.

package.json

@@ -20,7 +20,7 @@
   ],
   "homepage": "https://github.com/ParsePlatform/parse-dashboard",
   "bugs": "https://github.com/ParsePlatform/parse-dashboard/issues",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "repository": {
     "type": "git",
     "url": "https://github.com/ParsePlatform/parse-dashboard"

src/components/Sidebar/Sidebar.react.js

@@ -23,6 +23,8 @@ const Sidebar = ({
   sections,
   section,
   appSelector,
+  primaryBackgroundColor,
+  secondaryBackgroundColor
 }) => {
   const _subMenu = subsections => {
     if (!subsections) {
@@ -70,7 +72,10 @@ const Sidebar = ({
             icon={icon}
             style={style}
             link={prefix + link}
-            active={active}>
+            active={active}
+            primaryBackgroundColor={primaryBackgroundColor}
+            secondaryBackgroundColor={secondaryBackgroundColor}
+            >
             {active ? _subMenu(subsections) : null}
           </SidebarSection>
         );

src/components/Sidebar/SidebarSection.react.js

@@ -10,7 +10,7 @@ import { Link } from 'react-router';
 import React    from 'react';
 import styles   from 'components/Sidebar/Sidebar.scss';
 
-let SidebarSection = ({ active, children, name, link, icon, style }) => {
+let SidebarSection = ({ active, children, name, link, icon, style, primaryBackgroundColor, secondaryBackgroundColor  }) => {
   let classes = [styles.section];
   if (active) {
     classes.push(styles.active);
@@ -22,10 +22,10 @@ let SidebarSection = ({ active, children, name, link, icon, style }) => {
   return (
     <div className={classes.join(' ')}>
       {active ?
-        <div style={style} className={styles.section_header}>{iconContent}<span>{name}</span></div> :
+        <div style={style} className={styles.section_header} style={{ background: primaryBackgroundColor }}>{iconContent}<span>{name}</span></div> :
         <Link style={style} className={styles.section_header} to={{ pathname: link || '' }}>{iconContent}<span>{name}</span></Link>}
 
-      {children ? <div className={styles.section_contents}>{children}</div> : null}
+      {children ? <div className={styles.section_contents} style={{ background: secondaryBackgroundColor }}>{children}</div> : null}
     </div>
   );
 };

src/dashboard/Apps/AppsIndex.react.js

@@ -72,7 +72,7 @@ let AppCard = ({
     Server version: <span className={styles.ago}>{app.serverInfo.parseServerVersion || 'unknown'}</span>
     </div>;
 
-  return <li onClick={canBrowse}>
+  return <li onClick={canBrowse} style={{ background: app.primaryBackgroundColor }}>
     <a className={styles.icon}>
       {icon ? <img src={'appicons/' + icon} width={56} height={56}/> : <Icon width={56} height={56} name='blank-app-outline' fill='#1E384D' />}
     </a>

src/dashboard/DashboardView.react.js

@@ -240,7 +240,10 @@ export default class DashboardView extends React.Component {
       section={this.section}
       subsection={this.subsection}
       prefix={'/apps/' + appSlug}
-      action={this.action}>
+      action={this.action}
+      primaryBackgroundColor={this.context.currentApp.primaryBackgroundColor}
+      secondaryBackgroundColor={this.context.currentApp.secondaryBackgroundColor}
+      >
       {sidebarChildren}
     </Sidebar>);
 

src/lib/ParseApp.js

@@ -39,6 +39,8 @@ export default class ParseApp {
     serverInfo,
     production,
     iconName,
+    primaryBackgroundColor,
+    secondaryBackgroundColor,
     supportedPushLocales,
   }) {
     this.name = appName;
@@ -60,6 +62,8 @@ export default class ParseApp {
     this.serverURL = serverURL;
     this.serverInfo = serverInfo;
     this.icon = iconName;
+    this.primaryBackgroundColor=primaryBackgroundColor;
+    this.secondaryBackgroundColor=secondaryBackgroundColor;
     this.supportedPushLocales = supportedPushLocales ? supportedPushLocales : [];
 
     if(!supportedPushLocales) {