Mar 8, 2018 2:52:28 PM seb leridon avatar   1788

Back Office graphical charter with Bootstrap

A Lutece administration page in Bootstrap 3 + AdminLTE must respect the following constraints:

The blocks of HTML code must be in a section "row / col / box" (example in full width).

Admin Block

<div class="row" >
    <div class="col-xs-12 col-sm-12 col-md-12">
        <div class="box [box-solid] [box-primary | box-success | box-info | box-danger | box-warning]">
            <div class="box-header">
                <h3 class="box-title"># i18n{myplugin.feature.title}</h3>
                [ <div class="box-tools pull-right">...</div> ]
            </div>   
            <div class="box-body">
                ...contenu...
            </div>
        </div>
    </div>
</div>

Write this block with FreeMarker macros Lutece v5

<@rowBoxHeader i18nTitleKey = "myplugin.feature.title">
        ...
</@RowBoxHeader>

or if there are action buttons on the toolbar (top right), use the @ rowBox , @ boxHeader and @ boxBody macros at place of @ rowBoxHeader .

<@rowBox>
<@boxHeader i18nTitleKey = "myplugin.feature.title">
    <@headerButtons>
        <form class = "form-inline pull-right spaced" method = "post" action = "jsp / admin / plugins / myplugins / MyAction.jsp">
            ....
        </Form>
    </@HeaderButtons>
</@BoxHeader>
<@boxBody>
    ....
</@BoxBody>
</@RowBox>

Buttons, action links related to advanced settings or adding content should be located at the top right of the screen in the <div class = "box-tools"> tag of the box-header * * ".

If it's a form, it must inherit bootstrap css classes " form-inline " and " pull-right ".

Actions

<div class="box-tools pull-right">
   <form class="form-inline pull-right" method="post" action="jsp/admin/plugins/plugin/ManageAdvancedParameters.jsp">
         <button class="btn btn-primary btn-xs btn-flat" type="submit" >
              <span class="fa fa-cog" ></span>
                <span class="hidden-xs" ></span>
         </button>
    </form>               
    <a class="btn btn-default btn-xs btn-flat" title="${action.description}" >
      <span class="fa fa-close"></span>
    </a>
</div>

The buttons

Buttons, whether in the form of a link, <a> tag, or form buttons, <button> tag, must have the following properties:

  • They must all inherit classes " btn " and " btn-default " for a standard gray button.
  • They must contain an " fa " (make awesome) <span> or <i> (Bootstrap-specific) icon: example <span class = "fa fa-plus"> </span> for a button "adding content".
  • The wording if a bit long should be hidden in mobile mode using the class "hidden-xs" placed in a <span> tag
  • The action buttons are usually of class " btn-primary ". The exceptions are for the "Back" or "Undo" " btn-default " buttons, and the "Delete" buttons that inherit them from the " btn-danger " class. We can also find "btn-success", "btn-info" or "btn-warning".
  • The size of the button is managed by the classes " btn-xs " which can be found in the " box-tools ", " btn-sm ", " btn -lg "and btn-block ".
Edit button fa fa-pencil
Delete button fa fa-trash
Activation button fa fa-check
Validation button fa fa-check
Cancel button fa fa-close

Administrative page templates

The "Manage" model

This template is the standard template for hosting a plugin. It usually displays the list of resources, with the associated actions in a table.

The buttons for adding a resource and advanced settings are placed at the top of the page.

The list of resources is displayed in a table with the class css " table table-condensed table-striped ".

<div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12">
        <div class="box box-primary">
            <div class="box-header">
                <h3 class="box-title"># i18n{calendar.manage_calendars.tableLabel}</h3>
                <div class="box-tools">
                    <form class="form-inline pull-right spaced" method="post"  action="jsp/admin/plugins/calendar/CreateCalendar.jsp">
                        <button class="btn btn-xs btn-flat btn-primary" type="submit" >
                            <i class="fa fa-plus"></i>
                            <span class="hidden-phone" ># i18n{calendar.manage_calendars.buttonAddCalendar}</span>
                        </button>
                    </form>
                    <#if permission_advanced_parameter>
                    <form class="form-inline pull-right" method="post" action="jsp/admin/plugins/calendar/ManageAdvancedParameters.jsp">
                        <button class="btn btn-xs btn-flat btn-primary" type="submit" >
                            <i class="fa fa-cog"></i>
                            <span class="hidden-phone" ># i18n{calendar.manage_calendars.labelAdvancedParameters}</span>
                        </button>
                    </form>               
                    </#if>
                </div>
            </div>
            <@paginationAdmin paginator=paginator combo=1 form=0 />
            <div class="box-body table-responsive">
                <table class="table table-hover table-condensed">
                    <thead>
                        <tr>
                            <th># i18n{calendar.manage_calendars.columnTitleLabel}</th>
                            <th># i18n{calendar.manage_calendars.columnTitleActions}</th>
                        </tr>
                    </thead>                          
                    <tbody>
                    <tr>
                        <td>
                            ...
                        </td>
                        <td>
                           <a class="btn btn-primary btn-xs btn-flat pull-left spaced" href="#"  title="# i18n{calendar.modify_calendar.pageTitle}" >
                               <span class="fa fa-pencil"></span>
                           </a>   
                          ...
                        </td>
                    </tr>                   

                    </tbody>
                </table>
            </div>
          <@paginationAdmin paginator=paginator combo=0 form=1 />
        </div>
    </div>
</div>
<@rowBox>
    <@boxHeader i18nTitleKey="calendar.manage_calendars.tableLabel">
        <@headerButtons>
                    <form class="form-inline pull-right spaced" method="post"  action="jsp/admin/plugins/calendar/CreateCalendar.jsp">
                        <button class="btn btn-xs btn-flat btn-primary" type="submit" >
                            <i class="fa fa-plus"></i>
                            <span class="hidden-phone" ># i18n{calendar.manage_calendars.buttonAddCalendar}</span>
                        </button>
                    </form>
                    <#if permission_advanced_parameter>
                    <form class="form-inline pull-right" method="post" action="jsp/admin/plugins/calendar/ManageAdvancedParameters.jsp">
                        <button class="btn btn-xs btn-flat btn-primary" type="submit" >
                            <i class="fa fa-cog"></i>
                            <span class="hidden-phone" ># i18n{calendar.manage_calendars.labelAdvancedParameters}</span>
                        </button>
                    </form>               
                    </#if>
        </@headerButtons>
    </@boxHeader>
    <@boxBody>
          <@paginationAdmin paginator=paginator combo=1 form=0 />
          <@table>
                     <tr>
                            <th># i18n{calendar.manage_calendars.columnTitleLabel}</th>
                            <th># i18n{calendar.manage_calendars.columnTitleActions}</th>
                     </tr>
           <@tableHeadBodySeparator />
                    <tr>
                        <td>
                            ...
                        </td>
                        <td>
                           <a class="btn btn-primary btn-xs pull-left spaced" href="#"  title="# i18n{calendar.modify_calendar.pageTitle}" >
                               <span class="fa fa-pencil"></span>
                           </a>   
                          ...
                        </td>
                    </tr>                   
          </@table>
          <@paginationAdmin paginator=paginator combo=0 form=1 />
     </@boxBody>
</@rowBox>

Le modèle "Create" et le modèle "Modify"

<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="box box-primary">
<div class="box-header">
<h3 class="box-title"># i18n{ria.create_activity.pageTitle}</h3>
</div>
<div class="box-body">
<form class="form-horizontal" method="post" name="create_calendar" action="jsp/admin/plugins/calendar/DoCreateCalendar.jsp">
<div class="form-group">
<label class="control-label col-xs-12 col-sm-3 col-md-3" for="calendar_name"> # i18n{calendar.create_calendar.name} *</label>
<div class="col-xs-12 col-sm-8 col-md-6">
<input type="text" class="form-control input-sm" id="calendar_name" name="calendar_name" tabindex="1" maxlength="250" >
</div>
</div>
...
<div class="form-group">
<div class="col-xs-12 col-sm-offset-3 col-sm-8 col-md-offset-3 col-md-8">
<button class="btn btn-primary btn-flat" type="submit" >
<span class="fa fa-check"></span> # i18n{portal.util.labelValidate}
</button>
<a class="btn btn-default btn-flat" href="jsp/admin/plugins/calendar/ManageCalendars.jsp" >
<span class="fa fa-close"></span> # i18n{portal.util.labelCancel}
</a>
</div>
</div>
</form>
</div>
</div>
</div>
</div>

Ecriture de ce bloc avec les macros FreeMarker Lutece v5

<@rowBoxHeader i18nTitleKey="ria.create_activity.pageTitle" >
<form class="form-horizontal" method="post" name="create_calendar" action="jsp/admin/plugins/calendar/DoCreateCalendar.jsp">
<@fieldInputText i18nLabelKey="calendar.create_calendar.name" inputName="calendar_name" mandatory=true maxlength=250 />
...
<@actionButtons url2='jsp/admin/plugins/calendar/ManageCalendars.jsp' />
</form>
</@rowBoxHeader>

Les dashboards

Accueil du back-office les dashboard utilisent des "box" comme vu plus haut. Il peut y avoir des styles particuliers avec 'small-box" et un fond de couleur "bg-info" par exemple ajouter pour certains dashboards.

<div class="small-box bg-red">
<div class="inner">
<h3>${memory}</h3>
<p> Mémoire en Mo (Utilisée / Max.)</p>
</div>
<div class="icon">
<i class="fa fa-tasks"></i>
</div>
<a href="${url}" class="small-box-footer">
Mémoire en Mo (Utilisée / Max.)<i class="fa fa-arrow-circle-right"></i>
</a>
</div>
<div class="small-box bg-red">
<div class="inner">
<#list connections as connection>
<h3>${connection.name}</h3>
<p>${connection.code} Connexions (Utilisées / Max.)</p>
</#list>
</div>
<div class="icon">
<i class="fa fa-database"></i>
</div>
<a href="${url}" class="small-box-footer">
Connexions (Utilisées / Max.)<i class="fa fa-arrow-circle-right"></i>
</a>
</div>