mirrors/element
1
0
Fork 0
mirror of https://github.com/ElemeFE/element.git synced 2025-12-19 12:04:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

Chore: add theme (#15361)

Browse Source
This commit is contained in:
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
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"}}'
}
];