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

[genericDisplay+other] Port to CSS, style cleanups

Browse Source 
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
This commit is contained in:
Colin Walters 2009-11-06 16:08:07 -05:00
parent bc255a525f
commit 66cab3b8ed
6 changed files with 102 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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

7
js/ui/appIcon.js
View File

@ -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,
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 });

22
js/ui/dash.js
View File

@ -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);
}

5
js/ui/docDisplay.js
View File

@ -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,9 +279,7 @@ 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,
let name = new St.Label({ style_class: "dash-recent-docs-item",
text: docInfo.name });
this.actor.append(name, Big.BoxPackFlags.EXPAND);

83
js/ui/genericDisplay.js
View File

@ -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,
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.append(detailsName, Big.BoxPackFlags.NONE);
textDetails.add(detailsName);
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 detailsDescription = new St.Label({ text: this._description.text });
textDetails.add(detailsDescription);
this._detailsDescriptions.push(detailsDescription);
@ -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,
this._name = new St.Label({ style_class: "generic-display-item-name",
text: nameText });
this._infoText.append(this._name, Big.BoxPackFlags.EXPAND);
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);
}

8
js/ui/placeDisplay.js
View File

@ -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);