[gnome-shell] Improve run dialog
- From: Maxim Ermilov <mermilov src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-shell] Improve run dialog
- Date: Fri, 26 Feb 2010 17:23:53 +0000 (UTC)
commit bffadf1b6e23db8fb166956d66c8d75cfad38507
Author: Maxim Ermilov <zaspire rambler ru>
Date: Fri Feb 26 19:32:38 2010 +0300
Improve run dialog
Bind <Ctrl>+<Return> for run in terminal.
Port runDialog to css.
https://bugzilla.gnome.org/show_bug.cgi?id=604978
data/Makefile.am | 1 +
data/theme/dialog-error.svg | 222 +++++++++++++++++++++++++++++++++++++++++++
data/theme/gnome-shell.css | 35 +++++++
js/ui/runDialog.js | 118 ++++++++---------------
4 files changed, 301 insertions(+), 75 deletions(-)
---
diff --git a/data/Makefile.am b/data/Makefile.am
index c191084..8afd703 100644
--- a/data/Makefile.am
+++ b/data/Makefile.am
@@ -23,6 +23,7 @@ dist_theme_DATA = \
theme/close-window.svg \
theme/close.svg \
theme/corner-ripple.png \
+ theme/dialog-error.svg \
theme/gnome-shell.css \
theme/mosaic-view-active.svg \
theme/mosaic-view.svg \
diff --git a/data/theme/dialog-error.svg b/data/theme/dialog-error.svg
new file mode 100644
index 0000000..88c4ef7
--- /dev/null
+++ b/data/theme/dialog-error.svg
@@ -0,0 +1,222 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/";
+ xmlns:cc="http://creativecommons.org/ns#";
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#";
+ xmlns:svg="http://www.w3.org/2000/svg";
+ xmlns="http://www.w3.org/2000/svg";
+ xmlns:xlink="http://www.w3.org/1999/xlink";
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd";
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape";
+ width="24"
+ height="24"
+ id="svg4908"
+ sodipodi:version="0.32"
+ inkscape:version="0.47 r22583"
+ sodipodi:docname="dialog-error.svg"
+ inkscape:output_extension="org.inkscape.output.svg.inkscape"
+ inkscape:export-filename="/home/andreas/project/gnome-icon-theme/scalable/actions/process-stop.png"
+ inkscape:export-xdpi="90"
+ inkscape:export-ydpi="90"
+ version="1.0">
+ <defs
+ id="defs4910">
+ <inkscape:perspective
+ sodipodi:type="inkscape:persp3d"
+ inkscape:vp_x="0 : 24 : 1"
+ inkscape:vp_y="0 : 1000 : 0"
+ inkscape:vp_z="48 : 24 : 1"
+ inkscape:persp3d-origin="24 : 16 : 1"
+ id="perspective25" />
+ <radialGradient
+ gradientTransform="matrix(1.349881,0,0,1.349881,-3.498814,-1.810859)"
+ gradientUnits="userSpaceOnUse"
+ r="9.7183542"
+ fy="4.9892726"
+ fx="9.6893959"
+ cy="4.9892726"
+ cx="9.6893959"
+ id="radialGradient5177"
+ xlink:href="#linearGradient5171"
+ inkscape:collect="always" />
+ <radialGradient
+ gradientTransform="matrix(2.417917,0,0,2.417917,-14.17917,-4.903184)"
+ gradientUnits="userSpaceOnUse"
+ r="9.7785711"
+ fy="3.458019"
+ fx="10"
+ cy="3.458019"
+ cx="10"
+ id="radialGradient5157"
+ xlink:href="#linearGradient5151"
+ inkscape:collect="always" />
+ <radialGradient
+ gradientUnits="userSpaceOnUse"
+ gradientTransform="matrix(0.928125,0,0,0.3143011,0.7718789,12.358015)"
+ r="9.0598059"
+ fy="18.022524"
+ fx="10.739184"
+ cy="18.022524"
+ cx="10.739184"
+ id="radialGradient5145"
+ xlink:href="#linearGradient5139"
+ inkscape:collect="always" />
+ <linearGradient
+ id="linearGradient5139"
+ inkscape:collect="always">
+ <stop
+ id="stop5141"
+ offset="0"
+ style="stop-color:black;stop-opacity:1;" />
+ <stop
+ id="stop5143"
+ offset="1"
+ style="stop-color:black;stop-opacity:0;" />
+ </linearGradient>
+ <linearGradient
+ id="linearGradient5151"
+ inkscape:collect="always">
+ <stop
+ id="stop5153"
+ offset="0"
+ style="stop-color:white;stop-opacity:1;" />
+ <stop
+ id="stop5155"
+ offset="1"
+ style="stop-color:white;stop-opacity:0;" />
+ </linearGradient>
+ <linearGradient
+ id="linearGradient5171">
+ <stop
+ id="stop5173"
+ offset="0"
+ style="stop-color:#fe3a00;stop-opacity:1" />
+ <stop
+ id="stop5175"
+ offset="1"
+ style="stop-color:#c00;stop-opacity:1;" />
+ </linearGradient>
+ </defs>
+ <sodipodi:namedview
+ id="base"
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1.0"
+ inkscape:pageopacity="0.0"
+ inkscape:pageshadow="2"
+ inkscape:zoom="22.627417"
+ inkscape:cx="24.442987"
+ inkscape:cy="10.142308"
+ inkscape:current-layer="g7001"
+ showgrid="false"
+ inkscape:grid-bbox="true"
+ inkscape:document-units="px"
+ showguides="true"
+ inkscape:guide-bbox="true"
+ inkscape:window-width="1674"
+ inkscape:window-height="970"
+ inkscape:window-x="0"
+ inkscape:window-y="26"
+ width="48px"
+ height="48px"
+ inkscape:window-maximized="0" />
+ <metadata
+ id="metadata4913">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage"; />
+ <dc:title>Stop Process</dc:title>
+ <dc:date>December 2006</dc:date>
+ <dc:creator>
+ <cc:Agent>
+ <dc:title>Jakub Steiner</dc:title>
+ </cc:Agent>
+ </dc:creator>
+ <dc:contributor>
+ <cc:Agent>
+ <dc:title>Andreas Nilsson</dc:title>
+ </cc:Agent>
+ </dc:contributor>
+ <cc:license
+ rdf:resource="http://creativecommons.org/licenses/GPL/2.0/"; />
+ <dc:subject>
+ <rdf:Bag>
+ <rdf:li>stop</rdf:li>
+ <rdf:li>halt</rdf:li>
+ </rdf:Bag>
+ </dc:subject>
+ </cc:Work>
+ <cc:License
+ rdf:about="http://creativecommons.org/licenses/GPL/2.0/";>
+ <cc:permits
+ rdf:resource="http://web.resource.org/cc/Reproduction"; />
+ <cc:permits
+ rdf:resource="http://web.resource.org/cc/Distribution"; />
+ <cc:requires
+ rdf:resource="http://web.resource.org/cc/Notice"; />
+ <cc:permits
+ rdf:resource="http://web.resource.org/cc/DerivativeWorks"; />
+ <cc:requires
+ rdf:resource="http://web.resource.org/cc/ShareAlike"; />
+ <cc:requires
+ rdf:resource="http://web.resource.org/cc/SourceCode"; />
+ </cc:License>
+ </rdf:RDF>
+ </metadata>
+ <g
+ id="layer1"
+ inkscape:label="Layer 1"
+ inkscape:groupmode="layer"
+ transform="translate(0,-24)">
+ <g
+ inkscape:label="Layer 1"
+ id="g7001"
+ transform="matrix(1.4566048,0,0,1.4455352,0.4112881,1.2324709)">
+ <path
+ transform="matrix(0.91468137,0,0,0.70055266,-1.8812476,17.474032)"
+ d="m 19.79899,18.022524 a 9.0598059,3.0935922 0 1 1 -18.1196115,0 9.0598059,3.0935922 0 1 1 18.1196115,0 z"
+ sodipodi:ry="3.0935922"
+ sodipodi:rx="9.0598059"
+ sodipodi:cy="18.022524"
+ sodipodi:cx="10.739184"
+ id="path5137"
+ style="color:#000000;fill:url(#radialGradient5145);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible"
+ sodipodi:type="arc" />
+ <path
+ transform="matrix(0.87347736,0,0,0.83068052,-0.79308842,15.602788)"
+ d="m 19.25,9.625 a 9.25,9.25 0 1 1 -18.5,0 9.25,9.25 0 1 1 18.5,0 z"
+ sodipodi:ry="9.25"
+ sodipodi:rx="9.25"
+ sodipodi:cy="9.625"
+ sodipodi:cx="10"
+ id="path4262"
+ style="color:#000000;fill:url(#radialGradient5177);fill-opacity:1;fill-rule:nonzero;stroke:#a40000;stroke-width:0.47435912;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible"
+ sodipodi:type="arc" />
+ <path
+ sodipodi:type="arc"
+ style="opacity:0.35393258;color:#000000;fill:none;stroke:url(#radialGradient5157);stroke-width:0.49999994;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible"
+ id="path5149"
+ sodipodi:cx="10"
+ sodipodi:cy="9.625"
+ sodipodi:rx="9.25"
+ sodipodi:ry="9.25"
+ d="m 19.25,9.625 a 9.25,9.25 0 1 1 -18.5,0 9.25,9.25 0 1 1 18.5,0 z"
+ transform="matrix(0.82868359,0,0,0.78808147,-0.34515141,16.012803)" />
+ <path
+ sodipodi:nodetypes="cc"
+ id="path5159"
+ d="m 4.834121,20.642783 6.215127,5.91061"
+ style="color:#000000;fill:none;stroke:#ffffff;stroke-width:1.21219134;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible" />
+ <path
+ style="color:#000000;fill:none;stroke:#ffffff;stroke-width:1.21219146;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible"
+ d="M 11.04925,20.622826 4.8159529,26.553393"
+ id="path5161"
+ sodipodi:nodetypes="cc" />
+ </g>
+ </g>
+</svg>
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index f5ab8a4..31c75ff 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -748,3 +748,38 @@ StTooltip {
background: transparent;
border-radius: 4px;
}
+
+/* Run Dialog */
+.run-dialog-label {
+ font: 12px sans-serif;
+ color: white;
+}
+
+.run-dialog-error-icon {
+ background-image: url("dialog-error.svg");
+ width: 36px;
+ height: 36px;
+}
+
+.run-dialog-error-label {
+ font: 16px sans-serif;
+ color: white;
+}
+
+.run-dialog-entry {
+ font: 14px sans-serif;
+ font-weight: bold;
+ width: 320px;
+ color: white;
+}
+
+.run-dialog-box {
+ background: rgba(0,0,0,0.3);
+}
+
+.run-dialog {
+ padding: 8px;
+ border: 1px solid rgba(128,128,128,0.40);
+ border-radius: 4px;
+ background: rgba(0,0,0,0.8);
+}
diff --git a/js/ui/runDialog.js b/js/ui/runDialog.js
index de8d081..e33a509 100644
--- a/js/ui/runDialog.js
+++ b/js/ui/runDialog.js
@@ -9,22 +9,12 @@ const Mainloop = imports.mainloop;
const Meta = imports.gi.Meta;
const Shell = imports.gi.Shell;
const Signals = imports.signals;
+const St = imports.gi.St;
const Gettext = imports.gettext.domain('gnome-shell');
const _ = Gettext.gettext;
-const Lightbox = imports.ui.lightbox;
const Main = imports.ui.main;
-const BOX_BACKGROUND_COLOR = new Clutter.Color();
-BOX_BACKGROUND_COLOR.from_pixel(0x000000cc);
-
-const BOX_TEXT_COLOR = new Clutter.Color();
-BOX_TEXT_COLOR.from_pixel(0xffffffff);
-
-const DIALOG_WIDTH = 320;
-const DIALOG_PADDING = 6;
-const ICON_SIZE = 24;
-const ICON_BOX_SIZE = 36;
const MAX_FILE_DELETED_BEFORE_INVALID = 10;
function CommandCompleter() {
@@ -210,87 +200,60 @@ RunDialog.prototype = {
// All actors are inside _group. We create it initially
// hidden then show it in show()
this._group = new Clutter.Group({ visible: false,
- x: 0,
- y: 0,
- width: global.screen_width,
- height: global.screen_height });
+ x: 0, y: 0 });
global.stage.add_actor(this._group);
- let lightbox = new Lightbox.Lightbox(this._group, true);
-
- this._boxH = new Big.Box({ orientation: Big.BoxOrientation.HORIZONTAL,
- x_align: Big.BoxAlignment.CENTER,
- y_align: Big.BoxAlignment.CENTER });
-
- this._group.add_actor(this._boxH);
- lightbox.highlight(this._boxH);
+ this._box = new St.Bin({ style_class: 'run-dialog-box',
+ x_align: St.Align.MIDDLE,
+ y_align: St.Align.MIDDLE,
+ reactive: true });
- let boxV = new Big.Box({ orientation: Big.BoxOrientation.VERTICAL,
- y_align: Big.BoxAlignment.CENTER });
+ this._group.add_actor(this._box);
- this._boxH.append(boxV, Big.BoxPackFlags.NONE);
+ let dialogBox = new St.BoxLayout({ style_class: 'run-dialog', vertical: true });
+ this._box.set_child(dialogBox);
- let dialogBox = new Big.Box({ orientation: Big.BoxOrientation.VERTICAL,
- background_color: BOX_BACKGROUND_COLOR,
- corner_radius: 4,
- reactive: false,
- padding: DIALOG_PADDING,
- width: DIALOG_WIDTH });
+ let label = new St.Label({ style_class: 'run-dialog-label',
+ text: _("Please enter a command:") });
- this._boxH.append(dialogBox, Big.BoxPackFlags.NONE);
+ dialogBox.add(label, { expand: true, y_fill: false });
- let label = new Clutter.Text({ color: BOX_TEXT_COLOR,
- font_name: '18px Sans',
- text: _("Please enter a command:") });
+ let entry = new St.Entry({ style_class: 'run-dialog-entry' });
- dialogBox.append(label, Big.BoxPackFlags.EXPAND);
+ this._entryText = entry.clutter_text;
+ dialogBox.add(entry, { expand: true });
- this._entry = new Clutter.Text({ color: BOX_TEXT_COLOR,
- font_name: '20px Sans Bold',
- editable: true,
- activatable: true,
- singleLineMode: true });
+ this._errorBox = new St.BoxLayout();
- dialogBox.append(this._entry, Big.BoxPackFlags.EXPAND);
+ dialogBox.add(this._errorBox, { expand: true });
- this._errorBox = new Big.Box({ orientation: Big.BoxOrientation.HORIZONTAL,
- padding_top: DIALOG_PADDING });
+ let errorIcon = new St.Button({ style_class: 'run-dialog-error-icon' });
- dialogBox.append(this._errorBox, Big.BoxPackFlags.EXPAND);
-
- let iconBox = new Big.Box({ orientation: Big.BoxOrientation.VERTICAL,
- y_align: Big.BoxAlignment.CENTER,
- x_align: Big.BoxAlignment.CENTER,
- width: ICON_BOX_SIZE,
- height: ICON_BOX_SIZE });
-
- this._errorBox.append(iconBox, Big.BoxPackFlags.NONE);
+ this._errorBox.add(errorIcon);
this._commandError = false;
- let errorIcon = Shell.TextureCache.get_default().load_icon_name("gtk-dialog-error", ICON_SIZE);
- iconBox.append(errorIcon, Big.BoxPackFlags.EXPAND);
-
- this._errorMessage = new Clutter.Text({ color: BOX_TEXT_COLOR,
- font_name: '18px Sans Bold',
- line_wrap: true });
+ this._errorMessage = new St.Label({ style_class: 'run-dialog-error-label' });
+ this._errorMessage.clutter_text.line_wrap = true;
- this._errorBox.append(this._errorMessage, Big.BoxPackFlags.EXPAND);
+ this._errorBox.add(this._errorMessage, { expand: true });
this._errorBox.hide();
- this._entry.connect('activate', Lang.bind(this, function (o, e) {
- this._run(o.get_text());
- if (!this._commandError)
- this.close();
- }));
-
this._pathCompleter = new Gio.FilenameCompleter();
this._commandCompleter = new CommandCompleter();
this._group.connect('notify::visible', Lang.bind(this._commandCompleter, this._commandCompleter.update));
- this._entry.connect('key-press-event', Lang.bind(this, function(o, e) {
+ this._entryText.connect('key-press-event', Lang.bind(this, function(o, e) {
let symbol = e.get_key_symbol();
+ if (symbol == Clutter.Return) {
+ if (e.get_state() & Clutter.ModifierType.CONTROL_MASK)
+ this._run(o.get_text(), true);
+ else
+ this._run(o.get_text(), false);
+ if (!this._commandError)
+ this.close();
+ }
if (symbol == Clutter.Escape) {
this.close();
return true;
@@ -335,7 +298,7 @@ RunDialog.prototype = {
}
},
- _run : function(command) {
+ _run : function(command, inTerminal) {
this._commandError = false;
let f;
if (this._enableInternalCommands)
@@ -346,8 +309,10 @@ RunDialog.prototype = {
f();
} else if (command) {
try {
+ if (inTerminal)
+ command = 'gnome-terminal -x ' + command;
let [ok, len, args] = GLib.shell_parse_argv(command);
- let p = new Shell.Process({'args' : args});
+ let p = new Shell.Process({ 'args' : args });
p.run();
} catch (e) {
this._commandError = true;
@@ -360,7 +325,10 @@ RunDialog.prototype = {
let m = /.+\((.+)\)/.exec(e);
let errorStr = _("Execution of '%s' failed:").format(command) + "\n" + m[1];
this._errorMessage.set_text(errorStr);
+
this._errorBox.show();
+ // preferred_size change. Without this, message will show with delay
+ this._errorBox.get_parent().queue_relayout();
}
}
},
@@ -375,13 +343,13 @@ RunDialog.prototype = {
// Position the dialog on the current monitor
let monitor = global.get_focus_monitor();
- this._boxH.set_position(monitor.x, monitor.y);
- this._boxH.set_size(monitor.width, monitor.height);
+ this._box.set_position(monitor.x, monitor.y);
+ this._box.set_size(monitor.width, monitor.height);
this._isOpen = true;
this._group.show();
- global.stage.set_key_focus(this._entry);
+ global.stage.set_key_focus(this._entryText);
},
close : function() {
@@ -389,12 +357,12 @@ RunDialog.prototype = {
return;
this._isOpen = false;
-
+
this._errorBox.hide();
this._commandError = false;
this._group.hide();
- this._entry.set_text('');
+ this._entryText.set_text('');
Main.popModal(this._group);
}
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
