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

Make dash background darker

Browse Source 
Make dash background darker so that the blue color used for indicating
running apps can be visible. Use the dark blue (almost black) color from
Jeremy's mockup.

Make the dash height be the full screen height minus the height of the panel.
Don't use padding on top or on the bottom.

Remove the border from the main dash, but leave it for the results and details
panes. Make the border slightly transparent.

Make sure the details pane is correctly positioned by not applying the
additional padding when determining its x position.
This commit is contained in:
Marina Zhurakhinskaya 2009-07-24 17:25:20 -04:00
parent 978ab8a4dd
commit 9f4ccb83e3
1 changed files with 18 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
js/ui/overlay.js
View File

@ -77,24 +77,24 @@ const STATE_INACTIVE = false;
// The dash has a slightly transparent blue background with a gradient. // The dash has a slightly transparent blue background with a gradient.
const DASH_LEFT_COLOR = new Clutter.Color(); const DASH_LEFT_COLOR = new Clutter.Color();
DASH_LEFT_COLOR.from_pixel(0x324c6fbb); DASH_LEFT_COLOR.from_pixel(0x0d131fbb);
const DASH_MIDDLE_COLOR = new Clutter.Color(); const DASH_MIDDLE_COLOR = new Clutter.Color();
DASH_MIDDLE_COLOR.from_pixel(0x324c6faa); DASH_MIDDLE_COLOR.from_pixel(0x0d131faa);
const DASH_RIGHT_COLOR = new Clutter.Color(); const DASH_RIGHT_COLOR = new Clutter.Color();
DASH_RIGHT_COLOR.from_pixel(0x324c6fcc); DASH_RIGHT_COLOR.from_pixel(0x0d131fcc);
const DASH_BORDER_COLOR = new Clutter.Color(); const DASH_BORDER_COLOR = new Clutter.Color();
DASH_BORDER_COLOR.from_pixel(0x213b5dff); DASH_BORDER_COLOR.from_pixel(0x213b5dfa);
const DASH_BORDER_WIDTH = 2; const DASH_BORDER_WIDTH = 2;
// The results and details panes have a somewhat transparent blue background with a gradient. // The results and details panes have a somewhat transparent blue background with a gradient.
const PANE_LEFT_COLOR = new Clutter.Color(); const PANE_LEFT_COLOR = new Clutter.Color();
PANE_LEFT_COLOR.from_pixel(0x324c6ff4); PANE_LEFT_COLOR.from_pixel(0x0d131ff4);
const PANE_MIDDLE_COLOR = new Clutter.Color(); const PANE_MIDDLE_COLOR = new Clutter.Color();
PANE_MIDDLE_COLOR.from_pixel(0x324c6ffa); PANE_MIDDLE_COLOR.from_pixel(0x0d131ffa);
const PANE_RIGHT_COLOR = new Clutter.Color(); const PANE_RIGHT_COLOR = new Clutter.Color();
PANE_RIGHT_COLOR.from_pixel(0x324c6ff4); PANE_RIGHT_COLOR.from_pixel(0x0d131ff4);
const SHADOW_COLOR = new Clutter.Color(); const SHADOW_COLOR = new Clutter.Color();
SHADOW_COLOR.from_pixel(0x00000033); SHADOW_COLOR.from_pixel(0x00000033);
@ -225,12 +225,11 @@ Dash.prototype = {
this._resultsWidth = displayGridColumnWidth; this._resultsWidth = displayGridColumnWidth;
this._detailsWidth = displayGridColumnWidth * 2; this._detailsWidth = displayGridColumnWidth * 2;
let bottomHeight = DASH_SECTION_PADDING;
let global = Shell.Global.get(); let global = Shell.Global.get();
let resultsHeight = global.screen_height - Panel.PANEL_HEIGHT - DASH_SECTION_PADDING - bottomHeight; let dashHeight = global.screen_height - Panel.PANEL_HEIGHT;
let detailsHeight = global.screen_height - Panel.PANEL_HEIGHT - DASH_SECTION_PADDING - bottomHeight; let resultsHeight = global.screen_height - Panel.PANEL_HEIGHT;
let detailsHeight = global.screen_height - Panel.PANEL_HEIGHT;
// Size the actor to 0x0 so as not to interfere with DND // Size the actor to 0x0 so as not to interfere with DND
this.actor = new Clutter.Group({ width: 0, height: 0 }); this.actor = new Clutter.Group({ width: 0, height: 0 });
@ -248,17 +247,14 @@ Dash.prototype = {
// was actually hidden. // was actually hidden.
let dashPane = new Big.Box({ orientation: Big.BoxOrientation.HORIZONTAL, let dashPane = new Big.Box({ orientation: Big.BoxOrientation.HORIZONTAL,
x: 0, x: 0,
y: Panel.PANEL_HEIGHT + DASH_SECTION_PADDING, y: Panel.PANEL_HEIGHT,
width: this._width + SHADOW_WIDTH, width: this._width + SHADOW_WIDTH,
height: global.screen_height - Panel.PANEL_HEIGHT - DASH_SECTION_PADDING - bottomHeight, height: dashHeight,
reactive: true}); reactive: true});
let dashBackground = new Big.Box({ orientation: Big.BoxOrientation.HORIZONTAL, let dashBackground = new Big.Box({ orientation: Big.BoxOrientation.HORIZONTAL,
width: this._width, width: this._width,
height: global.screen_height - Panel.PANEL_HEIGHT - DASH_SECTION_PADDING - bottomHeight, height: dashHeight });
corner_radius: DASH_CORNER_RADIUS,
border: DASH_BORDER_WIDTH,
border_color: DASH_BORDER_COLOR });
dashPane.append(dashBackground, Big.BoxPackFlags.EXPAND); dashPane.append(dashBackground, Big.BoxPackFlags.EXPAND);
@ -278,9 +274,9 @@ Dash.prototype = {
this.dashOuterContainer = new Big.Box({ orientation: Big.BoxOrientation.VERTICAL, this.dashOuterContainer = new Big.Box({ orientation: Big.BoxOrientation.VERTICAL,
x: 0, x: 0,
y: dashPane.y + DASH_BORDER_WIDTH, y: dashPane.y,
width: this._width, width: this._width,
height: global.screen_height - Panel.PANEL_HEIGHT - DASH_SECTION_PADDING - bottomHeight, height: dashHeight,
padding: DASH_OUTER_PADDING padding: DASH_OUTER_PADDING
}); });
this.actor.add_actor(this.dashOuterContainer); this.actor.add_actor(this.dashOuterContainer);
@ -367,7 +363,7 @@ Dash.prototype = {
spacing: DASH_SECTION_SPACING}); spacing: DASH_SECTION_SPACING});
this._appsSection.append(this._appsText, Big.BoxPackFlags.NONE); this._appsSection.append(this._appsText, Big.BoxPackFlags.NONE);
this._itemDisplayHeight = global.screen_height - this._appsSection.y - DASH_SECTION_MISC_HEIGHT * 2 - bottomHeight; this._itemDisplayHeight = global.screen_height - this._appsSection.y - DASH_SECTION_MISC_HEIGHT * 2;
this._appsContent = new Big.Box({ orientation: Big.BoxOrientation.HORIZONTAL }); this._appsContent = new Big.Box({ orientation: Big.BoxOrientation.HORIZONTAL });
this._appsSection.append(this._appsContent, Big.BoxPackFlags.EXPAND); this._appsSection.append(this._appsContent, Big.BoxPackFlags.EXPAND);
@ -417,7 +413,7 @@ Dash.prototype = {
this._resultsPane = new Big.Box({ orientation: Big.BoxOrientation.VERTICAL, this._resultsPane = new Big.Box({ orientation: Big.BoxOrientation.VERTICAL,
x: this._width, x: this._width,
y: Panel.PANEL_HEIGHT + DASH_SECTION_PADDING, y: Panel.PANEL_HEIGHT,
height: resultsHeight, height: resultsHeight,
reactive: true }); reactive: true });
@ -449,7 +445,7 @@ Dash.prototype = {
this._resultsPane.hide(); this._resultsPane.hide();
this._detailsPane = new Big.Box({ orientation: Big.BoxOrientation.HORIZONTAL, this._detailsPane = new Big.Box({ orientation: Big.BoxOrientation.HORIZONTAL,
y: Panel.PANEL_HEIGHT + DASH_SECTION_PADDING, y: Panel.PANEL_HEIGHT,
width: this._detailsWidth + SHADOW_WIDTH, width: this._detailsWidth + SHADOW_WIDTH,
height: detailsHeight, height: detailsHeight,
reactive: true }); reactive: true });
@ -684,7 +680,6 @@ Dash.prototype = {
x = this._resultsPane.x + this._resultsPane.width; x = this._resultsPane.x + this._resultsPane.width;
else else
x = this._width; x = this._width;
x += DASH_SECTION_PADDING;
this._detailsPane.x = x; this._detailsPane.x = x;
}, },