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

Improve the display of search results

Browse Source 
Use bigger font and brighter color for the search results section headers.
Add more padding.

Display "(see all)" tooltip in the section headers on mouse-over.
(Still TODO: supressing that tooltip when all results are already being shown.)
This commit is contained in:
Marina Zhurakhinskaya 2009-08-28 13:37:03 -04:00 committed by Owen W. Taylor
parent 7a87474bcd
commit a230ad9225
2 changed files with 68 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
js/ui/button.js
View File

@ -4,8 +4,8 @@ const Big = imports.gi.Big;
const Clutter = imports.gi.Clutter; const Clutter = imports.gi.Clutter;
const Lang = imports.lang; const Lang = imports.lang;
const Mainloop = imports.mainloop; const Mainloop = imports.mainloop;
const Shell = imports.gi.Shell; const Shell = imports.gi.Shell;
const Signals = imports.signals;
const Tweener = imports.ui.tweener; const Tweener = imports.ui.tweener;
const DEFAULT_BUTTON_COLOR = new Clutter.Color(); const DEFAULT_BUTTON_COLOR = new Clutter.Color();
@ -95,6 +95,7 @@ Button.prototype = {
if (!me._active) { if (!me._active) {
me.button.backgroundColor = me._buttonColor; me.button.backgroundColor = me._buttonColor;
} }
me.emit('enter-event');
return false; return false;
}); });
this.button.connect('leave-event', this.button.connect('leave-event',
@ -104,6 +105,7 @@ Button.prototype = {
if (!me._active) { if (!me._active) {
me.button.backgroundColor = null; me.button.backgroundColor = null;
} }
me.emit('leave-event');
return false; return false;
}); });
}, },
@ -127,6 +129,8 @@ Button.prototype = {
} }
}; };
Signals.addSignalMethods(Button.prototype);
/* Delay before the icon should appear, in seconds after the pointer has entered the parent */ /* Delay before the icon should appear, in seconds after the pointer has entered the parent */
const ANIMATION_TIME = 0.25; const ANIMATION_TIME = 0.25;

82
js/ui/dash.js
View File

