manuelcillero/pagetop
manuelcillero/pagetop
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

🚧 Working on theming: anchor and icon font sizes

Browse source
This commit is contained in:
Manuel Cillero 2023-11-01 21:16:29 +01:00
parent a6b6130f4f
commit 556a160c16
6 changed files with 216 additions and 111 deletions
Download patch file Download diff file Expand all files Collapse all files

94
pagetop-bootsier/src/lib.rs
View file

@ -81,18 +81,54 @@ impl ThemeTrait for Bootsier {
))
.alter_context(ContextOp::AddBaseAssets)
.alter_context(ContextOp::AddStyleSheet(
StyleSheet::at("/bootsier/css/styles.css")
.with_version("0.0.1"),
StyleSheet::at("/bootsier/css/styles.css").with_version("0.0.1"),
));
}
}
#[rustfmt::skip]
fn before_prepare_component(
&self,
component: &mut dyn ComponentTrait,
_cx: &mut Context,
) {
fn before_prepare_component(&self, component: &mut dyn ComponentTrait, _cx: &mut Context) {
match component.handle() {
COMPONENT_BASE_ICON => {
let i = component_as_mut::<Icon>(component);
match i.font_size() {
FontSize::ExtraLarge => {
i.alter_classes(ClassesOp::Replace(i.font_size().to_string()), "fs-1");
}
FontSize::XxLarge => {
i.alter_classes(ClassesOp::Replace(i.font_size().to_string()), "fs-2");
}
FontSize::XLarge => {
i.alter_classes(ClassesOp::Replace(i.font_size().to_string()), "fs-3");
}
FontSize::Large => {
i.alter_classes(ClassesOp::Replace(i.font_size().to_string()), "fs-4");
}
FontSize::Medium => {
i.alter_classes(ClassesOp::Replace(i.font_size().to_string()), "fs-5");
}
_ => {}
};
}
COMPONENT_BASE_ANCHOR => {
let a = component_as_mut::<Anchor>(component);
match a.font_size() {
FontSize::ExtraLarge => {
a.alter_classes(ClassesOp::Replace(a.font_size().to_string()), "fs-1");
}
FontSize::XxLarge => {
a.alter_classes(ClassesOp::Replace(a.font_size().to_string()), "fs-2");
}
FontSize::XLarge => {
a.alter_classes(ClassesOp::Replace(a.font_size().to_string()), "fs-3");
}
FontSize::Large => {
a.alter_classes(ClassesOp::Replace(a.font_size().to_string()), "fs-4");
}
FontSize::Medium => {
a.alter_classes(ClassesOp::Replace(a.font_size().to_string()), "fs-5");
}
_ => {}
};
}
COMPONENT_BASE_HEADING => {
let h = component_as_mut::<Heading>(component);
let original = h.display().to_string();
@ -100,28 +136,34 @@ impl ThemeTrait for Bootsier {
ClassesOp::SetDefault,
match h.display() {
HeadingDisplay::ExtraLarge => "display-1",
HeadingDisplay::XxLarge => "display-2",
HeadingDisplay::XLarge => "display-3",
HeadingDisplay::Large => "display-4",
HeadingDisplay::Medium => "display-5",
_ => original.as_str(),
HeadingDisplay::XxLarge => "display-2",
HeadingDisplay::XLarge => "display-3",
HeadingDisplay::Large => "display-4",
HeadingDisplay::Medium => "display-5",
_ => original.as_str(),
},
);
}
COMPONENT_BASE_PARAGRAPH => {
let p = component_as_mut::<Paragraph>(component);
let original = p.font_size().to_string();
p.alter_classes(
ClassesOp::SetDefault,
match p.font_size() {
FontSize::ExtraLarge => "fs-1",
FontSize::XxLarge => "fs-2",
FontSize::XLarge => "fs-3",
FontSize::Large => "fs-4",
FontSize::Medium => "fs-5",
_ => original.as_str(),
},
);
match p.font_size() {
FontSize::ExtraLarge => {
p.alter_classes(ClassesOp::Replace(p.font_size().to_string()), "fs-1");
}
FontSize::XxLarge => {
p.alter_classes(ClassesOp::Replace(p.font_size().to_string()), "fs-2");
}
FontSize::XLarge => {
p.alter_classes(ClassesOp::Replace(p.font_size().to_string()), "fs-3");
}
FontSize::Large => {
p.alter_classes(ClassesOp::Replace(p.font_size().to_string()), "fs-4");
}
FontSize::Medium => {
p.alter_classes(ClassesOp::Replace(p.font_size().to_string()), "fs-5");
}
_ => {}
};
}
_ => {}
}

112
pagetop-bulmix/src/lib.rs
View file

@ -31,64 +31,100 @@ impl ThemeTrait for Bulmix {
.alter_context(ContextOp::AddBaseAssets);
}
#[rustfmt::skip]
fn before_prepare_component(
&self,
component: &mut dyn ComponentTrait,
_cx: &mut Context,
) {
fn before_prepare_component(&self, component: &mut dyn ComponentTrait, _cx: &mut Context) {
match component.handle() {
COMPONENT_BASE_ICON => {
let i = component_as_mut::<Icon>(component);
match i.font_size() {
FontSize::ExtraLarge => {
i.alter_classes(ClassesOp::Replace(i.font_size().to_string()), "is-size-1");
}
FontSize::XxLarge => {
i.alter_classes(ClassesOp::Replace(i.font_size().to_string()), "is-size-2");
}
FontSize::XLarge => {
i.alter_classes(ClassesOp::Replace(i.font_size().to_string()), "is-size-3");
}
FontSize::Large => {
i.alter_classes(ClassesOp::Replace(i.font_size().to_string()), "is-size-4");
}
FontSize::Medium => {
i.alter_classes(ClassesOp::Replace(i.font_size().to_string()), "is-size-5");
}
_ => {}
};
}
COMPONENT_BASE_ANCHOR => {
let a = component_as_mut::<Anchor>(component);
a.alter_classes(
ClassesOp::SetDefault,
match a.anchor_type() {
AnchorType::Button => "button is-primary",
_ => "",
},
);
match a.font_size() {
FontSize::ExtraLarge => {
a.alter_classes(ClassesOp::Replace(a.font_size().to_string()), "is-size-1");
}
FontSize::XxLarge => {
a.alter_classes(ClassesOp::Replace(a.font_size().to_string()), "is-size-2");
}
FontSize::XLarge => {
a.alter_classes(ClassesOp::Replace(a.font_size().to_string()), "is-size-3");
}
FontSize::Large => {
a.alter_classes(ClassesOp::Replace(a.font_size().to_string()), "is-size-4");
}
FontSize::Medium => {
a.alter_classes(ClassesOp::Replace(a.font_size().to_string()), "is-size-5");
}
_ => {}
};
match a.anchor_type() {
AnchorType::Button => {
a.alter_classes(
ClassesOp::Replace(a.anchor_type().to_string()),
"button is-primary",
);
}
_ => {}
};
}
COMPONENT_BASE_HEADING => {
let h = component_as_mut::<Heading>(component);
match h.display() {
HeadingDisplay::Subtitle => h.alter_classes(
ClassesOp::SetDefault, "subtitle"
),
_ => h.alter_classes(
ClassesOp::AddDefault, "title"
),
HeadingDisplay::Subtitle => {
h.alter_classes(ClassesOp::Replace(h.display().to_string()), "subtitle")
}
_ => h.alter_classes(ClassesOp::AddDefault, "title"),
};
}
COMPONENT_BASE_PARAGRAPH => {
let p = component_as_mut::<Paragraph>(component);
let original = concat_string!("block ", p.font_size().to_string());
p.alter_classes(
ClassesOp::SetDefault,
match p.font_size() {
FontSize::ExtraLarge => "block is-size-1",
FontSize::XxLarge => "block is-size-2",
FontSize::XLarge => "block is-size-3",
FontSize::Large => "block is-size-4",
FontSize::Medium => "block is-size-5",
_ => original.as_str(),
},
);
p.alter_classes(ClassesOp::AddDefault, "block");
match p.font_size() {
FontSize::ExtraLarge => {
p.alter_classes(ClassesOp::Replace(p.font_size().to_string()), "is-size-1");
}
FontSize::XxLarge => {
p.alter_classes(ClassesOp::Replace(p.font_size().to_string()), "is-size-2");
}
FontSize::XLarge => {
p.alter_classes(ClassesOp::Replace(p.font_size().to_string()), "is-size-3");
}
FontSize::Large => {
p.alter_classes(ClassesOp::Replace(p.font_size().to_string()), "is-size-4");
}
FontSize::Medium => {
p.alter_classes(ClassesOp::Replace(p.font_size().to_string()), "is-size-5");
}
_ => {}
};
}
_ => {}
}
}
fn render_component(
&self,
component: &dyn ComponentTrait,
cx: &mut Context,
) -> Option<Markup> {
fn render_component(&self, component: &dyn ComponentTrait, cx: &mut Context) -> Option<Markup> {
match component.handle() {
COMPONENT_BASE_ICON => {
let icon = component_as_ref::<Icon>(component);
if icon.icon_name().is_empty() {
return None
return None;
};
cx.set_param::<bool>(PARAM_BASE_INCLUDE_ICONS, true);
Some(html! {

6
pagetop-homedemo/src/lib.rs
View file

@ -80,12 +80,14 @@ fn hello_world() -> Wrapper {
)
.with_target(AnchorTarget::Blank)
.with_left_icon(Icon::with("git"))
.with_classes(ClassesOp::Add, "code-link"),
.with_classes(ClassesOp::Add, "code-link")
.with_font_size(FontSize::Large),
)
.add_component(
Anchor::link("#welcome", L10n::t("hello_welcome", &LOCALES_HOMEDEMO))
.with_left_icon(Icon::with("arrow-down-circle-fill"))
.with_classes(ClassesOp::Add, "welcome-link"),
.with_classes(ClassesOp::Add, "welcome-link")
.with_font_size(FontSize::Large),
),
)
.add_item(

45
pagetop/src/base/component/anchor.rs
View file

@ -10,6 +10,16 @@ pub enum AnchorType {
Location,
}
#[rustfmt::skip]
impl ToString for AnchorType {
fn to_string(&self) -> String {
match self {
AnchorType::Button => "btn btn-primary".to_string(),
_ => "".to_string(),
}
}
}
#[derive(Default)]
pub enum AnchorTarget {
#[default]
@ -29,13 +39,13 @@ pub struct Anchor {
renderable : Renderable,
id : OptionId,
classes : OptionClasses,
font_size : FontSize,
anchor_type: AnchorType,
href : OptionString,
html : OptionTranslated,
left_icon : AnchorIcon,
right_icon : AnchorIcon,
target : AnchorTarget,
template : String,
}
impl ComponentTrait for Anchor {
@ -125,14 +135,21 @@ impl Anchor {
self
}
#[fn_builder]
pub fn alter_font_size(&mut self, font_size: FontSize) -> &mut Self {
self.classes.alter_value(
ClassesOp::Replace(self.font_size.to_string()),
font_size.to_string(),
);
self.font_size = font_size;
self
}
#[fn_builder]
pub fn alter_type(&mut self, anchor_type: AnchorType) -> &mut Self {
self.alter_classes(
ClassesOp::SetDefault,
match anchor_type {
AnchorType::Button => "btn btn-primary",
_ => "",
},
self.classes.alter_value(
ClassesOp::Replace(self.anchor_type.to_string()),
anchor_type.to_string(),
);
self.anchor_type = anchor_type;
self
@ -168,18 +185,16 @@ impl Anchor {
self
}
#[fn_builder]
pub fn alter_template(&mut self, template: &str) -> &mut Self {
self.template = template.to_owned();
self
}
// Anchor GETTERS.
pub fn classes(&self) -> &OptionClasses {
&self.classes
}
pub fn font_size(&self) -> &FontSize {
&self.font_size
}
pub fn anchor_type(&self) -> &AnchorType {
&self.anchor_type
}
@ -203,8 +218,4 @@ impl Anchor {
pub fn target(&self) -> &AnchorTarget {
&self.target
}
pub fn template(&self) -> &str {
self.template.as_str()
}
}

39
pagetop/src/base/component/icon.rs
View file

@ -7,8 +7,9 @@ new_handle!(COMPONENT_BASE_ICON);
pub struct Icon {
weight : Weight,
renderable: Renderable,
icon_name : String,
classes : OptionClasses,
font_size : FontSize,
icon_name : String,
}
impl ComponentTrait for Icon {
@ -30,7 +31,7 @@ impl ComponentTrait for Icon {
fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup {
if self.icon_name().is_empty() {
return PrepareMarkup::None
return PrepareMarkup::None;
}
cx.set_param::<bool>(PARAM_BASE_INCLUDE_ICONS, true);
PrepareMarkup::With(html! { i class=[self.classes().get()] {} })
@ -56,6 +57,22 @@ impl Icon {
self
}
#[fn_builder]
pub fn alter_classes(&mut self, op: ClassesOp, classes: impl Into<String>) -> &mut Self {
self.classes.alter_value(op, classes);
self
}
#[fn_builder]
pub fn alter_font_size(&mut self, font_size: FontSize) -> &mut Self {
self.classes.alter_value(
ClassesOp::Replace(self.font_size.to_string()),
font_size.to_string(),
);
self.font_size = font_size;
self
}
#[fn_builder]
pub fn alter_icon_name(&mut self, name: &str) -> &mut Self {
self.alter_classes(ClassesOp::SetDefault, concat_string!("bi-", name));
@ -63,19 +80,17 @@ impl Icon {
self
}
#[fn_builder]
pub fn alter_classes(&mut self, op: ClassesOp, classes: impl Into<String>) -> &mut Self {
self.classes.alter_value(op, classes);
self
}
// Icon GETTERS.
pub fn icon_name(&self) -> &str {
self.icon_name.as_str()
}
pub fn classes(&self) -> &OptionClasses {
&self.classes
}
pub fn font_size(&self) -> &FontSize {
&self.font_size
}
pub fn icon_name(&self) -> &str {
self.icon_name.as_str()
}
}

31
pagetop/src/base/component/paragraph.rs
View file

@ -9,8 +9,8 @@ pub struct Paragraph {
renderable: Renderable,
id : OptionId,
classes : OptionClasses,
stuff : ArcComponents,
font_size : FontSize,
stuff : ArcComponents,
}
impl ComponentTrait for Paragraph {
@ -81,6 +81,16 @@ impl Paragraph {
self
}
#[fn_builder]
pub fn alter_font_size(&mut self, font_size: FontSize) -> &mut Self {
self.classes.alter_value(
ClassesOp::Replace(self.font_size.to_string()),
font_size.to_string(),
);
self.font_size = font_size;
self
}
pub fn add_component(mut self, component: impl ComponentTrait) -> Self {
self.stuff.alter(ArcOp::Add(ArcComponent::with(component)));
self
@ -98,28 +108,17 @@ impl Paragraph {
self
}
#[rustfmt::skip]
#[fn_builder]
pub fn alter_font_size(&mut self, font_size: FontSize) -> &mut Self {
self.classes.alter_value(
ClassesOp::Replace(self.font_size.to_string()),
font_size.to_string(),
);
self.font_size = font_size;
self
}
// Paragraph GETTERS.
pub fn classes(&self) -> &OptionClasses {
&self.classes
}
pub fn components(&self) -> &ArcComponents {
&self.stuff
}
pub fn font_size(&self) -> &FontSize {
&self.font_size
}
pub fn components(&self) -> &ArcComponents {
&self.stuff
}
}