Skip to content

Commit

Permalink
🎨 Fluent - fixes in scheduler(today button, compact header, text in h…
Browse files Browse the repository at this point in the history 
…eader and time cell, padding in appointment) (#25849)
  • Loading branch information
@andrewmakarov
andrewmakarov authored Nov 2, 2023
1 parent 8ae8cee commit ecc47c5
Show file tree
Hide file tree
Showing 4 changed files with 88 additions and 55 deletions.
2 changes: 2 additions & 0 deletions packages/devextreme/scss/widgets/base/scheduler/_index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,8 @@ $agenda-appointment-active-bg: null !default;
$agenda-appointment-text-color: null !default;
$agenda-appointment-title-font-size: null !default;

$scheduler-header-panel-table-cell-height: null !default;

// Agenda
$agenda-appointment-recurrence-icon-color: null !default;

Expand Down
6 changes: 6 additions & 0 deletions packages/devextreme/scss/widgets/fluent/scheduler/_colors.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,14 +88,20 @@ $agenda-appointment-hover-bg: $base-hover-bg !default;
$agenda-appointment-active-bg: color.change(#000, $alpha: 0.08) !default;
$agenda-appointment-text-color: $base-text-color !default;

$header-panel-cell-date: null !default;

@if $mode == "light" {
$scheduler-appointment-base-color: lighten($base-accent, 48%) !default;
$scheduler-appointment-text-color: #000 !default;
$scheduler-panel-text-color: #707070;
$header-panel-cell-date: #424242;
}

@if $mode == "dark" {
$scheduler-appointment-base-color: darken($base-accent, 48%) !default;
$scheduler-appointment-text-color: #fff !default;
$scheduler-panel-text-color: #999;
$header-panel-cell-date: #adadad;
}

$scheduler-first-month-cell-background-color: color.adjust($scheduler-appointment-base-color, $alpha: -0.85) !default;
Expand Down
112 changes: 64 additions & 48 deletions packages/devextreme/scss/widgets/fluent/scheduler/_index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,6 @@
@use "../scrollable";

$fluent-scheduler-all-day-table-cell-height: $fluent-scheduler-workspace-date-table-cell-height * 1.5;
$fluent-scheduler-collapsed-all-day-table-cell-height: $fluent-scheduler-workspace-date-table-cell-height * 0.5;

$fluent-scheduler-month-date-text-size: 14px;

Expand All @@ -62,6 +61,16 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px;

@include baseScheduler.scheduler-mixin();

.dx-scheduler-timeline .dx-scheduler-header-panel-cell {
height: auto;
}

.dx-scheduler-date-time-indicator {
&::before {
display: none;
}
}

.dx-scheduler-container {
border-radius: $fluent-scheduler-border-radius;
}
Expand Down Expand Up @@ -113,13 +122,17 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px;
border-bottom: baseScheduler.$scheduler-base-border;
text-align: right;
padding-right: $fluent-scheduler-agenda-time-panel-cell-padding;
}

.dx-scheduler-small & {
.dx-scheduler-small {
.dx-scheduler-all-day-title {
font-size: $fluent-scheduler-all-day-title-font-size * 0.8;
padding-right: 2px;
}
}

.dx-scheduler-work-space-all-day-collapsed & {
.dx-scheduler-work-space-all-day-collapsed {
.dx-scheduler-all-day-title {
height: $fluent-scheduler-collapsed-all-day-table-cell-height;
line-height: $fluent-scheduler-collapsed-all-day-table-cell-height;
}
Expand Down Expand Up @@ -155,10 +168,6 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px;
}

.dx-scheduler-date-time-indicator {
&::before {
display: none;
}

height: 2px;
}

Expand All @@ -172,7 +181,10 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px;
}

.dx-scheduler-header-panel-cell {
height: $fluent-scheduler-header-panel-table-cell-height;
font-size: $fluent-scheduler-time-panel-font-size;
padding-bottom: 2px;
padding-left: $header-panel-time-cell-padding;
padding-right: $header-panel-time-cell-padding;
text-align: left;
vertical-align: bottom;

Expand All @@ -181,18 +193,7 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px;
}

.dx-scheduler-work-space.dx-scheduler-work-space-month & {
height: $fluent-scheduler-workspace-month-header-height;
}

.dx-scheduler-work-space.dx-scheduler-timeline.dx-scheduler-timeline-week &,
.dx-scheduler-work-space.dx-scheduler-timeline.dx-scheduler-timeline-work-week & {
&:not(.dx-scheduler-header-panel-week-cell) {
height: $fluent-scheduler-workspace-month-timeline--time-height;
font-size: $fluent-scheduler-time-panel-font-size;
padding-left: $fluent-scheduler-header-panel-margin;
padding-right: $fluent-scheduler-header-panel-margin;
padding-top: 11px;
}
height: $header-panel-time-cell-height;
}

.dx-scheduler-work-space.dx-scheduler-timeline.dx-scheduler-timeline-week &,
Expand Down Expand Up @@ -239,39 +240,37 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px;
content: none;
}

.dx-scheduler-header-panel-cell-date {
&:last-child {
span {
color: $scheduler-appointment-text-color;
background-color: $scheduler-current-time-cell-color;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
width: 28px;
height: 28px;
line-height: $fluent-scheduler-header-panel-day-font-size + 16;
}
}
.dx-scheduler-header-panel-cell-date:first-child {
margin-bottom: 1px;
}

.dx-scheduler-header-panel-cell-date:last-child {
color: $base-inverted-text-color;
background-color: $scheduler-current-time-cell-color;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
width: $header-day-element-height;
height: $header-day-element-height;
margin-top: 0;
}
}

.dx-scheduler-header-panel-cell-date {
display: block;
margin: 0 $fluent-scheduler-header-panel-margin;
font-size: 14px;

.dx-scheduler-small & {
margin: 0 $fluent-scheduler-header-panel-margin * baseScheduler.$scheduler-small-size-factor;
}

&:first-child {
font-size: $fluent-scheduler-header-panel-week-font-size;
line-height: 7px;
}

&:last-child {
font-size: $fluent-scheduler-header-panel-day-font-size;
line-height: $fluent-scheduler-header-panel-day-font-size + 19;
margin-top: 4px;
margin-bottom: 4px;
margin-left: 8px;
color: $header-panel-cell-date;
}
}
}
Expand Down Expand Up @@ -306,8 +305,14 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px;
}

