Animate priority badge when priority changes ✨
Mantenedores costumam responder em até 1 dia
Ninguém assumiu esta issue ainda.
Avaliação
- Dificuldade
- 1/5
- Tempo estimado
- 1-3 horas
- Facilidade para iniciantes
- 82/100
- Tipo de issue
- Funcionalidade
- Clareza
- Claramente especificada
- Status de atividade
- Ativa
- Stack de tecnologia
- javascript, react, tailwindcss
- Domínio
- frontend
Direção de pesquisa
Comece em client/src/components/Board/TaskCard.jsx, no span que renderiza task.priority e sua string de classes. A issue traz um trecho com useState/useRef/useEffect para adicionar ao mesmo componente, e esse trecho é o ponto de partida, não uma correção pronta. Está concluído quando o selo aumenta de escala e mostra um anel por cerca de 600 ms ao mudar task.priority, sem piscar na primeira renderização. Verifique o comportamento alterando a prioridade de uma tarefa no quadro em execução.
Escrita pelo modelo de indexação a partir do texto da issue.
Descrição
Animate priority badge when priority changes ✨
File: client/src/components/Board/TaskCard.jsx
Priority badge just instantly changes 💀
No visual feedback when it updates fr!!
Fix:
const [flash, setFlash] = useState(false)
const prevPriority = useRef(task.priority)
useEffect(() => {
if (prevPriority.current !== task.priority) {
setFlash(true)
setTimeout(() => setFlash(false), 600)
prevPriority.current = task.priority
}
}, [task.priority])
<span className={text-[10px] px-1.5 py-0.5 rounded font-medium transition-all ${PRIORITY_COLORS[task.priority]} ${flash ? 'scale-125 ring-2 ring-white/30' : 'scale-100'}}>
{task.priority}
~10 lines! No backend needed 🎯
Feels super polished!! ✨
- Linguagem predominante
- JavaScript
- Estrelas
- 39
- Forks
- 105
- Merge médio
- 1d 18h
- PRs com merge (30d)
- 31
Preparar o ambiente
- Sem Dockerfile nem arquivo Docker Compose
- Sem modelo de pull request
- Ler o guia de contribuição
Primeiros passos
- Leia a issue inteira e depois o guia de contribuição do projeto.
- Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
- Faça um fork do repositório e trabalhe em uma branch.
- Abra um pull request que referencie o número da issue.
Mais de anoopcodehack/DevBoard
-
enhancement good first issue
Dificuldade 2/5 1-3 horas Facilidade para iniciantes 88/100
anoopcodehack/DevBoard#609 ·
Mantenedores costumam responder em até 1 dia
-
enhancement good first issue
Dificuldade 2/5 1-3 horas Facilidade para iniciantes 76/100
anoopcodehack/DevBoard#608 ·
Mantenedores costumam responder em até 1 dia
-
enhancement good first issue
Dificuldade 2/5 1-3 horas Facilidade para iniciantes 76/100
anoopcodehack/DevBoard#607 ·
Mantenedores costumam responder em até 1 dia
-
good first issue
Dificuldade 2/5 1-3 horas Facilidade para iniciantes 74/100
anoopcodehack/DevBoard#599 ·
Mantenedores costumam responder em até 1 dia
-
documentation good first issue
Dificuldade 1/5 Menos de uma hora Facilidade para iniciantes 82/100
anoopcodehack/DevBoard#598 ·
Mantenedores costumam responder em até 1 dia
Todas as issues de anoopcodehack/DevBoard
Issues semelhantes
-
type: bug
Dificuldade 2/5 1-3 horas Facilidade para iniciantes 76/100
blamechris/chroxy#8579 ·
Mantenedores costumam responder em até 1 dia
-
bug
Dificuldade 2/5 1-3 horas Facilidade para iniciantes 66/100
modusensus/dsh-mneme#411 ·
-
Flaky (suspected): VideoTimelineEditor bed audio test sees 600px instead of 120px under CI loadAberta
Dificuldade 2/5 1-3 horas Facilidade para iniciantes 82/100
Mantenedores costumam responder em até 1 dia
-
Actions on ToastsAberta
Dificuldade 2/5 1-3 horas Facilidade para iniciantes 65/100
nextcloud-libraries/nextcloud-dialogs#2669 ·
Mantenedores costumam responder em até 1 dia
-
Dificuldade 2/5 1-3 horas Facilidade para iniciantes 78/100
XRPLF/xrpl-dev-portal#4000 ·
Mantenedores costumam responder em até 1 dia