@ -19,6 +19,7 @@ const Button = imports.ui.button;
const Main = imports.ui.main; const Main = imports.ui.main;
const DEFAULT_PADDING = 4; const DEFAULT_PADDING = 4;
const DEFAULT_SPACING = 4;
const DASH_SECTION_PADDING = 6; const DASH_SECTION_PADDING = 6;
const DASH_SECTION_SPACING = 40; const DASH_SECTION_SPACING = 40;
const DASH_CORNER_RADIUS = 5; const DASH_CORNER_RADIUS = 5;
@ -32,6 +33,8 @@ PRELIGHT_COLOR.from_pixel(0x4f6fadaa);
const TEXT_COLOR = new Clutter.Color(); const TEXT_COLOR = new Clutter.Color();
TEXT_COLOR.from_pixel(0x5f5f5fff); TEXT_COLOR.from_pixel(0x5f5f5fff);
const BRIGHTER_TEXT_COLOR = new Clutter.Color();
BRIGHTER_TEXT_COLOR.from_pixel(0xbbbbbbff);
const BRIGHT_TEXT_COLOR = new Clutter.Color(); const BRIGHT_TEXT_COLOR = new Clutter.Color();
BRIGHT_TEXT_COLOR.from_pixel(0xffffffff); BRIGHT_TEXT_COLOR.from_pixel(0xffffffff);
const SEARCH_TEXT_COLOR = new Clutter.Color(); const SEARCH_TEXT_COLOR = new Clutter.Color();
@ -401,7 +404,9 @@ SectionHeader.prototype = {
this._innerBox = new Big.Box({ border: SECTION_BORDER, this._innerBox = new Big.Box({ border: SECTION_BORDER,
border_color: SECTION_INNER_BORDER_COLOR, border_color: SECTION_INNER_BORDER_COLOR,
padding_left: DEFAULT_PADDING, padding_left: DEFAULT_PADDING,
orientation: Big.BoxOrientation.HORIZONTAL }); padding_right: DEFAULT_PADDING,
orientation: Big.BoxOrientation.HORIZONTAL,
spacing: DEFAULT_SPACING });
this.actor.append(this._innerBox, Big.BoxPackFlags.EXPAND); this.actor.append(this._innerBox, Big.BoxPackFlags.EXPAND);
let backgroundGradient = Shell.create_vertical_gradient(SECTION_BACKGROUND_TOP_COLOR, let backgroundGradient = Shell.create_vertical_gradient(SECTION_BACKGROUND_TOP_COLOR,
SECTION_BACKGROUND_BOTTOM_COLOR); SECTION_BACKGROUND_BOTTOM_COLOR);
@ -410,13 +415,17 @@ SectionHeader.prototype = {
let [width, height] = actor.get_size(); let [width, height] = actor.get_size();
backgroundGradient.set_size(width, height); backgroundGradient.set_size(width, height);
})); }));
let textBox = new Big.Box({ padding_top: DEFAULT_PADDING,
let textBox = new Big.Box({ orientation: Big.BoxOrientation.HORIZONTAL,
padding_top: DEFAULT_PADDING,
padding_bottom: DEFAULT_PADDING }); padding_bottom: DEFAULT_PADDING });
let text = new Clutter.Text({ color: TEXT_COLOR, this.text = new Clutter.Text({ color: TEXT_COLOR,
font_name: "Sans Bold 12px", font_name: "Sans Bold 12px",
text: title }); text: title });
textBox.append(text, Big.BoxPackFlags.NONE); textBox.append(this.text, Big.BoxPackFlags.NONE);
this._innerBox.append(textBox, Big.BoxPackFlags.EXPAND); this._innerBox.append(textBox, Big.BoxPackFlags.EXPAND);
if (!suppressBrowse) { if (!suppressBrowse) {
this.moreLink = new MoreLink(); this.moreLink = new MoreLink();
this._innerBox.append(this.moreLink.actor, Big.BoxPackFlags.END); this._innerBox.append(this.moreLink.actor, Big.BoxPackFlags.END);
@ -432,16 +441,24 @@ SearchSectionHeader.prototype = {
_init : function(title, onClick) { _init : function(title, onClick) {
let box = new Big.Box({ orientation: Big.BoxOrientation.HORIZONTAL, let box = new Big.Box({ orientation: Big.BoxOrientation.HORIZONTAL,
padding_top: DASH_SECTION_PADDING, padding_top: DASH_SECTION_PADDING,
padding_bottom: DASH_SECTION_PADDING }); padding_bottom: DASH_SECTION_PADDING,
let titleText = new Clutter.Text({ color: TEXT_COLOR, spacing: DEFAULT_SPACING });
font_name: 'Sans Bold 10px', let titleText = new Clutter.Text({ color: BRIGHTER_TEXT_COLOR,
font_name: 'Sans Bold 12px',
text: title }); text: title });
this.countText = new Clutter.Text({ color: TEXT_COLOR, this.tooltip = new Clutter.Text({ color: BRIGHTER_TEXT_COLOR,
font_name: 'Sans Bold 12px' }); font_name: 'Sans 12px',
text: _("(see all)") });
this.countText = new Clutter.Text({ color: BRIGHTER_TEXT_COLOR,
font_name: 'Sans Bold 14px' });
box.append(titleText, Big.BoxPackFlags.NONE); box.append(titleText, Big.BoxPackFlags.NONE);
box.append(this.tooltip, Big.BoxPackFlags.NONE);
box.append(this.countText, Big.BoxPackFlags.END); box.append(this.countText, Big.BoxPackFlags.END);
this.tooltip.hide();
this._showTooltip = true;
let button = new Button.Button(box, PRELIGHT_COLOR, BACKGROUND_COLOR, let button = new Button.Button(box, PRELIGHT_COLOR, BACKGROUND_COLOR,
TEXT_COLOR, false, null); TEXT_COLOR, false, null);
button.button.height = box.height; button.button.height = box.height;
@ -449,8 +466,29 @@ SearchSectionHeader.prototype = {
button.button.padding_right = DEFAULT_PADDING; button.button.padding_right = DEFAULT_PADDING;
button.button.connect('button-release-event', onClick); button.button.connect('button-release-event', onClick);
button.connect('enter-event', Lang.bind(this, this._onButtonEntered));
button.connect('leave-event', Lang.bind(this, this._onButtonLeft));
this.actor = button.button; this.actor = button.button;
},
_onButtonEntered : function() {
if (this._showTooltip)
this.tooltip.show();
},
_onButtonLeft : function() {
this.tooltip.hide();
},
setShowTooltip : function(showTooltip) {
this._showTooltip = showTooltip;
// Because we only show tooltip on mouse-over,
// we should not just show it here if showTooltip is
// set to true, but in the future we could check if
// the mouse happens to be over the header and show it
// in that case.
if (!this._showTooltip)
this.tooltip.hide();
} }
} }
@ -463,7 +501,7 @@ Section.prototype = {
this.actor = new Big.Box({ spacing: SECTION_INNER_SPACING }); this.actor = new Big.Box({ spacing: SECTION_INNER_SPACING });
this.header = new SectionHeader(titleString, suppressBrowse); this.header = new SectionHeader(titleString, suppressBrowse);
this.actor.append(this.header.actor, Big.BoxPackFlags.NONE); this.actor.append(this.header.actor, Big.BoxPackFlags.NONE);
this.content = new Big.Box(); this.content = new Big.Box({spacing: SECTION_INNER_SPACING });
this.actor.append(this.content, Big.BoxPackFlags.EXPAND); this.actor.append(this.content, Big.BoxPackFlags.EXPAND);
} }
} }
@ -530,9 +568,11 @@ Dash.prototype = {
let text = this._searchEntry.getText(); let text = this._searchEntry.getText();
text = text.replace(/^\s+/g, "").replace(/\s+$/g, ""); text = text.replace(/^\s+/g, "").replace(/\s+$/g, "");
this._appSearchResultArea.display.setSearch(text); this._appSearchResultArea.display.setSearch(text);
this._appSearchHeader.countText.text = this._appSearchResultArea.display.getMatchedItemsCount() + "";
this._docSearchResultArea.display.setSearch(text); this._docSearchResultArea.display.setSearch(text);
this._appSearchHeader.countText.text = this._appSearchResultArea.display.getMatchedItemsCount() + "";
this._docSearchHeader.countText.text = this._docSearchResultArea.display.getMatchedItemsCount() + ""; this._docSearchHeader.countText.text = this._docSearchResultArea.display.getMatchedItemsCount() + "";
return false; return false;
})); }));
})); }));
@ -744,26 +784,30 @@ Dash.prototype = {
_setAppSearchShown: function(show) { _setAppSearchShown: function(show) {
if (show) { if (show) {
this._appSearchHeader.actor.show(); this._appSearchHeader.actor.show();
this._appSearchResultArea.actor.show() this._appSearchResultArea.actor.show();
this._docSearchResultArea.display.displayPage(0); this._docSearchResultArea.display.displayPage(0);
this._docSearchResultArea.controlBox.hide(); this._docSearchResultArea.controlBox.hide();
this._docSearchHeader.setShowTooltip(true);
} else { } else {
this._appSearchHeader.actor.hide(); this._appSearchHeader.actor.hide();
this._appSearchResultArea.actor.hide() this._appSearchResultArea.actor.hide();
this._docSearchResultArea.controlBox.show(); this._docSearchResultArea.controlBox.show();
this._docSearchHeader.setShowTooltip(false);
} }
}, },
_setDocSearchShown: function(show) { _setDocSearchShown: function(show) {
if (show) { if (show) {
this._docSearchHeader.actor.show(); this._docSearchHeader.actor.show();
this._docSearchResultArea.actor.show() this._docSearchResultArea.actor.show();
this._appSearchResultArea.display.displayPage(0); this._appSearchResultArea.display.displayPage(0);
this._appSearchResultArea.controlBox.hide(); this._appSearchResultArea.controlBox.hide();
} else { this._appSearchHeader.setShowTooltip(true);
} else {
this._docSearchHeader.actor.hide(); this._docSearchHeader.actor.hide();
this._docSearchResultArea.actor.hide() this._docSearchResultArea.actor.hide();
this._appSearchResultArea.controlBox.show(); this._appSearchResultArea.controlBox.show();
this._appSearchHeader.setShowTooltip(false);
} }
}, },