From 62ad7d987a84d9c8b88b93d3871dbdccc89bc672 Mon Sep 17 00:00:00 2001 From: Jason Henriquez Date: Wed, 22 Nov 2023 23:39:09 -0600 Subject: [PATCH 01/14] Add destructive styling to destructive actions in FreeTube, including prompt confirmations --- .../experimental-settings.vue | 1 + .../components/ft-icon-button/ft-icon-button.scss | 14 ++++++++++++++ .../ft-profile-channel-list.vue | 5 +++-- .../ft-profile-edit/ft-profile-edit.vue | 5 +++-- src/renderer/components/ft-prompt/ft-prompt.js | 6 +++++- src/renderer/components/ft-prompt/ft-prompt.vue | 2 ++ .../privacy-settings/privacy-settings.vue | 15 +++++++++------ .../components/theme-settings/theme-settings.vue | 1 + src/renderer/themes.css | 4 ++++ 9 files changed, 42 insertions(+), 11 deletions(-) diff --git a/src/renderer/components/experimental-settings/experimental-settings.vue b/src/renderer/components/experimental-settings/experimental-settings.vue index 0e70671b8d4c3..d5f281e7497a9 100644 --- a/src/renderer/components/experimental-settings/experimental-settings.vue +++ b/src/renderer/components/experimental-settings/experimental-settings.vue @@ -21,6 +21,7 @@ :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']" + :is-first-option-destructive="true" @click="handleReplaceHttpCache" /> 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 58f776dd6414c..063e1d8d050c2 100644 --- a/src/renderer/components/ft-icon-button/ft-icon-button.scss +++ b/src/renderer/components/ft-icon-button/ft-icon-button.scss @@ -76,6 +76,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); } diff --git a/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.vue b/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.vue index 287ba452bcb5d..e2375a76181ec 100644 --- a/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.vue +++ b/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.vue @@ -30,8 +30,8 @@ /> @@ -41,6 +41,7 @@ :label="deletePromptMessage" :option-names="deletePromptNames" :option-values="deletePromptValues" + :is-first-option-destructive="true" @click="handleDeletePromptClick" /> diff --git a/src/renderer/components/ft-profile-edit/ft-profile-edit.vue b/src/renderer/components/ft-profile-edit/ft-profile-edit.vue index 6d17bcd3cb0f7..adf546e24e5db 100644 --- a/src/renderer/components/ft-profile-edit/ft-profile-edit.vue +++ b/src/renderer/components/ft-profile-edit/ft-profile-edit.vue @@ -84,8 +84,8 @@ @@ -96,6 +96,7 @@ :label="deletePromptLabel" :option-names="deletePromptNames" :option-values="deletePromptValues" + :is-first-option-destructive="true" @click="handleDeletePrompt" /> diff --git a/src/renderer/components/ft-prompt/ft-prompt.js b/src/renderer/components/ft-prompt/ft-prompt.js index f6fbf0b557c61..052daf5747b03 100644 --- a/src/renderer/components/ft-prompt/ft-prompt.js +++ b/src/renderer/components/ft-prompt/ft-prompt.js @@ -36,7 +36,11 @@ export default defineComponent({ autosize: { type: Boolean, default: false - } + }, + isFirstOptionDestructive: { + type: Boolean, + default: false + }, }, data: function () { return { diff --git a/src/renderer/components/ft-prompt/ft-prompt.vue b/src/renderer/components/ft-prompt/ft-prompt.vue index 0482696d8fdd5..7fd2197feb7fe 100644 --- a/src/renderer/components/ft-prompt/ft-prompt.vue +++ b/src/renderer/components/ft-prompt/ft-prompt.vue @@ -32,6 +32,8 @@ :id="'prompt-' + sanitizedLabel + '-' + index" :key="index" :label="option" + :text-color="index === 0 && isFirstOptionDestructive ? 'var(--destructive-text-color)' : null" + :background-color="index === 0 && isFirstOptionDestructive ? 'var(--destructive-color)' : null" @click="$emit('click', optionValues[index])" /> @@ -65,6 +65,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" /> diff --git a/src/renderer/components/theme-settings/theme-settings.vue b/src/renderer/components/theme-settings/theme-settings.vue index 27cd6d8589c80..7e7a04e09e554 100644 --- a/src/renderer/components/theme-settings/theme-settings.vue +++ b/src/renderer/components/theme-settings/theme-settings.vue @@ -81,6 +81,7 @@ :label="restartPromptMessage" :option-names="restartPromptNames" :option-values="restartPromptValues" + :is-first-option-destructive="true" @click="handleSmoothScrolling" /> diff --git a/src/renderer/themes.css b/src/renderer/themes.css index 0e6ddecf4a285..219b20450936b 100644 --- a/src/renderer/themes.css +++ b/src/renderer/themes.css @@ -7,6 +7,10 @@ .pastelPink, .hotPink { --primary-input-color: rgba(0, 0, 0, 0.50); + --destructive-color: #7F0000; + --destructive-text-color: #FFFFFF; + --destructive-hover-color: #FF2F2F; + --destructive-active-color: #AD6060; } .system[data-system-theme*='light'], .light, From 7056778872380324f4b1f50f3e0fb95acfff00d0 Mon Sep 17 00:00:00 2001 From: Jason Henriquez Date: Wed, 22 Nov 2023 23:53:57 -0600 Subject: [PATCH 02/14] Improve destructive action label clarity --- .../experimental-settings.vue | 4 ++-- .../ft-profile-channel-list.js | 8 ++++---- .../components/ft-profile-edit/ft-profile-edit.js | 10 +++++----- .../privacy-settings/privacy-settings.js | 14 +++++++------- .../components/theme-settings/theme-settings.js | 10 +++++----- static/locales/en-US.yaml | 3 +++ 6 files changed, 26 insertions(+), 23 deletions(-) diff --git a/src/renderer/components/experimental-settings/experimental-settings.vue b/src/renderer/components/experimental-settings/experimental-settings.vue index d5f281e7497a9..f5f77afb1dae1 100644 --- a/src/renderer/components/experimental-settings/experimental-settings.vue +++ b/src/renderer/components/experimental-settings/experimental-settings.vue @@ -19,8 +19,8 @@ diff --git a/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.js b/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.js index 971382b0f0398..da36605cfea63 100644 --- a/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.js +++ b/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.js @@ -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 () { diff --git a/src/renderer/components/ft-profile-edit/ft-profile-edit.js b/src/renderer/components/ft-profile-edit/ft-profile-edit.js index e6f4eddce3607..35835f05068a8 100644 --- a/src/renderer/components/ft-profile-edit/ft-profile-edit.js +++ b/src/renderer/components/ft-profile-edit/ft-profile-edit.js @@ -36,8 +36,8 @@ export default defineComponent({ profileBgColor: '', profileTextColor: '', deletePromptValues: [ - 'yes', - 'no' + 'delete', + 'cancel' ] } }, @@ -62,8 +62,8 @@ export default defineComponent({ }, deletePromptNames: function () { return [ - this.$t('Yes'), - this.$t('No') + this.$t('Yes, Delete'), + this.$t('Cancel') ] } }, @@ -84,7 +84,7 @@ export default defineComponent({ }, handleDeletePrompt: function (response) { - if (response === 'yes') { + if (response === 'delete') { this.deleteProfile() } else { this.showDeletePrompt = false diff --git a/src/renderer/components/privacy-settings/privacy-settings.js b/src/renderer/components/privacy-settings/privacy-settings.js index 0b541e0a532d7..2010015dab6b7 100644 --- a/src/renderer/components/privacy-settings/privacy-settings.js +++ b/src/renderer/components/privacy-settings/privacy-settings.js @@ -23,8 +23,8 @@ export default defineComponent({ showRemoveHistoryPrompt: false, showRemoveSubscriptionsPrompt: false, promptValues: [ - 'yes', - 'no' + 'delete', + 'cancel' ] } }, @@ -50,8 +50,8 @@ export default defineComponent({ }, promptNames: function () { return [ - this.$t('Yes'), - this.$t('No') + this.$t('Yes, Delete'), + this.$t('Cancel') ] } }, @@ -59,7 +59,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')) } @@ -83,7 +83,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')) } @@ -94,7 +94,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) { diff --git a/src/renderer/components/theme-settings/theme-settings.js b/src/renderer/components/theme-settings/theme-settings.js index 090a6dc8984cf..ce6e8e670718f 100644 --- a/src/renderer/components/theme-settings/theme-settings.js +++ b/src/renderer/components/theme-settings/theme-settings.js @@ -26,8 +26,8 @@ export default defineComponent({ disableSmoothScrollingToggleValue: false, showRestartPrompt: false, restartPromptValues: [ - 'yes', - 'no' + 'restart', + 'cancel' ], baseThemeValues: [ 'system', @@ -88,8 +88,8 @@ export default defineComponent({ restartPromptNames: function () { return [ - this.$t('Yes'), - this.$t('No') + this.$t('Yes, Restart'), + this.$t('Cancel') ] }, @@ -146,7 +146,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 } diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml index 81d442062e63b..c95f75ec3304b 100644 --- a/static/locales/en-US.yaml +++ b/static/locales/en-US.yaml @@ -939,3 +939,6 @@ Hashtag: Yes: Yes No: No Ok: Ok +Yes, Delete: Yes, Delete +Yes, Restart: Yes, Restart +Cancel: Cancel From da5a42d5f7eb8eb89ffd0b0aedb0d713e3c82bb1 Mon Sep 17 00:00:00 2001 From: Jason Henriquez Date: Thu, 23 Nov 2023 09:01:56 -0600 Subject: [PATCH 03/14] Implement darker red only if red theme is selected --- src/renderer/themes.css | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/src/renderer/themes.css b/src/renderer/themes.css index 219b20450936b..e4f4b902e1b03 100644 --- a/src/renderer/themes.css +++ b/src/renderer/themes.css @@ -7,10 +7,10 @@ .pastelPink, .hotPink { --primary-input-color: rgba(0, 0, 0, 0.50); - --destructive-color: #7F0000; + --destructive-color: #f44336; --destructive-text-color: #FFFFFF; - --destructive-hover-color: #FF2F2F; - --destructive-active-color: #AD6060; + --destructive-hover-color: #e53935; + --destructive-active-color: #c62828; } .system[data-system-theme*='light'], .light, @@ -241,6 +241,13 @@ it can be safely elided. This looks quite pleasant on this theme. */ text-decoration: underline; } +.mainRed, .secRed { + --destructive-color: #7F0000 !important; + --destructive-text-color: #FFFFFF !important; + --destructive-hover-color: #FF2F2F !important; + --destructive-active-color: #AD6060 !important; +} + .mainRed, .mainPink, .mainPurple, From 69d155d66515631576ed7ec2ed23b0bca8b10548 Mon Sep 17 00:00:00 2001 From: Jason Henriquez Date: Thu, 23 Nov 2023 15:40:53 -0600 Subject: [PATCH 04/14] Fix experimental settings bug --- .../components/experimental-settings/experimental-settings.js | 2 +- .../ft-profile-channel-list/ft-profile-channel-list.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/renderer/components/experimental-settings/experimental-settings.js b/src/renderer/components/experimental-settings/experimental-settings.js index b4d5e89239d98..04b6aacb1732b 100644 --- a/src/renderer/components/experimental-settings/experimental-settings.js +++ b/src/renderer/components/experimental-settings/experimental-settings.js @@ -42,7 +42,7 @@ export default defineComponent({ handleReplaceHttpCache: async function (value) { this.showRestartPrompt = false - if (value === null || value === 'no') { + if (value === null || value === 'cancel') { this.replaceHttpCache = !this.replaceHttpCache return } diff --git a/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.js b/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.js index da36605cfea63..01bfff1739c57 100644 --- a/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.js +++ b/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.js @@ -108,7 +108,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) => { return channel.selected From 3dd4ea47b658a869140fefab5f17838a7197f588 Mon Sep 17 00:00:00 2001 From: Jason Henriquez Date: Wed, 24 Apr 2024 18:47:54 -0500 Subject: [PATCH 05/14] Update to use fallback destructive colors --- .../playlist-info/playlist-info.vue | 4 +- .../privacy-settings/privacy-settings.vue | 4 +- src/renderer/themes.css | 73 ++++++++++++------- 3 files changed, 51 insertions(+), 30 deletions(-) diff --git a/src/renderer/components/playlist-info/playlist-info.vue b/src/renderer/components/playlist-info/playlist-info.vue index f6f2683cd1a2b..272eed9a9e541 100644 --- a/src/renderer/components/playlist-info/playlist-info.vue +++ b/src/renderer/components/playlist-info/playlist-info.vue @@ -153,14 +153,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" /> diff --git a/src/renderer/themes.css b/src/renderer/themes.css index 84a802241a50e..75ae6beea44b8 100644 --- a/src/renderer/themes.css +++ b/src/renderer/themes.css @@ -195,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; @@ -247,32 +266,6 @@ it can be safely elided. This looks quite pleasant on this theme. */ text-decoration: underline; } -.mainRed, .secRed { - --destructive-color: #7F0000 !important; - --destructive-text-color: #FFF !important; - --destructive-hover-color: #FF2F2F !important; - --destructive-active-color: #AD6060 !important; -} - -.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, @@ -1039,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; From d77bbe614f4f9af974694fd67d6bdb955f5fd584 Mon Sep 17 00:00:00 2001 From: Jason Henriquez Date: Wed, 24 Apr 2024 18:58:25 -0500 Subject: [PATCH 06/14] Remove color from 'Cancel' prompt buttons --- .../ft-create-playlist-prompt/ft-create-playlist-prompt.vue | 2 ++ .../ft-playlist-add-video-prompt.vue | 2 ++ src/renderer/components/playlist-info/playlist-info.vue | 2 ++ src/renderer/components/privacy-settings/privacy-settings.vue | 1 + 4 files changed, 7 insertions(+) diff --git a/src/renderer/components/ft-create-playlist-prompt/ft-create-playlist-prompt.vue b/src/renderer/components/ft-create-playlist-prompt/ft-create-playlist-prompt.vue index f541d08892a36..067c8a343c4a1 100644 --- a/src/renderer/components/ft-create-playlist-prompt/ft-create-playlist-prompt.vue +++ b/src/renderer/components/ft-create-playlist-prompt/ft-create-playlist-prompt.vue @@ -24,6 +24,8 @@ /> diff --git a/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.vue b/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.vue index 92dd088056b78..86c0a420cf49d 100644 --- a/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.vue +++ b/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.vue @@ -72,6 +72,8 @@ /> diff --git a/src/renderer/components/playlist-info/playlist-info.vue b/src/renderer/components/playlist-info/playlist-info.vue index 272eed9a9e541..66d5a7c834a71 100644 --- a/src/renderer/components/playlist-info/playlist-info.vue +++ b/src/renderer/components/playlist-info/playlist-info.vue @@ -177,6 +177,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" /> diff --git a/src/renderer/components/privacy-settings/privacy-settings.vue b/src/renderer/components/privacy-settings/privacy-settings.vue index d5c0e95db944f..3589a76a0c9c5 100644 --- a/src/renderer/components/privacy-settings/privacy-settings.vue +++ b/src/renderer/components/privacy-settings/privacy-settings.vue @@ -86,6 +86,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" /> From 8c1009b1e3f4a08923b2911709399c6ff5491065 Mon Sep 17 00:00:00 2001 From: Jason Henriquez Date: Wed, 24 Apr 2024 21:57:36 -0500 Subject: [PATCH 07/14] Add icon capability to ft-buttons, & attach trash icon to destructive buttons --- .../components/data-settings/data-settings.js | 6 +++-- .../data-settings/data-settings.vue | 1 - .../experimental-settings.vue | 1 - .../components/ft-button/ft-button.css | 3 ++- .../components/ft-button/ft-button.js | 4 ++++ .../components/ft-button/ft-button.vue | 4 ++++ .../ft-profile-edit/ft-profile-edit.vue | 1 + .../components/ft-prompt/ft-prompt.js | 24 +++++++++++++++---- .../components/ft-prompt/ft-prompt.vue | 14 +++-------- .../privacy-settings/privacy-settings.vue | 4 ++++ 10 files changed, 41 insertions(+), 21 deletions(-) diff --git a/src/renderer/components/data-settings/data-settings.js b/src/renderer/components/data-settings/data-settings.js index 9cda4bad1504c..1671981f1ceaa 100644 --- a/src/renderer/components/data-settings/data-settings.js +++ b/src/renderer/components/data-settings/data-settings.js @@ -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 () { diff --git a/src/renderer/components/data-settings/data-settings.vue b/src/renderer/components/data-settings/data-settings.vue index 456c6d3585c57..81dcab91f6095 100644 --- a/src/renderer/components/data-settings/data-settings.vue +++ b/src/renderer/components/data-settings/data-settings.vue @@ -67,7 +67,6 @@ :label="$t('Settings.Data Settings.Select Export Type')" :option-names="exportSubscriptionsPromptNames" :option-values="subscriptionsPromptValues" - :show-close="true" @click="exportSubscriptions" /> diff --git a/src/renderer/components/experimental-settings/experimental-settings.vue b/src/renderer/components/experimental-settings/experimental-settings.vue index f5f77afb1dae1..1f0d61f64ebbe 100644 --- a/src/renderer/components/experimental-settings/experimental-settings.vue +++ b/src/renderer/components/experimental-settings/experimental-settings.vue @@ -21,7 +21,6 @@ :label="$t('Settings[\'The app needs to restart for changes to take effect. Restart and apply change?\']')" :option-names="[$t('Yes, Restart'), $t('Cancel')]" :option-values="['restart', 'cancel']" - :is-first-option-destructive="true" @click="handleReplaceHttpCache" /> diff --git a/src/renderer/components/ft-button/ft-button.css b/src/renderer/components/ft-button/ft-button.css index 4a0cc58edf2c5..a2a9a5f4474b6 100644 --- a/src/renderer/components/ft-button/ft-button.css +++ b/src/renderer/components/ft-button/ft-button.css @@ -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%); } diff --git a/src/renderer/components/ft-button/ft-button.js b/src/renderer/components/ft-button/ft-button.js index 4aa1b12352ca6..ecb2f45286eab 100644 --- a/src/renderer/components/ft-button/ft-button.js +++ b/src/renderer/components/ft-button/ft-button.js @@ -18,6 +18,10 @@ export default defineComponent({ id: { type: String, default: '' + }, + icon: { + type: Array, + default: null } }, emits: ['click'], diff --git a/src/renderer/components/ft-button/ft-button.vue b/src/renderer/components/ft-button/ft-button.vue index 945000bbff1a6..5566ec1dce40b 100644 --- a/src/renderer/components/ft-button/ft-button.vue +++ b/src/renderer/components/ft-button/ft-button.vue @@ -10,6 +10,10 @@ @click="click" > + {{ label }} diff --git a/src/renderer/components/ft-profile-edit/ft-profile-edit.vue b/src/renderer/components/ft-profile-edit/ft-profile-edit.vue index 27db6bf4550aa..7c803d256d1c1 100644 --- a/src/renderer/components/ft-profile-edit/ft-profile-edit.vue +++ b/src/renderer/components/ft-profile-edit/ft-profile-edit.vue @@ -84,6 +84,7 @@ :label="$t('Profile.Delete Profile')" text-color="var(--destructive-text-color)" background-color="var(--destructive-color)" + :icon="['fas', 'trash']" @click="openDeletePrompt" /> diff --git a/src/renderer/components/ft-prompt/ft-prompt.js b/src/renderer/components/ft-prompt/ft-prompt.js index fd9331cd55cfc..67f35cc78790d 100644 --- a/src/renderer/components/ft-prompt/ft-prompt.js +++ b/src/renderer/components/ft-prompt/ft-prompt.js @@ -29,10 +29,6 @@ export default defineComponent({ type: Array, default: () => { return [] } }, - showClose: { - type: Boolean, - default: false - }, autosize: { type: Boolean, default: false @@ -52,7 +48,7 @@ export default defineComponent({ computed: { sanitizedLabel: function() { return sanitizeForHtmlId(this.label) - } + }, }, beforeDestroy: function () { document.removeEventListener('keydown', this.closeEventFunction, true) @@ -71,6 +67,24 @@ export default defineComponent({ this.focusItem(0) }, 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) }, diff --git a/src/renderer/components/ft-prompt/ft-prompt.vue b/src/renderer/components/ft-prompt/ft-prompt.vue index 56bf3bcac2af2..598ee2badd625 100644 --- a/src/renderer/components/ft-prompt/ft-prompt.vue +++ b/src/renderer/components/ft-prompt/ft-prompt.vue @@ -32,19 +32,11 @@ :id="'prompt-' + sanitizedLabel + '-' + index" :key="index" :label="option" - :text-color="index === 0 && isFirstOptionDestructive ? 'var(--destructive-text-color)' : null" - :background-color="index === 0 && isFirstOptionDestructive ? 'var(--destructive-color)' : null" + :text-color="optionButtonTextColor(index)" + :background-color="optionButtonBackgroundColor(index)" + :icon="index === 0 && isFirstOptionDestructive ? ['fas', 'trash'] : null" @click="click(optionValues[index])" /> - diff --git a/src/renderer/components/privacy-settings/privacy-settings.vue b/src/renderer/components/privacy-settings/privacy-settings.vue index 3589a76a0c9c5..3fe025d4e7df1 100644 --- a/src/renderer/components/privacy-settings/privacy-settings.vue +++ b/src/renderer/components/privacy-settings/privacy-settings.vue @@ -36,24 +36,28 @@ :label="$t('Settings.Privacy Settings.Clear Search Cache')" text-color="var(--destructive-text-color)" background-color="var(--destructive-color)" + :icon="['fas', 'trash']" @click="showSearchCachePrompt = true" /> From 7532bb47bd99afc0100473337185132791b11fe0 Mon Sep 17 00:00:00 2001 From: Jason Henriquez Date: Wed, 24 Apr 2024 22:17:11 -0500 Subject: [PATCH 08/14] Change yellow destructive fallback text color to black for readability --- src/renderer/themes.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/renderer/themes.css b/src/renderer/themes.css index 75ae6beea44b8..0dbf10d765a21 100644 --- a/src/renderer/themes.css +++ b/src/renderer/themes.css @@ -1055,7 +1055,7 @@ it can be safely elided. This looks quite pleasant on this theme. */ .mainDraculaPurple.secRed, .mainDraculaPurple.secDraculaRed { --destructive-color: #FF9800; - --destructive-text-color: #FFF; + --destructive-text-color: #000; --destructive-hover-color: #FB8C00; --destructive-active-color: #EF6C00; } From 73690fab4ac47d9dea66930d92f8eac4fdf2c877 Mon Sep 17 00:00:00 2001 From: Jason Henriquez Date: Wed, 24 Apr 2024 22:31:21 -0500 Subject: [PATCH 09/14] Change red color to have an accessible color contrast --- src/renderer/themes.css | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/renderer/themes.css b/src/renderer/themes.css index 0dbf10d765a21..5c59876e428ef 100644 --- a/src/renderer/themes.css +++ b/src/renderer/themes.css @@ -8,10 +8,10 @@ .hotPink, .nordic { --primary-input-color: rgb(0 0 0 / 50%); - --destructive-color: #f44336; + --destructive-color: #A9261F; --destructive-text-color: #FFF; - --destructive-hover-color: #e53935; - --destructive-active-color: #c62828; + --destructive-hover-color: #9E1009; + --destructive-active-color: #82130D; } .system[data-system-theme*='light'], .light, @@ -293,9 +293,9 @@ it can be safely elided. This looks quite pleasant on this theme. */ } .mainRed { - --primary-color: #f44336; - --primary-color-hover: #e53935; - --primary-color-active: #c62828; + --primary-color: #A9261F; + --primary-color-hover: #9E1009; + --primary-color-active: #82130D; } .mainPink { @@ -573,11 +573,11 @@ it can be safely elided. This looks quite pleasant on this theme. */ } .secRed { - --accent-color: #f44336; - --accent-color-hover: #e53935; - --accent-color-active: #c62828; - --accent-color-light: #ef9a9a; - --accent-color-visited: #b71c1c; + --accent-color: #A9261F; + --accent-color-hover: #9E1009; + --accent-color-active: #82130D; + --accent-color-light: #bb2f28; + --accent-color-visited: #bb1a1a; --accent-color-opacity1: rgb(244 67 54 / 4%); --accent-color-opacity2: rgb(244 67 54 / 12%); --accent-color-opacity3: rgb(244 67 54 / 16%); From b9af35973002adfd5c373b5ec05bf5fbfad4fe58 Mon Sep 17 00:00:00 2001 From: Jason Henriquez Date: Wed, 24 Apr 2024 22:47:26 -0500 Subject: [PATCH 10/14] Update red color to lighter color closer to original to avoid conflict --- src/renderer/themes.css | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/renderer/themes.css b/src/renderer/themes.css index 5c59876e428ef..4f1e21d1f2060 100644 --- a/src/renderer/themes.css +++ b/src/renderer/themes.css @@ -8,10 +8,10 @@ .hotPink, .nordic { --primary-input-color: rgb(0 0 0 / 50%); - --destructive-color: #A9261F; + --destructive-color: #F00; --destructive-text-color: #FFF; - --destructive-hover-color: #9E1009; - --destructive-active-color: #82130D; + --destructive-hover-color: #e00000; + --destructive-active-color: #bb0900; } .system[data-system-theme*='light'], .light, @@ -293,9 +293,9 @@ it can be safely elided. This looks quite pleasant on this theme. */ } .mainRed { - --primary-color: #A9261F; - --primary-color-hover: #9E1009; - --primary-color-active: #82130D; + --primary-color: #F00; + --primary-color-hover: #e00000; + --primary-color-active: #bb0900; } .mainPink { @@ -573,11 +573,11 @@ it can be safely elided. This looks quite pleasant on this theme. */ } .secRed { - --accent-color: #A9261F; - --accent-color-hover: #9E1009; - --accent-color-active: #82130D; - --accent-color-light: #bb2f28; - --accent-color-visited: #bb1a1a; + --accent-color: #F00; + --accent-color-hover: #e00000; + --accent-color-active: #bb0900; + --accent-color-light: #ff1a0e; + --accent-color-visited: #b92020; --accent-color-opacity1: rgb(244 67 54 / 4%); --accent-color-opacity2: rgb(244 67 54 / 12%); --accent-color-opacity3: rgb(244 67 54 / 16%); From c3ca8912ed555ece47fd958bbbb1cc5abf2d1ae0 Mon Sep 17 00:00:00 2001 From: Jason Henriquez Date: Thu, 25 Apr 2024 06:59:07 -0500 Subject: [PATCH 11/14] Tentatively codify black as new corresponding text color for red and draculaRed --- src/renderer/themes.css | 38 +++++++++++++++++++------------------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/src/renderer/themes.css b/src/renderer/themes.css index 4f1e21d1f2060..f8fec228adf14 100644 --- a/src/renderer/themes.css +++ b/src/renderer/themes.css @@ -8,10 +8,10 @@ .hotPink, .nordic { --primary-input-color: rgb(0 0 0 / 50%); - --destructive-color: #F00; - --destructive-text-color: #FFF; - --destructive-hover-color: #e00000; - --destructive-active-color: #bb0900; + --destructive-color: #f44336; + --destructive-text-color: #000; + --destructive-hover-color: #e53935; + --destructive-active-color: #c62828; } .system[data-system-theme*='light'], .light, @@ -266,7 +266,6 @@ it can be safely elided. This looks quite pleasant on this theme. */ text-decoration: underline; } -.mainRed, .mainPink, .mainPurple, .mainDeepPurple, @@ -281,6 +280,7 @@ it can be safely elided. This looks quite pleasant on this theme. */ --logo-text-bar-color: url("../../_icons/textWhiteSmall.svg"); } +.mainRed, .mainLightGreen, .mainLime, .mainYellow, @@ -293,9 +293,9 @@ it can be safely elided. This looks quite pleasant on this theme. */ } .mainRed { - --primary-color: #F00; - --primary-color-hover: #e00000; - --primary-color-active: #bb0900; + --primary-color: #f44336; + --primary-color-hover: #e53935; + --primary-color-active: #c62828; } .mainPink { @@ -391,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"); @@ -398,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"); @@ -550,7 +550,6 @@ it can be safely elided. This looks quite pleasant on this theme. */ --primary-color-active: #8d98e4; } -.secRed, .secPink, .secPurple, .secDeepPurple, @@ -563,6 +562,7 @@ it can be safely elided. This looks quite pleasant on this theme. */ --text-with-accent-color: #FFF; } +.secRed, .secLightGreen, .secLime, .secYellow, @@ -573,11 +573,11 @@ it can be safely elided. This looks quite pleasant on this theme. */ } .secRed { - --accent-color: #F00; - --accent-color-hover: #e00000; - --accent-color-active: #bb0900; - --accent-color-light: #ff1a0e; - --accent-color-visited: #b92020; + --accent-color: #f44336; + --accent-color-hover: #e53935; + --accent-color-active: #c62828; + --accent-color-light: #ef9a9a; + --accent-color-visited: #b71c1c; --accent-color-opacity1: rgb(244 67 54 / 4%); --accent-color-opacity2: rgb(244 67 54 / 12%); --accent-color-opacity3: rgb(244 67 54 / 16%); @@ -767,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; } @@ -1055,7 +1055,7 @@ it can be safely elided. This looks quite pleasant on this theme. */ .mainDraculaPurple.secRed, .mainDraculaPurple.secDraculaRed { --destructive-color: #FF9800; - --destructive-text-color: #000; + --destructive-text-color: #FFF; --destructive-hover-color: #FB8C00; --destructive-active-color: #EF6C00; } From a335b80f055488b00df24c3d3b42419ee2b0d891 Mon Sep 17 00:00:00 2001 From: Jason Henriquez Date: Fri, 26 Apr 2024 22:22:57 -0500 Subject: [PATCH 12/14] Alter red theme text color to white --- src/renderer/themes.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/renderer/themes.css b/src/renderer/themes.css index f8fec228adf14..406f9c1719960 100644 --- a/src/renderer/themes.css +++ b/src/renderer/themes.css @@ -266,6 +266,7 @@ it can be safely elided. This looks quite pleasant on this theme. */ text-decoration: underline; } +.mainRed, .mainPink, .mainPurple, .mainDeepPurple, @@ -280,7 +281,6 @@ it can be safely elided. This looks quite pleasant on this theme. */ --logo-text-bar-color: url("../../_icons/textWhiteSmall.svg"); } -.mainRed, .mainLightGreen, .mainLime, .mainYellow, @@ -550,6 +550,7 @@ it can be safely elided. This looks quite pleasant on this theme. */ --primary-color-active: #8d98e4; } +.secRed, .secPink, .secPurple, .secDeepPurple, @@ -562,7 +563,6 @@ it can be safely elided. This looks quite pleasant on this theme. */ --text-with-accent-color: #FFF; } -.secRed, .secLightGreen, .secLime, .secYellow, From 84ae1da4aaff9e68d2d3b6e7245ae40453e4d6ef Mon Sep 17 00:00:00 2001 From: Jason Henriquez Date: Tue, 30 Apr 2024 14:19:46 -0500 Subject: [PATCH 13/14] Make affirmative label clearer for Ask Before Opening prompt --- src/renderer/App.js | 2 +- static/locales/en-US.yaml | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/renderer/App.js b/src/renderer/App.js index eade3f2166a94..3afddf284a1a9 100644 --- a/src/renderer/App.js +++ b/src/renderer/App.js @@ -124,7 +124,7 @@ export default defineComponent({ externalLinkOpeningPromptNames: function () { return [ - this.$t('Yes'), + this.$t('Yes, Open Link'), this.$t('No') ] }, diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml index e5308c3914a8d..8f39681fe74cb 100644 --- a/static/locales/en-US.yaml +++ b/static/locales/en-US.yaml @@ -1069,6 +1069,7 @@ 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: ✓ From db91645f5e710f655cd8c54652459bf038203f5d Mon Sep 17 00:00:00 2001 From: Jason Henriquez Date: Wed, 1 May 2024 06:24:07 -0500 Subject: [PATCH 14/14] Make restart prompt not destructive --- src/renderer/components/theme-settings/theme-settings.vue | 1 - 1 file changed, 1 deletion(-) diff --git a/src/renderer/components/theme-settings/theme-settings.vue b/src/renderer/components/theme-settings/theme-settings.vue index 4bc08ff75ef84..1d0b1e3d6b4d9 100644 --- a/src/renderer/components/theme-settings/theme-settings.vue +++ b/src/renderer/components/theme-settings/theme-settings.vue @@ -86,7 +86,6 @@ :label="restartPromptMessage" :option-names="restartPromptNames" :option-values="restartPromptValues" - :is-first-option-destructive="true" @click="handleSmoothScrolling" />