Skip to content

Commit

Permalink
feat(calendar): Eva 1.3 (#2120)
Browse files Browse the repository at this point in the history 
Breaking Changes:
  - `NbCalendarHeaderComponent` removed. Along with that `showHeader` property removed from following components:
    - `NbBaseCalendarComponent`
    - `NbCalendarRangeComponent`
    - `NbCalendarComponent`
    - `NbBasePicker`
    - `NbBasePickerComponent`

  - `medium` and `size-medium` css classes were removed along with `medium`/`isMedium` properties from the following classes:
    - `NbCalendarDayPickerComponent`
    - `NbCalendarMonthPickerComponent`
    - `NbCalendarYearPickerComponent`
    - `NbBaseCalendarComponent`
    - `NbCalendarWeekNumberComponent`

  - Properties `date`, `changeMode`, `isRtl` removed from `NbCalendarPageableNavigationComponent`

  - File `nb-calendar-week-number.component` renamed to `calendar-week-number.component`

  - `YEARS_IN_VIEW, YEARS_IN_ROW` constants removed. Use `NbCalendarYearModelService`s `getYearsInView` and `getRowInView` methods.

  - `NbCalendarNavigationComponent` replaced with `NbCalendarViewModeComponent`.

  - `initYears` method removed from `NbCalendarYearPickerComponent`.

  - `calendar-range-cells.ts` file split into `calendar-range-day-cell.component.ts`, `calendar-range-month-cell.component.ts` and `calendar-range-year-cell.component.ts`.

  - Following theme properties were removed:
    - `calendar-body-height`
    - `calendar-header-text-color`
    - `calendar-header-text-font-family`
    - `calendar-header-title-text-font-size`
    - `calendar-header-title-text-font-weight`
    - `calendar-header-title-text-line-height`
    - `calendar-header-sub-title-text-font-size`
    - `calendar-header-sub-title-text-font-weight`
    - `calendar-header-sub-title-text-line-height`
    - `calendar-navigation-button-width`
    - `calendar-large-body-height`
    - `calendar-cell-in-range-background-color`
    - `calendar-cell-disabled-background-color`
    - `datepicker-text-color`
    - `datepicker-arrow-size`
  • Loading branch information
@yggg
yggg authored Dec 19, 2019
1 parent 79ab083 commit 0f03fb5
Show file tree
Hide file tree
Showing 72 changed files with 1,852 additions and 1,193 deletions.
8 changes: 4 additions & 4 deletions src/app/playground-components.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -240,10 +240,10 @@ export const PLAYGROUND_COMPONENTS: ComponentLink[] = [
name: 'Calendar Start View',
},
{
path: 'calendar-without-header.component',
link: '/calendar/calendar-without-header.component',
component: 'CalendarWithoutHeaderComponent',
name: 'Calendar Without Header',
path: 'calendar-without-navigation.component',
link: '/calendar/calendar-without-navigation.component',
component: 'CalendarWithoutNavigationComponent',
name: 'Calendar Without Navigation',
},
{
path: 'calendar-week-number.component',
Expand Down
241 changes: 13 additions & 228 deletions src/framework/theme/components/calendar-kit/_calendar-kit.theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,233 +4,18 @@
* Licensed under the MIT License. See License.txt in the project root for license information.
*/

@mixin nb-calendar-kit-theme() {

nb-calendar-header {
.header {
display: flex;
flex-direction: column;

color: nb-theme(calendar-header-text-color);
font-family: nb-theme(calendar-header-text-font-family);
}

.title {
display: flex;
align-items: center;
font-size: nb-theme(calendar-header-title-text-font-size);
font-weight: nb-theme(calendar-header-title-text-font-weight);
line-height: nb-theme(calendar-header-title-text-line-height);

.nb-arrow-dropright {
margin-left: 0.5rem;
}

.nb-arrow-dropleft {
margin-right: 0.5rem;
}

&:hover {
color: nb-theme(calendar-cell-hover-background-color);
cursor: pointer;
}

&:active {
color: nb-theme(calendar-cell-active-background-color);
}
}

.sub-title {
font-size: nb-theme(calendar-header-sub-title-text-font-size);
font-weight: nb-theme(calendar-header-sub-title-text-font-weight);
line-height: nb-theme(calendar-header-sub-title-text-line-height);
}
}

nb-calendar-navigation button[nbButton] {
width: nb-theme(calendar-navigation-button-width);
}

nb-calendar-week-numbers {
background: nb-theme(calendar-weeknumber-background);
font-size: nb-theme(calendar-weeknumber-text-font-size);
font-weight: nb-theme(calendar-weeknumber-text-font-weight);
line-height: nb-theme(calendar-weeknumber-text-line-height);
border-right: nb-theme(calendar-weeknumber-divider-width) solid nb-theme(calendar-weeknumber-divider-color);
border-top: nb-theme(calendar-weeknumber-divider-width) solid nb-theme(calendar-weeknumber-divider-color);

.sign {
border-bottom: nb-theme(calendar-weeknumber-divider-width) solid nb-theme(calendar-weeknumber-divider-color);
}

&.size-medium {
.sign,
.week-cell {
height: nb-theme(calendar-day-cell-height);
}
}

&.size-large {
.sign,
.week-cell {
height: nb-theme(calendar-day-cell-large-height);
}
}

.sign,
.week-cell {
height: nb-theme(calendar-weeknumber-height);
width: nb-theme(calendar-weeknumber-width);
}


}

nb-calendar-days-names {
background: nb-theme(calendar-weekday-background);
border-top: nb-theme(calendar-weeknumber-divider-width) solid nb-theme(calendar-weeknumber-divider-color);
border-bottom: nb-theme(calendar-weeknumber-divider-width) solid nb-theme(calendar-weeknumber-divider-color);

.day {
width: nb-theme(calendar-weekday-width);
height: nb-theme(calendar-weekday-height);
color: nb-theme(calendar-weekday-text-color);
font-size: nb-theme(calendar-weekday-text-font-size);
font-weight: nb-theme(calendar-weekday-text-font-weight);
line-height: nb-theme(calendar-weekday-text-line-height);
@import './components/calendar-navigation/calendar-navigation.theme';
@import './components/calendar-picker/calendar-picker.component.theme';
@import './components/calendar-days-names/calendar-days-names.component.theme';
@import './components/calendar-week-number/calendar-week-number.component.theme';
@import './components/calendar-day-picker/calendar-day-picker.component.theme';
@import './components/calendar-cell.theme';

&.holiday {
color: nb-theme(calendar-weekday-holiday-text-color);
}
}
}

nb-calendar-day-picker {
&.medium .day-cell {
width: nb-theme(calendar-day-cell-width);
height: nb-theme(calendar-day-cell-height);
}

&.large {
.day-cell {
width: nb-theme(calendar-day-cell-large-width);
height: nb-theme(calendar-day-cell-large-height);
}
.day {
height: nb-theme(calendar-weekday-large-height);
width: nb-theme(calendar-weekday-large-width);
}
}
}

nb-calendar-month-picker {
&.medium .month-cell {
width: nb-theme(calendar-month-cell-width);
height: nb-theme(calendar-month-cell-height);
}

&.large .month-cell {
width: nb-theme(calendar-month-cell-large-width);
height: nb-theme(calendar-month-cell-large-height);
}
}

nb-calendar-year-picker {
&.medium .year-cell {
width: nb-theme(calendar-year-cell-width);
height: nb-theme(calendar-year-cell-height);
}

&.large .year-cell {
width: nb-theme(calendar-year-cell-large-width);
height: nb-theme(calendar-year-cell-large-height);
}
}

nb-calendar-day-picker .day-cell {
&.bounding-month {
color: nb-theme(calendar-cell-inactive-text-color);
}

&:not(.disabled):not(.empty):hover {
background-color: nb-theme(calendar-cell-hover-background-color);
color: nb-theme(calendar-cell-hover-text-color);
font-size: nb-theme(calendar-cell-hover-text-font-size);
font-weight: nb-theme(calendar-cell-hover-text-font-weight);
line-height: nb-theme(calendar-cell-hover-text-line-height);
}
}

nb-calendar-week-numbers .week-cell,
nb-calendar-week-numbers .sign,
nb-calendar-day-picker .day-cell,
nb-calendar-month-picker .month-cell,
nb-calendar-year-picker .year-cell {
display: flex;
align-items: center;
justify-content: center;
margin: 1px;
}

nb-calendar-week-numbers .week-cell,
nb-calendar-week-numbers .sign {
margin-left: 0;
margin-right: 0;
}

nb-calendar-day-picker .day-cell,
nb-calendar-month-picker .month-cell,
nb-calendar-year-picker .year-cell {
font-family: nb-theme(calendar-text-font-family);
font-size: nb-theme(calendar-text-font-size);
font-weight: nb-theme(calendar-text-font-weight);
line-height: nb-theme(calendar-text-line-height);

border-radius: nb-theme(calendar-border-radius);
color: nb-theme(calendar-text-color);

&:not(.empty):not(.disabled) {
cursor: pointer;
}

&.disabled {
background-color: nb-theme(calendar-cell-disabled-background-color);
color: nb-theme(calendar-cell-disabled-text-color);
}

&.today {
background-color: nb-theme(calendar-cell-today-background-color);
color: nb-theme(calendar-cell-today-text-color);
font-size: nb-theme(calendar-cell-today-text-font-size);
font-weight: nb-theme(calendar-cell-today-text-font-weight);
line-height: nb-theme(calendar-cell-today-text-line-height);
}

&.selected {
background-color: nb-theme(calendar-cell-selected-background-color);
color: nb-theme(calendar-cell-selected-text-color);
font-size: nb-theme(calendar-cell-selected-text-font-size);
font-weight: nb-theme(calendar-cell-selected-text-font-weight);
line-height: nb-theme(calendar-cell-selected-text-line-height);
}
}

nb-calendar-month-picker .month-cell,
nb-calendar-year-picker .year-cell {
&:hover, &:hover:active {
background-color: nb-theme(calendar-cell-hover-background-color);
color: nb-theme(calendar-cell-hover-text-color);
font-size: nb-theme(calendar-cell-hover-text-font-size);
font-weight: nb-theme(calendar-cell-hover-text-font-weight);
line-height: nb-theme(calendar-cell-hover-text-line-height);
}

&:active {
background-color: nb-theme(calendar-cell-active-background-color);
color: nb-theme(calendar-cell-active-text-color);
font-size: nb-theme(calendar-cell-active-text-font-size);
font-weight: nb-theme(calendar-cell-active-text-font-weight);
line-height: nb-theme(calendar-cell-active-text-line-height);
}
}
@mixin nb-calendar-kit-theme() {
@include nb-calendar-navigation-theme();
@include nb-calendar-picker-theme();
@include nb-calendar-days-names-theme();
@include nb-calendar-week-numbers-theme();
@include nb-calendar-day-picker-theme();
@include nb-calendar-cell-theme();
}
13 changes: 6 additions & 7 deletions src/framework/theme/components/calendar-kit/calendar-kit.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,31 +17,31 @@ import { NbDateService } from './services/date.service';
import { NbCalendarDayCellComponent } from './components/calendar-day-picker/calendar-day-cell.component';
import { NbCalendarDayPickerComponent } from './components/calendar-day-picker/calendar-day-picker.component';
import { NbCalendarDaysNamesComponent } from './components/calendar-days-names/calendar-days-names.component';
import { NbCalendarHeaderComponent } from './components/calendar-header/calendar-header.component';
import { NbCalendarMonthCellComponent } from './components/calendar-month-picker/calendar-month-cell.component';
import { NbCalendarMonthPickerComponent } from './components/calendar-month-picker/calendar-month-picker.component';
import { NbCalendarNavigationComponent } from './components/calendar-navigation/calendar-navigation.component';
import { NbCalendarViewModeComponent } from './components/calendar-navigation/calendar-view-mode.component';
import {
NbCalendarPageableNavigationComponent,
} from './components/calendar-navigation/calendar-pageable-navigation.component';
import { NbCalendarPickerComponent } from './components/calendar-picker/calendar-picker.component';
import { NbCalendarPickerRowComponent } from './components/calendar-picker/calendar-picker-row.component';
import { NbCalendarYearCellComponent } from './components/calendar-year-picker/calendar-year-cell.component';
import { NbCalendarYearPickerComponent } from './components/calendar-year-picker/calendar-year-picker.component';
import { NbCalendarWeekNumberComponent } from './components/calendar-week-number/nb-calendar-week-number.component';
import { NbCalendarWeekNumberComponent } from './components/calendar-week-number/calendar-week-number.component';

import { NbNativeDateService } from './services/native-date.service';
import { NbCalendarYearModelService } from './services/calendar-year-model.service';


const SERVICES = [
{ provide: NbDateService, useClass: NbNativeDateService },
DatePipe,
NbCalendarMonthModelService,
NbCalendarYearModelService,
];

const COMPONENTS = [
NbCalendarHeaderComponent,
NbCalendarNavigationComponent,
NbCalendarViewModeComponent,
NbCalendarPageableNavigationComponent,
NbCalendarDaysNamesComponent,
NbCalendarYearPickerComponent,
Expand All @@ -66,8 +66,7 @@ const COMPONENTS = [
* - `NbCalendarMonthCell`
* - `NbCalendarYearPicker`
* - `NbCalendarYearCell`
* - `NbCalendarHeader`
* - `NbCalendarNavigation`
* - `NbCalendarViewModeComponent`
* - `NbCalendarPageableNavigation`
*
* For example you can easily build full calendar:
Expand Down
Loading

0 comments on commit 0f03fb5

Please sign in to comment.