Change style of contributionlists

app/static/js/ResourceLists/SpacyNLPPipelineModelList.js

@@ -30,14 +30,12 @@ class SpaCyNLPPipelineModelList extends ResourceList {
           <td><b><span class="title"></span> <span class="version"></span></b><br><i><span class="description"></span></i></td>
           <td><a class="publisher-url"><span class="publisher"></span></a> (<span class="publishing-year"></span>)<br><a class="publishing-url publishing-url-2"></a></td>
           <td>
-            <div class="list-action-trigger switch center-align" data-list-action="share-request">
+            <span class="disable-on-click">
-              <span class="share"></span>
               <label>
-                <input class="is-public" ${values['is-public'] ? 'checked' : ''} type="checkbox">
+                <input ${values['is-public'] ? 'checked' : ''} class="is-public list-action-trigger" data-list-action="toggle-is-public" type="checkbox">
-                <span class="lever"></span>
+                <span>Public</span>
-                public
               </label>
-            </div>
+            </span>
           </td>
           <td class="right-align">
             <a class="list-action-trigger btn-floating red waves-effect waves-light" data-list-action="delete-request"><i class="material-icons">delete</i></a>
@@ -80,6 +78,7 @@ class SpaCyNLPPipelineModelList extends ResourceList {
           <tr>
             <th>Title and Description</th>
             <th>Publisher</th>
+            <th>Availability</th>
             <th></th>
           </tr>
         </thead>
@@ -111,6 +110,7 @@ class SpaCyNLPPipelineModelList extends ResourceList {
   }
 
   onChange(event) {
+    if (event.target.tagName !== 'INPUT') {return;}
     let listItemElement = event.target.closest('.list-item[data-id]');
     if (listItemElement === null) {return;}
     let itemId = listItemElement.dataset.id;
@@ -118,7 +118,7 @@ class SpaCyNLPPipelineModelList extends ResourceList {
     if (listActionElement === null) {return;}
     let listAction = listActionElement.dataset.listAction;
     switch (listAction) {
-      case 'share-request': {
+      case 'toggle-is-public': {
         Utils.spaCyNLPPipelineModelToggleIsPublicRequest(this.userId, itemId);
         break;
       }
@@ -129,15 +129,11 @@ class SpaCyNLPPipelineModelList extends ResourceList {
   }
 
   onClick(event) {
+    if (event.target.closest('.disable-on-click') !== null) {return;}
     let listItemElement = event.target.closest('.list-item[data-id]');
     if (listItemElement === null) {return;}
     let itemId = listItemElement.dataset.id;
     let listActionElement = event.target.closest('.list-action-trigger[data-list-action]');
-    // ignore switch clicks, handle them by the onChange method instead
-    if (listActionElement.classList.contains('switch')) {
-      event.preventDefault();
-      this.onChange(event);
-    }
     let listAction = listActionElement === null ? 'view' : listActionElement.dataset.listAction;
     switch (listAction) {
       case 'delete-request': {

app/static/js/ResourceLists/TesseractOCRPipelineModelList.js

@@ -38,14 +38,12 @@ class TesseractOCRPipelineModelList extends ResourceList {
           <td><b><span class="title"></span> <span class="version"></span></b><br><i><span class="description"></span></i></td>
           <td><a class="publisher-url"><span class="publisher"></span></a> (<span class="publishing-year"></span>)<br><a class="publishing-url"><span class="publishing-url-2"></span></a></td>
           <td>
-            <div class="list-action-trigger switch center-align" data-list-action="share-request">
+            <span class="disable-on-click">
-              <span class="share"></span>
               <label>
-                <input ${values['is-public'] ? 'checked' : ''} class="is-public" type="checkbox">
+                <input ${values['is-public'] ? 'checked' : ''} class="is-public list-action-trigger" data-list-action="toggle-is-public" type="checkbox">
-                <span class="lever"></span>
+                <span>Public</span>
-                public
               </label>
-            </div>
+            </span>
           </td>
           <td class="right-align">
             <a class="list-action-trigger btn-floating red waves-effect waves-light" data-list-action="delete-request"><i class="material-icons">delete</i></a>
@@ -89,6 +87,7 @@ class TesseractOCRPipelineModelList extends ResourceList {
           <tr>
             <th>Title and Description</th>
             <th>Publisher</th>
+            <th>Availability</th>
             <th></th>
           </tr>
         </thead>
@@ -120,6 +119,7 @@ class TesseractOCRPipelineModelList extends ResourceList {
   }
 
   onChange(event) {
+    if (event.target.tagName !== 'INPUT') {return;}
     let listItemElement = event.target.closest('.list-item[data-id]');
     if (listItemElement === null) {return;}
     let itemId = listItemElement.dataset.id;
@@ -127,7 +127,7 @@ class TesseractOCRPipelineModelList extends ResourceList {
     if (listActionElement === null) {return;}
     let listAction = listActionElement.dataset.listAction;
     switch (listAction) {
-      case 'share-request': {
+      case 'toggle-is-public': {
         Utils.tesseractOCRPipelineModelToggleIsPublicRequest(this.userId, itemId);
         break;
       }
@@ -138,6 +138,7 @@ class TesseractOCRPipelineModelList extends ResourceList {
   }
 
   onClick(event) {
+    if (event.target.closest('.disable-on-click') !== null) {return;}
     let listItemElement = event.target.closest('.list-item[data-id]');
     if (listItemElement === null) {return;}
     let itemId = listItemElement.dataset.id;