From 0f4e9189c501dc502c7a77904aa2bac623a61389 Mon Sep 17 00:00:00 2001 From: Dan Winship Date: Thu, 13 Aug 2009 12:21:01 -0400 Subject: [PATCH] Split out "AppIcon" and make WellDisplayItem a subclass of it --- js/ui/Makefile.am | 1 + js/ui/appDisplay.js | 69 +++---------------------------------- js/ui/appIcon.js | 83 +++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 89 insertions(+), 64 deletions(-) create mode 100644 js/ui/appIcon.js diff --git a/js/ui/Makefile.am b/js/ui/Makefile.am index b9185668a..0d92e4484 100644 --- a/js/ui/Makefile.am +++ b/js/ui/Makefile.am @@ -3,6 +3,7 @@ jsuidir = $(pkgdatadir)/js/ui dist_jsui_DATA = \ altTab.js \ appDisplay.js \ + appIcon.js \ button.js \ chrome.js \ dash.js \ diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js index 7930f5d72..8af912b3e 100644 --- a/js/ui/appDisplay.js +++ b/js/ui/appDisplay.js @@ -14,6 +14,7 @@ const Mainloop = imports.mainloop; const Gettext = imports.gettext.domain('gnome-shell'); const _ = Gettext.gettext; +const AppIcon = imports.ui.appIcon; const DND = imports.ui.dnd; const GenericDisplay = imports.ui.genericDisplay; const Main = imports.ui.main; @@ -22,12 +23,6 @@ const Workspaces = imports.ui.workspaces; const ENTERED_MENU_COLOR = new Clutter.Color(); ENTERED_MENU_COLOR.from_pixel(0x00ff0022); -const GLOW_COLOR = new Clutter.Color(); -GLOW_COLOR.from_pixel(0x4f6ba4ff); -const GLOW_PADDING = 5; - - -const APP_ICON_SIZE = 48; const WELL_DEFAULT_COLUMNS = 4; const WELL_ITEM_HSPACING = 0; const WELL_ITEM_VSPACING = 4; @@ -459,72 +454,18 @@ function WellDisplayItem(appInfo, isFavorite) { } WellDisplayItem.prototype = { + __proto__ : AppIcon.AppIcon.prototype, + _init : function(appInfo, isFavorite) { - this.appInfo = appInfo; + AppIcon.AppIcon.prototype._init.call(this, appInfo); this.isFavorite = isFavorite; - this.actor = new Big.Box({ orientation: Big.BoxOrientation.VERTICAL, - corner_radius: 2, - border: 0, - padding: 1, - border_color: GenericDisplay.ITEM_DISPLAY_SELECTED_BACKGROUND_COLOR, - reactive: true }); - this.actor._delegate = this; this.actor.connect('button-release-event', Lang.bind(this, function (b, e) { this._handleActivate(); })); let draggable = DND.makeDraggable(this.actor); - - let iconBox = new Big.Box({ orientation: Big.BoxOrientation.VERTICAL, - x_align: Big.BoxAlignment.CENTER, - y_align: Big.BoxAlignment.CENTER }); - this._icon = appInfo.create_icon_texture(APP_ICON_SIZE); - iconBox.append(this._icon, Big.BoxPackFlags.NONE); - - this.actor.append(iconBox, Big.BoxPackFlags.EXPAND); - - this._windows = Shell.AppMonitor.get_default().get_windows_for_app(appInfo.get_id()); - - let nameBox = new Big.Box({ orientation: Big.BoxOrientation.HORIZONTAL, - x_align: Big.BoxAlignment.CENTER }); - this._nameBox = nameBox; - - this._name = new Clutter.Text({ color: GenericDisplay.ITEM_DISPLAY_NAME_COLOR, - font_name: "Sans 12px", - line_alignment: Pango.Alignment.CENTER, - ellipsize: Pango.EllipsizeMode.END, - text: appInfo.get_name() }); - nameBox.append(this._name, Big.BoxPackFlags.NONE); - if (this._windows.length > 0) { - let glow = new Shell.DrawingArea({}); - glow.connect('redraw', Lang.bind(this, function (e, tex) { - Shell.draw_app_highlight(tex, - this._windows.length, - GLOW_COLOR.red / 255, - GLOW_COLOR.green / 255, - GLOW_COLOR.blue / 255, - GLOW_COLOR.alpha / 255); - })); - this._name.connect('notify::allocation', Lang.bind(this, function () { - let x = this._name.x; - let y = this._name.y; - let width = this._name.width; - let height = this._name.height; - // If we're smaller than the allocated box width, pad out the glow a bit - // to make it more visible - if ((width + GLOW_PADDING * 2) < this._nameBox.width) { - width += GLOW_PADDING * 2; - x -= GLOW_PADDING; - } - glow.set_size(width, height); - glow.set_position(x, y); - })); - nameBox.add_actor(glow); - glow.lower(this._name); - } - this.actor.append(nameBox, Big.BoxPackFlags.NONE); }, _handleActivate: function () { @@ -552,7 +493,7 @@ WellDisplayItem.prototype = { }, getDragActor: function(stageX, stageY) { - return this.appInfo.create_icon_texture(APP_ICON_SIZE); + return this.appInfo.create_icon_texture(this._icon.height); }, // Returns the original icon that is being used as a source for the cloned texture diff --git a/js/ui/appIcon.js b/js/ui/appIcon.js new file mode 100644 index 000000000..12ac9b3da --- /dev/null +++ b/js/ui/appIcon.js @@ -0,0 +1,83 @@ +/* -*- mode: js2; js2-basic-offset: 4; indent-tabs-mode: nil -*- */ + +const Big = imports.gi.Big; +const Clutter = imports.gi.Clutter; +const Pango = imports.gi.Pango; +const Shell = imports.gi.Shell; +const Lang = imports.lang; + +const GenericDisplay = imports.ui.genericDisplay; +const Main = imports.ui.main; + +const GLOW_COLOR = new Clutter.Color(); +GLOW_COLOR.from_pixel(0x4f6ba4ff); +const GLOW_PADDING = 5; + +const APP_ICON_SIZE = 48; + +function AppIcon(appInfo) { + this._init(appInfo); +} + +AppIcon.prototype = { + _init : function(appInfo) { + this.appInfo = appInfo; + + this.actor = new Big.Box({ orientation: Big.BoxOrientation.VERTICAL, + corner_radius: 2, + border: 0, + padding: 1, + border_color: GenericDisplay.ITEM_DISPLAY_SELECTED_BACKGROUND_COLOR, + reactive: true }); + this.actor._delegate = this; + + let iconBox = new Big.Box({ orientation: Big.BoxOrientation.VERTICAL, + x_align: Big.BoxAlignment.CENTER, + y_align: Big.BoxAlignment.CENTER }); + this._icon = appInfo.create_icon_texture(APP_ICON_SIZE); + iconBox.append(this._icon, Big.BoxPackFlags.NONE); + + this.actor.append(iconBox, Big.BoxPackFlags.EXPAND); + + this._windows = Shell.AppMonitor.get_default().get_windows_for_app(appInfo.get_id()); + + let nameBox = new Big.Box({ orientation: Big.BoxOrientation.HORIZONTAL, + x_align: Big.BoxAlignment.CENTER }); + this._nameBox = nameBox; + + this._name = new Clutter.Text({ color: GenericDisplay.ITEM_DISPLAY_NAME_COLOR, + font_name: "Sans 12px", + line_alignment: Pango.Alignment.CENTER, + ellipsize: Pango.EllipsizeMode.END, + text: appInfo.get_name() }); + nameBox.append(this._name, Big.BoxPackFlags.NONE); + if (this._windows.length > 0) { + let glow = new Shell.DrawingArea({}); + glow.connect('redraw', Lang.bind(this, function (e, tex) { + Shell.draw_app_highlight(tex, + this._windows.length, + GLOW_COLOR.red / 255, + GLOW_COLOR.green / 255, + GLOW_COLOR.blue / 255, + GLOW_COLOR.alpha / 255); + })); + this._name.connect('notify::allocation', Lang.bind(this, function () { + let x = this._name.x; + let y = this._name.y; + let width = this._name.width; + let height = this._name.height; + // If we're smaller than the allocated box width, pad out the glow a bit + // to make it more visible + if ((width + GLOW_PADDING * 2) < this._nameBox.width) { + width += GLOW_PADDING * 2; + x -= GLOW_PADDING; + } + glow.set_size(width, height); + glow.set_position(x, y); + })); + nameBox.add_actor(glow); + glow.lower(this._name); + } + this.actor.append(nameBox, Big.BoxPackFlags.NONE); + } +};