isa/gnome-shell
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

modalDialog: Match gtk+ buttons style

Browse Source 
Follow the design we have in gtk+ for buttons dialogs,
which are at the bottom and they expand full width, having
the same amount of space for each one.

Also, since this removes any space for non-button widgets
in the button area, move the spinner present in the auth prompt
dialog next to the password entry.

https://bugzilla.gnome.org/show_bug.cgi?id=746108
This commit is contained in:
Carlos Soriano
2015-07-29 13:45:11 +02:00
committed by Florian Müllner
parent e92f43b83e
commit 741c84bc41
7 changed files with 227 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
js/ui/components/keyring.js
View File

@@ -9,9 +9,15 @@ const Gio = imports.gi.Gio;
const GObject = imports.gi.GObject;
const Gcr = imports.gi.Gcr;
const Animation = imports.ui.animation;
const ModalDialog = imports.ui.modalDialog;
const ShellEntry = imports.ui.shellEntry;
const CheckBox = imports.ui.checkBox;
const Tweener = imports.ui.tweener;
const WORK_SPINNER_ICON_SIZE = 24;
const WORK_SPINNER_ANIMATION_DELAY = 1.0;
const WORK_SPINNER_ANIMATION_TIME = 0.3;
const KeyringDialog = new Lang.Class({
Name: 'KeyringDialog',
@@ -58,27 +64,54 @@ const KeyringDialog = new Lang.Class({
{ y_fill: true,
y_align: St.Align.START });
this._workSpinner = null;
this._controlTable = null;
this._cancelButton = this.addButton({ label: '',
action: Lang.bind(this, this._onCancelButton),
key: Clutter.Escape },
{ expand: true, x_fill: false, x_align: St.Align.START });
this.placeSpinner({ expand: false,
x_fill: false,
y_fill: false,
x_align: St.Align.END,
y_align: St.Align.MIDDLE });
key: Clutter.Escape });
this._continueButton = this.addButton({ label: '',
action: Lang.bind(this, this._onContinueButton),
default: true },
{ expand: false, x_fill: false, x_align: St.Align.END });
default: true });
this.prompt.bind_property('cancel-label', this._cancelButton, 'label', GObject.BindingFlags.SYNC_CREATE);
this.prompt.bind_property('continue-label', this._continueButton, 'label', GObject.BindingFlags.SYNC_CREATE);
},
_createSpinner: function() {
let spinnerIcon = Gio.File.new_for_uri('resource:///org/gnome/shell/theme/process-working.svg');
this._workSpinner = new Animation.AnimatedIcon(spinnerIcon, WORK_SPINNER_ICON_SIZE);
this._workSpinner.actor.opacity = 0;
this._workSpinner.actor.show();
},
_setWorking: function(working) {
if (!this._workSpinner)
return;
Tweener.removeTweens(this._workSpinner.actor);
if (working) {
this._workSpinner.play();
Tweener.addTween(this._workSpinner.actor,
{ opacity: 255,
delay: WORK_SPINNER_ANIMATION_DELAY,
time: WORK_SPINNER_ANIMATION_TIME,
transition: 'linear'
});
} else {
Tweener.addTween(this._workSpinner.actor,
{ opacity: 0,
time: WORK_SPINNER_ANIMATION_TIME,
transition: 'linear',
onCompleteScope: this,
onComplete: function() {
if (this._workSpinner)
this._workSpinner.stop();
}
});
}
},
_buildControlTable: function() {
let layout = new Clutter.GridLayout({ orientation: Clutter.Orientation.VERTICAL });
let table = new St.Widget({ style_class: 'keyring-dialog-control-table',
@@ -101,15 +134,19 @@ const KeyringDialog = new Lang.Class({
ShellEntry.addContextMenu(this._passwordEntry, { isPassword: true });
this._passwordEntry.clutter_text.connect('activate', Lang.bind(this, this._onPasswordActivate));
this._createSpinner();
if (rtl) {
layout.attach(this._passwordEntry, 0, row, 1, 1);
layout.attach(label, 1, row, 1, 1);
layout.attach(this._workSpinner.actor, 0, row, 1, 1);
layout.attach(this._passwordEntry, 1, row, 1, 1);
layout.attach(label, 2, row, 1, 1);
} else {
layout.attach(label, 0, row, 1, 1);
layout.attach(this._passwordEntry, 1, row, 1, 1);
layout.attach(this._workSpinner.actor, 2, row, 1, 1);
}
row++;
} else {
this._workSpinner = null;
this._passwordEntry = null;
}
@@ -178,7 +215,7 @@ const KeyringDialog = new Lang.Class({
this._continueButton.can_focus = sensitive;
this._continueButton.reactive = sensitive;
this.setWorking(!sensitive);
this._setWorking(!sensitive);
},
_ensureOpen: function() {

53
js/ui/components/polkitAgent.js
View File

@@ -13,13 +13,19 @@ const Mainloop = imports.mainloop;
const Polkit = imports.gi.Polkit;
const PolkitAgent = imports.gi.PolkitAgent;
const Animation = imports.ui.animation;
const Components = imports.ui.components;
const ModalDialog = imports.ui.modalDialog;
const ShellEntry = imports.ui.shellEntry;
const UserWidget = imports.ui.userWidget;
const Tweener = imports.ui.tweener;
const DIALOG_ICON_SIZE = 48;
const WORK_SPINNER_ICON_SIZE = 24;
const WORK_SPINNER_ANIMATION_DELAY = 1.0;
const WORK_SPINNER_ANIMATION_TIME = 0.3;
const AuthenticationDialog = new Lang.Class({
Name: 'AuthenticationDialog',
Extends: ModalDialog.ModalDialog,
@@ -136,6 +142,7 @@ const AuthenticationDialog = new Lang.Class({
this._passwordEntry.clutter_text.connect('activate', Lang.bind(this, this._onEntryActivate));
this._passwordBox.add(this._passwordEntry,
{ expand: true });
this._addSpinner();
this.setInitialKeyFocus(this._passwordEntry);
this._passwordBox.hide();
@@ -165,17 +172,10 @@ const AuthenticationDialog = new Lang.Class({
this._cancelButton = this.addButton({ label: _("Cancel"),
action: Lang.bind(this, this.cancel),
key: Clutter.Escape },
{ expand: true, x_fill: false, x_align: St.Align.START });
this.placeSpinner({ expand: false,
x_fill: false,
y_fill: false,
x_align: St.Align.END,
y_align: St.Align.MIDDLE });
key: Clutter.Escape });
this._okButton = this.addButton({ label: _("Authenticate"),
action: Lang.bind(this, this._onAuthenticateButtonPressed),
default: true },
{ expand: false, x_fill: false, x_align: St.Align.END });
default: true });
this._doneEmitted = false;
@@ -183,6 +183,39 @@ const AuthenticationDialog = new Lang.Class({
this._cookie = cookie;
},
_addSpinner: function() {
let spinnerIcon = Gio.File.new_for_uri('resource:///org/gnome/shell/theme/process-working.svg');
this._workSpinner = new Animation.AnimatedIcon(spinnerIcon, WORK_SPINNER_ICON_SIZE);
this._workSpinner.actor.opacity = 0;
this._workSpinner.actor.show();
this._passwordBox.add(this._workSpinner.actor);
},
_setWorking: function(working) {
Tweener.removeTweens(this._workSpinner.actor);
if (working) {
this._workSpinner.play();
Tweener.addTween(this._workSpinner.actor,
{ opacity: 255,
delay: WORK_SPINNER_ANIMATION_DELAY,
time: WORK_SPINNER_ANIMATION_TIME,
transition: 'linear'
});
} else {
Tweener.addTween(this._workSpinner.actor,
{ opacity: 0,
time: WORK_SPINNER_ANIMATION_TIME,
transition: 'linear',
onCompleteScope: this,
onComplete: function() {
if (this._workSpinner)
this._workSpinner.stop();
}
});
}
},
performAuthentication: function() {
this.destroySession();
this._session = new PolkitAgent.Session({ identity: this._identityToAuth,
@@ -229,7 +262,7 @@ const AuthenticationDialog = new Lang.Class({
this._okButton.can_focus = sensitive;
this._okButton.reactive = sensitive;
this.setWorking(!sensitive);
this._setWorking(!sensitive);
},
_onEntryActivate: function() {

69
js/ui/modalDialog.js
View File

@@ -14,7 +14,6 @@ const Atk = imports.gi.Atk;
const Params = imports.misc.params;
const Animation = imports.ui.animation;
const Layout = imports.ui.layout;
const Lightbox = imports.ui.lightbox;
const Main = imports.ui.main;
@@ -23,10 +22,6 @@ const Tweener = imports.ui.tweener;
const OPEN_AND_CLOSE_TIME = 0.1;
const FADE_OUT_DIALOG_TIME = 1.0;
const WORK_SPINNER_ICON_SIZE = 24;
const WORK_SPINNER_ANIMATION_DELAY = 1.0;
const WORK_SPINNER_ANIMATION_TIME = 0.3;
const State = {
OPENED: 0,
CLOSED: 1,
@@ -79,7 +74,9 @@ const ModalDialog = new Lang.Class({
this._group.add_actor(this._backgroundBin);
this.dialogLayout = new St.BoxLayout({ style_class: 'modal-dialog',
vertical: true });
x_align: Clutter.ActorAlign.CENTER,
y_align: Clutter.ActorAlign.CENTER,
vertical: true });
// modal dialogs are fixed width and grow vertically; set the request
// mode accordingly so wrapped labels are handled correctly during
// size requests.
@@ -100,7 +97,8 @@ const ModalDialog = new Lang.Class({
this.backgroundStack.add_actor(this.dialogLayout);
this.contentLayout = new St.BoxLayout({ vertical: true });
this.contentLayout = new St.BoxLayout({ vertical: true,
style_class: "modal-dialog-content-box" });
this.dialogLayout.add(this.contentLayout,
{ expand: true,
x_fill: true,
@@ -108,8 +106,7 @@ const ModalDialog = new Lang.Class({
x_align: St.Align.MIDDLE,
y_align: St.Align.START });
this.buttonLayout = new St.BoxLayout({ style_class: 'modal-dialog-button-box',
vertical: false });
this.buttonLayout = new St.Widget ({ layout_manager: new Clutter.BoxLayout ({ homogeneous:true }) });
this.dialogLayout.add(this.buttonLayout,
{ x_align: St.Align.MIDDLE,
y_align: St.Align.END });
@@ -118,8 +115,6 @@ const ModalDialog = new Lang.Class({
this._initialKeyFocus = this.dialogLayout;
this._initialKeyFocusDestroyId = 0;
this._savedKeyFocus = null;
this._workSpinner = null;
},
destroy: function() {
@@ -147,16 +142,12 @@ const ModalDialog = new Lang.Class({
else
x_alignment = St.Align.MIDDLE;
this.addButton(buttonInfo, { expand: true,
x_fill: false,
y_fill: false,
x_align: x_alignment,
y_align: St.Align.MIDDLE });
this.addButton(buttonInfo);
}
},
addButton: function(buttonInfo, layoutInfo) {
let label = buttonInfo['label'];
addButton: function(buttonInfo) {
let label = buttonInfo['label']
let action = buttonInfo['action'];
let key = buttonInfo['key'];
let isDefault = buttonInfo['default'];
@@ -170,10 +161,12 @@ const ModalDialog = new Lang.Class({
else
keys = [];
let button = new St.Button({ style_class: 'modal-dialog-button button',
let button = new St.Button({ style_class: 'modal-dialog-linked-button',
button_mask: St.ButtonMask.ONE | St.ButtonMask.THREE,
reactive: true,
can_focus: true,
x_expand: true,
y_expand: true,
label: label });
button.connect('clicked', action);
@@ -188,47 +181,11 @@ const ModalDialog = new Lang.Class({
for (let i in keys)
this._buttonKeys[keys[i]] = buttonInfo;
this.buttonLayout.add(button, layoutInfo);
this.buttonLayout.add_actor(button);
return button;
},
placeSpinner: function(layoutInfo) {
let spinnerIcon = Gio.File.new_for_uri('resource:///org/gnome/shell/theme/process-working.svg');
this._workSpinner = new Animation.AnimatedIcon(spinnerIcon, WORK_SPINNER_ICON_SIZE);
this._workSpinner.actor.opacity = 0;
this._workSpinner.actor.show();
this.buttonLayout.add(this._workSpinner.actor, layoutInfo);
},
setWorking: function(working) {
if (!this._workSpinner)
return;
Tweener.removeTweens(this._workSpinner.actor);
if (working) {
this._workSpinner.play();
Tweener.addTween(this._workSpinner.actor,
{ opacity: 255,
delay: WORK_SPINNER_ANIMATION_DELAY,
time: WORK_SPINNER_ANIMATION_TIME,
transition: 'linear'
});
} else {
Tweener.addTween(this._workSpinner.actor,
{ opacity: 0,
time: WORK_SPINNER_ANIMATION_TIME,
transition: 'linear',
onCompleteScope: this,
onComplete: function() {
if (this._workSpinner)
this._workSpinner.stop();
}
});
}
},
_onKeyPressEvent: function(object, event) {
this._pressedKey = event.get_key_symbol();
return Clutter.EVENT_PROPAGATE;

5
js/ui/status/network.js
View File

@@ -917,10 +917,7 @@ const NMWirelessDialog = new Lang.Class({
key: Clutter.Escape });
this._connectButton = this.addButton({ action: Lang.bind(this, this._connect),
label: _("Connect"),
key: Clutter.Return },
{ expand: true,
x_fill: false,
x_align: St.Align.END });
key: Clutter.Return });
},
_connect: function() {

6
js/ui/windowManager.js
View File

@@ -81,12 +81,10 @@ const DisplayChangeDialog = new Lang.Class({
*/
this._cancelButton = this.addButton({ label: _("Revert Settings"),
action: Lang.bind(this, this._onFailure),
key: Clutter.Escape },
{ expand: true, x_fill: false, x_align: St.Align.START });
key: Clutter.Escape });
this._okButton = this.addButton({ label: _("Keep Changes"),
action: Lang.bind(this, this._onSuccess),
default: true },
{ expand: false, x_fill: false, x_align: St.Align.END });
default: true });
this._timeoutId = Mainloop.timeout_add(ONE_SECOND, Lang.bind(this, this._tick));
GLib.Source.set_name_by_id(this._timeoutId, '[gnome-shell] this._tick');