role.component.html

<div class="piece" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'">
    <div class="piece-attach piece-attach-left-top"></div>
    <div class="piece-attach piece-attach-right"></div>
    <div class="piece-attach piece-attach-left-bottom"></div>

    <div class="piece-menu" [class]="displayMenu">
        <mat-icon fontIcon="mode_comment" (click)="onClickComments()"></mat-icon>
        <mat-icon fontIcon="add" (click)="onClickAdd()"></mat-icon>
        <mat-icon fontIcon="backspace" (click)="onClickErase()"></mat-icon>
    </div>

    <div class="piece-form">
        <div class="piece-form-title">Rôle 1</div>
        <div class="piece-form-intitule">
            <label for="intitule">Intitulé</label>
            <input name="intitule" type="text" placeholder="Développeur/euse web"/>   
        </div>
        <div class="piece-form-name">
            <label for="name">Nom de la quête</label>
            <input name="name" type="text" placeholder="Intégration de site web"/>   
        </div>
        <div class="piece-form-objective">
            <label for="objective">Objectif(s) pédagoqique(s)</label>
            <textarea name="objective" placeholder="- Connaître la structure d'un document HTML&#10;- Savoir intégrer et mettre en forme des images à une page web"></textarea>  
        </div>
        <div class="piece-form-reward">
            <label for="reward">Récompenses</label>
            <textarea name="reward" placeholder="- Gain en compétences en web&#10;- Termine l'objectif pédagoqique &quot;connaître la structure d'un document HTML&quot;&#10;- Débloque la quête &quot;un CMS (wordpress) pour l'association du village&quot;"></textarea>  
        </div>


        <div class="piece-form-personnalization">
            <div class="piece-form-title">Personnalisation</div>
            <div class="piece-form-personnalization-appearance">
                <label>Apparence, équipement</label>
                <textarea></textarea>
            </div>
            <div class="piece-form-personnalization-skills">
                <label>Compétences</label>
                <textarea></textarea>
            </div>
        </div>

        <div class="piece-form-ressources">
            <div class="piece-form-title">Ressources & attributs</div>
            <div class="piece-form-ressources-ressource">
                <div class="piece-form-ressources-ressource-name">
                    <label for="name">Nom</label>
                    <input name="name" type="text"/>
                </div>
                <div class="piece-form-ressources-ressource-quantity">
                    <label for="quantity">Nombre</label>
                    <input name="quantity" type="text">
                </div>    
            </div>
            <button mat-button><mat-icon fontIcon="add"></mat-icon></button>
        </div>
    </div>
</div>