Lines
0 %
Functions
Branches
100 %
//! Native progress bar widget with customizable backgrounds, height, and
//! gradient styling. The main type is [`ProgressBar`], which is rendered
//! into a DOM via [`ProgressBar::dom()`].
use azul_core::dom::{Dom, IdOrClass, IdOrClass::Class, IdOrClassVec};
use azul_css::{
dynamic_selector::{CssPropertyWithConditions, CssPropertyWithConditionsVec},
props::{
basic::*,
layout::*,
property::{CssProperty, *},
style::*,
},
*,
};
use azul_css::css::BoxOrStatic;
const STYLE_BACKGROUND_CONTENT_2688422633177340412_ITEMS: &[StyleBackgroundContent] =
&[StyleBackgroundContent::LinearGradient(LinearGradient {
direction: Direction::FromTo(DirectionCorners {
dir_from: DirectionCorner::Top,
dir_to: DirectionCorner::Bottom,
}),
extend_mode: ExtendMode::Clamp,
stops: NormalizedLinearColorStopVec::from_const_slice(
LINEAR_COLOR_STOP_12009347504665939_ITEMS,
),
})];
const STYLE_BACKGROUND_CONTENT_14586281004485141058_ITEMS: &[StyleBackgroundContent] =
LINEAR_COLOR_STOP_3104396762583413726_ITEMS,
const LINEAR_COLOR_STOP_12009347504665939_ITEMS: &[NormalizedLinearColorStop] = &[
NormalizedLinearColorStop {
offset: PercentageValue::const_new(0),
color: ColorOrSystem::color(ColorU {
r: 193,
g: 255,
b: 187,
a: 255,
offset: PercentageValue::const_new(10),
r: 205,
b: 205,
offset: PercentageValue::const_new(15),
r: 156,
g: 238,
b: 172,
offset: PercentageValue::const_new(20),
r: 0,
g: 211,
b: 40,
offset: PercentageValue::const_new(30),
offset: PercentageValue::const_new(70),
r: 32,
g: 219,
b: 65,
offset: PercentageValue::const_new(100),
];
const LINEAR_COLOR_STOP_3104396762583413726_ITEMS: &[NormalizedLinearColorStop] = &[
r: 243,
g: 243,
b: 243,
r: 252,
g: 252,
b: 252,
r: 218,
g: 218,
b: 218,
r: 201,
g: 201,
b: 201,
r: 203,
g: 203,
b: 203,
/// A native progress bar widget with customizable bar/container backgrounds and height.
#[derive(Debug, Clone)]
#[repr(C)]
pub struct ProgressBar {
pub progressbar_state: ProgressBarState,
pub height: PixelValue,
pub bar_background: StyleBackgroundContentVec,
pub container_background: StyleBackgroundContentVec,
}
/// Internal state for a [`ProgressBar`], tracking completion percentage.
pub struct ProgressBarState {
pub percent_done: f32,
pub display_percentage: bool,
impl ProgressBar {
/// Creates a new progress bar with the given completion percentage (0.0 to 100.0).
#[inline]
pub fn create(percent_done: f32) -> Self {
Self {
progressbar_state: ProgressBarState {
percent_done,
display_percentage: false,
height: PixelValue::const_px(15),
bar_background: StyleBackgroundContentVec::from_const_slice(
STYLE_BACKGROUND_CONTENT_2688422633177340412_ITEMS,
container_background: StyleBackgroundContentVec::from_const_slice(
STYLE_BACKGROUND_CONTENT_14586281004485141058_ITEMS,
/// Replaces `self` with a default (0%) progress bar, returning the previous value.
pub fn swap_with_default(&mut self) -> Self {
let mut s = Self::create(0.0);
core::mem::swap(&mut s, self);
s
pub fn set_container_background(&mut self, background: StyleBackgroundContentVec) {
self.container_background = background;
pub fn with_container_background(mut self, background: StyleBackgroundContentVec) -> Self {
self.set_container_background(background);
self
pub fn set_bar_background(&mut self, background: StyleBackgroundContentVec) {
self.bar_background = background;
pub fn with_bar_background(mut self, background: StyleBackgroundContentVec) -> Self {
self.set_bar_background(background);
pub fn set_height(&mut self, height: PixelValue) {
self.height = height;
pub fn with_height(mut self, height: PixelValue) -> Self {
self.set_height(height);
/// Renders this progress bar into a [`Dom`] tree consisting of a container div
/// with two children: the filled bar and the remaining empty space.
pub fn dom(self) -> Dom {
use azul_core::dom::DomVec;
// Use percentage widths for the progress bar and remaining space.
// The container uses flex-direction: row, and we set explicit widths
// on the children using CSS percentages.
let percent_done = self.progressbar_state.percent_done.max(0.0).min(100.0);
Dom::create_div()
.with_css_props(CssPropertyWithConditionsVec::from_vec(vec![
// .__azul-native-progress-bar-container
CssPropertyWithConditions::simple(CssProperty::Height(LayoutHeightValue::Exact(
LayoutHeight::Px(self.height.clone()),
))),
CssPropertyWithConditions::simple(CssProperty::FlexDirection(
LayoutFlexDirectionValue::Exact(LayoutFlexDirection::Row),
)),
CssPropertyWithConditions::simple(CssProperty::BoxShadowBottom(
StyleBoxShadowValue::Exact(BoxOrStatic::heap(StyleBoxShadow {
offset_x: PixelValueNoPercent {
inner: PixelValue::const_px(0),
offset_y: PixelValueNoPercent {
color: ColorU {
g: 0,
b: 0,
a: 9,
blur_radius: PixelValueNoPercent {
inner: PixelValue::const_px(15),
spread_radius: PixelValueNoPercent {
inner: PixelValue::const_px(2),
clip_mode: BoxShadowClipMode::Inset,
})),
CssPropertyWithConditions::simple(CssProperty::BoxShadowTop(
CssPropertyWithConditions::simple(CssProperty::BoxShadowRight(
CssPropertyWithConditions::simple(CssProperty::BoxShadowLeft(
CssPropertyWithConditions::simple(CssProperty::BorderBottomRightRadius(
StyleBorderBottomRightRadiusValue::Exact(StyleBorderBottomRightRadius {
inner: PixelValue::const_px(3),
CssPropertyWithConditions::simple(CssProperty::BorderBottomLeftRadius(
StyleBorderBottomLeftRadiusValue::Exact(StyleBorderBottomLeftRadius {
CssPropertyWithConditions::simple(CssProperty::BorderTopRightRadius(
StyleBorderTopRightRadiusValue::Exact(StyleBorderTopRightRadius {
CssPropertyWithConditions::simple(CssProperty::BorderTopLeftRadius(
StyleBorderTopLeftRadiusValue::Exact(StyleBorderTopLeftRadius {
CssPropertyWithConditions::simple(CssProperty::BorderBottomWidth(
LayoutBorderBottomWidthValue::Exact(LayoutBorderBottomWidth {
inner: PixelValue::const_px(1),
CssPropertyWithConditions::simple(CssProperty::BorderLeftWidth(
LayoutBorderLeftWidthValue::Exact(LayoutBorderLeftWidth {
CssPropertyWithConditions::simple(CssProperty::BorderRightWidth(
LayoutBorderRightWidthValue::Exact(LayoutBorderRightWidth {
CssPropertyWithConditions::simple(CssProperty::BorderTopWidth(
LayoutBorderTopWidthValue::Exact(LayoutBorderTopWidth {
CssPropertyWithConditions::simple(CssProperty::BorderBottomStyle(
StyleBorderBottomStyleValue::Exact(StyleBorderBottomStyle {
inner: BorderStyle::Solid,
CssPropertyWithConditions::simple(CssProperty::BorderLeftStyle(
StyleBorderLeftStyleValue::Exact(StyleBorderLeftStyle {
CssPropertyWithConditions::simple(CssProperty::BorderRightStyle(
StyleBorderRightStyleValue::Exact(StyleBorderRightStyle {
CssPropertyWithConditions::simple(CssProperty::BorderTopStyle(
StyleBorderTopStyleValue::Exact(StyleBorderTopStyle {
CssPropertyWithConditions::simple(CssProperty::BorderBottomColor(
StyleBorderBottomColorValue::Exact(StyleBorderBottomColor {
inner: ColorU {
r: 178,
g: 178,
b: 178,
CssPropertyWithConditions::simple(CssProperty::BorderLeftColor(
StyleBorderLeftColorValue::Exact(StyleBorderLeftColor {
CssPropertyWithConditions::simple(CssProperty::BorderRightColor(
StyleBorderRightColorValue::Exact(StyleBorderRightColor {
CssPropertyWithConditions::simple(CssProperty::BorderTopColor(
StyleBorderTopColorValue::Exact(StyleBorderTopColor {
CssPropertyWithConditions::simple(CssProperty::BackgroundContent(
StyleBackgroundContentVecValue::Exact(self.container_background.clone()),
]))
.with_ids_and_classes({
const IDS_AND_CLASSES_10874511710181900075: &[IdOrClass] = &[Class(
AzString::from_const_str("__azul-native-progress-bar-container"),
)];
IdOrClassVec::from_const_slice(IDS_AND_CLASSES_10874511710181900075)
})
.with_children(DomVec::from_vec(vec![
// .__azul-native-progress-bar-bar
// Use percentage width instead of flex-grow hack
CssPropertyWithConditions::simple(CssProperty::Width(
LayoutWidthValue::Exact(LayoutWidth::Px(
PixelValue::percent(percent_done),
g: 51,
a: 51,
inner: PixelValue::const_px(12),
StyleBorderBottomRightRadiusValue::Exact(
StyleBorderBottomRightRadius {
StyleBackgroundContentVecValue::Exact(self.bar_background.clone()),
const IDS_AND_CLASSES_16512648314570682783: &[IdOrClass] = &[Class(
AzString::from_const_str("__azul-native-progress-bar-bar"),
IdOrClassVec::from_const_slice(IDS_AND_CLASSES_16512648314570682783)
// .__azul-native-progress-bar-remaining
// Use percentage width for the remaining space
PixelValue::percent(100.0 - percent_done),
const IDS_AND_CLASSES_2492405364126620395: &[IdOrClass] = &[Class(
AzString::from_const_str("__azul-native-progress-bar-remaining"),
IdOrClassVec::from_const_slice(IDS_AND_CLASSES_2492405364126620395)