Improve hover feedback on various widgets (#2079)

* Use cursor: pointer on QCheckBoxes too and exclude disabled widgets

* Left-align all QCheckBoxes to make hover-area and clickable area the same

Altough the clickable area has always been restricted to the label, the widget itself stretched all the way. This became a problem with the new cursor-pointer for checkboxes.

* Remove Switch duplicate from deck-options

* Add cursor: pointer to Switch and RevertButton

* Add cursor: pointer to bottom toolbar buttons

* Add cursor: pointer to gears

* Add cursor: pointer to radio and checkbox inputs of graphs page

* Improve button appearance in stats screen

* Add cursor: pointer to QTabBar and QToolButton

* Add cursor: pointer to non-editable QComboBox

* Center settings-will-take-effect-after notice in preferences screen

* Use public without_qt5_compat_wrapper() function

* Run prettier
This commit is contained in:
Matthias Metelka 2022-09-20 08:34:15 +02:00 committed by GitHub
parent 09cb8b3cf6
commit e109c62aa9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
19 changed files with 87 additions and 100 deletions

View file

@ -346,15 +346,33 @@ class AnkiApp(QApplication):
def eventFilter(self, src: Any, evt: QEvent) -> bool: def eventFilter(self, src: Any, evt: QEvent) -> bool:
if evt.type() == QEvent.Type.HoverEnter: if evt.type() == QEvent.Type.HoverEnter:
if isinstance(src, QPushButton): if (
# TODO: apply drop-shadow with setGraphicsEffect(QGraphicsDropShadowEffect) (
# issue: can't access attributes of QClassProxy (Qt5-compat) isinstance(
src,
(
QPushButton,
QCheckBox,
# classes with PyQt5 compatibility proxy
without_qt5_compat_wrapper(QToolButton),
without_qt5_compat_wrapper(QTabBar),
),
)
)
and src.isEnabled()
or (
isinstance(src, without_qt5_compat_wrapper(QComboBox))
and not src.isEditable()
)
):
self.setOverrideCursor(QCursor(Qt.CursorShape.PointingHandCursor)) self.setOverrideCursor(QCursor(Qt.CursorShape.PointingHandCursor))
else: else:
self.restoreOverrideCursor() self.restoreOverrideCursor()
return False return False
elif evt.type() == QEvent.Type.HoverLeave or isinstance(evt, QCloseEvent): elif evt.type() in [QEvent.Type.HoverLeave, QEvent.Type.Leave] or isinstance(
evt, QCloseEvent
):
self.restoreOverrideCursor() self.restoreOverrideCursor()
return False return False

View file

