From 4b56acb7753dfa96562cdfc5038ee1f17834cc44 Mon Sep 17 00:00:00 2001 From: Sam Hewitt Date: Mon, 7 Feb 2022 14:07:54 -0330 Subject: [PATCH] calendarMenu: Fix several visual issues with calendar and notifications - drop card style from calendar - remove focus ability from non-interactive calendar elements - flesh out the styles for the calendar grid - fix margin and padding issue with login screen calendar - update no-notifications icon - add padding to media player buttons - catch a couple other minor style papercuts Part-of: --- .../actions/preview-close-symbolic.svg | 2 +- .../status/no-notifications-symbolic.svg | 2 +- data/org.gnome.Shell-symbolic.Source.svg | 20 +-- data/theme/gnome-shell-sass/_common.scss | 2 +- .../gnome-shell-sass/widgets/_calendar.scss | 126 ++++++++---------- .../theme/gnome-shell-sass/widgets/_dash.scss | 2 +- .../widgets/_message-list.scss | 32 ++--- .../gnome-shell-sass/widgets/_popovers.scss | 28 ++-- .../gnome-shell-sass/widgets/_scrollbars.scss | 14 +- js/ui/calendar.js | 5 +- 10 files changed, 113 insertions(+), 120 deletions(-) diff --git a/data/icons/scalable/actions/preview-close-symbolic.svg b/data/icons/scalable/actions/preview-close-symbolic.svg index 9ba08edbf..34f0823ca 100644 --- a/data/icons/scalable/actions/preview-close-symbolic.svg +++ b/data/icons/scalable/actions/preview-close-symbolic.svg @@ -1,4 +1,4 @@ - + diff --git a/data/icons/scalable/status/no-notifications-symbolic.svg b/data/icons/scalable/status/no-notifications-symbolic.svg index 91f2a2b63..d30f7e1f6 100644 --- a/data/icons/scalable/status/no-notifications-symbolic.svg +++ b/data/icons/scalable/status/no-notifications-symbolic.svg @@ -1,4 +1,4 @@ - + diff --git a/data/org.gnome.Shell-symbolic.Source.svg b/data/org.gnome.Shell-symbolic.Source.svg index 3117847ab..b017734e3 100644 --- a/data/org.gnome.Shell-symbolic.Source.svg +++ b/data/org.gnome.Shell-symbolic.Source.svg @@ -22,17 +22,17 @@ borderopacity="1.0" inkscape:pageopacity="1" inkscape:pageshadow="2" - inkscape:zoom="1.7898453" - inkscape:cx="-9.7773811" - inkscape:cy="212.30885" + inkscape:zoom="1" + inkscape:cx="51.5" + inkscape:cy="258" inkscape:document-units="px" - inkscape:current-layer="layer1" + inkscape:current-layer="layer2" showgrid="false" units="px" inkscape:window-width="1920" inkscape:window-height="1011" inkscape:window-x="0" - inkscape:window-y="0" + inkscape:window-y="32" inkscape:window-maximized="1" inkscape:snap-bbox="true" inkscape:bbox-paths="true" @@ -82,7 +82,7 @@ + style="fill:#241f31;fill-opacity:1" /> - + diff --git a/data/theme/gnome-shell-sass/_common.scss b/data/theme/gnome-shell-sass/_common.scss index a782d8f3d..b68260236 100644 --- a/data/theme/gnome-shell-sass/_common.scss +++ b/data/theme/gnome-shell-sass/_common.scss @@ -46,7 +46,7 @@ $hover_bg_color: if($variant=='light', darken($bg_color, 3%), lighten($bg_color, $hover_fg_color: if($variant=='light', darken($fg_color, 5%), lighten($fg_color, 7%)); // derived active colors -$active_bg_color: darken($bubble_buttons_color,if($variant=='light', 9%, 2%)); +$active_bg_color: darken($bg_color,if($variant=='light', 9%, 5%)); $active_fg_color: darken($fg_color,if($variant=='light', 5%, 3%)); // fonts diff --git a/data/theme/gnome-shell-sass/widgets/_calendar.scss b/data/theme/gnome-shell-sass/widgets/_calendar.scss index fee76b0c9..4e589462f 100644 --- a/data/theme/gnome-shell-sass/widgets/_calendar.scss +++ b/data/theme/gnome-shell-sass/widgets/_calendar.scss @@ -1,9 +1,7 @@ /* Date/Time Menu */ // overall menu -#calendarArea { - padding:0; -} +#calendarArea {} // Calendar menu side column .datemenu-calendar-column { @@ -11,24 +9,11 @@ border: none; border-style: solid; border-color: $borders_color; - padding: 0; - &:ltr {margin-right: 0; margin-left: $base_margin; padding-left: $base_padding; border-left-width: 1px; } - &:rtl {margin-left: 0; margin-right: $base_margin; padding-right: $base_padding; border-right-width: 1px; } + &:ltr {padding-left: $base_padding;} + &:rtl {padding-right: $base_padding;} - .datemenu-displays-section { - } - - .datemenu-displays-box { - spacing: $base_spacing; - } -} - -.events-section-title { - @include card($flat: true); - color: $insensitive_fg_color; - font-weight: bold; - padding: .4em; + .datemenu-displays-box {spacing: $base_spacing;} } /* today button (the date) */ @@ -52,29 +37,31 @@ /* Calendar */ .calendar { - @include card; - padding: $base_padding; + @include card(flat); - // month - .calendar-month-label { - color: lighten($fg_color,5%); - font-weight: bold; - padding: 8px 0; - } + // month header + .calendar-month-header { - // prev/next month icons - .calendar-change-month-back StIcon, - .calendar-change-month-forward StIcon { - icon-size: $base_icon_size; - } + // prev/next month icons + .calendar-change-month-back StIcon, + .calendar-change-month-forward StIcon { + icon-size: $base_icon_size; + } - .pager-button { - background-color: transparent; - height: 32px; - width: 32px; - border-radius: $base_border_radius - 2px; - &:hover, &:focus { background-color: $hover_bg_color; } - &:active { background-color: $active_bg_color; } + // month label + .calendar-month-label { + font-weight: bold; + } + + .pager-button { + background-color: transparent; + height: 32px; + width: 32px; + margin: 2px; + border-radius: $base_border_radius - 2px; + &:hover, &:focus {background-color: $hover_bg_color;} + &:active {background-color: $active_bg_color;} + } } $calendar_day_size: 32px; @@ -82,51 +69,60 @@ .calendar-day-base { @include fontsize($base_font_size - 3); text-align: center; - padding: 0; margin: 2px; height: $calendar_day_size; width: $calendar_day_size; border-radius: $calendar_day_size * 0.5 + 2px; font-feature-settings: "tnum"; - &:hover, &:focus { background-color: $hover_bg_color; } + &:hover {background-color: $hover_bg_color;} + &:focus { + font-weight: 1000; + background-color: mix($bg_color, $selected_bg_color, 80%); + color: $selected_fg_color; + box-shadow: 0 0 0 2px transparentize($selected_bg_color, 0.4); + } + &:active,&:selected { - color: lighten($fg_color,10%); - background-color: darken($bg_color,5%); + font-weight: 1000; + color: $active_fg_color; + background-color: $active_bg_color; + &:focus { + background-color: mix($active_bg_color, $selected_bg_color, 80%); + } } // day of week heading &.calendar-day-heading { color: $insensitive_fg_color; - font-weight: 1000; padding-top: $base_padding; height: 16px !important; // force heading to be smaller height @include fontsize($base_font_size - 2); } } - .calendar-day { //border collapse hack - see calendar.js - border-width: 0; + .calendar-day { + border-width: 0; // border collapse hack - see calendar.js } - .calendar-day-top { - border-top-width: 1px; - } - - .calendar-day-left { - border-left-width: 1px; - } - - .calendar-work-day { - } + .calendar-work-day {} .calendar-nonwork-day { color: $insensitive_fg_color; } + .calendar-other-month-day { + color: transparentize($fg_color, 0.5); + &.calendar-nonwork-day { + color: transparentize($insensitive_fg_color, 0.5); + } + } + + // Today .calendar-today { background-color: $selected_bg_color; + font-weight: 1000; color: $selected_fg_color !important; &:hover,&:focus { @@ -146,7 +142,7 @@ } .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-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-work-day { color: lighten($fg_color,10%); @@ -154,19 +150,15 @@ } } - .calendar-other-month-day { - color: transparentize($fg_color ,0.5) !important; - } - .calendar-week-number { @include fontsize($base_font_size - 4); font-weight: bold; - height: 1.8em; - width: 2.3em; - border-radius: 2px; + font-feature-settings: "tnum"; margin: 6px; + padding: $base_padding; + border-radius: 3px; background-color: darken($bg_color, 2%); - color: lighten($fg_color, 5%); + color: $insensitive_fg_color } } @@ -226,8 +218,8 @@ font-feature-settings: "tnum"; @include fontsize($base_font_size); - &:ltr { text-align: right; } - &:rtl { text-align: left; } + &:ltr {text-align: right;} + &:rtl {text-align: left;} } // timezone offset label diff --git a/data/theme/gnome-shell-sass/widgets/_dash.scss b/data/theme/gnome-shell-sass/widgets/_dash.scss index 4a8a1f9b6..9d820e784 100644 --- a/data/theme/gnome-shell-sass/widgets/_dash.scss +++ b/data/theme/gnome-shell-sass/widgets/_dash.scss @@ -68,7 +68,7 @@ $dash_border_radius: $modal_radius + 8px; .dash-separator { width: 1px; margin: 0 $base_margin*2; - background-color: transparentize($borders_color,0.2); + background-color: $borders_color; } // OSD Tooltip diff --git a/data/theme/gnome-shell-sass/widgets/_message-list.scss b/data/theme/gnome-shell-sass/widgets/_message-list.scss index 3cb2d53a2..0dc209219 100644 --- a/data/theme/gnome-shell-sass/widgets/_message-list.scss +++ b/data/theme/gnome-shell-sass/widgets/_message-list.scss @@ -4,12 +4,19 @@ // main list .message-list { width: 32em; - padding: 0; + border: none; + border-style: solid; + border-color: $borders_color; + padding: $base_padding; + + // padding and margins to account for scrollbar + &:ltr {margin-left: 0; margin-right: $base_margin; padding-right: $base_padding; border-right-width: 1px; } + &:rtl {margin-right: 0; margin-left: $base_margin; padding-left: $base_padding; border-left-width: 1px; } .message-list-placeholder { font-weight:1000; font-size: 18pt; - color: $insensitive_fg_color; + color: transparentize($fg_color, .8); spacing: 12px; // icon size and color @@ -21,15 +28,14 @@ } } - .message-list-sections { spacing: $base_spacing; margin: 0; padding-bottom: $base_padding; // to account for scrollbar - &:ltr {margin-right: $base_margin * 4; } - &:rtl {margin-left: $base_margin * 4;} + &:ltr {margin-right: $base_margin * 3; } + &:rtl {margin-left: $base_margin * 3;} } .message-list-section, @@ -122,18 +128,12 @@ border-radius: 99px; padding: $base_padding - 1px; margin: 1px; - &:hover { - background-color: transparentize($fg_color, 0.8); - } - &:active { - background-color: transparentize($fg_color, 0.9); - } + &:hover {background-color: transparentize($fg_color, 0.8);} + &:active {background-color: transparentize($fg_color, 0.9);} } // body - .message-body { - color: darken($fg_color, 10%); - } + .message-body {color: darken($fg_color, 10%);} } // URLs in messages @@ -143,7 +143,7 @@ /* Media Controls */ .message-media-control { - padding: 0 $base_padding*2; + padding: 0 $base_padding*3; margin: $base_padding*2 0; border-radius: $base_border_radius; color: $fg_color; @@ -161,7 +161,7 @@ &:insensitive { color: lighten($insensitive_fg_color, 5%); } - // fix border-radius for last button + // fix margin for last button &:last-child:ltr { margin-right: $base_margin*3; } &:last-child:rtl { margin-left: $base_margin*3; } } diff --git a/data/theme/gnome-shell-sass/widgets/_popovers.scss b/data/theme/gnome-shell-sass/widgets/_popovers.scss index d0bdfa985..c0e34142c 100644 --- a/data/theme/gnome-shell-sass/widgets/_popovers.scss +++ b/data/theme/gnome-shell-sass/widgets/_popovers.scss @@ -19,7 +19,7 @@ min-width: 15em; color: $fg_color; - //.popup-status-menu-item { font-weight: normal; color: pink; } //dunno what that is + //.popup-status-menu-item {font-weight: normal; color: pink;} //dunno what that is &.panel-menu { -boxpointer-gap: $base_margin+2px; // distance from the panel margin-bottom: 1.75em; // so it doesn't touch the bottom of the screen @@ -50,8 +50,8 @@ border-radius: $base_border_radius; transition: 0.2s all ease; - &:ltr { padding-right:$base_padding; padding-left: 0; } - &:rtl { padding-right: 0; padding-left:$base_padding; } + &:ltr {padding-right:$base_padding; padding-left: 0;} + &:rtl {padding-right: 0; padding-left:$base_padding;} &:hover { background-color: $hover_bg_color; @@ -60,7 +60,7 @@ &:checked { background-color: $hover_bg_color; margin-bottom: 0; - box-shadow: inset 0 -1px 0 0 darken($hover_bg_color, 5%); + box-shadow: inset 0 -1px 0 0 darken($hover_bg_color, 3%); border-radius: $base_border_radius $base_border_radius 0 0; &:hover { @@ -73,12 +73,12 @@ color: $fg_color; } - &:active { + &:active { background-color: lighten($active_bg_color,3%); color: lighten($active_fg_color,3%); } - &:insensitive { color: transparentize($fg_color,0.5);} + &:insensitive {color: transparentize($fg_color,0.5);} } // all icons and other graphical elements @@ -89,12 +89,12 @@ font-weight: bold; font-size: smaller; - &:insensitive { color: $insensitive_fg_color; } + &:insensitive {color: $insensitive_fg_color;} } // symbolic icons in popover .popup-menu-arrow, -.popup-menu-icon { +.popup-menu-icon { icon-size: 16px !important; } @@ -123,7 +123,7 @@ } .popup-menu-section { - .popup-menu-item:last-child:hover { border-radius: 0 } + .popup-menu-item:last-child:hover {border-radius: 0 } &:last-child .popup-menu-item:last-child { border-radius: 0 0 $base_border_radius $base_border_radius; } @@ -136,8 +136,8 @@ font-weight: bold; font-size: 1em; - &:ltr { text-align: right; }; - &:rtl { text-align: left; }; + &:ltr {text-align: right;}; + &:rtl {text-align: left;}; } // separator @@ -179,12 +179,12 @@ .popup-menu-ornament {width:0;padding:0;margin:0;} .popup-menu-item { - &:ltr { padding-left:$base_padding;padding-right:$base_padding*2; } - &:rtl { padding-right:$base_padding;padding-left:$base_padding*2; } + &:ltr {padding-left:$base_padding;padding-right:$base_padding*2;} + &:rtl {padding-right:$base_padding;padding-left:$base_padding*2;} } // lock screen, shutdown, etc. buttons - .popup-menu-icon { + .popup-menu-icon { padding:0; margin: 0 $base_margin; -st-icon-style: symbolic; diff --git a/data/theme/gnome-shell-sass/widgets/_scrollbars.scss b/data/theme/gnome-shell-sass/widgets/_scrollbars.scss index c1de7ad70..77cde6533 100644 --- a/data/theme/gnome-shell-sass/widgets/_scrollbars.scss +++ b/data/theme/gnome-shell-sass/widgets/_scrollbars.scss @@ -9,8 +9,8 @@ StScrollBar { padding: 0; StScrollView & { - min-width: 14px; - min-height: 14px; + min-width: 8px; + min-height: 8px; } StBin#trough { @@ -20,10 +20,10 @@ StScrollBar { StButton#vhandle, StButton#hhandle { border-radius: 8px; - background-color: mix($fg_color, $bg_color, 60%); - //border: 3px solid transparent; //would be nice to margin or at least to transparent - margin: 3px; - &:hover { background-color: mix($fg_color, $bg_color, 80%); } - &:active { background-color: $selected_bg_color; } + background-color: mix($fg_color, $bg_color, 30%); + border: 3px solid transparent; //would be nice to margin or at least to transparent + transition: 500ms all ease; + &:hover {background-color: mix($fg_color, $bg_color, 50%);} + &:active {background-color: mix($fg_color, $bg_color, 40%);} } } diff --git a/js/ui/calendar.js b/js/ui/calendar.js index 6f426112f..54e8e9f15 100644 --- a/js/ui/calendar.js +++ b/js/ui/calendar.js @@ -464,7 +464,7 @@ var Calendar = GObject.registerClass({ this.destroy_all_children(); // Top line of the calendar '<| September 2009 |>' - this._topBox = new St.BoxLayout(); + this._topBox = new St.BoxLayout({ style_class: 'calendar-month-header' }); layout.attach(this._topBox, 0, 0, offsetCols + 7, 1); this._backButton = new St.Button({ @@ -481,6 +481,7 @@ var Calendar = GObject.registerClass({ can_focus: true, x_align: Clutter.ActorAlign.CENTER, x_expand: true, + y_align: Clutter.ActorAlign.CENTER, }); this._topBox.add_child(this._monthLabel); @@ -694,7 +695,7 @@ var Calendar = GObject.registerClass({ if (this._useWeekdate && iter.getDay() == 4) { const label = new St.Label({ text: iter.toLocaleFormat('%V'), - style_class: 'calendar-day-base calendar-week-number', + style_class: 'calendar-week-number', can_focus: true, }); let weekFormat = Shell.util_translate_time_string(N_("Week %V"));