feat(list): adds quick action buttons - list

dvcol · dvcol · commit a3b9b28a9cf6 · 2024-10-23T17:33:41.000+02:00
diff --git a/src/components/common/list/ListButton.vue b/src/components/common/list/ListButton.vue
@@ -5,6 +5,7 @@ const { buttonProps } = defineProps<{
   buttonProps?: ButtonProps;
   iconProps?: IconProps;
   disabled?: boolean;
+  colored?: boolean;
 }>();
 
 const emit = defineEmits<{
@@ -21,6 +22,7 @@ const onClick = (e: MouseEvent) => {
 <template>
   <NButton
     class="list-button"
+    :class="{ colored }"
     icon-placement="right"
     quaternary
     v-bind="buttonProps"
@@ -59,6 +61,11 @@ const onClick = (e: MouseEvent) => {
     margin-left: 0.25rem;
   }
 
+  &.colored {
+    --color: var(--n-text-color);
+    --progress: 1200%;
+  }
+
   // stylelint-disable-next-line selector-class-pattern -- framework override
   &:not(.n-button--disabled) {
     &:focus-visible,
diff --git a/src/components/common/list/ListButtonCheckin.vue b/src/components/common/list/ListButtonCheckin.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
+import type { ButtonProps, IconProps } from 'naive-ui';
+
 import ListButton from '~/components/common/list/ListButton.vue';
 import IconCancel from '~/components/icons/IconCancel.vue';
 import IconConfirmCircle from '~/components/icons/IconConfirmCircle.vue';
@@ -14,6 +16,8 @@ import { useI18n } from '~/utils/i18n.utils';
 const { disabled, item } = defineProps<{
   disabled?: boolean;
   item?: ListScrollItem;
+  buttonProps?: ButtonProps;
+  iconProps?: IconProps;
 }>();
 
 const i18n = useI18n('list', 'checkin');
@@ -52,8 +56,9 @@ const { loading } = useWatchingStoreRefs();
   <ListButton
     :disabled="loading || disabled"
     :loading="loading"
-    :button-props="{ type: watching ? 'warning' : 'error' }"
-    :icon-props="{ component: watching ? IconCancel : IconConfirmCircle }"
+    :colored="watching"
+    :button-props="{ type: 'error', ...buttonProps }"
+    :icon-props="{ component: watching ? IconCancel : IconConfirmCircle, ...iconProps }"
     @on-click="onClick"
   >
     <span>{{ i18n(watching ? 'cancel' : 'checkin', 'common', 'button') }}</span>
diff --git a/src/components/common/list/ListButtonCollected.vue b/src/components/common/list/ListButtonCollected.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import { computed, type PropType, toRefs } from 'vue';
 
+import type { ButtonProps, IconProps } from 'naive-ui';
+
 import ListButton from '~/components/common/list/ListButton.vue';
-import IconGrid from '~/components/icons/IconGrid.vue';
+import IconGridEmpty from '~/components/icons/IconGridEmpty.vue';
 import IconRestore from '~/components/icons/IconRestore.vue';
 import { type ListScrollItem } from '~/models/list-scroll.model';
 import { isListItemType, ListType } from '~/models/list.model';
@@ -30,6 +32,14 @@ const props = defineProps({
     type: Boolean,
     required: false,
   },
+  buttonProps: {
+    type: Object as PropType<ButtonProps>,
+    required: false,
+  },
+  iconProps: {
+    type: Object as PropType<IconProps>,
+    required: false,
+  },
 });
 
 const { disabled, item, dateType } = toRefs(props);
@@ -74,8 +84,9 @@ const onClick = () => {
   <ListButton
     :disabled="isLoading || disabled"
     :loading="isLoading"
-    :button-props="{ type: collected ? 'error' : 'info' }"
-    :icon-props="{ component: collected ? IconRestore : IconGrid }"
+    :colored="!!collected"
+    :button-props="{ type: 'info', ...buttonProps }"
+    :icon-props="{ component: collected ? IconRestore : IconGridEmpty, ...iconProps }"
     :title="
       i18n(collected ? 'collected' : 'mark_collected', 'common', 'tooltip') +
       (dateCollected ? `: ${ dateCollected }` : '')
diff --git a/src/components/common/list/ListButtonWatched.vue b/src/components/common/list/ListButtonWatched.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { computed, type PropType, toRefs } from 'vue';
 
+import type { ButtonProps, IconProps } from 'naive-ui';
+
 import ListButton from '~/components/common/list/ListButton.vue';
 import IconPlay from '~/components/icons/IconPlay.vue';
 import IconRestore from '~/components/icons/IconRestore.vue';
@@ -30,6 +32,14 @@ const props = defineProps({
     type: Boolean,
     required: false,
   },
+  buttonProps: {
+    type: Object as PropType<ButtonProps>,
+    required: false,
+  },
+  iconProps: {
+    type: Object as PropType<IconProps>,
+    required: false,
+  },
 });
 
 const { disabled, item, dateType } = toRefs(props);
@@ -74,14 +84,15 @@ const onClick = () => {
   <ListButton
     :disabled="isLoading || disabled"
     :loading="isLoading"
-    :button-props="{ type: played ? 'error' : 'success' }"
-    :icon-props="{ component: played ? IconRestore : IconPlay }"
+    :colored="played"
+    :button-props="{ type: 'success', ...buttonProps }"
+    :icon-props="{ component: played ? IconRestore : IconPlay, ...iconProps }"
     :title="
-      i18n(played ? 'watched' : 'mark_watched', 'common', 'tooltip') +
+      i18n(played ? 'watch' : 'mark_watched', 'common', 'tooltip') +
       (datePlayed ? `: ${ datePlayed }` : '')
     "
     @on-click="onClick"
   >
-    <span>{{ i18n(played ? 'remove' : 'watched', 'common', 'button') }}</span>
+    <span>{{ i18n(played ? 'watched' : 'watch', 'common', 'button') }}</span>
   </ListButton>
 </template>
diff --git a/src/components/common/list/ListItem.vue b/src/components/common/list/ListItem.vue
@@ -97,6 +97,11 @@ const props = defineProps({
     required: false,
     default: false,
   },
+  showWatching: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
   showTagLoader: {
     type: Boolean,
     required: false,
@@ -119,6 +124,19 @@ const itemRef = ref<
   Omit<InstanceType<typeof NTimelineItem>, '$el'> & { $el?: HTMLDivElement }
 >();
 
+const focusin = ref(false);
+const focusTimeout = ref<ReturnType<typeof setTimeout>>();
+const toggleFocusin = (focus: boolean) => {
+  clearTimeout(focusTimeout.value);
+  if (focus) {
+    focusin.value = true;
+    return;
+  }
+  focusTimeout.value = setTimeout(() => {
+    focusin.value = false;
+  }, 100);
+};
+
 const open = ref(false);
 const dragged = ref(0);
 const onHover = (_event: MouseEvent, _hover: boolean) => {
@@ -288,6 +306,7 @@ const onClick = (e: MouseEvent | KeyboardEvent) =>
             :show-progress="showProgress"
             :show-played="showPlayed"
             :show-collected="showCollected"
+            :show-watching="showWatching"
             :show-tag-loader="showTagLoader"
           >
             <slot :item="item" :loading="loading" />
@@ -299,8 +318,16 @@ const onClick = (e: MouseEvent | KeyboardEvent) =>
             :class="{ open, dragged: dragged > 0 && dragged < 100 }"
             :style="{ '--dragged': `${dragged}%` }"
             vertical
+            @focusin="toggleFocusin(true)"
+            @focusout="toggleFocusin(false)"
           >
-            <slot name="buttons" :open="open" :dragged="dragged" :item="item" />
+            <slot
+              name="buttons"
+              :open="open"
+              :dragged="dragged"
+              :focusin="focusin"
+              :item="item"
+            />
           </NButtonGroup>
         </NFlex>
       </NFlex>
diff --git a/src/components/common/list/ListItemPanel.vue b/src/components/common/list/ListItemPanel.vue
@@ -18,12 +18,14 @@ import AnchorLink from '~/components/common/buttons/AnchorLink.vue';
 import TagLink from '~/components/common/buttons/TagLink.vue';
 import ProgressTooltip from '~/components/common/tooltip/ProgressTooltip.vue';
 import IconGrid from '~/components/icons/IconGrid.vue';
+import IconLoading from '~/components/icons/IconLoading.vue';
 import IconPlayFilled from '~/components/icons/IconPlayFilled.vue';
 import { getCustomLinkIcon } from '~/models/link.model';
 import { type ListScrollItem } from '~/models/list-scroll.model';
 
 import { ProgressType } from '~/models/progress-type.model';
 import { useItemCollected, useItemPlayed } from '~/stores/composable/use-item-played';
+import { useWatchingStore } from '~/stores/data/watching.store';
 import { useExtensionSettingsStoreRefs } from '~/stores/settings/extension.store';
 import { useLinksStore } from '~/stores/settings/links.store';
 import { useI18n } from '~/utils/i18n.utils';
@@ -72,13 +74,19 @@ const props = defineProps({
     required: false,
     default: false,
   },
+  showWatching: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
   showTagLoader: {
     type: Boolean,
     required: false,
   },
 });
 
-const { item, hideDate, showProgress, showPlayed, showCollected } = toRefs(props);
+const { item, hideDate, showProgress, showPlayed, showCollected, showWatching } =
+  toRefs(props);
 
 const type = computed(() =>
   item.value.type ? i18n(item.value.type, 'common', 'media', 'type') : item.value.type,
@@ -118,6 +126,13 @@ const {
 } = useItemPlayed(item, { showPlayed, showProgress });
 const { collected, date: collectedDate } = useItemCollected(item, showCollected);
 
+const { isWatchingListItem } = useWatchingStore();
+const watching = computed(() => {
+  if (!showWatching.value) return false;
+  if (!item.value) return false;
+  return isWatchingListItem(item.value);
+});
+
 const { progressType } = useExtensionSettingsStoreRefs();
 
 const percentage = computed(() => {
@@ -274,6 +289,26 @@ const onTagClick = (url?: string) => {
             </template>
           </NTag>
         </template>
+        <template v-if="showWatching && watching">
+          <NSkeleton
+            v-if="loading"
+            key="watching-loader"
+            text
+            style="width: 22px; height: 18px; border-radius: 2px"
+          />
+          <NTag
+            v-else
+            key="watching"
+            class="tag badge"
+            size="small"
+            type="error"
+            :bordered="false"
+          >
+            <template #icon>
+              <NIcon :component="IconLoading" />
+            </template>
+          </NTag>
+        </template>
       </NFlex>
       <div v-if="showProgress" class="panel-progress">
         <NSkeleton
diff --git a/src/components/common/list/ListScroll.vue b/src/components/common/list/ListScroll.vue
@@ -107,6 +107,11 @@ const props = defineProps({
     required: false,
     default: false,
   },
+  showWatching: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
   showTagLoader: {
     type: Boolean,
     required: false,
@@ -316,19 +321,20 @@ const listPaddingBottom = computed(() => {
           :show-progress="showProgress"
           :show-played="showPlayed"
           :show-collected="showCollected"
+          :show-watching="showWatching"
           :show-tag-loader="showTagLoader"
           @on-hover="onHover"
           @on-item-click="(...args) => $emit('onItemClick', ...args)"
           @on-scroll-into-view="(...args) => $emit('onScrollIntoView', ...args)"
           @on-scroll-out-of-view="(...args) => $emit('onScrollOutOfView', ...args)"
         >
           <slot :item="item" :loading="item.loading" />
-          <template v-if="$slots.buttons" #buttons="{ open, dragged }">
+          <template v-if="$slots.buttons" #buttons="{ open, dragged, focusin }">
             <slot
               name="buttons"
               :item="item"
               :loading="item.loading"
-              :open="open || dragged"
+              :open="open || dragged || focusin"
             />
           </template>
         </ListItem>
diff --git a/src/components/icons/IconLoading.vue b/src/components/icons/IconLoading.vue
@@ -0,0 +1,40 @@
+<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-linejoin="round"
+      stroke-width="1.5"
+    >
+      <path stroke-dasharray="16" stroke-dashoffset="16" d="M12 3c4.97 0 9 4.03 9 9">
+        <animate
+          fill="freeze"
+          attributeName="stroke-dashoffset"
+          dur="0.3s"
+          values="16;0"
+        />
+        <animateTransform
+          attributeName="transform"
+          dur="1.5s"
+          repeatCount="indefinite"
+          type="rotate"
+          values="0 12 12;360 12 12"
+        />
+      </path>
+      <path
+        stroke-dasharray="64"
+        stroke-dashoffset="64"
+        stroke-opacity="0.3"
+        d="M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9Z"
+      >
+        <animate
+          fill="freeze"
+          attributeName="stroke-dashoffset"
+          dur="1.2s"
+          values="64;0"
+        />
+      </path>
+    </g>
+  </svg>
+</template>
diff --git a/src/components/views/calendar/CalendarComponent.vue b/src/components/views/calendar/CalendarComponent.vue
@@ -80,6 +80,7 @@ const { onItemClick } = usePanelItem();
       :backdrop="imageSettings.backdrop"
       :poster-type="imageSettings.type"
       show-played
+      show-watching
       show-collected
       show-tag-loader
       overscroll="none"
diff --git a/src/components/views/history/HistoryComponent.vue b/src/components/views/history/HistoryComponent.vue
@@ -88,6 +88,7 @@ useActiveAndDocumentVisible({
       :page-size="pageSize"
       :backdrop="imageSettings.backdrop"
       :poster-type="imageSettings.type"
+      show-watching
       show-collected
       show-tag-loader
       @on-scroll="scrolled = true"
diff --git a/src/components/views/progress/ProgressComponent.vue b/src/components/views/progress/ProgressComponent.vue
@@ -112,6 +112,7 @@ useActiveAndDocumentVisible({
         :poster-type="imageSettings.type"
         hide-date
         show-progress
+        show-watching
         show-collected
         show-tag-loader
         @on-scroll="scrolled = true"
diff --git a/src/components/views/search/SearchComponent.vue b/src/components/views/search/SearchComponent.vue
@@ -63,6 +63,7 @@ const { onItemClick } = usePanelItem();
       :backdrop="imageSettings.backdrop"
       :poster-type="imageSettings.type"
       show-played
+      show-watching
       show-collected
       @on-scroll="scrolled = true"
       @on-scroll-top="scrolled = false"
diff --git a/src/components/views/watchlist/WatchlistComponent.vue b/src/components/views/watchlist/WatchlistComponent.vue
@@ -103,6 +103,7 @@ useActiveAndDocumentVisible({
       :backdrop="imageSettings.backdrop"
       :poster-type="imageSettings.type"
       show-played
+      show-watching
       show-collected
       @on-scroll="scrolled = true"
       @on-scroll-top="scrolled = false"
