hUI/hui-examples/examples/vscode_layout.rs

//TODO: finish this demo

use hui::{
  color, size,
  draw::{ImageHandle, TextureFormat},
  layout::{Alignment, Direction},
  rect::Sides,
  element::{
    container::Container,
    fill_rect::FillRect,
    image::Image,
    text::Text,
    UiElementExt
  },
};

#[path = "../boilerplate.rs"]
#[macro_use]
mod boilerplate;

struct Stuff {
  vscode_icon: ImageHandle,
}

ui_main!(
  "hUI: vscode demo",
  init: |ui| {
    let handle = ui.add_font(include_bytes!("../assets/fira/FiraSans-Light.ttf"));
    ui.push_font(handle);
    Stuff {
      vscode_icon: ui.add_image(TextureFormat::Rgba, include_bytes!("../assets/icons/visual-studio-code-icon_32x32.rgba"), 32),
    }
  },
  run: |ui, size, stuff| {
    Container::default()
      .with_size(size!(100%))
      .with_children(|ui| {
        Container::default()
          .with_size(size!(100%, auto))
          .with_direction(Direction::Horizontal)
          .with_align((Alignment::Begin, Alignment::Center))
          .with_padding(Sides {
            left: 5.,
            right: 0.,
            top: 5.,
            bottom: 5.,
          })
          .with_gap(15.)
          .with_background(color::rgb_hex(0x3d3c3e))
          .with_wrap(true) //XXX: not authentic but great for demostration
          .with_children(|ui| {
            Image::new(stuff.vscode_icon)
              .with_size(size!(auto, 24))
              .add_child(ui);
            for item in ["File", "Edit", "Selection", "View", "Go", "Run", "Terminal", "Help"] {
              Text::new(item)
                .with_text_size(15)
                .add_child(ui);
            }
            Container::default()
              //HACK: due to a bug in the layout system, 100%= doesn't work as expected
              .with_size(size!(94%=, 100%))
              .with_align((Alignment::End, Alignment::Center))
              .with_children(|ui| {
                Text::new("- ×")
                  .with_text_size(32)
                  .add_child(ui);
              })
              .add_child(ui);
          })
          .add_child(ui);
        FillRect::default()
          .with_size(size!(100%, 1))
          .with_frame(color::rgb_hex(0x2d2d30))
          .add_child(ui);
        Container::default()
          .with_size(size!(100%, 100%=))
          .with_direction(Direction::Horizontal)
          .with_children(|ui| {
            // Sidebar:
            Container::default()
              .with_size(size!(54, 100%))
              .with_background(color::rgb_hex(0x343334))
              .add_child(ui);
            FillRect::default()
              .with_size(size!(1, 100%))
              .with_frame(color::rgb_hex(0x2d2d30))
              .add_child(ui);

            // Explorer pane:
            Container::default()
              .with_size(size!(200, 100%))
              .with_padding((15., 8.))
              .with_background(color::rgb_hex(0x262526))
              .with_children(|ui| {
                Text::new("EXPLORER")
                  .add_child(ui);
              })
              .add_child(ui);

            // "Code" pane
            Container::default()
              .with_size(size!(100%=, 100%))
              .with_background(color::rgb_hex(0x1f1e1f))
              .add_child(ui);
          })
          .add_child(ui);

          //Status bar
          Container::default()
            .with_size(size!(100%, auto))
            .with_background(color::rgb_hex(0x0079cc))
            .with_direction(Direction::Horizontal)
            .with_gap(5.)
            .with_children(|ui| {
              Container::default()
                .with_background(color::rgb_hex(0x16815e))
                .with_padding((10., 2.))
                .with_children(|ui| {
                  Text::new("><")
                    .with_text_size(13)
                    .add_child(ui);
                })
                .add_child(ui);
              Text::new("master")
                .with_text_size(15)
                .add_child(ui);
            })
          .add_child(ui);
      })
      .add_root(ui, size);
  }
);