integration/edition.html
changeset 34 e3a17ec94cd8
parent 28 a0a048ff33a1
child 35 6eb0de10e9f8
--- a/integration/edition.html	Wed May 22 17:10:38 2013 +0200
+++ b/integration/edition.html	Thu May 23 18:11:55 2013 +0200
@@ -2,7 +2,7 @@
 <html>
 <head>
 	<meta charset="utf-8">
-    <title>Aix - Back office > Liste des projets</title>
+    <title>Aix - Back office > Edition</title>
 	<!--[if lt IE 9]>
 		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 	<![endif]-->
@@ -57,8 +57,9 @@
 				<div class="row">
 					<div class="span6">
 						<div class="main-video"></div>
-						<div class="timeline-annotation-widget">
-							<div class="annotation" style="left:20%"></div>
+						<div class="timeline-annotations-wrap">
+							<div class="indicateur-annotation"></div>
+							<div class="timeline-annotations"></div>
 						</div>
 <!-- chapter-widget -->
 						<div class="chapter-widget">
@@ -68,7 +69,7 @@
 									<div class="indicateur-chapter"></div>
 									<ul class="chapter-segments"></ul>
 									
-									<a href="#" class="btn btn-primary btn-cut-chapter"><i class="icon-flag"></i> Nouveau chapitre</a>
+									<a href="#" class="btn btn-primary btn-cut-chapter"><i class="icon-flag"></i> <i class="icon-cut"></i></a>
 								</div>
 							</div>
 							<div class="chapter-widget-info">
@@ -110,7 +111,7 @@
 							-->
 							</div>
 							<div class="list-chapter-wrap">
-								<h4><i class="icon-flag"></i> Liste des chapitres</h4>
+								<h4><i class="icon-flag"></i> <i class="icon-th-list"></i> Liste des chapitres</h4>
 								<table class="table">
 									<thead>
 										<tr>
@@ -152,64 +153,69 @@
 					</div>
 					<div class="span6 col-right">
 <!-- tab -->
-						<ul class="nav nav-tabs" id="annotation-tab">
-							<li class="active"><a id="tab-list-annotation" href="#list-annotations"><i class="icon-bookmark"></i> Annotations</a></li>
+						<ul class="nav nav-tabs" id="onglet-annotations">
+							<li class="active"><a data-toggle="list-annotations" id="tab-list-annotation" href="#list-annotations"><i class="icon-bookmark"></i> Annotations</a></li>
 							<li><a href="#annotation-azerty"><i class="icon-film"></i> All <span class="close-tab">&times;</span></a> </li>
 						</ul>
 
 						<div class="tab-content">
 <!-- liste annotations -->
 							<div class="tab-pane active" id="list-annotations">
-								<div class="add-annotation-wrap">
-									<strong><i class="icon-plus"></i> Ajouter :</strong>
-									<a href="#" data-type="video" class="btn open-tab"><i class="icon-film"></i> Vidéo</a>
-									<a href="#" data-type="diaporama" class="btn open-tab"><i class="icon-picture"></i> Diaporama</a>
-									<a href="#" data-type="text" class="btn open-tab"><i class="icon-align-left"></i> Texte</a>
-									<a href="#" data-type="html" class="btn open-tab"><i class="icon-link"></i> Html</a>
+								<div class="add-annotation-wrap section">
+									<h4 class="title-section"><i class="icon-bookmark"></i> <i class="icon-plus"></i> Ajouter une annotation de type</h4>
+									<div class="text-center">
+										<a href="#" data-type="son" class="btn open-tab"><i class="icon-volume-up"></i> Son</a>
+										<a href="#" data-type="video" class="btn open-tab"><i class="icon-film"></i> Vidéo</a>
+										<a href="#" data-type="diaporama" class="btn open-tab"><i class="icon-picture"></i> Diaporama</a>
+										<a href="#" data-type="text" class="btn open-tab"><i class="icon-align-left"></i> Texte</a>
+										<a href="#" data-type="html" class="btn open-tab"><i class="icon-link"></i> Html</a>
+									</div>
 								</div>
-								<h4>Liste des annotations</h4>
-								<table class="table table-striped">
-									<thead>
-										<tr>
-											<th>Titre</th>
-											<th>Type</th>
-											<th>Début</th>
-											<th>Durée</th>
-											<th>Fin</th>
-											<th>Actions</th>
-										</tr>
-									</thead>
-									<tbody>
-										<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 class="list-annotation-wrap">
+									<h4><i class="icon-bookmark"></i> <i class="icon-th-list"></i> Liste des annotations</h4>
+									<table class="table">
+										<thead>
+											<tr>
+												<th>Titre</th>
+												<th>Type</th>
+												<th>Début</th>
+												<th>Durée</th>
+												<th>Fin</th>
+												<th>Actions</th>
+											</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>
 							</div>
 <!-- exemple annotation all -->
 							<div class="tab-pane" id="annotation-azerty">