[gnome-shell/nbtk-introduction] Port LookingGlass console to NBTK
- From: Owen Taylor <otaylor src gnome org>
- To: svn-commits-list gnome org
- Cc:
- Subject: [gnome-shell/nbtk-introduction] Port LookingGlass console to NBTK
- Date: Tue, 22 Sep 2009 18:44:40 +0000 (UTC)
commit 661100abe8304947f915df33f816f88dc9b584bf
Author: Owen W. Taylor <otaylor fishsoup net>
Date: Thu Sep 10 01:38:13 2009 -0400
Port LookingGlass console to NBTK
* Style aspects like colors and fonts are moved into gnome-shell.css.
* Scrolling is adding using NbtkScrollView.
Based on a patch from Colin Walters
https://bugzilla.gnome.org/show_bug.cgi?id=591245
data/theme/gnome-shell.css | 36 +++++++++
js/ui/lookingGlass.js | 173 +++++++++++++++++---------------------------
2 files changed, 104 insertions(+), 105 deletions(-)
---
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index c053256..635a22e 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -60,3 +60,39 @@ NbtkScrollBar NbtkButton#vhandle:hover
{
border-image: url("scroll-vhandle.png") 5;
}
+
+/* LookingGlass */
+
+#LookingGlassDialog
+{
+ background-color: rgba(0,0,0,0.85);
+ spacing: 4px;
+ padding: 4px;
+ border: 1px solid rgba(0,0,172,0.85);
+ border-radius: 4px;
+ font-family: Monospace;
+
+ color: #88ff66;
+}
+
+#LookingGlassDialog > #Toolbar
+{
+ border: 1px solid grey;
+ border-radius: 4px;
+}
+
+#LookingGlassDialog NbtkLabel
+{
+ color: #88ff66;
+}
+
+#LookingGlassDialog NbtkEntry
+{
+ color: #88ff66;
+}
+
+#LookingGlassDialog NbtkBoxLayout#EvalBox
+{
+ padding: 4px;
+ spacing: 4px;
+}
diff --git a/js/ui/lookingGlass.js b/js/ui/lookingGlass.js
index 8641782..487faaf 100644
--- a/js/ui/lookingGlass.js
+++ b/js/ui/lookingGlass.js
@@ -4,6 +4,7 @@ const Big = imports.gi.Big;
const Clutter = imports.gi.Clutter;
const Gio = imports.gi.Gio;
const Pango = imports.gi.Pango;
+const Nbtk = imports.gi.Nbtk;
const Shell = imports.gi.Shell;
const Signals = imports.signals;
const Lang = imports.lang;
@@ -12,18 +13,7 @@ const Mainloop = imports.mainloop;
const Tweener = imports.ui.tweener;
const Main = imports.ui.main;
-const LG_BORDER_COLOR = new Clutter.Color();
-LG_BORDER_COLOR.from_pixel(0x0000aca0);
-const LG_BACKGROUND_COLOR = new Clutter.Color();
-LG_BACKGROUND_COLOR.from_pixel(0x000000d5);
-const GREY = new Clutter.Color();
-GREY.from_pixel(0xAFAFAFFF);
-const MATRIX_GREEN = new Clutter.Color();
-MATRIX_GREEN.from_pixel(0x88ff66ff);
-// FIXME pull from GConf
-const MATRIX_FONT = 'Monospace 10';
-
- /* Imports...feel free to add here as needed */
+/* Imports...feel free to add here as needed */
var commandHeader = "const Clutter = imports.gi.Clutter; " +
"const GLib = imports.gi.GLib; " +
"const Gtk = imports.gi.Gtk; " +
@@ -47,7 +37,7 @@ function Notebook() {
Notebook.prototype = {
_init: function() {
- this.actor = new Big.Box();
+ this.actor = new Nbtk.BoxLayout({ vertical: true });
this.tabControls = new Big.Box({ orientation: Big.BoxOrientation.HORIZONTAL,
spacing: 4, padding: 2 });
@@ -58,21 +48,24 @@ Notebook.prototype = {
appendPage: function(name, child) {
let labelOuterBox = new Big.Box({ padding: 2 });
- let labelBox = new Big.Box({ padding: 2, border_color: MATRIX_GREEN,
- reactive: true });
+ let labelBox = new Nbtk.BoxLayout({ reactive: true });
labelOuterBox.append(labelBox, Big.BoxPackFlags.NONE);
- let label = new Clutter.Text({ color: MATRIX_GREEN,
- font_name: MATRIX_FONT,
- text: name });
+ let label = new Nbtk.Label({ text: name });
labelBox.connect('button-press-event', Lang.bind(this, function () {
this.selectChild(child);
return true;
}));
- labelBox.append(label, Big.BoxPackFlags.EXPAND);
- this._tabs.push([child, labelBox]);
- child.hide();
- this.actor.append(child, Big.BoxPackFlags.EXPAND);
+ labelBox.add(label, { expand: true });
this.tabControls.append(labelOuterBox, Big.BoxPackFlags.NONE);
+
+ let scrollview = new Nbtk.ScrollView({ x_fill: true, y_fill: true });
+ scrollview.get_hscroll_bar().hide();
+ scrollview.add_actor(child);
+
+ this._tabs.push([child, labelBox, scrollview]);
+ scrollview.hide();
+ this.actor.add(scrollview, { expand: true });
+
if (this._selectedIndex == -1)
this.selectIndex(0);
},
@@ -80,10 +73,10 @@ Notebook.prototype = {
_unselect: function() {
if (this._selectedIndex < 0)
return;
- let [child, labelBox] = this._tabs[this._selectedIndex];
+ let [child, labelBox, scrollview] = this._tabs[this._selectedIndex];
labelBox.padding = 2;
labelBox.border = 0;
- child.hide();
+ scrollview.hide();
this._selectedIndex = -1;
},
@@ -95,10 +88,10 @@ Notebook.prototype = {
this.emit('selection', null);
return;
}
- let [child, labelBox] = this._tabs[index];
+ let [child, labelBox, scrollview] = this._tabs[index];
labelBox.padding = 1;
labelBox.border = 1;
- child.show();
+ scrollview.show();
this._selectedIndex = index;
this.emit('selection', child);
},
@@ -108,7 +101,7 @@ Notebook.prototype = {
this.selectIndex(-1);
else {
for (let i = 0; i < this._tabs.length; i++) {
- let [tabChild, labelBox] = this._tabs[i];
+ let [tabChild, labelBox, scrollview] = this._tabs[i];
if (tabChild == child) {
this.selectIndex(i);
return;
@@ -130,20 +123,19 @@ Result.prototype = {
this.actor = new Big.Box();
- let cmdTxt = new Clutter.Text({ color: MATRIX_GREEN,
- font_name: MATRIX_FONT,
- ellipsize: Pango.EllipsizeMode.END,
- text: command });
+ let cmdTxt = new Nbtk.Label({ text: command });
+ cmdTxt.ellipsize = Pango.EllipsizeMode.END;
+
this.actor.append(cmdTxt, Big.BoxPackFlags.NONE);
- let resultTxt = new Clutter.Text({ color: MATRIX_GREEN,
- font_name: MATRIX_FONT,
- ellipsize: Pango.EllipsizeMode.END,
- text: "r(" + index + ") = " + o });
+ let resultTxt = new Nbtk.Label({ text: "r(" + index + ") = " + o });
+ resultTxt.ellipsize = Pango.EllipsizeMode.END;
+
this.actor.append(resultTxt, Big.BoxPackFlags.NONE);
- let line = new Big.Box({ border_color: GREY,
- border_bottom: 1,
- height: 8 });
- this.actor.append(line, Big.BoxPackFlags.NONE);
+ let line = new Clutter.Rectangle({ name: "Separator",
+ height: 1 });
+ let padBin = new Nbtk.Bin({ name: "Separator", x_fill: true, y_fill: true });
+ padBin.add_actor(line);
+ this.actor.append(padBin, Big.BoxPackFlags.NONE);
}
}
@@ -158,17 +150,14 @@ ActorHierarchy.prototype = {
this._parentList = [];
- this.actor = new Big.Box({ spacing: 4,
- border: 1,
- padding: 4,
- border_color: GREY });
+ this.actor = new Nbtk.BoxLayout({ name: "ActorHierarchy", vertical: true });
},
setTarget: function(actor) {
this._previousTarget = this._target;
this.target = actor;
- this.actor.remove_all();
+ this.actor.get_children().forEach(function (child) { child.destroy(); });
if (!(actor instanceof Clutter.Actor))
return;
@@ -181,11 +170,9 @@ ActorHierarchy.prototype = {
while ((parent = parent.get_parent()) != null) {
this._parentList.push(parent);
- let link = new Clutter.Text({ color: MATRIX_GREEN,
- font_name: MATRIX_FONT,
- reactive: true,
- text: "" + parent });
- this.actor.append(link, Big.BoxPackFlags.IF_FITS);
+ let link = new Nbtk.Label({ reactive: true,
+ text: "" + parent });
+ this.actor.add_actor(link);
let parentTarget = parent;
link.connect('button-press-event', Lang.bind(this, function () {
this._selectByActor(parentTarget);
@@ -214,16 +201,13 @@ PropertyInspector.prototype = {
this._parentList = [];
- this.actor = new Big.Box({ spacing: 4,
- border: 1,
- padding: 4,
- border_color: GREY });
+ this.actor = new Nbtk.BoxLayout({ name: "PropertyInspector", vertical: true });
},
setTarget: function(actor) {
this.target = actor;
- this.actor.remove_all();
+ this.actor.get_children().forEach(function (child) { child.destroy(); });
for (let propName in actor) {
let valueStr;
@@ -233,11 +217,9 @@ PropertyInspector.prototype = {
valueStr = '<error>';
}
let propText = propName + ": " + valueStr;
- let propDisplay = new Clutter.Text({ color: MATRIX_GREEN,
- font_name: MATRIX_FONT,
- reactive: true,
- text: propText });
- this.actor.append(propDisplay, Big.BoxPackFlags.IF_FITS);
+ let propDisplay = new Nbtk.Label({ reactive: true,
+ text: propText });
+ this.actor.add_actor(propDisplay);
}
}
}
@@ -249,20 +231,16 @@ function Inspector() {
Inspector.prototype = {
_init: function() {
let width = 150;
- let eventHandler = new Big.Box({ background_color: LG_BACKGROUND_COLOR,
- border: 1,
- border_color: LG_BORDER_COLOR,
- corner_radius: 4,
- y: global.stage.height/2,
- reactive: true
- });
+ let eventHandler = new Nbtk.BoxLayout({ name: "LookingGlassDialog",
+ vertical: false,
+ y: Math.floor(global.stage.height/2),
+ reactive: true });
eventHandler.connect('notify::allocation', Lang.bind(this, function () {
eventHandler.x = Math.floor((global.stage.width)/2 - (eventHandler.width)/2);
}));
global.stage.add_actor(eventHandler);
- let displayText = new Clutter.Text({ color: MATRIX_GREEN,
- font_name: MATRIX_FONT, text: '' });
- eventHandler.append(displayText, Big.BoxPackFlags.EXPAND);
+ let displayText = new Nbtk.Label();
+ eventHandler.add(displayText, { expand: true });
let borderPaintTarget = null;
let borderPaintId = null;
@@ -321,29 +299,19 @@ LookingGlass.prototype = {
this._offset = 0;
this._results = [];
- // TODO replace with scrolling or something better
- this._maxItems = 10;
-
- this.actor = new Big.Box({ background_color: LG_BACKGROUND_COLOR,
- border: 1,
- border_color: LG_BORDER_COLOR,
- corner_radius: 4,
- padding_top: 8,
- padding_left: 4,
- padding_right: 4,
- padding_bottom: 4,
- spacing: 4,
- visible: false
- });
+ // Sort of magic, but...eh.
+ this._maxItems = 150;
+
+ this.actor = new Nbtk.BoxLayout({ name: "LookingGlassDialog",
+ vertical: true,
+ visible: false });
global.stage.add_actor(this.actor);
- let toolbar = new Big.Box({ orientation: Big.BoxOrientation.HORIZONTAL,
- border: 1, border_color: GREY,
- corner_radius: 4 });
- this.actor.append(toolbar, Big.BoxPackFlags.NONE);
+ let toolbar = new Nbtk.BoxLayout({ name: "Toolbar" });
+ this.actor.add_actor(toolbar);
let inspectIcon = Shell.TextureCache.get_default().load_gicon(new Gio.ThemedIcon({ name: 'gtk-color-picker' }),
24);
- toolbar.append(inspectIcon, Big.BoxPackFlags.NONE);
+ toolbar.add_actor(inspectIcon);
inspectIcon.reactive = true;
inspectIcon.connect('button-press-event', Lang.bind(this, function () {
let inspector = new Inspector();
@@ -361,31 +329,26 @@ LookingGlass.prototype = {
}));
let notebook = new Notebook();
- this.actor.append(notebook.actor, Big.BoxPackFlags.EXPAND);
- toolbar.append(notebook.tabControls, Big.BoxPackFlags.END);
+ this.actor.add(notebook.actor, { expand: true });
+
+ let emptyBox = new Nbtk.Bin();
+ toolbar.add(emptyBox, { expand: true });
+ toolbar.add_actor(notebook.tabControls);
- this._evalBox = new Big.Box({ orientation: Big.BoxOrientation.VERTICAL,
- spacing: 4 });
+ this._evalBox = new Nbtk.BoxLayout({ name: "EvalBox", vertical: true });
notebook.appendPage('Evaluator', this._evalBox);
this._resultsArea = new Big.Box({ orientation: Big.BoxOrientation.VERTICAL,
spacing: 4 });
- this._evalBox.append(this._resultsArea, Big.BoxPackFlags.EXPAND);
+ this._evalBox.add(this._resultsArea, { expand: true });
let entryArea = new Big.Box({ orientation: Big.BoxOrientation.HORIZONTAL });
- this._evalBox.append(entryArea, Big.BoxPackFlags.NONE);
+ this._evalBox.add_actor(entryArea);
- let label = new Clutter.Text({ color: MATRIX_GREEN,
- font_name: MATRIX_FONT,
- text: 'js>>> ' });
+ let label = new Nbtk.Label({ text: 'js>>> ' });
entryArea.append(label, Big.BoxPackFlags.NONE);
- this._entry = new Clutter.Text({ color: MATRIX_GREEN,
- font_name: MATRIX_FONT,
- editable: true,
- activatable: true,
- singleLineMode: true,
- text: ''});
+ this._entry = new Nbtk.Entry();
/* unmapping the edit box will un-focus it, undo that */
notebook.connect('selection', Lang.bind(this, function (nb, child) {
if (child == this._evalBox)
@@ -403,7 +366,7 @@ LookingGlass.prototype = {
notebook.selectIndex(0);
}));
- this._entry.connect('activate', Lang.bind(this, function (o, e) {
+ this._entry.clutter_text.connect('activate', Lang.bind(this, function (o, e) {
let text = o.get_text();
// Ensure we don't get newlines in the command; the history file is
// newline-separated.
@@ -416,7 +379,7 @@ LookingGlass.prototype = {
this._historyNavIndex = -1;
return true;
}));
- this._entry.connect('key-press-event', Lang.bind(this, function(o, e) {
+ this._entry.clutter_text.connect('key-press-event', Lang.bind(this, function(o, e) {
let symbol = e.get_key_symbol();
if (symbol == Clutter.Escape) {
this.close();
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
