From 6cd1e38425e7387c1ceac951180c46ef18ea3a24 Mon Sep 17 00:00:00 2001 From: Rui Matos Date: Wed, 2 Jan 2013 13:24:37 +0000 Subject: [PATCH] ibusCandidatePopup: Style updates according to design mockups Make it look more like the mockups. In order to do that we stop using PopupMenu and friends as it doesn't really buy us anything and just makes it more cumbersome to add the style classes we need. https://bugzilla.gnome.org/show_bug.cgi?id=691902 --- data/theme/gnome-shell.css | 28 +++++-- js/ui/ibusCandidatePopup.js | 141 ++++++++++++++++-------------------- 2 files changed, 84 insertions(+), 85 deletions(-) diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css index eb4340a4d..c196f0677 100644 --- a/data/theme/gnome-shell.css +++ b/data/theme/gnome-shell.css @@ -2090,17 +2090,35 @@ StScrollBar StButton#vhandle:active { } /* IBus Candidate Popup */ +.candidate-popup-boxpointer { + -arrow-border-radius: 8px; + -arrow-background-color: #707070; + -arrow-border-width: 0px; + -arrow-base: 24px; + -arrow-rise: 11px; +} + +.candidate-popup-content { + padding: 0.5em; + spacing: 0.3em; +} + +.candidate-popup-text { + font-size: 9pt; +} + .candidate-index { - padding: 0.5em 0.5em 0.5em 0.5em; + padding: 0 0.5em 0 0; + color: #cccccc; } -.candidate-label { - padding: 0.5em 0.5em 0.5em 0.5em; +.candidate-box { + padding: 0.3em 0.5em 0.3em 0.5em; } -.candidate-label:selected { +.candidate-box:selected { border-radius: 4px; - background-color: rgba(255,255,255,0.33); + background-color: rgba(255,255,255,0.2); } /* Login Dialog */ diff --git a/js/ui/ibusCandidatePopup.js b/js/ui/ibusCandidatePopup.js index 043f3caf1..6de5e8768 100644 --- a/js/ui/ibusCandidatePopup.js +++ b/js/ui/ibusCandidatePopup.js @@ -7,30 +7,24 @@ const St = imports.gi.St; const BoxPointer = imports.ui.boxpointer; const Main = imports.ui.main; -const PopupMenu = imports.ui.popupMenu; const MAX_CANDIDATES_PER_PAGE = 16; const CandidateArea = new Lang.Class({ Name: 'CandidateArea', - Extends: PopupMenu.PopupBaseMenuItem, _init: function() { - this.parent({ reactive: false }); - - // St.Table exhibits some sizing problems so let's go with a - // clutter layout manager for now. - this._table = new Clutter.Actor(); - this.addActor(this._table); - - this._tableLayout = new Clutter.TableLayout(); - this._table.set_layout_manager(this._tableLayout); - - this._indexLabels = []; - this._candidateLabels = []; + this.actor = new St.BoxLayout({ vertical: true, + visible: false }); + this._candidateBoxes = []; for (let i = 0; i < MAX_CANDIDATES_PER_PAGE; ++i) { - this._indexLabels.push(new St.Label({ style_class: 'candidate-index' })); - this._candidateLabels.push(new St.Label({ style_class: 'candidate-label' })); + let box = new St.BoxLayout({ style_class: 'candidate-box' }); + box._indexLabel = new St.Label({ style_class: 'candidate-index' }); + box._candidateLabel = new St.Label({ style_class: 'candidate-label' }); + box.add(box._indexLabel, { y_fill: false }); + box.add(box._candidateLabel, { y_fill: false }); + this._candidateBoxes.push(box); + this.actor.add(box); } this._orientation = -1; @@ -43,18 +37,10 @@ const CandidateArea = new Lang.Class({ this._orientation = orientation; - this._table.remove_all_children(); - if (this._orientation == IBus.Orientation.HORIZONTAL) - for (let i = 0; i < MAX_CANDIDATES_PER_PAGE; ++i) { - this._tableLayout.pack(this._indexLabels[i], i*2, 0); - this._tableLayout.pack(this._candidateLabels[i], i*2 + 1, 0); - } + this.actor.vertical = false; else // VERTICAL || SYSTEM - for (let i = 0; i < MAX_CANDIDATES_PER_PAGE; ++i) { - this._tableLayout.pack(this._indexLabels[i], 0, i); - this._tableLayout.pack(this._candidateLabels[i], 1, i); - } + this.actor.vertical = true; }, setCandidates: function(indexes, candidates, orientation, cursorPosition, cursorVisible) { @@ -62,48 +48,49 @@ const CandidateArea = new Lang.Class({ for (let i = 0; i < MAX_CANDIDATES_PER_PAGE; ++i) { let visible = i < candidates.length; - this._indexLabels[i].visible = visible; - this._candidateLabels[i].visible = visible; + let box = this._candidateBoxes[i]; + box.visible = visible; if (!visible) continue; - this._indexLabels[i].text = ((indexes && indexes[i]) ? indexes[i] : '%x.'.format(i + 1)); - this._candidateLabels[i].text = candidates[i]; + box._indexLabel.text = ((indexes && indexes[i]) ? indexes[i] : '%x'.format(i + 1)); + box._candidateLabel.text = candidates[i]; } - this._candidateLabels[this._cursorPosition].remove_style_pseudo_class('selected'); + this._candidateBoxes[this._cursorPosition].remove_style_pseudo_class('selected'); this._cursorPosition = cursorPosition; if (cursorVisible) - this._candidateLabels[cursorPosition].add_style_pseudo_class('selected'); + this._candidateBoxes[cursorPosition].add_style_pseudo_class('selected'); }, }); const CandidatePopup = new Lang.Class({ Name: 'CandidatePopup', - Extends: PopupMenu.PopupMenu, _init: function() { this._cursor = new St.Bin({ opacity: 0 }); Main.uiGroup.add_actor(this._cursor); - this.parent(this._cursor, 0, St.Side.TOP); - this.actor.hide(); - Main.uiGroup.add_actor(this.actor); + this._boxPointer = new BoxPointer.BoxPointer(St.Side.TOP); + this._boxPointer.actor.visible = false; + this._boxPointer.actor.style_class = 'candidate-popup-boxpointer'; + Main.uiGroup.add_actor(this._boxPointer.actor); - this._preeditTextItem = new PopupMenu.PopupMenuItem('', { reactive: false }); - this._preeditTextItem.actor.hide(); - this.addMenuItem(this._preeditTextItem); + let box = new St.BoxLayout({ style_class: 'candidate-popup-content', + vertical: true }); + this._boxPointer.bin.set_child(box); - this._auxTextItem = new PopupMenu.PopupMenuItem('', { reactive: false }); - this._auxTextItem.actor.hide(); - this.addMenuItem(this._auxTextItem); + this._preeditText = new St.Label({ style_class: 'candidate-popup-text', + visible: false }); + box.add(this._preeditText); - this.addMenuItem(new PopupMenu.PopupSeparatorMenuItem()); + this._auxText = new St.Label({ style_class: 'candidate-popup-text', + visible: false }); + box.add(this._auxText); - this._lookupTableItem = new CandidateArea(); - this._lookupTableItem.actor.hide(); - this.addMenuItem(this._lookupTableItem); + this._candidateArea = new CandidateArea(); + box.add(this._candidateArea.actor); this._panelService = null; }, @@ -120,55 +107,46 @@ const CandidatePopup = new Lang.Class({ })); panelService.connect('update-preedit-text', Lang.bind(this, function(ps, text, cursorPosition, visible) { - if (visible) - this._preeditTextItem.actor.show(); - else - this._preeditTextItem.actor.hide(); + this._preeditText.visible = visible; this._updateVisibility(); - this._preeditTextItem.actor.label_actor.text = text.get_text(); + this._preeditText.text = text.get_text(); let attrs = text.get_attributes(); if (attrs) - this._setTextAttributes(this._preeditTextItem.actor.label_actor.clutter_text, + this._setTextAttributes(this._preeditText.clutter_text, attrs); })); panelService.connect('show-preedit-text', Lang.bind(this, function(ps) { - this._preeditTextItem.actor.show(); + this._preeditText.show(); this._updateVisibility(); })); panelService.connect('hide-preedit-text', Lang.bind(this, function(ps) { - this._preeditTextItem.actor.hide(); + this._preeditText.hide(); this._updateVisibility(); })); panelService.connect('update-auxiliary-text', Lang.bind(this, function(ps, text, visible) { - if (visible) - this._auxTextItem.actor.show(); - else - this._auxTextItem.actor.hide(); + this._auxText.visible = visible; this._updateVisibility(); - this._auxTextItem.actor.label_actor.text = text.get_text(); + this._auxText.text = text.get_text(); })); panelService.connect('show-auxiliary-text', Lang.bind(this, function(ps) { - this._auxTextItem.actor.show(); + this._auxText.show(); this._updateVisibility(); })); panelService.connect('hide-auxiliary-text', Lang.bind(this, function(ps) { - this._auxTextItem.actor.hide(); + this._auxText.hide(); this._updateVisibility(); })); panelService.connect('update-lookup-table', Lang.bind(this, function(ps, lookupTable, visible) { - if (visible) - this._lookupTableItem.actor.show(); - else - this._lookupTableItem.actor.hide(); + this._candidateArea.actor.visible = visible; this._updateVisibility(); let cursorPos = lookupTable.get_cursor_pos(); @@ -186,37 +164,40 @@ const CandidatePopup = new Lang.Class({ for (let i = startIndex; i < endIndex; ++i) candidates.push(lookupTable.get_candidate(i).get_text()); - this._lookupTableItem.setCandidates(indexes, - candidates, - lookupTable.get_orientation(), - cursorPos % pageSize, - lookupTable.is_cursor_visible()); + this._candidateArea.setCandidates(indexes, + candidates, + lookupTable.get_orientation(), + cursorPos % pageSize, + lookupTable.is_cursor_visible()); })); panelService.connect('show-lookup-table', Lang.bind(this, function(ps) { - this._lookupTableItem.actor.show(); + this._candidateArea.actor.show(); this._updateVisibility(); })); panelService.connect('hide-lookup-table', Lang.bind(this, function(ps) { - this._lookupTableItem.actor.hide(); + this._candidateArea.actor.hide(); this._updateVisibility(); })); panelService.connect('focus-out', Lang.bind(this, function(ps) { - this.close(BoxPointer.PopupAnimation.NONE); + this._boxPointer.hide(BoxPointer.PopupAnimation.NONE); })); }, _updateVisibility: function() { - let isVisible = (this._preeditTextItem.actor.visible || - this._auxTextItem.actor.visible || - this._lookupTableItem.actor.visible); + let isVisible = (this._preeditText.visible || + this._auxText.visible || + this._candidateArea.actor.visible); - if (isVisible) - this.open(BoxPointer.PopupAnimation.NONE); - else - this.close(BoxPointer.PopupAnimation.NONE); + if (isVisible) { + this._boxPointer.setPosition(this._cursor, 0); + this._boxPointer.show(BoxPointer.PopupAnimation.NONE); + this._boxPointer.actor.raise_top(); + } else { + this._boxPointer.hide(BoxPointer.PopupAnimation.NONE); + } }, _setTextAttributes: function(clutterText, ibusAttrList) {