isa/gnome-shell
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style: Clean up calendar widget css

Browse Source 
- use existing button styles for the calendar items
- change visual treatment of weekends; fixes #1767
- clean up class names

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2769>
This commit is contained in:
Sam Hewitt 2023-05-17 16:24:49 -02:30 committed by Marge Bot
parent 5fff6fd05c
commit d6b0121006
3 changed files with 51 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
data/theme/gnome-shell-sass/_common.scss
View File

@ -90,6 +90,7 @@ stage {
&:selected, &:selected,
&:active { @include button(active);} &:active { @include button(active);}
&:checked { @include button(checked);} &:checked { @include button(checked);}
&.default { @include button(default);}
&.flat { &.flat {
@include button(normal, $flat:true); @include button(normal, $flat:true);
@ -99,6 +100,7 @@ stage {
&:selected, &:selected,
&:active { @include button(active, $flat:true);} &:active { @include button(active, $flat:true);}
&:checked { @include button(checked, $flat:true);} &:checked { @include button(checked, $flat:true);}
&.default { @include button(default, $flat:false);}
} }
} }

120
data/theme/gnome-shell-sass/widgets/_calendar.scss
View File

@ -48,110 +48,78 @@
@extend %heading; @extend %heading;
padding: 8px 0; padding: 8px 0;
} }
.pager-button { .pager-button {
background-color: transparent; @extend .button.flat;
padding: 0 !important;
height: 32px; height: 32px;
width: 32px; width: 32px;
margin: 2px; margin: 2px;
border-radius: $base_border_radius; border-radius: $base_border_radius;
&:hover, &:focus {background-color: $hover_bg_color;}
&:active {background-color: $active_bg_color;}
@if $is_highcontrast {
border:1px solid $hc_inset_color;
}
} }
} }
$calendar_day_size: 3em; // day style
.calendar-day {
.calendar-day-base {
text-align: center;
margin: 2px;
padding: 0 !important;
height: $calendar_day_size !important;
width: $calendar_day_size !important;
border-radius: 99px;
transition-duration: 100ms;
@extend %numeric; @extend %numeric;
@extend %smaller; @extend %smaller;
@extend .button.flat;
&:hover {background-color: $hover_bg_color;} border-radius: 99px;
&:focus { height: 3em !important;
background-color: mix($bg_color, $selected_bg_color, 80%); width: 3em !important;
color: inherit; margin: 2px;
box-shadow:inset 0 0 0 2px transparentize($selected_bg_color, 0.4); padding: 0 !important;
} font-weight: 600;
text-align: center;
&:active,&:selected { transition-duration: 100ms;
color: $active_fg_color;
background-color: $active_bg_color;
&:focus {
background-color: mix($active_bg_color, $selected_bg_color, 80%);
}
}
// day of week heading // day of week heading
&.calendar-day-heading { &.calendar-day-heading {
background-color: transparent;
color: $insensitive_fg_color; color: $insensitive_fg_color;
padding-top: $base_padding; height: 0.93em !important; // force heading to be smaller height
height: 1.1em !important; // force heading to be smaller height padding-top: $base_padding !important;
font-weight: 600; margin-bottom: 0;
@extend %smaller;
}
}
.calendar-day {
font-weight: 600;
@if $is_highcontrast {
border:1px solid $hc_inset_color;
border-radius: 9px; border-radius: 9px;
} }
}
.calendar-work-day {} &.calendar-weekday {}
.calendar-nonwork-day {color: $insensitive_fg_color;}
.calendar-other-month-day { &.calendar-weekend {
color: transparentize($fg_color, 0.5); color: $insensitive_fg_color;
&.calendar-nonwork-day { }
color: transparentize($insensitive_fg_color, 0.5);
&.calendar-other-month {
color: transparentize($insensitive_fg_color, 0.7) !important;
font-weight: normal;
}
&.calendar-today {
@extend .button.default;
}
&.calendar-day-with-events {
background-image: if($variant == 'light', url("resource:///org/gnome/shell/theme/calendar-today-light.svg"),url("resource:///org/gnome/shell/theme/calendar-today.svg"));
background-size: contain;
} }
} }
// Today // week number style
.calendar-today {
background-color: $selected_bg_color;
font-weight: 800;
color: $selected_fg_color !important;
&:hover,&:focus {
background-color:lighten($selected_bg_color, 3%);
color: inherit;
}
&:active,&:selected {
background-color: $selected_bg_color;
color: inherit;
&:hover,&:focus {
background-color:lighten($selected_bg_color, 3%);
color: inherit;
}
}
}
.calendar-day-with-events {
background-image: if($variant == 'light', url("resource:///org/gnome/shell/theme/calendar-today-light.svg"),url("resource:///org/gnome/shell/theme/calendar-today.svg"));
background-size: contain;
}
.calendar-week-number { .calendar-week-number {
@include fontsize($base_font_size - 4); @include fontsize($base_font_size - 4);
font-weight: bold; font-weight: bold;
font-feature-settings: "tnum"; font-feature-settings: "tnum";
text-align: center;
margin: 6px; margin: 6px;
padding: 0 $base_padding; padding: 0 $base_padding;
border-radius: 3px; border-radius: 3px;
background-color: transparentize($fg_color, 0.9); background-color: transparentize($fg_color, 0.9);
color: $insensitive_fg_color color: $insensitive_fg_color;
@if $is_highcontrast {
border:1px solid $hc_inset_color;
}
} }
} }

10
js/ui/calendar.js
View File

@ -519,7 +519,7 @@ var Calendar = GObject.registerClass({
// and we want, ideally, a single character for e.g. S M T W T F S // and we want, ideally, a single character for e.g. S M T W T F S
let customDayAbbrev = _getCalendarDayAbbreviation(iter.getDay()); let customDayAbbrev = _getCalendarDayAbbreviation(iter.getDay());
let label = new St.Label({ let label = new St.Label({
style_class: 'calendar-day-base calendar-day-heading', style_class: 'calendar-day calendar-day-heading',
text: customDayAbbrev, text: customDayAbbrev,
can_focus: true, can_focus: true,
}); });
@ -667,12 +667,12 @@ var Calendar = GObject.registerClass({
}); });
let hasEvents = this._eventSource.hasEvents(iter); let hasEvents = this._eventSource.hasEvents(iter);
let styleClass = 'calendar-day-base calendar-day'; let styleClass = 'calendar-day';
if (_isWorkDay(iter)) if (_isWorkDay(iter))
styleClass += ' calendar-work-day'; styleClass += ' calendar-weekday';
else else
styleClass += ' calendar-nonwork-day'; styleClass += ' calendar-weekend';
// Hack used in lieu of border-collapse - see gnome-shell.css // Hack used in lieu of border-collapse - see gnome-shell.css
if (row == 2) if (row == 2)
@ -687,7 +687,7 @@ var Calendar = GObject.registerClass({
if (sameDay(now, iter)) if (sameDay(now, iter))
styleClass += ' calendar-today'; styleClass += ' calendar-today';
else if (iter.getMonth() != this._selectedDate.getMonth()) else if (iter.getMonth() != this._selectedDate.getMonth())
styleClass += ' calendar-other-month-day'; styleClass += ' calendar-other-month';
if (hasEvents) if (hasEvents)
styleClass += ' calendar-day-with-events'; styleClass += ' calendar-day-with-events';