@adminforth/background-jobs 1.1.0 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/build.log +2 -2
  2. package/custom/JobInfoPopup.vue +3 -3
  3. package/custom/JobsList.vue +4 -4
  4. package/custom/NavbarJobs.vue +24 -38
  5. package/dist/custom/JobInfoPopup.vue +3 -3
  6. package/dist/custom/JobsList.vue +4 -4
  7. package/dist/custom/NavbarJobs.vue +24 -38
  8. package/package.json +1 -1
package/build.log CHANGED
@@ -11,5 +11,5 @@ custom/StateToIcon.vue
11
11
  custom/tsconfig.json
12
12
  custom/utils.ts
13
13
 
14
- sent 11,414 bytes received 134 bytes 23,096.00 bytes/sec
15
- total size is 10,936 speedup is 0.95
14
+ sent 11,397 bytes received 134 bytes 23,062.00 bytes/sec
15
+ total size is 10,912 speedup is 0.95
package/custom/JobInfoPopup.vue CHANGED
@@ -1,9 +1,9 @@
1
1
  <template>
2
2
  <div class="flex flex-col w-full min-w-96">
3
3
  <div class="flex items-center mb-1">
4
- <h2 class="text-lg font-semibold">{{ job.name }}</h2>
5
- <p class="ml-2 text-xs text-gray-600 h-full"> {{ getTimeAgoString(new Date(job.createdAt)) }}</p>
6
- <p class="ml-auto text-gray-800 h-full"> {{ t('Progress:') }} <span class="font-semibold" >{{ job.progress }}%</span></p>
4
+ <h2 class="text-lg font-semibold dark:text-white">{{ job.name }}</h2>
5
+ <p class="ml-2 text-xs text-gray-600 dark:text-gray-200 h-full"> {{ getTimeAgoString(new Date(job.createdAt)) }}</p>
6
+ <p class="ml-auto text-gray-800 dark:text-white h-full"> {{ t('Progress:') }} <span class="font-semibold" >{{ job.progress }}%</span></p>
7
7
  <StateToIcon :job="job" />
8
8
  </div>
9
9
  <div class="flex items-center gap-4 w-full">
package/custom/JobsList.vue CHANGED
@@ -1,5 +1,5 @@
1
1
  <template>
2
- <div class="w-1vw md:w-64 bg-white border border-gray-200 rounded-md">
2
+ <div class="w-1vw md:w-64 bg-white border border-gray-200 dark:bg-gray-800 dark:border-gray-600 rounded-md">
3
3
  <Modal
4
4
  v-for="job in props.jobs" :key="job.id"
5
5
  :beforeCloseFunction="onBeforeOpen"
@@ -7,11 +7,11 @@
7
7
  removeFromDomOnClose
8
8
  >
9
9
  <template #trigger>
10
- <div class="flex items-center w-full px-4 py-3 border-b border-gray-200 hover:bg-gray-50 transition-colors">
10
+ <div class="flex items-center w-full px-4 py-3 bg-white dark:bg-gray-700 dark:border-gray-600 border-b border-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors">
11
11
  <div class="flex flex-col w-full max-w-48">
12
12
  <p class="flex gap-2 items-end justify-between text-nowrap">
13
- <span class="text-sm h-full text truncate">{{ job.name }}</span>
14
- <span class="text-xs text-gray-600">{{ getTimeAgoString(new Date(job.createdAt)) }}</span>
13
+ <span class="text-sm h-full text truncate dark:text-white">{{ job.name }}</span>
14
+ <span class="text-xs dark:text-gray-200 text-gray-600">{{ getTimeAgoString(new Date(job.createdAt)) }}</span>
15
15
  </p>
16
16
  <ProgressBar
17
17
  class="mt-1"
package/custom/NavbarJobs.vue CHANGED
@@ -1,17 +1,25 @@
1
1
  <template>
2
2
  <div ref="dropdownRef">
3
3
  <div class="cursor-pointer hover:scale-110 transition-transform" @click="isDropdownOpen = !isDropdownOpen">
4
- <div v-if="isAlLeastOneJobRunning" class="relative">
5
- <div class="loader "></div>
6
- <div class="absolute -bottom-1 -right-1 rounded-full bg-lightPrimary w-4 h-4 text-xs flex items-center justify-center text-white"> {{ jobsCount }}</div>
7
- </div>
8
- <div class="flex items-center justify-center" v-else-if="jobs.length > 0">
4
+ <div class="relative flex items-center justify-center" v-if="jobs.length > 0">
9
5
  <Tooltip>
10
- <IconCheckCircleOutline class="w-8 h-8 text-green-500" />
6
+ <IconBriefcaseSolid class="w-7 h-7 text-gray-600 hover:text-gray-700" />
11
7
  <template #tooltip>
