From 48c5355a5b1053b71241a0fc81c9db35dd54168c Mon Sep 17 00:00:00 2001 From: Rob Ring Date: Tue, 23 Apr 2019 14:38:26 -0700 Subject: [PATCH] apply custom CSS to admin panel --- .../src/routes/Configure/components/TechSettings.js | 13 +++++++++++++ .../src/routes/Configure/containers/TechSettings.js | 1 + graph/typeDefs.graphql | 6 ++++++ locales/en.yml | 2 ++ middleware/staticTemplate.js | 10 ++++++++-- models/schema/setting.js | 4 ++++ test/server/graph/queries/settings.js | 1 + views/admin.njk | 3 +++ views/partials/custom-admin-css.njk | 3 +++ 9 files changed, 41 insertions(+), 2 deletions(-) create mode 100644 views/partials/custom-admin-css.njk diff --git a/client/coral-admin/src/routes/Configure/components/TechSettings.js b/client/coral-admin/src/routes/Configure/components/TechSettings.js index e6d9ba8af..60aab8909 100644 --- a/client/coral-admin/src/routes/Configure/components/TechSettings.js +++ b/client/coral-admin/src/routes/Configure/components/TechSettings.js @@ -14,6 +14,11 @@ class TechSettings extends React.Component { this.props.updatePending({ updater }); }; + updateCustomAdminCssUrl = event => { + const updater = { customAdminCssUrl: { $set: event.target.value } }; + this.props.updatePending({ updater }); + }; + updateDomainlist = (listName, list) => { this.props.updatePending({ updater: { @@ -50,6 +55,14 @@ class TechSettings extends React.Component { onChange={this.updateCustomCssUrl} /> + +

{t('configure.custom_admin_css_url_desc')}

+ + ); diff --git a/client/coral-admin/src/routes/Configure/containers/TechSettings.js b/client/coral-admin/src/routes/Configure/containers/TechSettings.js index 1460740ef..804f91537 100644 --- a/client/coral-admin/src/routes/Configure/containers/TechSettings.js +++ b/client/coral-admin/src/routes/Configure/containers/TechSettings.js @@ -32,6 +32,7 @@ export default compose( settings: gql` fragment TalkAdmin_TechSettings_settings on Settings { customCssUrl + customAdminCssUrl domains { whitelist } diff --git a/graph/typeDefs.graphql b/graph/typeDefs.graphql index d1f2ca5a5..d324ecb80 100644 --- a/graph/typeDefs.graphql +++ b/graph/typeDefs.graphql @@ -879,6 +879,9 @@ type Settings { # customCssUrl is the URL of the custom CSS used to display on the frontend. customCssUrl: String + # customAdminCssUrl is the URL of the custom CSS used to display on the admin panel. + customAdminCssUrl: String + # closedTimeout is the amount of seconds from the created_at timestamp that a # given asset will be considered closed. closedTimeout: Int @@ -1353,6 +1356,9 @@ input UpdateSettingsInput { # customCssUrl is the URL of the custom CSS used to display on the frontend. customCssUrl: String + # customAdminCssUrl is the URL of the custom CSS used to display on the admin panel. + customAdminCssUrl: String + # closedTimeout is the amount of seconds from the created_at timestamp that a # given asset will be considered closed. closedTimeout: Int diff --git a/locales/en.yml b/locales/en.yml index dc5653ed1..7f6a9fea4 100644 --- a/locales/en.yml +++ b/locales/en.yml @@ -124,6 +124,8 @@ en: copy_and_paste: 'Copy and paste code below into your CMS to embed your comment box in your articles' custom_css_url: 'Custom CSS URL' custom_css_url_desc: 'URL of a CSS stylesheet that will override default Embed Stream styles. Can be internal or external.' + custom_admin_css_url: 'Custom Admin Panel CSS URL' + custom_admin_css_url_desc: 'URL of a CSS stylesheet that will override default admin panel styles. Can be internal or external.' days: Days description: 'Change the comment settings on this story.' disable_commenting_desc: 'Write a message that will be displayed while commenting is deactivated.' diff --git a/middleware/staticTemplate.js b/middleware/staticTemplate.js index c49742813..915dba95c 100644 --- a/middleware/staticTemplate.js +++ b/middleware/staticTemplate.js @@ -96,12 +96,18 @@ const createResolveFactory = (() => { module.exports = async (req, res, next) => { try { - // Attach the custom css url and organization name. - const { customCssUrl, organizationName } = await SettingsService.select( + // Attach the custom css urls and organization name. + const { + customCssUrl, + customAdminCssUrl, + organizationName, + } = await SettingsService.select( 'customCssUrl', + 'customAdminCssUrl', 'organizationName' ); res.locals.customCssUrl = customCssUrl; + res.locals.customAdminCssUrl = customAdminCssUrl; res.locals.organizationName = organizationName; } catch (err) { console.warn(err); diff --git a/models/schema/setting.js b/models/schema/setting.js index d68ee7acd..a7dd9bb99 100644 --- a/models/schema/setting.js +++ b/models/schema/setting.js @@ -28,6 +28,10 @@ const Setting = new Schema( type: String, default: '', }, + customAdminCssUrl: { + type: String, + default: '', + }, infoBoxContent: { type: String, default: '', diff --git a/test/server/graph/queries/settings.js b/test/server/graph/queries/settings.js index e9d4e1403..b9ccbe63b 100644 --- a/test/server/graph/queries/settings.js +++ b/test/server/graph/queries/settings.js @@ -30,6 +30,7 @@ describe('graph.queries.settings', () => { questionBoxIcon autoCloseStream customCssUrl + customAdminCssUrl closedTimeout closedMessage charCountEnable diff --git a/views/admin.njk b/views/admin.njk index 1b60f6e76..4b184ab5c 100644 --- a/views/admin.njk +++ b/views/admin.njk @@ -6,6 +6,9 @@ + +{# Custom CSS is included after the CSS block so that its overrides will apply #} +{% include "partials/custom-admin-css.njk" %} {% endblock %} {% block js %} diff --git a/views/partials/custom-admin-css.njk b/views/partials/custom-admin-css.njk new file mode 100644 index 000000000..3f5ec1e85 --- /dev/null +++ b/views/partials/custom-admin-css.njk @@ -0,0 +1,3 @@ +{% if customAdminCssUrl %} + +{% endif %}