diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css index a1e49211b..bd8b58eea 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 b2cc8af68..571e05097 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 3a536ec34..29a47c673 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 011ba7724..2b67f50ba 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 c154f74f0..8ee03343b 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 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 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); @@ -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 af92c666c..3746c96b2 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);