Theme: Refine GA track & Update footer link forward to online theme roller (#16007)

examples/components/footer.vue

@@ -7,8 +7,7 @@
         <a href="https://github.com/ElemeFE/element/releases" class="footer-main-link" target="_blank">{{ langConfig.changelog }}</a>
         <a href="https://github.com/ElemeFE/element/blob/dev/FAQ.md" class="footer-main-link" target="_blank">{{ langConfig.faq }}</a>
         <a href="https://github.com/ElementUI/element-starter" class="footer-main-link" target="_blank">{{ langConfig.starter }}</a>
-        <a href="https://github.com/ElementUI/element-theme" class="footer-main-link" target="_blank">{{ langConfig.theme }}</a>
-        <a href="https://github.com/ElementUI/theme-chalk-preview" class="footer-main-link" target="_blank">{{ langConfig.preview }}</a>
+        <a :href="'/#/' + lang + '/component/custom-theme'" class="footer-main-link" target="_blank">{{ langConfig.theme }}</a>
         <a href="https://github.com/elemefe/element-react" class="footer-main-link" target="_blank">Element-React</a>
         <a href="https://github.com/ElemeFE/element-angular" class="footer-main-link" target="_blank">Element-Angular</a>
       </div>
@@ -62,7 +61,7 @@
       display: inline-block;
       vertical-align: top;
       margin-right: 110px;
-    
+
       h4 {
         font-size: 18px;
         color: #333;
@@ -86,7 +85,7 @@
     .footer-social {
       float: right;
       text-align: right;
-    
+
       .footer-social-title {
         color: #666;
         font-size: 18px;
@@ -144,13 +143,13 @@
       height: auto;
     }
   }
-  
+
   @media (max-width: 1000px) {
     .footer-social {
       display: none;
     }
   }
-  
+
   @media (max-width: 768px) {
     .footer {
       .footer-main {

examples/components/theme-configurator/index.vue

@@ -48,6 +48,7 @@ import {
 export default {
   props: {
     themeConfig: Object,
+    previewConfig: Object,
     isOfficial: Boolean,
     onUserConfigUpdate: Function
   },
@@ -155,7 +156,7 @@ export default {
       this.onAction();
     },
     onDownload() {
-      bus.$emit(ACTION_DOWNLOAD_THEME, this.userConfig);
+      bus.$emit(ACTION_DOWNLOAD_THEME, this.userConfig, this.previewConfig.name);
     },
     onAction() {
       this.onUserConfigUpdate(this.userConfig);

examples/components/theme/loader/index.vue

@@ -23,8 +23,8 @@ export default {
       this.userConfig = val;
       this.onAction();
     });
-    bus.$on(ACTION_DOWNLOAD_THEME, val => {
-      this.onDownload(val);
+    bus.$on(ACTION_DOWNLOAD_THEME, (themeConfig, themeName) => {
+      this.onDownload(themeConfig, themeName);
     });
   },
   data() {
@@ -41,7 +41,7 @@ export default {
       });
       this.lastApply = time;
     },
-    onDownload(themeConfig) {
+    onDownload(themeConfig, themeName) {
       this.triggertProgressBar(true);
       updateVars(
         Object.assign({}, themeConfig, { download: true }),
@@ -55,7 +55,7 @@ export default {
         .then(() => {
           this.triggertProgressBar(false);
         });
-      ga('send', 'event', 'ThemeConfigurator', 'Download');
+      ga('send', 'event', 'ThemeConfigurator', 'Download', themeName);
     },
     onAction() {
       this.triggertProgressBar(true);

examples/components/theme/theme-card.vue

@@ -152,7 +152,7 @@
   }
   &.is-upload:hover {
     box-shadow: none;
-  } 
+  }
 
   &:hover {
     box-shadow: 0 0 10px 0 #999;
@@ -172,10 +172,10 @@
           <span>{{getActionDisplayName('upload-theme')}}</span>
         </div>
       </div>
-      <input 
-        class="el-upload__input" 
-        type="file" 
-        ref="input"  
+      <input
+        class="el-upload__input"
+        type="file"
+        ref="input"
         @change="uploadAction"
         accept="application/json"
       />
@@ -224,8 +224,8 @@
                 <el-dropdown-menu slot="dropdown">
                   <el-dropdown-item command="rename">{{getActionDisplayName('rename-theme')}}</el-dropdown-item>
                   <el-dropdown-item command="copy">{{getActionDisplayName('copy-theme')}}</el-dropdown-item>
-                  <el-dropdown-item 
-                      command="delete" 
+                  <el-dropdown-item
+                      command="delete"
                       style="color: #F56C6C;"
                     >
                       {{getActionDisplayName('delete-theme')}}
@@ -325,7 +325,7 @@ export default {
           });
           break;
         case 'download':
-          bus.$emit(ACTION_DOWNLOAD_THEME, this.theme);
+          bus.$emit(ACTION_DOWNLOAD_THEME, this.theme, this.config.name);
           break;
         default:
           this.$emit('action', e, this.config);

examples/i18n/component.json

@@ -12,8 +12,7 @@
       "repo": "代码仓库",
       "community": "社区",
       "changelog": "更新日志",
-      "theme": "自定义主题工具",
-      "preview": "在线主题生成",
+      "theme": "在线主题生成器",
       "faq": "常见问题",
       "gitter": "在线讨论",
       "starter": "脚手架",
@@ -44,8 +43,7 @@
       "repo": "GitHub",
       "community": "Community",
       "changelog": "Changelog",
-      "theme": "Theme CLI tool",
-      "preview": "Online theme generator",
+      "theme": "Online Theme Roller",
       "faq": "FAQ",
       "gitter": "Gitter",
       "starter": "Starter kit",
@@ -76,8 +74,7 @@
       "repo": "GitHub",
       "community": "Comunidad",
       "changelog": "Lista de cambios",
-      "theme": "Generador de temas por CLI",
-      "preview": "Generador de temas en línea",
+      "theme": "Online Theme Roller",
       "faq": "FAQ",
       "gitter": "Gitter",
       "starter": "Kit de inicio",
@@ -108,8 +105,7 @@
       "repo": "GitHub",
       "community": "Communauté",
       "changelog": "Changelog",
-      "theme": "Générateur de thème (CLI)",
-      "preview": "Générateur de thème en ligne",
+      "theme": "Online Theme Roller",
       "faq": "FAQ",
       "gitter": "Gitter",
       "starter": "Kit de démarrage",

examples/index.tpl

@@ -37,6 +37,8 @@
     });
   </script><% } %>
   <% if (process.env.NODE_ENV !== 'production') { %><script>
-    var ga = function() {};
+    var ga = function() {
+      console.log(arguments)
+    };
   </script><% } %>
 </html>

examples/pages/template/theme-preview.tpl

@@ -45,6 +45,7 @@
         <theme-configurator
           :isOfficial="isOfficial"
           :themeConfig="themeConfig"
+          :previewConfig="previewConfig"
           :onUserConfigUpdate="onUserConfigUpdate"
         >
         </theme-configurator>