Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitbffa31d

Browse files
committed
feat(activator): update the default activator style
1 parent36e80d8 commitbffa31d

File tree

5 files changed

+149
-80
lines changed

5 files changed

+149
-80
lines changed

‎src/components/Picker.vue‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,7 @@
22
<divclass="md-date-range-picker"v-clickoutside="clickedApply">
33
<divclass="md-date-range-picker__activator"@click="togglePicker">
44
<slotname="input">
5-
<iclass="glyphicon glyphicon-calendar fa fa-calendar"></i>&nbsp;
6-
<span>{{ startText }} - {{ endText }}</span>
7-
<!-- <b class="caret"></b>-->
5+
<default-activator:value="`${startText} - ${endText}`"readonly />
86
</slot>
97
</div>
108
<transitionname="slide-fade"mode="out-in">
@@ -59,13 +57,15 @@
5957
importmomentfrom'moment';
6058
importCalendarfrom'./Calendar.vue';
6159
importCalendarRangesfrom'./Ranges.vue';
60+
importDefaultActivatorfrom'./widgets/activator.vue';
61+
6262
importclickoutsidefrom'../directives/clickoutside';
6363
6464
import {defaultPresets }from'../constant/index.js';
6565
6666
exportdefault {
6767
name:'v-md-date-range-picker',
68-
components: { Calendar, CalendarRanges },
68+
components: { Calendar, CalendarRanges, DefaultActivator, },
6969
directives: { clickoutside },
7070
provide () {
7171
return {
@@ -124,6 +124,16 @@ export default {
124124
type:Boolean,
125125
default:true,
126126
},
127+
// show label for the default activator (inputbox)
128+
showActivatorLabel: {
129+
type:Boolean,
130+
default:true,
131+
},
132+
// show animation bar for the default activator (inputbox)
133+
showActivatorBar: {
134+
type:Boolean,
135+
default:true,
136+
},
127137
},
128138
data () {
129139
constdata= {
Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<template>
2+
<divclass="activator-wrapper">
3+
<inputv-bind="$attrs"class="text-field":class="inputClass"type="text":value="value">
4+
<spanv-if="picker.showActivatorBar"class="bar"></span>
5+
<labelv-if="picker.showActivatorLabel">Select Date</label>
6+
</div>
7+
</template>
8+
9+
<script>
10+
exportdefault {
11+
inheritAttrs:false,
12+
inject: ['picker'],
13+
props: ['value'],
14+
computed: {
15+
inputClass () {
16+
return {
17+
'text-field__filled':this.value.trim().length>0,
18+
};
19+
},
20+
},
21+
}
22+
</script>
23+
24+
25+
<style lang="scss">
26+
@import'../../styles/components/activator.scss';
27+
</style>
Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
.md-date-range-picker__activator.activator-wrapper {
2+
position:relative;
3+
4+
.text-field {
5+
display:block;
6+
font-size:18px;
7+
padding:4px10px10px5px;
8+
width:300px;
9+
border:none;
10+
border-bottom:1pxsolid#757575;
11+
12+
&:focus {outline:none; }
13+
}
14+
15+
/* label*/
16+
label {
17+
color:#999;
18+
font-size:14px;
19+
font-weight:normal;
20+
position:absolute;
21+
pointer-events:none;
22+
left:5px;
23+
top:10px;
24+
transition:0.2seaseall;
25+
}
26+
27+
/* active state
28+
* use the class if the input value is not empty with javascript trim function
29+
* https://stackoverflow.com/questions/8639282/notempty-css-selector-is-not-working
30+
*/
31+
.text-field__filled ~label,
32+
.text-field:focus ~label {
33+
top:-20px;
34+
font-size:14px;
35+
color:#1976d2;
36+
}
37+
38+
/* bottom bars*/
39+
.bar {
40+
position:relative;
41+
display:block;
42+
width:315px;
43+
44+
&:before,
45+
&:after {
46+
content:'';
47+
height:2px;
48+
width:0;
49+
bottom:1px;
50+
position:absolute;
51+
background:#1976d2;
52+
transition:0.2seaseall;
53+
}
54+
55+
&:before {left:50%; }
56+
&:after {right:50%; }
57+
}
58+
59+
/* active state*/
60+
.text-field:focus ~.bar:before,
61+
.text-field:focus ~.bar:after {
62+
width:50%;
63+
}
64+
}

‎src/styles/components/calendar.scss‎

Lines changed: 43 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
1-
table {
1+
table.calendar-table {
22
width:100%;
33
margin:0;
44
border-spacing:0;
55
// ??? border-collapse
66
border-collapse:collapse;
7-
}
87

9-
table {
8+
// TODO add renderCalendarCell function for API to custom the calendar cell style
109
td,
1110
th {
1211
white-space:nowrap;
@@ -22,52 +21,53 @@ table {
2221
white-space:nowrap;
2322
cursor:pointer;
2423
}
25-
}
26-
td {
27-
&:hover {
28-
background-color:#eee;
29-
border-color:transparent;
30-
color:inherit;
31-
}
32-
&.today {
33-
font-weight:bold;
34-
}
35-
36-
// items between start and end
37-
&.in-range {
38-
background-color:#ebf4f8;
39-
border-color:transparent;
40-
color:#000;
41-
border-radius:0;
42-
}
4324

44-
// 选中项 (active item)
45-
// TODO 开放 API，允许用户自定义 active 的样式，如何做 ？
46-
// TODO give an API for user to custom active class
47-
&.active,
48-
&.active:hover {
49-
background-color:#357ebd;
50-
border-color:transparent;
51-
color:#fff;
25+
td {
26+
&:hover {
27+
background-color:#eee;
28+
border-color:transparent;
29+
color:inherit;
30+
}
31+
&.today {
32+
font-weight:bold;
33+
}
5234

53-
&.start-date {
54-
border-radius:4px000;
35+
// items between start and end
36+
&.in-range {
37+
background-color:#ebf4f8;
38+
border-color:transparent;
39+
color:#000;
40+
border-radius:0;
5541
}
5642

57-
&.end-date {
58-
border-radius:004px0;
43+
// 选中项 (active item)
44+
// TODO 开放 API，允许用户自定义 active 的样式，如何做 ？
45+
// TODO give an API for user to custom active class
46+
&.active,
47+
&.active:hover {
48+
background-color:#357ebd;
49+
border-color:transparent;
50+
color:#fff;
51+
52+
&.start-date {
53+
border-radius:4px000;
54+
}
55+
56+
&.end-date {
57+
border-radius:004px0;
58+
}
5959
}
60-
}
6160

62-
// Items that do not belong to the current month（不在当前月份 Calendar 的 item）
63-
// see more: https://github.com/ly525/v-md-date-range-picker/wiki/styles#dayoff
64-
&.off,
65-
&.off.in-range,
66-
&.off.start-date,
67-
&.off.end-date {
68-
background-color:#fff;
69-
border-color:transparent;
70-
color:#999;
61+
// Items that do not belong to the current month（不在当前月份 Calendar 的 item）
62+
// see more: https://github.com/ly525/v-md-date-range-picker/wiki/styles#dayoff
63+
&.off,
64+
&.off.in-range,
65+
&.off.start-date,
66+
&.off.end-date {
67+
background-color:#fff;
68+
border-color:transparent;
69+
color:#999;
70+
}
7171
}
7272
}
7373

‎src/styles/components/picker.scss‎

Lines changed: 1 addition & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@
6262
$reverse-direction:if($direction==left,right,left);
6363

6464
&.opens-arrow-pos-#{$direction} {
65-
top:35px;
65+
top:40px;
6666
@if$direction!=center {
6767
#{$direction}:10px;
6868
// 这边的 auto 做了什么？
@@ -93,40 +93,8 @@
9393
/* gs-date-range-picker-container*/
9494
.md-date-range-picker {
9595
position:relative;
96-
97-
&__activator {
98-
color:#7e848c;
99-
display:inline-block;
100-
width:100%;
101-
background:#fff;
102-
cursor:pointer;
103-
border:1pxsolid#7e848c;
104-
border-radius:5px;
105-
line-height:35px;
106-
padding:020px010px;
107-
box-sizing:border-box;
108-
}
10996
}
11097

111-
// .caret {
112-
// border: none;
113-
// height: 34px;
114-
// display: inline-block;
115-
// position: absolute;
116-
// top: 0;
117-
// right: 0;
118-
// }
119-
120-
// .caret::after {
121-
// content: "\F107";
122-
// font-family: FontAwesome;
123-
// position: absolute;
124-
// right: 10px;
125-
// top: 50%;
126-
// -webkit-transform: translateY(-50%);
127-
// transform: translateY(-50%);
128-
// }
129-
13098
$prefix-class: daterangepicker;
13199

132100
.#{$prefix-class} {

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp