diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js index 328c38722..39651d38a 100644 --- a/js/ui/appDisplay.js +++ b/js/ui/appDisplay.js @@ -38,8 +38,6 @@ const WELL_MENU_COLOR = new Clutter.Color(); WELL_MENU_COLOR.from_pixel(0xffffffff); const WELL_MENU_SELECTED_COLOR = new Clutter.Color(); WELL_MENU_SELECTED_COLOR.from_pixel(0x005b97ff); -const WELL_MENU_BORDER_COLOR = new Clutter.Color(); -WELL_MENU_BORDER_COLOR.from_pixel(0x787878ff); const WELL_MENU_SEPARATOR_COLOR = new Clutter.Color(); WELL_MENU_SEPARATOR_COLOR.from_pixel(0x787878ff); const WELL_MENU_BORDER_WIDTH = 1; @@ -497,7 +495,7 @@ WellMenu.prototype = { this.actor.connect('allocate', Lang.bind(this, this._allocate)); this._windowContainer = new Shell.Menu({ orientation: Big.BoxOrientation.VERTICAL, - border_color: WELL_MENU_BORDER_COLOR, + border_color: AppIcon.APPICON_BORDER_COLOR, border: WELL_MENU_BORDER_WIDTH, background_color: WELL_MENU_BACKGROUND_COLOR, padding: 4, @@ -519,7 +517,7 @@ WellMenu.prototype = { this._arrow = new Shell.DrawingArea(); this._arrow.connect('redraw', Lang.bind(this, function (area, texture) { - Shell.draw_box_pointer(texture, WELL_MENU_BORDER_COLOR, WELL_MENU_BACKGROUND_COLOR); + Shell.draw_box_pointer(texture, AppIcon.APPICON_BORDER_COLOR, WELL_MENU_BACKGROUND_COLOR); })); this.actor.add_actor(this._arrow); @@ -757,17 +755,14 @@ function BaseWellItem(appInfo, isFavorite) { } BaseWellItem.prototype = { + __proto__: AppIcon.AppIcon.prototype, + _init: function(appInfo, isFavorite) { - this.appInfo = appInfo; + AppIcon.AppIcon.prototype._init.call(this, appInfo); + this.isFavorite = isFavorite; - this.icon = new AppIcon.AppIcon(appInfo); - this.windows = this.icon.windows; - this.actor = new Shell.ButtonBox({ orientation: Big.BoxOrientation.VERTICAL, - border: WELL_MENU_BORDER_WIDTH, - corner_radius: WELL_MENU_CORNER_RADIUS, - reactive: true }); - this.icon.actor._delegate = this; - this._draggable = DND.makeDraggable(this.icon.actor, true); + + this._draggable = DND.makeDraggable(this.actor, true); // Do these as anonymous functions to avoid conflict with handlers in subclasses this.actor.connect('button-press-event', Lang.bind(this, function(actor, event) { @@ -789,7 +784,6 @@ BaseWellItem.prototype = { } } })); - this.actor.append(this.icon.actor, Big.BoxPackFlags.NONE); }, shellWorkspaceLaunch : function() { @@ -804,14 +798,14 @@ BaseWellItem.prototype = { this.appInfo.launch(); }, - getDragActor: function(stageX, stageY) { - return this.icon.getDragActor(stageX, stageY); + getDragActor: function() { + return this.createDragActor(); }, // Returns the original icon that is being used as a source for the cloned texture // that represents the item as it is being dragged. getDragActorSource: function() { - return this.icon.getDragActorSource(); + return this.actor; } } @@ -915,21 +909,11 @@ InactiveWellItem.prototype = { BaseWellItem.prototype._init.call(this, appInfo, isFavorite); this.actor.connect('notify::pressed', Lang.bind(this, this._onPressedChanged)); - this.actor.connect('notify::hover', Lang.bind(this, this._onHoverChanged)); this.actor.connect('activate', Lang.bind(this, this._onActivate)); }, _onPressedChanged: function() { - let pressed = this.actor.pressed; - if (pressed) { - this.actor.border_color = WELL_MENU_BORDER_COLOR; - } else { - this.actor.border_color = TRANSPARENT_COLOR; - } - }, - - _onHoverChanged: function() { - let hover = this.actor.hover; + this.setHighlight(this.actor.pressed); }, _onActivate: function() { diff --git a/js/ui/appIcon.js b/js/ui/appIcon.js index 5ae1ce9a8..6033bb5a2 100644 --- a/js/ui/appIcon.js +++ b/js/ui/appIcon.js @@ -15,7 +15,17 @@ GLOW_COLOR.from_pixel(0x4f6ba4ff); const GLOW_PADDING_HORIZONTAL = 3; const GLOW_PADDING_VERTICAL = 3; -const APP_ICON_SIZE = 48; +const APPICON_ICON_SIZE = 48; + +const APPICON_PADDING = 1; +const APPICON_BORDER_WIDTH = 1; +const APPICON_CORNER_RADIUS = 4; + +const APPICON_BORDER_COLOR = new Clutter.Color(); +APPICON_BORDER_COLOR.from_pixel(0x787878ff); + +const TRANSPARENT_COLOR = new Clutter.Color(); +TRANSPARENT_COLOR.from_pixel(0x00000000); function AppIcon(appInfo) { this._init(appInfo); @@ -30,17 +40,19 @@ AppIcon.prototype = { } this._resortWindows(); - this.actor = new Big.Box({ orientation: Big.BoxOrientation.VERTICAL, - corner_radius: 2, - padding: 1, - reactive: true }); + this.actor = new Shell.ButtonBox({ orientation: Big.BoxOrientation.VERTICAL, + border: APPICON_BORDER_WIDTH, + corner_radius: APPICON_CORNER_RADIUS, + padding: APPICON_PADDING, + 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, - width: APP_ICON_SIZE, - height: APP_ICON_SIZE }); - this.icon = appInfo.create_icon_texture(APP_ICON_SIZE); + width: APPICON_ICON_SIZE, + height: APPICON_ICON_SIZE }); + this.icon = appInfo.create_icon_texture(APPICON_ICON_SIZE); iconBox.append(this.icon, Big.BoxPackFlags.NONE); this.actor.append(iconBox, Big.BoxPackFlags.EXPAND); @@ -61,7 +73,7 @@ AppIcon.prototype = { let glowPath = GLib.filename_to_uri(global.imagedir + 'app-well-glow.png', ''); for (let i = 0; i < this.windows.length && i < 3; i++) { let glow = Shell.TextureCache.get_default().load_uri_sync(Shell.TextureCachePolicy.FOREVER, - glowPath, -1, -1); + glowPath, -1, -1); glow.keep_aspect_ratio = false; this._glowBox.append(glow, Big.BoxPackFlags.EXPAND); } @@ -123,11 +135,18 @@ AppIcon.prototype = { }); }, - getDragActor: function() { - return this.appInfo.create_icon_texture(APP_ICON_SIZE); + // AppIcon itself is not a draggable, but if you want to make + // a subclass of it draggable, you can use this method to create + // a drag actor + createDragActor: function() { + return this.appInfo.create_icon_texture(APPICON_ICON_SIZE); }, - getDragActorSource: function() { - return this.icon; + setHighlight: function(highlight) { + if (highlight) { + this.actor.border_color = APPICON_BORDER_COLOR; + } else { + this.actor.border_color = TRANSPARENT_COLOR; + } } };