diff --git a/ui-demo/lang/en b/ui-demo/lang/en index c52f716a3..60344e486 100644 --- a/ui-demo/lang/en +++ b/ui-demo/lang/en @@ -296,6 +296,8 @@ index_l_days_plain=days index_badge_clock=Scheduled index_badge_tip=With a tooltip index_badge_tip_text=Badges take a title option, shown by the browser on hover +index_chip_cached=Cached +index_chip_download=Download on creation index_tip_text=Hover this text index_tip=Any HTML can carry the theme tooltip that the help bubble uses index_e_dl=Description list diff --git a/ui-demo/ui-demo-pages.pl b/ui-demo/ui-demo-pages.pl index 0d54899d6..33a863ad2 100644 --- a/ui-demo/ui-demo-pages.pl +++ b/ui-demo/ui-demo-pages.pl @@ -373,6 +373,12 @@ $rv .= ui_grid([ 'title' => $text{'index_badge_tip_text'} }), ui_chip('journal'), ui_chip('ipv6'), + # Chips can carry a state dot for a summary line + # that reads as facts rather than alerts + ui_chip($text{'index_chip_cached'}, + { 'state' => 'success' }), + ui_chip($text{'index_chip_download'}, + { 'state' => 'warning' }), ]), # The small badge, which does not outweigh the # text beside it, and the rounded one. Only diff --git a/ui-lib.pl b/ui-lib.pl index ff948b94d..95e86f1fe 100755 --- a/ui-lib.pl +++ b/ui-lib.pl @@ -5139,7 +5139,24 @@ return &ui_page_assets().&ui_tag($tag, =head2 ui_chip(text, [&opts]) Returns HTML for a small muted chip, such as a category or source label -next to a list entry. +next to a list entry, or one fact in a summary line. Options are : + +=item state - Shows a colored dot before the text : success, warning, +danger, info or neutral, as for ui_badge. The chip itself stays muted, +so a row of chips reads as one line rather than a row of alerts. + +=item icon - Icon name shown before the text instead of a dot. + +=item title - Tooltip text for the chip. + +=item id - HTML id for the chip. + +=item attrs - Hash reference of additional attributes, such as data-* +values for a script that updates or hides the chip. The text sits in a +span with the ui_chip_text class, so a script can replace it without +touching the dot. + +=item class - Additional CSS classes. =cut sub ui_chip @@ -5147,8 +5164,19 @@ sub ui_chip return &theme_ui_chip(@_) if (defined(&theme_ui_chip)); my ($label, $opts) = @_; $opts ||= {}; -return &ui_tag('span', &html_escape($label), - { 'class' => &_ui_class('ui_chip', $opts->{'class'}) }); +my $icon = ""; +if ($opts->{'state'}) { + $icon = &ui_tag('span', &ui_svg_icon('dot', { 'size' => 12 }), + { 'class' => 'ui_chip_dot ui_fg_'.&_ui_state($opts->{'state'}) }); + } +elsif ($opts->{'icon'}) { + $icon = &ui_svg_icon($opts->{'icon'}, { 'size' => 12 }); + } +return &ui_tag('span', + $icon.&ui_tag('span', &html_escape($label), { 'class' => 'ui_chip_text' }), + &_ui_attrs({ %{$opts->{'attrs'} || {}}, + 'class' => &_ui_class('ui_chip', $opts->{'class'}), + 'id' => $opts->{'id'}, 'title' => $opts->{'title'} })); } =head2 ui_list(&items, [&opts]) diff --git a/unauthenticated/css/ui-lib.css b/unauthenticated/css/ui-lib.css index bef858d04..2b08c46ba 100644 --- a/unauthenticated/css/ui-lib.css +++ b/unauthenticated/css/ui-lib.css @@ -654,6 +654,7 @@ a.ui_stat:hover .ui_stat_value { color: var(--ui-accent); } .ui_chip { display: inline-flex; align-items: center; + gap: 5px; padding: 1px 8px; background: var(--ui-neutral-soft); border: 1px solid var(--ui-border); @@ -663,6 +664,8 @@ a.ui_stat:hover .ui_stat_value { color: var(--ui-accent); } vertical-align: middle; white-space: nowrap; } +.ui_chip_dot { display: inline-flex; flex: none; } +.ui_chip .ui_svg_icon { flex: none; } /* ---- Lists ---- */