Split out "AppIcon" and make WellDisplayItem a subclass of it
This commit is contained in:
parent
799f56fe87
commit
0f4e9189c5
@ -3,6 +3,7 @@ jsuidir = $(pkgdatadir)/js/ui
|
|||||||
dist_jsui_DATA = \
|
dist_jsui_DATA = \
|
||||||
altTab.js \
|
altTab.js \
|
||||||
appDisplay.js \
|
appDisplay.js \
|
||||||
|
appIcon.js \
|
||||||
button.js \
|
button.js \
|
||||||
chrome.js \
|
chrome.js \
|
||||||
dash.js \
|
dash.js \
|
||||||
|
@ -14,6 +14,7 @@ const Mainloop = imports.mainloop;
|
|||||||
const Gettext = imports.gettext.domain('gnome-shell');
|
const Gettext = imports.gettext.domain('gnome-shell');
|
||||||
const _ = Gettext.gettext;
|
const _ = Gettext.gettext;
|
||||||
|
|
||||||
|
const AppIcon = imports.ui.appIcon;
|
||||||
const DND = imports.ui.dnd;
|
const DND = imports.ui.dnd;
|
||||||
const GenericDisplay = imports.ui.genericDisplay;
|
const GenericDisplay = imports.ui.genericDisplay;
|
||||||
const Main = imports.ui.main;
|
const Main = imports.ui.main;
|
||||||
@ -22,12 +23,6 @@ const Workspaces = imports.ui.workspaces;
|
|||||||
const ENTERED_MENU_COLOR = new Clutter.Color();
|
const ENTERED_MENU_COLOR = new Clutter.Color();
|
||||||
ENTERED_MENU_COLOR.from_pixel(0x00ff0022);
|
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_DEFAULT_COLUMNS = 4;
|
||||||
const WELL_ITEM_HSPACING = 0;
|
const WELL_ITEM_HSPACING = 0;
|
||||||
const WELL_ITEM_VSPACING = 4;
|
const WELL_ITEM_VSPACING = 4;
|
||||||
@ -459,72 +454,18 @@ function WellDisplayItem(appInfo, isFavorite) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
WellDisplayItem.prototype = {
|
WellDisplayItem.prototype = {
|
||||||
|
__proto__ : AppIcon.AppIcon.prototype,
|
||||||
|
|
||||||
_init : function(appInfo, isFavorite) {
|
_init : function(appInfo, isFavorite) {
|
||||||
this.appInfo = appInfo;
|
AppIcon.AppIcon.prototype._init.call(this, appInfo);
|
||||||
|
|
||||||
this.isFavorite = isFavorite;
|
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.actor.connect('button-release-event', Lang.bind(this, function (b, e) {
|
||||||
this._handleActivate();
|
this._handleActivate();
|
||||||
}));
|
}));
|
||||||
|
|
||||||
let draggable = DND.makeDraggable(this.actor);
|
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 () {
|
_handleActivate: function () {
|
||||||
@ -552,7 +493,7 @@ WellDisplayItem.prototype = {
|
|||||||
},
|
},
|
||||||
|
|
||||||
getDragActor: function(stageX, stageY) {
|
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
|
// Returns the original icon that is being used as a source for the cloned texture
|
||||||
|
83
js/ui/appIcon.js
Normal file
83
js/ui/appIcon.js
Normal file
@ -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);
|
||||||
|
}
|
||||||
|
};
|
Loading…
Reference in New Issue
Block a user