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

panel: Move panel border into the background

Browse Source 
In the mockups the bottom border of active panel buttons is drawn
on top of the panel's border. To get this effect, move the panel
border into the background, so that it is not subtracted from the
vertical space given to the buttons. Adjust the drawing of the rounded
corners to reflect that change.

https://bugzilla.gnome.org/show_bug.cgi?id=643001
This commit is contained in:
Florian Müllner 2011-02-21 19:04:40 +01:00
parent 697139043f
commit 9a048af1fb
3 changed files with 44 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
data/theme/gnome-shell.css
View File

@ -187,8 +187,7 @@ StTooltip StLabel {
#panel { #panel {
color: #ffffff; color: #ffffff;
background-color: black; background-color: black;
border: 0px solid #536272; border-image: url("panel-border.svg") 1;
border-bottom-width: 1px;
} }
#panelLeft, #panelCenter, #panelRight { #panelLeft, #panelCenter, #panelRight {

33
data/theme/panel-border.svg Normal file
View File

@ -0,0 +1,33 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
width="3"
height="10"
id="svg2"
version="1.1">
<defs
id="defs4" />
<metadata
id="metadata7">
</metadata>
<g
id="layer1">
<rect
style="fill:#000000;fill-opacity:1;stroke-width:0.43599999000000000;stroke-miterlimit:4;stroke-dasharray:none"
id="rect3779"
width="3"
height="10"
x="0"
y="0" />
<rect
style="fill:#536272;fill-opacity:1;stroke-width:0.43599999;stroke-miterlimit:4;stroke-dasharray:none"
id="rect3796"
width="3"
height="1"
x="0"
y="9" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 787 B

20
js/ui/panel.js
View File

@ -580,18 +580,19 @@ PanelCorner.prototype = {
cr.moveTo(0, 0); cr.moveTo(0, 0);
if (this._side == St.Side.LEFT) if (this._side == St.Side.LEFT)
cr.arc(cornerRadius, cr.arc(cornerRadius,
innerBorderWidth + outerBorderWidth + cornerRadius, innerBorderWidth + cornerRadius,
cornerRadius, Math.PI, 3 * Math.PI / 2); cornerRadius, Math.PI, 3 * Math.PI / 2);
else else
cr.arc(0, cr.arc(0,
innerBorderWidth + outerBorderWidth + cornerRadius, innerBorderWidth + cornerRadius,
cornerRadius, 3 * Math.PI / 2, 2 * Math.PI); cornerRadius, 3 * Math.PI / 2, 2 * Math.PI);
cr.lineTo(cornerRadius, 0); cr.lineTo(cornerRadius, 0);
cr.closePath(); cr.closePath();
let savedPath = cr.copyPath(); let savedPath = cr.copyPath();
let over = _over(outerBorderColor, backgroundColor); let over = _over(innerBorderColor,
_over(outerBorderColor, backgroundColor));
Clutter.cairo_set_source_color(cr, over); Clutter.cairo_set_source_color(cr, over);
cr.fill(); cr.fill();
@ -607,12 +608,12 @@ PanelCorner.prototype = {
cr.restore(); cr.restore();
if (this._side == St.Side.LEFT) if (this._side == St.Side.LEFT)
cr.rectangle(cornerRadius - offset, 0, offset, innerBorderWidth); cr.rectangle(cornerRadius - offset, 0, offset, outerBorderWidth);
else else
cr.rectangle(0, 0, offset, innerBorderWidth); cr.rectangle(0, 0, offset, outerBorderWidth);
cr.fill(); cr.fill();
offset = innerBorderWidth + outerBorderWidth; offset = innerBorderWidth;
Clutter.cairo_set_source_color(cr, backgroundColor); Clutter.cairo_set_source_color(cr, backgroundColor);
cr.save(); cr.save();
@ -627,16 +628,15 @@ PanelCorner.prototype = {
let cornerRadius = node.get_length("-panel-corner-radius"); let cornerRadius = node.get_length("-panel-corner-radius");
let innerBorderWidth = node.get_length('-panel-corner-inner-border-width'); let innerBorderWidth = node.get_length('-panel-corner-inner-border-width');
let outerBorderWidth = node.get_length('-panel-corner-outer-border-width');
this.actor.set_size(cornerRadius, this.actor.set_size(cornerRadius,
innerBorderWidth + outerBorderWidth + cornerRadius); innerBorderWidth + cornerRadius);
if (this._side == St.Side.LEFT) if (this._side == St.Side.LEFT)
this.actor.set_position(Main.panel.actor.x, this.actor.set_position(Main.panel.actor.x,
Main.panel.actor.y + Main.panel.actor.height - innerBorderWidth - outerBorderWidth); Main.panel.actor.y + Main.panel.actor.height - innerBorderWidth);
else else
this.actor.set_position(Main.panel.actor.x + Main.panel.actor.width - cornerRadius, this.actor.set_position(Main.panel.actor.x + Main.panel.actor.width - cornerRadius,
Main.panel.actor.y + Main.panel.actor.height - innerBorderWidth - outerBorderWidth); Main.panel.actor.y + Main.panel.actor.height - innerBorderWidth);
} }
}; };