chore: generate theme (ElemeFE#14666)

* update es fr i18n

* update no need edit pages

* move var name to frontend

* add i18n

* update i18n

* fix bug

* update style

* add callback

* add shortcut

* redo undo logic

* update picker style

* update shadow style

* save config to local

* button color

* button color

* add message

* update save logic

Author: iamkun

examples/components/theme-configurator/docStyle.vue

@@ -6,29 +6,34 @@ export default {
   data() {
     return {
       docs: '', // content of docs css
-      theme: ORIGINAL_THEME
+      theme: ORIGINAL_THEME,
+      asyncCb: true
     };
   },
   methods: {
-    updateDocStyle(e) {
+    updateDocStyle(e, cb) {
       const val = e.global['$--color-primary'] || ORIGINAL_THEME;
       const oldVal = this.theme;
       const getHandler = (variable, id) => {
         return () => {
           let newStyle = this.updateStyle(this[variable], ORIGINAL_THEME, val);
           updateDomHeadStyle(id, newStyle);
+          this.asyncCb && cb();
         };
       };
       const docsHandler = getHandler('docs', 'docs-style');
       if (!this.docs) {
         const links = [].filter.call(document.querySelectorAll('link'), link => {
           return /docs\..+\.css/.test(link.href || '');
         });
-        links[0] && this.getCSSString(links[0].href, docsHandler, 'docs');
+        if (links[0]) {
+          this.getCSSString(links[0].href, docsHandler, 'docs');
+        } else {
+          this.asyncCb = false;
+        }
       } else {
         docsHandler();
       }
-
       const styles = [].slice.call(document.querySelectorAll('style'))
         .filter(style => {
           const text = style.innerText;
@@ -40,6 +45,7 @@ export default {
         style.innerText = this.updateStyle(innerText, oldVal, val);
       });
       this.theme = val;
+      !this.asyncCb && cb();
     },
     updateStyle(style, oldColor, newColor) {
       return style.replace(new RegExp(oldColor, 'ig'), newColor);

examples/components/theme-configurator/download.vue

@@ -8,6 +8,7 @@
       <el-button 
         type="primary" 
         :loading=downloading
+        style="background: #66b1ff;border-color: #66b1ff"
         @click.stop="onDownload">
         {{getActionDisplayName("download-theme")}}
       </el-button>

examples/components/theme-configurator/editor/boxShadow.vue

@@ -74,6 +74,7 @@
 .plus-button {
   position: absolute;
   left: 90%;
+  margin-top: 4px;
 }
 .colorPicker {
   margin-left: 0;

examples/components/theme-configurator/editor/color-picker/src/components/color-list.vue

@@ -10,9 +10,9 @@
         </span>
         <div class="color-list-item-label">
           {{item.info.label}} 
-        </div>
-        <div class="color-list-item-value">
-          {{item.info.value}} 
+          <div class="color-list-item-value">
+            {{item.info.value}} 
+          </div>
         </div>
       </div>
     </div>
@@ -34,6 +34,7 @@
     width: 100%;
     cursor: pointer;
     margin: 2px 0;
+    position: relative;
   }
   .color-list-item:hover {
     background: #efefef;
@@ -44,22 +45,19 @@
     margin-top: 2px;
     margin-left: 5px;
     border-radius: 100%;
-    display: inline-block;
+    display: block;
+    position: absolute;
   }
   .color-list-item-label {
-    margin-left: 15px;
+    margin-left: 35px;
     font-size: 13px;
     line-height: 24px;
     display: inline-block;
-    vertical-align: super;
-    width: 30%;
+    width: 85%;
+    overflow: hidden;
   }
   .color-list-item-value { 
-    margin-left: 15px;
-    font-size: 13px;
-    line-height: 24px;
-    display: inline-block;
-    vertical-align: super;
+    float: right;
   }
 </style>
 

examples/components/theme-configurator/index.vue

@@ -4,6 +4,7 @@
       round
       type="primary"
       size="mini"
+      style="background: #66b1ff;border-color: #66b1ff"
       @click.stop="showConfigurator"
     >{{getActionDisplayName("theme-editor")}}</el-button>
     <transition name="fade">
@@ -23,7 +24,8 @@
           </div>
           <div v-if="init && !currentConfig" class="no-config">
             <img src="../../assets/images/theme-no-config.png" alt>
-            <span>{{getActionDisplayName("no-config")}}</span>
+            <span v-if="pageCouldEdit">{{getActionDisplayName("no-config")}}</span>
+            <span v-else>{{getActionDisplayName("no-need-config")}}</span>
           </div>
           <download-area></download-area>
         </div>
@@ -100,8 +102,16 @@ import {
 } from './utils/utils.js';
 import DocStyle from './docStyle';
 import Loading from './loading';
+import Shortcut from './shortcut';
 import DownloadArea from './download';
 
+const ELEMENT_THEME_USER_CONFIG = 'ELEMENT_THEME_USER_CONFIG';
+
+const DEFAULT_USER_CONFIG = {
+  global: {},
+  local: {}
+};
+
 export default {
   components: {
     mainPanel,
@@ -117,21 +127,33 @@ export default {
         global: {},
         local: {}
       },
-      lastApply: 0
+      lastApply: 0,
+      userConfigHistory: [],
+      userConfigRedoHistory: [],
+      hasLocalConfig: false
     };
   },
-  mixins: [DocStyle, Loading],
+  mixins: [DocStyle, Loading, Shortcut],
   computed: {
     globalValue() {
       return filterGlobalValue(this.defaultConfig, this.userConfig);
+    },
+    pageCouldEdit() {
+      const noNeedEdit = ['installation', 'quickstart', 'i18n', 'custom-theme', 'transition'];
+      const lastPath = this.$route.path.split('/').slice(-1).pop();
+      return noNeedEdit.indexOf(lastPath) < 0;
     }
   },
+  mounted() {
+    this.checkLocalThemeConfig();
+  },
   methods: {
     getActionDisplayName(key) {
       return getActionDisplayName(key);
     },
     showConfigurator() {
       this.visible = !this.visible;
+      this.visible ? this.enableShortcut() : this.disableShortcut();
       bus.$emit('user-theme-config-visible', this.visible);
       window.userThemeConfigVisible = Boolean(this.visible);
       if (this.init) return;
@@ -154,25 +176,46 @@ export default {
                 this.defaultConfig = defaultConfig;
                 this.filterCurrentConfig();
                 this.init = true;
+                this.checkLocalThemeConfig();
               }
               loading.close();
             }, 300); // action after transition
           });
       });
     },
+    checkLocalThemeConfig() {
+      try {
+        if (this.hasLocalConfig) {
+          this.$message(getActionDisplayName('load-local-theme-config'));
+          this.onAction();
+          return;
+        }
+        const config = JSON.parse(localStorage.getItem(ELEMENT_THEME_USER_CONFIG));
+        if (config && config.global) {
+          this.userConfig = config;
+          this.hasLocalConfig = true;
+          this.showConfigurator();
+        }
+      } catch (e) {
+        // bad local config
+      }
+    },
     filterCurrentConfig() {
       this.currentConfig = this.defaultConfig.find((config) => {
-        return config.name === this.$route.path.split('/').pop().toLowerCase();
+        return config.name === this.$route.path.split('/').pop().toLowerCase().replace('-', '');
       });
     },
     userConfigChange(e) {
+      this.userConfigHistory.push(JSON.stringify(this.userConfig));
+      this.userConfigRedoHistory = [];
       this.$set(this.userConfig[filterConfigType(this.currentConfig.name)], e.key, e.value);
       this.onAction();
     },
     applyStyle(res, time) {
       if (time < this.lastApply) return;
-      this.updateDocs();
-      updateDomHeadStyle('chalk-style', res);
+      this.updateDocs(() => {
+        updateDomHeadStyle('chalk-style', res);
+      });
       this.lastApply = time;
     },
     onDownload() {
@@ -190,6 +233,12 @@ export default {
     onAction() {
       this.triggerComponentLoading(true);
       const time = +new Date();
+      const currentConfigString = JSON.stringify(this.userConfig);
+      if (JSON.stringify(DEFAULT_USER_CONFIG) === currentConfigString) {
+        localStorage.removeItem(ELEMENT_THEME_USER_CONFIG);
+      } else {
+        localStorage.setItem(ELEMENT_THEME_USER_CONFIG, currentConfigString);
+      }
       updateVars(this.userConfig)
         .then((res) => {
           this.applyStyle(res, time);
@@ -213,10 +262,24 @@ export default {
     triggerComponentLoading(val) {
       bus.$emit('user-theme-config-loading', val);
     },
-    updateDocs() {
+    updateDocs(cb) {
       window.userThemeConfig = JSON.parse(JSON.stringify(this.userConfig));
       bus.$emit('user-theme-config-update', this.userConfig);
-      this.updateDocStyle(this.userConfig);
+      this.updateDocStyle(this.userConfig, cb);
+    },
+    undo() {
+      if (this.userConfigHistory.length > 0) {
+        this.userConfigRedoHistory.push(JSON.stringify(this.userConfig));
+        this.userConfig = JSON.parse(this.userConfigHistory.pop());
+        this.onAction();
+      }
+    },
+    redo() {
+      if (this.userConfigRedoHistory.length > 0) {
+        this.userConfigHistory.push(JSON.stringify(this.userConfig));
+        this.userConfig = JSON.parse(this.userConfigRedoHistory.shift());
+        this.onAction();
+      }
     }
   },
   watch: {

examples/components/theme-configurator/shortcut.vue

@@ -0,0 +1,27 @@
+
+<script>
+export default {
+  data() {
+    return {
+      downloading: false
+    };
+  },
+  methods: {
+    shortcut(e) {
+      if (e.keyCode === 90 && (e.ctrlKey || e.metaKey)) {
+        if (e.shiftKey) {
+          this.redo();
+        } else {
+          this.undo();
+        }
+      }
+    },
+    enableShortcut() {
+      document.addEventListener('keydown', this.shortcut);
+    },
+    disableShortcut() {
+      document.removeEventListener('keydown', this.shortcut);
+    }
+  }
+};
+</script>

examples/components/theme-configurator/utils/utils.js

@@ -46,12 +46,14 @@ const getNameFromI18N = (name) => {
   return constant.filter(config => config.lang === lang)[0][name];
 };
 
+export const getVariableDisplayName = (key) => {
+  return getNameFromI18N('variable-name')[key] || key;
+};
+
 export const getStyleDisplayName = (config, componentName) => {
   const displayNameMap = getNameFromI18N('display-name');
-  if (config.name !== '[]') {
-    const langIndex = {'zh-CN': '0', 'es': 2, 'fr-FR': 3}[getLang()] || 1;
-    const nameArr = config.name.replace(/\[?\]?/g, '').split(',');
-    return nameArr[langIndex] || nameArr[1];
+  if (config.name) {
+    return getVariableDisplayName(config.key.replace('$--', ''));
   }
   let displayName = config.key.replace(`$--${componentName}-`, '').replace();
   Object.keys(displayNameMap).forEach((name) => {