--- a/src/metadatacomposer/static/metadatacomposer/css/style.css Mon Jun 10 13:11:23 2013 +0200
+++ b/src/metadatacomposer/static/metadatacomposer/css/style.css Mon Jun 10 13:11:43 2013 +0200
@@ -49,7 +49,7 @@
.form-info-general-annotation{ }
.chapter-widget input, .form-info-general-annotation input, .form-info-general-annotation textarea{width: 196px; max-width: 196px; }
.chapter-widget textarea{width: 426px; max-width: 426px; min-width: 426px; height: 20px;-webkit-transition: height .3s ease;-moz-transition: height .3s ease;transition: height .3s ease;}
-.form-chapter-edit{}
+.label-left{text-align: left; padding-left: 10px;}
.chapter-widget-info table{margin: 0; padding-top: 40px; }
.chapter-widget table td{}
.chapter-widget textarea:focus{height: 100px;}
@@ -61,9 +61,9 @@
.list-chapter-wrap, .list-annotation-wrap, .section{background-color: #F5F5F5; border: 1px solid #E5E5E5;}
.list-chapter-wrap table, .list-annotation-wrap table{margin-bottom: 0;}
.list-chapter-wrap h4, .form-chapter-edit h4, .list-annotation-wrap h4, .title-section{padding: 10px; border-bottom: 1px solid; margin-bottom: 10px;}
-.add-annotation-wrap, form.form-info-general-annotation{padding: 10px 0;}
-form.form-info-general-annotation ul.tagit {margin-left: 0px;width: 195px;}
-form.form-info-general-annotation textarea{min-height:100px; height: 100px;min-width: 196px;}
+.add-annotation-wrap, .form-info-general-annotation{padding: 10px 0;}
+.form-info-general-annotation ul.tagit {margin-left: 0px;width: 195px;}
+.form-info-general-annotation textarea{min-height:100px; height: 100px;min-width: 196px;}
.add-annotation-wrap {margin-bottom: 20px; padding-top: 0;}
@@ -107,8 +107,9 @@
.annotation-display-view{display:none;text-align:center; line-height:200px;background-color: #fff;position: absolute; width: 200px; margin-left: -100px; height: 200px; margin-top: -100px; top: 50%; left: 50%;}
.list-current-annotations{position: absolute;bottom: 40px; left: 20px; margin: 0;}
.list-current-annotations li{list-style: none; margin-top: 4px;}
-.list-current-annotations a{text-align:center; line-height:20px; color:#FFF;display: inline-block; background-color: #589; width: 20px; height: 20px; }
-.list-current-annotations a:hover{text-decoration: none;}
+.list-current-annotations a{text-decoration: none;line-height:20px; color:#202020;display: inline-block; background-color: #589; height: 20px; padding: 0 4px; }
+.list-current-annotations a span{display: none;}
+.list-current-annotations a:hover span{display: inline-block;}
.annotation-audio-content textarea{max-width: 206px;}
.annotation-links-content .links-form:nth-child(n+2){border-top:1px solid; padding-top: 20px;}
@@ -126,6 +127,12 @@
.description-slideshow-row span{max-height: 100px; display: inline-block; overflow: auto;}
.description-slideshow-row textarea{width: 164px; max-width: 164px; height: 100px;}
.label-modify-video, .label-add-video{display: none;}
+
+.shadow {
+ background-color: #00FFFF !important;
+}
+.alert-message{display: none;}
+
/* Tangle */
.time-tangle {
color: #2c3e50; cursor: w-resize; position: relative;
--- a/src/metadatacomposer/static/metadatacomposer/js/edition.js Mon Jun 10 13:11:23 2013 +0200
+++ b/src/metadatacomposer/static/metadatacomposer/js/edition.js Mon Jun 10 13:11:43 2013 +0200
@@ -1,6 +1,7 @@
var myMedia = undefined,
currentChapter = undefined,
- currentAnnotation = undefined;
+ currentAnnotation = undefined,
+ secMiniChapter = 10;
$(function(){
@@ -24,7 +25,27 @@
}
});
-$('.timeline-annotations').on('click', '.annotation', function(e){
+//survol
+$(document).on('mouseover', '.timeline-annotations .annotation, #list-annotations-rows tr, .item-display-annotation' , function(){
+ if(!$(this).hasClass('shadow')) {
+ var idAnnotation = $(this).attr('data-id');
+ $('#annotation-timeline-'+idAnnotation+', #row-list-annotation-'+idAnnotation+', #item-current-annotation-'+idAnnotation).addClass('shadow');
+ }
+});
+
+$(document).on('mouseover', '.chapter-segment, .row-list-chapter' , function(){
+ if(!$(this).hasClass('shadow')) {
+ var idChapter = $(this).attr('data-id');
+ $('#row-list-chapter-'+idChapter+', #'+idChapter+', #form-chapter-edit-'+idChapter).addClass('shadow');
+ }
+});
+
+$(document).on('mouseout', '.shadow' , function(){
+ $('.shadow').removeClass('shadow');
+});
+
+
+$(document).on('click', '.annotation, .item-display-annotation', function(e){
e.preventDefault();
var idAnnotation = $(this).attr('data-id'),
annotation = _.find(annotations, function(c){ return c.id == idAnnotation; });
@@ -130,6 +151,7 @@
currentAnnotationsDisplay.push(v.id);
if(!$('#item-current-annotation-'+v.id).length){
var itemAnnotation = getTemplate('#tpl-item-annotation-display');
+ v.iconTab = getIcon(v.type);
itemAnnotation = Mustache.render(itemAnnotation, v);
$('.list-current-annotations').append(itemAnnotation)
}
@@ -157,6 +179,7 @@
//display annotation view
$('.list-current-annotations').on('click', 'a', function(e){
e.preventDefault();
+ /*
var annotationDisplayView = $('.annotation-display-view'),
idAnnotation = $(this).attr('data-id');
var annotation = _.find(annotations, function(c){ return c.id == idAnnotation; });
@@ -170,6 +193,7 @@
.text(annotation.type+' : '+annotation.title)
.show();
}
+ */
});
//########### modal
@@ -277,12 +301,23 @@
$(document).on('click', '.btn-delete-chapter', function(e){
e.preventDefault();
- if(chapters.length == 1){alert('Le projet doit contenir au moins un chapitre.'); return;}
+ if(chapters.length == 1){
+ $('#modal-alert .alert-message').hide();
+ $('#modal-alert #alert-chapter-number').show();
+ $('#modal-alert').modal('show');
+ return;
+ }
var idChapter = $(this).attr('data-chapter-id'),
btnDeleteModal = $("#modal-confirm #btn-delete-modal");
btnDeleteModal.attr('data-type-delete', 'chapter');
btnDeleteModal.attr('data-id', idChapter);
+ var titleMedia = $(this).attr('data-title'),
+ urlDelete = $(this).attr('href');
+ $("#modal-confirm #btn-delete-modal").attr('href', urlDelete).focus();
+ $("#modal-confirm .modal-body").find('.titleMedia').text(titleMedia);
+ $("#modal-confirm").modal('show');
+
});
$(document).on('click', '.btn-ok-chapter', function(e){
e.preventDefault();
@@ -335,11 +370,19 @@
$('.chapter-widget').on('click', '.btn-cut-chapter', function(e){
e.preventDefault();
-
+ var begin = myMedia.currentTime,
+ end = organizeNewChapter(myMedia.currentTime);
+ if(!end){
+ $('#modal-alert .alert-message').hide();
+ $('#modal-alert #alert-chapter-duration').show();
+ $('#modal-alert #alert-chapter-duration strong').text(secMiniChapter);
+ $('#modal-alert').modal('show');
+ return;
+ }
var dataChapter = {
title : 'New',
- begin : myMedia.currentTime,
- end : organizeNewChapter(myMedia.currentTime),
+ begin : begin,
+ end : end,
description : 'description',
keywords : ['tag1','tag2']
};
@@ -350,11 +393,12 @@
function organizeNewChapter(beginNew){
- var returnEnd;
+ var returnEnd = false;
$.each(chapters, function(k, v){
var begin = v.begin,
end = v.end;
- if(beginNew>=begin && beginNew<=end){
+
+ if(beginNew>=begin && beginNew<=end && end-beginNew>secMiniChapter*1000 && beginNew-begin>secMiniChapter*1000){
returnEnd = new IriSP.Model.Time(end);
v.setEnd(beginNew);
}
@@ -386,7 +430,9 @@
left : left,
width : width,
backgroundColor : v.color
- }).attr('id', v.id);
+ }).attr('id', v.id)
+ .attr('data-id', v.id)
+ .addClass('chapter-segment');
chapterSegmentWrap.append(segment);
@@ -516,6 +562,7 @@
var idAnnotation = $(this).parents('form').attr('data-id');
$('#onglet-title-'+idAnnotation).text(value);
$(this).parents('form').find('.btn-delete-annotation').attr('data-title', value);
+ $('#annotation-timeline-'+ idAnnotation).attr('title', value);
$('#annotation-timeline-'+ idAnnotation+' span').text(value);
}
});
@@ -608,6 +655,7 @@
var videoWrap = $(tabContent).find('.annotation-video-content');
renderVideoInfo(videoWrap, viewType.content);
labelModify.show();
+
}else{
labelAdd.show();
}
--- a/src/metadatacomposer/static/metadatacomposer/js/tangle.js Mon Jun 10 13:11:23 2013 +0200
+++ b/src/metadatacomposer/static/metadatacomposer/js/tangle.js Mon Jun 10 13:11:43 2013 +0200
@@ -45,6 +45,7 @@
});
row.find('.begin').text(chapterData.begin);
+ console.log(chapterData.getDuration())
row.find('.duration').text(chapterData.getDuration());
row.find('.end').text(chapterData.end);
@@ -58,7 +59,8 @@
}
function updateChapterDuration(val, chapterBefore, chapterAfter){
- if (val<=chapterAfter.end && val>=chapterBefore.begin) {
+
+ if (val<=chapterAfter.end && val>=chapterBefore.begin && chapterAfter.end-val>secMiniChapter*1000 && val-chapterBefore.begin>secMiniChapter*1000) {
chapterAfter.setBegin(val);
chapterBefore.setEnd(val);
@@ -83,8 +85,10 @@
var chapterAfter = chapters[indexChapter+1],
chapterBefore = currentChapter;
+
+ updateChapterDuration(val, chapterBefore, chapterAfter);
+
- updateChapterDuration(val, chapterBefore, chapterAfter);
});
/*
$(".tangle-start")
--- a/src/metadatacomposer/templates/metadatacomposer_edit.html Mon Jun 10 13:11:23 2013 +0200
+++ b/src/metadatacomposer/templates/metadatacomposer_edit.html Mon Jun 10 13:11:43 2013 +0200
@@ -85,6 +85,42 @@
</div>
</div>
<div class="chapter-widget-info">
+ <!--
+ <form action="#" class="form-chapter-edit">
+ <div class="row">
+ <div class="span3 text-right">
+ <input name="title" type="text">
+ <input name="tags" type="text" class="tag-it">
+ </div>
+ <div class="span3">
+ <input type="hidden" name="begin">
+ <input type="hidden" name="duration">
+ <input type="hidden" name="end">
+ <table class="table text-right">
+ <thead>
+ <tr>
+ <th class="span1">Début</th>
+ <th class="span1">Durée</th>
+ <th class="span1">Fin</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td class="span1 begin">4:20</td>
+ <td class="span1 duration">4:20</td>
+ <td class="span1 end">4:20</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ <div class="row">
+ <div class="span6 text-center">
+ <textarea class="" name="description" id=""></textarea>
+ </div>
+ </div>
+ </form>
+ -->
</div>
<div class="list-chapter-wrap">
<h4><i class="icon-flag"></i> <i class="icon-th-list"></i> Liste des chapitres</h4>
@@ -100,6 +136,27 @@
</tr>
</thead>
<tbody class="list-chapter-rows-wrap">
+ <!--
+ <tr id="row-list-chapter-id1">
+ <td>Titre d'un chapitre</td>
+ <td>Tags, Tags, Tags</td>
+ <td>79:55</td>
+ <td>79:55</td>
+ <td>79:55</td>
+ <td>
+ <table>
+ <tr>
+ <td>
+ <a href="" class="btn edit-chapter"><i class="icon-pencil"></i></a>
+ </td>
+ <td>
+ <a data-title="Chapitre 1" href="#row-list-chapter-id1" class="btn btn-delete"><i class="icon-trash delete-annotation"></i></a>
+ </td>
+ </tr>
+ </table>
+ </td>
+ </tr>
+ -->
</tbody>
</table>
</div>
@@ -140,6 +197,36 @@
</tr>
</thead>
<tbody id="list-annotations-rows">
+ <!--
+ <tr id="row-list-annotation-id1">
+ <td>Titre annotation</td>
+ <td>Vidéo</td>
+ <td>4:26</td>
+ <td>4:26</td>
+ <td>4:26</td>
+ <td>
+ <a href="#" data-id="annotation-123" class="btn btn-edit-annotation" data-type="video">
+ <i class="icon-pencil"></i></a>
+ <a data-id="annotation-123" data-type="annotation" data-title="Annotation XYZ" href="#row-list-annotation-id1" class="btn btn-delete">
+ <i class="icon-trash delete-annotation"></i>
+ </a>
+ </td>
+ </tr>
+ <tr id="row-list-annotation-id2">
+ <td>Titre annotation</td>
+ <td>Diaporama</td>
+ <td>4:26</td>
+ <td>4:26</td>
+ <td>4:26</td>
+ <td>
+ <a href="#" data-id="annotation-456" class="btn btn-edit-annotation" data-type="diaporama">
+ <i class="icon-pencil "></i></a>
+ <a data-id="annotation-456" data-type="annotation" data-title="Annotation XYZ" href="#row-list-annotation-id2" class="btn btn-delete">
+ <i class="icon-trash delete-annotation"></i>
+ </a>
+ </td>
+ </tr>
+ -->
</tbody>
</table>
</div>
@@ -249,14 +336,13 @@
<div class="edit-annotation-title row">
<h3 class="span3"><i class="icon-film"></i> Vidéo</h3>
<span class="span3">
- Ajouter une vidéo
- <a data-type-media="video" data-id="annotation-azerty" data-title="Ajouter une vidéo" class="btn btn-success open-modal"
- href="{% url 'composer_modal_content_library' branding=branding %}?mode=library"><i class="icon-plus"></i></a>
+ <span class="label-add-video">Ajouter une vidéo </span>
+ <a data-type-media="video" data-id="annotation-azerty" data-title="Ajouter une vidéo" class="btn btn-success open-modal" href="modal-bibliotheque-video.html"><i class="icon-plus"></i></a>
</span>
</div>
<div class="row annotation-video-content">
<div class="span6">
- <img src="{% static 'metadatacomposer/img/460x345.gif' %}" alt="">
+ <img src="img/460x345.gif" alt="">
<table class="table">
<tbody>
<tr>
@@ -311,8 +397,7 @@
<h3 class="span3"><i class="icon-picture"></i> Diaporama</h3>
<span class="span3">
Ajouter une image
- <a data-type-media="image" data-diaporama="diaporama-id1" data-title="Ajouter une image" class="btn btn-success open-modal"
- href="{% url 'composer_modal_image_library' branding=branding %}"><i class="icon-plus"></i></a>
+ <a data-type-media="image" data-diaporama="diaporama-id1" data-title="Ajouter une image" class="btn btn-success open-modal" href="modal-bibliotheque-image.html"><i class="icon-plus"></i></a>
</span>
</div>
<div class="row config-diaporama">
@@ -343,7 +428,7 @@
</thead>
<tbody id="diaporama-id1" class="list-image-diaporama ui-sortable">
<tr id="rid-id1" class="row-image-diaporama">
- <td><img src="{% static 'metadatacomposer/img/60x60.gif' %}" alt=""> </td>
+ <td><img src="img/60x60.gif" alt=""> </td>
<td>Titre annotation 1</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis aliquid non placeat consequuntur fugit minima.</td>
<td>
@@ -359,6 +444,40 @@
</table>
</td>
</tr>
+ <tr id="rid-id2" class="row-image-diaporama">
+ <td><img src="img/60x60.gif" alt=""> </td>
+ <td>Titre annotation 2</td>
+ <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis aliquid non placeat consequuntur fugit minima.</td>
+ <td>
+ <table>
+ <tr>
+ <td><a href="" class="btn"><i class="icon-pencil"></i></a></td>
+ <td><a href="" class="btn"><i class="icon-trash"></i></a></td>
+ </tr>
+ <tr>
+ <td><a href="" class="btn btn-sort down"><i class="icon-angle-down"></i></a></td>
+ <td><a href="" class="btn btn-sort up"><i class="icon-angle-up"></i></a></td>
+ </tr>
+ </table>
+ </td>
+ </tr>
+ <tr id="rid-id3" class="row-image-diaporama">
+ <td><img src="img/60x60.gif" alt=""> </td>
+ <td>Titre annotation 3</td>
+ <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis aliquid non placeat consequuntur fugit minima.</td>
+ <td>
+ <table>
+ <tr>
+ <td><a href="" class="btn"><i class="icon-pencil"></i></a></td>
+ <td><a href="" class="btn"><i class="icon-trash"></i></a></td>
+ </tr>
+ <tr>
+ <td><a href="" class="btn btn-sort down"><i class="icon-angle-down"></i></a></td>
+ <td><a href="" class="btn btn-sort up"><i class="icon-angle-up"></i></a></td>
+ </tr>
+ </table>
+ </td>
+ </tr>
</tbody>
</table>
</div>
@@ -377,7 +496,7 @@
</div>
<!-- modal -->
- <div id="modal-template" class="modal hide fade popup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+ <div id="modal-template" class="modal hide fade popup" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3></h3>
@@ -387,7 +506,7 @@
</div>
</div>
- <div id="modal-confirm" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+ <div id="modal-confirm" class="modal hide fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3><i class="icon-warning-sign"></i> Confirmation de la suppression</h3>
@@ -401,17 +520,34 @@
</div>
</div>
+ <div id="modal-alert" class="modal hide fade" tabindex="-1" role="dialog" aria-hidden="true">
+ <div class="modal-header">
+ <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+ <h3 id="myModalLabel"><i class="icon-warning-sign"></i> Attention</h3>
+ </div>
+ <div class="modal-body">
+ <p class="alert-message" id="alert-chapter-duration">Les chapitres doivent durer au moins <strong></strong> secondes.</p>
+ <p class="alert-message" id="alert-chapter-number">Le projet doit contenir au moins un chapitre.</p>
+ </div>
+ <div class="modal-footer">
+ <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
+ </div>
+</div>
+
<div id="templates">
<script id="tpl-head" type="text/html">
<form action="#" class="form-info-general-annotation" data-id="{% templatetag openvariable %}id{% templatetag closevariable %}">
<div class="row">
<div class="span3 text-right">
- <input type="text" placeholder="Titre de l'annotation.." name="title" value="{% templatetag openvariable %}title{% templatetag closevariable %}">
- <textarea id="" name="description">{% templatetag openvariable %}description{% templatetag closevariable %}</textarea>
+ <label class="label-left" for="head-title">Titre :</label>
+ <input class="label-left" id="head-title" type="text" placeholder="Titre de l'annotation.." name="title" value="{% templatetag openvariable %}title{% templatetag closevariable %}">
+ <label class="label-left" for="head-description">Description :</label>
+ <textarea id="head-description" name="description">{% templatetag openvariable %}description{% templatetag closevariable %}</textarea>
</div>
<div class="span3">
- <input type="text" class="tag-it" data-type="annotation" value="{% templatetag openvariable %}keywords{% templatetag closevariable %}">
+ <label for="head-tags">Tags :</label>
+ <input id="head-tags" type="text" class="tag-it" data-type="annotation" value="{% templatetag openvariable %}keywords{% templatetag closevariable %}">
<table class="table text-right">
<thead>
<tr>
@@ -432,6 +568,7 @@
</div>
<div class="row">
<div class="span6 text-center">
+ <label class="label-left">Durée :</label>
<div data-id="{% templatetag openvariable %}id{% templatetag closevariable %}" id="" class="slider-duration"></div>
</div>
<div class="span6 text-right">
@@ -484,9 +621,9 @@
<div class="edit-annotation-title row">
<h3 class="span3"><i class="icon-film"></i> Vidéo</h3>
<span class="span3">
- <span class="label-add-video">Ajouter une vidéo</span>
- <span class="label-modify-video">Modifier la vidéo</span>
- <a data-id="annotation-{% templatetag openvariable %}id{% templatetag closevariable %}" data-type-media="video" data-title="Ajouter une vidéo" class="btn btn-success open-modal" href="{% url 'composer_modal_content_library' branding=branding %}?mode=library" data-hide-add-new><i class="icon-plus"></i></a>
+ <span class="label-add-video">Ajouter une vidéo <a data-id="annotation-{% templatetag openvariable %}id{% templatetag closevariable %}" data-type-media="video" data-title="Ajouter une vidéo" class="btn btn-success open-modal" href="modal-bibliotheque-video.html" data-hide-add-new><i class="icon-plus"></i></a></span>
+ <span class="label-modify-video">Modifier la vidéo <a data-id="annotation-{% templatetag openvariable %}id{% templatetag closevariable %}" data-type-media="video" data-title="Modifier la vidéo" class="btn btn-success open-modal" href="modal-bibliotheque-video.html" data-hide-add-new><i class="icon-pencil"></i></a></span>
+
</span>
</div>
<div class="row annotation-video-content">
@@ -525,7 +662,7 @@
<h3 class="span3"><i class="icon-picture"></i> Diaporama</h3>
<span class="span3">
Ajouter une image
- <a data-type-media="image" data-diaporama="diaporama-{% templatetag openvariable %}id{% templatetag closevariable %}" data-title="Ajouter une image" class="btn btn-success open-modal" href="{% url 'composer_modal_image_library' branding=branding %}" data-hide-add-new><i class="icon-plus"></i></a>
+ <a data-type-media="image" data-diaporama="diaporama-{% templatetag openvariable %}id{% templatetag closevariable %}" data-title="Ajouter une image" class="btn btn-success open-modal" href="modal-bibliotheque-image.html" data-hide-add-new><i class="icon-plus"></i></a>
</span>
</div>
<div class="row config-diaporama">
@@ -652,7 +789,7 @@
</script>
<script id="tpl-list-annotation-row" type="text/html">
-<tr id="row-list-annotation-{% templatetag openvariable %}id{% templatetag closevariable %}" style="background-color : {% templatetag openvariable %}color{% templatetag closevariable %};">
+<tr data-id="{% templatetag openvariable %}id{% templatetag closevariable %}" id="row-list-annotation-{% templatetag openvariable %}id{% templatetag closevariable %}" style="background-color : {% templatetag openvariable %}color{% templatetag closevariable %};">
<td>{% templatetag openvariable %}title{% templatetag closevariable %}</td>
<td><i class="icon-{% templatetag openvariable %}iconTab{% templatetag closevariable %}"></i></td>
<td>{% templatetag openvariable %}begin{% templatetag closevariable %}</td>
@@ -669,7 +806,7 @@
</script>
<script id="tpl-chapter-row" type="text/html">
-<tr id="row-list-chapter-{% templatetag openvariable %}id{% templatetag closevariable %}" style="background-color : {% templatetag openvariable %}color{% templatetag closevariable %};">
+<tr class="row-list-chapter" data-id="{% templatetag openvariable %}id{% templatetag closevariable %}" id="row-list-chapter-{% templatetag openvariable %}id{% templatetag closevariable %}" style="background-color : {% templatetag openvariable %}color{% templatetag closevariable %};">
<td class="list-chapter-title">{% templatetag openvariable %}title{% templatetag closevariable %}</td>
<td class="list-chapter-tags">{% templatetag openvariable %}keywords{% templatetag closevariable %}</td>
<td class="begin">{% templatetag openvariable %}begin{% templatetag closevariable %}</td>
@@ -682,7 +819,7 @@
<a href="#" title="Editer le chapitre" class="btn btn-edit-chapter" data-chapter-id="{% templatetag openvariable %}id{% templatetag closevariable %}"><i class="icon-pencil"></i></a>
</td>
<td>
- <a data-title="{% templatetag openvariable %}title{% templatetag closevariable %}" title="Supprimer le chapitre" data-chapter-id="{% templatetag openvariable %}id{% templatetag closevariable %}" href="#row-list-chapter-{% templatetag openvariable %}id{% templatetag closevariable %}" class="btn btn-delete btn-delete-chapter"><i class="icon-trash delete-annotation"></i></a>
+ <a data-title="{% templatetag openvariable %}title{% templatetag closevariable %}" title="Supprimer le chapitre" data-chapter-id="{% templatetag openvariable %}id{% templatetag closevariable %}" href="#row-list-chapter-{% templatetag openvariable %}id{% templatetag closevariable %}" class="btn btn-delete-chapter"><i class="icon-trash delete-annotation"></i></a>
</td>
</tr>
</table>
@@ -695,8 +832,10 @@
<h4><i class="icon-flag"></i> <i class="icon-pencil"></i> Modifier le chapitre</h4>
<div class="row">
<div class="span3 text-right">
- <input name="title" type="text" value="{% templatetag openvariable %}title{% templatetag closevariable %}">
- <input name="keywords" type="text" class="tag-it" data-type="chapter" value="{% templatetag openvariable %}keywords{% templatetag closevariable %}">
+ <label class="label-left" for="chapter-title">Titre :</label>
+ <input id="chapter-title" name="title" type="text" value="{% templatetag openvariable %}title{% templatetag closevariable %}">
+ <label class="label-left" for="chapter-keywords">Tags :</label>
+ <input id="chapter-keywords" name="keywords" type="text" class="tag-it" data-type="chapter" value="{% templatetag openvariable %}keywords{% templatetag closevariable %}">
</div>
<div class="span3">
<table class="table text-right">
@@ -710,7 +849,7 @@
<tbody>
<tr>
<td class="span1"><span {% templatetag openvariable %}#beginTangle{% templatetag closevariable %}class="time-tangle tangle-start begin" data-milliseconds="{% templatetag openvariable %}begin.milliseconds{% templatetag closevariable %}"{% templatetag openvariable %}/beginTangle{% templatetag closevariable %}>{% templatetag openvariable %}begin{% templatetag closevariable %}</span></td>
- <td class="span1"><span>{% templatetag openvariable %}getDuration{% templatetag closevariable %}</span></td>
+ <td class="span1"><span class="duration">{% templatetag openvariable %}getDuration{% templatetag closevariable %}</span></td>
<td class="span1"><span {% templatetag openvariable %}#endTangle{% templatetag closevariable %}class="time-tangle tangle-end end" data-milliseconds="{% templatetag openvariable %}end.milliseconds{% templatetag closevariable %}"{% templatetag openvariable %}/endTangle{% templatetag closevariable %}>{% templatetag openvariable %}end{% templatetag closevariable %}</span></td>
</tr>
</tbody>
@@ -719,12 +858,13 @@
</div>
<div class="row">
<div class="span6 text-center">
- <textarea class="" name="description" id="">{% templatetag openvariable %}description{% templatetag closevariable %}</textarea>
+ <label class="label-left" for="chapter-description">Description :</label>
+ <textarea class="" name="description" id="chapter-description">{% templatetag openvariable %}description{% templatetag closevariable %}</textarea>
</div>
</div>
<div class="row">
<div class="span6 text-right">
- <a data-title="{% templatetag openvariable %}title{% templatetag closevariable %}" title="Supprimer le chapitre" data-chapter-id="{% templatetag openvariable %}id{% templatetag closevariable %}" href="#row-list-chapter-{% templatetag openvariable %}id{% templatetag closevariable %}" class="btn btn-delete btn-danger btn-delete-chapter">
+ <a data-title="{% templatetag openvariable %}title{% templatetag closevariable %}" title="Supprimer le chapitre" data-chapter-id="{% templatetag openvariable %}id{% templatetag closevariable %}" href="#row-list-chapter-{% templatetag openvariable %}id{% templatetag closevariable %}" class="btn btn-danger btn-delete-chapter">
<i class="icon-trash"></i> Delete
</a>
<a class="btn btn-primary btn-ok-chapter" href="#" data-id="{% templatetag openvariable %}id{% templatetag closevariable %}">
@@ -736,13 +876,18 @@
</script>
<script id="tpl-annotation-in-timeline" type="text/html">
-<a style="left:{% templatetag openvariable %}left{% templatetag closevariable %}px; width:{% templatetag openvariable %}width{% templatetag closevariable %}px; background-color:{% templatetag openvariable %}color{% templatetag closevariable %};" data-id="{% templatetag openvariable %}id{% templatetag closevariable %}" id="annotation-timeline-{% templatetag openvariable %}id{% templatetag closevariable %}" class="annotation">
+<a title="{% templatetag openvariable %}title{% templatetag closevariable %}" style="left:{% templatetag openvariable %}left{% templatetag closevariable %}px; width:{% templatetag openvariable %}width{% templatetag closevariable %}px; background-color:{% templatetag openvariable %}color{% templatetag closevariable %};" data-id="{% templatetag openvariable %}id{% templatetag closevariable %}" id="annotation-timeline-{% templatetag openvariable %}id{% templatetag closevariable %}" class="annotation">
<i class="icon-pencil"></i> <span>{% templatetag openvariable %}title{% templatetag closevariable %}</span>
</a>
</script>
<script id="tpl-item-annotation-display" type="text/html">
-<li id="item-current-annotation-{% templatetag openvariable %}id{% templatetag closevariable %}" data-id="{% templatetag openvariable %}id{% templatetag closevariable %}"><a style="background-color: {% templatetag openvariable %}color{% templatetag closevariable %};" data-id="{% templatetag openvariable %}id{% templatetag closevariable %}" href="#" title="{% templatetag openvariable %}title{% templatetag closevariable %}"><i class="icon-align-left"></i></a></li>
+<li data-id="{% templatetag openvariable %}id{% templatetag closevariable %}">
+ <a id="item-current-annotation-{% templatetag openvariable %}id{% templatetag closevariable %}" class="item-display-annotation" data-id="{% templatetag openvariable %}id{% templatetag closevariable %}" style="background-color: {% templatetag openvariable %}color{% templatetag closevariable %};" data-id="{% templatetag openvariable %}id{% templatetag closevariable %}" href="#">
+ <i class="icon-{% templatetag openvariable %}iconTab{% templatetag closevariable %}"></i>
+ <span>{% templatetag openvariable %}title{% templatetag closevariable %}</span>
+ </a>
+</li>
</script>
</div><!-- /#templates -->