Chore: Theme Extension (#16686)

.eslintrc

@@ -1,6 +1,7 @@
 {
   "globals": {
-    "ga": true
+    "ga": true,
+    "chrome": true
   },
   "plugins": ["html", "json"],
   "extends": "elemefe",

build/webpack.extension.js

@@ -0,0 +1,33 @@
+const path = require('path');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const demoConfig = require('./webpack.demo');
+const webpack = require('webpack');
+const ProgressBarPlugin = require('progress-bar-webpack-plugin');
+const VueLoaderPlugin = require('vue-loader/lib/plugin');
+
+demoConfig.entry = {
+  background: path.join(process.cwd(), './examples/extension/src/background'),
+  entry: path.join(process.cwd(), './examples/extension/src/entry')
+};
+demoConfig.output = {
+  path: path.join(process.cwd(), './examples/extension/dist'),
+  filename: '[name].js'
+};
+demoConfig.plugins = [
+  new CopyWebpackPlugin([
+    { from: 'examples/extension/src/manifest.json' },
+    { from: 'examples/extension/src/icon.png' }
+  ]),
+  new VueLoaderPlugin(),
+  new ProgressBarPlugin(),
+  new webpack.LoaderOptionsPlugin({
+    vue: {
+      compilerOptions: {
+        preserveWhitespace: false
+      }
+    }
+  }),
+  new webpack.HotModuleReplacementPlugin()
+];
+demoConfig.module.rules.find(a => a.loader === 'url-loader').query = {};
+module.exports = demoConfig;

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

@@ -1,7 +1,7 @@
 <template>
   <section class="config" :key="displayName">
     <div class="config-label">
-      <el-tooltip :content="displayName">
+      <el-tooltip :content="displayName" placement="top">
         <span>{{displayKeyName}}</span>
       </el-tooltip>
     </div>

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

@@ -1,7 +1,7 @@
 <template>
   <section class="config" :key="displayName">
     <div class="config-label">
-      <el-tooltip :content="displayName">
+      <el-tooltip :content="displayName" placement="top">
         <span>{{displayKeyName}}</span>
       </el-tooltip>
       <el-button 

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

@@ -1,7 +1,7 @@
 <template>
   <section class="config" :key="displayName">
     <div class="config-label">
-      <el-tooltip :content="displayName">
+      <el-tooltip :content="displayName" placement="top">
         <span>{{displayKeyName}}</span>
       </el-tooltip>
     </div>

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

@@ -1,7 +1,7 @@
 <template>
   <section class="config" :key="displayName">
     <div class="config-label">
-      <el-tooltip :content="displayName">
+      <el-tooltip :content="displayName" placement="top">
         <span>{{displayKeyName}}</span>
       </el-tooltip>
     </div>

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

@@ -1,7 +1,7 @@
 <template>
   <section class="config" :key="displayName">
     <div class="config-label">
-      <el-tooltip :content="displayName">
+      <el-tooltip :content="displayName" placement="top">
         <span>{{displayKeyName}}</span>
       </el-tooltip>
     </div>

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

@@ -1,7 +1,7 @@
 <template>
   <section class="config" :key="displayName">
     <div class="config-label">
-      <el-tooltip :content="displayName">
+      <el-tooltip :content="displayName" placement="top">
         <span>{{displayKeyName}}</span>
       </el-tooltip>
     </div>

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

@@ -1,7 +1,7 @@
 <template>
   <section class="config" :key="displayName">
     <div class="config-label">
-      <el-tooltip :content="displayName">
+      <el-tooltip :content="displayName" placement="top">
         <span>{{displayKeyName}}</span>
       </el-tooltip>
     </div>

examples/components/theme-configurator/index.vue

@@ -102,7 +102,7 @@ export default {
             defaultConfig = res;
           })
           .catch(err => {
-            this.onError(err);
+            this.onError && this.onError(err);
           })
           .then(() => {
             setTimeout(() => {

examples/components/theme-configurator/main.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="main" ref="mainPanel">
+  <div class="editor-main" ref="mainPanel">
     <!-- <span>{{configName}}</span> -->
     <div v-for="(config, key) in configByOrder" :key="key">
       <span 
@@ -22,7 +22,7 @@
 </template>
 
 <style>
-.main {
+.editor-main {
   padding: 0 18px 15px;
   overflow-y: auto;
 }

examples/components/theme/theme-card.vue

@@ -260,7 +260,8 @@ export default {
     base: {
       type: String,
       default: ''
-    }
+    },
+    from: String
   },
   data() {
     return {
@@ -308,6 +309,10 @@ export default {
       switch (e) {
         case 'preview':
         case 'edit':
+          if (this.from) {
+            this.$emit('action', e, this.config);
+            return;
+          }
           const { name, theme } = this.config;
           savePreviewToLocal({
             type: this.type,

examples/extension/.gitignore

@@ -0,0 +1 @@
+dist

examples/extension/src/app.js

@@ -0,0 +1,18 @@
+import Vue from 'vue';
+import App from './editor/index';
+import Element from 'main/index.js';
+import 'packages/theme-chalk/src/index.scss';
+
+export default () => {
+  Vue.use(Element, { zIndex: 100000 });
+  const root = document.createElement('div');
+  document.body.appendChild(root);
+
+  window.ga = function() {
+    console.log(arguments);
+  };
+
+  new Vue({ // eslint-disable-line
+    render: h => h(App)
+  }).$mount(root);
+};

examples/extension/src/background.js

@@ -0,0 +1,6 @@
+chrome.browserAction.onClicked.addListener(tab => {
+  chrome.tabs.executeScript(tab.id, {
+    file: 'entry.js'
+  });
+})
+;

examples/extension/src/editor/editor.vue

@@ -0,0 +1,212 @@
+<template>
+  <div class="ext-panel" :class="{moving : moving}" :style="{top: `${top}px`, left: `${left}px`}" ref="editor" >
+    <img class="entrance touch-icon" src="./icon-entrance.png" v-show="!showSidebar" @click="toggleSidebar" />
+    <img class="close touch-icon" src="./icon-close.png" v-show="showSidebar" @click="toggleSidebar" />
+    <div class="editor" :style="{height: `${height}px`}" v-show="showSidebar">
+      <el-tabs v-model="activeTab" @tab-click="onTabClick">
+        <el-tab-pane label="Config" name="config">
+          <theme-configurator
+            :themeConfig="themeConfig"
+            :previewConfig="previewConfig"
+            :onUserConfigUpdate="onUserConfigUpdate"
+            from="extension"
+          ></theme-configurator>
+        </el-tab-pane>
+        <el-tab-pane label="Gallery" name="gallery">
+          <gallery 
+            ref='gallery'
+            :height="height"
+            :width="width - 7"
+            @action="onGalleryAction"
+          />
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+  </div>
+</template>
+
+<script>
+import ThemeConfigurator from '../../../components/theme-configurator';
+import themeLoader from '../../../components/theme/loader';
+import gallery from './gallery';
+import { loadUserThemeFromLocal, saveUserThemeToLocal } from './utils';
+import bus from '../../../bus.js';
+import {
+  ACTION_APPLY_THEME
+} from '../../../components/theme/constant.js';
+
+let initX;
+let initY;
+let leftX = 0;
+let topY = 25;
+export default {
+  mixins: [themeLoader],
+  components: {
+    ThemeConfigurator,
+    gallery
+  },
+  data() {
+    return {
+      showSidebar: true,
+      previewConfig: {},
+      themeConfig: {},
+      top: topY,
+      left: leftX,
+      height: window.innerHeight - 30 * 2,
+      width: 0,
+      moving: false,
+      activeTab: 'config',
+      themeName: '',
+      userTheme: []
+    };
+  },
+  mounted() {
+    const editor = this.$refs.editor;
+    this.width = editor.offsetWidth;
+    leftX = window.innerWidth - 20 - this.width;
+    this.left = leftX;
+    editor.addEventListener('mousedown', e => {
+      initX = e.clientX;
+      initY = e.clientY;
+      leftX = this.left;
+      topY = this.top;
+      document.addEventListener('mousemove', this.moveFunc);
+    });
+    document.addEventListener('mouseup', e => {
+      document.removeEventListener('mousemove', this.moveFunc);
+      setTimeout(() => {this.moving = false;}, 0);
+    });
+    // chrome.storage.local.remove('ELEMENT_THEME_USER_CONFIG');
+    loadUserThemeFromLocal()
+      .then((result) => {
+        if (result) {
+          this.activeTab = 'gallery';
+          this.userTheme = result;
+        }
+      });
+  },
+  methods: {
+    checkLocalThemeConfig() {}, // disable mixin auto loading
+    toggleSidebar() {
+      if (this.moving) return;
+      this.showSidebar = !this.showSidebar;
+      if (!this.showSidebar) {
+        const windowWidth = window.innerWidth;
+        if (this.left + this.width * 0.5 < windowWidth * 0.5) {
+          this.left = 0;
+        } else {
+          this.left = windowWidth - 50;
+        }
+      } else {
+        this.moveEditor(this.left, this.top);
+      }
+    },
+    moveFunc(e) {
+      e.preventDefault();
+      const deltaX = initX - e.clientX;
+      const deltaY = initY - e.clientY;
+      if (Math.abs(deltaX) > 5 || Math.abs(deltaY) > 5) {
+        this.moving = true;
+      }
+      this.moveEditor(leftX - deltaX, topY - deltaY);
+    },
+    moveEditor(x, y) {
+      const showSidebar = this.showSidebar;
+      let nextTop = y;
+      if (nextTop < 0) nextTop = 0;
+      const maxTop = window.innerHeight - (showSidebar ? (this.height + 5) : 50);
+      if (nextTop > maxTop) nextTop = maxTop;
+      this.top = nextTop;
+      let nextLeft = x;
+      if (nextLeft < 0) nextLeft = 0;
+      const maxLeft = window.innerWidth - (showSidebar ? (this.width + 5) : 50);
+      if (nextLeft > maxLeft) nextLeft = maxLeft;
+      this.left = nextLeft;
+    },
+    onGalleryAction(key, value) {
+      switch (key) {
+        case 'edit':
+          this.themeName = value.name;
+          this.themeConfig = JSON.parse(value.theme);
+          bus.$emit(ACTION_APPLY_THEME, this.themeConfig);
+          this.activeTab = 'config';
+          break;
+        default:
+          return;
+      }
+    },
+    onTabClick(e) {
+      if (e && e.name === 'gallery') {
+        this.$refs.gallery.init();
+      }
+    },
+    onUserConfigUpdate(userConfig) {
+      if (this.themeName) {
+        this.userTheme.forEach((config) => {
+          if (config.name === this.themeName) {
+            config.update = Date.now();
+            config.theme = JSON.stringify(userConfig);
+          }
+        });
+      } else {
+        this.themeName = `Theme-${Date.now()}`;
+        this.userTheme.push({
+          update: Date.now(),
+          name: this.themeName,
+          theme: JSON.stringify(userConfig)
+        });
+      }
+      saveUserThemeToLocal(this.userTheme);
+    }
+  }
+};
+</script>
+<style scoped>
+.ext-panel {
+  position: fixed;
+  background: transparent;
+  user-select: none;
+  z-index: 100000;
+}
+.ext-panel.moving{
+  cursor: move;
+}
+.ext-panel.moving .touch-icon{
+  cursor: move;
+}
+.ext-panel .touch-icon{
+  cursor: pointer;
+}
+.ext-panel .close {
+  position: absolute;
+  right: 0;
+  top: 0;
+  height: 20px;
+  width: 20px;
+  z-index: 100001;
+}
+.ext-panel .entrance {
+  height: 50px;
+  width: 50px;
+}
+.ext-panel .editor {
+  overflow: hidden;
+  background: #f5f7fa;
+  border: 1px solid #ebeef5;
+  border-radius: 5px;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+  margin: 5px 5px 0 0;
+  min-width: 261px;
+}
+</style>
+<style>
+.ext-panel  .editor .el-tabs__content, .ext-panel  .editor .el-tabs--top, .ext-panel  .editor .el-tab-pane {
+  height: 100%;
+}
+.ext-panel .el-tabs__nav-scroll >div {
+  transform: translateX(60px)!important;
+}
+.ext-panel .editor-main {
+  padding: 0 18px 70px;
+}
+</style>