From 2320c393c999dcb6533b976b136d3bafc213b99c Mon Sep 17 00:00:00 2001 From: Dan Winship Date: Wed, 31 Mar 2010 16:40:32 -0400 Subject: [PATCH] Replace all remaining BigBoxes with StBoxLayouts or StBins Also, remove a lot of cruft from genericDisplay.js leftover from previous St-ifications, and remove the pre-gtk-2.16 hacks from the status tray in panel.js (which are much less needed with the nearly-all-black panel anyway). https://bugzilla.gnome.org/show_bug.cgi?id=614516 --- data/theme/gnome-shell.css | 17 ++++++++++++++ js/ui/appDisplay.js | 8 ++----- js/ui/dash.js | 13 ++++------- js/ui/genericDisplay.js | 36 +++++++---------------------- js/ui/lookingGlass.js | 20 ++++++++-------- js/ui/panel.js | 47 +++++++++----------------------------- src/shell-tray-manager.c | 3 +-- 7 files changed, 52 insertions(+), 92 deletions(-) diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css index 848929cbf..97fd16d50 100644 --- a/data/theme/gnome-shell.css +++ b/data/theme/gnome-shell.css @@ -145,6 +145,14 @@ StTooltip { spacing: 4px; } +#statusTray { + spacing: 14px; +} + +#statusTray:compact { + spacing: 8px; +} + /* Overview */ .overview { @@ -404,6 +412,10 @@ StTooltip { background-color: #1e1e1e; } +.dash-results-container { + spacing: 4px; +} + /* GenericDisplay */ .generic-display-container { @@ -606,6 +618,11 @@ StTooltip { spacing: 4px; } +#LookingGlassDialog StBoxLayout#ResultsArea +{ + spacing: 4px; +} + #lookingGlassExtensions { padding: 4px; } diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js index c48ed20c5..3aa7f75b7 100644 --- a/js/ui/appDisplay.js +++ b/js/ui/appDisplay.js @@ -1,6 +1,5 @@ /* -*- 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 GLib = imports.gi.GLib; @@ -1000,15 +999,12 @@ AppWell.prototype = { this._favorites = []; - this.actor = new Big.Box({ orientation: Big.BoxOrientation.VERTICAL, - x_align: Big.BoxAlignment.CENTER }); + this._grid = new WellGrid(); + this.actor = this._grid.actor; this.actor._delegate = this; this._workId = Main.initializeDeferredWork(this.actor, Lang.bind(this, this._redisplay)); - this._grid = new WellGrid(); - this.actor.append(this._grid.actor, Big.BoxPackFlags.EXPAND); - this._tracker = Shell.WindowTracker.get_default(); this._appSystem = Shell.AppSystem.get_default(); diff --git a/js/ui/dash.js b/js/ui/dash.js index 3d5ab4aef..a14d288ba 100644 --- a/js/ui/dash.js +++ b/js/ui/dash.js @@ -1,6 +1,5 @@ /* -*- mode: js2; js2-basic-offset: 4; indent-tabs-mode: nil -*- */ -const Big = imports.gi.Big; const Clutter = imports.gi.Clutter; const Gtk = imports.gi.Gtk; const Mainloop = imports.mainloop; @@ -23,8 +22,6 @@ const Search = imports.ui.search; // 25 search results (per result type) should be enough for everyone const MAX_RENDERED_SEARCH_RESULTS = 25; -const DEFAULT_PADDING = 4; - const DOCS = "docs"; const PLACES = "places"; @@ -116,14 +113,12 @@ function ResultArea(displayType, flags) { ResultArea.prototype = { _init : function(displayType, flags) { - this.actor = new Big.Box({ orientation: Big.BoxOrientation.VERTICAL }); - this.resultsContainer = new Big.Box({ orientation: Big.BoxOrientation.HORIZONTAL, - spacing: DEFAULT_PADDING - }); - this.actor.append(this.resultsContainer, Big.BoxPackFlags.EXPAND); + this.actor = new St.BoxLayout({ vertical: true }); + this.resultsContainer = new St.BoxLayout({ style_class: 'dash-results-container' }); + this.actor.add(this.resultsContainer, { expand: true }); this.display = _createDisplay(displayType, flags); - this.resultsContainer.append(this.display.actor, Big.BoxPackFlags.EXPAND); + this.resultsContainer.add(this.display.actor, { expand: true }); this.display.load(); } }; diff --git a/js/ui/genericDisplay.js b/js/ui/genericDisplay.js index 292ae73ad..e264d00ff 100644 --- a/js/ui/genericDisplay.js +++ b/js/ui/genericDisplay.js @@ -1,6 +1,5 @@ /* -*- mode: js2; js2-basic-offset: 4; indent-tabs-mode: nil -*- */ -const Big = imports.gi.Big; const Clutter = imports.gi.Clutter; const Gio = imports.gi.Gio; const Gdk = imports.gi.Gdk; @@ -21,25 +20,9 @@ const RedisplayFlags = { NONE: 0, SUBSEARCH: 1 << 2, IMMEDIATE: 1 << 3 }; -const ITEM_DISPLAY_DESCRIPTION_COLOR = new Clutter.Color(); -ITEM_DISPLAY_DESCRIPTION_COLOR.from_pixel(0xffffffbb); -const DISPLAY_CONTROL_SELECTED_COLOR = new Clutter.Color(); -DISPLAY_CONTROL_SELECTED_COLOR.from_pixel(0x112288ff); -const PREVIEW_BOX_BACKGROUND_COLOR = new Clutter.Color(); -PREVIEW_BOX_BACKGROUND_COLOR.from_pixel(0xADADADf0); - -const DEFAULT_PADDING = 4; - +// Used by subclasses const ITEM_DISPLAY_ICON_SIZE = 48; -const DEFAULT_COLUMN_GAP = 6; - const PREVIEW_ICON_SIZE = 96; -const PREVIEW_BOX_PADDING = 6; -const PREVIEW_BOX_SPACING = DEFAULT_PADDING; -const PREVIEW_BOX_CORNER_RADIUS = 10; -// how far relative to the full item width the preview box should be placed -const PREVIEW_PLACING = 3/4; -const PREVIEW_DETAILS_MIN_WIDTH = PREVIEW_ICON_SIZE * 2; /* This is a virtual class that represents a single display item containing * a name, a description, and an icon. It allows selecting an item and represents @@ -117,11 +100,10 @@ GenericDisplayItem.prototype = { */ createDetailsActor: function() { - let details = new Big.Box({ orientation: Big.BoxOrientation.VERTICAL, - spacing: PREVIEW_BOX_SPACING }); + let details = new St.BoxLayout({ style_class: 'generic-display-container', + vertical: true }); - let mainDetails = new Big.Box({ orientation: Big.BoxOrientation.HORIZONTAL, - spacing: PREVIEW_BOX_SPACING }); + let mainDetails = new St.BoxLayout({ style_class: 'generic-display-container' }); // Inner box with name and description let textDetails = new St.BoxLayout({ style_class: 'generic-display-details', @@ -135,21 +117,19 @@ GenericDisplayItem.prototype = { this._detailsDescriptions.push(detailsDescription); - mainDetails.append(textDetails, Big.BoxPackFlags.EXPAND); + mainDetails.add(textDetails, { expand: true }); let previewIcon = this._createPreviewIcon(); let largePreviewIcon = this._createLargePreviewIcon(); if (previewIcon != null && largePreviewIcon == null) { - mainDetails.prepend(previewIcon, Big.BoxPackFlags.NONE); + mainDetails.insert_actor(previewIcon, 0); } - details.append(mainDetails, Big.BoxPackFlags.NONE); + details.add(mainDetails); if (largePreviewIcon != null) { - let largePreview = new Big.Box({ orientation: Big.BoxOrientation.HORIZONTAL }); - largePreview.append(largePreviewIcon, Big.BoxPackFlags.NONE); - details.append(largePreview, Big.BoxPackFlags.NONE); + details.add(largePreviewIcon); } return details; diff --git a/js/ui/lookingGlass.js b/js/ui/lookingGlass.js index 89c9f3e8a..1f91e856f 100644 --- a/js/ui/lookingGlass.js +++ b/js/ui/lookingGlass.js @@ -1,6 +1,5 @@ /* -*- mode: js2; js2-basic-offset: 4; indent-tabs-mode: nil -*- */ -const Big = imports.gi.Big; const Clutter = imports.gi.Clutter; const Gio = imports.gi.Gio; const Pango = imports.gi.Pango; @@ -148,21 +147,21 @@ Result.prototype = { this.index = index; this.o = o; - this.actor = new Big.Box(); + this.actor = new St.BoxLayout({ vertical: true }); let cmdTxt = new St.Label({ text: command }); cmdTxt.ellipsize = Pango.EllipsizeMode.END; - this.actor.append(cmdTxt, Big.BoxPackFlags.NONE); + this.actor.add(cmdTxt); let resultTxt = new St.Label({ text: "r(" + index + ") = " + o }); resultTxt.ellipsize = Pango.EllipsizeMode.END; - this.actor.append(resultTxt, Big.BoxPackFlags.NONE); + this.actor.add(resultTxt); let line = new Clutter.Rectangle({ name: "Separator", height: 1 }); let padBin = new St.Bin({ name: "Separator", x_fill: true, y_fill: true }); padBin.add_actor(line); - this.actor.append(padBin, Big.BoxPackFlags.NONE); + this.actor.add(padBin); } }; @@ -514,15 +513,14 @@ LookingGlass.prototype = { this._evalBox = new St.BoxLayout({ name: "EvalBox", vertical: true }); notebook.appendPage('Evaluator', this._evalBox); - this._resultsArea = new Big.Box({ orientation: Big.BoxOrientation.VERTICAL, - spacing: 4 }); + this._resultsArea = new St.BoxLayout({ name: "ResultsArea", vertical: true }); this._evalBox.add(this._resultsArea, { expand: true }); - let entryArea = new Big.Box({ orientation: Big.BoxOrientation.HORIZONTAL }); + let entryArea = new St.BoxLayout({ name: "EntryArea" }); this._evalBox.add_actor(entryArea); let label = new St.Label({ text: 'js>>> ' }); - entryArea.append(label, Big.BoxPackFlags.NONE); + entryArea.add(label); this._entry = new St.Entry(); /* unmapping the edit box will un-focus it, undo that */ @@ -530,7 +528,7 @@ LookingGlass.prototype = { if (child == this._evalBox) global.stage.set_key_focus(this._entry); })); - entryArea.append(this._entry, Big.BoxPackFlags.EXPAND); + entryArea.add(this._entry, { expand: true }); this._hierarchy = new ActorHierarchy(); notebook.appendPage('Hierarchy', this._hierarchy.actor); @@ -628,7 +626,7 @@ LookingGlass.prototype = { let index = this._results.length + this._offset; let result = new Result('>>> ' + command, obj, index); this._results.push(result); - this._resultsArea.append(result.actor, Big.BoxPackFlags.NONE); + this._resultsArea.add(result.actor); this._propInspector.setTarget(obj); if (this._borderPaintTarget != null) { this._borderPaintTarget.disconnect(this._borderPaintId); diff --git a/js/ui/panel.js b/js/ui/panel.js index bd9c11b51..f6d0f3d45 100644 --- a/js/ui/panel.js +++ b/js/ui/panel.js @@ -1,6 +1,5 @@ /* -*- mode: js2; js2-basic-offset: 4; indent-tabs-mode: nil -*- */ -const Big = imports.gi.Big; const Clutter = imports.gi.Clutter; const Gtk = imports.gi.Gtk; const Lang = imports.lang; @@ -24,19 +23,6 @@ const DEFAULT_PADDING = 4; const PANEL_ICON_SIZE = 24; -// See comments around _recomputeTraySize -const TRAY_SPACING = 14; -const TRAY_SPACING_MIN = 8; - -// Used for the tray icon container with gtk pre-2.16, which doesn't -// fully support tray icon transparency -const TRAY_BACKGROUND_COLOR = new Clutter.Color(); -TRAY_BACKGROUND_COLOR.from_pixel(0x0b0b0bff); -const TRAY_BORDER_COLOR = new Clutter.Color(); -TRAY_BORDER_COLOR.from_pixel(0x00000033); -const TRAY_CORNER_RADIUS = 5; -const TRAY_BORDER_WIDTH = 0; - const HOT_CORNER_ACTIVATION_TIMEOUT = 0.5; const STANDARD_TRAY_ICON_ORDER = ['keyboard', 'volume', 'bluetooth', 'network', 'battery']; @@ -458,28 +444,15 @@ Panel.prototype = { // The tray icons live in trayBox within trayContainer. // The trayBox is hidden when there are no tray icons. - let trayContainer = new Big.Box({ orientation: Big.BoxOrientation.VERTICAL, - y_align: Big.BoxAlignment.CENTER }); + let trayContainer = new St.Bin({ y_align: St.Align.MIDDLE }); this._rightBox.add(trayContainer); - let trayBox = new Big.Box({ orientation: Big.BoxOrientation.HORIZONTAL, - height: PANEL_ICON_SIZE, - spacing: TRAY_SPACING }); + let trayBox = new St.BoxLayout({ name: 'statusTray' }); this._trayBox = trayBox; - // gtk+ < 2.16 doesn't have fully-working icon transparency, - // so we want trayBox to be opaque in that case (the icons - // will at least pick up its background color). - if (Gtk.MAJOR_VERSION == 2 && Gtk.MINOR_VERSION < 16) { - trayBox.background_color = TRAY_BACKGROUND_COLOR; - trayBox.corner_radius = TRAY_CORNER_RADIUS; - trayBox.border = TRAY_BORDER_WIDTH; - trayBox.border_color = TRAY_BORDER_COLOR; - } - trayBox.hide(); - trayContainer.append(trayBox, Big.BoxPackFlags.NONE); + trayContainer.add_actor(trayBox); - this._traymanager = new Shell.TrayManager({ bg_color: TRAY_BACKGROUND_COLOR }); + this._traymanager = new Shell.TrayManager(); this._traymanager.connect('tray-icon-added', Lang.bind(this, this._onTrayIconAdded)); this._traymanager.connect('tray-icon-removed', Lang.bind(this, function(o, icon) { @@ -555,10 +528,12 @@ Panel.prototype = { }, _onTrayIconAdded: function(o, icon, wmClass) { + icon.height = PANEL_ICON_SIZE; + let role = STANDARD_TRAY_ICON_IMPLEMENTATIONS[wmClass]; if (!role) { // Unknown icons go first in undefined order - this._trayBox.prepend(icon, Big.BoxPackFlags.NONE); + this._trayBox.insert_actor(icon, 0); } else { icon._role = role; // Figure out the index in our well-known order for this icon @@ -571,13 +546,13 @@ Panel.prototype = { for (i = children.length - 1; i >= 0; i--) { let rolePosition = children[i]._rolePosition; if (!rolePosition || position > rolePosition) { - this._trayBox.insert_after(icon, children[i], Big.BoxPackFlags.NONE); + this._trayBox.insert_actor(icon, i + 1); break; } } if (i == -1) { // If we didn't find a position, we must be first - this._trayBox.prepend(icon, Big.BoxPackFlags.NONE); + this._trayBox.insert_actor(icon, 0); } } @@ -592,9 +567,9 @@ Panel.prototype = { // http://bugzilla.gnome.org/show_bug.cgi?id=590495 _recomputeTraySize: function () { if (this._trayBox.get_children().length > 6) - this._trayBox.spacing = TRAY_SPACING_MIN; + this._trayBox.add_style_pseudo_class('compact'); else - this._trayBox.spacing = TRAY_SPACING; + this._trayBox.remove_style_pseudo_class('compact'); }, _updateClock: function() { diff --git a/src/shell-tray-manager.c b/src/shell-tray-manager.c index 474c5c609..080e5fb84 100644 --- a/src/shell-tray-manager.c +++ b/src/shell-tray-manager.c @@ -51,8 +51,7 @@ G_DEFINE_TYPE (ShellTrayManager, shell_tray_manager, G_TYPE_OBJECT); static guint shell_tray_manager_signals [LAST_SIGNAL] = { 0 }; -/* Sea Green - obnoxious to force people to set the background color */ -static const ClutterColor default_color = { 0xbb, 0xff, 0xaa }; +static const ClutterColor default_color = { 0x00, 0x00, 0x00, 0xff }; static void na_tray_icon_added (NaTrayManager *na_manager, GtkWidget *child, gpointer manager); static void na_tray_icon_removed (NaTrayManager *na_manager, GtkWidget *child, gpointer manager);