diff --git a/app/assets/javascripts/admin/controllers/modals/admin-add-upload.js.es6 b/app/assets/javascripts/admin/controllers/modals/admin-add-upload.js.es6
index 56e43ccbd83..f47869d6468 100644
--- a/app/assets/javascripts/admin/controllers/modals/admin-add-upload.js.es6
+++ b/app/assets/javascripts/admin/controllers/modals/admin-add-upload.js.es6
@@ -5,6 +5,24 @@ import { popupAjaxError } from 'discourse/lib/ajax-error';
const THEME_FIELD_VARIABLE_TYPE_IDS = [2, 3, 4];
+const SCSS_VARIABLE_NAMES = [
+ // common/foundation/colors.scss
+ "primary", "secondary", "tertiary", "quaternary", "header_background",
+ "header_primary", "highlight", "danger", "success", "love",
+ // common/foundation/math.scss
+ "E", "PI", "LN2", "SQRT2",
+ // common/foundation/variables.scss
+ "small-width", "medium-width", "large-width",
+ "google", "instagram", "facebook", "cas", "twitter", "yahoo", "github",
+ "base-font-size", "base-line-height", "base-font-family",
+ "primary-low", "primary-medium",
+ "secondary-low", "secondary-medium",
+ "tertiary-low", "quaternary-low",
+ "highlight-low", "highlight-medium",
+ "danger-low", "danger-medium",
+ "success-low", "love-low",
+];
+
export default Ember.Controller.extend(ModalFunctionality, {
adminCustomizeThemesShow: Ember.inject.controller(),
@@ -19,10 +37,23 @@ export default Ember.Controller.extend(ModalFunctionality, {
disabled: Em.computed.not('enabled'),
@computed('name', 'adminCustomizeThemesShow.model.theme_fields')
- nameValid(name, themeFields) {
- return name &&
- name.match(/^[a-z_][a-z0-9_-]*$/i) &&
- !themeFields.some(tf => THEME_FIELD_VARIABLE_TYPE_IDS.includes(tf.type_id) && name === tf.name);
+ errorMessage(name, themeFields) {
+ if (name) {
+ if (!name.match(/^[a-z_][a-z0-9_-]*$/i)) {
+ return I18n.t("admin.customize.theme.variable_name_error.invalid_syntax");
+ } else if (SCSS_VARIABLE_NAMES.includes(name.toLowerCase())) {
+ return I18n.t("admin.customize.theme.variable_name_error.no_overwrite");
+ } else if (themeFields.some(tf => THEME_FIELD_VARIABLE_TYPE_IDS.includes(tf.type_id) && name === tf.name)) {
+ return I18n.t("admin.customize.theme.variable_name_error.must_be_unique");
+ }
+ }
+
+ return null;
+ },
+
+ @computed('errorMessage')
+ nameValid(errorMessage) {
+ return null === errorMessage;
},
@observes('name')
diff --git a/app/assets/javascripts/admin/templates/modal/admin-add-upload.hbs b/app/assets/javascripts/admin/templates/modal/admin-add-upload.hbs
index b93a6fc92d5..18065237a4f 100644
--- a/app/assets/javascripts/admin/templates/modal/admin-add-upload.hbs
+++ b/app/assets/javascripts/admin/templates/modal/admin-add-upload.hbs
@@ -6,9 +6,9 @@
{{input id="name" value=name}}
{{#if fileSelected}}
- {{#unless nameValid}}
- {{i18n "admin.customize.theme.variable_name_invalid"}}
- {{/unless}}
+ {{#if errorMessage}}
+ {{errorMessage}}
+ {{/if}}
{{/if}}
{{/d-modal-body}}
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index 18c2ebd0373..9bb8fc6b079 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -3141,6 +3141,10 @@ en:
upload_file_tip: "Choose an asset to upload (png, woff2, etc...)"
variable_name: "SCSS var name:"
variable_name_invalid: "Invalid variable name. Only alphanumeric allowed. Must start with a letter. Must be unique."
+ variable_name_error:
+ invalid_syntax: "Invalid variable name. Only alphanumeric allowed. Must start with a letter."
+ no_overwrite: "Invalid variable name. Must not overwrite an existing variable."
+ must_be_unique: "Invalid variable name. Must be unique."
upload: "Upload"
child_themes_check: "Theme includes other child themes"
css_html: "Custom CSS/HTML"
@@ -3891,7 +3895,7 @@ en:
label: "New:"
add: "Add"
filter: "Search (URL or External URL)"
-
+
wizard_js:
wizard:
done: "Done"