12
8
  {{ t('All jobs completed') }}
13
9
  </template>
14
10
  </Tooltip>
11
+ <div
12
+ v-if="isAlLeastOneJobRunning"
13
+ class="ping-animation absolute -bottom-1 -right-1 rounded-full bg-lightPrimary w-4 h-4 text-xs flex items-center justify-center text-white"
14
+ >
15
+ {{ jobsCount }}
16
+ </div>
17
+ <div
18
+ v-if="isAlLeastOneJobRunning"
19
+ class="absolute -bottom-1 -right-1 rounded-full bg-lightPrimary w-4 h-4 text-xs flex items-center justify-center text-white"
20
+ >
21
+ {{ jobsCount }}
22
+ </div>
15
23
  </div>
16
24
  </div>
17
25
  <Transition
@@ -40,7 +48,7 @@
40
48
  <script setup lang="ts">
41
49
  import type { AdminUser } from 'adminforth';
42
50
  import { onMounted, onUnmounted, ref, computed } from 'vue';
43
- import { IconCheckCircleOutline } from '@iconify-prerendered/vue-flowbite';
51
+ import { IconCheckCircleOutline, IconBriefcaseSolid } from '@iconify-prerendered/vue-flowbite';
44
52
  import { Tooltip } from '@/afcl';
45
53
  import { useI18n } from 'vue-i18n';
46
54
  import JobsList from './JobsList.vue';
@@ -119,36 +127,14 @@
119
127
 
120
128
 
121
129
  <style scoped lang="scss">
