Personnalisation du menu

Introduction

L'application Flight One dispose d'un <app-drawer> qui contient un nom, des items (noms de vue, icônes lié à ces noms). Les items peuvent être crée automatiquement, ou manuellement. Voici à quoi ressemble le menu de l'application Flight One :

<app-drawer class="list-panel" id="drawer" slot="drawer">
    <app-toolbar>Menu</app-toolbar>
    <paper-listbox id="pop" selected="[[page]]" class="drawer-list" role="navigation">
        <template is="dom-repeat" items="[[ajaxResponse]]">
        <!-- Ajout d'items au menu de maniére automatique lié au fichier menu.json -->
            <a data-svg$="[[item.svgfile]]" href="[[item.Class]]" on-click="_viewClickedEffect" tabindex="-1">
                <paper-item id="[[item.Class]]" class="menu" value="[[item.Name]]">
                    <iron-icon icon="[[item.icons]]" style$="[[item.color]]" item-icon></iron-icon>
                    <span>[[item.Name]]</span>
                </paper-item>
            </a>
        </template>
        <!-- Ajout d'items au menu de maniére manuel -->
        <a href="fb-logs" on-click="_viewClickedEffect" tabindex="-1">
        <!-- Si l'utilisateur est un admin on affiche l'item logs -->
            <paper-item id="fb-logs" class="menu" value="logs" hidden$="[[!user.ADMIN]]">
                <iron-icon icon="content-paste" style="fill:black;" item-icon></iron-icon>
                <span>logs</span>
            </paper-item>
        </a>
    </paper-listbox>
</app-drawer>

Modification du nom

Pour modifier le nom du menu, il faut modifier cette ligne :

<app-toolbar>Menu</app-toolbar>

Le nom affiché sur le header sera Menu, si on veut le modifier par Documentation Test il suffit de remplacer Menu par Documentation Test, comme ceci :

<app-toolbar>Documentation Test</app-toolbar>

Création automatiques des items du menu

Les items peuvent être crée automatiquement via le fichier menu.json qui se trouve dans le chemin suivant client/frontoffice/src/elements/app dans l'application Flight One.

[
    {
        "icons": "thumb-up",
        "Name": "Exemple",
        "Class": "view-example",
        "svgfile": "../svg/example.svg",
        "color": ""
    },
    {
        "icons": "alarm-on",
        "Name": "alarmes",
        "Class": "fb-alarms-classic",
        "svgfile": "",
        "color": "fill:red;"
    }
]

• icons : icône qui sera affiché à côte du nom. Les icônes disponible sont présentes ici.
• Name : nom de l'item.
• Class : écriture exact du tag.
• svgfile : chemin du fichier svg lié à l'item.
• color : couleur de l'icône

Création manuel des items du menu

Les items peuvent être crée manuellement.

<a href="fb-logs" on-click="_viewClickedEffect" tabindex="-1">
    <!-- Si l'utilisateur est un admin on affiche l'item logs -->
    <paper-item id="fb-logs" class="menu" value="logs" hidden$="[[!user.ADMIN]]">
        <iron-icon icon="content-paste" style="fill:black;" item-icon></iron-icon>
        <span>logs</span>
    </paper-item>
</a>

L'item aura pour nom logs, son icône est content-paste et elle est de couleur noir. De plus cet item sera visible que pour les utilisateurs ayant le profil ADMIN.

<a href="fb-logs" on-click="_viewClickedEffect" tabindex="-1">
</a>

Cette balise permet de se diriger sur la vue lié à l'item.

<iron-icon icon="content-paste" style="fill:black;" item-icon></iron-icon>

Cette balise contient l'icône ainsi que sa couleur.

<span>logs</span>

Cette balise contient le nom de l'item.