Merge pull request #2279 from type-face/admin-ui-custom-css

apply custom CSS to admin panel

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}
           />
         </ConfigureCard>
+        <ConfigureCard title={t('configure.custom_admin_css_url')}>
+          <p>{t('configure.custom_admin_css_url_desc')}</p>
+          <input
+            className={styles.customCSSInput}
+            value={settings.customAdminCssUrl}
+            onChange={this.updateCustomAdminCssUrl}
+          />
+        </ConfigureCard>
         <Slot fill="adminTechSettings" passthrough={slotPassthrough} />
       </ConfigurePage>
     );

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
         }

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

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.'

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);

models/schema/setting.js

@@ -28,6 +28,10 @@ const Setting = new Schema(
       type: String,
       default: '',
     },
+    customAdminCssUrl: {
+      type: String,
+      default: '',
+    },
     infoBoxContent: {
       type: String,
       default: '',

test/server/graph/queries/settings.js

@@ -30,6 +30,7 @@ describe('graph.queries.settings', () => {
       questionBoxIcon
       autoCloseStream
       customCssUrl
+      customAdminCssUrl
       closedTimeout
       closedMessage
       charCountEnable

views/admin.njk

@@ -9,6 +9,9 @@
 <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
 <link href="https://code.getmdl.io/1.2.1/material.min.css" rel="stylesheet">
 <link href="{{ resolve('coral-admin/bundle.css') }}" rel="stylesheet">
+
+{# Custom CSS is included after the CSS block so that its overrides will apply #}
+{% include "partials/custom-admin-css.njk" %}
 {% endblock %}
 
 {% block js %}

views/partials/custom-admin-css.njk

@@ -0,0 +1,3 @@
+{% if customAdminCssUrl %}
+<link nonce="{{ nonce }}" href="{{ customAdminCssUrl }}" rel="stylesheet">
+{% endif %}