Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add background color in AppCard #838

Merged
merged 4 commits into from
Mar 6, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
4 changes: 3 additions & 1 deletion Parse-Dashboard/parse-dashboard-config.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,9 @@
"appId": "",
"masterKey": "",
"appName": "",
"iconName": ""
"iconName": "",
"primaryBackgroundColor": "",
"secondaryBackgroundColor": ""
}],
"iconsFolder": "icons"
}
28 changes: 28 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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.
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
7 changes: 6 additions & 1 deletion src/components/Sidebar/Sidebar.react.js
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,8 @@ const Sidebar = ({
sections,
section,
appSelector,
primaryBackgroundColor,
secondaryBackgroundColor
}) => {
const _subMenu = subsections => {
if (!subsections) {
Expand Down Expand Up @@ -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>
);
Expand Down
6 changes: 3 additions & 3 deletions src/components/Sidebar/SidebarSection.react.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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>
);
};
Expand Down
2 changes: 1 addition & 1 deletion src/dashboard/Apps/AppsIndex.react.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
5 changes: 4 additions & 1 deletion src/dashboard/DashboardView.react.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>);

Expand Down
4 changes: 4 additions & 0 deletions src/lib/ParseApp.js
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,8 @@ export default class ParseApp {
serverInfo,
production,
iconName,
primaryBackgroundColor,
secondaryBackgroundColor,
supportedPushLocales,
}) {
this.name = appName;
Expand All @@ -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) {
Expand Down