Commit 6c751f1d authored by Petr Štětka's avatar Petr Štětka
Browse files

UI improvements (styling colors, borders, more flat, and clear by mockup).

ProcessListbox rewritten to Gtk.ListBox.
Moved backend-work to backend.
New ProcessRow and SubProcessRow.
parent 29dd0e2e
No preview for this file type
......@@ -8,18 +8,48 @@
.subProcessSubRow-max { background: #fabbbb; border: 1px solid #faa5a2; }
.subProcessSubRow-max-hover { background: #faa5a2; border: 1px solid #faa5a2; }
row { padding: 0 }
list, graph-box {
border: 1px solid #3f3f3f;
}
separator.list {
background-color: #3f3f3f;
}
row {
padding: 0;
/*background: #232729;*/
}
row:hover {
padding: 0;
background: #4d5356;
}
.sidebar-buttons {
graph-switcher-button {
padding: 6px 10px;
border-style: none;
background-color: #2b3032;
border-radius: 0;
}
rggraph#CpuGraphAllCores {
graph-switcher-button:hover {
background-color: #484f51;
}
graph-switcher-button:checked {
background-color: #383D3F;
}
graph-switcher-button:active {
background-color: #383D3F;
}
line-graph.big {
background-color: #232729;
background-size: 57px 57px;
background-image: repeating-linear-gradient(0deg, #2e2e2e, #2e2e2e 2px, transparent 2px, transparent 57px);
background-image: repeating-linear-gradient(0deg, #3f3f3f, #3f3f3f 1px, transparent 1px, transparent 57px);
}
CookieGraph.used {
......
.processRow-opened { background: #9c9c9c; border: 1px solid #898989;}
.processRow { background: #ffffff; }
.processRow-hover { background: #e2e2e2; }
.processRow-max { background: #fabbbb; border: 1px solid #faa5a2; }
.processRow-max-hover { background: #faa5a2; border: 1px solid #faa5a2; }
.subProcessSubRow { background: #f2f2f2; }
.subProcessSubRow-hover { background: #e2e2e2; }
.subProcessSubRow-max { background: #fabbbb; border: 1px solid #faa5a2; }
.subProcessSubRow-max-hover { background: #faa5a2; border: 1px solid #faa5a2; }
.sidebar-buttons {
list, graph-box {
border: 1px solid #d3d7cf;
}
list row {
padding: 0;
}
list separator {
background: #dadada;
}
list row.opened {
background: #919191;
}
list row.opened:hover {
background: #919191;
}
subprocess-list row {
padding: 0;
background: #f2f2f2;
}
subprocess-list row:hover {
padding: 0;
background: #e2e2e2;
}
graph-stack-switcher {
background: #fafafa;
}
graph-switcher-button {
padding: 6px 10px;
border-style: none;
background-color: #f4f4f3;
background-color: #fafafa;
border-radius: 0;
}
rggraph#CpuGraphAllCores {
graph-switcher-button:hover {
background-color: #eaebea;
}
graph-switcher-button:checked {
background-color: #dbdbdb;
}
graph-switcher-button:active {
background-color: #dbdbdb;
box-shadow: inset 0 2px 2px -2px rgba(0, 0, 0, 0.2);
}
scrolledwindow {
background: #f1f2f1;
}
line-graph.big {
background-color: #ffffff;
background-size: 57px 57px;
background-image: repeating-linear-gradient(0deg, #f0f1f2, #f0f1f2 2px, transparent 2px, transparent 57px);
background-image: repeating-linear-gradient(0deg, #e6e6e6, #e6e6e6 1px, transparent 1px, transparent 57px);
}
CookieGraph.used {
......
......@@ -34,6 +34,7 @@ c_library: gtop-2.0 ${CMAKE_SOURCE_DIR}/external/rg/librg.a ${CMAKE_SOURCE_DIR}/
*vala_source: gnome-usage.vala
*vala_source: graph-block-row.vala
*vala_source: graph-block.vala
*vala_source: graph-box.vala
*vala_source: graph-stack-switcher.vala
*vala_source: graph-switcher-button.vala
*vala_source: header-bar.vala
......@@ -44,7 +45,6 @@ c_library: gtop-2.0 ${CMAKE_SOURCE_DIR}/external/rg/librg.a ${CMAKE_SOURCE_DIR}/
*vala_source: performance-view.vala
*vala_source: power-view.vala
*vala_source: process-dialog.vala
*vala_source: process-list-box-new.vala
*vala_source: process-list-box.vala
*vala_source: process-row.vala
*vala_source: settings.vala
......@@ -67,33 +67,33 @@ translate: c src/better-box.c
*translate: vala src/cpu-graph-table.vala
*translate: vala src/sub-process-sub-row.vala
*translate: vala src/application.vala
*translate: vala src/process-list-box-new.vala
*translate: vala src/header-bar.vala
*translate: vala src/process-list-box.vala
*translate: vala src/network-sub-view.vala
*translate: vala src/settings.vala
*translate: vala src/process-list-box.vala
*translate: vala src/performance-view.vala
*translate: vala src/memory-graph-table.vala
*translate: vala src/graph-box.vala
*translate: vala src/view.vala
*translate: vala src/graph-switcher-button.vala
*translate: vala src/process-row.vala
*translate: vala src/disk-sub-view.vala
*translate: vala src/graph-block.vala
*translate: vala src/graph-stack-switcher.vala
*translate: vala src/system-monitor.vala
*translate: vala src/settings.vala
*translate: vala src/gnome-usage.vala
*translate: vala src/window.vala
*translate: vala src/memory-sub-view.vala
*translate: vala src/color-rectangle.vala
*translate: vala src/memory-graph.vala
*translate: vala src/process-dialog.vala
*translate: vala src/cpu-graph.vala
*translate: vala src/graph-stack-switcher.vala
*translate: vala src/storage-view.vala
*translate: vala src/process-row.vala
*translate: vala src/process-dialog.vala
*translate: vala src/sub-process-list-box.vala
*translate: vala src/cpu-sub-view.vala
*translate: vala src/system-monitor.vala
*translate: vala src/power-view.vala
*translate: vala src/cpu-sub-view.vala
*translate: vala src/cookie-graph.vala
*translate: vala src/graph-block-row.vala
*translate: vala src/graph-switcher-button.vala
*translate: vala src/data-view.vala
*data: data/local
......
......@@ -9,6 +9,7 @@ src/disk-sub-view.vala
src/gnome-usage.vala
src/graph-block-row.vala
src/graph-block.vala
src/graph-box.vala
src/graph-stack-switcher.vala
src/graph-switcher-button.vala
src/header-bar.vala
......@@ -19,7 +20,6 @@ src/network-sub-view.vala
src/performance-view.vala
src/power-view.vala
src/process-dialog.vala
src/process-list-box-new.vala
src/process-list-box.vala
src/process-row.vala
src/settings.vala
......
......@@ -47,6 +47,7 @@ set (APP_SOURCES ${APP_SOURCES} disk-sub-view.vala)
set (APP_SOURCES ${APP_SOURCES} gnome-usage.vala)
set (APP_SOURCES ${APP_SOURCES} graph-block-row.vala)
set (APP_SOURCES ${APP_SOURCES} graph-block.vala)
set (APP_SOURCES ${APP_SOURCES} graph-box.vala)
set (APP_SOURCES ${APP_SOURCES} graph-stack-switcher.vala)
set (APP_SOURCES ${APP_SOURCES} graph-switcher-button.vala)
set (APP_SOURCES ${APP_SOURCES} header-bar.vala)
......@@ -57,7 +58,6 @@ set (APP_SOURCES ${APP_SOURCES} network-sub-view.vala)
set (APP_SOURCES ${APP_SOURCES} performance-view.vala)
set (APP_SOURCES ${APP_SOURCES} power-view.vala)
set (APP_SOURCES ${APP_SOURCES} process-dialog.vala)
set (APP_SOURCES ${APP_SOURCES} process-list-box-new.vala)
set (APP_SOURCES ${APP_SOURCES} process-list-box.vala)
set (APP_SOURCES ${APP_SOURCES} process-row.vala)
set (APP_SOURCES ${APP_SOURCES} settings.vala)
......
......@@ -9,18 +9,15 @@ namespace Usage
{
private static CpuGraphTableMostUsedCore rg_table;
private LineRenderer renderer;
private const string red_color = "#ee2222";
private const string red_color = "#ee2222"; //TODO load from css
private const string blue_color = "#4a90d9";
public CpuGraphMostUsed ()
{
if(rg_table == null)
{
rg_table = new CpuGraphTableMostUsedCore();
set_table(rg_table);
}
else
set_table(rg_table);
set_table(rg_table);
renderer = new LineRenderer();
renderer.stroke_color = blue_color;
......@@ -42,21 +39,23 @@ namespace Usage
**/
public class CpuGraphAllCores : Rg.Graph
{
private static CpuGraphTableComplex rg_table;
private static CpuGraphTableComplex table;
private LineRenderer[] renderers;
private const string red_color = "#ee2222";
private const string blue_color = "#a8c9ed";
class construct
{
set_css_name("line-graph");
}
public CpuGraphAllCores ()
{
name = "CpuGraphAllCores";
if(rg_table == null)
{
rg_table = new CpuGraphTableComplex();
set_table(rg_table);
}
else
set_table(rg_table);
get_style_context().add_class("big");
if(table == null)
table = new CpuGraphTableComplex();
set_table(table);
renderers = new LineRenderer[get_num_processors()];
for(int i = 0; i < get_num_processors(); i++)
......@@ -68,11 +67,11 @@ namespace Usage
add_renderer(renderers[i]);
}
rg_table.big_process_usage.connect ((column) => {
table.big_process_usage.connect ((column) => {
renderers[column].stroke_color = red_color;
});
rg_table.small_process_usage.connect ((column) => {
table.small_process_usage.connect ((column) => {
renderers[column].stroke_color = blue_color;
});
}
......
......@@ -12,21 +12,20 @@ namespace Usage
label.margin_bottom = 15;
var cpu_graph = new CpuGraphAllCores();
var cpu_graph_frame = new Gtk.Frame(null);
cpu_graph_frame.height_request = 225;
cpu_graph_frame.width_request = 600;
cpu_graph_frame.valign = Gtk.Align.START;
cpu_graph_frame.add(cpu_graph);
cpu_graph.hexpand = true;
var cpu_graph_box = new GraphBox(cpu_graph);
cpu_graph_box.height_request = 225;
cpu_graph_box.width_request = 600;
cpu_graph_box.valign = Gtk.Align.START;
var process_list_box_frame = new Gtk.Frame(null);
process_list_box_frame.margin_top = 30;
process_list_box_frame.margin_bottom = 20;
process_list_box_frame.add(new ProcessListBox());
var process_list_box = new ProcessListBoxNew();
process_list_box.margin_bottom = 20;
process_list_box.margin_top = 30;
var cpu_box = new Gtk.Box(Gtk.Orientation.VERTICAL, 0);
cpu_box.pack_start(label, false, false, 0);
cpu_box.pack_start(cpu_graph_frame, false, false, 0);
cpu_box.pack_start(process_list_box_frame, false, false, 0);
cpu_box.pack_start(cpu_graph_box, false, false, 0);
cpu_box.pack_start(process_list_box, false, false, 0);
var better_box = new Better.Box();
better_box.max_width_request = 600;
......
using Gtk;
namespace Usage {
public class GraphBox : Gtk.Box {
class construct
{
set_css_name("graph-box");
}
public GraphBox (Rg.Graph graph) {
add(graph);
}
}
}
......@@ -12,6 +12,11 @@ namespace Usage
bool can_change = true;
class construct
{
set_css_name("graph-stack-switcher");
}
public GraphStackSwitcher(Gtk.Stack stack, View[] sub_views)
{
Object(orientation: Gtk.Orientation.VERTICAL, spacing: 0);
......
......@@ -6,55 +6,49 @@ namespace Usage
{
Rg.Graph processor_graph = new CpuGraphMostUsed();
child = createContent(processor_graph, label);
style_button();
}
public GraphSwitcherButton.memory(string label)
{
Rg.Graph memory_graph = new MemoryGraph();
child = createContent(memory_graph, label);
style_button();
}
public GraphSwitcherButton.disk(string label)
{
Rg.Graph disk_graph = new MemoryGraph();
child = createContent(disk_graph, label);
style_button();
}
public GraphSwitcherButton.network(string label)
{
Rg.Graph network_graph = new MemoryGraph();
child = createContent(network_graph, label);
style_button();
}
private Gtk.Box createContent(Rg.Graph graph, string label_text)
{
var graph_frame = new Gtk.Frame(null);
graph_frame.height_request = 80;
graph_frame.margin_top = 12;
graph_frame.margin_start = 8;
graph_frame.margin_end = 8;
graph_frame.add(graph);
graph.height_request = 80;
graph.hexpand = true;
var graph_box = new GraphBox(graph);
graph_box.margin_top = 12;
graph_box.margin_start = 8;
graph_box.margin_end = 8;
var label = new Gtk.Label(label_text);
label.margin_top = 6;
label.margin_bottom = 3;
var box = new Gtk.Box(Gtk.Orientation.VERTICAL, 0);
box.pack_start(graph_frame, true, true, 0);
box.pack_start(graph_box, true, true, 0);
box.pack_start(label, false, false, 0);
return box;
}
private void style_button()
class construct
{
relief = Gtk.ReliefStyle.NONE;
get_style_context().add_class("sidebar-buttons");
set_can_focus(false);
set_css_name("graph-switcher-button");
}
}
}
......@@ -57,7 +57,7 @@ namespace Usage
private bool update()
{
unowned SystemMonitor monitor = (GLib.Application.get_default() as Application).monitor;
unowned Process data = monitor.get_data_for_pid(pid);
unowned Process data = monitor.get_process_by_pid(pid);
int app_cpu_load = 0;
int app_memory_usage = 0;
if(data != null)
......
......@@ -2,17 +2,33 @@ using Gee;
namespace Usage
{
public class ProcessListBox : Gtk.Box //TODO rewrite it to ListBox and use model
public class ProcessListBoxNew : Gtk.ListBox
{
HashTable<string, ProcessRow> process_rows_table;
ListStore model;
HashSet<string> rows;
string cmdline_opened_process;
public ProcessListBox()
public ProcessListBoxNew()
{
orientation = Gtk.Orientation.VERTICAL;
process_rows_table = new HashTable<string, ProcessRow>(str_hash, str_equal);
set_selection_mode (Gtk.SelectionMode.NONE);
set_header_func (update_header);
row_activated.connect( (row) => {
var process_row = (ProcessRowNew) row;
process_row.activate();
if(cmdline_opened_process == null)
cmdline_opened_process = process_row.process.cmdline;
else
cmdline_opened_process = null;
});
rows = new HashSet<string>();
model = new ListStore(typeof(Process));
bind_model(model, on_row_created);
var settings = (GLib.Application.get_default() as Application).settings;
Timeout.add((GLib.Application.get_default() as Application).settings.list_update_interval_UI, update);
Timeout.add((GLib.Application.get_default() as Application).settings.first_update_interval, () => //on first load
Timeout.add(settings.list_update_interval_UI, update);
Timeout.add(settings.first_list_update_interval_UI, () => //First load
{
update();
return false;
......@@ -21,77 +37,60 @@ namespace Usage
public bool update()
{
foreach(unowned ProcessRow row in process_rows_table.get_values())
row.pre_update();
var duplicates = new HashSet<string>();
//TODO move this logic to SystemMonitor!
foreach(unowned Process process in (GLib.Application.get_default() as Application).monitor.get_processes())
foreach(unowned Process process in (GLib.Application.get_default() as Application).monitor.get_processes_cmdline())
{
if(duplicates.contains(process.cmdline))
if((process.cmdline in rows) == false)
{
unowned ProcessRow row = process_rows_table[process.cmdline];
if(!row.is_in_subrows(process.pid))
if(process.cpu_load >= 1)
{
if((int) process.cpu_load > 0)
row.add_sub_row(process.pid, (int) process.cpu_load, process.cmdline);
}
else
{
if((int) process.cpu_load > 0)
row.update_sub_row(process.pid, (int) process.cpu_load);
}
}
else
{
if(!(process.cmdline in process_rows_table))
{
if((int) process.cpu_load > 0)
{
ProcessRow row = new ProcessRow(process.pid, (int) process.cpu_load, process.cmdline);
process_rows_table.insert (process.cmdline, row);
duplicates.add(process.cmdline);
}
}
else
{
if((int) process.cpu_load > 0)
{
unowned ProcessRow row = process_rows_table[process.cmdline];
row.set_value(process.pid, (int) process.cpu_load);
duplicates.add(process.cmdline);
}
rows.add(process.cmdline);
model.append(process);
}
}
}
this.forall ((element) => this.remove (element)); //clear box
model.sort(sort);
var rows_sorted = new Gee.ArrayList<unowned ProcessRow>();
foreach(unowned ProcessRow row in process_rows_table.get_values())
{
row.post_update();
if(row.get_alive() == false)
process_rows_table.remove(row.get_cmdline());
else
rows_sorted.add(row);
}
for(uint i = 0; i < model.get_n_items(); i++)
{
Process row = (Process) model.get_item(i);
if(row.alive == false || row.cpu_load < 1)
{
rows.remove(row.cmdline);
model.remove(i);
}
}
sort(rows_sorted);
return true;
}
foreach(unowned ProcessRow row in rows_sorted)
this.add(row);
public Gtk.Widget on_row_created (Object item)
{
Process process = (Process) item;
bool opened = false;
if(process.cmdline == cmdline_opened_process)
opened = true;
return true;
var row = new ProcessRowNew(process, opened);
return row;
}
private void sort(Gee.ArrayList<unowned ProcessRow> rows)
void update_header(Gtk.ListBoxRow row, Gtk.ListBoxRow? before_row)
{
if(before_row == null)
row.set_header(null);
else
{
var separator = new Gtk.Separator (Gtk.Orientation.HORIZONTAL);
separator.get_style_context().add_class("list");
separator.show();
row.set_header(separator);
}
}
public int sort(GLib.CompareDataFunc.G a, GLib.CompareDataFunc.G b)
{
rows.sort((a, b) => {
return b.get_value() - a.get_value();
});
return (int) ((Process) b).cpu_load - (int) ((Process) a).cpu_load;
}
}
}
using Posix;
using Gee;
namespace Usage
{
public class ProcessRow : Gtk.Box //TODO use Row
public class ProcessRowNew : Gtk.ListBoxRow
{
Gtk.Image icon;
Gtk.Label title_label;
Gtk.Label load_label;
Gtk.Revealer revealer;
Gtk.EventBox event_box;
SubProcessListBox sub_process_list_box;
bool in_box = false;
pid_t pid;
int value;