github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

Chore: add theme (#15361)

pull/15391/head
iamkun 2019-04-30 17:52:18 +08:00 committed by hetech
parent fa18e93238
commit 2bd5098b83
7 changed files with 48 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
examples/components/header.vue
View File

@ -303,7 +303,7 @@
</li>
<li
class="nav-item"
v-if="showThemeConfigurator"
v-if="$isEle"
>
<router-link
active-class="active"
@ -373,7 +373,7 @@
<!--theme picker-->
<li class="nav-item nav-theme-switch" v-show="isComponentPage">
<theme-picker v-if="!showThemeConfigurator"></theme-picker>
<theme-picker v-if="!$isEle"></theme-picker>
</li>
</ul>
</div>
@ -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) {

2
examples/components/theme-configurator/index.vue
View File

@ -10,6 +10,7 @@
@select="onSelectChange"
></action-panel>
<main-panel
ref='configuratorMain'
v-if="defaultConfig"
:currentConfig="currentConfig"
:defaultConfig="defaultConfig"
@ -179,6 +180,7 @@ export default {
bus.$emit(ACTION_COMPONECT_SELECT, val);
this.selectedComponent = val;
this.filterCurrentConfig();
this.$refs.configuratorMain.focus();
}
},
watch: {

2
examples/components/theme/components-preview.vue
View File

@ -227,7 +227,7 @@
<div role="alert" class="demo-item el-message el-message--success el-message-fade-leave-active el-message-fade-leave-to" style="top: 0;left: 0;width: 100px; opacity: 1; position: relative;transform: none;"><i class="el-message__icon el-icon-success"></i><p class="el-message__content">Congrats, this is a success message.</p><!----></div>
<div role="alert" class="demo-item el-message el-message--warning el-message-fade-leave-active el-message-fade-leave-to" style="top: 0;left: 0;width: 100px; opacity: 1; position: relative;transform: none;"><i class="el-message__icon el-icon-warning"></i><p class="el-message__content">Warning, this is a warning message.</p><!----></div>
<div role="alert" class="demo-item el-message el-message--info el-message-fade-leave-active el-message-fade-leave-to" style="top: 0;left: 0;width: 100px; opacity: 1; position: relative;transform: none;"><i class="el-message__icon el-icon-info"></i><p class="el-message__content">This is a message.</p><!----></div>
<div role="alert" class="demo-item el-message el-message--error el-message-fade-leave-active el-message-fade-leave-to" style="top: 0;left: 0;width: 100px; opacity: 1; position: relative;transform: none;"><i class="el-message__icon el-icon-error"></i><p class="el-message__content">Oops, this is a error message.</p><!----></div>
<div role="alert" class="demo-item el-message el-message--error is-closable el-message-fade-leave-active el-message-fade-leave-to" style="top: 0;left: 0;width: 100px; opacity: 1; position: relative;transform: none;"><i class="el-message__icon el-icon-error"></i><p class="el-message__content">Oops, this is a error message.</p><i class="el-message__closeBtn el-icon-close"></i></div>
</el-row>
<h4>MessageBox</h4>
<el-row>

16
examples/components/theme/theme-list.js
View File

@ -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"}}'
}
];

13
examples/entry.js
View File

@ -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({

12
examples/i18n/theme-editor.json
View File

@ -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",

6
examples/pages/template/theme.tpl
View File

@ -81,7 +81,7 @@
</template>
<script>
import ThemeCard from '../../components/theme/theme-card.vue';
import ThemeList from '../../components/theme/theme-list.js';
import { themeList, eleThemeList } from '../../components/theme/theme-list.js';
import { saveUserThemeToLocal, loadUserThemeFromLocal } from '../../components/theme/localstorage';
import { getActionDisplayName } from '../../components/theme-configurator/utils/utils';
@ -100,7 +100,6 @@ export default {
},
data() {
return {
officialTheme: this.padEmpeyTheme(ThemeList),
userTheme: [],
maxUserTheme,
copyDialogVisible: false,
@ -114,6 +113,9 @@ export default {
};
},
computed: {
officialTheme() {
return this.padEmpeyTheme(themeList.concat(this.$isEle ? eleThemeList : []));
},
userThemeCount() {
return this.userTheme.length;
},