mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-01-18 12:34:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(time-picker): light theme

Browse Source
This commit is contained in:
07akioni 2019-10-17 23:16:38 +08:00
parent 33bf154c0d
commit e8319ad865
18 changed files with 244 additions and 273 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
demo/documentation/components/collapseDemo/accordion.demo.vue
View File

@ -1,46 +0,0 @@
<template>
<div class="n-doc-section">
<div class="n-doc-section__header">
Accordion
</div>
<div
class="n-doc-section__view"
style="flex-wrap: nowrap;"
>
<!--EXAMPLE_START-->
<n-collapse
v-model="activeName"
accordion
>
<n-collapse-item
title="right"
name="1"
>
<div>good</div>
</n-collapse-item>
<div />
<NCollapseItem
title="right"
name="2"
>
<div>good</div>
</NCollapseItem>
</n-collapse>
<!--EXAMPLE_END-->
</div>
<pre class="n-doc-section__inspect">{{ JSON.stringify(activeName) }}</pre>
<n-doc-source-block>
<!--SOURCE-->
</n-doc-source-block>
</div>
</template>
<script>
export default {
data () {
return {
activeName: '1'
}
}
}
</script>

43
demo/documentation/components/collapseDemo/basicUsage.demo.vue
View File

@ -1,43 +0,0 @@
<template>
<div class="n-doc-section">
<div class="n-doc-section__header">
Basic Usage
</div>
<div
class="n-doc-section__view"
style="flex-wrap: nowrap;"
>
<!--EXAMPLE_START-->
<n-collapse v-model="activeNames">
<n-collapse-item
title="right"
name="1"
>
<div>good</div>
</n-collapse-item>
<div />
<NCollapseItem
title="right"
name="2"
>
<div>good</div>
</NCollapseItem>
</n-collapse>
<!--EXAMPLE_END-->
</div>
<pre class="n-doc-section__inspect">{{ JSON.stringify(activeNames) }}</pre>
<n-doc-source-block>
<!--SOURCE-->
</n-doc-source-block>
</div>
</template>
<script>
export default {
data () {
return {
activeNames: ['1', '1', null]
}
}
}
</script>

35
demo/documentation/components/collapseDemo/index.vue
View File

@ -1,35 +0,0 @@
<template>
<div
ref="doc"
class="n-doc"
>
<div class="n-doc-header">
<n-gradient-text :font-size="20">
Collapse / n-collapse
</n-gradient-text>
</div>
<div class="n-doc-body">
<basic-usage />
<accordion />
</div>
</div>
</template>
<script>
import basicUsage from './basicUsage.demo.vue'
import accordion from './accordion.demo.vue'
export default {
components: {
basicUsage,
accordion
},
data () {
return {
}
},
methods: {
}
}
</script>

22
demo/documentation/components/timePicker/enUS/basic.md Normal file
View File

@ -0,0 +1,22 @@
# Basic
```html
<n-time-picker
v-model="time0"
/>
<n-time-picker v-model="time1" />
```
```js
export default {
data () {
return {
time0: null,
time1: 1563937380000
}
}
}
```
```css
.n-time-picker {
margin: 0 12px 8px 0;
}
```

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

@ -0,0 +1,4 @@
# Time Picker
```demo
basic
```

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

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

4
demo/init.js
View File

