enso-org/enso
1
1
Fork 0
mirror of https://github.com/enso-org/enso.git synced 2024-12-20 00:01:37 +03:00
Code Issues Projects Releases Wiki Activity

Color fixes (https://github.com/enso-org/ide/pull/1435)

Browse Source 
Original commit: c1e2ff03d0
This commit is contained in:
Wojciech Daniło 2021-04-03 09:02:50 +02:00 committed by GitHub
parent 3f2ca4dad5
commit 2ebc47b2b4
35 changed files with 138 additions and 163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
gui/src/js/lib/common/src/loader.js
View File

@ -9,7 +9,7 @@ import * as svg from './svg'
// === ProgressIndicator ===
// =========================
let bg_color = "rgb(247,246,246)"
let bg_color = "rgb(249,250,251)"
let loader_color = "#303030"
let top_layer_index = 1000

2
gui/src/js/lib/content/src/index.js
View File

@ -419,7 +419,7 @@ async function reportCrash(message) {
function style_root() {
let root = document.getElementById('root')
root.style.backgroundColor = 'rgb(247,246,246)'
root.style.backgroundColor = 'rgb(249,250,251)'
}
/// Waits for the window to finish its show animation. It is used when the website is run in

2
gui/src/rust/ensogl/example/src/complex_shape_system.rs
View File

@ -22,7 +22,7 @@ mod shape {
ensogl_core::define_shape_system! {
(style:Style) {
let base_color = color::Rgba::from(style.get_color("base_color"));
let base_color = style.get_color("base_color");
let circle1 = Circle(50.px());
let circle_bg = circle1.translate_x(-(50.0.px()));
let circle_sub = circle1.translate_y(-(50.0.px()));

4
gui/src/rust/ensogl/lib/components/src/drop_down_menu.rs
View File

@ -44,7 +44,7 @@ pub mod arrow {
let triangle_down = triangle.rotate(Var::<f32>::from(std::f32::consts::PI));
let color_path = ensogl_theme::graph_editor::visualization::action_bar::icon;
let icon_color = style.get_color(color_path);
let triangle_colored = triangle_down.fill(color::Rgba::from(icon_color));
let triangle_colored = triangle_down.fill(icon_color);
triangle_colored.into()
}
@ -357,7 +357,7 @@ impl DropDownMenu {
// shape system (#795)
let styles = StyleWatch::new(&app.display.scene().style_sheet);
let text_color = styles.get_color(theme::widget::list_view::text);
model.label.set_default_color(color::Rgba::from(text_color));
model.label.set_default_color(text_color);
self
}

4
gui/src/rust/ensogl/lib/components/src/label.rs
View File

@ -94,7 +94,7 @@ impl Model {
let style = StyleWatch::new(&app.display.scene().style_sheet);
Model { label, display_object, background, app, style }
Model {label,display_object,background,app,style}
}
pub fn height(&self) -> f32 {
@ -127,13 +127,11 @@ impl Model {
fn set_opacity(&self, value:f32) {
let text_color_path = theme::text;
let text_color = self.style.get_color(text_color_path).multiply_alpha(value);
let text_color = color::Rgba::from(text_color);
self.label.frp.set_color_all.emit(text_color);
self.label.frp.set_default_color.emit(text_color);
let bg_color_path = theme::background;
let bg_color = self.style.get_color(bg_color_path).multiply_alpha(value);
let bg_color = color::Rgba::from(bg_color);
self.background.bg_color.set(bg_color.into())
}
}

8
gui/src/rust/ensogl/lib/components/src/list_view.rs
View File

@ -12,7 +12,6 @@ use enso_frp as frp;
use ensogl_core::application;
use ensogl_core::application::Application;
use ensogl_core::application::shortcut;
use ensogl_core::data::color;
use ensogl_core::display;
use ensogl_core::display::shape::*;
use ensogl_core::DEPRECATED_Animation;
@ -48,7 +47,7 @@ mod selection {
let height = sprite_height - 2.0.px() * SHAPE_PADDING + 2.0.px() * padding_inner_y;
let color = style.get_color(ensogl_theme::widget::list_view::highlight);
let rect = Rect((&width,&height)).corners_radius(CORNER_RADIUS_PX.px());
let shape = rect.fill(color::Rgba::from(color));
let shape = rect.fill(color);
shape.into()
}
}
@ -71,7 +70,7 @@ mod background {
let height = sprite_height - SHADOW_PX.px() * 2.0 - SHAPE_PADDING.px() * 2.0;
let color = style.get_color(theme::widget::list_view::background);
let rect = Rect((&width,&height)).corners_radius(CORNER_RADIUS_PX.px());
let shape = rect.fill(color::Rgba::from(color));
let shape = rect.fill(color);
let shadow = shadow::from_shape(rect.into(),style);
@ -133,7 +132,8 @@ impl Model {
let visible_entries = Self::visible_entries(view,self.entries.entry_count());
let padding_px = self.padding();
let padding = 2.0 * padding_px + SHAPE_PADDING;
let padding = Vector2(padding, padding);
// FIXME: Why this + 2.0*padding_px is needed here? It was added to make bottom padding but should rather not be needed.
let padding = Vector2(padding, padding + 2.0*padding_px);
let shadow = Vector2(2.0 * SHADOW_PX, 2.0 * SHADOW_PX);
self.entries.set_position_x(-view.size.x / 2.0);
self.background.size.set(view.size + padding + shadow);

8
gui/src/rust/ensogl/lib/components/src/list_view/entry.rs
View File

@ -2,7 +2,6 @@
use crate::prelude::*;
use ensogl_core::application::Application;
use ensogl_core::data::color;
use ensogl_core::display;
use ensogl_core::display::shape::StyleWatch;
use ensogl_text as text;
@ -250,7 +249,7 @@ impl Entry {
// FIXME : StyleWatch is unsuitable here, as it was designed as an internal tool for shape system (#795)
let styles = StyleWatch::new(&app.display.scene().style_sheet);
let text_color = styles.get_color(ensogl_theme::widget::list_view::text);
label.set_default_color(color::Rgba::from(text_color));
label.set_default_color(text_color);
label.set_default_text_size(text::Size(LABEL_SIZE));
Entry{app,id,label,icon,display_object}
}
@ -272,9 +271,8 @@ impl Entry {
// FIXME : StyleWatch is unsuitable here, as it was designed as an internal tool for shape
// system (#795)
let styles = StyleWatch::new(&self.app.display.scene().style_sheet);
let highlight = styles.get_color(ensogl_theme::widget::list_view::text::highlight);
let highlight:color::Rgba = highlight.into();
let styles = StyleWatch::new(&self.app.display.scene().style_sheet);
let highlight = styles.get_color(ensogl_theme::widget::list_view::text::highlight);
for highlighted in &model.highlighted {
self.label.set_color_bytes(highlighted,highlight);
}

19
gui/src/rust/ensogl/lib/components/src/shadow.rs
View File

@ -29,11 +29,11 @@ pub fn from_shape_with_alpha(base_shape:AnyShape,alpha:&Var<f32>,style:&StyleWat
let shadow = base_shape.grow(shadow_grow);
let shadow = shadow.translate((shadow_off_x,shadow_off_y));
let base_color = color::Rgba::from(style.get_color(theme::shadow));
let base_color = style.get_color(theme::shadow);
let base_color = Var::<color::Rgba>::from(base_color);
let base_color = base_color.multiply_alpha(&alpha);
let fading_color = color::Rgba::from(style.get_color(theme::shadow::fading));
let fading_color = style.get_color(theme::shadow::fading);
let fading_color = Var::<color::Rgba>::from(fading_color);
let fading_color = fading_color.multiply_alpha(&alpha);
@ -49,14 +49,11 @@ pub fn from_shape_with_alpha(base_shape:AnyShape,alpha:&Var<f32>,style:&StyleWat
/// Add a theme defined box shadow to the given `DomSymbol`.
pub fn add_to_dom_element(element:&DomSymbol, style:&StyleWatch,logger:&Logger) {
let shadow_off_x = style.get_number(theme::shadow::offset_x);
let shadow_off_y = style.get_number(theme::shadow::offset_y);
let shadow_alpha = style.get_number_or(ensogl_theme::shadow::html::alpha,0.16);
let shadow_blur = style.get_number_or(ensogl_theme::shadow::html::blur,16.0);
let shadow_spread = style.get_number_or(ensogl_theme::shadow::html::spread,0.0);
let shadow = format!("{}px {}px {}px {}px rgba(0, 0, 0, {})",shadow_off_x,shadow_off_y,
shadow_blur,shadow_spread,shadow_alpha);
let off_x = style.get_number(theme::shadow::offset_x);
let off_y = -style.get_number(theme::shadow::offset_y);
let alpha = style.get_number(ensogl_theme::shadow::html::alpha);
let blur = style.get_number(ensogl_theme::shadow::html::blur);
let spread = style.get_number(ensogl_theme::shadow::html::spread);
let shadow = format!("{}px {}px {}px {}px rgba(0,0,0,{})",off_x,off_y,blur,spread,alpha);
element.dom().set_style_or_warn("box-shadow",shadow,&logger);
}

12
gui/src/rust/ensogl/lib/core/src/data/color/space/def.rs
View File

@ -384,9 +384,9 @@ impl Rgb {
/// Convert the color to JavaScript representation.
pub fn to_javascript_string(&self) -> String {
let red = (self.red*255.0) as i32;
let green = (self.green*255.0) as i32;
let blue = (self.blue*255.0) as i32;
let red = (self.red*255.0).round() as i32;
let green = (self.green*255.0).round() as i32;
let blue = (self.blue*255.0).round() as i32;
format!("rgb({},{},{})",red,green,blue)
}
}
@ -419,9 +419,9 @@ impl Rgba {
/// Convert the color to JavaScript representation.
pub fn to_javascript_string(&self) -> String {
let red = (self.red*255.0) as i32;
let green = (self.green*255.0) as i32;
let blue = (self.blue*255.0) as i32;
let red = (self.red*255.0).round() as i32;
let green = (self.green*255.0).round() as i32;
let blue = (self.blue*255.0).round() as i32;
format!("rgba({},{},{},{})",red,green,blue,self.alpha)
}
}

8
gui/src/rust/ensogl/lib/core/src/display/scene.rs
View File

@ -16,7 +16,6 @@ use crate::animation;
use crate::control::callback;
use crate::control::io::mouse::MouseManager;
use crate::control::io::mouse;
use crate::data::color;
use crate::data::dirty::traits::*;
use crate::data::dirty;
use crate::debug::stats::Stats;
@ -790,12 +789,7 @@ impl SceneData {
let bg_color_var = style_sheet.var("application.background");
let bg_color_change = bg_color_var.on_change(f!([dom](change){
change.color().for_each(|color| {
let color = color::Rgba::from(color);
let red = 255.0*color.red;
let green = 255.0*color.green;
let blue = 255.0*color.blue;
let alpha = 255.0*color.alpha;
let color = iformat!("rgba({red},{green},{blue},{alpha})");
let color = color.to_javascript_string();
dom.root.set_style_or_panic("background-color",color);
})
}));

72
gui/src/rust/ensogl/lib/core/src/display/shape/primitive/style_watch.rs
View File

@ -23,7 +23,7 @@ const VARIANT_PATH_PREFIX : &str = "variant";
// require a cyclic import from the `ensogl-theme` crate.
const COLOR_LIGHTNESS_FACTOR_PATH : &str = "theme.vars.colors.dimming.lightness_factor";
const COLOR_CHROMA_FACTOR_PATH : &str = "theme.vars.colors.dimming.chroma_factor";
const FALLBACK_COLOR : color::Lcha = color::Lcha::new(0.5,1.0,0.5,0.5);
const FALLBACK_COLOR : color::Rgba = color::Rgba::new(1.0,0.0,0.0,0.5);
@ -62,10 +62,10 @@ impl StyleWatchFrp {
frp::extend! { network
source <- source::<Option<style::Data>>();
}
let path = path.into();
let var = self.sheet.var(path);
let current = var.value();
let handle = var.on_change(f!((data:&Option<style::Data>) source.emit(data.clone())));
let path = path.into();
let var = self.sheet.var(path);
let current = var.value();
let handle = var.on_change(f!((data:&Option<style::Data>) source.emit(data.clone())));
self.vars.borrow_mut().push(var);
self.handles.borrow_mut().push(handle);
(source,current)
@ -83,7 +83,7 @@ impl StyleWatchFrp {
}
/// Queries style sheet color, if not found fallbacks to [`FALLBACK_COLOR`].
pub fn get_color<T:Into<Path>>(&self, path:T) -> frp::Sampler<color::Lcha> {
pub fn get_color<T:Into<Path>>(&self, path:T) -> frp::Sampler<color::Rgba> {
let network = &self.network;
let (source,current) = self.get_internal(path);
frp::extend! { network
@ -173,38 +173,38 @@ impl StyleWatch {
impl StyleWatch {
/// Queries style sheet color, if not found fallbacks to [`FALLBACK_COLOR`].
pub fn get_color<T:Into<Path>>(&self, path:T) -> color::Lcha {
pub fn get_color<T:Into<Path>>(&self, path:T) -> color::Rgba {
self.get(path).color().unwrap_or_else(|| FALLBACK_COLOR)
}
/// Return the dimmed version for either a `Path` or a specific color.
pub fn get_color_dim<T:Into<Path>>(&self, path:T) -> color::Lcha {
self.get_color_from_path_dim(path)
}
// /// Return the dimmed version for either a `Path` or a specific color.
// pub fn get_color_dim<T:Into<Path>>(&self, path:T) -> color::Rgba {
// self.get_color_from_path_dim(path)
// }
/// Queries style sheet color, if not found fallbacks to red.
fn get_color_from_path_dim<T:Into<Path>>(&self, path:T) -> color::Lcha {
let path = path.into();
match self.try_get_color_variant(path.clone(),THEME_KEY_DIMMED) {
None => {
let base_color = self.get_color(path);
self.make_color_dim(base_color)
},
Some(color) => color,
}
}
/// Create a dimmed version of the given color value. The exact values to be used for dimming
/// are derived from the theme.
fn make_color_dim<T:Into<color::Lcha>+From<color::Lcha>>(&self, color:T) -> T {
let color : color::Lcha = color.into();
let color_lightness_factor = self.get_number_or(COLOR_LIGHTNESS_FACTOR_PATH, 0.0);
let color_chroma_factor = self.get_number_or(COLOR_CHROMA_FACTOR_PATH, 0.0);
let lightness = color.lightness * color_lightness_factor;
let chroma = color.chroma * color_chroma_factor;
let color = color::Lcha::new(lightness,chroma,color.hue,color.alpha);
color.into()
}
// /// Queries style sheet color, if not found fallbacks to red.
// fn get_color_from_path_dim<T:Into<Path>>(&self, path:T) -> color::Lcha {
// let path = path.into();
// match self.try_get_color_variant(path.clone(),THEME_KEY_DIMMED) {
// None => {
// let base_color = self.get_color(path);
// self.make_color_dim(base_color)
// },
// Some(color) => color,
// }
// }
//
// /// Create a dimmed version of the given color value. The exact values to be used for dimming
// /// are derived from the theme.
// fn make_color_dim<T:Into<color::Lcha>+From<color::Lcha>>(&self, color:T) -> T {
// let color : color::Lcha = color.into();
// let color_lightness_factor = self.get_number_or(COLOR_LIGHTNESS_FACTOR_PATH, 0.0);
// let color_chroma_factor = self.get_number_or(COLOR_CHROMA_FACTOR_PATH, 0.0);
// let lightness = color.lightness * color_lightness_factor;
// let chroma = color.chroma * color_chroma_factor;
// let color = color::Lcha::new(lightness,chroma,color.hue,color.alpha);
// color.into()
// }
/// Return the path where we look for alternative shades or scheme variants of a color in the
/// theme (for example, "dimmed").
@ -217,8 +217,8 @@ impl StyleWatch {
Path::from_segments(segments)
}
fn try_get_color_variant<T:Into<Path>>(&self, path:T, id:&str) -> Option<color::Lcha> {
let path = Self::color_variant_path(path.into(), id.to_string());
fn try_get_color_variant<T:Into<Path>>(&self, path:T, id:&str) -> Option<color::Rgba> {
let path = Self::color_variant_path(path.into(), id.to_string());
self.get(path).color()
}
}

12
gui/src/rust/ensogl/lib/core/src/display/style/data.rs
View File

@ -16,7 +16,7 @@ use crate::data::color;
pub enum Data {
Invalid(String),
Number(f32),
Color(color::Lcha),
Color(color::Rgba),
}
@ -40,7 +40,7 @@ impl From<i32> for Data {
}
impl<C> From<color::Color<C>> for Data
where color::Color<C> : Into<color::Lcha> {
where color::Color<C> : Into<color::Rgba> {
fn from(color:color::Color<C>) -> Data {
Data::Color(color.into())
}
@ -163,13 +163,13 @@ define_binary_number_operator!(Sub::sub,|lhs,rhs| format!("Cannot subtract {} fr
pub trait DataMatch {
fn invalid (&self) -> Option<&String>;
fn number (&self) -> Option<f32>;
fn color (&self) -> Option<color::Lcha>;
fn color (&self) -> Option<color::Rgba>;
fn number_or_else(&self,f:impl FnOnce()->f32) -> f32 {
self.number().unwrap_or_else(f)
}
fn color_or_else(&self,f:impl FnOnce()->color::Lcha) -> color::Lcha {
fn color_or_else(&self,f:impl FnOnce()->color::Rgba) -> color::Rgba {
self.color().unwrap_or_else(f)
}
}
@ -177,11 +177,11 @@ pub trait DataMatch {
impl DataMatch for Data {
fn invalid (&self) -> Option<&String> {match self { Self::Invalid (t)=>Some(t) , _=>None }}
fn number (&self) -> Option<f32> {match self { Self::Number (t)=>Some(*t) , _=>None }}
fn color (&self) -> Option<color::Lcha> {match self { Self::Color (t)=>Some(*t) , _=>None }}
fn color (&self) -> Option<color::Rgba> {match self { Self::Color (t)=>Some(*t) , _=>None }}
}
impl DataMatch for Option<Data> {
fn invalid (&self) -> Option<&String> {self.as_ref().and_then(|t| t.invalid())}
fn number (&self) -> Option<f32> {self.as_ref().and_then(|t| t.number())}
fn color (&self) -> Option<color::Lcha> {self.as_ref().and_then(|t| t.color())}
fn color (&self) -> Option<color::Rgba> {self.as_ref().and_then(|t| t.color())}
}

4
gui/src/rust/ensogl/lib/core/src/display/style/javascript.rs
View File

@ -11,7 +11,6 @@ use super::sheet::Data;
use crate::system::web;
use wasm_bindgen::prelude::Closure;
use js_sys;
use crate::data::color;
@ -143,8 +142,7 @@ pub fn expose_to_window(manager:&Manager) {
values.sort_by_key(|(path,_)|path.clone());
for (path,value) in values {
match value {
Value::Data(Data::Color(c)) => {
let color = color::Rgba::from(c);
Value::Data(Data::Color(color)) => {
let js_color = color.to_javascript_string();
js::add_interactive_mode_style(name2.clone(),path,js_color)
},

1
gui/src/rust/ensogl/lib/text/src/component/area.rs
View File

@ -104,7 +104,6 @@ pub mod selection {
let shape = Rect((1.px() * rect_width,1.px() * rect_height));
let shape = shape.corners_radius(SELECTION_CORNER_RADIUS.px());
let color = style.get_color(theme::code::syntax::selection);
let color = color::Rgba::from(color);
let color = format!("srgba({},{},{},{})",color.red,color.green,color.blue,alpha.glsl());
let shape = shape.fill(color);
shape.into()

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

@ -156,7 +156,7 @@ impl Default for Theme {
define_themes! { [light:0, dark:1]
application {
background = Rgba(0.961,0.965,0.969,1.0) , Lcha(0.13,0.014,0.18,1.0);
background = Rgba(0.976,0.98,0.984,1.0) , Lcha(0.13,0.014,0.18,1.0); // rgb(249,250,251)
tooltip {
hide_delay_duration_ms = 150.0, 150.0;
show_delay_duration_ms = 150.0, 150.0;
@ -211,12 +211,12 @@ define_themes! { [light:0, dark:1]
}
graph_editor {
node {
background = Rgba(0.984,0.992,1.0,1.0) , Lcha(0.2,0.014,0.18,1.0);
background = Rgba(0.992,0.996,1.0,1.0) , Lcha(0.2,0.014,0.18,1.0); // rgb(253,254,255)
background.skipped = graph_editor::node::background , Lcha(0.15,0.014,0.18,1.0);
selection = selection, selection;
selection = selection, selection;
selection {
size = 10.0 , 5.0;
offset = 0.0 , 5.0;
size = 3.0 , 5.0;
offset = 5.0 , 5.0;
}
text = Rgba(0.078,0.067,0.137,0.85) , Lcha(1.0,0.0,0.0,0.7);
text {
@ -255,13 +255,13 @@ define_themes! { [light:0, dark:1]
panic.text = Rgba(1.0,0.341,0.125,1.0), Rgba(1.0,0.341,0.125,1.0);
}
action_bar {
background = Lcha(0.94,0.014,0.18,1.0) , Lcha(0.3,0.014,0.18,1.0);
background = Rgba(0.929,0.941,0.953,1.0) , Lcha(0.3,0.014,0.18,1.0); // rgb(237 240 243)
icon = Lcha(0.0,0.0,0.0,0.7) , Lcha(1.0,0.0,0.0,0.7);
text = Lcha(0.0,0.0,0.0,0.7) , Lcha(1.0,0.0,0.0,0.7);
}
selection = selection, selection;
selection = Rgba(0.306,0.647,0.992,0.14) , Lcha(0.72,0.54,0.22,1.0);
selection {
size = 10.0 , 5.0;
size = 8.0 , 5.0;
offset = 0.0 , 5.0;
}
}
@ -285,10 +285,10 @@ define_themes! { [light:0, dark:1]
widget {
list_view {
background = graph_editor::node::background , graph_editor::node::background;
highlight = selection , selection;
highlight = Rgba(0.906,0.914,0.922,1.0) , Lcha(1.0,0.0,0.0,0.7); // rgb(231,233,235)
text = Lcha(0.0,0.0,0.0,0.7) , Lcha(1.0,0.0,0.0,0.7);
text {
highlight = Lcha(0.7,0.4,0.74,1.0) , Lcha(0.7,0.4,0.74,1.0);
highlight = selection, selection;
selection = Lcha(0.7,0.0,0.125,0.7) , Lcha(0.7,0.0,0.125,0.7);
}
}
@ -307,7 +307,7 @@ define_themes! { [light:0, dark:1]
offset = 00.0, 00.0;
size = 12.0, 12.0;
}
padding_outer = 10.0, 10.0;
padding_outer = 20.0, 20.0;
padding_inner_x = 10.0, 10.0;
padding_inner_y = 2.0, 10.0;
height = 30.0, 30.0;
@ -317,15 +317,15 @@ define_themes! { [light:0, dark:1]
// === Generics ===
selection = Rgba(0.776,0.8,0.81,0.57) , Lcha(0.72,0.54,0.22,1.0);
shadow = Rgba(0.078,0.067,0.137,0.07) , Lcha(0.0,0.0,0.0,0.20); // a 0.04
selection = Rgba(0.306,0.647,0.992,1.0) , Lcha(0.72,0.54,0.22,1.0); // rgb(78,165,253)
shadow = Rgba(0.09,0.055,0.125,0.09) , Lcha(0.0,0.0,0.0,0.20); // rgba(23,14,32,0.09)
shadow {
size = 14.0 , 14.0; // 13
spread = -2.0 , -2.0;
fading = Rgba(0.078,0.067,0.137,0.0) , Lcha(0.0,0.0,0.0,0.0);
exponent = 3.0 , 3.0; // 2
size = 25.0 , 25.0;
spread = -5.0 , -5.0;
fading = Rgba(0.09,0.055,0.125,0.0) , Lcha(0.0,0.0,0.0,0.0);
exponent = 3.0 , 3.0;
offset_x = 0.0 , 0.0;
offset_y = -2.0 , -2.0;
offset_y = -5.0 , -5.0;
html {
alpha = 0.10 , 0.10;
blur = 10.0 , 10.0;

2
gui/src/rust/ide/view/graph-editor/src/builtin/visualization/java_script/geoMap.js
View File

@ -27,7 +27,7 @@ const LABEL_LIGHT_COLOR = `rgba(0, 0, 0, 0.8)`
const DEFAULT_MAP_ZOOM = 11
const DARK_ACCENT_COLOR = [222, 162, 47]
const LIGHT_ACCENT_COLOR = [1, 234, 146]
const LIGHT_ACCENT_COLOR = [78, 165, 253]
// =====================================
// === Script & Style Initialisation ===

1
gui/src/rust/ide/view/graph-editor/src/builtin/visualization/native/error.rs
View File

@ -237,7 +237,6 @@ impl Model {
fn set_text_color(&self, color:impl Into<display::style::Path>) {
let text_color = self.styles.get_color(color);
let text_color = color::Rgba::from(text_color);
let red = text_color.red * 255.0;
let green = text_color.green * 255.0;
let blue = text_color.blue * 255.0;

1
gui/src/rust/ide/view/graph-editor/src/builtin/visualization/native/raw_text.rs
View File

@ -94,7 +94,6 @@ impl RawTextModel {
// 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 text_color = styles.get_color(ensogl_theme::graph_editor::visualization::text);
let text_color = color::Rgba::from(text_color);
let _red = text_color.red * 255.0;
let _green = text_color.green * 255.0;
let _blue = text_color.blue * 255.0;

8
gui/src/rust/ide/view/graph-editor/src/component/breadcrumbs/breadcrumb.rs
View File

@ -323,9 +323,7 @@ impl BreadcrumbModel {
let styles = &self.style;
let full_color = styles.get_color(theme::graph_editor::breadcrumbs::full);
let full_color = color::Rgba::from(full_color);
let transparent_color = styles.get_color(theme::graph_editor::breadcrumbs::transparent);
let transparent_color = color::Rgba::from(transparent_color);
let color = if self.is_selected() { full_color } else { transparent_color };
@ -400,9 +398,7 @@ impl BreadcrumbModel {
fn select(&self) {
let styles = &self.style;
let selected_color = styles.get_color(theme::graph_editor::breadcrumbs::selected);
let selected_color = color::Rgba::from(selected_color);
let left_deselected = styles.get_color(theme::graph_editor::breadcrumbs::deselected::left);
let left_deselected = color::Rgba::from(left_deselected);
self.animations.color.set_target_value(selected_color.into());
self.animations.separator_color.set_target_value(left_deselected.into());
@ -420,11 +416,8 @@ impl BreadcrumbModel {
fn deselected_color(&self) -> color::Rgba {
let styles = &self.style;
let selected_color = styles.get_color(theme::graph_editor::breadcrumbs::selected);
let selected_color = color::Rgba::from(selected_color);
let left_deselected = styles.get_color(theme::graph_editor::breadcrumbs::deselected::left);
let left_deselected = color::Rgba::from(left_deselected);
let right_deselected = styles.get_color(theme::graph_editor::breadcrumbs::deselected::right);
let right_deselected = color::Rgba::from(right_deselected);
match self.relative_position.get() {
Some(RelativePosition::RIGHT) => right_deselected,
@ -471,7 +464,6 @@ impl Breadcrumb {
// system (#795)
let styles = StyleWatch::new(&scene.style_sheet);
let hover_color = styles.get_color(theme::graph_editor::breadcrumbs::hover);
let hover_color = color::Rgba::from(hover_color);
frp::extend! { network
eval_ frp.fade_in(model.animations.fade_in.set_target_value(1.0));

4
gui/src/rust/ide/view/graph-editor/src/component/breadcrumbs/project_name.rs
View File

@ -139,7 +139,6 @@ impl ProjectNameModel {
// FIXME : StyleWatch is unsuitable here, as it was designed as an internal tool for shape system (#795)
let style = StyleWatch::new(&scene.style_sheet);
let base_color = style.get_color(theme::graph_editor::breadcrumbs::transparent);
let base_color = color::Rgba::from(base_color);
let text_size:TextSize = TEXT_SIZE.into();
let text_field = app.new_view::<text::Area>();
text_field.set_default_color.emit(base_color);
@ -252,11 +251,8 @@ impl ProjectName {
// 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 hover_color = styles.get_color(theme::graph_editor::breadcrumbs::hover);
let hover_color = color::Rgba::from(hover_color);
let deselected_color = styles.get_color(theme::graph_editor::breadcrumbs::deselected::left);
let deselected_color = color::Rgba::from(deselected_color);
let selected_color = styles.get_color(theme::graph_editor::breadcrumbs::selected);
let selected_color = color::Rgba::from(selected_color);
let animations = Animations::new(&network);
frp::extend! { network

4
gui/src/rust/ide/view/graph-editor/src/component/edge.rs
View File

@ -1289,7 +1289,7 @@ impl EdgeModelData {
let color:color::Lcha = color.opaque.into();
if !is_disabled {color} else {
let styles = StyleWatch::new(&self.scene.style_sheet);
styles.get_color(theme::code::syntax::disabled)
styles.get_color(theme::code::syntax::disabled).into()
}
}
@ -1297,7 +1297,7 @@ impl EdgeModelData {
// We must never use alpha in edges, as it will show artifacts with overlapping sub-parts.
let color:color::Lcha = color.opaque.into();
let styles = StyleWatch::new(&self.scene.style_sheet);
let bg_color = styles.get_color(theme::application::background);
let bg_color = styles.get_color(theme::application::background).into();
color::mix(bg_color,color,0.25)
}

15
gui/src/rust/ide/view/graph-editor/src/component/node.rs
View File

@ -123,7 +123,7 @@ pub mod backdrop {
let select2 = Rect((&sel2_width,&sel2_height)).corners_radius(&sel2_radius);
let select = select2 - select;
let select = select.fill(color::Rgba::from(sel_color));
let select = select.fill(sel_color);
// === Error Pattern Alternative ===
@ -534,7 +534,6 @@ impl Node {
let model = Rc::new(NodeModel::new(app,registry));
let selection = Animation::<f32>::new(network);
let bg_color_anim = color::Animation::new(network);
let error_color_anim = color::Animation::new(network);
let style = StyleWatch::new(&app.display.scene().style_sheet);
let style_frp = &model.style;
@ -689,10 +688,12 @@ impl Node {
// if *disabled { style.get_color_dim(bg_color_path) }
// else { style.get_color(bg_color_path) }
// }));
bg_color_anim.target <+ bg_color;
eval bg_color_anim.value ((c)
model.background.bg_color.set(color::Rgba::from(c).into())
);
// bg_color_anim.target <+ bg_color;
// eval bg_color_anim.value ((c)
// model.background.bg_color.set(color::Rgba::from(c).into())
// );
eval bg_color ((c) model.background.bg_color.set(c.into()));
// === Tooltip ===
@ -722,7 +723,7 @@ impl Node {
error::Kind::Panic => error_theme::panic,
error::Kind::Dataflow => error_theme::dataflow,
};
style.get_color(path)
style.get_color(path).into()
} else {
color::Lcha::transparent()
}

6
gui/src/rust/ide/view/graph-editor/src/component/node/action_bar.rs
View File

@ -290,9 +290,9 @@ impl ActionBar {
}
let color_scheme = toggle_button::ColorScheme {
non_toggled : Some(model.styles.get_color(theme::graph_editor::node::actions::button::non_toggled)),
toggled : Some(model.styles.get_color(theme::graph_editor::node::actions::button::toggled)),
hovered : Some(model.styles.get_color(theme::graph_editor::node::actions::button::hovered)),
non_toggled : Some(model.styles.get_color(theme::graph_editor::node::actions::button::non_toggled).into()),
toggled : Some(model.styles.get_color(theme::graph_editor::node::actions::button::toggled).into()),
hovered : Some(model.styles.get_color(theme::graph_editor::node::actions::button::hovered).into()),
..default()
};

12
gui/src/rust/ide/view/graph-editor/src/component/node/input/area.rs
View File

@ -252,7 +252,7 @@ impl Model {
self.label.single_line(true);
self.label.disable_command("cursor_move_up");
self.label.disable_command("cursor_move_down");
self.label.set_default_color(color::Rgba::from(text_color));
self.label.set_default_color(text_color);
self.label.set_default_text_size(text::Size(TEXT_SIZE));
self.label.remove_all_cursors();
@ -289,7 +289,7 @@ impl Model {
fn select_color(styles:&StyleWatch, tp:Option<&Type>) -> color::Lcha {
let opt_color = tp.as_ref().map(|tp| type_coloring::compute(tp,styles));
opt_color.unwrap_or_else(||styles.get_color(theme::code::types::any::selection))
opt_color.unwrap_or_else(||styles.get_color(theme::code::types::any::selection).into())
}
@ -537,7 +537,7 @@ impl Area {
// FIXME : StyleWatch is unsuitable here, as it was designed as an internal tool for shape system (#795)
let styles = StyleWatch::new(&self.model.app.display.scene().style_sheet);
let any_type_sel_color = styles.get_color(theme::code::types::any::selection);
let any_type_sel_color = color::Lcha::from(styles.get_color(theme::code::types::any::selection));
let crumbs = port.crumbs.clone_ref();
let port_network = &port.network;
let frp = &self.frp.output;
@ -627,9 +627,9 @@ impl Area {
/// this way, rather than delegate it to every port.
fn init_port_frp_on_new_expression(&self, expression:&mut Expression) {
let model = &self.model;
let selected_color = model.styles.get_color(theme::code::types::selected);
let disabled_color = model.styles.get_color(theme::code::syntax::disabled);
let expected_color = model.styles.get_color(theme::code::syntax::expected);
let selected_color = color::Lcha::from(model.styles.get_color(theme::code::types::selected));
let disabled_color = color::Lcha::from(model.styles.get_color(theme::code::syntax::disabled));
let expected_color = color::Lcha::from(model.styles.get_color(theme::code::syntax::expected));
let parent_tp : Option<frp::Stream<Option<Type>>> = None;
expression.root_ref_mut().dfs_with_layer_data(parent_tp,|node,parent_tp| {

4
gui/src/rust/ide/view/graph-editor/src/component/node/output/area.rs
View File

@ -183,7 +183,7 @@ impl Model {
self.label.single_line(true);
self.label.disable_command("cursor_move_up");
self.label.disable_command("cursor_move_down");
self.label.set_default_color(color::Rgba::from(text_color));
self.label.set_default_color(text_color);
self.label.set_default_text_size(text::Size(input::area::TEXT_SIZE));
self.label.remove_all_cursors();
@ -410,7 +410,7 @@ impl Area {
// === Label Color ===
let label_vis_color = model.styles.get_color(theme::graph_editor::node::text);
let label_vis_color = color::Lcha::from(model.styles.get_color(theme::graph_editor::node::text));
let label_vis_alpha = label_vis_color.alpha;
port_hover <- frp.on_port_hover.map(|t| t.is_on());
frp.source.body_hover <+ frp.set_hover || port_hover;

6
gui/src/rust/ide/view/graph-editor/src/component/node/vcs.rs
View File

@ -27,9 +27,9 @@ pub enum Status {
impl Status {
fn get_highlight_color_from_style(self, style:&StyleWatch) -> color::Lcha {
match self {
Status::Unchanged => style.get_color(ensogl_theme::graph_editor::node::vcs::unchanged),
Status::Added => style.get_color(ensogl_theme::graph_editor::node::vcs::added),
Status::Edited => style.get_color(ensogl_theme::graph_editor::node::vcs::edited),
Status::Unchanged => style.get_color(ensogl_theme::graph_editor::node::vcs::unchanged).into(),
Status::Added => style.get_color(ensogl_theme::graph_editor::node::vcs::added).into(),
Status::Edited => style.get_color(ensogl_theme::graph_editor::node::vcs::edited).into(),
}
}
}

4
gui/src/rust/ide/view/graph-editor/src/component/type_coloring.rs
View File

@ -59,13 +59,13 @@ pub fn compute(tp:&Type, styles:&StyleWatch) -> color::Lcha {
/// Get the code color for the provided type or default code color in case the type is None.
pub fn compute_for_code(tp:Option<&Type>, styles:&StyleWatch) -> color::Lcha {
let opt_color = tp.as_ref().map(|tp| compute(tp,styles));
opt_color.unwrap_or_else(|| styles.get_color(theme::graph_editor::node::text))
opt_color.unwrap_or_else(|| styles.get_color(theme::graph_editor::node::text).into())
}
/// Get the code color for the provided type or default code color in case the type is None.
pub fn compute_for_selection(tp:Option<&Type>, styles:&StyleWatch) -> color::Lcha {
let opt_color = tp.as_ref().map(|tp| compute(tp,styles));
opt_color.unwrap_or_else(|| styles.get_color(theme::code::types::any::selection))
opt_color.unwrap_or_else(|| styles.get_color(theme::code::types::any::selection).into())
}
/// Computes LCH hue value based on incoming type information.

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

@ -106,7 +106,7 @@ pub mod background {
let select2 = Rect((&sel2_width,&sel2_height)).corners_radius(&sel2_radius);
let select = select2 - select;
let select = select.fill(color::Rgba::from(sel_color));
let select = select.fill(sel_color);
select.into()
}
@ -183,7 +183,6 @@ impl View {
// 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::graph_editor::visualization::background);
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();

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

@ -67,7 +67,7 @@ mod background {
let background = background_rounded + background_sharp;
let color_path = theme::graph_editor::visualization::action_bar::background;
let fill_color = style.get_color(color_path);
let background = background.fill(color::Rgba::from(fill_color));
let background = background.fill(fill_color);
background.into()
}
}
@ -111,7 +111,7 @@ mod four_arrow_icon {
let color_path = theme::graph_editor::visualization::action_bar::icon;
let fill_color = style.get_color(color_path);
let icon = (arrow_heads + cross).fill(color::Rgba::from(fill_color));
let icon = (arrow_heads + cross).fill(fill_color);
(background + icon).into()
}
@ -146,9 +146,9 @@ mod pin_icon {
let color_path = theme::graph_editor::visualization::action_bar::icon;
let fill_color = style.get_color(color_path);
let icon = (pin_thorn + pin_head).fill(color::Rgba::from(fill_color));
let icon = (pin_thorn + pin_head).fill(fill_color);
let icon = icon.rotate((PI/4.0).radians());
let icon = icon.fill(color::Rgba::from(fill_color));
let icon = icon.fill(fill_color);
(background + icon).into()
}

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

@ -37,7 +37,7 @@ pub mod background {
let color_bg = style.get_color(color_path);
let corner_radius = &radius * &roundness;
let background = Rect((&width,&height)).corners_radius(&corner_radius);
let background = background.fill(color::Rgba::from(color_bg));
let background = background.fill(color_bg);
background.into()
}
}
@ -68,7 +68,6 @@ impl Panel {
// 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::graph_editor::visualization::background);
let bg_color = color::Rgba::from(bg_color);
let red = bg_color.red * 255.0;
let green = bg_color.green * 255.0;
let blue = bg_color.blue * 255.0;

11
gui/src/rust/ide/view/graph-editor/src/component/visualization/foreign/java_script/binding.rs
View File

@ -81,9 +81,8 @@ pub struct JsColor {
pub alpha: f32
}
impl From<color::Lcha> for JsColor {
fn from(lcha: color::Lcha) -> Self {
let rgba = color::Rgba::from(lcha);
impl From<color::Rgba> for JsColor {
fn from(rgba: color::Rgba) -> Self {
JsColor {
red: rgba.red,
green: rgba.green,
@ -93,6 +92,12 @@ impl From<color::Lcha> for JsColor {
}
}
impl From<color::Lcha> for JsColor {
fn from(lcha: color::Lcha) -> Self {
color::Rgba::from(lcha).into()
}
}
#[allow(non_snake_case)]
#[wasm_bindgen]
impl JsTheme {

3
gui/src/rust/ide/view/graph-editor/src/component/visualization/foreign/java_script/instance.rs
View File

@ -103,8 +103,7 @@ impl InstanceModel {
fn get_background_color(scene:&Scene) -> color::Rgba {
let styles = StyleWatch::new(&scene.style_sheet);
let bg_color = styles.get_color(ensogl_theme::graph_editor::visualization::background);
color::Rgba::from(bg_color)
styles.get_color(ensogl_theme::graph_editor::visualization::background)
}
fn create_root(scene:&Scene,logger:&Logger) -> result::Result<DomSymbol, Error> {

6
gui/src/rust/ide/view/graph-editor/src/lib.rs
View File

@ -1802,7 +1802,9 @@ impl GraphEditorModel {
.or_else(|| self.edge_target_type(edge_id))
.or_else(|| self.edge_source_type(edge_id));
let opt_color = edge_type.map(|t|type_coloring::compute(&t,&styles));
opt_color.unwrap_or_else(|| styles.get_color(theme::code::types::any::selection))
opt_color.unwrap_or_else(||
color::Lcha::from(styles.get_color(theme::code::types::any::selection))
)
}
fn first_detached_edge(&self) -> Option<EdgeId> {
@ -2009,7 +2011,7 @@ fn new_graph_editor(app:&Application) -> GraphEditor {
// 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 any_type_sel_color = styles.get_color(theme::code::types::any::selection);
let any_type_sel_color = color::Lcha::from(styles.get_color(theme::code::types::any::selection));

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

@ -92,9 +92,10 @@ impl Model {
let overlay = overlay::View::new(&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 styles = StyleWatch::new(&scene.style_sheet);
let style_path = ensogl_theme::application::documentation::background;
let bg_color = styles.get_color(style_path).to_javascript_string();
let bg_color = styles.get_color(style_path);
let bg_color = bg_color.to_javascript_string();
dom.dom().set_attribute_or_warn("class" ,"scrollable" ,&logger);
dom.dom().set_style_or_warn("white-space" ,"normal" ,&logger);

1
gui/src/rust/ide/view/src/status_bar.rs
View File

@ -125,7 +125,6 @@ impl Model {
let text_color_path = theme::application::status_bar::text;
let style = StyleWatch::new(&app.display.scene().style_sheet);
let text_color = style.get_color(text_color_path);
let text_color = color::Rgba::from(text_color);
label.frp.set_color_all.emit(text_color);
label.frp.set_default_color.emit(text_color);