enso-org/enso
1
1
Fork 0
mirror of https://github.com/enso-org/enso.git synced 2025-01-02 00:23:59 +03:00
Code Issues Projects Releases Wiki Activity

Theme fixes - light mode selection & background color, dark mode container, get html colors from theme manager ... (https://github.com/enso-org/ide/pull/819)

Browse Source 
* fix

* why list view had different background?

* fix shadows

* Get container HTML background colors from theme manager

* get html shadows from style manager

* fix

* one moar

Original commit: ee8b12894e
This commit is contained in:
Maciej Mikołajek 2020-10-14 13:08:35 +02:00 committed by GitHub
parent 16395ed365
commit 345ed2dba8
3 changed files with 78 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
gui/src/rust/ensogl/lib/theme/src/lib.rs
View File

@ -113,6 +113,11 @@ define_theme! { dark
background {
color = color::Lcha::new(0.2,0.013,0.18,1.0)
}
shadow {
color = color::Lcha::new(0.0,0.0,0.0,0.20);
fading_color = color::Lcha::new(0.0,0.0,0.0,0.0);
exponent = 2.0
}
selection {
color = color::Lcha::new(0.72,0.5,0.22,1.0);
size = 7.0
@ -128,6 +133,15 @@ define_theme! { dark
background {
color = color::Lcha::new(0.2,0.013,0.18,1.0)
}
shadow {
color = color::Lcha::new(0.0,0.0,0.0,0.20);
fading_color = color::Lcha::new(0.0,0.0,0.0,0.0);
exponent = 2.0;
html {
alpha = 0.16;
size = 16.0
}
}
text {
color = color::Lcha::new(1.0,0.0,0.0,0.7);
selection {
@ -189,6 +203,11 @@ define_theme! { dark
background {
color = color::Lcha::new(0.2,0.013,0.18,1.0)
}
shadow {
color = color::Lcha::new(0.0,0.0,0.0,0.20);
fading_color = color::Lcha::new(0.0,0.0,0.0,0.0);
exponent = 2.0
}
highlight {
color = color::Lcha::new(0.72,0.5,0.22,1.0)
}
@ -203,11 +222,6 @@ define_theme! { dark
}
}
}
shadow {
color = color::Lcha::new(0.0,0.0,0.0,0.20);
fading_color = color::Lcha::new(0.0,0.0,0.0,0.0);
exponent = 2.0
}
}
define_default_theme! { light
@ -252,7 +266,11 @@ define_default_theme! { light
shadow {
color = color::Lcha::new(0.0,0.0,0.0,0.20);
fading_color = color::Lcha::new(0.0,0.0,0.0,0.0);
exponent = 2.0
exponent = 2.0;
html {
alpha = 0.16;
size = 16.0
}
}
text {
color = color::Lcha::new(0.0,0.0,0.0,0.7);
@ -313,7 +331,7 @@ define_default_theme! { light
widget {
list_view {
background {
color = color::Lcha::new(0.94,0.013,0.18,1.0)
color = color::Lcha::new(0.98,0.013,0.18,1.0)
}
shadow {
color = color::Lcha::new(0.0,0.0,0.0,0.20);
@ -321,7 +339,7 @@ define_default_theme! { light
exponent = 2.0
}
highlight {
color = color::Lcha::new(0.55,0.65,0.79,1.0)
color = color::Lcha::new(0.83,0.58,0.436,1.0)
}
text {
color = color::Lcha::new(0.0,0.0,0.0,0.7);

46
gui/src/rust/ide/view/graph-editor/src/component/visualization/container.rs
View File

@ -226,19 +226,29 @@ impl View {
scene.views.main.remove(&shape_system.shape_system.symbol);
scene.views.viz.add(&shape_system.shape_system.symbol);
// FIXME : StyleWatch is unsuitable here, as it was designed as an internal tool for shape system (#795)
let styles = StyleWatch::new(&scene.style_sheet);
let bg_color = styles.get_color(ensogl_theme::vars::graph_editor::visualization::background::color);
let bg_color = color::Rgba::from(bg_color);
let bg_hex = format!("rgba({},{},{},{})",bg_color.red*255.0,bg_color.green*255.0,bg_color.blue*255.0,bg_color.alpha);
let shadow_alpha = styles.get_number_or(ensogl_theme::vars::graph_editor::visualization::shadow::html::alpha,0.16);
let shadow_size = styles.get_number_or(ensogl_theme::vars::graph_editor::visualization::shadow::html::size,16.0);
let shadow = format!("0 0 {}px rgba(0, 0, 0, {})",shadow_size,shadow_alpha);
let div = web::create_div();
let background_dom = DomSymbol::new(&div);
// TODO : We added a HTML background to the `View`, because "shape" background was overlapping
// the JS visualization. This should be further investigated while fixing rust
// visualization displaying. (#796)
background_dom.dom().set_style_or_warn("width" ,"0" ,&logger);
background_dom.dom().set_style_or_warn("height" ,"0" ,&logger);
background_dom.dom().set_style_or_warn("z-index" ,"1" ,&logger);
background_dom.dom().set_style_or_warn("overflow-y" ,"auto" ,&logger);
background_dom.dom().set_style_or_warn("overflow-x" ,"auto" ,&logger);
background_dom.dom().set_style_or_warn("background" ,"#FDF9F6FA" ,&logger);
background_dom.dom().set_style_or_warn("border-radius" ,"14px" ,&logger);
background_dom.dom().set_style_or_warn("box-shadow" ,"0 0 16px rgba(0,0,0,0.14)",&logger);
background_dom.dom().set_style_or_warn("width" ,"0" ,&logger);
background_dom.dom().set_style_or_warn("height" ,"0" ,&logger);
background_dom.dom().set_style_or_warn("z-index" ,"1" ,&logger);
background_dom.dom().set_style_or_warn("overflow-y" ,"auto",&logger);
background_dom.dom().set_style_or_warn("overflow-x" ,"auto",&logger);
background_dom.dom().set_style_or_warn("background" ,bg_hex,&logger);
background_dom.dom().set_style_or_warn("border-radius","14px",&logger);
background_dom.dom().set_style_or_warn("box-shadow" ,shadow,&logger);
display_object.add_child(&background_dom);
scene.dom.layers.back.manage(&background_dom);
@ -282,18 +292,24 @@ impl FullscreenView {
scene.views.main.remove(&shape_system.shape_system.symbol);
scene.views.viz_fullscreen.add(&shape_system.shape_system.symbol);
// FIXME : StyleWatch is unsuitable here, as it was designed as an internal tool for shape system (#795)
let styles = StyleWatch::new(&scene.style_sheet);
let bg_color = styles.get_color(ensogl_theme::vars::graph_editor::visualization::background::color);
let bg_color = color::Rgba::from(bg_color);
let bg_hex = format!("rgba({},{},{},{})",bg_color.red*255.0,bg_color.green*255.0,bg_color.blue*255.0,bg_color.alpha);
let div = web::create_div();
let background_dom = DomSymbol::new(&div);
// TODO : We added a HTML background to the `View`, because "shape" background was overlapping
// the JS visualization. This should be further investigated while fixing rust
// visualization displaying. (#796)
background_dom.dom().set_style_or_warn("width" ,"0" ,&logger);
background_dom.dom().set_style_or_warn("height" ,"0" ,&logger);
background_dom.dom().set_style_or_warn("z-index" ,"1" ,&logger);
background_dom.dom().set_style_or_warn("overflow-y" ,"auto" ,&logger);
background_dom.dom().set_style_or_warn("overflow-x" ,"auto" ,&logger);
background_dom.dom().set_style_or_warn("background" ,"#FDF9F6FA" ,&logger);
background_dom.dom().set_style_or_warn("border-radius" ,"0" ,&logger);
background_dom.dom().set_style_or_warn("width" ,"0" ,&logger);
background_dom.dom().set_style_or_warn("height" ,"0" ,&logger);
background_dom.dom().set_style_or_warn("z-index" ,"1" ,&logger);
background_dom.dom().set_style_or_warn("overflow-y" ,"auto",&logger);
background_dom.dom().set_style_or_warn("overflow-x" ,"auto",&logger);
background_dom.dom().set_style_or_warn("background" ,bg_hex,&logger);
background_dom.dom().set_style_or_warn("border-radius","0" ,&logger);
display_object.add_child(&background_dom);
scene.dom.layers.back.manage(&background_dom);

30
gui/src/rust/ide/view/src/documentation.rs
View File

@ -7,9 +7,11 @@ use crate::graph_editor::component::visualization;
use ast::prelude::FallibleResult;
use enso_frp as frp;
use ensogl::data::color;
use ensogl::display;
use ensogl::display::DomSymbol;
use ensogl::display::scene::Scene;
use ensogl::display::shape::primitive::StyleWatch;
use ensogl::system::web;
use ensogl::system::web::StyleSetter;
use ensogl::system::web::AttributeSetter;
@ -78,15 +80,25 @@ impl ViewModel {
let size = Rc::new(Cell::new(Vector2(VIEW_WIDTH,VIEW_HEIGHT)));
let overlay = component::ShapeView::<overlay::Shape>::new(&logger,scene);
dom.dom().set_attribute_or_warn("class","scrollable",&logger);
dom.dom().set_style_or_warn("white-space" ,"normal" ,&logger);
dom.dom().set_style_or_warn("overflow-y" ,"auto" ,&logger);
dom.dom().set_style_or_warn("overflow-x" ,"auto" ,&logger);
dom.dom().set_style_or_warn("background-color","#FAF8F4" ,&logger);
dom.dom().set_style_or_warn("padding" ,format!("{}px",PADDING) ,&logger);
dom.dom().set_style_or_warn("pointer-events" ,"auto" ,&logger);
dom.dom().set_style_or_warn("border-radius" ,format!("{}px",CORNER_RADIUS) ,&logger);
dom.dom().set_style_or_warn("box-shadow" ,"0 0 16px rgba(0, 0, 0, 0.06)",&logger);
// FIXME : StyleWatch is unsuitable here, as it was designed as an internal tool for shape system (#795)
let styles = StyleWatch::new(&scene.style_sheet);
let bg_color = styles.get_color(ensogl_theme::vars::graph_editor::visualization::background::color);
let bg_color = color::Rgba::from(bg_color);
let bg_hex = format!("rgba({},{},{},{})",bg_color.red*255.0,bg_color.green*255.0,bg_color.blue*255.0,bg_color.alpha);
let shadow_alpha = styles.get_number_or(ensogl_theme::vars::graph_editor::visualization::shadow::html::alpha,0.16);
let shadow_size = styles.get_number_or(ensogl_theme::vars::graph_editor::visualization::shadow::html::size,16.0);
let shadow = format!("0 0 {}px rgba(0, 0, 0, {})",shadow_size,shadow_alpha);
dom.dom().set_attribute_or_warn("class" ,"scrollable" ,&logger);
dom.dom().set_style_or_warn("white-space" ,"normal" ,&logger);
dom.dom().set_style_or_warn("overflow-y" ,"auto" ,&logger);
dom.dom().set_style_or_warn("overflow-x" ,"auto" ,&logger);
dom.dom().set_style_or_warn("background-color",bg_hex ,&logger);
dom.dom().set_style_or_warn("padding" ,format!("{}px",PADDING) ,&logger);
dom.dom().set_style_or_warn("pointer-events" ,"auto" ,&logger);
dom.dom().set_style_or_warn("border-radius" ,format!("{}px",CORNER_RADIUS),&logger);
dom.dom().set_style_or_warn("box-shadow" ,shadow ,&logger);
overlay.shape.roundness.set(1.0);
overlay.shape.radius.set(CORNER_RADIUS);