diff --git a/src/renderer/components/ft-element-list/ft-element-list.js b/src/renderer/components/ft-element-list/ft-element-list.js index b82b04f95afe0..1ee96b6d401af 100644 --- a/src/renderer/components/ft-element-list/ft-element-list.js +++ b/src/renderer/components/ft-element-list/ft-element-list.js @@ -59,6 +59,10 @@ export default defineComponent({ type: Boolean, default: false, }, + showVideoAddedToPlaylistCount: { + type: Boolean, + default: true, + }, playlistItemsLength: { type: Number, default: 0 diff --git a/src/renderer/components/ft-element-list/ft-element-list.vue b/src/renderer/components/ft-element-list/ft-element-list.vue index 7331d2e7ff8b6..23a55442c8c3b 100644 --- a/src/renderer/components/ft-element-list/ft-element-list.vue +++ b/src/renderer/components/ft-element-list/ft-element-list.vue @@ -18,6 +18,7 @@ :can-move-video-up="canMoveVideoUp && index > 0" :can-move-video-down="canMoveVideoDown && index < playlistItemsLength - 1" :can-remove-from-playlist="canRemoveFromPlaylist" + :show-video-added-to-playlist-count="showVideoAddedToPlaylistCount" :search-query-text="searchQueryText" :playlist-id="playlistId" :playlist-type="playlistType" diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.js b/src/renderer/components/ft-icon-button/ft-icon-button.js index 90ca0fb20f555..902d88de42c5e 100644 --- a/src/renderer/components/ft-icon-button/ft-icon-button.js +++ b/src/renderer/components/ft-icon-button/ft-icon-button.js @@ -16,6 +16,10 @@ export default defineComponent({ type: Array, default: () => ['fas', 'ellipsis-v'] }, + counterValue: { + type: Number, + default: 0, + }, disabled: { type: Boolean, default: false diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.scss b/src/renderer/components/ft-icon-button/ft-icon-button.scss index 519f71ecfa2d9..8f679c990110a 100644 --- a/src/renderer/components/ft-icon-button/ft-icon-button.scss +++ b/src/renderer/components/ft-icon-button/ft-icon-button.scss @@ -106,6 +106,26 @@ } } +.iconCounter { + // Reset + transform: none; + inset-block-start: 0; + inset-inline: 0 auto; + // Our style + translate: -40% -40%; + box-shadow: -1px 1px 5px 0 rgb(0 0 0 / 50%); + font-size: 12px; + + &.base { + background-color: var(--card-bg-color); + color: var(--primary-text-color); + } + + body[dir='rtl'] & { + translate: 40% -40%; + } +} + .disabled { opacity: 0.5; pointer-events: auto; diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.vue b/src/renderer/components/ft-icon-button/ft-icon-button.vue index 4c6af4f0e3d4d..cc46b5e8615e5 100644 --- a/src/renderer/components/ft-icon-button/ft-icon-button.vue +++ b/src/renderer/components/ft-icon-button/ft-icon-button.vue @@ -1,28 +1,44 @@