@ -39,7 +39,7 @@ import nimbusIconDemo from './documentation/components/nimbusIconDemo'
import radioDemo from './documentation/components/radioDemo'
import formDemo from './documentation/components/formDemo'
import tabsDemo from './documentation/components/tabsDemo'
import timePickerDemo from './documentation/components/timePickerDemo'
import timePicker from './documentation/components/timePicker'
import confirm from './documentation/components/confirm'
import backTopDemo from './documentation/components/backTopDemo'
import dropdownDemo from './documentation/components/dropdownDemo'
@ -159,7 +159,7 @@ const routes = [
{ path: '/n-radio', component: radioDemo },
{ path: '/n-form', component: formDemo },
{ path: '/n-tabs', component: tabsDemo },
{ path: '/n-time-picker', component: timePickerDemo },
{ path: '/n-time-picker', component: timePicker },
{ path: '/n-confirm', component: confirm },
{ path: '/n-router-debug', component: routerDebug },
{ path: '/n-modal-debug', component: modalDebug },

58
packages/common/TimePicker/src/main.vue
View File

@ -1,15 +1,14 @@
<template>
<div class="n-time-picker">
<div ref="activator">
<n-input
v-model="displayTimeString"
class="n-date-picker-panel__time-input"
placeholder="Select time"
@click="handleActivatorClick"
@input="handleTimeInput"
@blur="handleTimeInputBlur"
/>
</div>
<n-input
ref="activator"
v-model="displayTimeString"
class="n-date-picker-panel__time-input"
placeholder="Select time"
@click="handleActivatorClick"
@input="handleTimeInput"
@blur="handleTimeInputBlur"
/>
<div
ref="contentContainer"
class="n-detached-content-container n-time-picker-detached-content-container"
@ -26,19 +25,22 @@
v-if="active"
v-clickoutside="handleClickOutside"
class="n-time-picker-selector"
:class="{
[`n-${synthesizedTheme}-theme`]: synthesizedTheme
}"
@mouseup="handleContentMouseUp"
>
<div class="n-time-picker__selection-wrapper">
<div class="n-time-picker-selector-time">
<div
class="n-time-picker__hour"
class="n-time-picker-selector-time-row"
>
<n-scrollbar ref="hours">
<div
v-for="hour in hours"
:key="hour"
class="n-time-picker__item"
class="n-time-picker-selector-time-row__item"
:class="{
'n-time-picker__item--active':
'n-time-picker-selector-time-row__item--active':
hour === computedHour
}"
@click="setHour(hour)"
@ -53,15 +55,15 @@
</n-scrollbar>
</div>
<div
class="n-time-picker__minute"
class="n-time-picker-selector-time-row"
>
<n-scrollbar ref="minutes">
<div
v-for="minute in minutes"
:key="minute"
class="n-time-picker__item"
class="n-time-picker-selector-time-row__item"
:class="{
'n-time-picker__item--active':
'n-time-picker-selector-time-row__item--active':
minute === computedMinute
}"
@click="setMinute(minute)"
@ -76,17 +78,17 @@
</n-scrollbar>
</div>
<div
class="n-time-picker__hour"
class="n-time-picker-selector-time-row"
>
<n-scrollbar ref="seconds">
<div
v-for="second in seconds"
:key="second"
class="n-time-picker__item"
class="n-time-picker-selector-time-row__item"
:class="{
'n-time-picker__item--active':
'n-time-picker-selector-time-row__item--active':
second === computedSecond,
'n-time-picker__item--disabled':
'n-time-picker-selector-time-row__item--disabled':
validator &&
!validator(computedHour, computedMinute, second)
}"
@ -102,7 +104,7 @@
</n-scrollbar>
</div>
</div>
<div class="n-time-picker__actions">
<div class="n-time-picker-selector__actions">
<n-button
size="tiny"
round
@ -135,6 +137,8 @@ import detachable from '../../../mixins/detachable'
import placeable from '../../../mixins/placeable'
import clickoutside from '../../../directives/clickoutside'
import zindexable from '../../../mixins/zindexable'
import withapp from '../../../mixins/withapp'
import themeable from '../../../mixins/themeable'
const DEFAULT_FORMAT = 'HH:mm:ss'
const TIME_CONST = {
@ -177,7 +181,7 @@ export default {
directives: {
clickoutside
},
mixins: [detachable, placeable, zindexable],
mixins: [detachable, placeable, zindexable, withapp, themeable],
props: {
stopSelectorBubble: {
type: Boolean,
@ -278,19 +282,19 @@ export default {
},
scrollTimer () {
if (this.$refs.hours && this.$refs.hours.$el) {
const hour = this.$refs.hours.$el.querySelector('.n-time-picker__item--active')
const hour = this.$refs.hours.$el.querySelector('.n-time-picker-selector-time-row__item--active')
if (hour) {
this.$refs.hours.$refs.scrollContainer.scrollTo(0, hour.offsetTop)
}
}
if (this.$refs.minutes && this.$refs.minutes.$el) {
const minute = this.$refs.minutes.$el.querySelector('.n-time-picker__item--active')
const minute = this.$refs.minutes.$el.querySelector('.n-time-picker-selector-time-row__item--active')
if (minute) {
this.$refs.minutes.$refs.scrollContainer.scrollTo(0, minute.offsetTop)
}
}
if (this.$refs.seconds && this.$refs.seconds.$el) {
const second = this.$refs.seconds.$el.querySelector('.n-time-picker__item--active')
const second = this.$refs.seconds.$el.querySelector('.n-time-picker-selector-time-row__item--active')
if (second) {
this.$refs.seconds.$refs.scrollContainer.scrollTo(0, second.offsetTop)
}
@ -307,7 +311,7 @@ export default {
}
},
handleClickOutside (e) {
if (!this.$refs.activator.contains(e.target)) {
if (!this.$refs.activator.$el.contains(e.target)) {
this.closeTimeSelector()
}
},

178
styles/DatePicker.scss
View File

@ -60,6 +60,9 @@
top: 0;
bottom: 0;
}
path {
fill: $--date-picker-icon-color;
}
}
}
}
@ -80,6 +83,9 @@
@include b(input) {
width: 145px;
}
@include b(time-picker) {
width: 145px;
}
}
border-bottom: 1px solid $--date-picker-divider-color;
}
@ -98,7 +104,6 @@
@include e(fast-prev, next) {
margin-right: 10px;
}
}
@include e(prev, next, fast-prev, fast-next) {
path {
@ -106,88 +111,105 @@
}
}
@include e(month-year) {
font-size: 14px;
font-weight: 700;
line-height: 17px;
flex-grow: 1;
text-align: center;
color: $--date-picker-text-color;
@include once {
font-size: 14px;
font-weight: 700;
line-height: 17px;
flex-grow: 1;
text-align: center;
}
color: $--date-picker-month-text-color;
}
}
@include b(date-picker-panel-weekdays) {
padding: 8px 24px 14px 24px;
display: flex;
justify-content: space-between;
@include once {
padding: 8px 24px 14px 24px;
display: flex;
justify-content: space-between;
}
@include e(day) {
line-height: 15px;
width: 30px;
text-align: center;
font-size: 12px;
@include once {
line-height: 15px;
width: 30px;
text-align: center;
font-size: 12px;
}
color: $--date-picker-text-color;
}
}
@include b(date-picker-panel-dates) {
padding: 8px 14px 8px 14px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
@include once {
padding: 8px 14px 8px 14px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
@include e(date) {
position: relative;
width: 24px;
height: 24px;
line-height: 24px;
text-align: center;
font-size: 12px;
margin: 8px 11px;
border-radius: 3px;
cursor: pointer;
/** oops! */
transition: background-color .2s $default-cubic-bezier, color .2s $default-cubic-bezier;
@include m(no-transition) {
transition: none!important;
@include once {
position: relative;
width: 24px;
height: 24px;
line-height: 24px;
text-align: center;
font-size: 12px;
margin: 8px 11px;
border-radius: 3px;
z-index: 0;
cursor: pointer;
transition: background-color .2s $default-cubic-bezier, color .2s $default-cubic-bezier;
@include m(no-transition) {
transition: none!important;
}
}
@include not-m(in-display-month) {
color: map-get($--date-picker-item-text-color, 'inactive');
}
// &:not(.n-date-picker-panel-dates__date--in-display-month) {
// color: rgba(233, 233, 236, 0.4);
// }
@include m(current) {
color: map-get($--date-picker-item-text-color, 'current');
&::after {
position: absolute;
top: 3px;
right: 2px;
content: "";
height: 4px;
width: 4px;
border-radius: 2px;
@include once {
position: absolute;
top: 3px;
right: 2px;
content: "";
height: 4px;
width: 4px;
border-radius: 2px;
transition: background-color .2s $default-cubic-bezier;
}
background-color: map-get($--date-picker-item-background-color, 'active');
transition: background-color .2s $default-cubic-bezier;
}
}
&.n-date-picker-panel-dates__date--in-span.n-date-picker-panel-dates__date--in-display-month:not(.n-date-picker-panel-dates__date--selected) {
&::before {
content: "";
position: absolute;
left: -11px;
right: -11px;
top: 0;
bottom: 0;
background: map-get($--date-picker-item-background-color, 'hover');
@include m(in-display-month) {
@include m(in-span) {
@include not-m(selected) {
&::before {
@include once {
content: "";
z-index: -1;
position: absolute;
left: -11px;
right: -11px;
top: 0;
bottom: 0;
}
background: map-get($--date-picker-item-background-color, 'hover');
}
}
}
transition: none;
// &::after {
// right: 13px;
// }
}
&.n-date-picker-panel-dates__date--selected.n-date-picker-panel-dates__date--in-display-month {
border-radius: 3px;
color: map-get($--date-picker-item-text-color, 'active');
background-color: map-get($--date-picker-item-background-color, 'active');
width: 24px;
margin: 8px 11px;
&::after {
background-color: map-get($--date-picker-item-sup-color, 'active');
@include m(selected) {
@include once {
border-radius: 3px;
width: 24px;
margin: 8px 11px;
}
color: map-get($--date-picker-item-text-color, 'active');
background-color: map-get($--date-picker-item-background-color, 'active');
&::after {
background-color: map-get($--date-picker-item-sup-color, 'active');
}
}
}
&:hover {
@ -196,21 +218,25 @@
}
}
@include e(divider) {
margin: 0 24px;
height: 1px;
background-color: $--date-picker-divider-color;
@include once {
margin: 0 24px;
height: 1px;
background-color: $--date-picker-divider-color;
}
}
@include b(date-picker-panel-actions) {
flex: 1;
border-top: 1px solid $--date-picker-divider-color;
height: 47px;
display: flex;
align-items: center;
justify-content: flex-end;
@include b(button) {
margin-bottom: 0;
margin-right: 12px;
@include once {
flex: 1;
height: 47px;
display: flex;
align-items: center;
justify-content: flex-end;
@include b(button) {
margin-bottom: 0;
margin-right: 12px;
}
}
border-top: 1px solid $--date-picker-divider-color;
}
}
}

95
styles/TimePicker.scss
View File

@ -1,49 +1,62 @@
@import "./mixins/mixins.scss";
@import "./themes/vars.scss";
@include b(time-picker-selector) {
background-color: rgba(97, 104, 132, 1);
box-shadow:0px 2px 20px 0px rgba(0,0,0,0.16);
font-size: 12px;
border-radius: 6px;
margin: 4px 0;
width: 180px;
overflow: hidden;
@include fade-in-scale-up-transition(time-picker);
.n-time-picker__selection-wrapper {
position: relative;
height: 244px;
border-bottom: 1px solid rgba(255, 255, 255, .07);
display: flex;
@include themes-mixin {
@include once {
@include b(time-picker) {
display: inline-block;
width: 180px;
}
}
.n-time-picker__hour, .n-time-picker__minute, .n-time-picker__second {
width: 60px;
height: 244px;
flex-direction: column;
.n-time-picker__item {
cursor: pointer;
height: 35px;
display: flex;
align-items: center;
justify-content: center;
transition: background-color .2s $default-cubic-bezier, color .2s $default-cubic-bezier;
background: transparent;
&:hover {
background-color: rgba(99,226,183,0.12);
@include b(time-picker-selector) {
@include once {
font-size: 12px;
border-radius: 6px;
margin: 4px 0;
width: 180px;
overflow: hidden;
@include fade-in-scale-up-transition(time-picker);
@include e(actions) {
padding: 10px 15px;
display: flex;
justify-content: space-around;
}
&.n-time-picker__item--active {
background-color: rgba(99,226,183,0.12);
color: rgba(99, 226, 183, 1);
}
background-color: $--time-picker-background-color;
box-shadow: $--time-picker-box-shadow;// 0px 2px 20px 0px rgba(0,0,0,0.16);
@include b(time-picker-selector-time) {
@include once {
height: 244px;
display: flex;
position: relative;
}
border-bottom: 1px solid $--time-picker-divider-color;
}
@include b(time-picker-selector-time-row) {
@include once {
width: 60px;
height: 244px;
flex-direction: column;
}
@include e(item) {
@include once {
cursor: pointer;
height: 35px;
display: flex;
align-items: center;
justify-content: center;
transition: background-color .3s $default-cubic-bezier;
background: transparent;
}
color: map-get($--time-picker-text-color, 'default');
&:hover {
background-color: $--time-picker-item-background-color;
}
@include m(active) {
background-color: $--time-picker-item-background-color;
color: map-get($--time-picker-text-color, 'active');
}
}
}
}
.n-time-picker__actions {
// margin will boom! I don't know why
padding: 10px 15px;
display: flex;
justify-content: space-around;
.n-button {
margin: 0;
}
}
}
}

2
styles/themes/dark/components/BaseSelectMenu.scss
View File

@ -6,5 +6,5 @@
) !global;
$--base-select-menu-background-color: $--n-popover-color !global;
$--base-select-menu-box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.12) !global;
$--base-select-menu-light-bar-background-color: change-color($--primary-6, $alpha: .3) !global;
$--base-select-menu-light-bar-background-color: change-color($--primary-6, $alpha: .2) !global;
}

5
styles/themes/dark/components/DatePicker.scss
View File

@ -12,10 +12,11 @@
'default': $--primary-6,
'active': $--n-dialog-color
) !global;
$--date-picker-month-text-color: $--n-text-color !global;
$--date-picker-item-background-color: (
'hover': change-color($--primary-6, $alpha: .3),
'hover': change-color($--primary-6, $alpha: .2),
'active': $--primary-6
) !global;
$--date-picker-divider-color: $--n-divider-color !global;
$--date-picker-divider-color: rgba(255, 255, 255, .08) !global;
$--date-picker-box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.12) !global;
}

10
styles/themes/dark/components/TimePicker.scss Normal file
View File

@ -0,0 +1,10 @@
@mixin setup-dark-time-picker {
$--time-picker-background-color: $--n-dialog-color !global;
$--time-picker-text-color: (
'default': $--n-secondary-text-color,
'active': $--n-primary-color
) !global;
$--time-picker-item-background-color: change-color($--n-primary-color, $alpha: .2) !global;
$--time-picker-divider-color: rgba(255, 255, 255, .08) !global;
$--time-picker-box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.12) !global;
}

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

@ -25,6 +25,7 @@
@import "components/Pagination.scss";
@import "components/GradientText.scss";
@import "components/DatePicker.scss";
@import "components/TimePicker.scss";
@mixin setup-dark-theme () {
@include setup-dark-colors();
@ -77,4 +78,5 @@
@include setup-dark-pagination;
@include setup-dark-gradient-text;
@include setup-dark-date-picker;
@include setup-dark-time-picker;
}

1
styles/themes/light/components/DatePicker.scss
View File

@ -12,6 +12,7 @@
'default': $--primary-6,
'active': white
) !global;
$--date-picker-month-text-color: $--n-text-color !global;
$--date-picker-item-background-color: (
'hover': change-color($--primary-6, $alpha: .15),
'active': $--primary-6

10
styles/themes/light/components/TimePicker.scss Normal file
View File

@ -0,0 +1,10 @@
@mixin setup-light-time-picker {
$--time-picker-background-color: $--n-dialog-color !global;
$--time-picker-text-color: (
'default': $--n-secondary-text-color,
'active': $--n-primary-color
) !global;
$--time-picker-item-background-color: change-color($--n-primary-color, $alpha: .15) !global;
$--time-picker-divider-color: $--n-divider-color !global;
$--time-picker-box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.12) !global;
}

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

@ -25,6 +25,7 @@
@import "components/Pagination.scss";
@import "components/GradientText.scss";
@import "components/DatePicker.scss";
@import "components/TimePicker.scss";
@mixin setup-light-theme () {
@include setup-light-colors();
@ -73,4 +74,5 @@
@include setup-light-pagination;
@include setup-light-gradient-text;
@include setup-light-date-picker;
@include setup-light-time-picker;
}