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

Port Dash section headers to CSS

Browse Source 
https://bugzilla.gnome.org/show_bug.cgi?id=599442
This commit is contained in:
Colin Walters 2009-10-22 13:33:09 -04:00
parent 4f456b9689
commit 626f679947
2 changed files with 108 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
data/theme/gnome-shell.css
View File

@ -74,6 +74,50 @@ StScrollBar StButton#vhandle:hover
background-color: #314a6c; background-color: #314a6c;
} }
/* Dash */
#dash {
color: #5f5f5f;
background-color: rgba(0,0,0,0.75);
padding: 0px 14px;
}
#searchEntry {
padding: 4px;
border-bottom: 1px solid #262626;
}
#searchEntry:active {
background-color: #c4c4c4;
}
.section-header {
border: 1px solid #262626;
-shell-gradient-top: #161616;
-shell-gradient-bottom: #000000;
font-weight: bold;
font-size: 12px;
}
.section-header-inner {
border: 1px solid #000000;
padding: 0px 4px;
}
.section-text-content {
padding: 4px 0px;
}
.section-count {
}
.more-link {
border-left: 1px solid #262626;
padding: 0px 0px 0px 4px;
color: #ffffff;
font-weight: normal;
}
/* LookingGlass */ /* LookingGlass */
#LookingGlassDialog #LookingGlassDialog
@ -192,4 +236,4 @@ StScrollBar StButton#vhandle:hover
.switcher-list .separator { .switcher-list .separator {
width: 1px; width: 1px;
background: rgba(255,255,255,0.33); background: rgba(255,255,255,0.33);
} }

140
js/ui/dash.js
View File

