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 bf204ba98..2026f72ae 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 f2161c971..b1e49b61f 100644 --- a/views/admin.njk +++ b/views/admin.njk @@ -9,6 +9,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 %}