Merge pull request #307 from coralproject/external-css-file

Configure override css file
2026-07-11 20:44:42 +08:00 · 2017-02-14 13:58:05 -05:00
parent d2c9b4b7a7 ce2213549b
commit daec809d87
5 changed files with 35 additions and 2 deletions
@@ -51,6 +51,12 @@ const updateClosedMessage = (updateSettings) => (event) => {
  updateSettings({closedMessage});
 };

+const updateCustomCssUrl = (updateSettings) => (event) => {
+  console.log('updateCustomCssUrl', event.target.value);
+  const customCssUrl = event.target.value;
+  updateSettings({customCssUrl});
+};
+
 // If we are changing the measure we need to recalculate using the old amount
 // Same thing if we are just changing the amount
 const updateClosedTimeout = (updateSettings, ts, isMeasure) => (event) => {
@@ -165,7 +171,7 @@ const CommentSettings = ({fetchingSettings, title, updateSettings, settingsError
          </div>
        </div>
      </Card>
-      <Card className={`${styles.configSettingInfoBox}`}>
+      <Card className={styles.configSettingInfoBox}>
        <div className={styles.content}>
          {lang.t('configure.close-after')}
          <br />
@@ -188,6 +194,18 @@ const CommentSettings = ({fetchingSettings, title, updateSettings, settingsError
          </div>
        </div>
      </Card>
+      <Card className={styles.configSettingInfoBox}>
+        <div className={styles.content}>
+          {lang.t('configure.custom-css-url')}
+          <p>{lang.t('configure.custom-css-url-desc')}</p>
+          <br />
+          <Textfield
+            style={{width: '100%'}}
+            label={lang.t('configure.custom-css-url')}
+            value={settings.customCssUrl}
+            onChange={updateCustomCssUrl(updateSettings)} />
+        </div>
+      </Card>
    </div>
  );
 };
@@ -48,6 +48,8 @@
      "copy": "Copy to Clipboard"
    },
    "configure": {
+      "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.",
      "enable-pre-moderation": "Enable pre-moderation",
      "enable-pre-moderation-text": "Moderators must approve any comment before it is published.",
      "require-email-verification": "Require Email Verification",
@@ -157,6 +159,8 @@
      "username_flags": ""
    },
    "configure": {
+      "custom-css-url": "URL CSS a medida",
+      "custom-css-url-desc": "URL de una hoja de estilo que va a sobrescribir los estilos por defecto de Embed Stream. Puede ser interna o externa.",
      "enable-pre-moderation": "Habilitar pre-moderación",
      "enable-pre-moderation-text": "Los moderadores deben aprobar cada comentario antes de que sea publicado.",
      "require-email-verification": "Necesita confirmación de correo",
@@ -24,6 +24,10 @@ const SettingSchema = new Schema({
    type: Boolean,
    default: false
  },
+  customCssUrl: {
+    type: String,
+    default: ''
+  },
  infoBoxContent: {
    type: String,
    default: ''
@@ -1,10 +1,14 @@
 const express = require('express');
 const router = express.Router();
+const SettingsService = require('../../services/settings');

 router.use('/:embed', (req, res, next) => {
  switch (req.params.embed) {
  case 'stream':
-    return res.render('embed/stream', {});
+    return SettingsService.retrieve()
+      .then(({customCssUrl}) => {
+        return res.render('embed/stream', {customCssUrl});
+      });
  default:

    // will return a 404.
@@ -5,6 +5,9 @@
    <link rel="stylesheet" type="text/css" href="/client/embed/stream/default.css">
    <link href="https://fonts.googleapis.com/css?family=Lato|Open+Sans" rel="stylesheet">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <% if (locals.customCssUrl) { %>
+      <link href="<%= customCssUrl %>" rel="stylesheet" type="text/css">
+    <% } %>
  </head>
  <body>
    <div id="coralStream"></div>