Commit 4c133a8d authored by Bilal Elmoussaoui's avatar Bilal Elmoussaoui
Browse files

WIP: new design!

parent 0cb34d7a
Pipeline #98815 passed with stages
in 11 minutes and 57 seconds
......@@ -21,5 +21,11 @@
<default>false</default>
<summary>Maximized state of the last opened window</summary>
</key>
<key name="background-colour" type="s">
<default>'#813D9C'</default>
</key>
<key name="foreground-colour" type="s">
<default>'#F6D32D'</default>
</key>
</schema>
</schemalist>
/*Redefine those variables so we can tweak them later*/
@define-color foreground_color @theme_fg_color;
@define-color background_color @theme_bg_color;
.main-window headerbar
{
background: darker(@background_color);
color: white;
}
.main-window headerbar entry {
background: white;
color: @theme_fg_color;
}
.main-window headerbar button,
.main-window headerbar button:active,
.main-window headerbar button:focus,
.main-window headerbar button:backdrop{
border: 1px solid @background_color;
background: @background_color;
box-shadow: 0 0;
color: white;
}
.preview {
padding: 12px;
background-color: @theme_bg_color;
padding: 12px;
background-color: @background_color;
}
.preview-head{
font-size: 38px;
font-weight: bold;
color: @theme_fg_color;
font-size: 60px;
font-weight: bolder;
color: @foreground_color;
}
.main-window .level-box {
background: @background_color;
padding: 12px;
}
.level-label {
font-size: 14px;
color: white;
padding: 12px;
}
.levelbar trough{
background: darker(@background_color);
border: 0;
padding:2px;
}
.main-window .menu {
background: lighter(@background_color);
border: 1px solid darker(@background_color);
}
.preview-text{
font-size: 14px;
color: @theme_fg_color;
.main-window .menu label {
color: white;
}
......@@ -9,11 +9,12 @@
<property name="default_height">500</property>
<property name="icon_name">@app-id@</property>
<child type="titlebar">
<object class="GtkHeaderBar" id="headerbar">
<object class="HdyHeaderBar" id="headerbar">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="title" translatable="yes">@name-prefix@Colour Contrast</property>
<property name="show_close_button">True</property>
<property name="centering_policy">HDY_CENTERING_POLICY_LOOSE</property>
<child>
<object class="GtkMenuButton" id="appmenu_button">
<property name="visible">True</property>
......
use crate::config;
use crate::utils::load_stylesheet;
use crate::window::Window;
use gio::prelude::*;
use gtk::prelude::*;
......@@ -65,6 +66,12 @@ impl Application {
let p = gtk::CssProvider::new();
gtk::CssProvider::load_from_resource(&p, "/org/gnome/design/ColourContrast/style.css");
gtk::StyleContext::add_provider_for_screen(&gdk::Screen::get_default().unwrap(), &p, 500);
let fg_color = self.window.settings.get_string("foreground-colour").unwrap();
let bg_color = self.window.settings.get_string("background-colour").unwrap();
let stylesheet = format!("@define-color foreground_color {}; @define-color background_color {};", fg_color.as_str(), bg_color.as_str());
println!("style: {}", stylesheet);
load_stylesheet(stylesheet);
}
pub fn run(&self) {
......
......@@ -30,6 +30,8 @@ impl ColourEntry {
self.entry.set_placeholder_text(Some(label.as_str()));
self.entry.set_halign(gtk::Align::Center);
self.entry.set_valign(gtk::Align::Center);
self.entry.get_style_context().add_class("colour-entry");
self.entry.set_width_chars(8);
self.entry.show();
self.widget.pack_start(&self.entry, false, false, 0);
......
use crate::gtk::{BoxExt, LabelExt, StyleContextExt, WidgetExt};
use crate::gtk::{BoxExt, LabelExt, LevelBarExt, StyleContextExt, WidgetExt};
pub struct ContrastLevelBar {
pub widget: gtk::Box,
levelbar: gtk::LevelBar,
level_label: gtk::Label,
}
pub enum ContrastLevel {
......@@ -16,15 +17,36 @@ impl ContrastLevelBar {
let widget = gtk::Box::new(gtk::Orientation::Vertical, 0);
let levelbar = gtk::LevelBar::new();
let contrast_levelbar = ContrastLevelBar { widget, levelbar };
let level_label = gtk::Label::new(Some(""));
let contrast_levelbar = ContrastLevelBar { widget, levelbar, level_label };
contrast_levelbar.init();
contrast_levelbar
}
fn init(&self) {
self.widget.set_halign(gtk::Align::Fill);
self.widget.get_style_context().add_class("level-box");
self.levelbar.get_style_context().add_class("levelbar");
self.levelbar.set_min_value(0.0);
self.levelbar.set_max_value(21.0);
self.levelbar.add_offset_value("A", 7.0);
self.levelbar.add_offset_value("AA", 14.0);
self.levelbar.add_offset_value("AAA", 21.0);
self.levelbar.set_property_width_request(300);
self.levelbar.set_property_height_request(10);
self.levelbar.set_halign(gtk::Align::Center);
self.levelbar.show();
self.widget.pack_start(&self.levelbar, false, false, 0);
// fix me:
self.levelbar.set_value(4.4);
self.level_label.set_text("4.4 out of 21");
self.level_label.get_style_context().add_class("level-label");
self.level_label.show();
self.widget.pack_start(&self.level_label, false, false, 0);
self.widget.show();
}
......
use crate::gtk::{BoxExt, ContainerExt, CssProviderExt, LabelExt, StyleContextExt, WidgetExt};
use crate::utils::load_stylesheet;
#[derive(Clone)]
pub struct ContrastPreview {
pub widget: gtk::Box,
......@@ -16,37 +16,27 @@ impl ContrastPreview {
}
fn setup_widget(&self) {
self.widget.set_vexpand(true);
self.widget.set_valign(gtk::Align::Fill);
self.widget.get_style_context().add_class("preview");
let head = gtk::Label::new(Some("Contrast"));
head.get_style_context().add_class("preview-head");
head.set_halign(gtk::Align::Start);
head.set_halign(gtk::Align::Center);
head.set_valign(gtk::Align::Center);
head.set_vexpand(true);
head.show();
let text = gtk::Label::new(Some("Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."));
text.set_line_wrap(true);
text.set_vexpand(true);
text.set_halign(gtk::Align::Start);
text.set_valign(gtk::Align::Start);
text.get_style_context().add_class("preview-text");
text.set_justify(gtk::Justification::Fill);
text.show();
self.widget.pack_start(&head, false, false, 0);
self.widget.pack_start(&text, false, true, 0);
self.widget.show();
}
pub fn update_bg_colour(&self, colour: Option<&str>) {
match (colour) {
Some(colour) => {
let stylesheet = format!(".preview{{ background-color: {} }}", colour);
let provider = gtk::CssProvider::new();
match (provider.load_from_data(stylesheet.as_bytes())) {
_ => gtk::StyleContext::add_provider_for_screen(&gdk::Screen::get_default().unwrap(), &provider, 500),
Err(err) => error!("Couldn't parse the colour {}", colour),
};
let stylesheet = format!("@define-color background_color {};", colour);
load_stylesheet(stylesheet);
}
_ => (),
}
......@@ -55,13 +45,8 @@ impl ContrastPreview {
pub fn update_fg_colour(&self, colour: Option<&str>) {
match (colour) {
Some(colour) => {
let stylesheet = format!(".preview label{{ color: {} }}", colour);
let provider = gtk::CssProvider::new();
match (provider.load_from_data(stylesheet.as_bytes())) {
_ => gtk::StyleContext::add_provider_for_screen(&gdk::Screen::get_default().unwrap(), &provider, 500),
Err(err) => error!("Couldn't parse the colour {}", colour),
};
let stylesheet = format!("@define-color foreground_color {};", colour);
load_stylesheet(stylesheet);
}
_ => (),
}
......
......@@ -16,6 +16,7 @@ mod config;
mod contrast_level;
mod contrast_preview;
mod static_resources;
mod utils;
mod window;
mod window_state;
......
......@@ -44,6 +44,7 @@ sources = files(
'contrast_preview.rs',
'main.rs',
'static_resources.rs',
'utils.rs',
'window.rs',
'window_state.rs',
)
......
use gtk::{CssProviderExt, StyleContextExt};
pub fn load_stylesheet(stylesheet: String) {
let provider = gtk::CssProvider::new();
match (provider.load_from_data(stylesheet.as_bytes())) {
_ => {
gtk::StyleContext::add_provider_for_screen(&gdk::Screen::get_default().unwrap(), &provider, 500);
println!("added");
}
Err(err) => error!("Couldn't parse the stylesheet {}", stylesheet),
};
}
......@@ -2,8 +2,9 @@ use crate::colour_entry::ColourEntry;
use crate::config::{APP_ID, PROFILE};
use crate::contrast_level::{ContrastLevel, ContrastLevelBar};
use crate::contrast_preview::ContrastPreview;
use crate::gio::SettingsExt;
use crate::libhandy::{HeaderBar, HeaderBarExt};
use crate::window_state;
use gtk::prelude::*;
pub struct Window {
......@@ -11,6 +12,8 @@ pub struct Window {
appmenu_button: gtk::MenuButton,
fg_entry: ColourEntry,
bg_entry: ColourEntry,
headerbar: libhandy::HeaderBar,
pub settings: gio::Settings,
}
impl Window {
......@@ -18,6 +21,7 @@ impl Window {
let settings = gio::Settings::new(APP_ID);
let builder = gtk::Builder::new_from_resource("/org/gnome/design/ColourContrast/window.ui");
let widget: gtk::ApplicationWindow = builder.get_object("window").unwrap();
let headerbar: libhandy::HeaderBar = builder.get_object("headerbar").unwrap();
let appmenu_button: gtk::MenuButton = builder.get_object("appmenu_button").unwrap();
let bg_entry = ColourEntry::new("Background Colour".to_string(), &widget);
......@@ -32,23 +36,26 @@ impl Window {
appmenu_button,
fg_entry,
bg_entry,
headerbar,
settings,
};
window.init(settings);
window.init();
window.setup_widgets();
window
}
pub fn init(&self, settings: gio::Settings) {
pub fn init(&self) {
self.widget.get_style_context().add_class("main-window");
// setup app menu
let menu_builder = gtk::Builder::new_from_resource("/org/gnome/design/ColourContrast/menu.ui");
let popover_menu: gio::MenuModel = menu_builder.get_object("popover_menu").unwrap();
self.appmenu_button.set_menu_model(Some(&popover_menu));
// load latest window state
window_state::load(&self.widget, &settings);
window_state::load(&self.widget, &self.settings);
// save window state on delete event
let settings = self.settings.clone();
self.widget.connect_delete_event(move |window, _| {
window_state::save(&window, &settings);
Inhibit(false)
......@@ -59,10 +66,16 @@ impl Window {
}
fn setup_widgets(&self) {
let fg_colour = self.settings.get_string("foreground-colour").unwrap();
let bg_colour = self.settings.get_string("background-colour").unwrap();
self.fg_entry.set_text(Some(fg_colour.as_str().to_string()));
self.bg_entry.set_text(Some(bg_colour.as_str().to_string()));
let container = gtk::Box::new(gtk::Orientation::Vertical, 0);
container.show();
let reverse_btn = gtk::Button::new();
reverse_btn.set_halign(gtk::Align::Center);
let reverse_img = gtk::Image::new_from_icon_name(Some("network-transmit-receive-symbolic"), gtk::IconSize::Button);
reverse_img.show();
reverse_btn.set_image(Some(&reverse_img));
......@@ -76,26 +89,19 @@ impl Window {
fg_entry.set_text(Some(bg_colour));
});
let entries_container = gtk::Box::new(gtk::Orientation::Horizontal, 6);
let entries_container = gtk::Box::new(gtk::Orientation::Horizontal, 0);
entries_container.pack_start(&self.bg_entry.widget, false, false, 6);
entries_container.pack_start(&reverse_btn, false, false, 6);
entries_container.pack_start(&self.fg_entry.widget, false, false, 6);
entries_container.set_halign(gtk::Align::Center);
entries_container.set_valign(gtk::Align::Center);
entries_container.set_vexpand(true);
entries_container.show();
let bottom_bar = gtk::Box::new(gtk::Orientation::Vertical, 0);
bottom_bar.get_style_context().add_class("sidebar");
bottom_bar.add(&entries_container);
bottom_bar.show();
self.headerbar.set_custom_title(Some(&entries_container));
let preview = ContrastPreview::new();
let levelbar = ContrastLevelBar::new();
container.pack_start(&preview.widget, true, true, 0);
container.pack_start(&levelbar.widget, false, false, 0);
container.pack_end(&bottom_bar, false, false, 0);
let previewer = preview.clone();
self.bg_entry.entry.connect_changed(move |entry| {
......
......@@ -6,7 +6,7 @@ pub fn load(window: &gtk::ApplicationWindow, settings: &gio::Settings) {
let height = settings.get_int("window-height");
if width > -1 && height > -1 {
window.resize(500, 500);
window.resize(width, height);
}
let x = settings.get_int("window-x");
......
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