Added an edit button to make edit functionality easier to read
authordurandn
Mon, 21 Sep 2015 18:25:06 +0200
changeset 1060 3a4f2217a04f
parent 1059 8158421193e3
child 1061 7d22bfd6b73b
Added an edit button to make edit functionality easier to read
src/widgets/CurrentSegmentInfobox.css
src/widgets/CurrentSegmentInfobox.js
--- a/src/widgets/CurrentSegmentInfobox.css	Mon Sep 21 18:24:32 2015 +0200
+++ b/src/widgets/CurrentSegmentInfobox.css	Mon Sep 21 18:25:06 2015 +0200
@@ -112,6 +112,33 @@
 	width: 80px;
 }
 
+.Ldt-CurrentSegmentInfobox-EditButton{
+	float: right;
+	display: inline-block;
+    background-color: #d93c71;
+    color: #ffffff;
+    cursor: pointer;
+    height: 18px;
+    width: 95px;
+    font-size: 14px;
+    border: 1px solid;
+    border-color: #eca3bc #631e34 #36101c #e16e93;
+    cursor: pointer;
+    margin-right: 5px;
+    margin-left: 5px;
+    margin-bottom: 5px;
+    margin-top: 5px;
+    padding: 4px;
+    text-align: center;
+	vertical-align: middle;
+	line-height: 18px;
+}
+
+.Ldt-CurrentSegmentInfobox-EditButton:hover{
+	background-color: #e15581;
+	border-color: #222222 #e87d9f #f0adc3 #68273c;
+}
+
 .Ldt-CurrentSegmentInfobox-CreateTagButton:hover, .Ldt-CurrentSegmentInfobox-CancelButton:hover,
 .Ldt-CurrentSegmentInfobox-SubmitButton:hover{
 	background-color: #e15581;
--- a/src/widgets/CurrentSegmentInfobox.js	Mon Sep 21 18:24:32 2015 +0200
+++ b/src/widgets/CurrentSegmentInfobox.js	Mon Sep 21 18:25:06 2015 +0200
@@ -19,6 +19,7 @@
 
 IriSP.Widgets.CurrentSegmentInfobox.prototype.template = 
       '<div class="Ldt-CurrentSegmentInfobox">'
+    +     '{{#editable_segments}}<div class="Ldt-CurrentSegmentInfobox-EditButton">{{edit}}</div>{{/editable_segments}}'
     +     '<div class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-Title">{{title}}</div>'
     +     '<div class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-Description">{{description}}</div>' 
     +     '<div class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-Tags">'
@@ -68,6 +69,7 @@
     fr : {
         submit : "Soumettre",
         cancel : "Annuler",
+        edit : "Editer",
         new_tag : "Nouveau tag",
         delete_tag : "Supprimer",
         empty : "Le player vidéo ne lit actuellement aucun segment"
@@ -75,6 +77,7 @@
     en: {
         submit : "Submit",
         cancel : "Cancel",
+        edit : "Edit",
         new_tag : "New tag",
         delete_tag : "Delete tag",
         empty : "The player currently doesn't read any segment"
@@ -100,9 +103,11 @@
             if (_this.currentSegment.id != _list[0].id){
                 _this.currentSegment = _list[0];
                 _data = {
-                    title: _this.currentSegment.title,
-                    description : _this.currentSegment.description,
-                    tags : _this.currentSegment.getTagTexts()
+                        editable_segments: _this.editable_segments,
+                        edit: _this.l10n.edit,
+                        title: _this.currentSegment.title,
+                        description : _this.currentSegment.description,
+                        tags : _this.currentSegment.getTagTexts()
                 }
                 _this.$.html(Mustache.to_html(_this.template, _data))
                 if(_this.editable_segments&&_this.currentSegment){
@@ -145,11 +150,13 @@
 
 IriSP.Widgets.CurrentSegmentInfobox.prototype.disableEditMode = function() {
     if(this.currentSegment){
-        data = {
-            title: this.currentSegment.title,
-            description : this.currentSegment.description,
-            tags : this.currentSegment.getTagTexts()
-        }
+        _data = {
+                editable_segments: this.editable_segments,
+                edit: this.l10n.edit,
+                title: this.currentSegment.title,
+                description : this.currentSegment.description,
+                tags : this.currentSegment.getTagTexts()
+            }
         this.$.toggleClass("editing", false);
         this.$.html(Mustache.to_html(this.template, _data));
         this.$.find(".Ldt-CurrentSegmentInfobox").click(this.functionWrapper("enableEditMode")); 
@@ -248,10 +255,12 @@
             _this.segments.push(_annotation)
             _this.currentSegment = _annotation
             _data = {
-                title: _this.currentSegment.title,
-                description : _this.currentSegment.description,
-                tags : _this.currentSegment.getTagTexts()
-            }
+                    editable_segments: _this.editable_segments,
+                    edit: _this.l10n.edit,
+                    title: _this.currentSegment.title,
+                    description : _this.currentSegment.description,
+                    tags : _this.currentSegment.getTagTexts()
+                }
             _this.$.html(Mustache.to_html(_this.template, _data))
             if(_this.editable_segments&&_this.currentSegment){
                 _this.$.find(".Ldt-CurrentSegmentInfobox").click(_this.functionWrapper("enableEditMode"));             
@@ -277,6 +286,8 @@
             if (this.currentSegment.id != _list[0].id){
                 this.currentSegment = _list[0];
                 _data = {
+                    editable_segments: this.editable_segments,
+                    edit: this.l10n.edit,
                     title: this.currentSegment.title,
                     description : this.currentSegment.description,
                     tags : this.currentSegment.getTagTexts()