From 5f5857f49bf324125037a823b23c7036357bcab5 Mon Sep 17 00:00:00 2001 From: Felix Rech Date: Tue, 13 Apr 2021 13:19:33 +0100 Subject: [PATCH 1/3] Update breadcrumb bar design --- src/rust/ensogl/lib/core/src/display/scene.rs | 10 ++-- src/rust/ensogl/lib/theme/src/lib.rs | 2 +- .../graph-editor/src/component/breadcrumbs.rs | 47 ++++++++++--------- src/rust/ide/view/graph-editor/src/lib.rs | 34 +++++++++----- 4 files changed, 54 insertions(+), 39 deletions(-) diff --git a/src/rust/ensogl/lib/core/src/display/scene.rs b/src/rust/ensogl/lib/core/src/display/scene.rs index 5c5a4e547f..c3b07bb68e 100644 --- a/src/rust/ensogl/lib/core/src/display/scene.rs +++ b/src/rust/ensogl/lib/core/src/display/scene.rs @@ -648,13 +648,13 @@ impl HardcodedLayers { tooltip_background.set_camera(layers.main.camera()); tooltip_text.set_camera(layers.main.camera()); below_main.set_camera(layers.main.camera()); + layers.add_layers_order_dependency(&breadcrumbs_background,&breadcrumbs_text); + layers.add_layers_order_dependency(&breadcrumbs_text,&viz); layers.add_layers_order_dependency(&viz,&below_main); layers.add_layers_order_dependency(&below_main,&layers.main); - layers.add_layers_order_dependency(&layers.main,&label); - layers.add_layers_order_dependency(&label,&breadcrumbs_background); - layers.add_layers_order_dependency(&breadcrumbs_background,&breadcrumbs_text); - layers.add_layers_order_dependency(&breadcrumbs_text,&cursor); - layers.add_layers_order_dependency(&cursor,&tooltip_background); + layers.add_layers_order_dependency(&layers.main,&cursor); + layers.add_layers_order_dependency(&cursor,&label); + layers.add_layers_order_dependency(&label,&tooltip_background); layers.add_layers_order_dependency(&tooltip_background,&tooltip_text); layers.add_layers_order_dependency(&tooltip_text,&viz_fullscreen); Self {layers,viz,cursor,label,viz_fullscreen,below_main,breadcrumbs_background, diff --git a/src/rust/ensogl/lib/theme/src/lib.rs b/src/rust/ensogl/lib/theme/src/lib.rs index e5e875d885..0d34377d02 100644 --- a/src/rust/ensogl/lib/theme/src/lib.rs +++ b/src/rust/ensogl/lib/theme/src/lib.rs @@ -295,7 +295,7 @@ define_themes! { [light:0, dark:1] left = Lcha(0.0,0.0,0.0,0.5) , Lcha(1.0,0.0,0.0,0.5); right = Lcha(0.0,0.0,0.0,0.2) , Lcha(1.0,0.0,0.0,0.2); } - background = graph_editor::node::background , graph_editor::node::background; + background = application::background , application::background; background { corner_radius = 8.0 , 8.0; shadow = shadow , shadow; diff --git a/src/rust/ide/view/graph-editor/src/component/breadcrumbs.rs b/src/rust/ide/view/graph-editor/src/component/breadcrumbs.rs index 2813cd34ba..fd9cd2da88 100644 --- a/src/rust/ide/view/graph-editor/src/component/breadcrumbs.rs +++ b/src/rust/ide/view/graph-editor/src/component/breadcrumbs.rs @@ -21,7 +21,6 @@ use ensogl::display::shape::*; use ensogl::display::style; use ensogl::display; use ensogl::gui::cursor; -use ensogl_gui_components::shadow; use logger::Logger; use std::cmp::Ordering; @@ -34,9 +33,10 @@ use std::cmp::Ordering; const GLYPH_WIDTH : f32 = 7.224_609_4; const VERTICAL_MARGIN : f32 = GLYPH_WIDTH; const HORIZONTAL_MARGIN : f32 = GLYPH_WIDTH; -const HORIZONTAL_PADDING : f32 = 12.0; +const BACKGROUND_PADDING : f32 = 8.0; const TEXT_SIZE : f32 = 12.0; -const HEIGHT : f32 = VERTICAL_MARGIN +/// The height of the breadcrumb bar's content. The background may be higher. +pub const HEIGHT : f32 = VERTICAL_MARGIN + breadcrumb::VERTICAL_MARGIN + breadcrumb::PADDING + LINE_HEIGHT @@ -83,11 +83,8 @@ mod background { let bg_color = style.get_color(&theme); let bg = shape.fill(bg_color); - let shadow_parameters = shadow::parameters_from_style_path(style,theme.sub("shadow")); - let shadow = shadow::from_shape_with_parameters - (shape.into(),shadow_parameters); - (shadow + bg).into() + bg.into() } } } @@ -174,11 +171,16 @@ pub struct BreadcrumbsModel { frp_inputs : FrpInputs, current_index : Rc>, camera : Camera2d, + /// Describes an empty space on the left of all the content. This space will be covered by the + /// background and is intended to make room for windows control buttons. + gap_width : f32, } impl BreadcrumbsModel { /// Constructor. - pub fn new(app:Application, frp:&Frp) -> Self { + /// The `gap_width` describes an empty space on the left of all the content. This space will be + /// covered by the background and is intended to make room for windows control buttons. + pub fn new(app:Application, frp:&Frp, gap_width:f32) -> Self { let scene = app.display.scene(); let project_name = app.new_view(); let logger = Logger::new("Breadcrumbs"); @@ -195,7 +197,7 @@ impl BreadcrumbsModel { scene.layers.breadcrumbs_background.add_exclusive(&background); Self{logger,display_object, root,app,breadcrumbs,project_name,breadcrumbs_container, - frp_inputs,current_index,camera,background}.init() + frp_inputs,current_index,camera,background,gap_width}.init() } fn init(self) -> Self { @@ -224,19 +226,20 @@ impl BreadcrumbsModel { fn update_layout(&self) { let project_name_width = self.project_name.width.value().round(); - self.project_name.set_position_x(HORIZONTAL_PADDING); - self.breadcrumbs_container.set_position_x(HORIZONTAL_PADDING + project_name_width); + self.project_name.set_position_x(self.gap_width); + self.breadcrumbs_container.set_position_x(self.gap_width + project_name_width); - let background_width = HORIZONTAL_PADDING - + project_name_width - + self.breadcrumbs_container_width() - + HORIZONTAL_PADDING; - let background_height = HEIGHT; - let width_with_shadow = background_width + MAGIC_SHADOW_MARGIN * 2.0; + let width = self.gap_width + + project_name_width + + self.breadcrumbs_container_width(); + let background_width = width + 2.0 * BACKGROUND_PADDING; + let background_height = + crate::MACOS_TRAFFIC_LIGHTS_CONTENT_HEIGHT + BACKGROUND_PADDING * 2.0; + let width_with_shadow = background_width + MAGIC_SHADOW_MARGIN * 2.0; let height_with_shadow = background_height + MAGIC_SHADOW_MARGIN * 2.0; self.background.size.set(Vector2(width_with_shadow,height_with_shadow)); - self.background.set_position_x(background_width/2.0); - self.background.set_position_y(-background_height/2.0); + self.background.set_position_x(width/2.0); + self.background.set_position_y(-HEIGHT/2.0); } fn get_breadcrumb(&self, index:usize) -> Option { @@ -408,10 +411,12 @@ pub struct Breadcrumbs { impl Breadcrumbs { /// Constructor. - pub fn new(app:Application) -> Self { + /// The `gap_width` describes an empty space on the left of all the content. This space will be + /// covered by the background and is intended to make room for windows control buttons. + pub fn new(app:Application,gap_width:f32) -> Self { let scene = app.display.scene().clone_ref(); let frp = Frp::new(); - let model = Rc::new(BreadcrumbsModel::new(app,&frp)); + let model = Rc::new(BreadcrumbsModel::new(app,&frp,gap_width)); let network = &frp.network; // === Breadcrumb selection === diff --git a/src/rust/ide/view/graph-editor/src/lib.rs b/src/rust/ide/view/graph-editor/src/lib.rs index aa02d5df60..4417406250 100644 --- a/src/rust/ide/view/graph-editor/src/lib.rs +++ b/src/rust/ide/view/graph-editor/src/lib.rs @@ -79,12 +79,25 @@ pub mod prelude { // === Constants === // ================= -const SNAP_DISTANCE_THRESHOLD : f32 = 10.0; -const VIZ_PREVIEW_MODE_TOGGLE_TIME_MS : f32 = 300.0; -const MACOS_TRAFFIC_LIGHTS_CONTENT : f32 = 52.0; -const MACOS_TRAFFIC_LIGHTS_SIDE_OFFSET : f32 = 13.0; -const MACOS_TRAFFIC_LIGHTS_WIDTH : f32 = - MACOS_TRAFFIC_LIGHTS_CONTENT + 2.0 * MACOS_TRAFFIC_LIGHTS_SIDE_OFFSET; +const SNAP_DISTANCE_THRESHOLD : f32 = 10.0; +const VIZ_PREVIEW_MODE_TOGGLE_TIME_MS : f32 = 300.0; +const MACOS_TRAFFIC_LIGHTS_CONTENT_WIDTH : f32 = 52.0; +const MACOS_TRAFFIC_LIGHTS_CONTENT_HEIGHT : f32 = 12.0; +/// Horizontal and vertical offset between traffic lights and window border +const MACOS_TRAFFIC_LIGHTS_SIDE_OFFSET : f32 = 13.0; +const MACOS_TRAFFIC_LIGHTS_VERTICAL_CENTER : f32 = + - MACOS_TRAFFIC_LIGHTS_SIDE_OFFSET - MACOS_TRAFFIC_LIGHTS_CONTENT_HEIGHT / 2.0; + +fn breadcrumbs_gap_width() -> f32 { + let is_macos = ARGS.platform.map(|p|p.is_macos()) == Some(true); + let is_frameless = ARGS.frame == Some(false); + if is_macos && is_frameless { + MACOS_TRAFFIC_LIGHTS_CONTENT_WIDTH + MACOS_TRAFFIC_LIGHTS_SIDE_OFFSET + } + else { + 0.0 + } +} @@ -1256,7 +1269,7 @@ impl GraphEditorModel { let vis_registry = visualization::Registry::with_default_visualizations(); let visualisations = default(); let touch_state = TouchState::new(network,&scene.mouse.frp); - let breadcrumbs = component::Breadcrumbs::new(app.clone_ref()); + let breadcrumbs = component::Breadcrumbs::new(app.clone_ref(),breadcrumbs_gap_width()); let app = app.clone_ref(); let frp = frp.output.clone_ref(); let navigator = Navigator::new(&scene,&scene.camera()); @@ -1270,11 +1283,8 @@ impl GraphEditorModel { fn init(self) -> Self { self.add_child(&self.breadcrumbs); - let is_macos = ARGS.platform.map(|p|p.is_macos()) == Some(true); - let is_frameless = ARGS.frame == Some(false); - let x_offset = if is_macos && is_frameless { MACOS_TRAFFIC_LIGHTS_WIDTH } - else { MACOS_TRAFFIC_LIGHTS_SIDE_OFFSET }; - let y_offset = -MACOS_TRAFFIC_LIGHTS_SIDE_OFFSET; + let x_offset = MACOS_TRAFFIC_LIGHTS_SIDE_OFFSET; + let y_offset = MACOS_TRAFFIC_LIGHTS_VERTICAL_CENTER + component::breadcrumbs::HEIGHT / 2.0; self.breadcrumbs.set_position_x(x_offset); self.breadcrumbs.set_position_y(y_offset); self.scene().add_child(&self.tooltip); From 3d687aa3c7b0a8c5e2c69711987f143edb5768a6 Mon Sep 17 00:00:00 2001 From: Felix Rech Date: Tue, 13 Apr 2021 13:24:00 +0100 Subject: [PATCH 2/3] Update CHANGELOG.md --- CHANGELOG.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index e3b955a4fc..86690ea908 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -39,8 +39,8 @@ - [Added Heatmap visualization.][1438] Just as Scatter Plot, it supports visualizing Table, and vectors. - [Added Heatmap visualization.][1438] -- [Add backgrounds to the project name and status bar][1447]. Both now have a - background with drop shadow for better readability. +- [Add a background to the status bar][1447]. +- [Display breadcrumbs behind nodes and other objects][1471]. - [Image visualization.][1367]. Visualizations for the Enso Image library. Now You can display Image type and string with image encoded in base64. Histogram visualization has been adjusted, allowing to display the values of the From a2c847e561e71b4c52109a2775a31f276a83055c Mon Sep 17 00:00:00 2001 From: Felix Rech Date: Tue, 13 Apr 2021 14:09:14 +0100 Subject: [PATCH 3/3] Fix breadcrumbs alignment --- src/rust/ide/view/graph-editor/src/component/breadcrumbs.rs | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/rust/ide/view/graph-editor/src/component/breadcrumbs.rs b/src/rust/ide/view/graph-editor/src/component/breadcrumbs.rs index fd9cd2da88..feeb9cd08d 100644 --- a/src/rust/ide/view/graph-editor/src/component/breadcrumbs.rs +++ b/src/rust/ide/view/graph-editor/src/component/breadcrumbs.rs @@ -215,7 +215,8 @@ impl BreadcrumbsModel { let camera = &self.camera; let screen = camera.screen(); let x_position = -screen.width/2.0; - let y_position = screen.height/2.0; + // We add half a pixel to the y offset as a quick fix for misaligned text. + let y_position = screen.height/2.0 - 0.5; self.root.set_position(Vector3(x_position.round(), y_position.round(), 0.0)); }