mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2024-12-09 04:31:35 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(loading-bar): light theme

Browse Source
This commit is contained in:
07akioni 2019-10-08 14:14:30 +08:00
parent 651a275511
commit a60ef3ce5e
15 changed files with 109 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
demo/documentation/components/loadingBar/enUS/basic.md Normal file
View File

@ -0,0 +1,32 @@
# Basic
```html
<n-button @click="handleStart">
start
</n-button>
<n-button @click="handleFinish">
finish
</n-button>
<n-button @click="handleError">
error
</n-button>
```
```js
export default {
methods: {
handleStart() {
this.$NLoadingBar.start();
},
handleFinish() {
this.$NLoadingBar.finish();
},
handleError() {
this.$NLoadingBar.error();
}
}
};
```
```css
.n-button {
margin: 0 12px 8px 0;
}
```

4
demo/documentation/components/loadingBar/enUS/index.md Normal file
View File

@ -0,0 +1,4 @@
# Loading Bar
```demo
basic
```

0
demo/documentation/components/loadingBar/index.entry Normal file
View File

0
demo/documentation/components/loadingBar/zhCN/index.md Normal file
View File

5
demo/init.js
View File

@ -58,7 +58,7 @@ import advanceTableDemos from './documentation/components/advanceTableDemos'
import transferDemo from './documentation/components/transferDemo'
import spinDemo from './documentation/components/spinDemo'
import drawerDemo from './documentation/components/drawerDemo'
import loadingBarDemo from './documentation/components/loadingBarDemo'
import loadingBar from './documentation/components/loadingBar'
import timeDemo from './documentation/components/timeDemo'
import sliderDemo from './documentation/components/sliderDemo'
import treeDemo from './documentation/components/treeDemo'
@ -174,7 +174,7 @@ const routes = [
{ path: '/n-transfer', component: transferDemo },
{ path: '/n-spin', component: spinDemo },
{ path: '/n-drawer', component: drawerDemo },
{ path: '/n-loading-bar', component: loadingBarDemo },
{ path: '/n-loading-bar', component: loadingBar },
{ path: '/n-time', component: timeDemo },
{ path: '/n-slider', component: sliderDemo },
{ path: '/n-tree', component: treeDemo },
@ -192,6 +192,7 @@ const router = new VueRouter({
})
router.beforeEach(function (to, from, next) {
Vue.prototype.$NLoadingBar.theme = to.params.theme
Vue.prototype.$NLoadingBar.start()
next()
})

3
packages/common/LoadingBar/index.js
View File

@ -1,8 +1,9 @@
/* istanbul ignore file */
import LoadingBar from './src/main.js'
import install from '../../utils/installThemeableComponent'
LoadingBar.install = function (Vue) {
Vue.prototype.$NLoadingBar = LoadingBar
install(Vue, LoadingBar, '$NLoadingBar')
LoadingBar.Vue = Vue
}

6
packages/common/LoadingBar/src/LoadingBar.vue
View File

@ -9,6 +9,9 @@
<div
v-show="!enter || status === 'starting'"
class="n-loading-bar-container"
:class="{
[`n-${theme}-theme`]: theme
}"
>
<div
ref="loadingBar"
@ -33,7 +36,8 @@ export default {
progress: 0,
status: null,
finishCallback: null,
enter: false
enter: false,
theme: null
}
},
methods: {

29
packages/common/LoadingBar/src/main.js
View File

@ -2,6 +2,7 @@ import NLoadingBar from './LoadingBar.vue'
export default {
Vue: null,
theme: null,
loadingBarInstance: null,
finishCallback () {
if (this.loadingBarInstance) {
@ -11,39 +12,35 @@ export default {
}
},
start () {
if (this.loadingBarInstance) {
this.loadingBarInstance.start()
} else {
if (!this.loadingBarInstance) {
this.loadingBarInstance = new this.Vue(NLoadingBar).$mount()
document.body.appendChild(this.loadingBarInstance.$el)
this.loadingBarInstance.start()
}
this.loadingBarInstance.theme = this.theme
this.loadingBarInstance.start()
},
error () {
if (this.loadingBarInstance) {
this.loadingBarInstance.error(this.finishCallback.bind(this))
} else {
if (!this.loadingBarInstance) {
this.loadingBarInstance = new this.Vue(NLoadingBar).$mount()
document.body.appendChild(this.loadingBarInstance.$el)
this.loadingBarInstance.error(this.finishCallback.bind(this))
}
this.loadingBarInstance.theme = this.theme
this.loadingBarInstance.error(this.finishCallback.bind(this))
},
finish () {
if (this.loadingBarInstance) {
this.loadingBarInstance.finish(this.finishCallback.bind(this))
} else {
if (!this.loadingBarInstance) {
this.loadingBarInstance = new this.Vue(NLoadingBar).$mount()
document.body.appendChild(this.loadingBarInstance.$el)
this.loadingBarInstance.finish(this.finishCallback.bind(this))
}
this.loadingBarInstance.theme = this.theme
this.loadingBarInstance.finish(this.finishCallback.bind(this))
},
update (percent) {
if (this.loadingBarInstance) {
this.loadingBarInstance.update(percent)
} else {
if (!this.loadingBarInstance) {
this.loadingBarInstance = new this.Vue(NLoadingBar).$mount()
document.body.appendChild(this.loadingBarInstance.$el)
this.loadingBarInstance.update(percent)
}
this.loadingBarInstance.theme = this.theme
this.loadingBarInstance.update(percent)
}
}

4
packages/utils/installThemeableComponent.js
View File

@ -18,7 +18,9 @@ function install (Vue, Component, name) {
return Component
}, {
apply (target, thisArg, argumentsList) {
Component.theme = getTheme(thisArg)
if (thisArg instanceof Vue) {
Component.theme = getTheme(thisArg)
}
return target.bind(thisArg)(...argumentsList)
}
})

53
styles/LoadingBar.scss
View File

@ -1,31 +1,36 @@
@import './mixins/mixins.scss';
@import './themes/vars.scss';
@include b(loading-bar-container) {
@include fade-in-transition(fade-in, .3s, .8s);
z-index: 5000;
position: fixed;
top: 0;
left: 0;
right: 0;
height: 2px;
@include b(loading-bar) {
background-color: $main-color;
width: 100%;
height: 2px;
transition: max-width 4s linear, background-color .2s linear;
max-width: 0;
@include m(starting) {
background-color: $main-color;
transition: max-width 4s linear, background-color .2s linear;
@include themes-mixin {
@include b(loading-bar-container) {
@include once {
@include fade-in-transition(fade-in, .3s, .8s);
z-index: 5800;
position: fixed;
top: 0;
left: 0;
right: 0;
height: 2px;
}
@include m(finishing) {
background-color: $main-color;
transition: max-width .2s linear, background-color .2s linear;
}
@include m(error) {
background-color: red;
transition: max-width .2s linear, background-color .2s linear;
@include b(loading-bar) {
@include once {
width: 100%;
transition: max-width 4s linear, background-color .2s linear;
max-width: 0;
}
height: $--loading-bar-height;
@include m(starting) {
background-color: map-get($map: $--loading-bar-background-color, $key: 'loading');
transition: max-width 4s linear, background-color .2s linear;
}
@include m(finishing) {
background-color: map-get($map: $--loading-bar-background-color, $key: 'loading');
transition: max-width .2s linear, background-color .2s linear;
}
@include m(error) {
background-color: map-get($map: $--loading-bar-background-color, $key: 'error');
transition: max-width .2s linear, background-color .2s linear;
}
}
}
}

40
styles/Message.scss
View File

@ -1,5 +1,4 @@
@import './mixins/mixins.scss';
@import './themes/vars.scss';
@mixin message-type-mixin ($type) {
@include m($type) {
@ -39,7 +38,6 @@
font-weight: 700;
overflow: hidden;
}
// box-shadow:0px 2px 20px 0px rgba(255,255,255,0.22);
color: $--message-text-color;
@include once {
@include e(content) {
@ -58,44 +56,6 @@
}
}
}
// &.n-message--info {
// background-color: rgba(56, 137, 197, 1);
// box-shadow:0px 2px 20px 0px rgba(56, 137, 197, 0.5);
// .n-message__icon {
// i::before {
// color: rgba(129, 202, 255, 1);
// }
// }
// }
// &.n-message--success {
// background-color: rgb(42, 148, 125);
// box-shadow:0px 2px 20px 0px rgba(42, 148, 125, .5);
// .n-message__icon {
// i::before {
// color: #63E2B7FF
// }
// }
// }
// &.n-message--error {
// background-color: rgb(208, 58, 82);
// box-shadow:0px 2px 20px 0px rgba(208, 58, 82, 0.6);
// .n-message__icon {
// i::before {
// color: #FF92A4FF
// }
// }
// }
// &.n-message--warning {
// background-color: rgba(255, 138, 0, 1);
// box-shadow:0px 2px 20px 0px rgba(255, 138, 0, 0.4);
// .n-message__icon {
// i::before {
// color: rgba(255, 255, 255, .65);
// }
// }
// }
@include once {
@include m(enter) {
opacity: 0;

7
styles/themes/dark/components/LoadingBar.scss Normal file
View File

@ -0,0 +1,7 @@
@mixin setup-dark-loading-bar {
$--loading-bar-background-color: (
"error": red,
"loading": $success-6
) !global;
$--loading-bar-height: 2px !global;
}

2
styles/themes/dark/index.scss
View File

@ -12,6 +12,7 @@
@import "components/Confirm.scss";
@import "components/Switch.scss";
@import "components/Message.scss";
@import "components/LoadingBar.scss";
@mixin setup-dark-theme () {
@include setup-dark-colors();
@ -51,4 +52,5 @@
@include setup-dark-confirm;
@include setup-dark-switch;
@include setup-dark-message;
@include setup-dark-loading-bar;
}

7
styles/themes/light/components/LoadingBar.scss Normal file
View File

@ -0,0 +1,7 @@
@mixin setup-light-loading-bar {
$--loading-bar-background-color: (
"error": $error-6,
"loading": $success-6
) !global;
$--loading-bar-height: 2px !global;
}

2
styles/themes/light/index.scss
View File

@ -12,6 +12,7 @@
@import "components/Confirm.scss";
@import "components/Switch.scss";
@import "components/Message.scss";
@import "components/LoadingBar.scss";
@mixin setup-light-theme () {
@include setup-light-colors();
@ -47,4 +48,5 @@
@include setup-light-confirm;
@include setup-light-switch;
@include setup-light-message;
@include setup-light-loading-bar;
}