Ateração da autura dos icones
This commit is contained in:
@@ -57,9 +57,20 @@ module ApplicationHelper
|
||||
# icone(:sucesso, cor: "text-green-400") # status verde
|
||||
# icone(:fechar, cor: nil) # herda a cor do elemento pai
|
||||
# icone(:dashboard, titulo: "Painel") # acessível (vira role="img")
|
||||
def icone(nome, cor: "text-brand-laranja", tamanho: "w-[1.05em] h-[1.05em]", classe: nil, titulo: nil)
|
||||
# icone(:fechar, espaco: false) # sem margem (ícone sozinho/centralizado)
|
||||
#
|
||||
# ATENÇÃO — contraste: em fundo LARANJA (bg-orange-*, bg-[#f97316]) o laranja
|
||||
# padrão fica invisível. Nesses casos passe `cor: nil` (herda a cor do texto do
|
||||
# container) ou `cor: "text-black"`.
|
||||
#
|
||||
# `espaco:` acrescenta uma margem à direita para o ícone não colar no texto.
|
||||
# Desligue (`espaco: false`) quando o ícone estiver sozinho ou centralizado —
|
||||
# senão a margem o tira do eixo — ou quando o container já tiver `gap-*`.
|
||||
def icone(nome, cor: "text-brand-laranja", tamanho: "w-[1.25em] h-[1.25em]",
|
||||
classe: nil, titulo: nil, espaco: true)
|
||||
simbolo = ICONES.fetch(nome.to_sym) { nome.to_s }
|
||||
css = ["inline-block align-[-0.125em] shrink-0", tamanho, cor, classe].compact.join(" ")
|
||||
css = ["inline-block align-[-0.125em] shrink-0", ("mr-1" if espaco),
|
||||
tamanho, cor, classe].compact.join(" ")
|
||||
|
||||
tag.svg(class: css, fill: "currentColor", role: (titulo ? "img" : nil),
|
||||
aria: { hidden: (titulo ? nil : true), label: titulo }) do
|
||||
@@ -75,8 +86,9 @@ module ApplicationHelper
|
||||
# Atenção: NÃO serve para `f.submit` nem `button_to` sem bloco — ambos geram
|
||||
# <input type="submit">, que não aceita HTML dentro. Nesses casos use
|
||||
# `button_tag`/`button_to ... do`.
|
||||
def rotulo(nome, texto, cor: "text-brand-laranja", tamanho: "w-4 h-4")
|
||||
safe_join([icone(nome, cor: cor, tamanho: tamanho), texto], " ")
|
||||
def rotulo(nome, texto, cor: "text-brand-laranja", tamanho: "w-5 h-5")
|
||||
# O espaçamento vem do `mr-1` do próprio ícone (ver `icone`).
|
||||
safe_join([icone(nome, cor: cor, tamanho: tamanho), texto])
|
||||
end
|
||||
|
||||
# Opções [label, valor] para o select de perfil de usuário (form de usuário)
|
||||
@@ -96,7 +108,7 @@ module ApplicationHelper
|
||||
|
||||
conteudo = if icon
|
||||
safe_join([icone(icon, cor: (active ? "text-black" : "text-brand-laranja"),
|
||||
tamanho: "w-4 h-4"), label])
|
||||
tamanho: "w-5 h-5", espaco: false), label])
|
||||
else
|
||||
label
|
||||
end
|
||||
@@ -135,7 +147,7 @@ module ApplicationHelper
|
||||
|
||||
def badge_com_icone(cfg)
|
||||
tag.span class: "inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-bold #{cfg[:cor]}" do
|
||||
safe_join([icone(cfg[:icone], cor: nil, tamanho: "w-3.5 h-3.5"), cfg[:label]])
|
||||
safe_join([icone(cfg[:icone], cor: nil, tamanho: "w-4 h-4", espaco: false), cfg[:label]])
|
||||
end
|
||||
end
|
||||
|
||||
|
||||
Reference in New Issue
Block a user