Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Merge pull request #839 from ONLYOFFICE/feature/pr23-calendar-changed-style

Browse source 
[themes] changed calendar style
This commit is contained in:
maxkadushkin 2021-04-25 22:20:47 +03:00 committed by GitHub
parent 6c7a22d39a 256b1f2abd
commit f5bff00038
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 73 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
apps/common/main/lib/component/Calendar.js
View file

@ -46,12 +46,11 @@ define([
'<div id="calendar" class="calendar-box">', '<div id="calendar" class="calendar-box">',
'<div class="calendar-header">', '<div class="calendar-header">',
'<div class="top-row">', '<div class="top-row">',
'<div id="prev-arrow"><button type="button"><i class="arrow-prev img-commonctrl">&nbsp;</i></button></div>', '<div id="prev-arrow"><button type="button"><i class="arrow-prev img-commonctrl"></i></button></div>',
'<div class="title"></div>', '<div class="title"></div>',
'<div id="next-arrow"><button type="button"><i class="arrow-next img-commonctrl">&nbsp;</i></button></div>', '<div id="next-arrow"><button type="button"><i class="arrow-next img-commonctrl" /></button></div>',
'</div>',
'<div class="bottom-row">',
'</div>', '</div>',
'<div class="bottom-row"></div>',
'</div>', '</div>',
'<div class="calendar-content"></div>', '<div class="calendar-content"></div>',
'</div>' '</div>'
@ -179,6 +178,7 @@ define([
year = _.isNumber(year) ? year : (me.currentDate ? me.currentDate.getFullYear() : new Date().getFullYear()); year = _.isNumber(year) ? year : (me.currentDate ? me.currentDate.getFullYear() : new Date().getFullYear());
me._state = 2; me._state = 2;
me.$el.removeClass('view-days view-months').addClass('view-years');
var firstYear = year, var firstYear = year,
lastYear = year; lastYear = year;
@ -248,6 +248,7 @@ define([
me._state = 1; me._state = 1;
me.currentDate = curDate; me.currentDate = curDate;
me.$el.removeClass('view-years view-days').addClass('view-months');
// Number of year // Number of year
me.topTitle = _.template([ me.topTitle = _.template([
@ -329,6 +330,7 @@ define([
curYear = curDate.getFullYear(); curYear = curDate.getFullYear();
me.currentDate = curDate; me.currentDate = curDate;
me.$el.removeClass('view-years view-months').addClass('view-days');
// Name month // Name month
me.topTitle = _.template([ me.topTitle = _.template([

86
apps/common/main/resources/less/calendar.less
View file

@ -6,60 +6,89 @@
box-shadow: none; box-shadow: none;
} }
.calendar-box { .calendar-box {
width: 198px; width: 212px;
height: 220px; height: 244px;
border: 1px solid @calendar-bg-color; box-shadow: 0px 2px 5px @background-scrim-ie;
box-shadow: 0px 2px 5px @background-scrim;
border-radius: 2px;
background-color: @background-normal-ie;
background-color: @background-normal;
.top-row { .top-row {
padding: 0 5px; padding: 0 5px;
} }
.btn { .btn {
background-color: transparent; background-color: transparent;
border: none; border: none;
height: 20px; height: 24px;
width: 20px; width: 24px;
margin-top: 4px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
.icon { .icon {
width: 16px; width: 16px;
height: 16px; height: 16px;
display: block; display: block;
position: relative; position: relative;
&.arrow-prev { &.arrow-prev {
background-position: -55px -96px; background-position: -38px -96px;
} }
&.arrow-next { &.arrow-next {
background-position: -52px -112px; background-position: -36px -112px;
} }
} }
&:hover { &:hover {
background-color: rgba(255,255,255,0.2); background-color: @highlight-button-hover-ie;
background-color: @highlight-button-hover;
cursor: pointer; cursor: pointer;
} }
&:active {
background-color: @highlight-button-pressed-ie;
background-color: @highlight-button-pressed;
}
} }
.calendar-header { .calendar-header {
height: 50px; height: 68px;
background-color: @calendar-bg-color; color: @text-normal-ie;
color: #FFFFFF; color: @text-normal;
padding: 8px;
padding-bottom: 0;
.top-row { .top-row {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-bottom: 8px;
} }
.bottom-row { .bottom-row {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
padding: 0; padding: 0;
height: 28px;
align-items: center;
} }
.view-years &,
.view-months & {
height: 40px;
.bottom-row {
display: none;
}
}
.title { .title {
width: 100%; width: 100%;
margin: 4px 6px 3px 6px; margin: 4px 6px 3px 6px;
text-align: center; text-align: center;
font-size: 13px; font-size: 11px;
label { label {
padding: 2px 10px 0; padding: 2px 10px 0;
display: block; display: block;
font-weight: bold; //font-weight: bold;
&:not(:last-of-type) { &:not(:last-of-type) {
margin-right: 6px; margin-right: 6px;
} }
@ -68,7 +97,8 @@
height: 100%; height: 100%;
width: 100%; width: 100%;
&:hover { &:hover {
background-color: rgba(255,255,255,0.2); background-color: @highlight-button-hover-ie;
background-color: @highlight-button-hover;
cursor: pointer; cursor: pointer;
label { label {
cursor: pointer; cursor: pointer;
@ -79,34 +109,40 @@
} }
} }
.calendar-content { .calendar-content {
padding: 0 8px;
.item { .item {
margin: 0; margin: 0;
padding: 0; padding: 0;
height: auto; height: auto;
width: auto; width: auto;
box-shadow: none; box-shadow: none;
border: 1px solid #fff;
.name-month, .name-year { .name-month, .name-year {
height: 40px; height: 49px;
width: 47px; width: 49px;
background-color: #F1F1F1; background-color: @background-normal;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
font-size: 13px; font-size: 13px;
} }
.number-day { .number-day {
height: 26px; height: 28px;
width: 26px; width: 28px;
background-color: #F1F1F1;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
&.selected { &.selected {
.number-day, .name-month, .name-year { .number-day, .name-month, .name-year {
color: #fff; color: @text-normal-pressed-ie;
background-color: #7D858C; color: @text-normal-pressed;
background-color: @highlight-button-pressed-ie;
background-color: @highlight-button-pressed;
border-radius: 2px;
} }
} }
.weekend { .weekend {
@ -118,7 +154,7 @@
&:not(.disabled):not(.selected) { &:not(.disabled):not(.selected) {
.number-day, .name-month, .name-year { .number-day, .name-month, .name-year {
&:hover { &:hover {
background-color: #D9D9D9; background-color: @highlight-button-hover;
} }
} }
} }