erp5_run_my_doc: allow to delete a slide directly from the list

bt5/erp5_run_my_doc/SkinTemplateItem/portal_skins/erp5_run_my_doc/slideeditor.gadget.css.css

@@ -13,12 +13,8 @@ div[data-gadget-url$="slideeditor.gadget.html"] > .slide_list > section {
   background-color: #FFFFFF;
   border: 1px solid #000000;
   padding: 0.5em;
-  vertical-align: middle;
-  text-align: center;
   margin-right: 2em;
   margin-bottom: 2em;
-  display: flex;
-  flex-direction: column;
 }
 div[data-gadget-url$="slideeditor.gadget.html"] > .slide_list > section[data-slide-index] {
   cursor: move;
@@ -38,20 +34,27 @@ div[data-gadget-url$="slideeditor.gadget.html"] > .slide_list > section > img {
   z-index: 1;
   border-radius: 0.325em;
 }
+div[data-gadget-url$="slideeditor.gadget.html"] > .slide_list > section > h1 {
+  text-align: center;
+  padding-top: 2.5em;
+}
 div[data-gadget-url$="slideeditor.gadget.html"] > .slide_list > section button {
   padding: 3pt;
+  float: right;
   border: 1px solid rgba(0, 0, 0, 0.14);
   border-radius: 0.325em;
   background-color: #FFFFFF;
   width: 2em;
-  heigth: 2em;
-  min-height: 2em;
+  height: 2em;
   overflow: hidden;
   text-indent: -9999px;
   white-space: nowrap;
   position: relative;
   z-index: 2;
 }
+div[data-gadget-url$="slideeditor.gadget.html"] > .slide_list > section button:first-of-type {
+  float: left;
+}
 div[data-gadget-url$="slideeditor.gadget.html"] > .slide_list > section button::before {
   float: left;
   text-indent: 0;

bt5/erp5_run_my_doc/SkinTemplateItem/portal_skins/erp5_run_my_doc/slideeditor.gadget.js.js

@@ -439,7 +439,9 @@
       section_list = getSlideElementList(gadget.state.value),
       draggable_element_list = [],
       i,
-      content;
+      content,
+      edit_element,
+      delete_element;
 
     // Clone listbox header structure to reuse the css
     header_element = domsugar('div', {'class': 'document_table'}, [
@@ -450,12 +452,23 @@
     ]);
 
     for (i = 0; i < section_list.length; i += 1) {
+      edit_element = domsugar('button', {
+        type: 'button',
+        text: translation_dict.Edit,
+        'class': 'display-slide ui-icon-pencil ui-btn-icon-left',
+        'data-slide-index': i
+      });
+      delete_element = domsugar('button', {
+        type: 'button',
+        text: translation_dict.Delete,
+        'class': 'delete-slide ui-icon-trash-o ui-btn-icon-left',
+        'data-slide-index': i
+      });
       // If slide type is sreenshot/illustration, show image instead of title
       if (getSlideDictFromSlideElement(section_list[i]).image_url) {
         content = [
-          domsugar('button', {type: 'button', text: translation_dict.Edit,
-                   'class': 'display-slide ui-icon-pencil ui-btn-icon-left',
-                   'data-slide-index': i}),
+          edit_element,
+          delete_element,
           domsugar('img', {
             src: getSlideDictFromSlideElement(section_list[i]).image_url,
             draggable: false
@@ -463,9 +476,8 @@
         ];
       } else {
         content = [
-          domsugar('button', {type: 'button', text: translation_dict.Edit,
-                   'class': 'display-slide ui-icon-pencil ui-btn-icon-left',
-                   'data-slide-index': i}),
+          edit_element,
+          delete_element,
           domsugar('h1', {
             html: getSlideDictFromSlideElement(section_list[i]).title_html
           })
@@ -745,6 +757,23 @@
           });
       }
 
+      if (evt.target.className.indexOf("delete-slide") !== -1) {
+        return queue
+          .push(function () {
+            var slide_list = getSlideElementList(gadget.state.value);
+            slide_list.splice(parseInt(
+                evt.target.getAttribute('data-slide-index'),
+                10
+              ), 1);
+            return RSVP.all([
+              gadget.changeState({
+                value: slideListAsHTML(slide_list)
+              }),
+              gadget.notifyChange()
+            ]);
+          });
+      }
+
       if (evt.target.className.indexOf("dialog-comment") !== -1) {
         return queue
           .push(function () {

bt5/erp5_run_my_doc/SkinTemplateItem/portal_skins/erp5_run_my_doc/slideeditor.gadget.less.txt

@@ -23,8 +23,6 @@ div[data-gadget-url$="slideeditor.gadget.html"] {
       background-color:#FFFFFF;
       border: 1px solid #000000;
       padding: 0.5em;
-      vertical-align: middle;
-      text-align: center;
       // color:#000000;
 
       &.drag {
@@ -43,22 +41,28 @@ div[data-gadget-url$="slideeditor.gadget.html"] {
         z-index: 1;
         border-radius: 0.325em;
       }
+      & > h1 {
+        text-align: center;
+        padding-top: 2.5em;
+      }
 
       // Spacing between every section
       margin-right: 2em;
       margin-bottom: 2em;
 
-      display: flex;
-      flex-direction: column;
       button {
         padding: 3pt;
+        float: right;
+        &:first-of-type {
+          float: left;
+        }
+
         border: 1px solid rgba(0, 0, 0, 0.14);
         border-radius: 0.325em;
         background-color: #FFFFFF;
 
         width: 2em;
-        heigth: 2em;
-        min-height: 2em;
+        height: 2em;
         overflow: hidden;
         text-indent: -9999px;
         white-space: nowrap;