GitHub
/
ant-design
6
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

improve calendar style

pull/520/head
afc163 9 years ago
parent
5540ac7c9c
commit
077f7de4ba
5 changed files with 217 additions and 224 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      components/calendar/Constants.js
  2. 31
      components/calendar/index.jsx
  3. 2
      style/components/calendar/NoteList.less
  4. 3
      style/components/calendar/Notes.less
  5. 403
      style/components/calendar/index.less

2
components/calendar/Constants.js
View File

@ -1,3 +1,3 @@
export default {
PREFIX_CLS: 'ant-notice-calendar',
PREFIX_CLS: 'ant-full-calendar',
};

31
components/calendar/index.jsx
View File

@ -28,24 +28,19 @@ class Calendar extends Component {
monthCellRender(value, locale) {
const prefixCls = this.props.prefixCls;
const month = value.getMonth();
return <div className={`${prefixCls}-fullscreen-month`}>
<span>{locale.format.shortMonths[month]}</span>
return <div className={`${prefixCls}-month`}>
<div className={`${prefixCls}-value`}>
{locale.format.shortMonths[month]}
</div>
{this.props.monthCellRender(value)}
</div>;
}
fullscreenDateCellRender(value) {
const prefixCls = this.props.prefixCls;
return <span className={`${prefixCls}-fullscreen-date`}>
<span>{ zerofixed(value.getDayOfMonth()) }</span>
{this.props.dateCellRender(value)}
</span>;
}
dateCellRender(value) {
const prefixCls = this.props.prefixCls;
return <div style={{ position: 'relative' }}>
<span className={`${prefixCls}-date ${prefixCls}-notes-date`}>
return <div className={`${prefixCls}-date`}>
<div className={`${prefixCls}-value`}>
{zerofixed(value.getDayOfMonth())}
</span>
</div>
{this.props.dateCellRender(value)}
</div>;
}
@ -66,28 +61,26 @@ class Calendar extends Component {
const props = this.props;
const {value, mode} = this.state;
const {locale, prefixCls, style, className, fullscreen} = props;
const dateCellRender = fullscreen
? this.fullscreenDateCellRender : this.dateCellRender;
const type = (mode === 'year') ? 'month' : 'date';
return (
<div className={prefixCls + '-wrapper' + (className ? ' ' + className : '') + (fullscreen ? ' ' + prefixCls + '-wrapper-fullscreen' : '' )} style={style}>
<div className={(className ? className : '') + ' ' + (fullscreen ? prefixCls + '-fullscreen' : '' )} style={style}>
<Header
fullscreen={fullscreen}
type={type}
value={value}
locale={locale}
prefixCls={`${prefixCls}`}
prefixCls={prefixCls}
onTypeChange={this.setType.bind(this)}
onValueChange={this.setValue.bind(this)}/>
<FullCalendar
{...props}
type={type}
prefixCls={`${prefixCls}`}
prefixCls={prefixCls}
showHeader={false}
value={value}
monthCellRender={ this.monthCellRender.bind(this) }
dateCellRender={ dateCellRender.bind(this) } />
monthCellRender={this.monthCellRender.bind(this)}
dateCellRender={this.dateCellRender.bind(this)} />
</div>
);
}

2
style/components/calendar/NoteList.less
View File

@ -1,4 +1,4 @@
.@{notice-calendar-prefix-cls}-note {
.@{full-calendar-prefix-cls}-note {
&-list {
line-height: 24px;
list-style: none;

3
style/components/calendar/Notes.less
View File

@ -1,4 +1,4 @@
.@{notice-calendar-prefix-cls}-notes {
.@{full-calendar-prefix-cls}-notes {
height: 9px;
line-height: 8px;
text-align: center;
@ -33,5 +33,4 @@
height: 20px;
line-height: 20px;
}
}

403
style/components/calendar/index.less
View File

@ -1,97 +1,149 @@
@notice-calendar-prefix-cls: ant-notice-calendar;
@full-calendar-prefix-cls: ant-full-calendar;
.@{notice-calendar-prefix-cls}-wrapper {
position: relative;
list-style: none;
font-size: 12px;
text-align: left;
.@{full-calendar-prefix-cls} {
font-size: @font-size-base;
line-height: 1.5;
.@{notice-calendar-prefix-cls} {
&-month-select {
margin-left: 5px;
}
&-month-select {
margin-left: 5px;
}
&-header {
padding: 11px 16px 11px 0;
text-align: right;
&-header {
padding: 11px 16px 11px 0;
text-align: right;
.ant-select {
text-align: left;
}
.ant-select {
text-align: left;
}
.ant-radio-group {
margin-left: 8px;
text-align: left;
}
.ant-radio-group {
margin-left: 8px;
text-align: left;
}
label.ant-radio-button {
height: 22px;
line-height: 20px;
padding: 0 10px;
}
label.ant-radio-button {
height: 22px;
line-height: 20px;
padding: 0 10px;
}
}
outline: none;
border-top: 1px solid @legend-border-color;
&-date-panel {
position: relative;
outline: none;
border-top: 1px solid @legend-border-color;
&-date-panel {
position: relative;
outline: none;
}
}
&-calendar-body {
padding: 8px 8px 14px;
}
&-calendar-body {
padding: 8px 8px 14px;
}
table {
border-collapse: collapse;
max-width: 100%;
background-color: transparent;
width: 100%;
height: 246px;
}
table {
border-collapse: collapse;
max-width: 100%;
background-color: transparent;
width: 100%;
height: 246px;
}
table, td, th, td {
border: none;
}
table, td, th, td {
border: none;
}
&-calendar-table {
border-spacing: 0;
margin-bottom: 0;
&-calendar-table {
border-spacing: 0;
margin-bottom: 0;
}
&-column-header {
line-height: 18px;
padding: 0;
width: 33px;
text-align: center;
.@{full-calendar-prefix-cls}-column-header-inner {
display: block;
font-weight: normal;
}
}
&-column-header {
line-height: 18px;
padding: 0;
width: 33px;
text-align: center;
.@{notice-calendar-prefix-cls}-column-header-inner {
display: block;
font-weight: normal;
}
&-week-number-header {
.@{full-calendar-prefix-cls}-column-header-inner {
display: none;
}
}
&-week-number-header {
.@{notice-calendar-prefix-cls}-column-header-inner {
display: none;
}
&-value {
display: block;
margin: 0 auto;
color: @text-color;
border-radius: 4px;
width: 22px;
height: 22px;
padding: 0;
background: transparent;
line-height: 22px;
text-align: center;
&:hover {
background: tint(@primary-color, 90%);
cursor: pointer;
}
}
&-month-panel-cell &-value {
width: 48px;
}
&-cell {
padding: 8px 0;
&-today &-value {
background: @primary-color;
color: #fff;
}
&-disabled-cell &-value {
cursor: not-allowed;
color: #bcbcbc;
background: #f3f3f3;
border-radius: 0;
width: auto;
&:hover {
background: #f3f3f3;
}
}
&-date {
&-disabled-cell-first-of-row &-value {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
&-disabled-cell-last-of-row &-value {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
&-last-month-cell &-value,
&-next-month-btn-day &-value {
color: #ccc;
}
&-month-panel-table {
table-layout: fixed;
width: 100%;
border-collapse: separate;
}
&-month-panel-cell {
.@{full-calendar-prefix-cls}-month-panel-month {
display: block;
width: 46px;
margin: 0 auto;
color: @text-color;
border-radius: 4px;
width: 22px;
height: 22px;
border-radius: 4px 4px;
height: 36px;
padding: 0;
background: transparent;
line-height: 22px;
line-height: 36px;
text-align: center;
&:hover {
@ -99,160 +151,109 @@
cursor: pointer;
}
}
&-today .@{notice-calendar-prefix-cls}-date {
background: @primary-color;
color: #fff;
}
&-disabled-cell &-date {
cursor: not-allowed;
color: #bcbcbc;
background: #f3f3f3;
border-radius: 0;
width: auto;
&-disabled &-month-panel-month {
color: #bfbfbf;
&:hover {
background: #f3f3f3;
background: white;
cursor: not-allowed;
}
}
}
&-disabled-cell-first-of-row &-date {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
&-disabled-cell-last-of-row &-date {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
&-month-panel-selected-cell .@{full-calendar-prefix-cls}-month-panel-month {
background: @primary-color;
color: #fff;
&-last-month-cell .@{notice-calendar-prefix-cls}-date,
&-next-month-btn-day .@{notice-calendar-prefix-cls}-date {
color: #ccc;
&:hover {
background: @primary-color;
color: #fff;
}
}
&-month-panel-table {
table-layout: fixed;
width: 100%;
border-collapse: separate;
}
&-notes-wrapper {
position: absolute;
width: 100%;
left:0;
bottom: -9px;
}
&-month-panel-cell {
text-align: center;
&-fullscreen {
border-top: none;
}
.@{notice-calendar-prefix-cls}-month-panel-month {
display: block;
width: 46px;
margin: 0 auto;
color: @text-color;
border-radius: 4px 4px;
height: 36px;
padding: 0;
background: transparent;
line-height: 36px;
text-align: center;
&:hover {
background: tint(@primary-color, 90%);
cursor: pointer;
}
}
&-fullscreen &-table {
table-layout: fixed;
}
&-disabled {
.@{notice-calendar-prefix-cls}-month-panel-month {
color: #bfbfbf;
&-fullscreen &-header {
.ant-radio-group {
margin-left: 16px;
}
label.ant-radio-button {
height: 28px;
line-height: 26px;
}
}
&:hover {
background: white;
cursor: not-allowed;
}
}
}
&-fullscreen &-month,
&-fullscreen &-date {
margin: 0 4px;
display: block;
color: @text-color;
height: 116px;
padding: 4px 8px;
border-top: 2px solid #eee;
transition: background 0.3s ease;
&:hover {
background: tint(@primary-color, 90%);
cursor: pointer;
}
}
&-month-panel-selected-cell .@{notice-calendar-prefix-cls}-month-panel-month {
background: @primary-color;
color: #fff;
&-fullscreen &-column-header {
text-align: right;
padding-right: 12px;
padding-bottom: 5px;
}
&:hover {
background: @primary-color;
color: #fff;
}
}
&-fullscreen &-value {
text-align: right;
background: transparent;
width: auto;
}
&-notes-wrapper {
position: absolute;
width: 100%;
left:0;
bottom: -9px;
}
&-fullscreen &-today &-value {
color: #666;
}
&-fullscreen {
.@{notice-calendar-prefix-cls} {
border-top: none;
&-table {
table-layout: fixed;
}
&-header {
.ant-radio-group {
margin-left: 16px;
}
label.ant-radio-button {
height: 28px;
line-height: 26px;
}
}
&-fullscreen-month,
&-fullscreen-date {
margin: 0 4px;
display: block;
color: @text-color;
height: 116px;
padding:4px 8px;
text-align: right;
border-top: 2px solid #eee;
transition: background 0.3s ease;
&:hover {
background: tint(@primary-color, 90%);
cursor: pointer;
}
}
&-fullscreen &-month-panel-selected-cell &-month {
background-color: tint(@primary-color, 90%);
color: @text-color;
}
&-column-header {
text-align: right;
padding-right: 12px;
padding-bottom: 5px;
}
&-cell {
padding: 0;
}
&-month-panel-selected-cell .@{notice-calendar-prefix-cls}-fullscreen-month {
background-color: tint(@primary-color, 90%);
color: @text-color;
}
&-month-panel-selected-cell .@{notice-calendar-prefix-cls}-fullscreen-month,
&-today .@{notice-calendar-prefix-cls}-fullscreen-date {
border-top-color: @primary-color;
background-color: tint(@primary-color, 90%);
color: @primary-color;
}
&-fullscreen &-month-panel-selected-cell &-month,
&-fullscreen &-today &-date {
border-top-color: @primary-color;
background-color: tint(@primary-color, 90%);
color: @primary-color;
}
&-last-month-cell .@{notice-calendar-prefix-cls}-fullscreen-date,
&-next-month-btn-day .@{notice-calendar-prefix-cls}-fullscreen-date {
color: #ccc;
}
&-note-list-wrapper {
height: 90px;
overflow-y: auto;
}
&-notes-month {
text-align: center;
> section {
font-size: 28px;
}
}
}
&-fullscreen &-last-month-cell &-date,
&-fullscreen &-next-month-btn-day &-date {
color: #ccc;
}
&-fullscreen &-note-list-wrapper {
height: 90px;
overflow-y: auto;
}
&-fullscreen &-notes-month {
text-align: center;
> section {
font-size: 28px;
}
}
}

Write Preview
Loading…
Cancel
Save