PHRAS-350 #fix add step by step tour guide

This commit is contained in:
Nicolas Le Goff
2015-02-17 19:23:35 +01:00
parent 5485fc0ac4
commit d9f6306f8a
5 changed files with 155 additions and 29 deletions

View File

@@ -44,6 +44,7 @@
{% endmacro %}
{% set jquery_theme = 'dark-hive' %}
{% set step = app.flash('step_by_step') %}
{% extends "common/index_bootstrap.html.twig" %}
@@ -100,6 +101,41 @@
background-color: #{% if app['authentication'].getUser().getPrefs('background-selection') != '' %}{{app['authentication'].getUser().getPrefs('background-selection')}}{% else %}404040{% endif %};
}
</style>
{% if step %}
<link type="text/css" rel="stylesheet" href="{{ path('minifier', { 'f' : 'assets/joyride/joyride-2.1.css' }) }}" >
<style>
.joyride-tip-guide {
background-color: #eee;
color: #000;
}
.joyride-tip-guide h1 {
font-weight: 100;
font-size: 20px;
color: #0a212b;
line-height: 22px;
margin-bottom: 10px;
}
.joyride-tip-guide span.joyride-nub.top {
border-color: #eee;
}
.joyride-tip-guide span.joyride-nub.right {
border-left-color: #eee !important;
}
.joyride-expose-wrapper {
background-color: transparent;
}
.joyride-tip-guide .joyride-next-tip {
background: #0a212b;
border: none;
}
</style>
{% endif %}
{% endblock %}
{% block javascript %}
@@ -117,22 +153,7 @@
</div>
</div>
</div>
<div id="desktop" class="PNB" style="overflow:hidden;">
{% if app.flash('client_deprecated') %}
<div id="clientModal" class="modal hide fade" >
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>{{ 'Client application is deprecated'|trans }}</h3>
</div>
<div class="modal-body">
<p>{{ 'You have been redirected to production application.'|trans }}</p>
</div>
</div>
<script type="text/javascript">
$('#clientModal').modal();
</script>
{% endif %}
{% set ratio = app['authentication'].getUser().getPrefs('search_window') %}
{% if ratio == 0 %}
{% set ratio = '0.333' %}
@@ -294,7 +315,7 @@
<form id="searchForm" method="POST" action="{{ path('prod_query') }}" name="phrasea_query" class="phrasea_query">
<div class="input-append">
<input autocomplete="off" class="search query" id="EDIT_query" name="qry" type="text" name="qry" value="{{app['authentication'].getUser().getPrefs('start_page_query')}}">
<a href="#" class="btn btn-inverse adv_trigger adv_search_button">
<a href="#" class="btn btn-inverse adv_trigger adv_search_button" id="ADV_query">
<img src="/skins/icons/settings.png" title="{% trans 'Advanced Search' %}"/>
</a>
<button type="submit" class="btn btn-inverse" style="font-size:14px">{% trans 'boutton::rechercher' %}</button>
@@ -531,7 +552,7 @@
<span class="dropdownButton">
<div class="btn-group">
<button class="default_action TOOL_disktt_btn results_window btn btn-inverse">
<button id="TOOL_disktt" class="default_action TOOL_disktt_btn results_window btn btn-inverse">
<img src="/skins/prod/000000/images/disktt_history.gif" height="16" width="16" /> {% trans 'action : exporter' %}
</button>
<button class="trigger btn btn-inverse dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
@@ -1038,6 +1059,88 @@
<div id="modal_feed" title="{% trans 'action : publier' %}" style="display:none;"></div>
<div id="dialog_dwnl" title="{% trans 'action : exporter' %}" style="display:none;"></div>
{% if step %}
<ol id="step_by_step" style="visibility: hidden;">
/* data-id needs to be the same as the parent it will attach to */
<li data-id="EDIT_query">
<div>
<h1>
{{ "Rechercher"|trans }}
</h1>
<p>
{{ "Taper ici les termes de recherche afin de retrouver les documents souhaités."|trans }}
</p>
</div>
</li>
<li data-id="ADV_query">
<div>
<h1>
{{ "Recherche Avancée"|trans }}
</h1>
<p>
{{ "Séléctionner les champs et les collections sur lesquels vous voulez rechercher."|trans }}
</p>
</div>
</li>
<li data-id="recordtype_sel">
<div>
<h1>
{{ "Types de documents"|trans }}
</h1>
<p>
{{ "Séléctionner ici le type de document que vous souhaitez rechercher."|trans }}
</p>
</div>
</li>
<li data-id="TOOL_disktt">
<div>
<h1>
{{ "Barre d'outils"|trans }}
</h1>
<p>
{{ "Utilisez la barre d'outils pour télécharger les documents ou pour agir sur ces documents."|trans }}
</p>
</div>
</li>
<li data-id="answers" data-options="tipLocation:left">
<div>
<h1>
{{ "Sélection et Prévisualisation de documents"|trans }}
</h1>
<p>
{{ "Sélectionner les documents en cliquant dessus.
Pour sélectionner plusieurs documents, maintenez la touche maj enfoncée et
cliquez sur les documents souhaités.
Pour prévisualier un document cliquez dessus."|trans }}
</p>
</div>
</li>
<li data-id="basket_menu_trigger">
<div>
<h1>
{{ "Paniers"|trans }}
</h1>
<p>
{{ "Consulter et administrer vos paniers dans cet onglet.
Pour créer un panier et affichez le menu déroulant en cliquant sue la
flèche blanche."|trans }}
</p>
</div>
</li>
<li data-id="answers" data-options="tipLocation:left">
<div>
<h1>
{{ "Ajouter au panier"|trans }}
</h1>
<p>
{{ "Ajoutez des médias simplement en les faisant glisser vers le panier
désiré et en relachant au dessus."|trans }}
</p>
</div>
</li>
</ol>
{% endif %}
<script type="text/javascript">
{% include "prod/thesaurus.js" %}
</script>
@@ -1091,5 +1194,19 @@
</script>
<script type="text/javascript" id="bitly_loader"></script>
{% if step %}
<script type="text/javascript" src="{{ path('minifier', { 'f' : 'assets/joyride/jquery.cookie.js' }) }}"></script>
<script type="text/javascript" src="{{ path('minifier', { 'f' : 'assets/joyride/modernizr.mq.js' }) }}"></script>
<script type="text/javascript" src="{{ path('minifier', { 'f' : 'assets/joyride/jquery.joyride-2.1.js' }) }}"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#step_by_step").joyride({
autoStart : true,
modal:true,
expose: true
});
});
</script>
{% endif %}
{% endblock %}