From c01beab2d700c67f30049a430a77400dc9b3a4f8 Mon Sep 17 00:00:00 2001 From: Matija Stepanic Date: Fri, 19 Feb 2021 23:08:27 +0100 Subject: [PATCH 1/5] Custom branding with custom icon, title and color --- Parse-Dashboard/app.js | 13 ++++++++++++- README.md | 6 ++++++ src/components/LoginForm/LoginForm.react.js | 4 +++- src/components/Sidebar/SidebarHeader.react.js | 7 +++++-- 4 files changed, 26 insertions(+), 4 deletions(-) diff --git a/Parse-Dashboard/app.js b/Parse-Dashboard/app.js index 2a793e5610..33c5160d48 100644 --- a/Parse-Dashboard/app.js +++ b/Parse-Dashboard/app.js @@ -171,20 +171,27 @@ module.exports = function(config, options) { if (!users || (req.user && req.user.isAuthenticated)) { return res.redirect(`${mountPath}apps`); } - let errors = req.flash('error'); if (errors && errors.length) { errors = `` } + const customBrandIcon = config.customBrandIcon; + const customBrandColorPrimary = config.customBrandColorPrimary; res.send(` + Parse Dashboard @@ -206,12 +213,16 @@ module.exports = function(config, options) { if (users && req.user && req.user.matchingUsername ) { res.append('username', req.user.matchingUsername); } + const customBrandIcon = config.customBrandIcon; + const customBrandTitle = config.customBrandTitle; res.send(` diff --git a/README.md b/README.md index 4ad256b97a..7e34a3bad4 100644 --- a/README.md +++ b/README.md @@ -235,6 +235,12 @@ Parse Dashboard supports adding an optional background color for each app, so yo } ``` +## Custom branding + +- You can set `customBrandIcon` with relative path from `iconsFolder`. This could be your custom logo which will appear on login screen and on the top of sidebar. Icon should be square (same height and width), SVG or PNG with transparent background. +- You can set `customBrandTitle` which will be visible on top of sidebar instead of `Parse Dashboard`. +- You can set `customBrandColorPrimary` which will be background color at login screen. + ## 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. diff --git a/src/components/LoginForm/LoginForm.react.js b/src/components/LoginForm/LoginForm.react.js index 6312e9ec96..4c7ea27602 100644 --- a/src/components/LoginForm/LoginForm.react.js +++ b/src/components/LoginForm/LoginForm.react.js @@ -14,9 +14,11 @@ import { verticalCenter } from 'stylesheets/base.scss'; // Class-style component, because we need refs export default class LoginForm extends React.Component { render() { + const customBrandIcon = window.CUSTOM_BRAND_ICON; return (
- + {!customBrandIcon && } + {customBrandIcon && Custom BRAND icon}
{this.props.header}
diff --git a/src/components/Sidebar/SidebarHeader.react.js b/src/components/Sidebar/SidebarHeader.react.js index 67de9c4cad..4ba07bf170 100644 --- a/src/components/Sidebar/SidebarHeader.react.js +++ b/src/components/Sidebar/SidebarHeader.react.js @@ -24,15 +24,18 @@ export default class SidebarHeader extends React.Component { }); } render() { + const customBrandIcon = window.CUSTOM_BRAND_ICON; + const customBrandTitle = window.CUSTOM_BRAND_TITLE; return (
- + {!customBrandIcon && } + {customBrandIcon && Custom BRAND icon}
- Parse Dashboard {version} + {customBrandTitle || 'Parse Dashboard'} {version}
{this.state.dashboardUser}
From c509c2d37cb6c43812ed89a0e1a91357c4ff61f4 Mon Sep 17 00:00:00 2001 From: Matija Stepanic Date: Sat, 27 Feb 2021 13:02:22 +0100 Subject: [PATCH 2/5] Review correction: customBrandTitle as img.alt and fallback to 'Brand Logo' --- src/components/LoginForm/LoginForm.react.js | 3 ++- src/components/Sidebar/SidebarHeader.react.js | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/LoginForm/LoginForm.react.js b/src/components/LoginForm/LoginForm.react.js index 4c7ea27602..e24e09aa59 100644 --- a/src/components/LoginForm/LoginForm.react.js +++ b/src/components/LoginForm/LoginForm.react.js @@ -15,10 +15,11 @@ import { verticalCenter } from 'stylesheets/base.scss'; export default class LoginForm extends React.Component { render() { const customBrandIcon = window.CUSTOM_BRAND_ICON; + const customBrandTitle = window.CUSTOM_BRAND_TITLE; return (
{!customBrandIcon && } - {customBrandIcon && Custom BRAND icon} + {customBrandIcon && {customBrandTitle}
{this.props.header}
diff --git a/src/components/Sidebar/SidebarHeader.react.js b/src/components/Sidebar/SidebarHeader.react.js index 4ba07bf170..26b1b3df62 100644 --- a/src/components/Sidebar/SidebarHeader.react.js +++ b/src/components/Sidebar/SidebarHeader.react.js @@ -30,7 +30,7 @@ export default class SidebarHeader extends React.Component {
{!customBrandIcon && } - {customBrandIcon && Custom BRAND icon} + {customBrandIcon && {customBrandTitle}
From dba20a001d6bd2966fd69640c11dcab7e81154f5 Mon Sep 17 00:00:00 2001 From: Matija Stepanic Date: Wed, 8 Sep 2021 22:52:07 +0200 Subject: [PATCH 3/5] Update README.md Co-authored-by: 404-html <45104241+404-html@users.noreply.github.com> --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 553f2d9ca5..b12ea57e53 100644 --- a/README.md +++ b/README.md @@ -241,7 +241,7 @@ Parse Dashboard supports adding an optional background color for each app, so yo ## Custom branding -- You can set `customBrandIcon` with relative path from `iconsFolder`. This could be your custom logo which will appear on login screen and on the top of sidebar. Icon should be square (same height and width), SVG or PNG with transparent background. +- You can set `customBrandIcon` with a relative path from `iconsFolder`. This could be your custom logo which will appear on the login screen and on the top of the sidebar. Icon should be square (same width and height), SVG or PNG with transparent background. - You can set `customBrandTitle` which will be visible on top of sidebar instead of `Parse Dashboard`. - You can set `customBrandColorPrimary` which will be background color at login screen. From a12883597f654dd7869335e20d0d52dcccff5e69 Mon Sep 17 00:00:00 2001 From: Matija Stepanic Date: Wed, 8 Sep 2021 22:52:34 +0200 Subject: [PATCH 4/5] Update README.md Co-authored-by: 404-html <45104241+404-html@users.noreply.github.com> --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index b12ea57e53..37f7bfa336 100644 --- a/README.md +++ b/README.md @@ -242,7 +242,7 @@ Parse Dashboard supports adding an optional background color for each app, so yo ## Custom branding - You can set `customBrandIcon` with a relative path from `iconsFolder`. This could be your custom logo which will appear on the login screen and on the top of the sidebar. Icon should be square (same width and height), SVG or PNG with transparent background. -- You can set `customBrandTitle` which will be visible on top of sidebar instead of `Parse Dashboard`. +- You can set `customBrandTitle` which will be visible on top of the sidebar instead of `Parse Dashboard`. - You can set `customBrandColorPrimary` which will be background color at login screen. ## Other Configuration Options From df8c0944006a7d4cc48b949c986c9f5de6989cc4 Mon Sep 17 00:00:00 2001 From: Matija Stepanic Date: Wed, 8 Sep 2021 22:52:48 +0200 Subject: [PATCH 5/5] Update README.md Co-authored-by: 404-html <45104241+404-html@users.noreply.github.com> --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 37f7bfa336..e3e1e89001 100644 --- a/README.md +++ b/README.md @@ -243,7 +243,7 @@ Parse Dashboard supports adding an optional background color for each app, so yo - You can set `customBrandIcon` with a relative path from `iconsFolder`. This could be your custom logo which will appear on the login screen and on the top of the sidebar. Icon should be square (same width and height), SVG or PNG with transparent background. - You can set `customBrandTitle` which will be visible on top of the sidebar instead of `Parse Dashboard`. -- You can set `customBrandColorPrimary` which will be background color at login screen. +- You can set `customBrandColorPrimary` which will be the background color at the login screen. ## Other Configuration Options