[gnome-shell] [genericDisplay+other] Port to CSS, style cleanups
- From: Colin Walters <walters src gnome org>
- To: svn-commits-list gnome org
- Cc:
- Subject: [gnome-shell] [genericDisplay+other] Port to CSS, style cleanups
- Date: Thu, 12 Nov 2009 16:41:50 +0000 (UTC)
commit 66cab3b8ed2e7e881c661619b3c7db39455859af
Author: Colin Walters <walters verbum org>
Date: Fri Nov 6 16:08:07 2009 -0500
[genericDisplay+other] Port to CSS, style cleanups
Mostly a straightforward porting of style code to CSS, except
that various bits of other code referenced a few GenericDisplay
constants, so those needed to be ported as well.
Add some padding at the top between the close button and the items.
Center the text and description.
https://bugzilla.gnome.org/show_bug.cgi?id=600734
data/theme/gnome-shell.css | 54 +++++++++++++++++++++++++
js/ui/appIcon.js | 9 ++--
js/ui/dash.js | 22 +++++-----
js/ui/docDisplay.js | 7 +--
js/ui/genericDisplay.js | 95 ++++++++++++++------------------------------
js/ui/placeDisplay.js | 8 +--
6 files changed, 105 insertions(+), 90 deletions(-)
---
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index a1e4921..bd8b58e 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -98,6 +98,10 @@ StTooltip {
background-color: #c4c4c4;
}
+.dash-section {
+ spacing: 8px;
+}
+
.section-header {
border: 1px solid #262626;
-shell-gradient-top: #161616;
@@ -130,6 +134,12 @@ StTooltip {
.section-count {
}
+.dash-section-content {
+ font-size: 14px;
+ color: #ffffff;
+ spacing: 8px;
+}
+
.more-link {
border-left: 1px solid #262626;
padding: 0px 0px 0px 4px;
@@ -150,6 +160,50 @@ StTooltip {
height: 16px;
}
+/* GenericDisplay */
+
+.generic-display-container {
+ spacing: 4px;
+}
+
+.generic-display-item {
+ height: 50px;
+ border-radius: 4px;
+ color: #ffffff;
+ font-size: 14px;
+ spacing: 4px;
+}
+
+.generic-display-item:selected {
+ background-color: rgba(79,111,173,0.66);
+}
+
+.generic-display-item-text {
+ spacing: 4px;
+}
+
+.generic-display-item-description {
+ font-size: 12px;
+ color: #bababa;
+}
+
+.generic-display-details {
+ font-size: 14px;
+ color: #ffffff;
+}
+
+.generic-display-details-name {
+ font-weight: bold;
+}
+
+/* AppIcon */
+
+.app-icon-label {
+ font-size: 12px;
+}
+
+/* Places */
+
/* LookingGlass */
#LookingGlassDialog
diff --git a/js/ui/appIcon.js b/js/ui/appIcon.js
index b2cc8af..571e050 100644
--- a/js/ui/appIcon.js
+++ b/js/ui/appIcon.js
@@ -8,6 +8,7 @@ const Mainloop = imports.mainloop;
const Pango = imports.gi.Pango;
const Shell = imports.gi.Shell;
const Signals = imports.signals;
+const St = imports.gi.St;
const Gettext = imports.gettext.domain('gnome-shell');
const _ = Gettext.gettext;
@@ -99,11 +100,9 @@ AppIcon.prototype = {
nameBox.connect('allocate', Lang.bind(this, this._nameBoxAllocate));
this._nameBox = nameBox;
- this._name = new Clutter.Text({ color: GenericDisplay.ITEM_DISPLAY_NAME_COLOR,
- font_name: "Sans 12px",
- line_alignment: Pango.Alignment.CENTER,
- ellipsize: Pango.EllipsizeMode.END,
- text: this.app.get_name() });
+ this._name = new St.Label({ style_class: "app-icon-label",
+ text: this.app.get_name() });
+ this._name.clutter_text.line_alignment = Pango.Alignment.CENTER;
nameBox.add_actor(this._name);
if (this._showGlow) {
this._glowBox = new Big.Box({ orientation: Big.BoxOrientation.HORIZONTAL });
diff --git a/js/ui/dash.js b/js/ui/dash.js
index 3a536ec..29a47c6 100644
--- a/js/ui/dash.js
+++ b/js/ui/dash.js
@@ -45,8 +45,6 @@ const HIGHLIGHTED_SEARCH_CURSOR_COLOR = SEARCH_TEXT_COLOR;
const SEARCH_BORDER_BOTTOM_COLOR = new Clutter.Color();
SEARCH_BORDER_BOTTOM_COLOR.from_pixel(0x191919ff);
-const SECTION_INNER_SPACING = 8;
-
const BROWSE_ACTIVATED_BG = new Clutter.Color();
BROWSE_ACTIVATED_BG.from_pixel(0x303030f0);
@@ -535,11 +533,13 @@ function Section(titleString, suppressBrowse) {
Section.prototype = {
_init: function(titleString, suppressBrowse) {
- this.actor = new Big.Box({ spacing: SECTION_INNER_SPACING });
+ this.actor = new St.BoxLayout({ style_class: 'dash-section',
+ vertical: true });
this.header = new SectionHeader(titleString, suppressBrowse);
- this.actor.append(this.header.actor, Big.BoxPackFlags.NONE);
- this.content = new Big.Box({spacing: SECTION_INNER_SPACING });
- this.actor.append(this.content, Big.BoxPackFlags.EXPAND);
+ this.actor.add(this.header.actor);
+ this.content = new St.BoxLayout({ style_class: 'dash-section-content',
+ vertical: true });
+ this.actor.add(this.content);
}
}
@@ -681,7 +681,7 @@ Dash.prototype = {
this._appsSection = new Section(_("APPLICATIONS"));
let appWell = new AppDisplay.AppWell();
- this._appsSection.content.append(appWell.actor, Big.BoxPackFlags.EXPAND);
+ this._appsSection.content.add(appWell.actor, { expand: true });
this._moreAppsPane = null;
this._appsSection.header.moreLink.connect('activated', Lang.bind(this, function (link) {
@@ -701,7 +701,7 @@ Dash.prototype = {
network locations, etc. */
this._placesSection = new Section(_("PLACES"), true);
let placesDisplay = new PlaceDisplay.DashPlaceDisplay();
- this._placesSection.content.append(placesDisplay.actor, Big.BoxPackFlags.EXPAND);
+ this._placesSection.content.add(placesDisplay.actor, { expand: true });
this.sectionArea.append(this._placesSection.actor, Big.BoxPackFlags.NONE);
/***** Documents *****/
@@ -709,7 +709,7 @@ Dash.prototype = {
this._docsSection = new Section(_("RECENT DOCUMENTS"));
this._docDisplay = new DocDisplay.DashDocDisplay();
- this._docsSection.content.append(this._docDisplay.actor, Big.BoxPackFlags.EXPAND);
+ this._docsSection.content.add(this._docDisplay.actor, { expand: true });
this._moreDocsPane = null;
this._docsSection.header.moreLink.connect('activated', Lang.bind(this, function (link) {
@@ -769,9 +769,9 @@ Dash.prototype = {
function () {
this._showSingleSearchSection(section.type);
}));
- this._searchResultsSection.content.append(section.header.actor, Big.BoxPackFlags.NONE);
+ this._searchResultsSection.content.add(section.header.actor);
section.resultArea = new ResultArea(section.type, GenericDisplay.GenericDisplayFlags.DISABLE_VSCROLLING);
- this._searchResultsSection.content.append(section.resultArea.actor, Big.BoxPackFlags.EXPAND);
+ this._searchResultsSection.content.add(section.resultArea.actor, { expand: true });
createPaneForDetails(this, section.resultArea.display);
}
diff --git a/js/ui/docDisplay.js b/js/ui/docDisplay.js
index 011ba77..2b67f50 100644
--- a/js/ui/docDisplay.js
+++ b/js/ui/docDisplay.js
@@ -8,6 +8,7 @@ const Lang = imports.lang;
const Pango = imports.gi.Pango;
const Shell = imports.gi.Shell;
const Signals = imports.signals;
+const St = imports.gi.St;
const Mainloop = imports.mainloop;
const DocInfo = imports.misc.docInfo;
@@ -278,10 +279,8 @@ DashDocDisplayItem.prototype = {
let iconBox = new Big.Box({ y_align: Big.BoxAlignment.CENTER });
iconBox.append(this._icon, Big.BoxPackFlags.NONE);
this.actor.append(iconBox, Big.BoxPackFlags.NONE);
- let name = new Clutter.Text({ font_name: "Sans 14px",
- color: GenericDisplay.ITEM_DISPLAY_NAME_COLOR,
- ellipsize: Pango.EllipsizeMode.END,
- text: docInfo.name });
+ let name = new St.Label({ style_class: "dash-recent-docs-item",
+ text: docInfo.name });
this.actor.append(name, Big.BoxPackFlags.EXPAND);
let draggable = DND.makeDraggable(this.actor);
diff --git a/js/ui/genericDisplay.js b/js/ui/genericDisplay.js
index c154f74..8ee0334 100644
--- a/js/ui/genericDisplay.js
+++ b/js/ui/genericDisplay.js
@@ -23,14 +23,8 @@ const RedisplayFlags = { NONE: 0,
SUBSEARCH: 1 << 2,
IMMEDIATE: 1 << 3 };
-const ITEM_DISPLAY_NAME_COLOR = new Clutter.Color();
-ITEM_DISPLAY_NAME_COLOR.from_pixel(0xffffffff);
const ITEM_DISPLAY_DESCRIPTION_COLOR = new Clutter.Color();
ITEM_DISPLAY_DESCRIPTION_COLOR.from_pixel(0xffffffbb);
-const ITEM_DISPLAY_BACKGROUND_COLOR = new Clutter.Color();
-ITEM_DISPLAY_BACKGROUND_COLOR.from_pixel(0x00000000);
-const ITEM_DISPLAY_SELECTED_BACKGROUND_COLOR = new Clutter.Color();
-ITEM_DISPLAY_SELECTED_BACKGROUND_COLOR.from_pixel(0x4f6fadaa);
const DISPLAY_CONTROL_SELECTED_COLOR = new Clutter.Color();
DISPLAY_CONTROL_SELECTED_COLOR.from_pixel(0x112288ff);
const PREVIEW_BOX_BACKGROUND_COLOR = new Clutter.Color();
@@ -38,10 +32,7 @@ PREVIEW_BOX_BACKGROUND_COLOR.from_pixel(0xADADADf0);
const DEFAULT_PADDING = 4;
-const ITEM_DISPLAY_HEIGHT = 50;
const ITEM_DISPLAY_ICON_SIZE = 48;
-const ITEM_DISPLAY_PADDING = 1;
-const ITEM_DISPLAY_PADDING_RIGHT = 2;
const DEFAULT_COLUMN_GAP = 6;
const PREVIEW_ICON_SIZE = 96;
@@ -64,12 +55,8 @@ function GenericDisplayItem() {
GenericDisplayItem.prototype = {
_init: function() {
- this.actor = new Big.Box({ orientation: Big.BoxOrientation.HORIZONTAL,
- spacing: ITEM_DISPLAY_PADDING,
- reactive: true,
- background_color: ITEM_DISPLAY_BACKGROUND_COLOR,
- corner_radius: 4,
- height: ITEM_DISPLAY_HEIGHT });
+ this.actor = new St.BoxLayout({ style_class: "generic-display-item",
+ reactive: true });
this.actor._delegate = this;
this.actor.connect('button-release-event',
@@ -83,16 +70,12 @@ GenericDisplayItem.prototype = {
let draggable = DND.makeDraggable(this.actor);
draggable.connect('drag-begin', Lang.bind(this, this._onDragBegin));
- this._infoContent = new Big.Box({ orientation: Big.BoxOrientation.HORIZONTAL,
- spacing: DEFAULT_PADDING });
- this.actor.append(this._infoContent, Big.BoxPackFlags.EXPAND);
+ this._iconBin = new St.Bin();
+ this.actor.add(this._iconBin);
- this._iconBox = new Big.Box();
- this._infoContent.append(this._iconBox, Big.BoxPackFlags.NONE);
-
- this._infoText = new Big.Box({ orientation: Big.BoxOrientation.VERTICAL,
- spacing: DEFAULT_PADDING });
- this._infoContent.append(this._infoText, Big.BoxPackFlags.EXPAND);
+ this._infoText = new St.BoxLayout({ style_class: "generic-display-item-text",
+ vertical: true });
+ this.actor.add(this._infoText, { expand: true, y_fill: false });
let infoIconUri = "file://" + global.imagedir + "info.svg";
let infoIcon = Shell.TextureCache.get_default().load_uri_sync(Shell.TextureCachePolicy.FOREVER,
@@ -105,7 +88,7 @@ GenericDisplayItem.prototype = {
padding_left: DEFAULT_PADDING, padding_right: DEFAULT_PADDING,
y_align: Big.BoxAlignment.CENTER });
buttonBox.append(this._informationButton.actor, Big.BoxPackFlags.NONE);
- this.actor.append(buttonBox, Big.BoxPackFlags.END);
+ this.actor.add(buttonBox, { x_fill: false, x_align: St.Align.END });
// Connecting to the button-press-event for the information button ensures that the actor,
// which is a draggable actor, does not get the button-press-event and doesn't initiate
@@ -161,16 +144,8 @@ GenericDisplayItem.prototype = {
// Highlights the item by setting a different background color than the default
// if isSelected is true, removes the highlighting otherwise.
markSelected: function(isSelected) {
- let color;
- if (isSelected) {
- color = ITEM_DISPLAY_SELECTED_BACKGROUND_COLOR;
- this._informationButton.forceShow(true);
- }
- else {
- color = ITEM_DISPLAY_BACKGROUND_COLOR;
- this._informationButton.forceShow(false);
- }
- this.actor.background_color = color;
+ this.actor.set_style_pseudo_class(isSelected ? "selected" : null);
+ this._informationButton.forceShow(isSelected)
},
/*
@@ -186,19 +161,14 @@ GenericDisplayItem.prototype = {
spacing: PREVIEW_BOX_SPACING });
// Inner box with name and description
- let textDetails = new Big.Box({ orientation: Big.BoxOrientation.VERTICAL,
- spacing: PREVIEW_BOX_SPACING });
- let detailsName = new Clutter.Text({ color: ITEM_DISPLAY_NAME_COLOR,
- font_name: "Sans bold 14px",
- line_wrap: true,
- text: this._name.text });
- textDetails.append(detailsName, Big.BoxPackFlags.NONE);
-
- let detailsDescription = new Clutter.Text({ color: ITEM_DISPLAY_NAME_COLOR,
- font_name: "Sans 14px",
- line_wrap: true,
- text: this._description.text });
- textDetails.append(detailsDescription, Big.BoxPackFlags.NONE);
+ let textDetails = new St.BoxLayout({ style_class: 'generic-display-details',
+ vertical: true });
+ let detailsName = new St.Label({ style_class: 'generic-display-details-name',
+ text: this._name.text });
+ textDetails.add(detailsName);
+
+ let detailsDescription = new St.Label({ text: this._description.text });
+ textDetails.add(detailsDescription);
this._detailsDescriptions.push(detailsDescription);
@@ -224,7 +194,7 @@ GenericDisplayItem.prototype = {
// Destroys the item.
destroy: function() {
- this.actor.destroy();
+ this.actor.destroy();
},
//// Pure virtual public methods ////
@@ -261,20 +231,15 @@ GenericDisplayItem.prototype = {
}
this._icon = this._createIcon();
- this._iconBox.append(this._icon, Big.BoxPackFlags.NONE);
+ this._iconBin.set_child(this._icon);
- this._name = new Clutter.Text({ color: ITEM_DISPLAY_NAME_COLOR,
- font_name: "Sans 14px",
- ellipsize: Pango.EllipsizeMode.END,
- text: nameText });
- this._infoText.append(this._name, Big.BoxPackFlags.EXPAND);
+ this._name = new St.Label({ style_class: "generic-display-item-name",
+ text: nameText });
+ this._infoText.add(this._name);
- this._description = new Clutter.Text({ color: ITEM_DISPLAY_DESCRIPTION_COLOR,
- font_name: "Sans 12px",
- ellipsize: Pango.EllipsizeMode.END,
- text: descriptionText ? descriptionText : ""
- });
- this._infoText.append(this._description, Big.BoxPackFlags.EXPAND);
+ this._description = new St.Label({ style_class: "generic-display-item-description",
+ text: descriptionText ? descriptionText : "" });
+ this._infoText.add(this._description);
},
// Sets the description text for the item, including the description text
@@ -339,11 +304,11 @@ GenericDisplay.prototype = {
if (disableVScrolling) {
this.actor = this._list = new Shell.OverflowList({ spacing: 6,
- item_height: ITEM_DISPLAY_HEIGHT });
+ item_height: 50 });
} else {
this.actor = new St.ScrollView({ x_fill: true, y_fill: true });
this.actor.get_hscroll_bar().hide();
- this._list = new St.BoxLayout({ style_class: "generic-display-container",
+ this._list = new St.BoxLayout({ style_class: 'generic-display-container',
vertical: true });
this.actor.add_actor(this._list);
}
diff --git a/js/ui/placeDisplay.js b/js/ui/placeDisplay.js
index af92c66..3746c96 100644
--- a/js/ui/placeDisplay.js
+++ b/js/ui/placeDisplay.js
@@ -9,6 +9,7 @@ const Shell = imports.gi.Shell;
const Lang = imports.lang;
const Mainloop = imports.mainloop;
const Signals = imports.signals;
+const St = imports.gi.St;
const Gettext = imports.gettext.domain('gnome-shell');
const _ = Gettext.gettext;
@@ -43,7 +44,6 @@ PlaceInfo.prototype = {
}
}
-
function PlacesManager() {
this._init();
}
@@ -326,10 +326,8 @@ DashPlaceDisplayItem.prototype = {
this._info.launch();
Main.overview.hide();
}));
- let text = new Clutter.Text({ font_name: 'Sans 14px',
- ellipsize: Pango.EllipsizeMode.END,
- color: GenericDisplay.ITEM_DISPLAY_NAME_COLOR,
- text: this.name });
+ let text = new St.Label({ style_class: 'places-item',
+ text: info.name });
let iconBox = new Big.Box({ y_align: Big.BoxAlignment.CENTER });
iconBox.append(this._icon, Big.BoxPackFlags.NONE);
this.actor.append(iconBox, Big.BoxPackFlags.NONE);
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
