[StDrawingArea] further CSS-ify StDrawingArea users

Make shell_draw_box_pointer() use CSS colors, and set the app well
menu arrow width based on its own CSS rather than its parent's.

https://bugzilla.gnome.org/show_bug.cgi?id=614516
This commit is contained in:
Dan Winship 2010-03-31 16:01:34 -04:00
parent 95a6353dee
commit b4c3ab6726
5 changed files with 52 additions and 66 deletions

View File

@ -502,10 +502,15 @@ StTooltip {
padding: 4px;
background-color: rgba(0,0,0,0.9);
color: #ffffff;
-shell-arrow-width: 12px;
-shell-menu-spacing: 4px;
}
.app-well-menu-arrow {
border-color: #5f5f5f;
color: rgba(0,0,0,0.9);
width: 12px;
}
.app-well-menu-item:hover {
background-color: #1e1e1e;
}
@ -818,6 +823,16 @@ StTooltip {
background-image: url("corner-ripple.png");
}
.switcher-arrow {
border-color: rgba(0,0,0,0);
color: #808080;
}
.switcher-arrow:highlighted {
border-color: rgba(0,0,0,0);
color: white;
}
/* Workspace Switcher */
.workspace-switcher-container {
background: rgba(0,0,0,0.8);

View File

@ -13,13 +13,6 @@ const St = imports.gi.St;
const Main = imports.ui.main;
const Tweener = imports.ui.tweener;
const POPUP_ARROW_COLOR = new Clutter.Color();
POPUP_ARROW_COLOR.from_pixel(0xffffffff);
const POPUP_UNFOCUSED_ARROW_COLOR = new Clutter.Color();
POPUP_UNFOCUSED_ARROW_COLOR.from_pixel(0x808080ff);
const TRANSPARENT_COLOR = new Clutter.Color();
TRANSPARENT_COLOR.from_pixel(0x00000000);
const POPUP_APPICON_SIZE = 96;
const POPUP_SCROLL_TIME = 0.10; // seconds
@ -477,16 +470,18 @@ SwitcherList.prototype = {
this.actor.add_actor(this._rightGradient);
// Those arrows indicate whether scrolling in one direction is possible
this._leftArrow = new St.DrawingArea();
this._leftArrow = new St.DrawingArea({ style_class: 'switcher-arrow',
pseudo_class: 'highlighted' });
this._leftArrow.connect('repaint', Lang.bind(this,
function (area) {
Shell.draw_box_pointer(area, Shell.PointerDirection.LEFT, TRANSPARENT_COLOR, POPUP_ARROW_COLOR);
Shell.draw_box_pointer(area, Shell.PointerDirection.LEFT);
}));
this._rightArrow = new St.DrawingArea();
this._rightArrow = new St.DrawingArea({ style_class: 'switcher-arrow',
pseudo_class: 'highlighted' });
this._rightArrow.connect('repaint', Lang.bind(this,
function (area) {
Shell.draw_box_pointer(area, Shell.PointerDirection.RIGHT, TRANSPARENT_COLOR, POPUP_ARROW_COLOR);
Shell.draw_box_pointer(area, Shell.PointerDirection.RIGHT);
}));
this._leftGradient.add_actor(this._leftArrow);
@ -865,16 +860,13 @@ AppSwitcher.prototype = {
// thumbnails are visible (ie, when the app icon is supposed to be
// in justOutline mode). Apps with multiple windows will normally
// show a dim arrow, but show a bright arrow when they are
// highlighted; their redraw handler will use the right color
// based on this._curApp; we just need to do a queue_relayout() to
// force it to redraw. (queue_redraw() doesn't work because
// ShellDrawingArea only redraws on allocate.)
// highlighted.
highlight : function(n, justOutline) {
if (this._curApp != -1) {
if (this.icons[this._curApp].cachedWindows.length == 1)
this._arrows[this._curApp].hide();
else
this._arrows[this._curApp].queue_relayout();
this._arrows[this._curApp].remove_style_pseudo_class('highlighted');
}
SwitcherList.prototype.highlight.call(this, n, justOutline);
@ -884,7 +876,7 @@ AppSwitcher.prototype = {
if (justOutline && this.icons[this._curApp].cachedWindows.length == 1)
this._arrows[this._curApp].show();
else
this._arrows[this._curApp].queue_relayout();
this._arrows[this._curApp].add_style_pseudo_class('highlighted');
}
},
@ -893,12 +885,10 @@ AppSwitcher.prototype = {
this.addItem(appIcon.actor);
let n = this._arrows.length;
let arrow = new St.DrawingArea();
let arrow = new St.DrawingArea({ style_class: 'switcher-arrow' });
arrow.connect('repaint', Lang.bind(this,
function (area) {
Shell.draw_box_pointer(area, Shell.PointerDirection.DOWN,
TRANSPARENT_COLOR,
this._curApp == n ? POPUP_ARROW_COLOR : POPUP_UNFOCUSED_ARROW_COLOR);
Shell.draw_box_pointer(area, Shell.PointerDirection.DOWN);
}));
this._list.add_actor(arrow);
this._arrows.push(arrow);

View File

@ -608,9 +608,6 @@ AppIconMenu.prototype = {
_init: function(source) {
this._source = source;
this._arrowSize = 4; // CSS default
this._spacing = 0; // CSS default
this.actor = new Shell.GenericContainer({ reactive: true });
this.actor.connect('get-preferred-width', Lang.bind(this, this._getPreferredWidth));
this.actor.connect('get-preferred-height', Lang.bind(this, this._getPreferredHeight));
@ -634,16 +631,11 @@ AppIconMenu.prototype = {
this._windowContainer.connect('leave-event', Lang.bind(this, this._onMenuLeave));
this._windowContainer.connect('button-release-event', Lang.bind(this, this._onMenuButtonRelease));
this._borderColor = new Clutter.Color();
this._backgroundColor = new Clutter.Color();
this._windowContainerBox.connect('style-changed', Lang.bind(this, this._onStyleChanged));
this._arrow = new St.DrawingArea();
this._arrow = new St.DrawingArea({ style_class: 'app-well-menu-arrow' });
this._arrow.connect('repaint', Lang.bind(this, function (area) {
Shell.draw_box_pointer(area,
Shell.PointerDirection.LEFT,
this._borderColor,
this._backgroundColor);
Shell.draw_box_pointer(area, Shell.PointerDirection.LEFT);
}));
this.actor.add_actor(this._arrow);
@ -658,11 +650,10 @@ AppIconMenu.prototype = {
},
_getPreferredWidth: function(actor, forHeight, alloc) {
let [min, natural] = this._windowContainerBox.get_preferred_width(forHeight);
min += this._arrowSize;
natural += this._arrowSize;
alloc.min_size = min;
alloc.natural_size = natural;
let [menuMin, menuNatural] = this._windowContainerBox.get_preferred_width(forHeight);
let [arrowMin, arrowNatural] = this._arrow.get_preferred_width(forHeight);
alloc.min_size = menuMin + arrowMin;
alloc.natural_size = menuNatural + arrowNatural;
},
_getPreferredHeight: function(actor, forWidth, alloc) {
@ -678,15 +669,17 @@ AppIconMenu.prototype = {
let width = box.x2 - box.x1;
let height = box.y2 - box.y1;
let [arrowMinWidth, arrowWidth] = this._arrow.get_preferred_width(height);
childBox.x1 = 0;
childBox.x2 = this._arrowSize;
childBox.y1 = Math.floor((height / 2) - (this._arrowSize / 2));
childBox.y2 = childBox.y1 + this._arrowSize;
childBox.x2 = arrowWidth;
childBox.y1 = Math.floor((height / 2) - (arrowWidth / 2));
childBox.y2 = childBox.y1 + arrowWidth;
this._arrow.allocate(childBox, flags);
// Ensure the arrow is above the border area
let border = themeNode.get_border_width(St.Side.LEFT);
childBox.x1 = this._arrowSize - border;
childBox.x1 = arrowWidth - border;
childBox.x2 = width;
childBox.y1 = 0;
childBox.y2 = height;
@ -873,25 +866,10 @@ AppIconMenu.prototype = {
_onStyleChanged: function() {
let themeNode = this._windowContainerBox.get_theme_node();
let [success, len] = themeNode.get_length('-shell-arrow-width', false);
if (success) {
this._arrowSize = len;
this.actor.queue_relayout();
}
[success, len] = themeNode.get_length('-shell-menu-spacing', false)
if (success) {
this._windowContainer.spacing = len;
}
let color = new Clutter.Color();
themeNode.get_background_color(color);
this._backgroundColor = color;
color = new Clutter.Color();
themeNode.get_border_color(St.Side.LEFT, color);
this._borderColor = color;
this._arrow.queue_repaint();
}
};
Signals.addSignalMethods(AppIconMenu.prototype);

View File

@ -51,20 +51,24 @@ shell_draw_clock (StDrawingArea *area,
void
shell_draw_box_pointer (StDrawingArea *area,
ShellPointerDirection direction,
ClutterColor *border_color,
ClutterColor *background_color)
ShellPointerDirection direction)
{
StThemeNode *theme_node;
ClutterColor border_color, body_color;
guint width, height;
cairo_t *cr;
theme_node = st_widget_get_theme_node (ST_WIDGET (area));
st_theme_node_get_border_color (theme_node, (StSide)direction, &border_color);
st_theme_node_get_foreground_color (theme_node, &body_color);
st_drawing_area_get_surface_size (area, &width, &height);
cr = st_drawing_area_get_context (area);
cairo_set_line_width (cr, 1.0);
clutter_cairo_set_source_color (cr, border_color);
clutter_cairo_set_source_color (cr, &border_color);
switch (direction)
{
@ -98,7 +102,7 @@ shell_draw_box_pointer (StDrawingArea *area,
cairo_stroke_preserve (cr);
clutter_cairo_set_source_color (cr, background_color);
clutter_cairo_set_source_color (cr, &body_color);
cairo_fill (cr);
}

View File

@ -8,17 +8,16 @@
G_BEGIN_DECLS
/* Note that these correspond to StSide */
typedef enum {
SHELL_POINTER_UP,
SHELL_POINTER_RIGHT,
SHELL_POINTER_DOWN,
SHELL_POINTER_LEFT,
SHELL_POINTER_RIGHT
SHELL_POINTER_LEFT
} ShellPointerDirection;
void shell_draw_box_pointer (StDrawingArea *area,
ShellPointerDirection direction,
ClutterColor *border_color,
ClutterColor *background_color);
ShellPointerDirection direction);
void shell_draw_clock (StDrawingArea *area,
int hour,