[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:
parent
95a6353dee
commit
b4c3ab6726
@ -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);
|
||||
|
@ -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);
|
||||
|
@ -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);
|
||||
|
@ -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);
|
||||
}
|
||||
|
@ -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,
|
||||
|
Loading…
Reference in New Issue
Block a user