[gnome-sound-recorder] multiple files: improve the appearance of the buttons according to Jakub's mockups

[Meg Ford (Margaret) <megford src gnome org>]

commit 511cb277256337c31f0e2d6b4867e422ea06fc0d
Author: Meg Ford <meg387 gmail com>
Date:   Fri Feb 28 00:04:32 2014 -0600

    multiple files: improve the appearance of the buttons according to Jakub's mockups

 data/application.css |   25 +++++++++++++++----------
 src/mainWindow.js    |   28 +++++++++++++++++++++++++++-
 src/waveform.js      |    2 +-
 3 files changed, 43 insertions(+), 12 deletions(-)
---
diff --git a/data/application.css b/data/application.css
index c8ff35e..85050ca 100644
--- a/data/application.css
+++ b/data/application.css
@@ -1,37 +1,42 @@
 .view .button {
-  background-color: shade(@theme_selected_bg_color, 1.1);
+  background-color: rgba(255,255,255,0.20);
+  border-left: rgba(255,255,255,1.0) 0.5px solid;
+  border-right: rgba(255,255,255,1.0) 0.5px solid;
   background-image: none;
   border: none;
-  color: rgba(255,255,255,0.45);
   border-radius: 0px; 
   margin: 0; 
 }
 
 .view .button:hover {
-    background-color: shade(@theme_selected_bg_color, 1.45);
-    transition: 200ms linear
+  background-color: rgba(255,255,255,0.30);
+  transition: 200ms linear;
 }
 
-.view .toolbar {
-  background-color: @theme_selected_bg_color;  
+.view .toolbar { 
+  border-right: rgba(255,255,255,1.0) 0.5px solid; 
   border-radius: 0px;
 }
 
 .view .toolbarEnd {
-  border-left: rgba(255,255,255,0.45) 1px solid; 
+  color: rgba(255,255,255, 1.0); 
 }
 
 .view .toolbarEnd:hover {
-  border-left: rgba(255,255,255,0.45) 1px solid;
+  color: rgba(255,255,255, 1.0);
   transition: 200ms linear; 
 }
 
 .view .toolbarSecond {
-  border-right: rgba(255,255,255,0.45) 1px solid;
+  border-left: rgba(255,255,255,1.0) 0.5px solid;
+  border-right: rgba(255,255,255,1.0) 0.5px solid;
+  color: rgba(255,255,255, 1.0);
 }
 
 .view .toolbarSecond:hover {
-  border-right: rgba(255,255,255,0.45) 1px solid;
+  border-left: rgba(255,255,255,1.0) 0.5px solid;
+  border-right: rgba(255,255,255,1.0) 0.5px solid;
+  color: rgba(255,255,255, 1.0);
   transition: 200ms linear; 
 }
 
diff --git a/src/mainWindow.js b/src/mainWindow.js
index 6345e27..c93a2fc 100644
--- a/src/mainWindow.js
+++ b/src/mainWindow.js
@@ -346,7 +346,21 @@ const MainView = new Lang.Class({
                 this.listBox.add(this.rowGrid);
                 this.rowGrid.show();                
                 let rtl = Gtk.Widget.get_default_direction() == Gtk.TextDirection.RTL;
-
+                
+                this.placeholderImage = Gtk.Image.new();
+                this.placeholderImage.set_from_icon_name(rtl ? 'media-playback-start-rtl-symbolic' :
+                                                            'media-playback-start-symbolic',
+                                                         Gtk.IconSize.BUTTON);
+                this._placeholderButton = new Gtk.Button({ hexpand: true,
+                                                           vexpand: true,
+                                                           name: "PlaceholderButton" });
+                this._placeholderButton.set_image(this.placeholderImage);
+                this.rowGrid.attach(this._placeholderButton, 0, 0, 2, 2);
+                this._placeholderButton.set_no_show_all(true);
+                this.placeholderImage.show();
+                this._placeholderButton.show();
+                this._placeholderButton.get_style_context().add_class("dim-label");
+                
                 // play button
                 this.playImage = Gtk.Image.new();
                 this.playImage.set_from_icon_name(rtl ? 'media-playback-start-rtl-symbolic' :
@@ -357,6 +371,7 @@ const MainView = new Lang.Class({
                                                         name: "PlayButton" });
                 this._playListButton.set_image(this.playImage);
                 this._playListButton.set_tooltip_text(_("Play"));
+                this._playListButton.get_style_context().add_class("toolbar");
                 this.rowGrid.attach(this._playListButton, 0, 0, 2, 2);
                 this._playListButton.hide();
                 this._playListButton.connect('clicked', Lang.bind(this,
@@ -378,6 +393,7 @@ const MainView = new Lang.Class({
                 this._pauseListButton.set_image(this.pauseImage);
                 this._pauseListButton.set_tooltip_text(_("Pause"));
                 this.rowGrid.attach(this._pauseListButton, 0, 0, 2, 2);
+                this._pauseListButton.get_style_context().add_class("toolbar");
                 this._pauseListButton.hide();
                 this._pauseListButton.connect('clicked', Lang.bind(this,
                     function(){
@@ -536,6 +552,11 @@ const MainView = new Lang.Class({
                     
                     if (!alwaysShow)
                         child.hide();
+                    
+                    if (child.name == "PauseButton") {
+                        child.hide();
+                        child.sensitive = false;
+                    } 
                         
                     if (child.name == "PlayLabelBox") {
                         child.show();
@@ -579,6 +600,11 @@ const MainView = new Lang.Class({
                     if (!alwaysShow)
                         child.sensitive = true;
                         
+                    if (child.name == "PauseButton") {
+                        child.hide();
+                        child.sensitive = false;
+                    } 
+                        
                     if (child.name == "WaveFormGrid")
                         child.sensitive = true;
                 }));
diff --git a/src/waveform.js b/src/waveform.js
index 83f68b5..ffdf990 100644
--- a/src/waveform.js
+++ b/src/waveform.js
@@ -66,7 +66,7 @@ const WaveForm = new Lang.Class({
         let drawingWidth = 0;
         let drawingHeight = 0;
         this.drawing = Gtk.DrawingArea.new({ height_request: 45,
-                                             width_request: 600,
+                                             width_request: 350,
                                              valign: Gtk.Align.FILL });
         if (this.waveType == WaveType.RECORD) {
             gridWidth = MainWindow.groupGrid.get_allocated_width();