Highlight the search entry when the user clicks or starts typing in it
This will give the user a visual indication that the search is active. We need to replace the gray close button in the search entry with a black one.
This commit is contained in:
parent
4245c573df
commit
44d34aba19
@ -22,11 +22,23 @@ const DEFAULT_PADDING = 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;
|
||||||
|
const DASH_PADDING_SIDE = 14;
|
||||||
|
|
||||||
const BACKGROUND_COLOR = new Clutter.Color();
|
const BACKGROUND_COLOR = new Clutter.Color();
|
||||||
BACKGROUND_COLOR.from_pixel(0x000000c0);
|
BACKGROUND_COLOR.from_pixel(0x000000c0);
|
||||||
|
|
||||||
const DASH_PADDING_SIDE = 14;
|
const TEXT_COLOR = new Clutter.Color();
|
||||||
|
TEXT_COLOR.from_pixel(0x5f5f5fff);
|
||||||
|
const BRIGHT_TEXT_COLOR = new Clutter.Color();
|
||||||
|
BRIGHT_TEXT_COLOR.from_pixel(0xffffffff);
|
||||||
|
const SEARCH_TEXT_COLOR = new Clutter.Color();
|
||||||
|
SEARCH_TEXT_COLOR.from_pixel(0x333333ff);
|
||||||
|
|
||||||
|
const SEARCH_CURSOR_COLOR = BRIGHT_TEXT_COLOR;
|
||||||
|
const HIGHLIGHTED_SEARCH_CURSOR_COLOR = SEARCH_TEXT_COLOR;
|
||||||
|
|
||||||
|
const HIGHLIGHTED_SEARCH_BACKGROUND_COLOR = new Clutter.Color();
|
||||||
|
HIGHLIGHTED_SEARCH_BACKGROUND_COLOR.from_pixel(0xc4c4c4ff);
|
||||||
|
|
||||||
const SEARCH_BORDER_BOTTOM_COLOR = new Clutter.Color();
|
const SEARCH_BORDER_BOTTOM_COLOR = new Clutter.Color();
|
||||||
SEARCH_BORDER_BOTTOM_COLOR.from_pixel(0x191919ff);
|
SEARCH_BORDER_BOTTOM_COLOR.from_pixel(0x191919ff);
|
||||||
@ -45,11 +57,6 @@ const SECTION_INNER_SPACING = 8;
|
|||||||
const BROWSE_ACTIVATED_BG = new Clutter.Color();
|
const BROWSE_ACTIVATED_BG = new Clutter.Color();
|
||||||
BROWSE_ACTIVATED_BG.from_pixel(0x303030f0);
|
BROWSE_ACTIVATED_BG.from_pixel(0x303030f0);
|
||||||
|
|
||||||
const TEXT_COLOR = new Clutter.Color();
|
|
||||||
TEXT_COLOR.from_pixel(0x5f5f5fff);
|
|
||||||
const BRIGHT_TEXT_COLOR = new Clutter.Color();
|
|
||||||
BRIGHT_TEXT_COLOR.from_pixel(0xffffffff);
|
|
||||||
|
|
||||||
const PANE_BORDER_COLOR = new Clutter.Color();
|
const PANE_BORDER_COLOR = new Clutter.Color();
|
||||||
PANE_BORDER_COLOR.from_pixel(0x101d3cfa);
|
PANE_BORDER_COLOR.from_pixel(0x101d3cfa);
|
||||||
const PANE_BORDER_WIDTH = 2;
|
const PANE_BORDER_WIDTH = 2;
|
||||||
@ -229,7 +236,13 @@ SearchEntry.prototype = {
|
|||||||
this.actor = new Big.Box({ orientation: Big.BoxOrientation.HORIZONTAL,
|
this.actor = new Big.Box({ orientation: Big.BoxOrientation.HORIZONTAL,
|
||||||
y_align: Big.BoxAlignment.CENTER,
|
y_align: Big.BoxAlignment.CENTER,
|
||||||
border_bottom: SECTION_BORDER,
|
border_bottom: SECTION_BORDER,
|
||||||
border_color: SEARCH_BORDER_BOTTOM_COLOR });
|
border_color: SEARCH_BORDER_BOTTOM_COLOR,
|
||||||
|
reactive: true });
|
||||||
|
this.actor.connect('button-press-event', Lang.bind(this, function () {
|
||||||
|
this._resetTextState(true);
|
||||||
|
return false;
|
||||||
|
}));
|
||||||
|
|
||||||
this.pane = null;
|
this.pane = null;
|
||||||
|
|
||||||
this._defaultText = _("Find apps or documents");
|
this._defaultText = _("Find apps or documents");
|
||||||
@ -238,15 +251,13 @@ SearchEntry.prototype = {
|
|||||||
let entryProperties = { editable: true,
|
let entryProperties = { editable: true,
|
||||||
activatable: true,
|
activatable: true,
|
||||||
single_line_mode: true,
|
single_line_mode: true,
|
||||||
color: BRIGHT_TEXT_COLOR,
|
color: SEARCH_TEXT_COLOR,
|
||||||
cursor_color: BRIGHT_TEXT_COLOR,
|
cursor_color: SEARCH_CURSOR_COLOR };
|
||||||
text: '' };
|
|
||||||
Lang.copyProperties(textProperties, entryProperties);
|
Lang.copyProperties(textProperties, entryProperties);
|
||||||
// We need to initialize the text for the entry to have the cursor displayed
|
|
||||||
// in it. See http://bugzilla.openedhand.com/show_bug.cgi?id=1365
|
|
||||||
this.entry = new Clutter.Text(entryProperties);
|
this.entry = new Clutter.Text(entryProperties);
|
||||||
|
|
||||||
this.entry.connect('notify::text', Lang.bind(this, function () {
|
this.entry.connect('notify::text', Lang.bind(this, function () {
|
||||||
this._resetTextState();
|
this._resetTextState(false);
|
||||||
}));
|
}));
|
||||||
this.actor.append(this.entry, Big.BoxPackFlags.EXPAND);
|
this.actor.append(this.entry, Big.BoxPackFlags.EXPAND);
|
||||||
|
|
||||||
@ -277,7 +288,18 @@ SearchEntry.prototype = {
|
|||||||
closeUri, 18, 18);
|
closeUri, 18, 18);
|
||||||
this._closeIcon.reactive = true;
|
this._closeIcon.reactive = true;
|
||||||
this._closeIcon.connect('button-press-event', Lang.bind(this, function () {
|
this._closeIcon.connect('button-press-event', Lang.bind(this, function () {
|
||||||
|
// Resetting this.entry.text will trigger notify::text signal which will
|
||||||
|
// result in this._resetTextState() being called, but we should not rely
|
||||||
|
// on that not short-circuiting if the text was already empty, so we call
|
||||||
|
// this._resetTextState() explicitly in that case.
|
||||||
|
if (this.entry.text == '')
|
||||||
|
this._resetTextState(false);
|
||||||
|
else
|
||||||
this.entry.text = '';
|
this.entry.text = '';
|
||||||
|
|
||||||
|
// Return true to stop the signal emission, so that this.actor doesn't get
|
||||||
|
// the button-press-event and re-highlight itself.
|
||||||
|
return true;
|
||||||
}));
|
}));
|
||||||
this._repositionDefaultText();
|
this._repositionDefaultText();
|
||||||
this._resetTextState();
|
this._resetTextState();
|
||||||
@ -295,15 +317,22 @@ SearchEntry.prototype = {
|
|||||||
return this.entry.text;
|
return this.entry.text;
|
||||||
},
|
},
|
||||||
|
|
||||||
_resetTextState: function () {
|
_resetTextState: function (searchEntryClicked) {
|
||||||
let text = this.getText();
|
let text = this.getText();
|
||||||
this._iconBox.remove_all();
|
this._iconBox.remove_all();
|
||||||
if (text != '') {
|
// We highlight the search box if the user starts typing in it
|
||||||
|
// or just clicks in it to indicate that the search is active.
|
||||||
|
if (text != '' || searchEntryClicked) {
|
||||||
|
if (!searchEntryClicked)
|
||||||
this._defaultText.hide();
|
this._defaultText.hide();
|
||||||
this._iconBox.append(this._closeIcon, Big.BoxPackFlags.NONE);
|
this._iconBox.append(this._closeIcon, Big.BoxPackFlags.NONE);
|
||||||
|
this.actor.background_color = HIGHLIGHTED_SEARCH_BACKGROUND_COLOR;
|
||||||
|
this.entry.cursor_color = HIGHLIGHTED_SEARCH_CURSOR_COLOR;
|
||||||
} else {
|
} else {
|
||||||
this._defaultText.show();
|
this._defaultText.show();
|
||||||
this._iconBox.append(this._magnifierIcon, Big.BoxPackFlags.NONE);
|
this._iconBox.append(this._magnifierIcon, Big.BoxPackFlags.NONE);
|
||||||
|
this.actor.background_color = BACKGROUND_COLOR;
|
||||||
|
this.entry.cursor_color = SEARCH_CURSOR_COLOR;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user