♻️ (pagetop): Logotipo embebido y Badge en Intent
- `PageTopSvg::markup_with()` fusiona `Props` y controla la etiqueta accesible directamente en el `<svg>`. - `Image` ya no duplica accesibilidad para el logotipo y corrige el `alt` vacío en el resto de fuentes (Responsive/Thumbnail/Plain). - Sustituye `BadgeKind` y el `ColorName`/`IntoColor` de `core/theme` por un `Intent` compartido.
This commit is contained in:
parent
4ba66f5995
commit
e24b9ab9de
15 changed files with 199 additions and 187 deletions
|
|
@ -3,7 +3,7 @@
|
|||
pub mod layout;
|
||||
|
||||
mod badge;
|
||||
pub use badge::{Badge, BadgeKind};
|
||||
pub use badge::Badge;
|
||||
|
||||
mod brand;
|
||||
pub use brand::Brand;
|
||||
|
|
|
|||
|
|
@ -1,28 +1,12 @@
|
|||
use crate::prelude::*;
|
||||
|
||||
// **< BadgeKind >**********************************************************************************
|
||||
|
||||
/// Tipo de [`Badge`].
|
||||
#[derive(AutoDefault, Clone, Copy, Debug, PartialEq)]
|
||||
pub enum BadgeKind {
|
||||
Primary,
|
||||
#[default]
|
||||
Secondary,
|
||||
Success,
|
||||
Info,
|
||||
Warning,
|
||||
Danger,
|
||||
}
|
||||
|
||||
// **< Badge >**************************************************************************************
|
||||
|
||||
/// Componente para mostrar una **etiqueta corta informativa** (*badge*).
|
||||
///
|
||||
/// # Ejemplo
|
||||
///
|
||||
/// ```rust,no_run
|
||||
/// # use pagetop::prelude::*;
|
||||
/// let badge = Badge::labeled(Lc::n("Admin")).with_kind(BadgeKind::Danger);
|
||||
/// let badge = Badge::labeled(Lc::n("Admin")).with_intent(Intent::Danger);
|
||||
///
|
||||
/// // Equivalente usando el constructor directo del tipo.
|
||||
/// let badge = Badge::danger(Lc::n("Admin"));
|
||||
|
|
@ -33,9 +17,10 @@ pub struct Badge {
|
|||
props: Props,
|
||||
/// Devuelve la etiqueta del badge.
|
||||
label: Lc,
|
||||
/// Devuelve el tipo del badge.
|
||||
/// Devuelve la intención semántica del badge.
|
||||
#[getters(copy)]
|
||||
kind: BadgeKind,
|
||||
#[default(Intent::Secondary)]
|
||||
intent: Intent,
|
||||
}
|
||||
|
||||
#[async_trait]
|
||||
|
|
@ -48,16 +33,11 @@ impl Component for Badge {
|
|||
self.props.get_id()
|
||||
}
|
||||
|
||||
#[rustfmt::skip]
|
||||
fn setup(&mut self, _cx: &Context) {
|
||||
self.alter_prop(PropsOp::prepend_classes(match self.kind() {
|
||||
BadgeKind::Primary => "badge badge-primary",
|
||||
BadgeKind::Secondary => "badge badge-secondary",
|
||||
BadgeKind::Success => "badge badge-success",
|
||||
BadgeKind::Info => "badge badge-info",
|
||||
BadgeKind::Warning => "badge badge-warning",
|
||||
BadgeKind::Danger => "badge badge-danger",
|
||||
}));
|
||||
self.alter_prop(PropsOp::prepend_classes(util::join!(
|
||||
"badge badge-",
|
||||
self.intent().as_str()
|
||||
)));
|
||||
}
|
||||
|
||||
async fn prepare(&self, cx: &mut Context) -> Result<Markup, ComponentError> {
|
||||
|
|
@ -70,7 +50,7 @@ impl Component for Badge {
|
|||
}
|
||||
|
||||
impl Badge {
|
||||
/// Crea un badge predeterminado (`BadgeKind::default()`) con la etiqueta indicada.
|
||||
/// Crea un badge predeterminado (`Intent::default()`) con la etiqueta indicada.
|
||||
pub fn labeled(label: Lc) -> Self {
|
||||
Self {
|
||||
label,
|
||||
|
|
@ -82,7 +62,7 @@ impl Badge {
|
|||
pub fn primary(label: Lc) -> Self {
|
||||
Self {
|
||||
label,
|
||||
kind: BadgeKind::Primary,
|
||||
intent: Intent::Primary,
|
||||
..Default::default()
|
||||
}
|
||||
}
|
||||
|
|
@ -91,7 +71,7 @@ impl Badge {
|
|||
pub fn secondary(label: Lc) -> Self {
|
||||
Self {
|
||||
label,
|
||||
kind: BadgeKind::Secondary,
|
||||
intent: Intent::Secondary,
|
||||
..Default::default()
|
||||
}
|
||||
}
|
||||
|
|
@ -100,7 +80,7 @@ impl Badge {
|
|||
pub fn success(label: Lc) -> Self {
|
||||
Self {
|
||||
label,
|
||||
kind: BadgeKind::Success,
|
||||
intent: Intent::Success,
|
||||
..Default::default()
|
||||
}
|
||||
}
|
||||
|
|
@ -109,7 +89,7 @@ impl Badge {
|
|||
pub fn info(label: Lc) -> Self {
|
||||
Self {
|
||||
label,
|
||||
kind: BadgeKind::Info,
|
||||
intent: Intent::Info,
|
||||
..Default::default()
|
||||
}
|
||||
}
|
||||
|
|
@ -118,7 +98,7 @@ impl Badge {
|
|||
pub fn warning(label: Lc) -> Self {
|
||||
Self {
|
||||
label,
|
||||
kind: BadgeKind::Warning,
|
||||
intent: Intent::Warning,
|
||||
..Default::default()
|
||||
}
|
||||
}
|
||||
|
|
@ -127,7 +107,7 @@ impl Badge {
|
|||
pub fn danger(label: Lc) -> Self {
|
||||
Self {
|
||||
label,
|
||||
kind: BadgeKind::Danger,
|
||||
intent: Intent::Danger,
|
||||
..Default::default()
|
||||
}
|
||||
}
|
||||
|
|
@ -155,10 +135,10 @@ impl Badge {
|
|||
self
|
||||
}
|
||||
|
||||
/// Establece el tipo del badge.
|
||||
/// Establece la intención semántica del badge.
|
||||
#[builder_fn]
|
||||
pub fn with_kind(mut self, kind: BadgeKind) -> Self {
|
||||
self.kind = kind;
|
||||
pub fn with_intent(mut self, intent: Intent) -> Self {
|
||||
self.intent = intent;
|
||||
self
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,14 +2,14 @@ use crate::prelude::*;
|
|||
|
||||
/// Componente para mostrar la **identidad de marca** de un sitio o aplicación.
|
||||
///
|
||||
/// Combina una imagen, un título y un eslogan opcional, típicamente en la cabecera de la página o
|
||||
/// dentro de una barra de navegación proporcionada por un tema.
|
||||
/// Combina una imagen y un título, típicamente en la cabecera de la página o dentro de una barra de
|
||||
/// navegación.
|
||||
///
|
||||
/// - Si hay ruta ([`with_route()`]), el bloque completo actúa como enlace. Por defecto enlaza a la
|
||||
/// raíz del sitio (`/`).
|
||||
/// - Si no hay imagen ([`with_image()`]) ni título ([`with_title()`]), la marca de identidad no se
|
||||
/// renderiza.
|
||||
/// - El eslogan ([`with_slogan()`]) es opcional; por defecto no tiene contenido.
|
||||
/// - Si no tiene ningún contenido (ni imagen ni título), la marca de identidad no se renderiza.
|
||||
/// - El título predefinido es el nombre de la aplicación ([`global::SETTINGS.app.name`]). La imagen
|
||||
/// es opcional, por defecto no tiene contenido.
|
||||
///
|
||||
/// # Ejemplo
|
||||
///
|
||||
|
|
@ -17,15 +17,13 @@ use crate::prelude::*;
|
|||
/// use pagetop::prelude::*;
|
||||
///
|
||||
/// let brand = Brand::new()
|
||||
/// .with_image(Some(Image::with(image::Source::logo(PageTopSvg::Color))))
|
||||
/// .with_image(image::Source::logo(PageTopSvg::Color))
|
||||
/// .with_title(Lc::n("PageTop"))
|
||||
/// .with_route(Route::from("/"));
|
||||
/// ```
|
||||
///
|
||||
/// [`with_route()`]: Self::with_route
|
||||
/// [`with_image()`]: Self::with_image
|
||||
/// [`with_title()`]: Self::with_title
|
||||
/// [`with_slogan()`]: Self::with_slogan
|
||||
/// [`global::SETTINGS.app.name`]: crate::global::App::name
|
||||
#[derive(AutoDefault, Clone, Debug, Getters)]
|
||||
pub struct Brand {
|
||||
/// Devuelve identificador, clases CSS, atributos HTML y valores extra del componente.
|
||||
|
|
@ -35,8 +33,6 @@ pub struct Brand {
|
|||
/// Devuelve el título de la identidad de marca.
|
||||
#[default(_code = "Lc::n(&global::SETTINGS.app.name)")]
|
||||
title: Lc,
|
||||
/// Devuelve el eslogan de la marca.
|
||||
slogan: Lc,
|
||||
/// Devuelve la ruta asociada a la marca (si existe).
|
||||
#[default(_code = "Some(\"/\".into())")]
|
||||
route: Option<Route>,
|
||||
|
|
@ -59,15 +55,23 @@ impl Component for Brand {
|
|||
async fn prepare(&self, cx: &mut Context) -> Result<Markup, ComponentError> {
|
||||
let image = self.image().render(cx).await;
|
||||
let title = self.title().using(cx);
|
||||
if image.is_empty() && title.is_empty() {
|
||||
let inner_brand = html! {
|
||||
(image)
|
||||
@if !title.is_empty() {
|
||||
@if !image.is_empty() {
|
||||
(" ")
|
||||
}
|
||||
span class="brand-title" { (title) }
|
||||
}
|
||||
};
|
||||
if inner_brand.is_empty() {
|
||||
return Ok(html! {});
|
||||
}
|
||||
let slogan = self.slogan().using(cx);
|
||||
Ok(html! {
|
||||
@if let Some(route) = self.route() {
|
||||
a (self.props()) href=(route.resolve(cx)) { (image) (title) (slogan) }
|
||||
a (self.props()) href=(route.resolve(cx)) { (inner_brand) }
|
||||
} @else {
|
||||
span (self.props()) { (image) (title) (slogan) }
|
||||
span (self.props()) { (inner_brand) }
|
||||
}
|
||||
})
|
||||
}
|
||||
|
|
@ -104,13 +108,6 @@ impl Brand {
|
|||
self
|
||||
}
|
||||
|
||||
/// Define el eslogan de la marca.
|
||||
#[builder_fn]
|
||||
pub fn with_slogan(mut self, slogan: Lc) -> Self {
|
||||
self.slogan = slogan;
|
||||
self
|
||||
}
|
||||
|
||||
/// Define la ruta de destino. Si es `None`, la marca no será un enlace.
|
||||
#[builder_fn]
|
||||
pub fn with_route(mut self, route: impl Into<Option<Route>>) -> Self {
|
||||
|
|
|
|||
|
|
@ -49,6 +49,13 @@ impl Component for Image {
|
|||
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 => {}
|
||||
|
|
@ -72,18 +79,9 @@ impl Component for Image {
|
|||
async fn prepare(&self, cx: &mut Context) -> Result<Markup, ComponentError> {
|
||||
let alt_text = self.alternative().lookup(cx).unwrap_or_default();
|
||||
let source = match self.source() {
|
||||
image::Source::Logo(logo) => {
|
||||
let is_decorative = alt_text.is_empty();
|
||||
return Ok(html! {
|
||||
span
|
||||
(self.props())
|
||||
role=[(!is_decorative).then_some("img")]
|
||||
aria-label=[(!is_decorative).then_some(alt_text)]
|
||||
aria-hidden=[is_decorative.then_some("true")]
|
||||
{
|
||||
(logo.markup(cx))
|
||||
}
|
||||
});
|
||||
image::Source::Logo(svg) => {
|
||||
let label = (!alt_text.is_empty()).then_some(alt_text.as_str());
|
||||
return Ok(svg.markup_with(self.props(), label));
|
||||
}
|
||||
image::Source::Responsive(source) => Some(source),
|
||||
image::Source::Thumbnail(source) => Some(source),
|
||||
|
|
@ -144,3 +142,19 @@ impl Image {
|
|||
self
|
||||
}
|
||||
}
|
||||
|
||||
impl From<image::Source> for Image {
|
||||
/// Igual que [`Image::with()`].
|
||||
fn from(source: image::Source) -> Self {
|
||||
Self::with(source)
|
||||
}
|
||||
}
|
||||
|
||||
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.
|
||||
fn from(source: image::Source) -> Self {
|
||||
Some(Image::with(source))
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -148,7 +148,7 @@ impl Component for Intro {
|
|||
}
|
||||
aside class="intro-header-img" aria-hidden="true" {
|
||||
div class="intro-header-mascot" {
|
||||
(PageTopSvg::Color.markup(cx))
|
||||
(PageTopSvg::Color.markup())
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -201,7 +201,7 @@ impl Component for Intro {
|
|||
div class="intro-footer" {
|
||||
section class="intro-footer-body" {
|
||||
div class="intro-footer-logo" {
|
||||
(PageTopSvg::LineLight.markup(cx))
|
||||
(PageTopSvg::LineLight.markup())
|
||||
}
|
||||
div class="intro-footer-links" {
|
||||
a href="https://crates.io/crates/pagetop" target="_blank" rel="noopener noreferrer" { ("Crates.io") }
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue