✨ (pagetop): Añade PageTopSvg::Tile y ajusta Image
This commit is contained in:
parent
16eec316c4
commit
f8f023b513
5 changed files with 263 additions and 18 deletions
|
|
@ -44,18 +44,11 @@ impl Component for Image {
|
|||
|
||||
fn setup(&mut self, _cx: &mut Context) {
|
||||
self.alter_prop(PropsOp::prepend_classes(match self.source() {
|
||||
image::Source::Logo(_) => "image image-fluid",
|
||||
image::Source::Responsive(_) => "image image-fluid",
|
||||
image::Source::Logo(_) | image::Source::Responsive(_) => "image image-fluid",
|
||||
image::Source::Thumbnail(_) => "image image-thumbnail",
|
||||
image::Source::Plain(_) => "image",
|
||||
}));
|
||||
|
||||
// Se asigna un tamaño predefinido para el logotipo que `with_size()` puede sobrescribir.
|
||||
if matches!(self.source(), image::Source::Logo(_)) {
|
||||
self.alter_prop(PropsOp::add_style("width", "1.25em"));
|
||||
self.alter_prop(PropsOp::add_style("height", "1.25em"));
|
||||
}
|
||||
|
||||
// El tamaño se aplica como declaraciones `style` individuales sobre `Props`.
|
||||
match *self.size() {
|
||||
image::Size::Auto => {}
|
||||
|
|
@ -74,6 +67,15 @@ impl Component for Image {
|
|||
self.alter_prop(PropsOp::add_style("height", v.to_string()));
|
||||
}
|
||||
}
|
||||
|
||||
// El logotipo es cuadrado. Sin `width`/`height` toma un tamaño predefinido.
|
||||
if matches!(self.source(), image::Source::Logo(_))
|
||||
&& self.props().get_style("width").is_none()
|
||||
&& self.props().get_style("height").is_none()
|
||||
{
|
||||
self.alter_prop(PropsOp::add_style("width", "1.25rem"));
|
||||
self.alter_prop(PropsOp::add_style("height", "1.25rem"));
|
||||
}
|
||||
}
|
||||
|
||||
async fn prepare(&self, cx: &mut Context) -> Result<Markup, ComponentError> {
|
||||
|
|
@ -81,9 +83,9 @@ impl Component for Image {
|
|||
image::Source::Logo(svg) => {
|
||||
return Ok(svg.markup_with(cx, self.props(), self.alternative().clone()));
|
||||
}
|
||||
image::Source::Responsive(source) => Some(source),
|
||||
image::Source::Thumbnail(source) => Some(source),
|
||||
image::Source::Plain(source) => Some(source),
|
||||
image::Source::Responsive(source)
|
||||
| image::Source::Thumbnail(source)
|
||||
| image::Source::Plain(source) => Some(source),
|
||||
};
|
||||
Ok(html! {
|
||||
img
|
||||
|
|
@ -121,7 +123,7 @@ impl Image {
|
|||
self
|
||||
}
|
||||
|
||||
/// Establece el origen de la imagen, influyendo en su disposición en el contenido.
|
||||
/// Establece el origen de la imagen.
|
||||
pub fn with_source(mut self, source: image::Source) -> Self {
|
||||
self.source = source;
|
||||
self
|
||||
|
|
@ -146,8 +148,8 @@ impl From<image::Source> for Image {
|
|||
|
||||
impl From<image::Source> for Option<Image> {
|
||||
/// Permite pasar un [`image::Source`] directamente donde se espera `impl Into<Option<Image>>`
|
||||
/// (p. ej. [`Brand::with_image()`](super::super::Brand::with_image)), sin construir la
|
||||
/// [`Image`] a mano.
|
||||
/// (p. ej. [`Brand::with_image()`](crate::base::component::Brand::with_image)), sin construir
|
||||
/// la [`Image`] a mano.
|
||||
fn from(source: image::Source) -> Self {
|
||||
Some(Image::with(source))
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,9 @@ use crate::prelude::*;
|
|||
pub enum Size {
|
||||
/// Ajuste automático por defecto.
|
||||
///
|
||||
/// La imagen usa su tamaño natural o se ajusta al contenedor donde se publica.
|
||||
/// La imagen usa su tamaño natural o se ajusta al contenedor donde se publica. El logotipo
|
||||
/// ([`Source::Logo`]) toma un tamaño predefinido de `1.25rem` de ancho y alto, salvo que se
|
||||
/// haya fijado alguna de sus dimensiones.
|
||||
#[default]
|
||||
Auto,
|
||||
/// Establece explícitamente el **ancho y alto** de la imagen.
|
||||
|
|
@ -40,6 +42,10 @@ pub enum Size {
|
|||
#[derive(AutoDefault, Clone, Debug, PartialEq)]
|
||||
pub enum Source {
|
||||
/// Imagen con el logotipo de PageTop.
|
||||
///
|
||||
/// Se renderiza como un `<svg>` en línea, siempre cuadrado. Sin dimensiones explícitas
|
||||
/// ([`Size::Auto`]) mide `1.25rem` de ancho y alto; si se fija sólo una, la otra se ajusta
|
||||
/// proporcionalmente.
|
||||
#[default]
|
||||
Logo(PageTopSvg),
|
||||
/// Imagen que se adapta automáticamente a su contenedor.
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue