[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

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

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,
+        this._name = new St.Label({ style_class: "app-icon-label",
-                                        font_name: "Sans 12px",
-                                        line_alignment: Pango.Alignment.CENTER,
-                                        ellipsize: Pango.EllipsizeMode.END,
                                      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 });

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.actor.add(this.header.actor);
-        this.content = new Big.Box({spacing: SECTION_INNER_SPACING });
+        this.content = new St.BoxLayout({ style_class: 'dash-section-content',
-        this.actor.append(this.content, Big.BoxPackFlags.EXPAND);
+                                           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);
         }
 

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,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",
+        let name = new St.Label({ style_class: "dash-recent-docs-item",
-                                      color: GenericDisplay.ITEM_DISPLAY_NAME_COLOR,
-                                      ellipsize: Pango.EllipsizeMode.END,
                                    text: docInfo.name });
         this.actor.append(name, Big.BoxPackFlags.EXPAND);
 

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,
+        this.actor = new St.BoxLayout({ style_class: "generic-display-item",
-                                   spacing: ITEM_DISPLAY_PADDING,
+                                         reactive: true });
-                                   reactive: true,
-                                   background_color: ITEM_DISPLAY_BACKGROUND_COLOR,
-                                   corner_radius: 4,
-                                   height: ITEM_DISPLAY_HEIGHT });
 
         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,
+        this._iconBin = new St.Bin();
-                                          spacing: DEFAULT_PADDING });
+        this.actor.add(this._iconBin);
-        this.actor.append(this._infoContent, Big.BoxPackFlags.EXPAND);
 
-        this._iconBox = new Big.Box();
+        this._infoText = new St.BoxLayout({ style_class: "generic-display-item-text",
-        this._infoContent.append(this._iconBox, Big.BoxPackFlags.NONE);
+                                             vertical: true });
-
+        this.actor.add(this._infoText, { expand: true, y_fill: false });
-        this._infoText = new Big.Box({ orientation: Big.BoxOrientation.VERTICAL,
-                                       spacing: DEFAULT_PADDING });
-        this._infoContent.append(this._infoText, Big.BoxPackFlags.EXPAND);
 
         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;
+        this.actor.set_style_pseudo_class(isSelected ? "selected" : null);
-       if (isSelected) {
+        this._informationButton.forceShow(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;
     },
 
     /*
@@ -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,
+        let textDetails = new St.BoxLayout({ style_class: 'generic-display-details',
-                                        spacing: PREVIEW_BOX_SPACING });
+                                             vertical: true });
-        let detailsName = new Clutter.Text({ color: ITEM_DISPLAY_NAME_COLOR,
+        let detailsName = new St.Label({ style_class: 'generic-display-details-name',
-                                             font_name: "Sans bold 14px",
-                                             line_wrap: true,
                                           text: this._name.text });
-        textDetails.append(detailsName, Big.BoxPackFlags.NONE);
+        textDetails.add(detailsName);
 
-        let detailsDescription = new Clutter.Text({ color: ITEM_DISPLAY_NAME_COLOR,
+        let detailsDescription = new St.Label({ text: this._description.text });
-                                                    font_name: "Sans 14px",
+        textDetails.add(detailsDescription);
-                                                    line_wrap: true,
-                                                    text: this._description.text });
-        textDetails.append(detailsDescription, Big.BoxPackFlags.NONE);
 
         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,
+        this._name = new St.Label({ style_class: "generic-display-item-name",
-                                        font_name: "Sans 14px",
-                                        ellipsize: Pango.EllipsizeMode.END,
                                      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,
+        this._description = new St.Label({ style_class: "generic-display-item-description",
-                                               font_name: "Sans 12px",
+                                            text: descriptionText ? descriptionText : "" });
-                                               ellipsize: Pango.EllipsizeMode.END,
+        this._infoText.add(this._description);
-                                               text: descriptionText ? descriptionText : ""
-                                            });
-        this._infoText.append(this._description, Big.BoxPackFlags.EXPAND);
     },
 
     // 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);
         }

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',
+        let text = new St.Label({ style_class: 'places-item',
-                                      ellipsize: Pango.EllipsizeMode.END,
+                                  text: info.name });
-                                      color: GenericDisplay.ITEM_DISPLAY_NAME_COLOR,
-                                      text: this.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);