122
- .loader {
123
- width: 28px;
124
- aspect-ratio: 1;
125
- border-radius: 50%;
126
- --spinner-color: #1a56db;
127
-
128
- background:
129
- conic-gradient(
130
- from 120deg,
131
- var(--spinner-color) 0deg 40deg,
132
- transparent 40deg
133
- ),
134
-
135
- conic-gradient(#ccc 0deg 360deg);
136
-
137
- -webkit-mask: radial-gradient(
138
- farthest-side,
139
- transparent calc(100% - 6px),
140
- #000 calc(100% - 5px)
141
- );
142
- mask: radial-gradient(
143
- farthest-side,
144
- transparent calc(100% - 6px),
145
- #000 calc(100% - 5px)
146
- );
147
-
148
- animation: stepRotate 2s infinite;
149
- }
150
-
151
- @keyframes stepRotate {
152
- to { transform: rotate(1turn); }
130
+ .ping-animation {
131
+ animation: ping 1s cubic-bezier(0, 0, 1, 1) infinite;
132
+ }
133
+
134
+ @keyframes ping {
135
+ 75%, 100% {
136
+ transform: scale(2);
137
+ opacity: 0;
153
138
  }
139
+ }
154
140
  </style>
package/dist/custom/JobInfoPopup.vue CHANGED
@@ -1,9 +1,9 @@
1
1
  <template>
2
2
  <div class="flex flex-col w-full min-w-96">
3
3
  <div class="flex items-center mb-1">
4
- <h2 class="text-lg font-semibold">{{ job.name }}</h2>
5
- <p class="ml-2 text-xs text-gray-600 h-full"> {{ getTimeAgoString(new Date(job.createdAt)) }}</p>
6
- <p class="ml-auto text-gray-800 h-full"> {{ t('Progress:') }} <span class="font-semibold" >{{ job.progress }}%</span></p>
4
+ <h2 class="text-lg font-semibold dark:text-white">{{ job.name }}</h2>
5
+ <p class="ml-2 text-xs text-gray-600 dark:text-gray-200 h-full"> {{ getTimeAgoString(new Date(job.createdAt)) }}</p>
6
+ <p class="ml-auto text-gray-800 dark:text-white h-full"> {{ t('Progress:') }} <span class="font-semibold" >{{ job.progress }}%</span></p>
7
7
  <StateToIcon :job="job" />
8
8
  </div>
9
9
  <div class="flex items-center gap-4 w-full">
package/dist/custom/JobsList.vue CHANGED
@@ -1,5 +1,5 @@
1
1
  <template>
2
- <div class="w-1vw md:w-64 bg-white border border-gray-200 rounded-md">
2
+ <div class="w-1vw md:w-64 bg-white border border-gray-200 dark:bg-gray-800 dark:border-gray-600 rounded-md">
3
3
  <Modal
4
4
  v-for="job in props.jobs" :key="job.id"
5
5
  :beforeCloseFunction="onBeforeOpen"
@@ -7,11 +7,11 @@
7
7
  removeFromDomOnClose
8
8
  >
9
9
  <template #trigger>
10
- <div class="flex items-center w-full px-4 py-3 border-b border-gray-200 hover:bg-gray-50 transition-colors">
10
+ <div class="flex items-center w-full px-4 py-3 bg-white dark:bg-gray-700 dark:border-gray-600 border-b border-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors">
11
11
  <div class="flex flex-col w-full max-w-48">
12
12
  <p class="flex gap-2 items-end justify-between text-nowrap">
13
- <span class="text-sm h-full text truncate">{{ job.name }}</span>
14
- <span class="text-xs text-gray-600">{{ getTimeAgoString(new Date(job.createdAt)) }}</span>
13
+ <span class="text-sm h-full text truncate dark:text-white">{{ job.name }}</span>
14
+ <span class="text-xs dark:text-gray-200 text-gray-600">{{ getTimeAgoString(new Date(job.createdAt)) }}</span>
15
15
  </p>
16
16
  <ProgressBar
17
17
  class="mt-1"
package/dist/custom/NavbarJobs.vue CHANGED
@@ -1,17 +1,25 @@
1
1
  <template>
2
2
  <div ref="dropdownRef">
3
3
  <div class="cursor-pointer hover:scale-110 transition-transform" @click="isDropdownOpen = !isDropdownOpen">
4
- <div v-if="isAlLeastOneJobRunning" class="relative">
5
- <div class="loader "></div>
6
- <div class="absolute -bottom-1 -right-1 rounded-full bg-lightPrimary w-4 h-4 text-xs flex items-center justify-center text-white"> {{ jobsCount }}</div>
7
- </div>
8
- <div class="flex items-center justify-center" v-else-if="jobs.length > 0">
4
+ <div class="relative flex items-center justify-center" v-if="jobs.length > 0">
9
5
  <Tooltip>
10
- <IconCheckCircleOutline class="w-8 h-8 text-green-500" />
6
+ <IconBriefcaseSolid class="w-7 h-7 text-gray-600 hover:text-gray-700" />
11
7
  <template #tooltip>
12
8
  {{ t('All jobs completed') }}
13
9
  </template>
14
10
  </Tooltip>
11
+ <div
12
+ v-if="isAlLeastOneJobRunning"
13
+ class="ping-animation absolute -bottom-1 -right-1 rounded-full bg-lightPrimary w-4 h-4 text-xs flex items-center justify-center text-white"
14
+ >
15
+ {{ jobsCount }}
16
+ </div>
17
+ <div
18
+ v-if="isAlLeastOneJobRunning"
19
+ class="absolute -bottom-1 -right-1 rounded-full bg-lightPrimary w-4 h-4 text-xs flex items-center justify-center text-white"
20
+ >
21
+ {{ jobsCount }}
22
+ </div>
15
23
  </div>
16
24
  </div>
17
25
  <Transition
@@ -40,7 +48,7 @@
40
48
  <script setup lang="ts">
41
49
  import type { AdminUser } from 'adminforth';
42
50
  import { onMounted, onUnmounted, ref, computed } from 'vue';
43
- import { IconCheckCircleOutline } from '@iconify-prerendered/vue-flowbite';
51
+ import { IconCheckCircleOutline, IconBriefcaseSolid } from '@iconify-prerendered/vue-flowbite';
44
52
  import { Tooltip } from '@/afcl';
45
53
  import { useI18n } from 'vue-i18n';
46
54
  import JobsList from './JobsList.vue';
@@ -119,36 +127,14 @@
119
127
 
120
128
 
121
129
  <style scoped lang="scss">
122
- .loader {
123
- width: 28px;
124
- aspect-ratio: 1;
125
- border-radius: 50%;
126
- --spinner-color: #1a56db;
127
-
128
- background:
129
- conic-gradient(
130
- from 120deg,
131
- var(--spinner-color) 0deg 40deg,
132
- transparent 40deg
133
- ),
134
-
135
- conic-gradient(#ccc 0deg 360deg);
136
-
137
- -webkit-mask: radial-gradient(
138
- farthest-side,
139
- transparent calc(100% - 6px),
140
- #000 calc(100% - 5px)
141
- );
142
- mask: radial-gradient(
143
- farthest-side,
144
- transparent calc(100% - 6px),
145
- #000 calc(100% - 5px)
146
- );
147
-
148
- animation: stepRotate 2s infinite;
149
- }
150
-
151
- @keyframes stepRotate {
152
- to { transform: rotate(1turn); }
130
+ .ping-animation {
131
+ animation: ping 1s cubic-bezier(0, 0, 1, 1) infinite;
132
+ }
133
+
134
+ @keyframes ping {
135
+ 75%, 100% {
136
+ transform: scale(2);
137
+ opacity: 0;
153
138
  }
139
+ }
154
140
  </style>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@adminforth/background-jobs",
3
- "version": "1.1.0",
3
+ "version": "1.2.0",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "type": "module",