|
1 | 1 | <template> |
2 | | - <div class="columns is-multiline is-mobile has-text-centered" v-if="hasItems"> |
3 | | - <div class="column is-half-mobile"> |
4 | | - <button type="button" class="button is-fullwidth is-ghost is-inverted" |
5 | | - @click="masterSelectAll = !masterSelectAll"> |
6 | | - <span v-if="selectedElms.length > 0" class="mr-2 tag is-danger"> |
7 | | - {{ selectedElms.length }} |
| 2 | + <div class="columns is-multiline is-mobile has-text-centered is-justify-content-flex-end" v-if="hasItems"> |
| 3 | + <div class="column is-narrow"> |
| 4 | + <button type="button" class="button is-fullwidth" @click="masterSelectAll = !masterSelectAll" |
| 5 | + :class="{ 'has-text-primary': !masterSelectAll, 'has-text-danger': masterSelectAll }"> |
| 6 | + <span class="icon"> |
| 7 | + <i :class="!masterSelectAll ? 'fa-regular fa-square-check' : 'fa-regular fa-square'" /> |
8 | 8 | </span> |
9 | | - <span class="icon-text is-block"> |
10 | | - <span class="icon"> |
11 | | - <i :class="!masterSelectAll ? 'fa-regular fa-square-check' : 'fa-regular fa-square'" /> |
12 | | - </span> |
13 | | - <span v-if="!masterSelectAll">Select All</span> |
14 | | - <span v-else>Unselect All</span> |
| 9 | + <span v-if="!masterSelectAll">Select</span> |
| 10 | + <span v-else>Unselect</span> |
| 11 | + <span v-if="selectedElms.length > 0"> |
| 12 | + (<u class="has-text-danger">{{ selectedElms.length }}</u>) |
15 | 13 | </span> |
16 | 14 | </button> |
17 | 15 | </div> |
18 | | - <div class="column is-half-mobile"> |
19 | | - <button type="button" class="button is-fullwidth is-link" @click="downloadSelected" |
20 | | - :disabled="!hasDownloaded || !hasSelected" |
21 | | - v-tooltip="!hasSelected || !hasDownloaded ? '' : 'Download items as zip'"> |
22 | | - <span class="icon-text is-block"> |
| 16 | + <div class="column is-2-tablet is-5-mobile"> |
| 17 | + <Dropdown label="Actions" icons="fa-solid fa-list"> |
| 18 | + <a class="dropdown-item has-text-link" @click="(hasDownloaded && hasSelected) ? downloadSelected() : null" |
| 19 | + :style="{ opacity: (!hasDownloaded || !hasSelected) ? 0.5 : 1, cursor: (!hasDownloaded || !hasSelected) ? 'not-allowed' : 'pointer' }" |
| 20 | + v-tooltip="!hasSelected || !hasDownloaded ? '' : 'Download items as zip'"> |
23 | 21 | <span class="icon"><i class="fa-solid fa-compress-alt" /></span> |
24 | 22 | <span>Download</span> |
25 | | - </span> |
26 | | - </button> |
27 | | - </div> |
28 | | - <div class="column is-half-mobile"> |
29 | | - <button type="button" class="button is-fullwidth is-danger" @click="deleteSelectedItems" :disabled="!hasSelected"> |
30 | | - <span class="icon-text is-block"> |
| 23 | + </a> |
| 24 | + <a class="dropdown-item has-text-danger" @click="hasSelected ? deleteSelectedItems() : null" |
| 25 | + :style="{ opacity: !hasSelected ? 0.5 : 1, cursor: !hasSelected ? 'not-allowed' : 'pointer' }"> |
31 | 26 | <span class="icon"><i class="fa-solid fa-trash-can" /></span> |
32 | 27 | <span>{{ config.app.remove_files ? 'Remove' : 'Clear' }}</span> |
33 | | - </span> |
34 | | - </button> |
35 | | - </div> |
36 | | - <div class="column is-half-mobile" v-if="hasCompleted"> |
37 | | - <button type="button" class="button is-fullwidth is-primary is-inverted" @click="clearCompleted"> |
38 | | - <span class="icon-text is-block"> |
| 28 | + </a> |
| 29 | + <hr class="dropdown-divider" v-if="hasCompleted || hasIncomplete"> |
| 30 | + <a v-if="hasCompleted" class="dropdown-item has-text-primary" @click="clearCompleted"> |
39 | 31 | <span class="icon"><i class="fa-solid fa-circle-check" /></span> |
40 | 32 | <span>Clear Completed</span> |
41 | | - </span> |
42 | | - </button> |
43 | | - </div> |
44 | | - <div class="column is-half-mobile" v-if="hasIncomplete"> |
45 | | - <button type="button" class="button is-fullwidth is-info is-inverted" @click="clearIncomplete"> |
46 | | - <span class="icon-text is-block"> |
| 33 | + </a> |
| 34 | + <a v-if="hasIncomplete" class="dropdown-item has-text-info" @click="clearIncomplete"> |
47 | 35 | <span class="icon"><i class="fa-solid fa-circle-xmark" /></span> |
48 | 36 | <span>Clear Incomplete</span> |
49 | | - </span> |
50 | | - </button> |
51 | | - </div> |
52 | | - <div class="column is-half-mobile" v-if="hasIncomplete"> |
53 | | - <button type="button" class="button is-fullwidth is-warning is-inverted" @click="retryIncomplete"> |
54 | | - <span class="icon-text is-block"> |
| 37 | + </a> |
| 38 | + <a v-if="hasIncomplete" class="dropdown-item has-text-warning" @click="retryIncomplete"> |
55 | 39 | <span class="icon"><i class="fa-solid fa-rotate-right" /></span> |
56 | 40 | <span>Retry Incomplete</span> |
57 | | - </span> |
58 | | - </button> |
| 41 | + </a> |
| 42 | + </Dropdown> |
59 | 43 | </div> |
60 | | - <div class="column is-1-tablet"> |
61 | | - <button type="button" class="button is-fullwidth" @click="direction = direction === 'desc' ? 'asc' : 'desc'"> |
| 44 | + <div class="column is-narrow"> |
| 45 | + <button type="button" class="button" @click="direction = direction === 'desc' ? 'asc' : 'desc'"> |
62 | 46 | <span class="icon-text is-block"> |
63 | 47 | <span class="icon"> |
64 | 48 | <i class="fa-solid" :class="direction === 'desc' ? 'fa-arrow-down-a-z' : 'fa-arrow-up-a-z'" /> |
@@ -725,7 +709,10 @@ const clearCompleted = async () => { |
725 | 709 | return |
726 | 710 | } |
727 | 711 | selectedElms.value = [] |
728 | | - await stateStore.deleteItems('history', { status: 'finished', removeFile: false }) |
| 712 | + Promise.all([ |
| 713 | + stateStore.deleteItems('history', { status: 'finished', removeFile: false }), |
| 714 | + stateStore.deleteItems('history', { status: 'skip', removeFile: false }) |
| 715 | + ]) |
729 | 716 | } |
730 | 717 |
|
731 | 718 | const clearIncomplete = async () => { |
|
0 commit comments