Découpage en containers et components - vue thread

[lebouquetin]

Affichage d'une discussion

7 composants (ou conteneurs - à rediscuter) :

1. ViewHeadBar

Parameters :

• background color (default to black)
• foreground color (default to white)
• icon (eg 'fa-comments fa-invert')
• label

Callbacks to be usable

• onclick on close button

Note: this is a generic component. We do not have a ThreadViewHeadBar but instantiate a ViewHeadBar with right parameters

2. ViewToolbar

Parameters:

• list of buttons (icon, title, callback)

Note: this is a generic component. We do not have a ThreadViewToolbar but we will instantiate a ThreadToolbarBar with 3 buttons : archive, delete, change status buttons

3. AvatarBubble

Parameters :

• url of the image
• name of the personn (eg. : Damien Accorsi)

Behavior : if no url found, show first letter of the name (D in the previous example) with a background color computed using a hash:

int hash = name.getHashCode();
int r = (hash & 0xFF0000) >> 16;
int g = (hash & 0x00FF00) >> 8;
int b = hash & 0x0000FF;

example taken from https://stackoverflow.com/questions/11120840/hash-string-into-rgb-color

4. MessageBubble

Parameters :

• background-color
• foreground-color
• message (html)

5. MessageEntryForm

Parameters :

• text (for edit case)
• validate button label

Callback :

• onclick du bouton

Affiche un formulaire de saisie de texte avec le bouton envoyer

Note :

• sur PC l'affichage sera le rich text (tinymce) avec bascule possible
• sur tablette ou mobile, l'affichage sera en mode "text simple"
  Idéalement, ce n'est pas lié à la taille de l'écran mais au type de device (ie avec ou sans clavier)

Autre note : ce composant devrait utiliser un composant RichTextEntry qui lui encapsule l'éditeur riche TinyMCE

6. HistoryPanel

Parameters :

• items : liste d'items composant l'history (des composants de type #8 ou autre)

Cet élément contient les éléments d'historique sans permettre aucune action (à part qu'il est scrollable)

7. ThreadView

C'est le composant / container qui représente le contenu réel
Celui ci est spécialisé par type de contenu car selon le type de contenu il va paramétrer le menu différemment, la liste d'historique aussi, etc, etc

8. HistoryMessageView

Paramètres :

• avatar (Component)
• message_bubble (Component)
• left_or_right