@ -71,6 +71,7 @@ body {
height: 1em; height: 1em;
opacity: 0.5; opacity: 0.5;
padding-top: 0.2em; padding-top: 0.2em;
cursor: pointer;
} }
.nightMode { .nightMode {

View file

@ -186,7 +186,7 @@
<item row="1" column="1" colspan="2"> <item row="1" column="1" colspan="2">
<widget class="QComboBox" name="newOrder"/> <widget class="QComboBox" name="newOrder"/>
</item> </item>
<item row="6" column="0" colspan="3"> <item row="6" column="0" colspan="3" alignment="Qt::AlignLeft">
<widget class="QCheckBox" name="bury"> <widget class="QCheckBox" name="bury">
<property name="text"> <property name="text">
<string>scheduling_bury_related_new_cards_until_the</string> <string>scheduling_bury_related_new_cards_until_the</string>
@ -355,7 +355,7 @@
</property> </property>
</widget> </widget>
</item> </item>
<item row="5" column="0" colspan="3"> <item row="5" column="0" colspan="3" alignment="Qt::AlignLeft">
<widget class="QCheckBox" name="buryRev"> <widget class="QCheckBox" name="buryRev">
<property name="text"> <property name="text">
<string>scheduling_bury_related_reviews_until_the_next</string> <string>scheduling_bury_related_reviews_until_the_next</string>
@ -604,21 +604,21 @@
</item> </item>
</layout> </layout>
</item> </item>
<item> <item alignment="Qt::AlignLeft">
<widget class="QCheckBox" name="showTimer"> <widget class="QCheckBox" name="showTimer">
<property name="text"> <property name="text">
<string>scheduling_show_answer_timer</string> <string>scheduling_show_answer_timer</string>
</property> </property>
</widget> </widget>
</item> </item>
<item> <item alignment="Qt::AlignLeft">
<widget class="QCheckBox" name="autoplaySounds"> <widget class="QCheckBox" name="autoplaySounds">
<property name="text"> <property name="text">
<string>scheduling_automatically_play_audio</string> <string>scheduling_automatically_play_audio</string>
</property> </property>
</widget> </widget>
</item> </item>
<item> <item alignment="Qt::AlignLeft">
<widget class="QCheckBox" name="replayQuestion"> <widget class="QCheckBox" name="replayQuestion">
<property name="text"> <property name="text">
<string>scheduling_always_include_question_side_when_replaying</string> <string>scheduling_always_include_question_side_when_replaying</string>

View file

@ -55,7 +55,7 @@
<property name="bottomMargin"> <property name="bottomMargin">
<number>12</number> <number>12</number>
</property> </property>
<item> <item alignment="Qt::AlignLeft">
<widget class="QCheckBox" name="keep_notes"> <widget class="QCheckBox" name="keep_notes">
<property name="text"> <property name="text">
<string notr="true">KEEP_NOTES</string> <string notr="true">KEEP_NOTES</string>

View file

@ -6,8 +6,8 @@
<rect> <rect>
<x>0</x> <x>0</x>
<y>0</y> <y>0</y>
<width>610</width> <width>550</width>
<height>348</height> <height>200</height>
</rect> </rect>
</property> </property>
<property name="windowTitle"> <property name="windowTitle">
@ -57,7 +57,7 @@
</item> </item>
<item> <item>
<layout class="QVBoxLayout"> <layout class="QVBoxLayout">
<item> <item alignment="Qt::AlignLeft">
<widget class="QCheckBox" name="includeSched"> <widget class="QCheckBox" name="includeSched">
<property name="text"> <property name="text">
<string>exporting_include_scheduling_information</string> <string>exporting_include_scheduling_information</string>
@ -67,7 +67,7 @@
</property> </property>
</widget> </widget>
</item> </item>
<item> <item alignment="Qt::AlignLeft">
<widget class="QCheckBox" name="includeMedia"> <widget class="QCheckBox" name="includeMedia">
<property name="text"> <property name="text">
<string>exporting_include_media</string> <string>exporting_include_media</string>
@ -77,14 +77,14 @@
</property> </property>
</widget> </widget>
</item> </item>
<item> <item alignment="Qt::AlignLeft">
<widget class="QCheckBox" name="includeHTML"> <widget class="QCheckBox" name="includeHTML">
<property name="text"> <property name="text">
<string>exporting_include_html_and_media_references</string> <string>exporting_include_html_and_media_references</string>
</property> </property>
</widget> </widget>
</item> </item>
<item> <item alignment="Qt::AlignLeft">
<widget class="QCheckBox" name="includeTags"> <widget class="QCheckBox" name="includeTags">
<property name="text"> <property name="text">
<string>exporting_include_tags</string> <string>exporting_include_tags</string>
@ -94,7 +94,7 @@
</property> </property>
</widget> </widget>
</item> </item>
<item> <item alignment="Qt::AlignLeft">
<widget class="QCheckBox" name="includeDeck"> <widget class="QCheckBox" name="includeDeck">
<property name="enabled"> <property name="enabled">
<bool>true</bool> <bool>true</bool>
@ -104,7 +104,7 @@
</property> </property>
</widget> </widget>
</item> </item>
<item> <item alignment="Qt::AlignLeft">
<widget class="QCheckBox" name="includeNotetype"> <widget class="QCheckBox" name="includeNotetype">
<property name="enabled"> <property name="enabled">
<bool>true</bool> <bool>true</bool>
@ -114,14 +114,14 @@
</property> </property>
</widget> </widget>
</item> </item>
<item> <item alignment="Qt::AlignLeft">
<widget class="QCheckBox" name="includeGuid"> <widget class="QCheckBox" name="includeGuid">
<property name="text"> <property name="text">
<string>exporting_include_guid</string> <string>exporting_include_guid</string>
</property> </property>
</widget> </widget>
</item> </item>
<item> <item alignment="Qt::AlignLeft">
<widget class="QCheckBox" name="legacy_support"> <widget class="QCheckBox" name="legacy_support">
<property name="text"> <property name="text">
<string>exporting_support_older_anki_versions</string> <string>exporting_support_older_anki_versions</string>

View file

@ -131,14 +131,14 @@
</property> </property>
</widget> </widget>
</item> </item>
<item row="3" column="1"> <item row="3" column="1" alignment="Qt::AlignLeft">
<widget class="QCheckBox" name="rtl"> <widget class="QCheckBox" name="rtl">
<property name="text"> <property name="text">
<string>fields_reverse_text_direction_rtl</string> <string>fields_reverse_text_direction_rtl</string>
</property> </property>
</widget> </widget>
</item> </item>
<item row="4" column="1"> <item row="4" column="1" alignment="Qt::AlignLeft">
<widget class="QCheckBox" name="plainTextByDefault"> <widget class="QCheckBox" name="plainTextByDefault">
<property name="enabled"> <property name="enabled">
<bool>true</bool> <bool>true</bool>
@ -162,7 +162,7 @@
</property> </property>
</widget> </widget>
</item> </item>
<item row="5" column="1"> <item row="5" column="1" alignment="Qt::AlignLeft">
<widget class="QCheckBox" name="collapseByDefault"> <widget class="QCheckBox" name="collapseByDefault">
<property name="enabled"> <property name="enabled">
<bool>true</bool> <bool>true</bool>

View file

@ -198,7 +198,7 @@
<string>actions_options</string> <string>actions_options</string>
</property> </property>
<layout class="QGridLayout" name="gridLayout_2"> <layout class="QGridLayout" name="gridLayout_2">
<item row="0" column="0" colspan="2"> <item row="0" column="0" colspan="2" alignment="Qt::AlignLeft">
<widget class="QCheckBox" name="resched"> <widget class="QCheckBox" name="resched">
<property name="text"> <property name="text">
<string>decks_reschedule_cards_based_on_my_answers</string> <string>decks_reschedule_cards_based_on_my_answers</string>
@ -208,7 +208,7 @@
</property> </property>
</widget> </widget>
</item> </item>
<item row="2" column="0"> <item row="2" column="0" alignment="Qt::AlignLeft">
<widget class="QCheckBox" name="secondFilter"> <widget class="QCheckBox" name="secondFilter">
<property name="text"> <property name="text">
<string>decks_enable_second_filter</string> <string>decks_enable_second_filter</string>
@ -248,7 +248,7 @@
</property> </property>
</widget> </widget>
</item> </item>
<item row="3" column="0"> <item row="3" column="0" alignment="Qt::AlignLeft">
<widget class="QCheckBox" name="stepsOn"> <widget class="QCheckBox" name="stepsOn">
<property name="text"> <property name="text">
<string>decks_custom_steps_in_minutes</string> <string>decks_custom_steps_in_minutes</string>

View file

@ -63,14 +63,14 @@
</property> </property>
</widget> </widget>
</item> </item>
<item row="5" column="1"> <item row="5" column="1" alignment="Qt::AlignLeft">
<widget class="QCheckBox" name="re"> <widget class="QCheckBox" name="re">
<property name="text"> <property name="text">
<string>browsing_treat_input_as_regular_expression</string> <string>browsing_treat_input_as_regular_expression</string>
</property> </property>
</widget> </widget>
</item> </item>
<item row="4" column="1"> <item row="4" column="1" alignment="Qt::AlignLeft">
<widget class="QCheckBox" name="ignoreCase"> <widget class="QCheckBox" name="ignoreCase">
<property name="text"> <property name="text">
<string>browsing_ignore_case</string> <string>browsing_ignore_case</string>
@ -99,7 +99,7 @@
</property> </property>
</widget> </widget>
</item> </item>
<item row="3" column="1"> <item row="3" column="1" alignment="Qt::AlignLeft">
<widget class="QCheckBox" name="selected_notes"> <widget class="QCheckBox" name="selected_notes">
<property name="text"> <property name="text">
<string>browsing_selected_notes_only</string> <string>browsing_selected_notes_only</string>

View file

@ -17,14 +17,14 @@
<bool>true</bool> <bool>true</bool>
</property> </property>
<layout class="QVBoxLayout" name="verticalLayout_2"> <layout class="QVBoxLayout" name="verticalLayout_2">
<item> <item alignment="Qt::AlignLeft">
<widget class="QCheckBox" name="restore_position"> <widget class="QCheckBox" name="restore_position">
<property name="text"> <property name="text">
<string>scheduling_restore_position</string> <string>scheduling_restore_position</string>
</property> </property>
</widget> </widget>
</item> </item>
<item> <item alignment="Qt::AlignLeft">
<widget class="QCheckBox" name="reset_counts"> <widget class="QCheckBox" name="reset_counts">
<property name="text"> <property name="text">
<string>scheduling_reset_counts</string> <string>scheduling_reset_counts</string>

View file

@ -70,7 +70,7 @@
</item> </item>
</widget> </widget>
</item> </item>
<item> <item alignment="Qt::AlignLeft">
<widget class="QCheckBox" name="allowHTML"> <widget class="QCheckBox" name="allowHTML">
<property name="text"> <property name="text">
<string>importing_allow_html_in_fields</string> <string>importing_allow_html_in_fields</string>

View file

@ -27,7 +27,7 @@
<string>editing_latex</string> <string>editing_latex</string>
</attribute> </attribute>
<layout class="QVBoxLayout" name="verticalLayout"> <layout class="QVBoxLayout" name="verticalLayout">
<item> <item alignment="Qt::AlignLeft">
<widget class="QCheckBox" name="latexsvg"> <widget class="QCheckBox" name="latexsvg">
<property name="text"> <property name="text">
<string>notetypes_create_scalable_images_with_dvisvgm</string> <string>notetypes_create_scalable_images_with_dvisvgm</string>

View file

@ -61,49 +61,49 @@
<item> <item>
<widget class="QComboBox" name="video_driver"/> <widget class="QComboBox" name="video_driver"/>
</item> </item>
<item> <item alignment="Qt::AlignLeft">
<widget class="QCheckBox" name="showPlayButtons"> <widget class="QCheckBox" name="showPlayButtons">
<property name="text"> <property name="text">
<string>preferences_show_play_buttons_on_cards_with</string> <string>preferences_show_play_buttons_on_cards_with</string>
</property> </property>
</widget> </widget>
</item> </item>
<item> <item alignment="Qt::AlignLeft">
<widget class="QCheckBox" name="interrupt_audio"> <widget class="QCheckBox" name="interrupt_audio">
<property name="text"> <property name="text">
<string>preferences_interrupt_current_audio_when_answering</string> <string>preferences_interrupt_current_audio_when_answering</string>
</property> </property>
</widget> </widget>
</item> </item>
<item> <item alignment="Qt::AlignLeft">
<widget class="QCheckBox" name="pastePNG"> <widget class="QCheckBox" name="pastePNG">
<property name="text"> <property name="text">
<string>preferences_paste_clipboard_images_as_png</string> <string>preferences_paste_clipboard_images_as_png</string>
</property> </property>
</widget> </widget>
</item> </item>
<item> <item alignment="Qt::AlignLeft">
<widget class="QCheckBox" name="paste_strips_formatting"> <widget class="QCheckBox" name="paste_strips_formatting">
<property name="text"> <property name="text">
<string>preferences_paste_without_shift_key_strips_formatting</string> <string>preferences_paste_without_shift_key_strips_formatting</string>
</property> </property>
</widget> </widget>
</item> </item>
<item> <item alignment="Qt::AlignLeft">
<widget class="QCheckBox" name="ignore_accents_in_search"> <widget class="QCheckBox" name="ignore_accents_in_search">
<property name="text"> <property name="text">
<string>preferences_ignore_accents_in_search</string> <string>preferences_ignore_accents_in_search</string>
</property> </property>
</widget> </widget>
</item> </item>
<item> <item alignment="Qt::AlignLeft">
<widget class="QCheckBox" name="legacy_import_export"> <widget class="QCheckBox" name="legacy_import_export">
<property name="text"> <property name="text">
<string notr="true">Legacy import/export handling</string> <string notr="true">Legacy import/export handling</string>
</property> </property>
</widget> </widget>
</item> </item>
<item> <item alignment="Qt::AlignLeft">
<widget class="QCheckBox" name="reduce_motion"> <widget class="QCheckBox" name="reduce_motion">
<property name="toolTip"> <property name="toolTip">
<string>preferences_reduce_motion_tooltip</string> <string>preferences_reduce_motion_tooltip</string>
@ -204,35 +204,35 @@
<string>preferences_scheduling</string> <string>preferences_scheduling</string>
</attribute> </attribute>
<layout class="QVBoxLayout" name="verticalLayout_5"> <layout class="QVBoxLayout" name="verticalLayout_5">
<item> <item alignment="Qt::AlignLeft">
<widget class="QCheckBox" name="showEstimates"> <widget class="QCheckBox" name="showEstimates">
<property name="text"> <property name="text">
<string>preferences_show_next_review_time_above_answer</string> <string>preferences_show_next_review_time_above_answer</string>
</property> </property>
</widget> </widget>
</item> </item>
<item> <item alignment="Qt::AlignLeft">
<widget class="QCheckBox" name="showProgress"> <widget class="QCheckBox" name="showProgress">
<property name="text"> <property name="text">
<string>preferences_show_remaining_card_count_during_review</string> <string>preferences_show_remaining_card_count_during_review</string>
</property> </property>
</widget> </widget>
</item> </item>
<item> <item alignment="Qt::AlignLeft">
<widget class="QCheckBox" name="dayLearnFirst"> <widget class="QCheckBox" name="dayLearnFirst">
<property name="text"> <property name="text">
<string>preferences_show_learning_cards_with_larger_steps</string> <string>preferences_show_learning_cards_with_larger_steps</string>
</property> </property>
</widget> </widget>
</item> </item>
<item> <item alignment="Qt::AlignLeft">
<widget class="QCheckBox" name="legacy_timezone"> <widget class="QCheckBox" name="legacy_timezone">
<property name="text"> <property name="text">
<string>preferences_legacy_timezone_handling</string> <string>preferences_legacy_timezone_handling</string>
</property> </property>
</widget> </widget>
</item> </item>
<item> <item alignment="Qt::AlignLeft">
<widget class="QCheckBox" name="sched2021"> <widget class="QCheckBox" name="sched2021">
<property name="toolTip"> <property name="toolTip">
<string notr="true"/> <string notr="true"/>
@ -382,28 +382,28 @@
</property> </property>
</widget> </widget>
</item> </item>
<item> <item alignment="Qt::AlignLeft">
<widget class="QCheckBox" name="syncMedia"> <widget class="QCheckBox" name="syncMedia">
<property name="text"> <property name="text">
<string>preferences_synchronize_audio_and_images_too</string> <string>preferences_synchronize_audio_and_images_too</string>
</property> </property>
</widget> </widget>
</item> </item>
<item> <item alignment="Qt::AlignLeft">
<widget class="QCheckBox" name="syncOnProgramOpen"> <widget class="QCheckBox" name="syncOnProgramOpen">
<property name="text"> <property name="text">
<string>preferences_automatically_sync_on_profile_openclose</string> <string>preferences_automatically_sync_on_profile_openclose</string>
</property> </property>
</widget> </widget>
</item> </item>
<item> <item alignment="Qt::AlignLeft">
<widget class="QCheckBox" name="autoSyncMedia"> <widget class="QCheckBox" name="autoSyncMedia">
<property name="text"> <property name="text">
<string>preferences_periodically_sync_media</string> <string>preferences_periodically_sync_media</string>
</property> </property>
</widget> </widget>
</item> </item>
<item> <item alignment="Qt::AlignLeft">
<widget class="QCheckBox" name="fullSync"> <widget class="QCheckBox" name="fullSync">
<property name="text"> <property name="text">
<string>preferences_on_next_sync_force_changes_in</string> <string>preferences_on_next_sync_force_changes_in</string>
@ -666,7 +666,7 @@
</widget> </widget>
</widget> </widget>
</item> </item>
<item> <item alignment="Qt::AlignCenter">
<widget class="QLabel" name="label_21"> <widget class="QLabel" name="label_21">
<property name="text"> <property name="text">
<string>preferences_some_settings_will_take_effect_after</string> <string>preferences_some_settings_will_take_effect_after</string>

View file

@ -62,14 +62,14 @@
</item> </item>
</layout> </layout>
</item> </item>
<item> <item alignment="Qt::AlignLeft">
<widget class="QCheckBox" name="randomize"> <widget class="QCheckBox" name="randomize">
<property name="text"> <property name="text">
<string>browsing_randomize_order</string> <string>browsing_randomize_order</string>
</property> </property>
</widget> </widget>
</item> </item>
<item> <item alignment="Qt::AlignLeft">
<widget class="QCheckBox" name="shift"> <widget class="QCheckBox" name="shift">
<property name="text"> <property name="text">
<string>browsing_shift_position_of_existing_cards</string> <string>browsing_shift_position_of_existing_cards</string>

View file

@ -14,7 +14,7 @@
<string>custom_study_selective_study</string> <string>custom_study_selective_study</string>
</property> </property>
<layout class="QVBoxLayout" name="verticalLayout"> <layout class="QVBoxLayout" name="verticalLayout">
<item> <item alignment="Qt::AlignLeft">
<widget class="QCheckBox" name="activeCheck"> <widget class="QCheckBox" name="activeCheck">
<property name="text"> <property name="text">
<string>custom_study_require_one_or_more_of_these</string> <string>custom_study_require_one_or_more_of_these</string>

View file

@ -23,6 +23,7 @@
button { button {
-webkit-appearance: none; -webkit-appearance: none;
color: vars.color(fg); color: vars.color(fg);
cursor: pointer;
background: linear-gradient( background: linear-gradient(
180deg, 180deg,

View file

@ -37,6 +37,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
.form-switch & { .form-switch & {
width: 3em; width: 3em;
margin-left: 1.5em; margin-left: 1.5em;
cursor: pointer;
} }
} }

View file

@ -89,6 +89,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
} }
} }
:global(.badge) {
cursor: pointer;
}
.hide :global(.badge) { .hide :global(.badge) {
opacity: 0; opacity: 0;
} }

View file

@ -1,47 +0,0 @@
<!--
Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script lang="ts">
import { pageTheme } from "../sveltelib/theme";
export let id: string | undefined;
export let value: boolean;
export let disabled = false;
</script>
<div class="form-check form-switch">
<input
{id}
type="checkbox"
class="form-check-input"
class:nightMode={$pageTheme.isDark}
bind:checked={value}
{disabled}
/>
</div>
<style lang="scss">
.form-switch {
/* bootstrap adds a default 2.5em left pad, which causes */
/* text to wrap prematurely */
padding-left: 0.5em;
}
.form-check-input {
-webkit-appearance: none;
height: 1.6em;
/* otherwise the switch circle shows slightly off-centered */
margin-top: 0;
.form-switch & {
width: 3em;
margin-left: 1.5em;
}
}
.nightMode:not(:checked) {
background-color: var(--canvas-elevated);
border-color: var(--border);
}
</style>

View file

@ -1 +1,10 @@
@use "sass/base"; @use "sass/base";
@use "sass/button-mixins" as button;
label,
input[type="radio"],
input[type="checkbox"] {
cursor: pointer;
}
@include button.base;