♻️ (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
|
|
@ -1,7 +1,5 @@
|
|||
use crate::AutoDefault;
|
||||
use crate::core::component::Context;
|
||||
use crate::html::{Markup, html};
|
||||
use crate::locale::Lc;
|
||||
use crate::html::{Markup, Props, html};
|
||||
|
||||
/// Representación SVG del **logotipo de PageTop** para incrustar en HTML.
|
||||
///
|
||||
|
|
@ -9,19 +7,19 @@ use crate::locale::Lc;
|
|||
///
|
||||
/// ```rust,no_run
|
||||
/// # use pagetop::prelude::*;
|
||||
/// fn render_logo(cx: &mut Context) -> Markup {
|
||||
/// fn render_logo() -> Markup {
|
||||
/// html! {
|
||||
/// div class="logo_color" {
|
||||
/// (PageTopSvg::Color.markup(cx))
|
||||
/// (PageTopSvg::Color.markup())
|
||||
/// }
|
||||
/// div class="line_dark" {
|
||||
/// (PageTopSvg::LineDark.markup(cx))
|
||||
/// (PageTopSvg::LineDark.markup())
|
||||
/// }
|
||||
/// div class="line_light" {
|
||||
/// (PageTopSvg::LineLight.markup(cx))
|
||||
/// (PageTopSvg::LineLight.markup())
|
||||
/// }
|
||||
/// div class="line_red" {
|
||||
/// (PageTopSvg::LineRGB(255, 0, 0).markup(cx))
|
||||
/// (PageTopSvg::LineRGB(255, 0, 0).markup())
|
||||
/// }
|
||||
/// }
|
||||
/// };
|
||||
|
|
@ -42,29 +40,60 @@ pub enum PageTopSvg {
|
|||
|
||||
impl PageTopSvg {
|
||||
/// Devuelve el marcado SVG del logotipo según la variante elegida.
|
||||
pub fn markup(&self, cx: &Context) -> Markup {
|
||||
let path_fills = match self {
|
||||
Self::Color => self.logo_color(),
|
||||
Self::LineDark => self.logo_line(10, 11, 9),
|
||||
Self::LineLight => self.logo_line(255, 255, 255),
|
||||
Self::LineRGB(r, g, b) => self.logo_line(*r, *g, *b),
|
||||
};
|
||||
pub fn markup(&self) -> Markup {
|
||||
html! {
|
||||
svg
|
||||
viewBox="0 0 1614 1614"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
role="img"
|
||||
aria-label=[Lc::l("pagetop_logo").lookup(cx)]
|
||||
aria-label="PageTop"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
focusable="false"
|
||||
{
|
||||
(path_fills)
|
||||
(self.path_fills())
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/// Igual que [`markup()`], pero fusiona [`Props`] (identificador, clases, estilo, atributos)
|
||||
/// directamente en el `<svg>` y deja la etiqueta libre para quien llama. Con `Some(texto)` se
|
||||
/// muestra como imagen informativa (`role="img"` + `aria-label`), y con `None` como imagen
|
||||
/// puramente decorativa (`aria-hidden="true"`, sin `role` ni `aria-label`).
|
||||
///
|
||||
/// Pensado para poner el logotipo con clases, estilo y accesibilidad propios, sin envolverlo en
|
||||
/// un elemento aparte; como hace el componente [`Image`] con [`image::Source::Logo`].
|
||||
///
|
||||
/// [`markup()`]: Self::markup
|
||||
/// [`Image`]: crate::base::component::Image
|
||||
/// [`image::Source::Logo`]: crate::base::component::image::Source::Logo
|
||||
pub fn markup_with(&self, props: &Props, label: Option<&str>) -> Markup {
|
||||
html! {
|
||||
svg
|
||||
viewBox="0 0 1614 1614"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
role=[label.is_some().then_some("img")]
|
||||
aria-label=[label]
|
||||
aria-hidden=[label.is_none().then_some("true")]
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
focusable="false"
|
||||
(props)
|
||||
{
|
||||
(self.path_fills())
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// **< PageTopSvg HELPERS >*********************************************************************
|
||||
|
||||
fn path_fills(&self) -> Markup {
|
||||
match self {
|
||||
Self::Color => self.logo_color(),
|
||||
Self::LineDark => self.logo_line(10, 11, 9),
|
||||
Self::LineLight => self.logo_line(255, 255, 255),
|
||||
Self::LineRGB(r, g, b) => self.logo_line(*r, *g, *b),
|
||||
}
|
||||
}
|
||||
|
||||
fn logo_color(&self) -> Markup {
|
||||
html! {
|
||||
path fill="rgb(255,184,75)" d="M 633,61 L 633,61 C 579,61 527,75 480,102 433,129 395,167 368,214 341,261 327,313 327,367 L 327,1244 327,1245 C 327,1299 341,1351 368,1398 395,1445 433,1483 480,1510 527,1537 579,1551 633,1551 L 982,1550 982,1551 C 1036,1551 1088,1537 1135,1510 1182,1483 1220,1445 1247,1398 1274,1351 1288,1299 1288,1245 L 1288,367 1288,367 1288,367 C 1288,313 1274,261 1247,214 1220,167 1182,129 1135,102 1088,75 1036,61 982,61 L 633,61 Z" {}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue