feat(panel): adds remove/cancel labels

dvcol · dvcol · commit 1e0cdb820f1d · 2024-04-08T14:33:57.000+02:00
diff --git a/src/components/icons/IconCancel.vue b/src/components/icons/IconCancel.vue
@@ -0,0 +1,27 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+    <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2">
+      <path
+        stroke-dasharray="60"
+        stroke-dashoffset="60"
+        d="M5.63604 5.63603C9.15076 2.12131 14.8492 2.12131 18.364 5.63603C21.8787 9.15075 21.8787 14.8492 18.364 18.364C14.8492 21.8787 9.15076 21.8787 5.63604 18.364C2.12132 14.8492 2.12132 9.15075 5.63604 5.63603Z"
+      >
+        <animate
+          fill="freeze"
+          attributeName="stroke-dashoffset"
+          dur="0.5s"
+          values="60;0"
+        />
+      </path>
+      <path stroke-dasharray="18" stroke-dashoffset="18" d="M6 6L18 18">
+        <animate
+          fill="freeze"
+          attributeName="stroke-dashoffset"
+          begin="0.6s"
+          dur="0.2s"
+          values="18;0"
+        />
+      </path>
+    </g>
+  </svg>
+</template>
diff --git a/src/components/icons/IconCheckAll.vue b/src/components/icons/IconCheckAll.vue
@@ -0,0 +1,47 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+    <defs>
+      <mask id="lineMdCheckAll0">
+        <g
+          fill="none"
+          stroke="#fff"
+          stroke-dasharray="22"
+          stroke-dashoffset="22"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+        >
+          <path d="M2 13.5l4 4l10.75 -10.75">
+            <animate
+              fill="freeze"
+              attributeName="stroke-dashoffset"
+              dur="0.4s"
+              values="22;0"
+            />
+          </path>
+          <path stroke="#000" stroke-width="4" d="M7.5 13.5l4 4l10.75 -10.75" opacity="0">
+            <set attributeName="opacity" begin="0.4s" to="1" />
+            <animate
+              fill="freeze"
+              attributeName="stroke-dashoffset"
+              begin="0.4s"
+              dur="0.4s"
+              values="22;0"
+            />
+          </path>
+          <path d="M7.5 13.5l4 4l10.75 -10.75" opacity="0">
+            <set attributeName="opacity" begin="0.4s" to="1" />
+            <animate
+              fill="freeze"
+              attributeName="stroke-dashoffset"
+              begin="0.4s"
+              dur="0.4s"
+              values="22;0"
+            />
+          </path>
+        </g>
+      </mask>
+    </defs>
+    <rect width="24" height="24" fill="currentColor" mask="url(#lineMdCheckAll0)" />
+  </svg>
+</template>
diff --git a/src/components/views/panel/MoviePanelDetails.vue b/src/components/views/panel/MoviePanelDetails.vue
@@ -24,7 +24,19 @@ const i18n = useI18n('panel', 'detail');
 const released = computed(() => {
   if (!movie?.value) return;
   if (!movie.value?.released) return '-';
-  return new Date(movie.value?.released).toLocaleDateString();
+  return new Date(movie.value?.released);
+});
+
+const releasedDate = computed(() => {
+  if (!released.value) return;
+  if (typeof released.value === 'string') return released.value;
+  return released.value.toLocaleDateString();
+});
+
+const releasedTime = computed(() => {
+  if (!released.value) return;
+  if (typeof released.value === 'string') return released.value;
+  return released.value.toLocaleTimeString();
 });
 
 const runtime = computed(() => {
@@ -78,8 +90,15 @@ const country = computed(() => {
     <NFlex class="row" size="large">
       <!--  Release date  -->
       <PanelDetail
-        :label="i18n('released')"
-        :value="released"
+        :label="i18n('released_date')"
+        :value="releasedDate"
+        :skeleton="{ width: '5.125rem' }"
+      />
+
+      <!--  Release Time  -->
+      <PanelDetail
+        :label="i18n('released_time')"
+        :value="releasedTime"
         :skeleton="{ width: '5.125rem' }"
       />
 
diff --git a/src/components/views/panel/PanelButtonProgress.vue b/src/components/views/panel/PanelButtonProgress.vue
@@ -9,7 +9,7 @@ import {
   type TooltipProps,
 } from 'naive-ui';
 
-import { type Component, h, type PropType, ref } from 'vue';
+import { type Component, computed, h, type PropType, ref, toRefs } from 'vue';
 
 import type {
   EpisodeProgress,
@@ -21,7 +21,7 @@ import type {
 import ProgressTooltip from '~/components/common/tooltip/ProgressTooltip.vue';
 import { useI18n } from '~/utils';
 
-defineProps({
+const props = defineProps({
   select: {
     type: Object as PropType<PopselectProps>,
     required: true,
@@ -58,6 +58,13 @@ defineProps({
   },
 });
 
+const { percentage } = toRefs(props);
+
+const progressBackground = computed(() => {
+  if (percentage?.value === undefined) return false;
+  return percentage.value > 0 && percentage.value < 100;
+});
+
 const renderLabel = (option: SelectOption & { icon: Component }) => [
   h(NIcon, {
     style: {
@@ -72,6 +79,7 @@ const renderLabel = (option: SelectOption & { icon: Component }) => [
 const i18n = useI18n('panel', 'buttons');
 
 const root = ref();
+const trigger = ref();
 </script>
 
 <template>
@@ -80,7 +88,7 @@ const root = ref();
     class="button-progress-container"
     :data-progress="percentage"
     :style="{
-      '--progress': `${ percentage }%`,
+      '--progress': `${percentage}%`,
       '--progress-color': `var(--${type}-color-dark)`,
     }"
   >
@@ -95,17 +103,20 @@ const root = ref();
     >
       <NPopselect
         :style="{
-          '--custom-bg-color': `var(--bg-color-${ type }-80)`,
+          '--custom-bg-color': `var(--bg-color-${type}-80)`,
           '--custom-bg-color-hover': `var(--bg-color-${type})`,
         }"
         :to="root"
         :render-label="renderLabel"
         trigger="focus"
         :disabled="disabled"
         v-bind="select"
+        :on-update:show="_show => !_show && trigger?.$el?.blur()"
       >
         <NButton
-          :class="{ filled, progress }"
+          ref="trigger"
+          class="button"
+          :class="{ filled, progress: progressBackground }"
           round
           :secondary="!filled"
           :disabled="disabled"
@@ -127,24 +138,30 @@ const root = ref();
     margin-left: calc(0% - var(--n-icon-margin));
   }
 
-  .progress:not(.filled) {
-    background: linear-gradient(
-      to right,
-      var(--progress-color) 0%,
-      var(--progress-color) var(--progress, 0%),
-      var(--n-color) var(--progress, 0%),
-      var(--n-color) 100%
-    );
+  .button {
+    background: linear-gradient(to right, var(--n-color) 0%, var(--n-color) 100%);
     transition:
       color 0.3s var(--n-bezier),
+      background 0.3s var(--n-bezier),
       background-color 0.3s var(--n-bezier),
       opacity 0.3s var(--n-bezier),
       border-color 0.3s var(--n-bezier),
       filter 0.3s var(--n-bezier);
+    will-change: color, background, background-color, opacity, border-color, filter;
 
     &:hover {
       filter: brightness(1.2);
     }
   }
+
+  .progress:not(.filled) {
+    background: linear-gradient(
+      to right,
+      var(--progress-color) 0%,
+      var(--progress-color) var(--progress, 0%),
+      var(--n-color) var(--progress, 0%),
+      var(--n-color) 100%
+    );
+  }
 }
 </style>
diff --git a/src/components/views/panel/PanelButtons.vue b/src/components/views/panel/PanelButtons.vue
@@ -3,7 +3,9 @@ import { NButton, NFlex, NIcon } from 'naive-ui';
 import { computed, onMounted, type PropType, ref, toRefs } from 'vue';
 
 import IconCalendar from '~/components/icons/IconCalendar.vue';
+import IconCancel from '~/components/icons/IconCancel.vue';
 import IconCheckedList from '~/components/icons/IconCheckedList.vue';
+import IconClose from '~/components/icons/IconClose.vue';
 import IconCloseSmall from '~/components/icons/IconCloseSmall.vue';
 import IconGrid from '~/components/icons/IconGrid.vue';
 import IconGridEmpty from '~/components/icons/IconGridEmpty.vue';
@@ -94,6 +96,37 @@ const timeOptions = [
   { label: i18n('label__other'), value: 'custom', icon: IconCalendar },
 ];
 
+const cancelOption = {
+  label: i18n('label__cancel'),
+  value: 'cancel',
+  icon: IconCancel,
+};
+
+const removeOption = {
+  label: i18n('label__remove'),
+  value: 'remove',
+  icon: IconClose,
+};
+
+const removeOptions = [removeOption, cancelOption];
+const mixedOptions = [...timeOptions, removeOption];
+
+const watchedOptions = computed(() => {
+  if (watched.value) return removeOptions;
+  if (watchedPercentage.value > 0 && watchedPercentage.value < 100) {
+    return mixedOptions;
+  }
+  return timeOptions;
+});
+
+const collectionOptions = computed(() => {
+  if (collected.value) return removeOptions;
+  if (collectionPercentage.value > 0 && collectionPercentage.value < 100) {
+    return mixedOptions;
+  }
+  return timeOptions;
+});
+
 const { lists } = useListsStoreRefs();
 const { fetchLists, getIcon } = useListsStore();
 
@@ -129,7 +162,7 @@ onMounted(() => {
             }"
           />
         </template>
-        <span>{{ i18n(`label__${ checkin ? 'cancel' : 'checkin' }`) }}</span>
+        <span>{{ i18n(`label__${ checkin ? 'cancel_checkin' : 'checkin' }`) }}</span>
       </NButton>
     </NFlex>
 
@@ -156,7 +189,7 @@ onMounted(() => {
     <NFlex class="button-container collection" justify="center" align="center">
       <PanelButtonProgress
         :select="{
-          options: timeOptions,
+          options: collectionOptions,
         }"
         :tooltip="{
           disabled: !['show', 'season'].includes(mode),
@@ -166,7 +199,6 @@ onMounted(() => {
         :progress="collectionProgress"
         :percentage="collectionPercentage"
         :filled="collected"
-        :disabled="collected === undefined"
         type="info"
       >
         {{ i18n(`label__collection__${ collected ? 'remove' : 'add' }`) }}
@@ -177,7 +209,7 @@ onMounted(() => {
     <NFlex class="button-container history" justify="center" align="center">
       <PanelButtonProgress
         :select="{
-          options: timeOptions,
+          options: watchedOptions,
         }"
         :tooltip="{
           disabled: !['show', 'season'].includes(mode),
@@ -186,7 +218,6 @@ onMounted(() => {
         :progress="watchedProgress"
         :percentage="watchedPercentage"
         :filled="watched"
-        :disabled="watched === undefined"
       >
         {{ i18n(`label__history__${ watched ? 'remove' : 'add' }`) }}
       </PanelButtonProgress>
diff --git a/src/components/views/panel/PanelOverview.vue b/src/components/views/panel/PanelOverview.vue
@@ -41,11 +41,7 @@ const { openTab } = useExtensionSettingsStore();
     <NSkeleton v-else class="title-skeleton" style="width: 40dvh" round />
 
     <div v-if="overview">{{ overview }}</div>
-    <template v-else>
-      <NSkeleton style="width: 100%" />
-      <NSkeleton style="width: 100%" />
-      <NSkeleton style="width: 100%" />
-    </template>
+    <NSkeleton v-else style="width: 100%" :repeat="3" :sharp="false" />
   </NFlex>
 </template>
 
diff --git a/src/components/views/panel/ShowPanelDetails.vue b/src/components/views/panel/ShowPanelDetails.vue
diff --git a/src/i18n/en/panel/panel-buttons.json b/src/i18n/en/panel/panel-buttons.json
diff --git a/src/i18n/en/panel/panel-detail.json b/src/i18n/en/panel/panel-detail.json
