Skip to content

Commit

Permalink
moved buttons location in grid mode
Browse files Browse the repository at this point in the history
  • Loading branch information
@JL0000
JL0000 committed Nov 25, 2024
1 parent 98fc599 commit 2da3315
Show file tree
Hide file tree
Showing 2 changed files with 124 additions and 119 deletions.
11 changes: 8 additions & 3 deletions src/renderer/components/playlist-info/playlist-info.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,11 +112,16 @@
margin-block-start: 8px;
}

.playlistOptionsWrapper {
.playlistOptionsAndSearch {
display: flex;
flex-direction: column;
justify-content: space-between;
flex-flow: row wrap;
justify-content: center;
align-items: center;
gap: 10px;
}

.searchWrapper {
flex-basis: 100%;
}

.channelShareWrapper,
Expand Down
232 changes: 116 additions & 116 deletions src/renderer/components/playlist-info/playlist-info.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,7 @@
<hr class="playlistInfoSeparator">

<div
v-if="!isUserPlaylist"
class="channelShareWrapper"
>
<router-link
Expand Down Expand Up @@ -128,113 +129,86 @@
{{ channelName }}
</h3>
</div>

<div class="playlistOptionsWrapper">
<div class="playlistOptions">
<ft-icon-button
v-if="editMode"
:title="$t('User Playlists.Save Changes')"
:disabled="playlistPersistenceDisabled"
:icon="['fas', 'save']"
theme="secondary"
@click="savePlaylistInfo"
/>
<ft-icon-button
v-if="editMode"
:title="$t('User Playlists.Cancel')"
:icon="['fas', 'times']"
theme="secondary"
@click="exitEditMode"
/>
<ft-icon-button
v-if="!editMode && isUserPlaylist"
:title="markedAsQuickBookmarkTarget ? $t('User Playlists.Quick Bookmark Enabled') : $t('User Playlists.Enable Quick Bookmark With This Playlist')"
:icon="markedAsQuickBookmarkTarget ? ['fas', 'bookmark'] : ['far', 'bookmark']"
:disabled="markedAsQuickBookmarkTarget"
:theme="markedAsQuickBookmarkTarget ? 'secondary' : 'base-no-default'"
@disabled-click="handleQuickBookmarkEnabledDisabledClick"
@click="enableQuickBookmarkForThisPlaylist"
/>
<ft-icon-button
v-if="!editMode && isUserPlaylist"
:title="$t('User Playlists.Edit Playlist Info')"
:icon="['fas', 'edit']"
theme="secondary"
@click="enterEditMode"
/>
<ft-icon-button
v-if="videoCount > 0 && showPlaylists && !editMode"
:title="$t('User Playlists.Copy Playlist')"
:icon="['fas', 'copy']"
theme="secondary"
@click="toggleCopyVideosPrompt"
/>
<ft-icon-button
v-if="exportPlaylistButtonVisible"
:title="$t('User Playlists.Export Playlist')"
:icon="['fas', 'file-arrow-down']"
theme="secondary"
@click="handlePlaylistExport"
/>
<ft-icon-button
v-if="!editMode && userPlaylistDuplicateItemCount > 0"
:title="$t('User Playlists.Remove Duplicate Videos')"
:icon="['fas', 'users-slash']"
theme="destructive"
@click="showRemoveDuplicateVideosPrompt = true"
/>
<ft-icon-button
v-if="!editMode && userPlaylistAnyVideoWatched"
:title="$t('User Playlists.Remove Watched Videos')"
:icon="['fas', 'eye-slash']"
theme="destructive"
@click="showRemoveVideosOnWatchPrompt = true"
/>
<ft-icon-button
v-if="deletePlaylistButtonVisible"
:disabled="markedAsQuickBookmarkTarget"
:title="!markedAsQuickBookmarkTarget ? $t('User Playlists.Delete Playlist') : playlistDeletionDisabledLabel"
:icon="['fas', 'trash']"
theme="destructive"
@disabled-click="handlePlaylistDeleteDisabledClick"
@click="showDeletePlaylistPrompt = true"
/>
<ft-share-button
v-if="sharePlaylistButtonVisible"
:id="id"
class="sharePlaylistIcon"
:dropdown-position-y="description ? 'top' : 'bottom'"
share-target-type="Playlist"
/>
</div>
</div>
<ft-prompt
v-if="showDeletePlaylistPrompt"
:label="$t('User Playlists.Are you sure you want to delete this playlist? This cannot be undone')"
:option-names="deletePlaylistPromptNames"
:option-values="deletePlaylistPromptValues"
:is-first-option-destructive="true"
@click="handleDeletePlaylistPromptAnswer"
/>
<ft-prompt
v-if="showRemoveVideosOnWatchPrompt"
:label="removeVideosOnWatchPromptLabelText"
:option-names="deletePlaylistPromptNames"
:option-values="deletePlaylistPromptValues"
:is-first-option-destructive="true"
@click="handleRemoveVideosOnWatchPromptAnswer"
/>
<ft-prompt
v-if="showRemoveDuplicateVideosPrompt"
:label="removeDuplicateVideosPromptLabelText"
:option-names="deletePlaylistPromptNames"
:option-values="deletePlaylistPromptValues"
:is-first-option-destructive="true"
@click="handleRemoveDuplicateVideosPromptAnswer"
/>
</div>

<div class="playlistOptionsWrapper">
<div class="playlistOptionsAndSearch">
<div class="playlistOptions">
<ft-icon-button
v-if="editMode"
:title="$t('User Playlists.Save Changes')"
:disabled="playlistPersistenceDisabled"
:icon="['fas', 'save']"
theme="secondary"
@click="savePlaylistInfo"
/>
<ft-icon-button
v-if="editMode"
:title="$t('User Playlists.Cancel')"
:icon="['fas', 'times']"
theme="secondary"
@click="exitEditMode"
/>
<ft-icon-button
v-if="!editMode && isUserPlaylist"
:title="markedAsQuickBookmarkTarget ? $t('User Playlists.Quick Bookmark Enabled') : $t('User Playlists.Enable Quick Bookmark With This Playlist')"
:icon="markedAsQuickBookmarkTarget ? ['fas', 'bookmark'] : ['far', 'bookmark']"
:disabled="markedAsQuickBookmarkTarget"
:theme="markedAsQuickBookmarkTarget ? 'secondary' : 'base-no-default'"
@disabled-click="handleQuickBookmarkEnabledDisabledClick"
@click="enableQuickBookmarkForThisPlaylist"
/>
<ft-icon-button
v-if="!editMode && isUserPlaylist"
:title="$t('User Playlists.Edit Playlist Info')"
:icon="['fas', 'edit']"
theme="secondary"
@click="enterEditMode"
/>
<ft-icon-button
v-if="videoCount > 0 && showPlaylists && !editMode"
:title="$t('User Playlists.Copy Playlist')"
:icon="['fas', 'copy']"
theme="secondary"
@click="toggleCopyVideosPrompt"
/>
<ft-icon-button
v-if="exportPlaylistButtonVisible"
:title="$t('User Playlists.Export Playlist')"
:icon="['fas', 'file-arrow-down']"
theme="secondary"
@click="handlePlaylistExport"
/>
<ft-icon-button
v-if="!editMode && userPlaylistDuplicateItemCount > 0"
:title="$t('User Playlists.Remove Duplicate Videos')"
:icon="['fas', 'users-slash']"
theme="destructive"
@click="showRemoveDuplicateVideosPrompt = true"
/>
<ft-icon-button
v-if="!editMode && userPlaylistAnyVideoWatched"
:title="$t('User Playlists.Remove Watched Videos')"
:icon="['fas', 'eye-slash']"
theme="destructive"
@click="showRemoveVideosOnWatchPrompt = true"
/>
<ft-icon-button
v-if="deletePlaylistButtonVisible"
:disabled="markedAsQuickBookmarkTarget"
:title="!markedAsQuickBookmarkTarget ? $t('User Playlists.Delete Playlist') : playlistDeletionDisabledLabel"
:icon="['fas', 'trash']"
theme="destructive"
@disabled-click="handlePlaylistDeleteDisabledClick"
@click="showDeletePlaylistPrompt = true"
/>
<ft-share-button
v-if="sharePlaylistButtonVisible"
:id="id"
class="sharePlaylistIcon"
:dropdown-position-y="description ? 'top' : 'bottom'"
share-target-type="Playlist"
/>
</div>
<div
v-if="firstVideoIdExists && !editMode"
class="playlistOptions"
Expand Down Expand Up @@ -262,18 +236,44 @@
v-if="searchVideoModeAllowed"
class="searchInputsRow"
>
<ft-input
ref="searchInput"
class="inputElement"
:placeholder="$t('User Playlists.SinglePlaylistView.Search for Videos')"
:show-clear-text-button="true"
:show-action-button="false"
:value="query"
:maxlength="255"
@input="(input) => updateQueryDebounce(input)"
@clear="updateQueryDebounce('')"
/>
<div class="searchWrapper">
<ft-input
ref="searchInput"
class="inputElement"
:placeholder="$t('User Playlists.SinglePlaylistView.Search for Videos')"
:show-clear-text-button="true"
:show-action-button="false"
:value="query"
:maxlength="255"
@input="(input) => updateQueryDebounce(input)"
@clear="updateQueryDebounce('')"
/>
</div>
</div>
<ft-prompt
v-if="showDeletePlaylistPrompt"
:label="$t('User Playlists.Are you sure you want to delete this playlist? This cannot be undone')"
:option-names="deletePlaylistPromptNames"
:option-values="deletePlaylistPromptValues"
:is-first-option-destructive="true"
@click="handleDeletePlaylistPromptAnswer"
/>
<ft-prompt
v-if="showRemoveVideosOnWatchPrompt"
:label="removeVideosOnWatchPromptLabelText"
:option-names="deletePlaylistPromptNames"
:option-values="deletePlaylistPromptValues"
:is-first-option-destructive="true"
@click="handleRemoveVideosOnWatchPromptAnswer"
/>
<ft-prompt
v-if="showRemoveDuplicateVideosPrompt"
:label="removeDuplicateVideosPromptLabelText"
:option-names="deletePlaylistPromptNames"
:option-values="deletePlaylistPromptValues"
:is-first-option-destructive="true"
@click="handleRemoveDuplicateVideosPromptAnswer"
/>
</div>
</div>
</template>
Expand Down

0 comments on commit 2da3315

Please sign in to comment.