Skip to content
This repository has been archived by the owner on Dec 28, 2021. It is now read-only.

Close and Fullscreen buttons for IDE in the cloud #1511

Merged
merged 24 commits into from
Apr 26, 2021

Conversation

mwu-tow
Copy link
Contributor

@mwu-tow mwu-tow commented Apr 21, 2021

Pull Request Description

This PR:

  • introduces a new boolean parameter is_in_cloud. Currently it is set to false, it is expected that when IDE is running in the clout, it will be set to true.
  • defines two buttons styled after macOS close and fullscreen buttons
  • defines a "top buttons" panel component that places the two buttons together
  • project view will include the buttons, if IDE is running in the cloud environment
  • breadcrumbs panel position will be adjusted to not overlap with the buttons
  • defines an example scene for ensogl that allows debugging mouse events

Along with these there are a number of improvements and utilities that I found needed at various points of developing this feature.

Important Notes

Checklist

Please include the following checklist in your PR:

  • The CHANGELOG.md was updated with the changes introduced in this PR.
  • The documentation has been updated if necessary.
  • All code conforms to the Rust style guide.
    - [ ] All code has automatic tests where possible.
    - [ ] All code has been profiled where possible.
  • All code has been manually tested in the IDE.
  • All code has been manually tested in the "debug/interface" scene.
  • All code has been manually tested by the PR owner against our test scenarios.
  • All code has been manually tested by at least one reviewer against our test scenarios.

@mwu-tow mwu-tow added Difficulty: Core Contributor Should only be attempted by a core contributor Priority: Highest Should be completed ASAP Type: Enhancement An enhancement to the current state of Enso IDE Category: GUI The Graphical User Interface labels Apr 21, 2021
@mwu-tow mwu-tow self-assigned this Apr 21, 2021
src/js/lib/client/src/index.js Show resolved Hide resolved
src/js/lib/content/src/index.js Outdated Show resolved Hide resolved
src/rust/ensogl/lib/core/src/data/color/space/def.rs Outdated Show resolved Hide resolved
src/rust/ide/view/graph-editor/src/lib.rs Outdated Show resolved Hide resolved
Copy link
Member

@wdanilo wdanilo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I left few comments, but overall, the quality of the code is very high. I'm surprised by the amount of the code, but there is a lot of refactoring / generalization here, which I like a lot. After reading the whole PR, I'm really happy its done. There is only one place that should be merged with other part of the codebase (and which probably owuld have saved you a lot of work - we already have buttons generalization).

Also, please provide here screenshots + screencast of how the buttons behave on hover, clicked, and when the window is being resized! :)

src/js/lib/content/src/index.js Outdated Show resolved Hide resolved
src/rust/ensogl/example/src/mouse_events.rs Show resolved Hide resolved
@@ -377,6 +377,11 @@ define_color_spaces! {
// ===========

impl Rgb {
/// Construct RGB color by mapping [0 – 255] value range into [0.0 – 1.0].
pub fn from_integral_range(r:impl Into<f32>, g:impl Into<f32>, b:impl Into<f32>) -> Self {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I dont understand the name. Wjy there is "rannge" in name? We are consturctng colors not from a range, but from a 255-integer color encoding. I just think that the "range" word is very confusing here

Comment on lines 99 to 110
impl Var<color::Rgba> {
/// Build a color from its components.
pub fn srgba(r:impl Into<Var<f32>>, g:impl Into<Var<f32>>, b:impl Into<Var<f32>>, a:impl Into<Var<f32>>)
-> Var<color::Rgba> {
format!("srgba({},{},{},{})",
r.into().glsl(),
g.into().glsl(),
b.into().glsl(),
a.into().glsl()
).into()
}
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should be implemented as .glsl() method on colors instead imo. This is how we are converting all values there. Moreover, I see inconsistency here - srgba is a name used in GLSL due to convention there. However, in Rust, the counterpart of srgba is color::Rgba, while the counterpart of GLSL's rgba is color::LinearRgba. So the name srgba in Rust can be confusing.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This cannot be a glsl method, as the purpose is to construct Var<color:Rgba>, not Glsl.
Also, it cannot be on color, as there is no color, just the variables with its components.

Comment on lines 54 to 63
#[derive(Clone,Copy,Debug)]
pub enum State {
/// Base look when button is neither hovered nor pressed.
/// Also used when button was pressed but mouse was hovered out.
Unconcerned,
/// Look when button is hovered but not pressed.
Hovered,
/// Look when button is being pressed (held down) with mouse hovered.
Pressed,
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We already have an abstraction for buttons! @MichaelMauderer was writing one! Please merge them together if possible.

Comment on lines 266 to 272
|strict_hover,nearby_hover,clicked| {
match (strict_hover,nearby_hover,clicked) {
(true , _ , true) => State::Pressed,
(_ , true , _ ) => State::Hovered,
(_ , _ , true) => State::Hovered,
_ => State::Unconcerned,
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks like our already exisitng button generalization code. Yeah, they need to be merged.

src/rust/lib/frp/src/nodes.rs Outdated Show resolved Hide resolved
src/rust/lib/frp/src/nodes.rs Outdated Show resolved Hide resolved
src/rust/lib/frp/src/nodes.rs Show resolved Hide resolved
Copy link
Collaborator

@farmaazon farmaazon left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Mark the "Trace logger" and doc issue!

src/rust/ide/view/src/window_control_buttons.rs Outdated Show resolved Hide resolved
src/rust/ide/view/src/window_control_buttons/common.rs Outdated Show resolved Hide resolved
let radius_frp = style.get(ensogl_theme::application::window_control_buttons::radius);

// Style's relevant color FRP endpoints.
let background_unconcerned_color = style.get_color(Shape::background_color_path(State::Unconcerned));
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

over 100

let default_icon_color_path = Shape::icon_color_path(State::Unconcerned);
let default_icon_color = style.get_color(default_icon_color_path).value();
let icon_color = color::Animation::new(&network);
icon_color.target(color::Lcha::from(default_icon_color));
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you may also consider call "skip" on animation.

@farmaazon farmaazon merged commit 71c3b39 into develop Apr 26, 2021
@farmaazon farmaazon deleted the wip/mwu/close-button-1095 branch April 26, 2021 13:06
mwu-tow added a commit to enso-org/enso that referenced this pull request Oct 30, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Category: GUI The Graphical User Interface Difficulty: Core Contributor Should only be attempted by a core contributor Priority: Highest Should be completed ASAP Type: Enhancement An enhancement to the current state of Enso IDE
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants