Skip to content

Commit

Permalink
Implement trivial placeholder icons for all 5 Component Browser entry…
Browse files Browse the repository at this point in the history 
… kinds. (#3557)

Implement simple placeholder icons for all entry kinds supported in the Suggestion Database. The icons are planned to be used in Component Browser as default icons for entries. This is intended to allow visually distinguishing different entry kinds.

The following additional fixes and tweaks are applied:
 - Icons previously using only 1 color from the theme now use the color provided through shape parameters instead.
 - The `data_science` and `network` icons now use only the 2 colors provided through shape parameters.
 - The `join` icon has its shape and colors modified and uses only the 2 colors provided through shape parameters.
 - The demo scene now parametrizes icon shapes using colors from the Component Browser Design Doc.

https://www.pivotaltracker.com/story/show/182584322

#### Visuals

Original contents of the demo scene before the PR:

<img width="2197" alt="x-orig" src="https://user-images.githubusercontent.com/273837/176669422-ee2e14c7-9ef4-42fd-acb7-ae3be6b68587.png">



Final contents of the demo scene after the PR:

<img width="2201" alt="x2-final" src="https://user-images.githubusercontent.com/273837/176668720-6f1685fd-f7e6-44d7-85f5-f6a6d6789644.png">
  • Loading branch information
@akavel
akavel authored Jul 4, 2022
1 parent e6b7d5b commit 2b2563a
Show file tree
Hide file tree
Showing 3 changed files with 111 additions and 68 deletions.
138 changes: 108 additions & 30 deletions app/gui/view/component-browser/component-group/src/icon.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -494,7 +494,7 @@ crate::define_icons! {
( 4.0 , -5.5),
( 5.0 , -3.5),
]);
let shape = shape.fill(style.get_color(theme::transform));
let shape = shape.fill(strong_color);
let shape = shape.shrink(SHRINK_AMOUNT.px());
shape.into()
}
Expand Down Expand Up @@ -555,17 +555,15 @@ crate::define_icons! {
ensogl::define_shape_system! {
above = [crate::background, ensogl_list_view::background, ensogl_list_view::selection];
(style: Style, strong_color: Vector4, weak_color: Vector4) {
let blue = style.get_color(theme::data_science::blue);
let rect1 = Rect((4.0.px(),4.0.px())).translate(((-5.5).px(),3.0.px())).fill(blue);
let rect2 = Rect((4.0.px(),4.0.px())).translate_y((-5.5).px()).fill(blue);

let gray = style.get_color(theme::data_science::gray);
let circle1 = Circle(2.0.px()).translate_y(5.5.px()).fill(gray);
let circle2 = Circle(2.0.px()).translate(((-5.5).px(),(-3.0).px())).fill(gray);
let circle3 = Circle(2.0.px()).translate((5.5.px(),(-3.0).px())).fill(gray);
let circle = Circle(2.0.px());
let circle1 = circle.translate_y(5.5.px()).fill(weak_color.clone());
let circle2 = circle.translate(((-5.5).px(),(-3.0).px())).fill(weak_color.clone());
let circle3 = circle.translate((5.5.px(),(-3.0).px())).fill(weak_color);

let red = style.get_color(theme::data_science::red);
let circle4 = Circle(2.0.px()).fill(red);
let circle4 = circle.fill(strong_color.clone());
let rect = Rect((4.0.px(),4.0.px()));
let rect1 = rect.translate(((-5.5).px(),3.0.px())).fill(strong_color.clone());
let rect2 = rect.translate_y((-5.5).px()).fill(strong_color);

let shape = rect1 + rect2 + circle1 + circle2 + circle3 + circle4;
let shape = shape.shrink(SHRINK_AMOUNT.px());
Expand All @@ -580,13 +578,13 @@ crate::define_icons! {
above = [crate::background, ensogl_list_view::background, ensogl_list_view::selection];
(style: Style, strong_color: Vector4, weak_color: Vector4) {
let circle = Circle(1.0.px())
.fill(style.get_color(theme::network::_0));
.fill(strong_color.clone());
let arc1 = RoundedArc((10.5/3.0*1.0).px(),(PI/2.0).radians(),1.5.px())
.fill(style.get_color(theme::network::_1));
.fill(strong_color.clone());
let arc2 = RoundedArc((10.5/3.0*2.0).px(),(PI/2.0).radians(),1.5.px())
.fill(style.get_color(theme::network::_2));
.fill(strong_color);
let arc3 = RoundedArc((10.5/3.0*3.0).px(),(PI/2.0).radians(),1.5.px())
.fill(style.get_color(theme::network::_3));
.fill(weak_color);

let shape = circle + arc1 + arc2 + arc3;
let shape = shape.translate_y((-5.5).px());
Expand Down Expand Up @@ -746,20 +744,18 @@ crate::define_icons! {
ensogl::define_shape_system! {
above = [crate::background, ensogl_list_view::background, ensogl_list_view::selection];
(style: Style, strong_color: Vector4, weak_color: Vector4) {
let left_circle = Circle(5.0.px()).translate_x((-3.0).px());
let right_circle = Circle(5.0.px()).translate_x(3.0.px());
let left_outline = &left_circle - left_circle.shrink(0.5.px());
let right_outline = &right_circle - right_circle.shrink(0.5.px());
let intersection = &left_circle * &right_circle;
let left_circle = Circle(5.0.px()).translate_x((-3.0).px());
let right_circle = Circle(5.0.px()).translate_x(3.0.px());
let intersection = &left_circle * &right_circle;
let left_outline = left_circle.grow(1.0.px()) - &left_circle;
let right_outline = right_circle.grow(1.0.px()) - &right_circle;

let left_circle = left_circle.fill(weak_color.clone());
let right_circle = right_circle.fill(weak_color);
let intersection = intersection.fill(style.get_color(theme::join::medium));
let left_outline = left_outline.fill(strong_color.clone());
let right_outline = right_outline.fill(strong_color);
let left_circle = left_circle.fill(weak_color.clone());
let right_circle = right_circle.fill(weak_color);
let intersection = intersection.fill(strong_color.clone());

let shape =
left_circle + right_circle + intersection + left_outline + right_outline;
left_circle + right_circle + intersection - left_outline - right_outline;
let shape = shape.shrink(SHRINK_AMOUNT.px());
shape.into()
}
Expand Down Expand Up @@ -804,7 +800,7 @@ crate::define_icons! {

let shape = circle + big_hand + small_hand;
let shape = shape.translate((0.25.px(),0.25.px()));
let shape = shape.fill(style.get_color(theme::date_and_time));
let shape = shape.fill(strong_color);
let shape = shape.shrink(SHRINK_AMOUNT.px());
shape.into()
}
Expand All @@ -830,7 +826,7 @@ crate::define_icons! {
let ellipse = ellipse - ellipse_gap;

let shape = marker + ellipse;
let shape = shape.fill(style.get_color(theme::spatial));
let shape = shape.fill(strong_color);
let shape = shape.shrink(SHRINK_AMOUNT.px());
shape.into()
}
Expand All @@ -855,7 +851,7 @@ crate::define_icons! {
let base = base - circle.translate_y(1.5.px()).grow(2.0.px());

let shape = sphere + base;
let shape = shape.fill(style.get_color(theme::predictive));
let shape = shape.fill(strong_color);
let shape = shape.shrink(SHRINK_AMOUNT.px());
shape.into()
}
Expand All @@ -881,7 +877,7 @@ crate::define_icons! {
let right_arm = Rect((1.0.px(),4.5.px())).translate((6.5.px(),(-2.75).px()));

let shape = body + collar + left_eye + right_eye + antenna + left_arm + right_arm;
let shape = shape.fill(style.get_color(theme::machine_learning));
let shape = shape.fill(strong_color);
let shape = shape.shrink(SHRINK_AMOUNT.px());
shape.into()
}
Expand Down Expand Up @@ -912,6 +908,88 @@ crate::define_icons! {
}
}
}

/// Outline of a circle. A placeholder icon for
/// [`enso_gui::model::suggestion_database::entry::Kind::Atom`] components. Planned to be
/// replaced by a carefully designed icon in the future.
pub mod atom(Atom) {
ensogl::define_shape_system! {
above = [crate::background, ensogl_list_view::background, ensogl_list_view::selection];
(style: Style, strong_color: Vector4, weak_color: Vector4) {
let circle = Circle(5.5.px()) - Circle(4.0.px());
let shape = circle.fill(strong_color);
let shape = shape.shrink(SHRINK_AMOUNT.px());
shape.into()
}
}
}

/// A filled triangle pointing to the right. A placeholder icon for
/// [`enso_gui::model::suggestion_database::entry::Kind::Function`] components. Planned to be
/// replaced by a carefully designed icon in the future.
pub mod function(Function) {
ensogl::define_shape_system! {
above = [crate::background, ensogl_list_view::background, ensogl_list_view::selection];
(style: Style, strong_color: Vector4, weak_color: Vector4) {
let triangle = Triangle(12.0, 12.0).rotate((PI/2.0).radians());
let shape = triangle.fill(strong_color);
let shape = shape.shrink(SHRINK_AMOUNT.px());
shape.into()
}
}
}

/// A small filled circle. A placeholder icon for
/// [`enso_gui::model::suggestion_database::entry::Kind::Local`] components. Planned to be
/// replaced by a carefully designed icon in the future.
pub mod local(Local) {
ensogl::define_shape_system! {
above = [crate::background, ensogl_list_view::background, ensogl_list_view::selection];
(style: Style, strong_color: Vector4, weak_color: Vector4) {
let dot = Circle(4.0.px());
let shape = dot.fill(strong_color);
let shape = shape.shrink(SHRINK_AMOUNT.px());
shape.into()
}
}
}

/// A rectangle rotated by 45 degrees. A placeholder icon for
/// [`enso_gui::model::suggestion_database::entry::Kind::Method`] components. Planned to be
/// replaced by a carefully designed icon in the future.
pub mod method(Method) {
ensogl::define_shape_system! {
above = [crate::background, ensogl_list_view::background, ensogl_list_view::selection];
(style: Style, strong_color: Vector4, weak_color: Vector4) {
let rhomb = path(1.5, &[
(6.0, 0.0),
(0.0, -6.0),
(-6.0, 0.0),
(0.0, 6.0),
(6.0, 0.0),
]);
let shape = rhomb.fill(strong_color);
let shape = shape.shrink(SHRINK_AMOUNT.px());
shape.into()
}
}
}

/// An outline of a square with rounded corners. A placeholder icon for
/// [`enso_gui::model::suggestion_database::entry::Kind::Module`] components. Planned to be
/// replaced by a carefully designed icon in the future.
pub mod module(Module) {
ensogl::define_shape_system! {
above = [crate::background, ensogl_list_view::background, ensogl_list_view::selection];
(style: Style, strong_color: Vector4, weak_color: Vector4) {
let rect = Rect((14.0.px(), 14.0.px())).corners_radius(3.0.px());
let rect = &rect - rect.shrink(1.5.px());
let shape = rect.fill(strong_color);
let shape = shape.shrink(SHRINK_AMOUNT.px());
shape.into()
}
}
}
}

impl Default for Id {
Expand Down
6 changes: 3 additions & 3 deletions app/gui/view/debug_scene/icons/src/lib.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,11 +77,11 @@ pub fn entry_point_searcher_icons() {

// === Icons ===

let mut x = 0.0;
let mut x = -300.0;
icon::Id::for_each(|id| {
let shape = id.create_shape(&logger, Vector2(icon::SIZE, icon::SIZE));
shape.weak_color.set(color::Rgba(0.475, 0.494, 0.145, 1.0).into());
shape.strong_color.set(color::Rgba(0.612, 0.627, 0.388, 1.0).into());
shape.strong_color.set(color::Rgba(0.243, 0.541, 0.160, 1.0).into());
shape.weak_color.set(color::Rgba(0.655, 0.788, 0.624, 1.0).into());
shape.set_position_x(x);
x += 20.0;
world.add_child(&shape);
Expand Down
35 changes: 0 additions & 35 deletions lib/rust/ensogl/app/theme/hardcoded/src/lib.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -277,44 +277,9 @@ define_themes! { [light:0, dark:1]
padding = 5.0, 5.0;
icons {
favorites = Rgba(0.98,0.584,0.122,1.0) , Rgba(0.98,0.584,0.122,1.0);
io {
strong = Rgba(0.475,0.494,0.145,1.0) , Rgba(0.475,0.494,0.145,1.0);
weak = Rgba(0.612,0.627,0.388,1.0) , Rgba(0.612,0.627,0.388,1.0);
}
preparation {
strong = Rgba(0.243,0.545,0.161,1.0) , Rgba(0.243,0.545,0.161,1.0);
weak = Rgba(0.69,0.816,0.663,1.0) , Rgba(0.69,0.816,0.663,1.0);
}
join {
strong = Rgba(0.239,0.573,0.808,1.0) , Rgba(0.239,0.573,0.808,1.0);
weak = Rgba(0.612,0.784,0.902,1.0) , Rgba(0.612,0.784,0.902,1.0);
medium = Rgba(0.42,0.678,0.855,1.0) , Rgba(0.42,0.678,0.855,1.0);
}
transform = Rgba(0.169,0.459,0.937,1.0) , Rgba(0.169,0.459,0.937,1.0);
text {
strong = Rgba(0.753,0.278,0.671,1.0) , Rgba(0.753,0.278,0.671,1.0);
weak = Rgba(0.871,0.635,0.831,1.0) , Rgba(0.871,0.635,0.831,1.0);
}
date_and_time = Rgba(0.753,0.278,0.671,1.0) , Rgba(0.753,0.278,0.671,1.0);
spatial = Rgba(0.827,0.267,0.255,1.0) , Rgba(0.827,0.267,0.255,1.0);
predictive = Rgba(0.71,0.38,0.137,1.0) , Rgba(0.71,0.38,0.137,1.0);
machine_learning = Rgba(0.71,0.38,0.137,1.0) , Rgba(0.71,0.38,0.137,1.0);
computer_vision {
strong = Rgba(0.306,0.306,0.306,1.0) , Rgba(0.306,0.306,0.306,1.0);
weak = Rgba(0.514,0.518,0.518,1.0) , Rgba(0.514,0.518,0.518,1.0);
highlight = Rgba(0.872,0.267,0.255,1.0) , Rgba(0.872,0.267,0.255,1.0);
}
data_science {
red = Rgba(0.847,0.212,0.435,1.0) , Rgba(0.847,0.212,0.435,1.0);
blue = Rgba(0.235,0.565,0.886,1.0) , Rgba(0.235,0.565,0.886,1.0);
gray = Rgba(0.306,0.306,0.306,1.0) , Rgba(0.306,0.306,0.306,1.0);
}
network {
_0 = Rgba(0.12,0.451,0.973,1.0) , Rgba(0.12,0.451,0.973,1.0);
_1 = Rgba(0.114,0.506,0.976,1.0) , Rgba(0.114,0.506,0.976,1.0);
_2 = Rgba(0.255,0.588,0.98,1.0) , Rgba(0.255,0.588,0.98,1.0);
_3 = Rgba(0.404,0.671,0.984,1.0) , Rgba(0.404,0.671,0.984,1.0);
}
system {
background = Rgba(0.306,0.306,0.306,1.0) , Rgba(0.306,0.306,0.306,1.0);
content = Rgba(0.988,0.996,1.0,1.0) , Rgba(0.988,0.996,1.0,1.0);
Expand Down

0 comments on commit 2b2563a

Please sign in to comment.