IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web: Components: fix calendar combobox style

Browse Source
This commit is contained in:
Nikita Gopienko 2019-08-21 09:11:50 +03:00
parent ce1875c098
commit 764f4c2876
1 changed files with 23 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
web/ASC.Web.Components/src/components/calendar/index.js
View File

@ -31,7 +31,6 @@ const CalendarStyle = styled.div`
:
'max-width: 325px;'
}
padding: 16px 16px 16px 17px;
box-sizing: content-box;
@ -44,10 +43,7 @@ const CalendarStyle = styled.div`
}
}
.react-calendar {
border: none;
}
.react-calendar { border: none; }
.react-calendar__month-view__weekdays :nth-child(6) { color: #A3A9AE !important; }
.react-calendar__month-view__weekdays :nth-child(7) { color: #A3A9AE !important; }
@ -59,28 +55,21 @@ const CalendarStyle = styled.div`
.react-calendar__tile {
${HoverStyle}
margin-top: 10px;
background-color: none !important;
/*flex-basis: 11.2857% !important;*/
${props => props.size === 'base' ?
'margin-left: 9px;' :
'margin 10px 7px 0 7px;'
'margin-left: 9px;' :
'margin 10px 7px 0 7px;'
}
}
.react-calendar__tile:disabled {
background-color: #fff;
}
.react-calendar__tile:disabled { background-color: #fff; }
.react-calendar__tile--active {
background-color: ${props => props.color ? `${props.color} !important;` : `none !important;`}
color: #fff !important;
border-radius: 16px;
&:hover {
${HoverStyle}
color: #333;
}
&:hover { ${HoverStyle} color: #333; }
}
.react-calendar__month-view__days__day--weekend {
@ -191,14 +180,28 @@ class Calendar extends Component {
this.state.months = moment.months();
const disabled = this.props.disabled;
const dropDownSize = this.getArrayYears().length > 6 ? 200 : undefined;
const dropDownSize = this.getArrayYears().length > 6 ? 201 : undefined;
return (
<CalendarStyle color={this.props.themeColor} size={this.props.size} >
<ComboBoxStyle>
<ComboBox scaled={true} dropDownMaxHeight={200} onSelect={this.selectedMonth.bind(this)} selectedOption={this.getCurrentMonth()} options={this.getArrayMonth()} isDisabled={this.props.disabled} />
<ComboBox
scaled={true}
dropDownMaxHeight={201}
onSelect={this.selectedMonth.bind(this)}
selectedOption={this.getCurrentMonth()}
options={this.getArrayMonth()}
isDisabled={disabled}
/>
<ComboBoxDateStyle>
<ComboBox scaled={true} dropDownMaxHeight={dropDownSize} onSelect={this.selectedYear.bind(this)} selectedOption={this.getCurrentYear()} options={this.getArrayYears()} isDisabled={this.props.disabled} />
<ComboBox
scaled={true}
dropDownMaxHeight={dropDownSize}
onSelect={this.selectedYear.bind(this)}
selectedOption={this.getCurrentYear()}
options={this.getArrayYears()}
isDisabled={disabled}
/>
</ComboBoxDateStyle>
</ComboBoxStyle>
<ReactCalendar
@ -212,7 +215,7 @@ class Calendar extends Component {
tileDisabled={disabled ? ({ date }) => date.getDate() : undefined}
tileClassName={"custom-tile-calendar"}
formatShortWeekday={(value) => this.formatWeekday(language, value)}
//formatShortWeekday={(language, value) => this.formatWeekday(language, value)} // function to react-calendar v2.19.1
//formatShortWeekday={(language, value) => this.formatWeekday(language, value)} // function to react-calendar v2.19.1
/>
</CalendarStyle>
);