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

Distinguish destructive actions (#4374) 

* Add destructive styling to destructive actions in FreeTube, including prompt confirmations

* Improve destructive action label clarity

* Implement darker red only if red theme is selected

* Fix experimental settings bug

* Update to use fallback destructive colors

* Remove color from 'Cancel' prompt buttons

* Add icon capability to ft-buttons, & attach trash icon to destructive buttons

* Change yellow destructive fallback text color to black for readability

* Change red color to have an accessible color contrast

* Update red color to lighter color closer to original to avoid conflict

* Tentatively codify black as new corresponding text color for red and draculaRed

* Alter red theme text color to white

* Make affirmative label clearer for Ask Before Opening prompt

* Make restart prompt not destructive
This commit is contained in:
Jason 2024-05-02 00:27:07 +00:00 committed by GitHub
parent 654f54dc51
commit 19c5966a5a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
23 changed files with 168 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/renderer/App.js
View File

@ -130,7 +130,7 @@ export default defineComponent({
externalLinkOpeningPromptNames: function () {
return [
this.$t('Yes'),
this.$t('Yes, Open Link'),
this.$t('No')
]
},

6
src/renderer/components/data-settings/data-settings.js
View File

@ -39,7 +39,8 @@ export default defineComponent({
'youtubenew',
'youtube',
'youtubeold',
'newpipe'
'newpipe',
'close'
],
shouldExportPlaylistForOlderVersions: false,
@ -70,7 +71,8 @@ export default defineComponent({
`${exportYouTube} (.csv)`,
`${exportYouTube} (.json)`,
`${exportYouTube} (.opml)`,
`${exportNewPipe} (.json)`
`${exportNewPipe} (.json)`,
this.$t('Close')
]
},
primaryProfile: function () {

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

@ -67,7 +67,6 @@
:label="$t('Settings.Data Settings.Select Export Type')"
:option-names="exportSubscriptionsPromptNames"
:option-values="subscriptionsPromptValues"
:show-close="true"
@click="exportSubscriptions"
/>
</ft-settings-section>

2
src/renderer/components/experimental-settings/experimental-settings.js
View File

@ -37,7 +37,7 @@ export default defineComponent({
handleReplaceHttpCache: function (value) {
this.showRestartPrompt = false
if (value === null || value === 'no') {
if (value === null || value === 'cancel') {
this.replaceHttpCache = !this.replaceHttpCache
return
}

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

@ -19,8 +19,8 @@
<ft-prompt
v-if="showRestartPrompt"
:label="$t('Settings[\'The app needs to restart for changes to take effect. Restart and apply change?\']')"
:option-names="[$t('Yes'), $t('No')]"
:option-values="['yes', 'no']"
:option-names="[$t('Yes, Restart'), $t('Cancel')]"
:option-values="['restart', 'cancel']"
@click="handleReplaceHttpCache"
/>
</ft-settings-section>

3
src/renderer/components/ft-button/ft-button.css
View File

@ -7,7 +7,6 @@
block-size: fit-content;
box-sizing: border-box;
cursor: pointer;
display: inline-block;
align-items: center;
justify-content: center;
text-align: center;
@ -17,6 +16,8 @@
white-space: nowrap;
font-weight: 500;
vertical-align: middle;
display: flex;
gap: 10px;
margin: 5px;
box-shadow: 0 1px 2px rgb(0 0 0 / 50%);
}

4
src/renderer/components/ft-button/ft-button.js
View File

@ -18,6 +18,10 @@ export default defineComponent({
id: {
type: String,
default: ''
},
icon: {
type: Array,
default: null
}
},
emits: ['click'],

4
src/renderer/components/ft-button/ft-button.vue
View File

@ -10,6 +10,10 @@
@click="click"
>
<slot>
<font-awesome-icon
v-if="icon"
:icon="icon"
/>
{{ label }}
</slot>
</button>

2
src/renderer/components/ft-create-playlist-prompt/ft-create-playlist-prompt.vue
View File

@ -25,6 +25,8 @@
/>
<ft-button
:label="$t('User Playlists.Cancel')"
:text-color="null"
:background-color="null"
@click="hideCreatePlaylistPrompt"
/>
</ft-flex-box>

14
src/renderer/components/ft-icon-button/ft-icon-button.scss
View File

@ -74,6 +74,20 @@
}
}
&.destructive {
background-color: var(--destructive-color);
color: var(--destructive-text-color);
&:hover,
&:focus-visible {
background-color: var(--destructive-hover-color);
}
&:active {
background-color: var(--destructive-active-color);
}
}
&.favorite, &.favorite:hover, &.favorite:focus-visible {
color: var(--favorite-icon-color);
}

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

@ -73,6 +73,8 @@
/>
<ft-button
:label="$t('User Playlists.Cancel')"
:text-color="null"
:background-color="null"
@click="hide"
/>
</ft-flex-box>

10
src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.js
View File

@ -34,8 +34,8 @@ export default defineComponent({
subscriptions: [],
selectedLength: 0,
deletePromptValues: [
'yes',
'no'
'delete',
'cancel'
]
}
},
@ -61,8 +61,8 @@ export default defineComponent({
},
deletePromptNames: function () {
return [
this.$t('Yes'),
this.$t('No')
this.$t('Yes, Delete'),
this.$t('Cancel')
]
},
locale: function () {
@ -109,7 +109,7 @@ export default defineComponent({
},
handleDeletePromptClick: function (value) {
if (value !== 'no' && value !== null) {
if (value !== 'cancel' && value !== null) {
if (this.isMainProfile) {
const channelsToRemove = this.subscriptions.filter((channel) => channel.selected)
this.subscriptions = this.subscriptions.filter((channel) => !channel.selected)

5
src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.vue
View File

@ -30,8 +30,8 @@
/>
<ft-button
:label="$t('Profile.Delete Selected')"
text-color="var(--text-with-main-color)"
background-color="var(--primary-color)"
text-color="var(--destructive-text-color)"
background-color="var(--destructive-color)"
@click="displayDeletePrompt"
/>
</ft-flex-box>
@ -41,6 +41,7 @@
:label="deletePromptMessage"
:option-names="deletePromptNames"
:option-values="deletePromptValues"
:is-first-option-destructive="true"
@click="handleDeletePromptClick"
/>
</div>

10
src/renderer/components/ft-profile-edit/ft-profile-edit.js
View File

@ -42,8 +42,8 @@ export default defineComponent({
profileBgColor: '',
profileTextColor: '',
deletePromptValues: [
'yes',
'no'
'delete',
'cancel'
]
}
},
@ -70,8 +70,8 @@ export default defineComponent({
},
deletePromptNames: function () {
return [
this.$t('Yes'),
this.$t('No')
this.$t('Yes, Delete'),
this.$t('Cancel')
]
},
editOrCreateProfileLabel: function () {
@ -101,7 +101,7 @@ export default defineComponent({
},
handleDeletePrompt: function (response) {
if (response === 'yes') {
if (response === 'delete') {
this.deleteProfile()
} else {
this.showDeletePrompt = false

6
src/renderer/components/ft-profile-edit/ft-profile-edit.vue
View File

@ -83,8 +83,9 @@
<ft-button
v-if="!isMainProfile"
:label="$t('Profile.Delete Profile')"
text-color="var(--text-with-main-color)"
background-color="var(--primary-color)"
text-color="var(--destructive-text-color)"
background-color="var(--destructive-color)"
:icon="['fas', 'trash']"
@click="openDeletePrompt"
/>
</template>
@ -99,6 +100,7 @@
:label="deletePromptLabel"
:option-names="deletePromptNames"
:option-values="deletePromptValues"
:is-first-option-destructive="true"
@click="handleDeletePrompt"
/>
</div>

24
src/renderer/components/ft-prompt/ft-prompt.js
View File

@ -29,11 +29,11 @@ export default defineComponent({
type: Array,
default: () => { return [] }
},
showClose: {
autosize: {
type: Boolean,
default: false
},
autosize: {
isFirstOptionDestructive: {
type: Boolean,
default: false
},
@ -52,7 +52,7 @@ export default defineComponent({
computed: {
sanitizedLabel: function() {
return sanitizeForHtmlId(this.label)
}
},
},
mounted: function () {
this.lastActiveElement = document.activeElement
@ -72,6 +72,24 @@ export default defineComponent({
nextTick(() => this.lastActiveElement?.focus())
},
methods: {
optionButtonTextColor: function(index) {
if (index === 0 && this.isFirstOptionDestructive) {
return 'var(--destructive-text-color)'
} else if (index < this.optionNames.length - 1) {
return 'var(--text-with-accent-color)'
} else {
return null
}
},
optionButtonBackgroundColor: function(index) {
if (index === 0 && this.isFirstOptionDestructive) {
return 'var(--destructive-color)'
} else if (index < this.optionNames.length - 1) {
return 'var(--accent-color)'
} else {
return null
}
},
click: function (value) {
this.$emit('click', value)
},

12
src/renderer/components/ft-prompt/ft-prompt.vue
View File

@ -36,17 +36,11 @@
:id="'prompt-' + sanitizedLabel + '-' + index"
:key="index"
:label="option"
:text-color="optionButtonTextColor(index)"
:background-color="optionButtonBackgroundColor(index)"
:icon="index === 0 && isFirstOptionDestructive ? ['fas', 'trash'] : null"
@click="click(optionValues[index])"
/>
<ft-button
v-if="showClose"
:id="'prompt-' + sanitizedLabel + '-close'"
:label="$t('Close')"
:tabindex="0"
text-color="'var(--accent-color)'"
background-color="'var(--text-with-accent-color)'"
@click="hide"
/>
</ft-flex-box>
</slot>
</ft-card>

6
src/renderer/components/playlist-info/playlist-info.vue
View File

@ -155,14 +155,14 @@
v-if="!editMode && isUserPlaylist && videoCount > 0"
:title="$t('User Playlists.Remove Watched Videos')"
:icon="['fas', 'eye-slash']"
theme="primary"
theme="destructive"
@click="showRemoveVideosOnWatchPrompt = true"
/>
<ft-icon-button
v-if="deletePlaylistButtonVisible"
:title="$t('User Playlists.Delete Playlist')"
:icon="['fas', 'trash']"
theme="primary"
theme="destructive"
@click="showDeletePlaylistPrompt = true"
/>
<ft-share-button
@ -179,6 +179,7 @@
: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
@ -186,6 +187,7 @@
:label="$t('User Playlists.Are you sure you want to remove all watched videos from this playlist? This cannot be undone')"
:option-names="deletePlaylistPromptNames"
:option-values="deletePlaylistPromptValues"
:is-first-option-destructive="true"
@click="handleRemoveVideosOnWatchPromptAnswer"
/>
</div>

14
src/renderer/components/privacy-settings/privacy-settings.js
View File

@ -24,8 +24,8 @@ export default defineComponent({
showRemoveSubscriptionsPrompt: false,
showRemovePlaylistsPrompt: false,
promptValues: [
'yes',
'no'
'delete',
'cancel'
]
}
},
@ -48,8 +48,8 @@ export default defineComponent({
},
promptNames: function () {
return [
this.$t('Yes'),
this.$t('No')
this.$t('Yes, Delete'),
this.$t('Cancel')
]
}
},
@ -57,7 +57,7 @@ export default defineComponent({
handleSearchCache: function (option) {
this.showSearchCachePrompt = false
if (option === 'yes') {
if (option === 'delete') {
this.clearSessionSearchHistory()
showToast(this.$t('Settings.Privacy Settings.Search cache has been cleared'))
}
@ -74,7 +74,7 @@ export default defineComponent({
handleRemoveHistory: function (option) {
this.showRemoveHistoryPrompt = false
if (option === 'yes') {
if (option === 'delete') {
this.removeAllHistory()
showToast(this.$t('Settings.Privacy Settings.Watch history has been cleared'))
}
@ -85,7 +85,7 @@ export default defineComponent({
this.updateActiveProfile(MAIN_PROFILE_ID)
if (option !== 'yes') { return }
if (option !== 'delete') { return }
this.profileList.forEach((profile) => {
if (profile._id === MAIN_PROFILE_ID) {

24
src/renderer/components/privacy-settings/privacy-settings.vue
View File

@ -34,26 +34,30 @@
<ft-flex-box>
<ft-button
:label="$t('Settings.Privacy Settings.Clear Search Cache')"
text-color="var(--text-with-main-color)"
background-color="var(--primary-color)"
text-color="var(--destructive-text-color)"
background-color="var(--destructive-color)"
:icon="['fas', 'trash']"
@click="showSearchCachePrompt = true"
/>
<ft-button
:label="$t('Settings.Privacy Settings.Remove Watch History')"
text-color="var(--text-with-main-color)"
background-color="var(--primary-color)"
text-color="var(--destructive-text-color)"
background-color="var(--destructive-color)"
:icon="['fas', 'trash']"
@click="showRemoveHistoryPrompt = true"
/>
<ft-button
:label="$t('Settings.Privacy Settings.Remove All Subscriptions / Profiles')"
text-color="var(--text-with-main-color)"
background-color="var(--primary-color)"
text-color="var(--destructive-text-color)"
background-color="var(--destructive-color)"
:icon="['fas', 'trash']"
@click="showRemoveSubscriptionsPrompt = true"
/>
<ft-button
:label="$t('Settings.Privacy Settings.Remove All Playlists')"
text-color="var(--text-with-main-color)"
background-color="var(--primary-color)"
text-color="var(--destructive-text-color)"
background-color="var(--destructive-color)"
:icon="['fas', 'trash']"
@click="showRemovePlaylistsPrompt = true"
/>
</ft-flex-box>
@ -62,6 +66,7 @@
:label="$t('Settings.Privacy Settings.Are you sure you want to clear out your search cache?')"
:option-names="promptNames"
:option-values="promptValues"
:is-first-option-destructive="true"
@click="handleSearchCache"
/>
<ft-prompt
@ -69,6 +74,7 @@
:label="$t('Settings.Privacy Settings.Are you sure you want to remove your entire watch history?')"
:option-names="promptNames"
:option-values="promptValues"
:is-first-option-destructive="true"
@click="handleRemoveHistory"
/>
<ft-prompt
@ -76,6 +82,7 @@
:label="removeSubscriptionsPromptMessage"
:option-names="promptNames"
:option-values="promptValues"
:is-first-option-destructive="true"
@click="handleRemoveSubscriptions"
/>
<ft-prompt
@ -83,6 +90,7 @@
:label="$t('Settings.Privacy Settings.Are you sure you want to remove all your playlists?')"
:option-names="promptNames"
:option-values="promptValues"
:is-first-option-destructive="true"
@click="handleRemovePlaylists"
/>
</ft-settings-section>

10
src/renderer/components/theme-settings/theme-settings.js
View File

@ -27,8 +27,8 @@ export default defineComponent({
disableSmoothScrollingToggleValue: false,
showRestartPrompt: false,
restartPromptValues: [
'yes',
'no'
'restart',
'cancel'
],
baseThemeValues: [
'system',
@ -90,8 +90,8 @@ export default defineComponent({
restartPromptNames: function () {
return [
this.$t('Yes'),
this.$t('No')
this.$t('Yes, Restart'),
this.$t('Cancel')
]
},
@ -141,7 +141,7 @@ export default defineComponent({
handleSmoothScrolling: function (value) {
this.showRestartPrompt = false
if (value === null || value === 'no') {
if (value === null || value === 'cancel') {
this.disableSmoothScrollingToggleValue = !this.disableSmoothScrollingToggleValue
return
}

78
src/renderer/themes.css
View File

@ -8,6 +8,10 @@
.hotPink,
.nordic {
--primary-input-color: rgb(0 0 0 / 50%);
--destructive-color: #f44336;
--destructive-text-color: #000;
--destructive-hover-color: #e53935;
--destructive-active-color: #c62828;
}
.system[data-system-theme*='light'], .light,
@ -191,6 +195,25 @@
--logo-text: url("../../_icons/textBlackSmall.svg");
}
.nordic {
--primary-text-color: #EEE;
--secondary-text-color: #ddd;
--tertiary-text-color: #EEE;
--title-color: #EEE;
--bg-color: #2b2f3a;
--favorite-icon-color: #0F0;
--card-bg-color: #2e3440;
--secondary-card-bg-color: rgb(59 66 82 / 75%);
--scrollbar-color: #4b566a;
--scrollbar-color-hover: #4b566a;
--side-nav-color: #2e3440;
--side-nav-hover-color: #3b4252;
--side-nav-active-color: #3b4252;
--search-bar-color: #4b566a;
--logo-icon: url("../../_icons/iconNordicLightSmall.svg");
--logo-text: url("../../_icons/textNordicLightSmall.svg");
}
.hotPink {
--primary-text-color: #FFFF;
--secondary-text-color: #FFFF;
@ -243,25 +266,6 @@ it can be safely elided. This looks quite pleasant on this theme. */
text-decoration: underline;
}
.nordic {
--primary-text-color: #EEE;
--secondary-text-color: #ddd;
--tertiary-text-color: #EEE;
--title-color: #EEE;
--bg-color: #2b2f3a;
--favorite-icon-color: #0F0;
--card-bg-color: #2e3440;
--secondary-card-bg-color: rgb(59 66 82 / 75%);
--scrollbar-color: #4b566a;
--scrollbar-color-hover: #4b566a;
--side-nav-color: #2e3440;
--side-nav-hover-color: #3b4252;
--side-nav-active-color: #3b4252;
--search-bar-color: #4b566a;
--logo-icon: url("../../_icons/iconNordicLightSmall.svg");
--logo-text: url("../../_icons/textNordicLightSmall.svg");
}
.mainRed,
.mainPink,
.mainPurple,
@ -387,6 +391,7 @@ it can be safely elided. This looks quite pleasant on this theme. */
.mainDraculaCyan,
.mainDraculaGreen,
.mainDraculaOrange,
.mainDraculaRed,
.mainDraculaYellow {
--text-with-main-color: #282A36;
--logo-icon-bar-color: url("../../_icons/iconDraculaDarkSmall.svg");
@ -394,8 +399,7 @@ it can be safely elided. This looks quite pleasant on this theme. */
}
.mainDraculaPink,
.mainDraculaPurple,
.mainDraculaRed {
.mainDraculaPurple {
--text-with-main-color: #F8F8F2;
--logo-icon-bar-color: url("../../_icons/iconDraculaLightSmall.svg");
--logo-text-bar-color: url("../../_icons/textDraculaLightSmall.svg");
@ -763,13 +767,13 @@ it can be safely elided. This looks quite pleasant on this theme. */
.secDraculaCyan,
.secDraculaGreen,
.secDraculaOrange,
.secDraculaRed,
.secDraculaYellow {
--text-with-accent-color: #212121;
}
.secDraculaPink,
.secDraculaPurple,
.secDraculaRed {
.secDraculaPurple {
--text-with-accent-color: #F8F8F2;
}
@ -1028,6 +1032,34 @@ it can be safely elided. This looks quite pleasant on this theme. */
--accent-color-opacity4: rgb(180 190 254 / 24%);
}
/* region destructive color for red color themes
using :has(.app) to increase specificity */
.mainRed:has(.app), .secRed:has(.app), .mainDraculaRed:has(.app), .secDraculaRed:has(.app) {
--destructive-color: #9C27B0;
--destructive-text-color: #FFF;
--destructive-hover-color: #8E24AA;
--destructive-active-color: #6A1B9A;
}
/* Deal with theme conflict on destructive colors */
.mainRed.secPurple,
.mainRed.secDeepPurple,
.mainRed.secDraculaPurple,
.mainDraculaRed.secPurple,
.mainDraculaRed.secDeepPurple,
.mainDraculaRed.secDraculaPurple,
.mainPurple.secRed,
.mainPurple.secDraculaRed,
.mainDeepPurple.secRed,
.mainDeepPurple.secDraculaRed,
.mainDraculaPurple.secRed,
.mainDraculaPurple.secDraculaRed {
--destructive-color: #FF9800;
--destructive-text-color: #FFF;
--destructive-hover-color: #FB8C00;
--destructive-active-color: #EF6C00;
}
body[dir='ltr'] {
--ltr-or-rtl: ltr;
--float-left-ltr-rtl-value: left;

4
static/locales/en-US.yaml
View File

@ -1068,6 +1068,10 @@ Moments Ago: moments ago
Yes: Yes
No: No
Ok: Ok
Yes, Delete: Yes, Delete
Yes, Restart: Yes, Restart
Yes, Open Link: Yes, Open Link
Cancel: Cancel
# symbol used to indicate that an item is correct
checkmark: ✓
# French is the only language that should change this (they have a space before the colon)