Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

[Remove Vuetify from Studio] Create StudioContentNodeIcon and use it channel details modal

Aperta
  • Qualcosa non va?
#5,933 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
25/100
Tipo di issue
Refactoring
Chiarezza
Specificata chiaramente
Stato di attività
Tranquilla
Stack tecnologico
javascript
Ambito
frontend

Direzione di ricerca

Inizia leggendo ContentNodeIcon e shared/utils/icons.js, quindi ispeziona shared/vuetify/theme.js solo per comprendere le mappature di colore esistenti per i tipi di contenuto. Individua il modal dei dettagli del canale e verifica le icone di Total resources e il flusso di generazione del PDF. Il lavoro è completato quando il modal utilizza il nuovo componente, l’utility per i colori è stata aggiunta senza modificare ContentNodeIcon o theme.js e l’output del browser e del PDF non presenta regressioni.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

❌ This issue is not open for contribution. Visit Contributing guidelines to learn about the contributing process and how to find suitable issues.

Overview

ContentNodeIcon is implemented with several Vuetify components. Remove Vuetify dependencies by creating a new component StudioContentNodeIcon as a parallel to ContentNodeIcon with no Vuetify dependencies, a supporting utility getContentKindColor, and finally use StudioContentNodeIcon on channel details page.

Complexity: Medium

Context

Channel details modal

Browser PDF
Image Image
The Change
(1) Create StudioContentNodeIcon and getContentKindColor

Icon

  • Uses KIcon to render the icon
  • Uses getContentKindIcon (shared/utils/icons.js) to determine the icon based on content node kind

Background color

  • Create a new utility getContentKindColor in shared/utils/colors.js
    • Based on content node kind, determines background color (see how kinds map to KDS colors in this shared/vuetify/theme.js)
    • (will be useful for another future tasks too)

Do not modify ContentNodeIcon. Do not modify or use shared/vuetify/theme.js.

(2) Use StudioContentNodeIcon in channel details modal

Use StudioContentNodeIcon for icons in the Total resources section of the channel details modal. Ensure no regressions in the generated PDF (test whether if capture-as-image needs to be added to KIcon or not).

Do not refactor any other areas of the codebase.

How to Get There
  • Login as [email protected] with password a
  • Go to Channels > My Channels
  • Click the info icon on the Published Channel card
  • To generate PDF, click Download channel summary > Download PDF
Guidance
Out of Scope
  • Do not modify or use shared/vuetify/theme.js
  • Do not modify ContentNodeIcon
  • Do not refactor any other areas of the codebase
Expected UI/UX changes
  • Minor visual differences naturally stemming from the use of KDS
Acceptance Criteria

These are general acceptance criteria for the project. For each sub-issue, consider which are relevant.

General

  • The specification above is followed.
  • Except for "Expected UI/UX changes," there are no functional or visual differences in user experience.
  • There are no regressions in the printing preview
  • There are no ::v-deep or /deep/ selectors.
  • All user interactions are manually tested with no regressions.
  • Pull request includes screenshots.

a11y and i18n

See the project's "Guidance" for useful references.

  • Implementation meets a11y standards
  • All components are LTR and RTL compliant (preview with pnpm run devserver since :hot doesn't render RTL properly)
  • All user-facing strings are translated properly
  • The notranslate class been added to elements that shouldn't be translated by Google Chrome's automatic translation feature (e.g. user-generated text)
  • Mobile experience is reasonable

Unit tests

  • If there is a unit test suite already, it is meaningfully updated (even if tests don't fail)
  • If there is no unit test suite, a new one is created. Do not use obsolete @vue/test-utils approach. Instead, use @testing-library/vue (Vue Testing Library).
References

Sub-issue of https://github.com/learningequality/studio/issues/5060

Lingua principale
Python
Stelle
192
Fork
310
Merge medio
2g 6h
PR unite (30g)
65

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di learningequality/studio

Tutte le issue di learningequality/studio

Issue simili

Altre issue su Python

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.