lasers
/
FreeTube
mirror of https://github.com/FreeTubeApp/FreeTube
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Implement icons for all ft-selects

This commit is contained in:
Jason Henriquez 2024-04-23 12:55:32 -05:00
parent 8e2ec57058
commit b1dfaa966d
21 changed files with 131 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/renderer/components/download-settings/download-settings.vue
View File

@ -8,6 +8,7 @@
:value="downloadBehavior"
:select-names="downloadBehaviorNames"
:select-values="downloadBehaviorValues"
:icon="['fas', 'download']"
@change="updateDownloadBehavior"
/>
</ft-flex-box>

1
src/renderer/components/external-player-settings/external-player-settings.vue
View File

@ -9,6 +9,7 @@
:select-names="externalPlayerNames"
:select-values="externalPlayerValues"
:tooltip="$t('Tooltips.External Player Settings.External Player')"
:icon="['fas', 'external-link-alt']"
@change="updateExternalPlayer"
/>
</ft-flex-box>

13
src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.js
View File

@ -154,6 +154,19 @@ export default defineComponent({
sortBySelectValues() {
return Object.values(SORT_BY_VALUES)
},
sortIcon: function () {
switch (this.sortBy) {
case SORT_BY_VALUES.NameDescending:
case SORT_BY_VALUES.LatestCreatedFirst:
case SORT_BY_VALUES.LatestUpdatedFirst:
return ['fas', 'arrow-down-short-wide']
case SORT_BY_VALUES.NameAscending:
case SORT_BY_VALUES.EarliestCreatedFirst:
case SORT_BY_VALUES.EarliestUpdatedFirst:
default:
return ['fas', 'arrow-up-wide-short']
}
}
},
watch: {
allPlaylistsLength(val, oldVal) {

1
src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.vue
View File

@ -40,6 +40,7 @@
:select-names="sortBySelectNames"
:select-values="sortBySelectValues"
:placeholder="$t('User Playlists.Sort By.Sort By')"
:icon="sortIcon"
@change="sortBy = $event"
/>
</div>

1
src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.vue
View File

@ -10,6 +10,7 @@
:value="profileNameList[filteredProfileIndex]"
:select-names="profileNameList"
:select-values="profileNameList"
:icon="['fas', 'filter']"
@change="handleProfileFilterChange"
/>
</ft-flex-box>

7
src/renderer/components/ft-select/ft-select.css
View File

@ -88,12 +88,19 @@
font-size: 18px;
font-weight: normal;
position: absolute;
display: flex;
column-gap: 6px;
inset-inline-start: 0;
inset-block-start: 10px;
transition: 0.2s ease all;
color: var(--tertiary-text-color);
}
.select-icon {
inline-size: 14px;
block-size: 14px;
}
/* active state */
.select-text:focus ~ .select-label, .select-text:valid ~ .select-label {
color: var(--accent-color);

8
src/renderer/components/ft-select/ft-select.js
View File

@ -39,6 +39,14 @@ export default defineComponent({
describeById: {
type: String,
default: null
},
icon: {
type: Array,
required: true
},
iconColor: {
type: String,
default: null
}
},
emits: ['change'],

6
src/renderer/components/ft-select/ft-select.vue
View File

@ -30,6 +30,12 @@
:for="sanitizedId ?? sanitizedPlaceholder"
:hidden="disabled"
>
<font-awesome-icon
v-if="icon"
:icon="icon"
class="select-icon"
:color="iconColor"
/>
{{ placeholder }}
</label>
<ft-tooltip

3
src/renderer/components/ft-sponsor-block-category/ft-sponsor-block-category.vue
View File

@ -13,6 +13,8 @@
:value="sponsorBlockValues.color"
:select-names="colorNames"
:select-values="colorValues"
:icon="['fas', 'palette']"
:icon-color="sponsorBlockValues.color"
@change="updateColor"
/>
<ft-select
@ -22,6 +24,7 @@
:value="sponsorBlockValues.skip"
:select-names="skipNames"
:select-values="skipValues"
:icon="['fas', 'forward']"
@change="updateSkipOption"
/>
</div>

7
src/renderer/components/general-settings/general-settings.vue
View File

@ -47,6 +47,7 @@
:select-names="backendNames"
:select-values="backendValues"
:tooltip="$t('Tooltips.General Settings.Preferred API Backend')"
:icon="['fas', 'server']"
@change="handlePreferredApiBackend"
/>
<ft-select
@ -54,6 +55,7 @@
:value="landingPage"
:select-names="defaultPageNames"
:select-values="defaultPageValues"
:icon="['fas', 'location-dot']"
@change="updateLandingPage"
/>
<ft-select
@ -61,6 +63,7 @@
:value="listType"
:select-names="viewTypeNames"
:select-values="viewTypeValues"
:icon="listType === 'grid' ? ['fas', 'grip'] : ['fas', 'list']"
@change="updateListType"
/>
<ft-select
@ -69,6 +72,7 @@
:select-names="thumbnailTypeNames"
:select-values="thumbnailTypeValues"
:tooltip="$t('Tooltips.General Settings.Thumbnail Preference')"
:icon="['fas', 'images']"
@change="handleThumbnailPreferenceChange"
/>
<ft-select
@ -76,6 +80,7 @@
:value="currentLocale"
:select-names="localeNames"
:select-values="localeOptions"
:icon="['fas', 'language']"
@change="updateCurrentLocale"
/>
<ft-select
@ -83,6 +88,7 @@
:value="region"
:select-names="regionNames"
:select-values="regionValues"
:icon="['fas', 'globe']"
:tooltip="$t('Tooltips.General Settings.Region for Trending')"
@change="updateRegion"
/>
@ -91,6 +97,7 @@
:value="externalLinkHandling"
:select-names="externalLinkHandlingNames"
:select-values="externalLinkHandlingValues"
:icon="['fas', 'external-link-alt']"
:tooltip="$t('Tooltips.General Settings.External Link Handling')"
@change="updateExternalLinkHandling"
/>

4
src/renderer/components/player-settings/player-settings.vue
View File

@ -139,6 +139,7 @@
:value="videoPlaybackRateInterval"
:select-names="playbackRateIntervalValues"
:select-values="playbackRateIntervalValues"
:icon="['fas', 'gauge']"
@change="updateVideoPlaybackRateInterval"
/>
</ft-flex-box>
@ -149,6 +150,7 @@
:select-names="formatNames"
:select-values="formatValues"
:tooltip="$t('Tooltips.Player Settings.Default Video Format')"
:icon="['fas', 'file-video']"
@change="updateDefaultVideoFormat"
/>
<ft-select
@ -156,6 +158,7 @@
:value="defaultQuality"
:select-names="qualityNames"
:select-values="qualityValues"
:icon="['fas', 'photo-film']"
@change="updateDefaultQuality"
/>
<ft-toggle-switch
@ -184,6 +187,7 @@
:value="screenshotFormat"
:select-names="screenshotFormatNames"
:select-values="screenshotFormatValues"
:icon="['fas', 'file-image']"
@change="handleUpdateScreenshotFormat"
/>
<ft-slider

1
src/renderer/components/proxy-settings/proxy-settings.vue
View File

@ -19,6 +19,7 @@
:select-names="protocolNames"
:select-values="protocolValues"
class="protocol-dropdown"
:icon="['fas', 'microchip']"
@change="handleUpdateProxyProtocol"
/>
</ft-flex-box>

5
src/renderer/components/theme-settings/theme-settings.vue
View File

@ -57,6 +57,7 @@
:value="baseTheme"
:select-names="baseThemeNames"
:select-values="baseThemeValues"
:icon="['fas', 'palette']"
@change="updateBaseTheme"
/>
<ft-select
@ -65,6 +66,8 @@
:select-names="colorNames"
:select-values="colorValues"
:disabled="!areColorThemesEnabled"
:icon="['fas', 'palette']"
icon-color="var(--primary-color)"
@change="updateMainColor"
/>
<ft-select
@ -73,6 +76,8 @@
:select-names="colorNames"
:select-values="colorValues"
:disabled="!areColorThemesEnabled"
:icon="['fas', 'palette']"
icon-color="var(--accent-color)"
@change="updateSecColor"
/>
</ft-flex-box>

1
src/renderer/components/watch-video-comments/watch-video-comments.vue
View File

@ -47,6 +47,7 @@
:value="currentSortValue"
:select-names="sortNames"
:select-values="sortValues"
:icon="['fas', 'arrow-down-short-wide']"
@change="handleSortChange"
/>
<div

25
src/renderer/main.js
View File

@ -14,9 +14,11 @@ import {
faAngleDown,
faAngleUp,
faArrowDown,
faArrowDownShortWide,
faArrowLeft,
faArrowRight,
faArrowUp,
faArrowUpWideShort,
faBars,
faBookmark,
faCheck,
@ -37,20 +39,29 @@ import {
faEye,
faEyeSlash,
faFileDownload,
faFileImage,
faFileVideo,
faFilter,
faFire,
faForward,
faGauge,
faGlobe,
faGrip,
faHashtag,
faHeart,
faHistory,
faImages,
faInfoCircle,
faLanguage,
faLink,
faLinkSlash,
faList,
faLocationDot,
faMicrochip,
faNewspaper,
faPalette,
faPause,
faPhotoFilm,
faPlay,
faPlus,
faQuestionCircle,
@ -60,6 +71,7 @@ import {
faSatelliteDish,
faSave,
faSearch,
faServer,
faShareAlt,
faSlidersH,
faSortDown,
@ -93,9 +105,11 @@ library.add(
faAngleDown,
faAngleUp,
faArrowDown,
faArrowDownShortWide,
faArrowLeft,
faArrowRight,
faArrowUp,
faArrowUpWideShort,
faBars,
faBookmark,
faCheck,
@ -116,22 +130,32 @@ library.add(
faEye,
faEyeSlash,
faFileDownload,
faFileImage,
faFileVideo,
faFilter,
faFire,
faForward,
faGauge,
faGlobe,
faGrip,
faHashtag,
faHeart,
faHistory,
faImages,
faInfoCircle,
faLanguage,
faLink,
faLinkSlash,
faList,
faLocationDot,
faMicrochip,
faNewspaper,
faPalette,
faPause,
faPhotoFilm,
faPlay,
faPlus,
faPhotoFilm,
faQuestionCircle,
faRandom,
faRetweet,
@ -139,6 +163,7 @@ library.add(
faSatelliteDish,
faSave,
faSearch,
faServer,
faShareAlt,
faSlidersH,
faSortDown,

12
src/renderer/views/Channel/Channel.js
View File

@ -1950,6 +1950,18 @@ export default defineComponent({
})
},
sortIconFor: function (sortPreference) {
switch (sortPreference) {
case 'last':
case 'newest':
case 'popular':
return ['fas', 'arrow-down-short-wide']
case 'oldest':
default:
return ['fas', 'arrow-up-wide-short']
}
},
...mapActions([
'showOutlines',
'updateSubscriptionDetails',

4
src/renderer/views/Channel/Channel.vue
View File

@ -237,6 +237,7 @@
:select-names="videoLiveShortSelectNames"
:select-values="videoLiveShortSelectValues"
:placeholder="$t('Search Filters.Sort By.Sort By')"
:icon="sortIconFor(videoSortBy)"
@change="videoSortBy = $event"
/>
<ft-select
@ -246,6 +247,7 @@
:select-names="videoLiveShortSelectNames"
:select-values="videoLiveShortSelectValues"
:placeholder="$t('Search Filters.Sort By.Sort By')"
:icon="sortIconFor(shortSortBy)"
@change="shortSortBy = $event"
/>
<ft-select
@ -255,6 +257,7 @@
:select-names="videoLiveShortSelectNames"
:select-values="videoLiveShortSelectValues"
:placeholder="$t('Search Filters.Sort By.Sort By')"
:icon="sortIconFor(liveSortBy)"
@change="liveSortBy = $event"
/>
<ft-select
@ -264,6 +267,7 @@
:select-names="playlistSelectNames"
:select-values="playlistSelectValues"
:placeholder="$t('Search Filters.Sort By.Sort By')"
:icon="sortIconFor(playlistSortBy)"
@change="playlistSortBy = $event"
/>
</div>

14
src/renderer/views/Playlist/Playlist.js
View File

@ -241,6 +241,20 @@ export default defineComponent({
sortBySelectValues() {
return this.sortByValues
},
sortIcon: function () {
switch (this.sortOrder) {
case SORT_BY_VALUES.DateAddedNewest:
case SORT_BY_VALUES.VideoTitleDescending:
case SORT_BY_VALUES.AuthorDescending:
return ['fas', 'arrow-down-short-wide']
case SORT_BY_VALUES.DateAddedOldest:
case SORT_BY_VALUES.VideoTitleAscending:
case SORT_BY_VALUES.AuthorAscending:
case SORT_BY_VALUES.Custom:
default:
return ['fas', 'arrow-up-wide-short']
}
}
},
watch: {
$route () {

1
src/renderer/views/Playlist/Playlist.vue
View File

@ -50,6 +50,7 @@
:select-names="sortBySelectNames"
:select-values="sortBySelectValues"
:placeholder="$t('Playlist.Sort By.Sort By')"
:icon="sortIcon"
@change="updateUserPlaylistSortOrder"
/>
<template

15
src/renderer/views/UserPlaylists/UserPlaylists.js
View File

@ -164,6 +164,21 @@ export default defineComponent({
sortBySelectValues() {
return Object.values(SORT_BY_VALUES)
},
sortIcon: function () {
switch (this.sortBy) {
case SORT_BY_VALUES.NameDescending:
case SORT_BY_VALUES.LatestCreatedFirst:
case SORT_BY_VALUES.LatestUpdatedFirst:
case SORT_BY_VALUES.LatestPlayedFirst:
return ['fas', 'arrow-down-short-wide']
case SORT_BY_VALUES.NameAscending:
case SORT_BY_VALUES.EarliestCreatedFirst:
case SORT_BY_VALUES.EarliestPlayedFirst:
case SORT_BY_VALUES.EarliestUpdatedFirst:
default:
return ['fas', 'arrow-up-wide-short']
}
}
},
watch: {
lowerCaseQuery() {

1
src/renderer/views/UserPlaylists/UserPlaylists.vue
View File

@ -49,6 +49,7 @@
:select-names="sortBySelectNames"
:select-values="sortBySelectValues"
:placeholder="$t('User Playlists.Sort By.Sort By')"
:icon="sortIcon"
@change="sortBy = $event"
/>
</div>