Commit 511cb277 authored by Meg Ford's avatar Meg Ford

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

parent 24ab21a5
.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;
}
......
......@@ -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;
}));
......
......@@ -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();
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment