Skip to content

Commit

Permalink
3.5.0 - New UI style
Browse files Browse the repository at this point in the history
  • Loading branch information
Lains committed Apr 25, 2021
1 parent 570190c commit 9f2b65e
Show file tree
Hide file tree
Showing 7 changed files with 190 additions and 63 deletions.
18 changes: 1 addition & 17 deletions build-aux/flatpak/io.github.lainsce.Khronos.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"app-id" : "io.github.lainsce.Khronos",
"runtime" : "org.gnome.Sdk",
"runtime-version" : "3.38",
"runtime-version" : "40",
"sdk" : "org.gnome.Sdk",
"command" : "io.github.lainsce.Khronos",
"rename-icon" : "io.github.lainsce.Khronos.Devel",
Expand Down Expand Up @@ -83,22 +83,6 @@
}
]
},
{
"name" : "gtk4",
"buildsystem" : "meson",
"config-opts" : [
"-Ddemos=false",
"-Dbuild-examples=false",
"-Dbuild-tests=false"
],
"sources" : [
{
"type" : "archive",
"url" : "https://download.gnome.org/sources/gtk/4.1/gtk-4.1.1.tar.xz",
"sha256" : "f7e1789f6c637b091cffb17de08bd9c3986543282eecdff0750dd04f1673b737"
}
]
},
{
"name" : "libadwaita",
"buildsystem": "meson",
Expand Down
5 changes: 5 additions & 0 deletions data/meson.build
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,11 @@ install_data(
install_dir: join_paths(get_option('datadir'), 'icons', 'hicolor', 'symbolic', 'apps')
)

install_data(
join_paths('icons', '16', 'stopwatch-symbolic.svg'),
install_dir: join_paths(get_option('datadir'), 'icons', 'hicolor', 'scalable', 'actions')
)

install_data(
meson.project_name() + '.gschema.xml',
install_dir: join_paths(get_option('datadir'), 'glib-2.0', 'schemas')
Expand Down
Binary file modified data/shot.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
124 changes: 124 additions & 0 deletions data/stylesheet.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,130 @@
padding: 6px;
}

button.circular {
border-radius: 9999px;
}

button.circular.suggested-action {
border-radius: 9999px;
}

.circular label {
padding: 0px 12px;
}

.text-button.suggested-action {
background: mix(#1c71d8, alpha(@theme_bg_color, 0.2), 0.8);
color: @theme_fg_color;
box-shadow: none;
}

.text-button.suggested-action:hover {
background: mix(#1c71d8, alpha(@theme_bg_color, 0.2), 0.7);
}

.text-button.suggested-action:active,
.text-button.suggested-action:active:checked {
background: mix(#1c71d8, alpha(@theme_bg_color, 0.05), 0.9);
box-shadow: inset 0 0 3px 0 alpha(@theme_fg_color, 0.5);
}

.text-button.destructive-action {
background: mix(#e01b24, alpha(@theme_bg_color, 0.2), 0.8);
color: @theme_fg_color;
border: none;
}

.text-button.destructive-action:hover {
background: mix(#e01b24, alpha(@theme_bg_color, 0.2), 0.7);
}

.text-button.destructive-action:active,
.text-button.destructive-action:active:checked {
background: mix(#e01b24, alpha(@theme_bg_color, 0.05), 0.9);
box-shadow: inset 0 0 3px 0 alpha(@theme_fg_color, 0.5);
}

.destructive-action {
background: mix(#e01b24, alpha(@theme_bg_color, 0.2), 0.8);
color: @theme_fg_color;
border: none;
}

.destructive-action:hover {
background: mix(#e01b24, alpha(@theme_bg_color, 0.2), 0.7);
}

.destructive-action:active,
.destructive-action:active:checked {
background: mix(#e01b24, alpha(@theme_bg_color, 0.05), 0.9);
box-shadow: inset 0 0 3px 0 alpha(@theme_fg_color, 0.5);
}

headerbar,
headerbar.flat {
background-color: @theme_bg_color;
background-image: none;
transition: 100ms ease-in-out;
}

headerbar.flat:backdrop {
background-image: none;
background-color: @theme_base_color;
}

.header-button {
border-radius: 8px;
background: alpha(@theme_fg_color, 0.1);
border: none;
box-shadow: none;
transition: 100ms ease-in-out;
}

.toggle:hover {
background: alpha(@theme_fg_color, 0.1);
box-shadow: none;
transition: 100ms ease-in-out;
}

.header-button image {
padding: 0;
margin: 0;
}

.text-button {
background: alpha(@theme_fg_color, 0.1);
border: none;
box-shadow: none;
transition: 100ms ease-in-out;
}

.header-button:hover,
.text-button:hover,
.toggle:checked {
background: alpha(@theme_fg_color, 0.2);
}

.header-button:active,
.text-button:active,
.toggle:active {
background: alpha(@theme_fg_color, 0.05);
box-shadow: inset 0 0 3px 0 alpha(@theme_fg_color, 0.5);
}

.header-toggle-button > button {
border-radius: 8px;
background: alpha(@theme_fg_color, 0.1);
border: none;
box-shadow: none;
transition: 100ms ease-in-out;
}

.header-toggle-button > button:hover {
background: alpha(@theme_fg_color, 0.2);
}

.header-toggle-button > button:active {
background: alpha(@theme_fg_color, 0.05);
box-shadow: inset 0 0 3px 0 alpha(@theme_fg_color, 0.5);
}
2 changes: 1 addition & 1 deletion data/ui/logrow.ui
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@
<property name="action-name">win.delete_row</property>
<child>
<object class="GtkImage">
<property name="icon-name">edit-delete-symbolic</property>
<property name="icon-name">window-close-symbolic</property>
</object>
</child>
<style>
Expand Down
101 changes: 57 additions & 44 deletions data/ui/main_window.ui
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,9 @@
<property name="name">main_title</property>
<property name="child">
<object class="AdwHeaderBar" id="timer_header">
<style>
<class name="flat"/>
</style>
<child type="title">
<object class="AdwViewSwitcher" id="win_switcher">
<property name="stack">win_stack</property>
Expand All @@ -26,7 +29,7 @@
<property name="can-focus">True</property>
<property name="icon-name">open-menu-symbolic</property>
<style>
<class name="image-button"/>
<class name="header-toggle-button"/>
</style>
</object>
</child>
Expand All @@ -39,6 +42,9 @@
<property name="name">logs_title</property>
<property name="child">
<object class="AdwHeaderBar" id="list_header">
<style>
<class name="flat"/>
</style>
<child type="title">
<object class="AdwViewSwitcher" id="win_switcher2">
<property name="stack">win_stack</property>
Expand All @@ -49,7 +55,7 @@
<property name="can-focus">True</property>
<property name="icon-name">open-menu-symbolic</property>
<style>
<class name="image-button"/>
<class name="header-toggle-button"/>
</style>
</object>
</child>
Expand All @@ -60,6 +66,7 @@
<property name="tooltip-text" translatable="yes">Removes all logs from the list</property>
<style>
<class name="image-button"/>
<class name="destructive-action"/>
</style>
</object>
</child>
Expand Down Expand Up @@ -121,6 +128,7 @@
<property name="label" translatable="yes">Add Log</property>
<property name="tooltip-text" translatable="yes">Adds a log to the list</property>
<style>
<class name="header-button"/>
<class name="circular"/>
</style>
</object>
Expand All @@ -140,58 +148,63 @@
<object class="GtkScrolledWindow">
<property name="vexpand">1</property>
<child>
<object class="GtkBox">
<property name="margin-start">12</property>
<property name="margin-end">12</property>
<property name="margin-top">12</property>
<property name="margin-bottom">12</property>
<property name="orientation">vertical</property>
<property name="spacing">12</property>
<property name="vexpand">1</property>
<object class="AdwClamp">
<property name="maximum-size">400</property>
<child>
<object class="GtkListBox" id="column">
<object class="GtkBox">
<property name="margin-start">12</property>
<property name="margin-end">12</property>
<property name="margin-top">12</property>
<property name="margin-bottom">12</property>
<property name="orientation">vertical</property>
<property name="spacing">12</property>
<property name="vexpand">1</property>
<style>
<class name="content"/>
</style>
<child type="placeholder">
<object class="GtkBox" id="placeholder">
<property name="halign">center</property>
<property name="valign">center</property>
<child>
<object class="GtkListBox" id="column">
<property name="vexpand">1</property>
<property name="orientation">vertical</property>
<property name="spacing">12</property>
<child>
<object class="GtkImage">
<property name="icon-name">preferences-system-time-symbolic</property>
<property name="pixel-size">96</property>
<style>
<class name="dim-label"/>
</style>
</object>
</child>
<child>
<object class="GtkLabel">
<property name="label" translatable="yes">No Logs</property>
<style>
<class name="large-title"/>
</style>
</object>
</child>
<child>
<object class="GtkLabel">
<property name="label" translatable="yes">Add a log on Timer tab and check later.</property>
<style>
<class name="dim-label"/>
</style>
<style>
<class name="content"/>
</style>
<child type="placeholder">
<object class="GtkBox" id="placeholder">
<property name="halign">center</property>
<property name="valign">center</property>
<property name="vexpand">1</property>
<property name="orientation">vertical</property>
<property name="spacing">12</property>
<child>
<object class="GtkImage">
<property name="icon-name">preferences-system-time-symbolic</property>
<property name="pixel-size">96</property>
<style>
<class name="dim-label"/>
</style>
</object>
</child>
<child>
<object class="GtkLabel">
<property name="label" translatable="yes">No Logs</property>
<style>
<class name="large-title"/>
</style>
</object>
</child>
<child>
<object class="GtkLabel">
<property name="label" translatable="yes">Add a log on Timer tab and check later.</property>
<style>
<class name="dim-label"/>
</style>
</object>
</child>
</object>
</child>
</object>
</child>
</object>
</child>
</object>
</child>
</child>>
</object>
</property>
</object>
Expand Down
3 changes: 2 additions & 1 deletion src/MainWindow.vala
View file
Original file line number Diff line number Diff line change
Expand Up @@ -238,6 +238,7 @@ namespace Khronos {
return true;
});;
column_play_button.label = _("Stop Timer");
column_play_button.get_style_context ().remove_class ("suggested-action");
column_play_button.get_style_context ().add_class ("destructive-action");
column_button.sensitive = false;
} else {
Expand Down Expand Up @@ -309,7 +310,7 @@ namespace Khronos {

tm.load_from_file ();

this.set_size_request (360, 360);
this.set_size_request (300, 360);
this.show ();
this.present ();

Expand Down

0 comments on commit 9f2b65e

Please sign in to comment.