.dx-scheduler-work-space.dx-scheduler-work-space-month {
.dx-scheduler-header-panel-cell-date:last-child {
color: $header-panel-cell-date;
border-radius: initial;
background-color: initial;
}

.dx-scheduler-appointment-content {
padding-top: 3px;
padding: 4px 8px 0 12px;
font-size: $fluent-scheduler-appointment-month-text-size;
}

Expand All @@ -334,10 +339,20 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px;
}
}


.dx-scheduler-header-panel-current-time-cell {
.dx-scheduler-header-panel-cell-date343 {
border-radius: initial;
background-color: initial;
color: $scheduler-current-time-cell-color;
}
}

.dx-scheduler-header-panel-cell { // stylelint-disable-line no-duplicate-selectors
padding-left: $fluent-scheduler-workspace-month-cell-left-offset;

.dx-scheduler-header-panel-cell-date {
font-size: $fluent-scheduler-header-panel-week-font-size;
margin-left: $fluent-scheduler-workspace-month-cell-left-offset;
margin-left: 0;
line-height: $fluent-scheduler-workspace-month-header-height;
}
}
Expand Down Expand Up @@ -400,17 +415,17 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px;
border-top-left-radius: $fluent-scheduler-border-radius;
}

.dx-scheduler-group-flex-container .dx-scheduler-group-header {
font-weight: bold;
.dx-scheduler-group-row {
.dx-scheduler-group-header {
font-weight: 500;
}
}

.dx-scheduler-group-table,
.dx-scheduler-header-panel {
.dx-scheduler-group-row {
.dx-scheduler-group-header {
font-weight: 500;
font-size: $fluent-scheduler-group-header-font-size;
color: $scheduler-group-header-color;
text-align: left;
border-bottom: 1px solid $scheduler-base-border-color;

Expand Down Expand Up @@ -808,3 +823,4 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px;
.dx-scheduler-header-panel-empty-cell {
margin-top: 0;
}

23 changes: 16 additions & 7 deletions packages/devextreme/scss/widgets/fluent/scheduler/_sizes.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
@use "../button/colors" as *;
@use "../toolbar/sizes" as *;

// adduse

$fluent-scheduler-workspace-date-table-cell-height: null !default;
$fluent-scheduler-toolbar-item-offset: null !default;
Expand All @@ -11,7 +10,6 @@ $fluent-scheduler-header-panel-day-font-size: null !default;
$fluent-scheduler-appointment-tooltip-title-font-size: null !default;
$fluent-scheduler-appointment-tooltip-date-font-size: null !default;
$fluent-scheduler-workspace-month-cell-left-offset: null !default;
$fluent-scheduler-header-panel-table-cell-height: null !default;
$fluent-scheduler-appointment-content-padding: null !default;
$fluent-scheduler-dropdown-appointment-margin-top: null !default;
$fluent-scheduler-dropdown-button-height: null !default;
Expand Down Expand Up @@ -47,8 +45,19 @@ $fluent-scheduler-header-height: $fluent-toolbar-height + 2px !default;

$scheduler-timeline-cell-height: 50px !default;

$header-day-element-height: null !default;

$fluent-scheduler-collapsed-all-day-table-cell-height: null !default;

$header-panel-time-cell-height: 32px !default;
$header-panel-time-cell-padding: null !default;


@if $size == "default" {
$fluent-scheduler-collapsed-all-day-table-cell-height: 32px !default;
$header-panel-time-cell-padding: 12px !default;

$header-day-element-height: 26px;
$fluent-scheduler-workspace-date-table-cell-height: 38px !default;

$fluent-scheduler-toolbar-item-offset: 0 12px !default;
Expand All @@ -59,8 +68,6 @@ $scheduler-timeline-cell-height: 50px !default;
$fluent-scheduler-appointment-tooltip-date-font-size: 14px !default;
$fluent-scheduler-workspace-month-cell-left-offset: 8px !default;


$fluent-scheduler-header-panel-table-cell-height: 56px !default;
$fluent-scheduler-appointment-content-padding: 6px 8px 6px 12px !default;
$fluent-scheduler-dropdown-appointment-margin-top: 7px !default;
$fluent-scheduler-dropdown-button-height: 22px !default;
Expand All @@ -76,18 +83,20 @@ $scheduler-timeline-cell-height: 50px !default;
}

@else if $size == "compact" {
$fluent-scheduler-collapsed-all-day-table-cell-height: 24px !default;
$header-panel-time-cell-padding: 8px !default;

$header-day-element-height: 24px;
$fluent-scheduler-workspace-date-table-cell-height: 28px !default;

$fluent-scheduler-toolbar-item-offset: 0 8px !default;
$fluent-scheduler-navigator-height: 28px !default;
$fluent-scheduler-header-panel-day-font-size: 20px !default;
$fluent-scheduler-header-panel-day-font-size: 14px !default;

$fluent-scheduler-appointment-tooltip-title-font-size: 14px !default;
$fluent-scheduler-appointment-tooltip-date-font-size: 11px !default;
$fluent-scheduler-workspace-month-cell-left-offset: 4px !default;


$fluent-scheduler-header-panel-table-cell-height: 40px !default;
$fluent-scheduler-appointment-content-padding: 4px 6px 4px 8px !default;
$fluent-scheduler-dropdown-appointment-margin-top: 3px !default;
$fluent-scheduler-dropdown-button-height: 18px !default;
Expand Down

0 comments on commit ecc47c5

Please sign in to comment.