-
Notifications
You must be signed in to change notification settings - Fork 1
Layout
La disposition proposée par timmi, avec menu vertical à gauche et en-tête aux couleurs de l'application a été partagée dans Lucca-UI.
##Sidebar et main-content Voici la structure à adopter (remplacer ce qui se trouve entre @ par ce que vous voulez) :
<body>
<div id="ilucca-banner" />...
<div id="app" ng-app="@myApp@" ng-class="{'collapse-sidebar':collapseSidebar}" ng-controller="@myAppController@">
<div id="main-sidebar">
<!-- Your app logotype !-->
<a id="logo" ui-sref="@homeState@" title="">
<span class="img">@My App@</span>
</a>
<!-- Main Navigation !-->
<nav id="main-nav">
<ul>
<li ng-repeat="item in items" tooltip-placement="right" tooltip="@item.name@" tooltip-popup-delay="500" tooltip-class="lucca-tooltip secondary">
<a ui-sref='@aimedState@' class="lucca-icon @item.icon@" ng-class="{active:@isCurrent?@, 'has-updates':@hasUpdates?@}">
<span class="section-name">@item.name@</span>
<span class="updates-count">@updates@</span>
</a>
</li>
</ul>
</nav>
<!-- Footer !-->
<footer>
<a id="toggle-sidebar" href="" ng-click="collapseSidebar=!collapseSidebar"></a>
</footer>
</div>
<main>
<div ui-view="page" id="view"></div>
</main>
</div>
</body>Vous remarquerez que l'élément "#app" a deux états mutuellement exclusifs matérialisés par la présence ou non de la classe collapse-sidebar. S'il porte ladite classe, la sidebar sera déployée (et poussera le contenu).
L'élément actif de la navigation principale est défini par la classe ".active" sur son ancre :
nav#main-nav ul li a.active
##Main header Le main header est répété à chaque vue (il est dans le fichier appelé par le ui-view cité plus haut).
Il se structure comme suit :
<header id="main-header">
<div class="lucca-container">
<!-- Help ! -->
<div id="help-me-please"
tooltip
tooltip-template="'help-tooltip.html'"
tooltip-placement="left"
tooltip-trigger="click"
tooltip-class="help-me-please-tooltip">
<em>?</em>
</div>
<h1 ng-if="@THERE'S ONLY ONE GUY HERE@">{{'TITLE_1'|translate}}</h1>
<div class="main-title" ng-if="@THEY'RE A LOT HERE@">
<h1>{{'TITLE_N'|translate}} </h1>
<!-- User select !-->
<ui-select ng-model="@userSelected@" theme="bootstrap" ng-disabled="users.length == 1" on-select="@doSomething@">
<ui-select-match placeholder="{{$select.selected.name}}">{{$select.selected.name}}</ui-select-match>
<ui-select-choices repeat="user in users | filter: $select.search">
<span ng-bind-html="user.name | highlight: $select.search"></span>
</ui-select-choices>
</ui-select>
</div>
</div>
</header>Plusieurs observations :
- Vous pouvez directement placer un H1 dans le header, ou bien, en l'enrobant préalablement dans une
div.main-title, le joindre à un ui-select - Pour le tooltip, n'oubliez pas d'ajouter un template en bas de page (spécifique à chaque vue dans l'idéal) :
<script type="text/ng-template" id="help-tooltip.html"></script>