From 40746268683cb75fe951242e8a4da0b57f236240 Mon Sep 17 00:00:00 2001 From: David Wheatley Date: Sat, 2 Oct 2021 19:22:07 +0100 Subject: [PATCH 01/14] Add class to remove all UA styles from a button --- less/common/Button.less | 33 +++++++++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) diff --git a/less/common/Button.less b/less/common/Button.less index 3165f9af4b..4301456911 100644 --- a/less/common/Button.less +++ b/less/common/Button.less @@ -231,3 +231,36 @@ font-weight: bold; margin-left: 10px; } + +// Remove all user-agent styles from the Button +.Button--ua-reset { + border: none; + margin: 0; + padding: 0; + width: auto; + overflow: visible; + text-align: inherit; + vertical-align: inherit; + + background: transparent; + + /* inherit font & color from ancestor */ + color: inherit; + font: inherit; + + /* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */ + line-height: normal; + + /* Corrects font smoothing for webkit */ + -webkit-font-smoothing: inherit; + -moz-osx-font-smoothing: inherit; + + /* Corrects inability to style clickable `input` types in iOS */ + -webkit-appearance: none; + appearance: none; + + &::-moz-focus-inner { + border: 0; + padding: 0; + } +} From 0afd109980c876d5f2b9a87b5f1f59f7080e988b Mon Sep 17 00:00:00 2001 From: David Wheatley Date: Sat, 2 Oct 2021 19:22:50 +0100 Subject: [PATCH 02/14] Improve classList utilisation --- js/src/forum/components/DiscussionListItem.js | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/js/src/forum/components/DiscussionListItem.js b/js/src/forum/components/DiscussionListItem.js index 3c3a5e85c2..0e7cc87804 100644 --- a/js/src/forum/components/DiscussionListItem.js +++ b/js/src/forum/components/DiscussionListItem.js @@ -50,12 +50,11 @@ export default class DiscussionListItem extends Component { elementAttrs() { return { - className: classList([ - 'DiscussionListItem', - this.active() ? 'active' : '', - this.attrs.discussion.isHidden() ? 'DiscussionListItem--hidden' : '', - 'ontouchstart' in window ? 'Slidable' : '', - ]), + className: classList('DiscussionListItem', { + active: this.active(), + 'DiscussionListItem--hidden': this.attrs.discussion.isHidden(), + Slidable: 'ontouchstart' in window, + }), }; } From ae18e1bf3f9456da1776f0c6f71a4502afe85116 Mon Sep 17 00:00:00 2001 From: David Wheatley Date: Sat, 2 Oct 2021 19:23:02 +0100 Subject: [PATCH 03/14] Simplify JSX --- js/src/forum/components/DiscussionListItem.js | 21 +++++++++---------- 1 file changed, 10 insertions(+), 11 deletions(-) diff --git a/js/src/forum/components/DiscussionListItem.js b/js/src/forum/components/DiscussionListItem.js index 0e7cc87804..3d88b55727 100644 --- a/js/src/forum/components/DiscussionListItem.js +++ b/js/src/forum/components/DiscussionListItem.js @@ -82,17 +82,16 @@ export default class DiscussionListItem extends Component { return (
- {controls.length - ? Dropdown.component( - { - icon: 'fas fa-ellipsis-v', - className: 'DiscussionListItem-controls', - buttonClassName: 'Button Button--icon Button--flat Slidable-underneath Slidable-underneath--right', - accessibleToggleLabel: app.translator.trans('core.forum.discussion_controls.toggle_dropdown_accessible_label'), - }, - controls - ) - : ''} + {controls.length > 0 && + Dropdown.component( + { + icon: 'fas fa-ellipsis-v', + className: 'DiscussionListItem-controls', + buttonClassName: 'Button Button--icon Button--flat Slidable-underneath Slidable-underneath--right', + accessibleToggleLabel: app.translator.trans('core.forum.discussion_controls.toggle_dropdown_accessible_label'), + }, + controls + )} Date: Sat, 2 Oct 2021 19:23:49 +0100 Subject: [PATCH 04/14] Use classlist instead of concatenation --- js/src/forum/components/DiscussionListItem.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/src/forum/components/DiscussionListItem.js b/js/src/forum/components/DiscussionListItem.js index 3d88b55727..bbbee12503 100644 --- a/js/src/forum/components/DiscussionListItem.js +++ b/js/src/forum/components/DiscussionListItem.js @@ -100,7 +100,7 @@ export default class DiscussionListItem extends Component { {icon('fas fa-check')} -
+
Date: Sat, 2 Oct 2021 19:24:45 +0100 Subject: [PATCH 05/14] Fix reply count focusable when not acting as a button --- js/src/forum/components/DiscussionListItem.js | 42 ++++++++++++++----- 1 file changed, 31 insertions(+), 11 deletions(-) diff --git a/js/src/forum/components/DiscussionListItem.js b/js/src/forum/components/DiscussionListItem.js index bbbee12503..af5be6ed26 100644 --- a/js/src/forum/components/DiscussionListItem.js +++ b/js/src/forum/components/DiscussionListItem.js @@ -63,7 +63,7 @@ export default class DiscussionListItem extends Component { const user = discussion.user(); const isUnread = discussion.isUnread(); const isRead = discussion.isRead(); - const showUnread = !this.showRepliesCount() && isUnread; + let jumpTo = 0; const controls = DiscussionControls.controls(discussion, this).toArray(); const attrs = this.elementAttrs(); @@ -116,16 +116,7 @@ export default class DiscussionListItem extends Component {

{highlight(discussion.title(), this.highlightRegExp)}

    {listItems(this.infoItems().toArray())}
- - - {abbreviateNumber(discussion[showUnread ? 'unreadCount' : 'replyCount']())} - + {this.replyCountItem()}
); @@ -220,4 +211,33 @@ export default class DiscussionListItem extends Component { return items; } + + replyCountItem() { + const discussion = this.attrs.discussion; + const showUnread = !this.showRepliesCount() && discussion.isUnread(); + + if (showUnread) { + return ( + + ); + } + + return ( + + + + + {app.translator.trans('core.forum.discussion_list.total_replies_a11y_label', { count: discussion.replyCount() })} + {app.translator.trans('core.forum.discussion_list.mark_as_read_a11y_label')} + + + ); + } } From 711eec8a3bf60cdbabf26784125c87b2bd1465c3 Mon Sep 17 00:00:00 2001 From: David Wheatley Date: Sat, 2 Oct 2021 19:24:56 +0100 Subject: [PATCH 06/14] Add SR only class --- less/common/Accessibility.less | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 less/common/Accessibility.less diff --git a/less/common/Accessibility.less b/less/common/Accessibility.less new file mode 100644 index 0000000000..707efe7e5b --- /dev/null +++ b/less/common/Accessibility.less @@ -0,0 +1,11 @@ +// Screen-reader only content +// https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html +.sr-only { + clip: rect(0 0 0 0); + clip-path: inset(50%); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} \ No newline at end of file From 97226a63cc9f2dee36ed80d92a7e0578103a9fda Mon Sep 17 00:00:00 2001 From: David Wheatley Date: Sat, 2 Oct 2021 19:25:14 +0100 Subject: [PATCH 07/14] Add new reply count translations --- locale/core.yml | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/locale/core.yml b/locale/core.yml index 191cd53646..db9cf291d9 100644 --- a/locale/core.yml +++ b/locale/core.yml @@ -326,9 +326,11 @@ core: discussion_list: empty_text: It looks as though there are no discussions here. load_more_button: => core.ref.load_more - mark_as_read_tooltip: Mark as Read + mark_as_read_a11y_label: Mark replies as read replied_text: "{username} replied {ago}" started_text: "{username} started {ago}" + total_replies_a11y_label: "{count} replies" + unread_replies_a11y_label: "{count} unread replies" # These translations are used in the Forgot Password modal dialog. forgot_password: From 7126c94173bc6dd780deb9a28d1f768596b2e179 Mon Sep 17 00:00:00 2001 From: David Wheatley Date: Sat, 2 Oct 2021 19:37:04 +0100 Subject: [PATCH 08/14] Use cleaner translations --- js/src/forum/components/DiscussionListItem.js | 8 ++---- locale/core.yml | 28 ++++++++----------- 2 files changed, 13 insertions(+), 23 deletions(-) diff --git a/js/src/forum/components/DiscussionListItem.js b/js/src/forum/components/DiscussionListItem.js index af5be6ed26..7a3726a217 100644 --- a/js/src/forum/components/DiscussionListItem.js +++ b/js/src/forum/components/DiscussionListItem.js @@ -222,8 +222,7 @@ export default class DiscussionListItem extends Component { - {app.translator.trans('core.forum.discussion_list.unread_replies_a11y_label', { count: discussion.replyCount() })}{' '} - {app.translator.trans('core.forum.discussion_list.mark_as_read_a11y_label')} + {app.translator.trans('core.forum.discussion_list.unread_replies_a11y_label', { count: discussion.replyCount() })} ); @@ -233,10 +232,7 @@ export default class DiscussionListItem extends Component { - - {app.translator.trans('core.forum.discussion_list.total_replies_a11y_label', { count: discussion.replyCount() })} - {app.translator.trans('core.forum.discussion_list.mark_as_read_a11y_label')} - + {app.translator.trans('core.forum.discussion_list.total_replies_a11y_label', { count: discussion.replyCount() })} ); } diff --git a/locale/core.yml b/locale/core.yml index db9cf291d9..8923ce145c 100644 --- a/locale/core.yml +++ b/locale/core.yml @@ -1,12 +1,10 @@ core: - ## # UNIQUE KEYS - The following keys are used in only one location each. ## # Translations in this namespace are used by the admin interface. admin: - # These translations are used in the Appearance page. appearance: colored_header_label: Colored Header @@ -261,7 +259,6 @@ core: # Translations in this namespace are used by the forum user interface. forum: - # These translations are used in the Change Email modal dialog. change_email: confirm_password_placeholder: => core.ref.confirm_password @@ -326,11 +323,10 @@ core: discussion_list: empty_text: It looks as though there are no discussions here. load_more_button: => core.ref.load_more - mark_as_read_a11y_label: Mark replies as read replied_text: "{username} replied {ago}" started_text: "{username} started {ago}" - total_replies_a11y_label: "{count} replies" - unread_replies_a11y_label: "{count} unread replies" + total_replies_a11y_label: "{count, plural, one {# reply} other {# replies}}" + unread_replies_a11y_label: "{count, plural, one {# unread reply} other {# unread replies}}. Mark unread {count, plural, one {reply} other {replies}} as read." # These translations are used in the Forgot Password modal dialog. forgot_password: @@ -496,7 +492,6 @@ core: # Translations in this namespace are used by the forum and admin interfaces. lib: - # These translations are displayed as tooltips for discussion badges. badge: hidden_tooltip: Hidden @@ -617,7 +612,6 @@ core: # Translations in this namespace are used in emails sent by the forum. email: - # These translations are used in emails sent when users register new accounts. activate_account: subject: Activate Your New Account @@ -678,7 +672,7 @@ core: all_discussions: All Discussions change_email: Change Email change_password: Change Password - color: Color # Referenced by flarum-tags.yml + color: Color # Referenced by flarum-tags.yml confirm_password: Confirm Password confirm_email: Confirm Email confirmation_email_sent: "We've sent a confirmation email to {email}. If it doesn't arrive soon, check your spam folder." @@ -688,7 +682,7 @@ core: custom_header_title: Edit Custom Header delete: Delete delete_forever: Delete Forever - discussions: Discussions # Referenced by flarum-statistics.yml + discussions: Discussions # Referenced by flarum-statistics.yml edit: Edit edit_user: Edit User email: Email @@ -702,25 +696,25 @@ core: mark_all_as_read: Mark All as Read next_page: Next Page notifications: Notifications - okay: OK # Referenced by flarum-tags.yml + okay: OK # Referenced by flarum-tags.yml password: Password - posts: Posts # Referenced by flarum-statistics.yml + posts: Posts # Referenced by flarum-statistics.yml previous_page: Previous Page remove: Remove rename: Rename - reply: Reply # Referenced by flarum-mentions.yml + reply: Reply # Referenced by flarum-mentions.yml reset_your_password: Reset Your Password restore: Restore - save_changes: Save Changes # Referenced by flarum-suspend.yml, flarum-tags.yml + save_changes: Save Changes # Referenced by flarum-suspend.yml, flarum-tags.yml settings: Settings sign_up: Sign Up - some_others: "{count, plural, one {# other} other {# others}}" # Referenced by flarum-likes.yml, flarum-mentions.yml + some_others: "{count, plural, one {# other} other {# others}}" # Referenced by flarum-likes.yml, flarum-mentions.yml start_a_discussion: Start a Discussion username: Username - users: Users # Referenced by flarum-statistics.yml + users: Users # Referenced by flarum-statistics.yml view: View write_a_reply: Write a Reply... - you: You # Referenced by flarum-likes.yml, flarum-mentions.yml + you: You # Referenced by flarum-likes.yml, flarum-mentions.yml ## # GROUP NAMES - These keys are translated at the back end. From f193db2ceee73e7c58dc08e4a34cc7fd6323a8ce Mon Sep 17 00:00:00 2001 From: David Wheatley Date: Sat, 2 Oct 2021 19:37:15 +0100 Subject: [PATCH 09/14] Remove unused import --- js/src/forum/components/DiscussionListItem.js | 1 - 1 file changed, 1 deletion(-) diff --git a/js/src/forum/components/DiscussionListItem.js b/js/src/forum/components/DiscussionListItem.js index 7a3726a217..e997bd537f 100644 --- a/js/src/forum/components/DiscussionListItem.js +++ b/js/src/forum/components/DiscussionListItem.js @@ -13,7 +13,6 @@ import TerminalPost from './TerminalPost'; import SubtreeRetainer from '../../common/utils/SubtreeRetainer'; import DiscussionControls from '../utils/DiscussionControls'; import slidable from '../utils/slidable'; -import extractText from '../../common/utils/extractText'; import classList from '../../common/utils/classList'; import DiscussionPage from './DiscussionPage'; import escapeRegExp from '../../common/utils/escapeRegExp'; From e0062ad4fcf085b361714b8308fec3f19affc5fd Mon Sep 17 00:00:00 2001 From: David Wheatley Date: Sat, 2 Oct 2021 20:54:05 +0100 Subject: [PATCH 10/14] Add missing new line --- less/common/Accessibility.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/less/common/Accessibility.less b/less/common/Accessibility.less index 707efe7e5b..db4802e6af 100644 --- a/less/common/Accessibility.less +++ b/less/common/Accessibility.less @@ -8,4 +8,4 @@ position: absolute; white-space: nowrap; width: 1px; -} \ No newline at end of file +} From 3d2d1da2f9381bb7b0ff1625f4192218243aea7a Mon Sep 17 00:00:00 2001 From: David Wheatley Date: Sat, 9 Oct 2021 17:21:34 +0100 Subject: [PATCH 11/14] Delete Accessibility.less --- less/common/Accessibility.less | 11 ----------- 1 file changed, 11 deletions(-) delete mode 100644 less/common/Accessibility.less diff --git a/less/common/Accessibility.less b/less/common/Accessibility.less deleted file mode 100644 index db4802e6af..0000000000 --- a/less/common/Accessibility.less +++ /dev/null @@ -1,11 +0,0 @@ -// Screen-reader only content -// https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html -.sr-only { - clip: rect(0 0 0 0); - clip-path: inset(50%); - height: 1px; - overflow: hidden; - position: absolute; - white-space: nowrap; - width: 1px; -} From 6726e1ba2f1e4f127992b39917b7fb881f375bf8 Mon Sep 17 00:00:00 2001 From: David Wheatley Date: Sat, 9 Oct 2021 17:22:04 +0100 Subject: [PATCH 12/14] Use existing `.visually-hidden` class --- js/src/forum/components/DiscussionListItem.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/js/src/forum/components/DiscussionListItem.js b/js/src/forum/components/DiscussionListItem.js index e997bd537f..ac6a32d85a 100644 --- a/js/src/forum/components/DiscussionListItem.js +++ b/js/src/forum/components/DiscussionListItem.js @@ -220,7 +220,7 @@ export default class DiscussionListItem extends Component { @@ -231,7 +231,7 @@ export default class DiscussionListItem extends Component { - {app.translator.trans('core.forum.discussion_list.total_replies_a11y_label', { count: discussion.replyCount() })} + ); } From 961784f7bfc03138a8efe03300e1b47f938e3f86 Mon Sep 17 00:00:00 2001 From: David Wheatley Date: Sat, 9 Oct 2021 17:23:22 +0100 Subject: [PATCH 13/14] Format --- js/src/forum/components/DiscussionListItem.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/js/src/forum/components/DiscussionListItem.js b/js/src/forum/components/DiscussionListItem.js index ac6a32d85a..67d1cd9505 100644 --- a/js/src/forum/components/DiscussionListItem.js +++ b/js/src/forum/components/DiscussionListItem.js @@ -231,7 +231,9 @@ export default class DiscussionListItem extends Component { - + ); } From a25d7bd827afd6d384762843ed325703d23690d6 Mon Sep 17 00:00:00 2001 From: David Wheatley Date: Sat, 9 Oct 2021 17:27:40 +0100 Subject: [PATCH 14/14] Fix locale formatting --- locale/core.yml | 23 ++++++++++++++--------- 1 file changed, 14 insertions(+), 9 deletions(-) diff --git a/locale/core.yml b/locale/core.yml index 8923ce145c..a9e78d87d1 100644 --- a/locale/core.yml +++ b/locale/core.yml @@ -1,10 +1,12 @@ core: + ## # UNIQUE KEYS - The following keys are used in only one location each. ## # Translations in this namespace are used by the admin interface. admin: + # These translations are used in the Appearance page. appearance: colored_header_label: Colored Header @@ -259,6 +261,7 @@ core: # Translations in this namespace are used by the forum user interface. forum: + # These translations are used in the Change Email modal dialog. change_email: confirm_password_placeholder: => core.ref.confirm_password @@ -492,6 +495,7 @@ core: # Translations in this namespace are used by the forum and admin interfaces. lib: + # These translations are displayed as tooltips for discussion badges. badge: hidden_tooltip: Hidden @@ -612,6 +616,7 @@ core: # Translations in this namespace are used in emails sent by the forum. email: + # These translations are used in emails sent when users register new accounts. activate_account: subject: Activate Your New Account @@ -672,7 +677,7 @@ core: all_discussions: All Discussions change_email: Change Email change_password: Change Password - color: Color # Referenced by flarum-tags.yml + color: Color # Referenced by flarum-tags.yml confirm_password: Confirm Password confirm_email: Confirm Email confirmation_email_sent: "We've sent a confirmation email to {email}. If it doesn't arrive soon, check your spam folder." @@ -682,7 +687,7 @@ core: custom_header_title: Edit Custom Header delete: Delete delete_forever: Delete Forever - discussions: Discussions # Referenced by flarum-statistics.yml + discussions: Discussions # Referenced by flarum-statistics.yml edit: Edit edit_user: Edit User email: Email @@ -696,25 +701,25 @@ core: mark_all_as_read: Mark All as Read next_page: Next Page notifications: Notifications - okay: OK # Referenced by flarum-tags.yml + okay: OK # Referenced by flarum-tags.yml password: Password - posts: Posts # Referenced by flarum-statistics.yml + posts: Posts # Referenced by flarum-statistics.yml previous_page: Previous Page remove: Remove rename: Rename - reply: Reply # Referenced by flarum-mentions.yml + reply: Reply # Referenced by flarum-mentions.yml reset_your_password: Reset Your Password restore: Restore - save_changes: Save Changes # Referenced by flarum-suspend.yml, flarum-tags.yml + save_changes: Save Changes # Referenced by flarum-suspend.yml, flarum-tags.yml settings: Settings sign_up: Sign Up - some_others: "{count, plural, one {# other} other {# others}}" # Referenced by flarum-likes.yml, flarum-mentions.yml + some_others: "{count, plural, one {# other} other {# others}}" # Referenced by flarum-likes.yml, flarum-mentions.yml start_a_discussion: Start a Discussion username: Username - users: Users # Referenced by flarum-statistics.yml + users: Users # Referenced by flarum-statistics.yml view: View write_a_reply: Write a Reply... - you: You # Referenced by flarum-likes.yml, flarum-mentions.yml + you: You # Referenced by flarum-likes.yml, flarum-mentions.yml ## # GROUP NAMES - These keys are translated at the back end.