💄 Define context styles for base components
This commit is contained in:
parent
e2090b2c81
commit
c54390d3d9
5 changed files with 303 additions and 289 deletions
|
|
@ -49,7 +49,7 @@ pub(crate) fn add_base_assets(cx: &mut Context) {
|
||||||
))
|
))
|
||||||
.alter(ContextOp::AddStyleSheet(
|
.alter(ContextOp::AddStyleSheet(
|
||||||
StyleSheet::at("/base/css/buttons.css")
|
StyleSheet::at("/base/css/buttons.css")
|
||||||
.with_version("0.0.1")
|
.with_version("0.0.2")
|
||||||
.with_weight(weight),
|
.with_weight(weight),
|
||||||
));
|
));
|
||||||
}
|
}
|
||||||
|
|
@ -89,30 +89,30 @@ impl ToString for BreakPoint {
|
||||||
// *************************************************************************************************
|
// *************************************************************************************************
|
||||||
|
|
||||||
#[derive(AutoDefault)]
|
#[derive(AutoDefault)]
|
||||||
pub enum ButtonStyle {
|
pub enum StyleBase {
|
||||||
#[default]
|
#[default]
|
||||||
Default,
|
Default,
|
||||||
Info,
|
|
||||||
Success,
|
Success,
|
||||||
Warning,
|
|
||||||
Danger,
|
Danger,
|
||||||
|
Warning,
|
||||||
|
Info,
|
||||||
Light,
|
Light,
|
||||||
Dark,
|
Dark,
|
||||||
Link,
|
Link,
|
||||||
}
|
}
|
||||||
|
|
||||||
#[rustfmt::skip]
|
#[rustfmt::skip]
|
||||||
impl ToString for ButtonStyle {
|
impl ToString for StyleBase {
|
||||||
fn to_string(&self) -> String {
|
fn to_string(&self) -> String {
|
||||||
String::from(match self {
|
String::from(match self {
|
||||||
ButtonStyle::Default => "button__default",
|
StyleBase::Default => "style__default",
|
||||||
ButtonStyle::Info => "button__info",
|
StyleBase::Success => "style__success",
|
||||||
ButtonStyle::Success => "button__success",
|
StyleBase::Danger => "style__danger",
|
||||||
ButtonStyle::Warning => "button__warning",
|
StyleBase::Warning => "style__warning",
|
||||||
ButtonStyle::Danger => "button__danger",
|
StyleBase::Info => "style__info",
|
||||||
ButtonStyle::Light => "button__light",
|
StyleBase::Light => "style__light",
|
||||||
ButtonStyle::Dark => "button__dark",
|
StyleBase::Dark => "style__dark",
|
||||||
ButtonStyle::Link => "button__link",
|
StyleBase::Link => "style__link",
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -17,7 +17,7 @@ pub struct Button {
|
||||||
weight : Weight,
|
weight : Weight,
|
||||||
renderable : Renderable,
|
renderable : Renderable,
|
||||||
classes : OptionClasses,
|
classes : OptionClasses,
|
||||||
style : ButtonStyle,
|
style : StyleBase,
|
||||||
font_size : FontSize,
|
font_size : FontSize,
|
||||||
left_icon : OptionComponent<Icon>,
|
left_icon : OptionComponent<Icon>,
|
||||||
right_icon : OptionComponent<Icon>,
|
right_icon : OptionComponent<Icon>,
|
||||||
|
|
@ -44,7 +44,14 @@ impl ComponentTrait for Button {
|
||||||
}
|
}
|
||||||
|
|
||||||
fn setup_before_prepare(&mut self, _cx: &mut Context) {
|
fn setup_before_prepare(&mut self, _cx: &mut Context) {
|
||||||
self.prepend_classes([self.style().to_string(), self.font_size().to_string()].join(" "));
|
self.prepend_classes(
|
||||||
|
[
|
||||||
|
"button__tap".to_string(),
|
||||||
|
self.style().to_string(),
|
||||||
|
self.font_size().to_string(),
|
||||||
|
]
|
||||||
|
.join(" "),
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
#[rustfmt::skip]
|
#[rustfmt::skip]
|
||||||
|
|
@ -64,7 +71,7 @@ impl ComponentTrait for Button {
|
||||||
target=[target]
|
target=[target]
|
||||||
{
|
{
|
||||||
(self.left_icon().render(cx))
|
(self.left_icon().render(cx))
|
||||||
" " span { (self.html().escaped(cx.langid())) } " "
|
span { (self.html().escaped(cx.langid())) }
|
||||||
(self.right_icon().render(cx))
|
(self.right_icon().render(cx))
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
@ -97,7 +104,7 @@ impl Button {
|
||||||
}
|
}
|
||||||
|
|
||||||
#[fn_builder]
|
#[fn_builder]
|
||||||
pub fn alter_style(&mut self, style: ButtonStyle) -> &mut Self {
|
pub fn alter_style(&mut self, style: StyleBase) -> &mut Self {
|
||||||
self.style = style;
|
self.style = style;
|
||||||
self
|
self
|
||||||
}
|
}
|
||||||
|
|
@ -140,7 +147,7 @@ impl Button {
|
||||||
|
|
||||||
// Button GETTERS.
|
// Button GETTERS.
|
||||||
|
|
||||||
pub fn style(&self) -> &ButtonStyle {
|
pub fn style(&self) -> &StyleBase {
|
||||||
&self.style
|
&self.style
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -24,7 +24,7 @@ pub struct ActionButton {
|
||||||
renderable : Renderable,
|
renderable : Renderable,
|
||||||
classes : OptionClasses,
|
classes : OptionClasses,
|
||||||
button_type: ActionButtonType,
|
button_type: ActionButtonType,
|
||||||
style : ButtonStyle,
|
style : StyleBase,
|
||||||
font_size : FontSize,
|
font_size : FontSize,
|
||||||
left_icon : OptionComponent<Icon>,
|
left_icon : OptionComponent<Icon>,
|
||||||
right_icon : OptionComponent<Icon>,
|
right_icon : OptionComponent<Icon>,
|
||||||
|
|
@ -48,7 +48,14 @@ impl ComponentTrait for ActionButton {
|
||||||
}
|
}
|
||||||
|
|
||||||
fn setup_before_prepare(&mut self, _cx: &mut Context) {
|
fn setup_before_prepare(&mut self, _cx: &mut Context) {
|
||||||
self.prepend_classes([self.style().to_string(), self.font_size().to_string()].join(" "));
|
self.prepend_classes(
|
||||||
|
[
|
||||||
|
"button__tap".to_string(),
|
||||||
|
self.style().to_string(),
|
||||||
|
self.font_size().to_string(),
|
||||||
|
]
|
||||||
|
.join(" "),
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup {
|
fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup {
|
||||||
|
|
@ -64,7 +71,7 @@ impl ComponentTrait for ActionButton {
|
||||||
disabled=[self.disabled().get()]
|
disabled=[self.disabled().get()]
|
||||||
{
|
{
|
||||||
(self.left_icon().render(cx))
|
(self.left_icon().render(cx))
|
||||||
" " (self.value().escaped(cx.langid())) " "
|
span { (self.value().escaped(cx.langid())) }
|
||||||
(self.right_icon().render(cx))
|
(self.right_icon().render(cx))
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
@ -75,7 +82,7 @@ impl ActionButton {
|
||||||
pub fn submit() -> Self {
|
pub fn submit() -> Self {
|
||||||
ActionButton {
|
ActionButton {
|
||||||
button_type: ActionButtonType::Submit,
|
button_type: ActionButtonType::Submit,
|
||||||
style: ButtonStyle::Default,
|
style: StyleBase::Default,
|
||||||
value: OptionTranslated::new(L10n::l("button_submit")),
|
value: OptionTranslated::new(L10n::l("button_submit")),
|
||||||
..Default::default()
|
..Default::default()
|
||||||
}
|
}
|
||||||
|
|
@ -84,7 +91,7 @@ impl ActionButton {
|
||||||
pub fn reset() -> Self {
|
pub fn reset() -> Self {
|
||||||
ActionButton {
|
ActionButton {
|
||||||
button_type: ActionButtonType::Reset,
|
button_type: ActionButtonType::Reset,
|
||||||
style: ButtonStyle::Info,
|
style: StyleBase::Info,
|
||||||
value: OptionTranslated::new(L10n::l("button_reset")),
|
value: OptionTranslated::new(L10n::l("button_reset")),
|
||||||
..Default::default()
|
..Default::default()
|
||||||
}
|
}
|
||||||
|
|
@ -105,7 +112,7 @@ impl ActionButton {
|
||||||
}
|
}
|
||||||
|
|
||||||
#[fn_builder]
|
#[fn_builder]
|
||||||
pub fn alter_style(&mut self, style: ButtonStyle) -> &mut Self {
|
pub fn alter_style(&mut self, style: StyleBase) -> &mut Self {
|
||||||
self.style = style;
|
self.style = style;
|
||||||
self
|
self
|
||||||
}
|
}
|
||||||
|
|
@ -164,7 +171,7 @@ impl ActionButton {
|
||||||
&self.button_type
|
&self.button_type
|
||||||
}
|
}
|
||||||
|
|
||||||
pub fn style(&self) -> &ButtonStyle {
|
pub fn style(&self) -> &StyleBase {
|
||||||
&self.style
|
&self.style
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -89,7 +89,7 @@ fn hello_world() -> Wrapper {
|
||||||
)
|
)
|
||||||
.add_component(
|
.add_component(
|
||||||
Button::anchor("#welcome-page", L10n::l("welcome"))
|
Button::anchor("#welcome-page", L10n::l("welcome"))
|
||||||
.with_style(ButtonStyle::Link)
|
.with_style(StyleBase::Link)
|
||||||
.with_left_icon(Some(Icon::with("arrow-down-circle-fill")))
|
.with_left_icon(Some(Icon::with("arrow-down-circle-fill")))
|
||||||
.with_classes(ClassesOp::Add, "welcome-link")
|
.with_classes(ClassesOp::Add, "welcome-link")
|
||||||
.with_font_size(FontSize::Medium),
|
.with_font_size(FontSize::Medium),
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load diff
Loading…
Add table
Add a link
Reference in a new issue