Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use WindowControls, all spacing with css #63

Merged
merged 1 commit into from
Aug 29, 2024
Merged

Use WindowControls, all spacing with css #63

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 37 additions & 21 deletions data/Application.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,39 +17,55 @@
* Boston, MA 02110-1301 USA
*/

grade {
color: #fff;
background-color: alpha(#333, 0.9);
border-radius: 50%;
box-shadow: 0 1px shade(@colorBackground, 1.15);
min-height: 76px;
min-width: 76px;
margin: 12px;
-gtk-icon-size: 24px;
windowcontrols {
margin: 0.5em;
}

grade label {
font-weight: bold;
margin-top: 20px;
box.start > box,
box.end > box {
margin: 1em;
margin-top: 0.5em;
border-spacing: 0.5em;
}

.results {
box.end {
background-color: @colorBackground;
color: @colorForeground;
box-shadow:
inset 1px 0 0 0 shade(@colorBackground, 1.07),
inset -1px 0 0 0 shade(@colorBackground, 1.07),
inset 0 -1px 0 0 shade(@colorBackground, 1.1);
padding: 12px;
inset 0 1px 0 0 shade(@colorBackground, 1.1),
inset 1px 0 0 0 shade(@colorBackground, 1.05),
inset -1px 0 0 0 shade(@colorBackground, 1.05),
inset 0 -1px 0 0 shade(@colorBackground, 1.07);
transition: all 250ms ease-in-out;
}

.results:dir(ltr) {
border-bottom-right-radius: 3px;
box.end:dir(ltr) {
border-bottom-right-radius: 6px;
border-top-right-radius: 6px;
border-left: solid 1px shade(@colorBackground, 0.8);
}

.results:dir(rtl) {
border-bottom-left-radius: 3px;
box.end:dir(rtl) {
border-bottom-left-radius: 6px;
border-top-left-radius: 6px;
border-right: solid 1px shade(@colorBackground, 0.8);
}

box.end box.horizontal {
border-spacing: 1em;
}

grade {
color: #fff;
background-color: alpha(#333, 0.9);
border-radius: 50%;
box-shadow: 0 1px shade(@colorBackground, 1.15);
min-height: 6em;
min-width: 6em;
-gtk-icon-size: 2em;
}

grade label {
font-weight: bold;
margin-top: 2em;
}
60 changes: 30 additions & 30 deletions src/MainWindow.vala
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,18 +42,23 @@ public class MainWindow : Gtk.Window {
text = settings.get_string ("bg-color"),
};

var input_box = new Gtk.Box (VERTICAL, 0) {
margin_top = 12,
margin_end = 12,
margin_bottom = 12,
margin_start = 12,
vexpand = true
};
var start_windowcontrols = new Gtk.WindowControls (START);

var input_box = new Gtk.Box (VERTICAL, 0);
input_box.append (fg_label);
input_box.append (fg_entry);
input_box.append (bg_label);
input_box.append (bg_entry);

var start_box = new Gtk.Box (VERTICAL, 0);
start_box.add_css_class ("start");
start_box.append (start_windowcontrols);
start_box.append (input_box);

var end_windowcontrols = new Gtk.WindowControls (END) {
halign = END
};

results_label = new Gtk.Label ("12:1") {
hexpand = true,
vexpand = true,
Expand All @@ -64,53 +69,48 @@ public class MainWindow : Gtk.Window {
results_label.add_css_class (Granite.STYLE_CLASS_H1_LABEL);

a_level = new GradeLabel ("WCAG A") {
halign = CENTER,
tooltip_markup = "<big><b>%s</b></big>\n%s".printf (
_("3:1"),
_("The minimum level recommended by ISO-9241-3 and ANSI-HFES-100-1988 for standard text and vision")
)
};

aa_level = new GradeLabel ("WCAG AA") {
halign = CENTER,
tooltip_markup = "<big><b>%s</b></big>\n%s".printf (
_("4.5:1"),
_("Compensates for the loss in contrast that results from moderately low visual acuity, color deficiencies, or aging.")
)
};

aaa_level = new GradeLabel ("WCAG AAA") {
halign = CENTER,
tooltip_markup = "<big><b>%s</b></big>\n%s".printf (
_("7:1"),
_("Compensates for the loss in contrast sensitivity usually experienced by users with about 20/80 vision. People with more than this degree of vision loss usually use assistive technologies.")
)
};

var results_grid = new Gtk.Grid () {
row_spacing = 12
};
results_grid.add_css_class ("results");
results_grid.attach (results_label, 0, 0, 3, 1);
results_grid.attach (a_level, 0, 1);
results_grid.attach (aa_level, 1, 1);
results_grid.attach (aaa_level, 2, 1);

var input_header = new Gtk.HeaderBar () {
decoration_layout = "close:",
show_title_buttons = true
var levels_box = new Gtk.Box (HORIZONTAL, 0) {
halign = CENTER
};
input_header.add_css_class ("input-header");
input_header.add_css_class ("default-decoration");
input_header.add_css_class ("flat");
levels_box.append (a_level);
levels_box.append (aa_level);
levels_box.append (aaa_level);

var results_box = new Gtk.Box (VERTICAL, 0);
results_box.append (results_label);
results_box.append (levels_box);

var end_box = new Gtk.Box (VERTICAL, 0);
end_box.add_css_class ("end");
end_box.append (end_windowcontrols);
end_box.append (results_box);

var grid = new Gtk.Grid ();
grid.attach (input_header, 0, 0);
grid.attach (input_box, 0, 1);
grid.attach (results_grid, 1, 0, 1, 2);
var main_box = new Gtk.Box (HORIZONTAL, 0);
main_box.append (start_box);
main_box.append (end_box);

var window_handle = new Gtk.WindowHandle () {
child = grid
child = main_box
};

child = window_handle;
Expand Down