Change style of contributionlists

This commit is contained in:
Patrick Jentsch 2023-02-21 11:05:23 +01:00
parent 8d70e93856
commit ff238cd823
2 changed files with 16 additions and 19 deletions

View File

@ -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><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><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> <td>
<div class="list-action-trigger switch center-align" data-list-action="share-request"> <span class="disable-on-click">
<span class="share"></span>
<label> <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> </label>
</div> </span>
</td> </td>
<td class="right-align"> <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> <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> <tr>
<th>Title and Description</th> <th>Title and Description</th>
<th>Publisher</th> <th>Publisher</th>
<th>Availability</th>
<th></th> <th></th>
</tr> </tr>
</thead> </thead>
@ -111,6 +110,7 @@ class SpaCyNLPPipelineModelList extends ResourceList {
} }
onChange(event) { onChange(event) {
if (event.target.tagName !== 'INPUT') {return;}
let listItemElement = event.target.closest('.list-item[data-id]'); let listItemElement = event.target.closest('.list-item[data-id]');
if (listItemElement === null) {return;} if (listItemElement === null) {return;}
let itemId = listItemElement.dataset.id; let itemId = listItemElement.dataset.id;
@ -118,7 +118,7 @@ class SpaCyNLPPipelineModelList extends ResourceList {
if (listActionElement === null) {return;} if (listActionElement === null) {return;}
let listAction = listActionElement.dataset.listAction; let listAction = listActionElement.dataset.listAction;
switch (listAction) { switch (listAction) {
case 'share-request': { case 'toggle-is-public': {
Utils.spaCyNLPPipelineModelToggleIsPublicRequest(this.userId, itemId); Utils.spaCyNLPPipelineModelToggleIsPublicRequest(this.userId, itemId);
break; break;
} }
@ -129,15 +129,11 @@ class SpaCyNLPPipelineModelList extends ResourceList {
} }
onClick(event) { onClick(event) {
if (event.target.closest('.disable-on-click') !== null) {return;}
let listItemElement = event.target.closest('.list-item[data-id]'); let listItemElement = event.target.closest('.list-item[data-id]');
if (listItemElement === null) {return;} if (listItemElement === null) {return;}
let itemId = listItemElement.dataset.id; let itemId = listItemElement.dataset.id;
let listActionElement = event.target.closest('.list-action-trigger[data-list-action]'); 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; let listAction = listActionElement === null ? 'view' : listActionElement.dataset.listAction;
switch (listAction) { switch (listAction) {
case 'delete-request': { case 'delete-request': {

View File

@ -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><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><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> <td>
<div class="list-action-trigger switch center-align" data-list-action="share-request"> <span class="disable-on-click">
<span class="share"></span>
<label> <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> </label>
</div> </span>
</td> </td>
<td class="right-align"> <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> <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> <tr>
<th>Title and Description</th> <th>Title and Description</th>
<th>Publisher</th> <th>Publisher</th>
<th>Availability</th>
<th></th> <th></th>
</tr> </tr>
</thead> </thead>
@ -120,6 +119,7 @@ class TesseractOCRPipelineModelList extends ResourceList {
} }
onChange(event) { onChange(event) {
if (event.target.tagName !== 'INPUT') {return;}
let listItemElement = event.target.closest('.list-item[data-id]'); let listItemElement = event.target.closest('.list-item[data-id]');
if (listItemElement === null) {return;} if (listItemElement === null) {return;}
let itemId = listItemElement.dataset.id; let itemId = listItemElement.dataset.id;
@ -127,7 +127,7 @@ class TesseractOCRPipelineModelList extends ResourceList {
if (listActionElement === null) {return;} if (listActionElement === null) {return;}
let listAction = listActionElement.dataset.listAction; let listAction = listActionElement.dataset.listAction;
switch (listAction) { switch (listAction) {
case 'share-request': { case 'toggle-is-public': {
Utils.tesseractOCRPipelineModelToggleIsPublicRequest(this.userId, itemId); Utils.tesseractOCRPipelineModelToggleIsPublicRequest(this.userId, itemId);
break; break;
} }
@ -138,6 +138,7 @@ class TesseractOCRPipelineModelList extends ResourceList {
} }
onClick(event) { onClick(event) {
if (event.target.closest('.disable-on-click') !== null) {return;}
let listItemElement = event.target.closest('.list-item[data-id]'); let listItemElement = event.target.closest('.list-item[data-id]');
if (listItemElement === null) {return;} if (listItemElement === null) {return;}
let itemId = listItemElement.dataset.id; let itemId = listItemElement.dataset.id;