From 2bd5098b83d1605fce4a1025101f6aaed141282b Mon Sep 17 00:00:00 2001 From: iamkun Date: Tue, 30 Apr 2019 17:52:18 +0800 Subject: [PATCH] Chore: add theme (#15361) --- examples/components/header.vue | 27 ++++++++----------- .../components/theme-configurator/index.vue | 2 ++ .../components/theme/components-preview.vue | 2 +- examples/components/theme/theme-list.js | 16 ++++++----- examples/entry.js | 13 +++++++++ examples/i18n/theme-editor.json | 12 ++++++--- examples/pages/template/theme.tpl | 6 +++-- 7 files changed, 48 insertions(+), 30 deletions(-) diff --git a/examples/components/header.vue b/examples/components/header.vue index 0c03201c5..d75c5e6d1 100644 --- a/examples/components/header.vue +++ b/examples/components/header.vue @@ -303,7 +303,7 @@
  • - +
    • @@ -405,8 +405,7 @@ 'en-US': 'English', 'es': 'Español', 'fr-FR': 'Français' - }, - showThemeConfigurator: false + } }; }, @@ -432,18 +431,14 @@ } }, mounted() { - const host = location.hostname; - this.showThemeConfigurator = host.match('localhost') || host.match('elenet'); - if (!this.showThemeConfigurator) { - getVars() - .then(() => { - this.showThemeConfigurator = true; - ga('send', 'event', 'DocView', 'Inner'); - }) - .catch((err) => { - console.error(err); - }); - } + getVars() + .then(() => { + this.$isEle = true; + ga('send', 'event', 'DocView', 'Inner'); + }) + .catch((err) => { + console.error(err); + }); }, methods: { switchVersion(version) { diff --git a/examples/components/theme-configurator/index.vue b/examples/components/theme-configurator/index.vue index 04ed6f180..46be047f3 100644 --- a/examples/components/theme-configurator/index.vue +++ b/examples/components/theme-configurator/index.vue @@ -10,6 +10,7 @@ @select="onSelectChange" >

    Congrats, this is a success message.

    - +

    MessageBox

    diff --git a/examples/components/theme/theme-list.js b/examples/components/theme/theme-list.js index bfae039e8..7e5b8d166 100644 --- a/examples/components/theme/theme-list.js +++ b/examples/components/theme/theme-list.js @@ -1,13 +1,15 @@ -const themeList = [ +export const themeList = [ { name: 'Element', author: 'Element', theme: '{"global":{"$--color-primary":"#409EFF"},"local":{}}' - }, - { - name: 'Napos', - author: 'Element', - theme: '{"global":{"$--color-primary":"#1989FA"},"local":{}}' } ]; -export default themeList; + +export const eleThemeList = [ + { + name: 'Kiwi', + author: 'Element', + theme: '{"global":{"$--color-primary":"#1989FA","$--color-success":"#5CB87A","$--color-warning":"#E6A23C","$--color-danger":"#F56C6C","$--color-info":"#8896B3","$--font-size-small":"13px","$--font-size-base":"14px","$--font-size-medium":"16px","$--font-size-large":"22px","$--font-size-extra-large":"28px","$--font-line-height-secondary":"20px"},"local":{"$--button-primary-background-color":"$--color-primary","$--switch-font-size":"14px","$--datepicker-active-color":"$--color-primary","$--tooltip-border-color":"$--border-color-base","$--tooltip-color":"#FFFFFF","$--tooltip-padding":"10px","$--collapse-header-font-size":"14px","$--collapse-content-font-size":"14px","$--collapse-content-font-color":"$--color-text-regular","$--radio-input-background-color":"#FFFFFF","$--radio-icon-color":"$--color-warning","$--radio-button-checked-background-color":"$--color-primary","$--input-border-radius":"$--border-radius-base","$--select-input-focus-border-color":"$--color-primary","$--select-font-size":"14px","$--select-option-selected-font-color":"$--color-primary","$--select-input-font-size":"14px","$--select-option-height":"34px","$--slider-main-background-color":"$--color-primary","$--tag-font-color":"$--color-primary","$--tag-default-hover-background-color":"$--color-primary","$--message-warning-font-color":"$--color-warning","$--alert-title-font-size":"14px","$--alert-icon-size":"14px","$--alert-icon-large-size":"22px","$--alert-close-customed-font-size":"12px","$--notification-title-font-size":"16px","$--notification-content-font-size":"14px","$--menu-item-font-color":"$--color-primary"}}' + } +]; diff --git a/examples/entry.js b/examples/entry.js index 703bc57b0..4540045e3 100644 --- a/examples/entry.js +++ b/examples/entry.js @@ -25,6 +25,19 @@ Vue.component('main-header', MainHeader); Vue.component('side-nav', SideNav); Vue.component('footer-nav', FooterNav); +const globalEle = new Vue({ + data: { $isEle: false } // 是否 ele 用户 +}); + +Vue.mixin({ + computed: { + $isEle: { + get: () => (globalEle.$data.$isEle), + set: (data) => {globalEle.$data.$isEle = data;} + } + } +}); + Vue.prototype.$icon = icon; // Icon 列表页用 const router = new VueRouter({ diff --git a/examples/i18n/theme-editor.json b/examples/i18n/theme-editor.json index 168a7c034..f88232e7f 100644 --- a/examples/i18n/theme-editor.json +++ b/examples/i18n/theme-editor.json @@ -68,7 +68,8 @@ "theme-copy": "复制", "theme-edit": "编辑", "description-element": "默认主题", - "description-napos": "深色主题" + "description-napos": "深色主题", + "description-kiwi": "KIWI 主题" }, "category": { "BrandColor": "品牌颜色", @@ -195,7 +196,8 @@ "theme-copy": "Copy", "theme-edit": "Edit", "description-element": "Default theme", - "description-napos": "Dark theme" + "description-napos": "Dark theme", + "description-kiwi": "kiwi theme" }, "category": { "BrandColor": "Brand Color", @@ -276,7 +278,8 @@ "theme-copy": "Copy", "theme-edit": "Edit", "description-element": "Default theme", - "description-napos": "Dark theme" + "description-napos": "Dark theme", + "description-kiwi": "kiwi theme" }, "category": { "BrandColor": "Brand Color", @@ -357,7 +360,8 @@ "theme-copy": "Copy", "theme-edit": "Edit", "description-element": "Default theme", - "description-napos": "Dark theme" + "description-napos": "Dark theme", + "description-kiwi": "kiwi theme" }, "category": { "BrandColor": "Brand Color", diff --git a/examples/pages/template/theme.tpl b/examples/pages/template/theme.tpl index 788b9e33f..3d0ecb11a 100644 --- a/examples/pages/template/theme.tpl +++ b/examples/pages/template/theme.tpl @@ -81,7 +81,7 @@