windowPreview: Overhaul chrome style

- increase close button size
 - use custom close icon that's better suited
   for the non-default 24pxp size
 - use translucent light gray for both close button
   and window caption

https://gitlab.gnome.org/Teams/Design/os-mockups/-/issues/81

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1605>
This commit is contained in:
Florian Müllner 2021-01-08 12:11:06 +01:00
parent 30f27412c2
commit 42c2bf709e
4 changed files with 88 additions and 13 deletions

View File

@ -25,6 +25,7 @@
<file alias="icons/scalable/status/keyboard-hide-symbolic.svg">keyboard-hide-symbolic.svg</file>
<file alias="icons/scalable/status/keyboard-layout-filled-symbolic.svg">keyboard-layout-filled-symbolic.svg</file>
<file alias="icons/scalable/status/keyboard-shift-filled-symbolic.svg">keyboard-shift-filled-symbolic.svg</file>
<file alias="icons/scalable/ui/window-close-24-symbolic.svg">window-close-24-symbolic.svg</file>
<file>process-working.svg</file>
<file>toggle-off.svg</file>
<file>toggle-off-dark.svg</file>

View File

@ -3,7 +3,10 @@
$window_picker_spacing: $base_spacing; // 6px
$window_picker_padding: $base_padding * 2; // 12px
$window_close_button_size: 24px;
$window_thumbnail_chrome_color: transparentize($osd_fg_color, 0.4);
$window_thumbnail_chrome_border: transparentize($osd_bg_color, 0.7);
$window_close_button_size: 30px;
$window_close_button_padding: 3px;
// Window picker
@ -14,31 +17,31 @@ $window_close_button_padding: 3px;
// Window titles
.window-caption {
color: $osd_fg_color;
background-color: $osd_bg_color;
border:1px solid $osd_outer_borders_color;
border-radius: $base_border_radius + 1;
color: $osd_bg_color;
background-color: $window_thumbnail_chrome_color;
border-radius: 99px;
border: 1px solid $window_thumbnail_chrome_border;
padding: $base_padding $base_padding * 2;
font-weight: bold;
@include fontsize($base_font_size + 1);
}
// Close button
.window-close {
background-color: $selected_bg_color;
color: $selected_fg_color;
border: none;
background-color: $window_thumbnail_chrome_color;
color: $osd_bg_color;
border: 1px solid $window_thumbnail_chrome_border;
border-radius: $window_close_button_size * 0.5 + $window_close_button_padding * 2;
padding: $window_close_button_padding;
height: $window_close_button_size;
width: $window_close_button_size;
box-shadow: -1px 1px 5px 0px rgba(0,0,0,0.5);
& StIcon { icon-size: 24px; }
&:hover {
background-color: lighten($selected_bg_color, 5%);
background-color: lighten($window_thumbnail_chrome_color, 5%);
}
&:active {
background-color: darken($selected_bg_color, 5%);
background-color: darken($window_thumbnail_chrome_color, 5%);
}
}

View File

@ -0,0 +1,71 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="24"
height="24"
viewBox="0 0 6.3499999 6.3500002"
version="1.1"
id="svg59656"
sodipodi:docname="window-close-24-symbolic.svg"
inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)">
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1016"
id="namedview9"
showgrid="true"
inkscape:zoom="2.4967968"
inkscape:cx="-99.100336"
inkscape:cy="-39.762752"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="svg59656">
<inkscape:grid
type="xygrid"
id="grid901" />
</sodipodi:namedview>
<defs
id="defs59650" />
<metadata
id="metadata59653">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
id="g905">
<rect
style="color:#bebebe;display:inline;overflow:visible;visibility:visible;fill:none;stroke:none;stroke-width:0.264583;marker:none;enable-background:new"
id="rect10837-5"
y="0"
x="0"
height="6.3499999"
width="6.3499999" />
<path
sodipodi:nodetypes="ccsccccccccccccccccccccccc"
style="color:#bebebe;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:'Andale Mono';-inkscape-font-specification:'Andale Mono';text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-anchor:start;display:inline;overflow:visible;visibility:visible;fill:#241f31;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.471289;marker:none;enable-background:new"
id="path10839-9"
inkscape:connector-curvature="0"
d="m 1.5875,1.5875 h 0.2645834 c 0.00274,-3.18e-5 0.0055,-1.217e-4 0.00827,0 0.067456,0.00296 0.1349031,0.03402 0.181901,0.082682 L 3.1758323,2.8029916 4.2155899,1.670182 c 0.07028,-0.060986 0.118182,-0.08083 0.181901,-0.082682 h 0.2645834 v 0.264583 c 0,0.075795 -0.00909,0.1456928 -0.066146,0.1984375 L 3.5644391,3.1833301 4.688086,4.3077474 C 4.737877,4.3575344 4.762498,4.4277227 4.7625,4.4979167 V 4.7625 H 4.4979167 C 4.4277225,4.7624974 4.3575325,4.7378673 4.3077475,4.6880859 L 3.1758323,3.5554004 2.0422526,4.688086 C 1.9924676,4.737878 1.9222747,4.7625 1.8520834,4.7625 H 1.5875 V 4.4979168 c -8e-7,-0.070191 0.024622,-0.1403827 0.074414,-0.1901693 L 2.7954938,3.1833301 1.6619141,2.0505208 C 1.6061553,1.9990249 1.581703,1.9263651 1.5875,1.8520833 Z" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.3 KiB

View File

@ -354,7 +354,7 @@ var WindowPreview = GObject.registerClass({
this._closeButton = new St.Button({
visible: false,
style_class: 'window-close',
child: new St.Icon({ icon_name: 'window-close-symbolic' }),
child: new St.Icon({ icon_name: 'window-close-24-symbolic' }),
});
this._closeButton.add_constraint(new Clutter.BindConstraint({
source: this._windowContainer,