@ -8,6 +8,7 @@ const Pango = imports.gi.Pango;
const Shell = imports.gi.Shell; const Shell = imports.gi.Shell;
const Signals = imports.signals; const Signals = imports.signals;
const Lang = imports.lang; const Lang = imports.lang;
const St = imports.gi.St;
const Gettext = imports.gettext.domain('gnome-shell'); const Gettext = imports.gettext.domain('gnome-shell');
const _ = Gettext.gettext; const _ = Gettext.gettext;
@ -22,8 +23,6 @@ const DEFAULT_PADDING = 4;
const DEFAULT_SPACING = 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_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);
@ -43,21 +42,9 @@ SEARCH_TEXT_COLOR.from_pixel(0x333333ff);
const SEARCH_CURSOR_COLOR = BRIGHT_TEXT_COLOR; const SEARCH_CURSOR_COLOR = BRIGHT_TEXT_COLOR;
const HIGHLIGHTED_SEARCH_CURSOR_COLOR = SEARCH_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);
const SECTION_BORDER_COLOR = new Clutter.Color();
SECTION_BORDER_COLOR.from_pixel(0x262626ff);
const SECTION_BORDER = 1;
const SECTION_INNER_BORDER_COLOR = new Clutter.Color();
SECTION_INNER_BORDER_COLOR.from_pixel(0x000000ff);
const SECTION_BACKGROUND_TOP_COLOR = new Clutter.Color();
SECTION_BACKGROUND_TOP_COLOR.from_pixel(0x161616ff);
const SECTION_BACKGROUND_BOTTOM_COLOR = new Clutter.Color();
SECTION_BACKGROUND_BOTTOM_COLOR.from_pixel(0x000000ff);
const SECTION_INNER_SPACING = 8; const SECTION_INNER_SPACING = 8;
const BROWSE_ACTIVATED_BG = new Clutter.Color(); const BROWSE_ACTIVATED_BG = new Clutter.Color();
@ -265,14 +252,11 @@ function SearchEntry() {
SearchEntry.prototype = { SearchEntry.prototype = {
_init : function() { _init : function() {
this.actor = new Big.Box({ padding: DEFAULT_PADDING, this.actor = new St.BoxLayout({ name: "searchEntry",
border_bottom: SECTION_BORDER, reactive: true });
border_color: SEARCH_BORDER_BOTTOM_COLOR,
corner_radius: DASH_CORNER_RADIUS,
reactive: true });
let box = new Big.Box({ orientation: Big.BoxOrientation.HORIZONTAL, let box = new Big.Box({ orientation: Big.BoxOrientation.HORIZONTAL,
y_align: Big.BoxAlignment.CENTER }); y_align: Big.BoxAlignment.CENTER });
this.actor.append(box, Big.BoxPackFlags.EXPAND); this.actor.add(box, { expand: true });
this.actor.connect('button-press-event', Lang.bind(this, function () { this.actor.connect('button-press-event', Lang.bind(this, function () {
this._resetTextState(true); this._resetTextState(true);
return false; return false;
@ -361,12 +345,12 @@ SearchEntry.prototype = {
if (!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.actor.set_style_pseudo_class('active');
this.entry.cursor_color = HIGHLIGHTED_SEARCH_CURSOR_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.actor.set_style_pseudo_class(null);
this.entry.cursor_color = SEARCH_CURSOR_COLOR; this.entry.cursor_color = SEARCH_CURSOR_COLOR;
} }
}, },
@ -385,20 +369,12 @@ function MoreLink() {
MoreLink.prototype = { MoreLink.prototype = {
_init : function () { _init : function () {
this.actor = new Big.Box({ orientation: Big.BoxOrientation.HORIZONTAL, this.actor = new St.BoxLayout({ style_class: "more-link",
padding_right: DEFAULT_PADDING, reactive: true });
padding_left: DEFAULT_PADDING,
reactive: true,
x_align: Big.BoxAlignment.CENTER,
y_align: Big.BoxAlignment.CENTER,
border_left: SECTION_BORDER,
border_color: SECTION_BORDER_COLOR });
this.pane = null; this.pane = null;
let text = new Clutter.Text({ font_name: "Sans 12px", let text = new St.Label({ text: _("More") });
color: BRIGHT_TEXT_COLOR, this.actor.add(text, { expand: true, y_fill: false });
text: _("More") });
this.actor.append(text, Big.BoxPackFlags.NONE);
this.actor.connect('button-press-event', Lang.bind(this, function (b, e) { this.actor.connect('button-press-event', Lang.bind(this, function (b, e) {
if (this.pane == null) { if (this.pane == null) {
@ -449,52 +425,65 @@ function SectionHeader(title, suppressBrowse) {
SectionHeader.prototype = { SectionHeader.prototype = {
_init : function (title, suppressBrowse) { _init : function (title, suppressBrowse) {
this.actor = new Big.Box({ border: SECTION_BORDER, this.actor = new St.Bin({ style_class: "section-header",
border_color: SECTION_BORDER_COLOR }); x_align: St.Align.START,
this._innerBox = new Big.Box({ border: SECTION_BORDER, x_fill: true,
border_color: SECTION_INNER_BORDER_COLOR, y_fill: true });
padding_left: DEFAULT_PADDING, this._innerBox = new St.BoxLayout({ style_class: "section-header-inner" });
padding_right: DEFAULT_PADDING, this.actor.set_child(this._innerBox);
orientation: Big.BoxOrientation.HORIZONTAL,
spacing: DEFAULT_SPACING }); this._backgroundGradient = null;
this.actor.append(this._innerBox, Big.BoxPackFlags.EXPAND); this.actor.connect('style-changed', Lang.bind(this, this._onStyleChanged));
let backgroundGradient = Shell.create_vertical_gradient(SECTION_BACKGROUND_TOP_COLOR, this.actor.connect('notify::allocation', Lang.bind(this, function (actor) {
SECTION_BACKGROUND_BOTTOM_COLOR); if (!this._backgroundGradient)
this._innerBox.add_actor(backgroundGradient); return;
this._innerBox.connect('notify::allocation', Lang.bind(this, function (actor) { this._onStyleChanged();
let [width, height] = actor.get_size();
backgroundGradient.set_size(width, height);
})); }));
this.backLink = new BackLink(); let textBox = new St.BoxLayout({ style_class: "section-text-content" });
this._innerBox.append(this.backLink.actor, Big.BoxPackFlags.NONE); this.text = new St.Label({ style_class: "section-title",
this.backLink.actor.hide(); text: title });
textBox.add(this.text, { x_align: St.Align.START });
this.backLink.actor.connect('activate', Lang.bind(this, function (actor) { this.countText = new St.Label({ style_class: "section-count" });
this.emit('back-link-activated'); textBox.add(this.countText, { x_align: St.Align.END });
}));
let textBox = new Big.Box({ orientation: Big.BoxOrientation.HORIZONTAL,
padding_top: DEFAULT_PADDING,
padding_bottom: DEFAULT_PADDING });
this.text = new Clutter.Text({ color: TEXT_COLOR,
font_name: "Sans Bold 12px",
text: title });
textBox.append(this.text, Big.BoxPackFlags.NONE);
this.countText = new Clutter.Text({ color: TEXT_COLOR,
font_name: 'Sans Bold 14px' });
textBox.append(this.countText, Big.BoxPackFlags.END);
this.countText.hide(); this.countText.hide();
this._innerBox.append(textBox, Big.BoxPackFlags.EXPAND); this._innerBox.add(textBox, { expand: true });
if (!suppressBrowse) { if (!suppressBrowse) {
this.moreLink = new MoreLink(); this.moreLink = new MoreLink();
this._innerBox.append(this.moreLink.actor, Big.BoxPackFlags.END); this._innerBox.add(this.moreLink.actor, { x_align: St.Align.END });
} }
}, },
_onStyleChanged: function () {
if (this._backgroundGradient) {
this._backgroundGradient.destroy();
}
// Manually implement the gradient
let themeNode = this.actor.get_theme_node();
let gradientTopColor = new Clutter.Color();
if (!themeNode.get_color("-shell-gradient-top", false, gradientTopColor))
return;
let gradientBottomColor = new Clutter.Color();
if (!themeNode.get_color("-shell-gradient-bottom", false, gradientBottomColor))
return;
this._backgroundGradient = Shell.create_vertical_gradient(gradientTopColor,
gradientBottomColor);
let box = this.actor.allocation;
let contentBox = new Clutter.ActorBox();
themeNode.get_content_box(box, contentBox);
let width = contentBox.x2 - contentBox.x1;
let height = contentBox.y2 - contentBox.y1;
this._backgroundGradient.set_size(width, height);
// This will set a fixed position, which puts us outside of the normal box layout
this._backgroundGradient.set_position(0, 0);
this._innerBox.add_actor(this._backgroundGradient);
this._backgroundGradient.lower_bottom();
},
setTitle : function(title) { setTitle : function(title) {
this.text.text = title; this.text.text = title;
}, },
@ -598,12 +587,9 @@ Dash.prototype = {
// of the Group actor ends up including the width of its hidden children, so we were getting a reactive object as // of the Group actor ends up including the width of its hidden children, so we were getting a reactive object as
// wide as the details pane that was blocking the clicks to the workspaces underneath it even when the details pane // wide as the details pane that was blocking the clicks to the workspaces underneath it even when the details pane
// was actually hidden. // was actually hidden.
this.actor = new Big.Box({ orientation: Big.BoxOrientation.VERTICAL, this.actor = new St.BoxLayout({ name: "dash",
background_color: BACKGROUND_COLOR, vertical: true,
corner_radius: DASH_CORNER_RADIUS, reactive: true });
padding_left: DASH_PADDING_SIDE,
padding_right: DASH_PADDING_SIDE,
reactive: true });
// Size for this one explicitly set from overlay.js // Size for this one explicitly set from overlay.js
this.searchArea = new Big.Box({ y_align: Big.BoxAlignment.CENTER }); this.searchArea = new Big.Box({ y_align: Big.BoxAlignment.CENTER });
@ -611,8 +597,8 @@ Dash.prototype = {
this.sectionArea = new Big.Box({ orientation: Big.BoxOrientation.VERTICAL, this.sectionArea = new Big.Box({ orientation: Big.BoxOrientation.VERTICAL,
spacing: DASH_SECTION_SPACING }); spacing: DASH_SECTION_SPACING });
this.actor.append(this.searchArea, Big.BoxPackFlags.NONE); this.actor.add(this.searchArea);
this.actor.append(this.sectionArea, Big.BoxPackFlags.NONE); this.actor.add(this.sectionArea);
// The currently active popup display // The currently active popup display
this._activePane = null; this._activePane = null;