From 5ab5257ff521bede446613c1dcd61effdac99090 Mon Sep 17 00:00:00 2001 From: Sami Mazouz Date: Tue, 10 Oct 2023 21:36:08 +0100 Subject: [PATCH] feat: theming and extensibility improvements (#3876) * feat: make page structure customizable across different pages (#3867) * feat: create `PageStructure` component * feat: apply to `DiscussionPage` * feat: apply to `UserPage` * feat: apply to `TagsPage` * fix: adapt subscriptions ext * chore: cleanup * chore: use grid & flexbox for the discussion list item (#3868) * chore: rename `DiscussionPage-list` to `DiscussionListPane` * chore: itemlistify `DiscussionListItem` * chore: use flex and grid for `DiscussionListItem` * chore: use flexbox for `App-header` (#3869) * chore: use flex and grid for `App-header` * chore: drop search floats * fix: adapt admin styles * chore: use flexbox in dropdowns and SplitDropdown for subscriptions (#3874) * chore: flexbox dropdown menu items * chore: normalize subscriptions menu (use slit dropdown) * chore: cleanup * chore: misc flexbox/grid changes (#3875) * chore: `TagsPage` to tsx * chore: `TagsPage` flexbox/grid * chore: `IndexPage-toolbar` flexbox * chore: `UserCard` flexbox & itemlists * fix: `Post` improve spacing logic * chore: `Post` grid and proper spacing * fix: avatar editor hover layer layout * chore: `Button` flex * chore: normalize form semantics (#3877) * chore: normalize fieldsets * fix: `LinkButton` spacing * chore: consistent form semantics * fix: styling regressions (#3878) * fix: post spacing goes off in other pages * fix: regression * feat: extract reusable components from `NotificationsDropdown` (#3879) * feat: extensible global notices (#3880) * fix: js error on null item list * feat: extensible global notices * chore: housekeeping (#3881) * chore: use CSS variables where still not using * chore: cleanup suspension modal * chore: cleanup post flag * fix: badge vertical align * chore: use CSS variables for custom coloring * chore: `icon` helper to `Icon` component * chore: `avatar` helper to `Avatar` component * fix: chunk loading fails on admin frontend * chore: format * feat: reusable `UploadImageButton` component (#3882) * chore: convert `UploadImageButton` to tsx * feat: reusable `UploadImageButton` component * feat: add `image-upload` setting type * feat: extensible default footer component (#3883) * chore: yarn format --- extensions/embed/less/forum.less | 4 +- extensions/emoji/less/forum.less | 4 +- .../flags/js/src/forum/addFlagsToPosts.js | 6 +- .../flags/js/src/forum/components/FlagList.js | 65 -------- .../js/src/forum/components/FlagList.tsx | 64 ++++++++ .../js/src/forum/components/FlagPostModal.js | 13 +- .../js/src/forum/components/FlagsDropdown.js | 33 ---- .../js/src/forum/components/FlagsDropdown.tsx | 34 +++++ .../js/src/forum/states/FlagListState.js | 37 ----- .../js/src/forum/states/FlagListState.tsx | 39 +++++ extensions/flags/less/forum.less | 54 +++---- extensions/likes/js/src/forum/addLikesList.js | 4 +- .../src/forum/components/PostLikesModal.tsx | 9 +- extensions/likes/less/forum.less | 2 +- .../DiscussionLockedNotification.js | 4 + .../src/common/components/MarkdownButton.js | 4 +- .../js/src/forum/addMentionedByList.js | 8 +- .../src/forum/components/MentionedByModal.tsx | 5 +- .../js/src/forum/fragments/PostQuoteButton.js | 4 +- .../js/src/forum/mentionables/PostMention.tsx | 4 +- .../js/src/forum/mentionables/UserMention.tsx | 4 +- extensions/mentions/less/forum.less | 6 +- .../js/src/forum/components/NicknameModal.js | 7 +- .../js/src/admin/components/ExtensionItem.tsx | 4 +- .../js/src/admin/components/QueueSection.tsx | 28 ++-- .../src/admin/components/StatisticsWidget.tsx | 4 +- extensions/statistics/less/admin.less | 14 +- .../subscriptions/js/src/@types/shims.d.ts | 7 + .../js/src/forum/addSubscriptionFilter.js | 3 +- .../forum/components/NewPostNotification.js | 4 + .../src/forum/components/SubscriptionMenu.js | 115 -------------- .../src/forum/components/SubscriptionMenu.tsx | 99 ++++++++++++ .../forum/components/SubscriptionMenuItem.js | 17 --- extensions/subscriptions/less/forum.less | 15 -- .../src/forum/components/SuspendUserModal.js | 51 +++---- .../forum/components/SuspensionInfoModal.js | 7 +- .../components/UserSuspendedNotification.js | 4 + .../components/UserUnsuspendedNotification.js | 4 + extensions/tags/js/src/@types/shims.d.ts | 6 +- .../js/src/admin/components/EditTagModal.tsx | 10 +- .../tags/js/src/admin/components/TagsPage.js | 8 +- .../tags/js/src/common/helpers/tagIcon.js | 6 +- .../tags/js/src/forum/addTagComposer.js | 7 +- extensions/tags/js/src/forum/addTagFilter.tsx | 29 ++-- extensions/tags/js/src/forum/addTagList.js | 8 +- .../components/{TagsPage.js => TagsPage.tsx} | 88 +++++------ extensions/tags/less/admin/EditTagModal.less | 7 +- extensions/tags/less/admin/TagsPage.less | 20 +-- extensions/tags/less/common/TagIcon.less | 6 +- extensions/tags/less/common/TagLabel.less | 8 +- .../tags/less/common/TagSelectionModal.less | 12 +- extensions/tags/less/common/root.less | 4 +- extensions/tags/less/forum.less | 21 +-- extensions/tags/less/forum/TagTiles.less | 58 ++++--- .../js/src/admin/components/AdminHeader.js | 5 +- .../js/src/admin/components/AdminPage.tsx | 22 ++- .../src/admin/components/AppearancePage.tsx | 83 +++++----- .../js/src/admin/components/BasicsPage.tsx | 20 ++- .../src/admin/components/CreateUserModal.tsx | 3 +- .../src/admin/components/EditGroupModal.tsx | 7 +- .../admin/components/ExtensionLinkButton.js | 4 +- .../js/src/admin/components/ExtensionPage.tsx | 13 +- .../src/admin/components/ExtensionsWidget.js | 4 +- .../src/admin/components/HeaderSecondary.js | 8 +- .../core/js/src/admin/components/MailPage.tsx | 95 +++++++----- .../src/admin/components/PermissionGrid.tsx | 4 +- .../src/admin/components/PermissionsPage.tsx | 4 +- .../src/admin/components/SessionDropdown.tsx | 4 +- .../js/src/admin/components/SettingsModal.tsx | 5 +- .../src/admin/components/UploadImageButton.js | 99 ------------ .../admin/components/UploadImageButton.tsx | 110 ++++++++++++++ .../js/src/admin/components/UserListPage.tsx | 4 +- framework/core/js/src/common/common.ts | 6 +- .../core/js/src/common/components/Alert.tsx | 26 ++-- .../core/js/src/common/components/Avatar.tsx | 44 ++++++ .../core/js/src/common/components/Badge.tsx | 4 +- .../core/js/src/common/components/Button.tsx | 4 +- .../js/src/common/components/Checkbox.tsx | 8 +- .../common/components/ColorPreviewInput.tsx | 5 +- .../components/DetailedDropdownItem.tsx | 36 +++++ .../js/src/common/components/Dropdown.tsx | 21 ++- .../src/common/components/EditUserModal.tsx | 5 +- .../core/js/src/common/components/FieldSet.js | 22 --- .../js/src/common/components/FieldSet.tsx | 29 ++++ .../core/js/src/common/components/Form.tsx | 25 +++ .../core/js/src/common/components/Icon.tsx | 20 +++ .../js/src/common/components/LinkButton.js | 2 + .../core/js/src/common/components/Select.js | 4 +- .../src/common/components/SelectDropdown.tsx | 7 +- .../src/common/components/SplitDropdown.tsx | 33 ++-- .../core/js/src/common/helpers/avatar.tsx | 43 ------ framework/core/js/src/common/helpers/icon.tsx | 14 -- .../core/js/src/common/helpers/userOnline.tsx | 8 +- .../core/js/src/forum/ForumApplication.tsx | 7 +- .../src/forum/components/AccessTokensList.tsx | 10 +- .../js/src/forum/components/AvatarEditor.js | 10 +- .../src/forum/components/ChangeEmailModal.tsx | 5 +- .../forum/components/ChangePasswordModal.tsx | 5 +- .../js/src/forum/components/CommentPost.js | 72 +++++++-- .../js/src/forum/components/ComposerBody.js | 4 +- .../forum/components/DiscussionListItem.tsx | 143 ++++++++++++------ .../forum/components/DiscussionListPane.js | 2 +- .../src/forum/components/DiscussionPage.tsx | 60 ++------ .../src/forum/components/EditPostComposer.js | 5 +- .../core/js/src/forum/components/EventPost.js | 10 +- .../core/js/src/forum/components/Footer.tsx | 7 + .../forum/components/ForgotPasswordModal.tsx | 14 +- .../src/forum/components/HeaderDropdown.tsx | 77 ++++++++++ .../js/src/forum/components/HeaderList.tsx | 87 +++++++++++ .../src/forum/components/HeaderListGroup.tsx | 19 +++ .../src/forum/components/HeaderListItem.tsx | 39 +++++ .../js/src/forum/components/IndexPage.tsx | 102 ++----------- .../js/src/forum/components/IndexSidebar.tsx | 97 ++++++++++++ .../js/src/forum/components/LoadingPost.js | 5 +- .../forum/components/NewAccessTokenModal.tsx | 7 +- .../core/js/src/forum/components/Notices.tsx | 67 ++++++++ .../js/src/forum/components/Notification.tsx | 69 +++++---- .../src/forum/components/NotificationGrid.js | 6 +- .../src/forum/components/NotificationList.js | 113 ++++---------- .../components/NotificationsDropdown.tsx | 64 ++------ .../js/src/forum/components/PageStructure.tsx | 93 ++++++++++++ .../core/js/src/forum/components/Post.tsx | 67 +++++--- .../js/src/forum/components/PostPreview.js | 4 +- .../forum/components/PostStreamScrubber.js | 8 +- .../core/js/src/forum/components/PostUser.js | 46 +----- .../components/RenameDiscussionModal.tsx | 7 +- .../js/src/forum/components/ReplyComposer.js | 4 +- .../src/forum/components/ReplyPlaceholder.js | 37 +++-- .../core/js/src/forum/components/Search.tsx | 4 +- .../src/forum/components/SessionDropdown.tsx | 4 +- .../js/src/forum/components/SettingsPage.tsx | 6 +- .../js/src/forum/components/TerminalPost.js | 5 +- .../core/js/src/forum/components/UserCard.js | 113 +++++++++----- .../core/js/src/forum/components/UserPage.tsx | 48 +++--- .../src/forum/components/UserSecurityPage.tsx | 39 ++--- .../forum/components/UsersSearchSource.tsx | 4 +- framework/core/js/src/forum/forum.ts | 1 - .../src/forum/utils/alertEmailConfirmation.js | 69 --------- framework/core/less/admin/AdminNav.less | 23 ++- framework/core/less/admin/AppearancePage.less | 15 +- framework/core/less/admin/BasicsPage.less | 13 +- framework/core/less/admin/EditGroupModal.less | 16 +- framework/core/less/admin/ExtensionPage.less | 4 + framework/core/less/admin/MailPage.less | 22 --- framework/core/less/common/App.less | 46 ++++-- framework/core/less/common/Badge.less | 1 - framework/core/less/common/Button.less | 37 ++--- framework/core/less/common/ColorInput.less | 2 +- .../less/common/DetailedDropdownItem.less | 22 +++ framework/core/less/common/Dropdown.less | 15 +- framework/core/less/common/Form.less | 76 +++++++++- framework/core/less/common/FormControl.less | 20 ++- framework/core/less/common/Modal.less | 1 - framework/core/less/common/Search.less | 8 +- framework/core/less/common/common.less | 1 + framework/core/less/common/root.less | 23 ++- framework/core/less/common/scaffolding.less | 15 +- framework/core/less/common/sideNav.less | 15 +- framework/core/less/forum.less | 6 +- framework/core/less/forum/AvatarEditor.less | 18 ++- .../core/less/forum/DiscussionListItem.less | 98 ++++++------ .../core/less/forum/DiscussionListPane.less | 87 +++++++++++ framework/core/less/forum/DiscussionPage.less | 129 +++------------- ...tionsDropdown.less => HeaderDropdown.less} | 10 +- ...{NotificationList.less => HeaderList.less} | 54 +++---- framework/core/less/forum/IndexPage.less | 12 +- framework/core/less/forum/PageStructure.less | 38 +++++ framework/core/less/forum/Post.less | 117 +++++++------- framework/core/less/forum/PostStream.less | 16 +- framework/core/less/forum/SettingsPage.less | 6 - framework/core/less/forum/UserCard.less | 28 ++-- .../core/less/forum/UserSecurityPage.less | 1 + framework/core/views/frontend/forum.blade.php | 4 + .../src/RegisterAsyncChunksPlugin.cjs | 127 ++++++++-------- 174 files changed, 2677 insertions(+), 2062 deletions(-) delete mode 100644 extensions/flags/js/src/forum/components/FlagList.js create mode 100644 extensions/flags/js/src/forum/components/FlagList.tsx delete mode 100644 extensions/flags/js/src/forum/components/FlagsDropdown.js create mode 100644 extensions/flags/js/src/forum/components/FlagsDropdown.tsx delete mode 100644 extensions/flags/js/src/forum/states/FlagListState.js create mode 100644 extensions/flags/js/src/forum/states/FlagListState.tsx create mode 100644 extensions/subscriptions/js/src/@types/shims.d.ts delete mode 100644 extensions/subscriptions/js/src/forum/components/SubscriptionMenu.js create mode 100644 extensions/subscriptions/js/src/forum/components/SubscriptionMenu.tsx delete mode 100644 extensions/subscriptions/js/src/forum/components/SubscriptionMenuItem.js rename extensions/tags/js/src/forum/components/{TagsPage.js => TagsPage.tsx} (60%) delete mode 100644 framework/core/js/src/admin/components/UploadImageButton.js create mode 100644 framework/core/js/src/admin/components/UploadImageButton.tsx create mode 100644 framework/core/js/src/common/components/Avatar.tsx create mode 100644 framework/core/js/src/common/components/DetailedDropdownItem.tsx delete mode 100644 framework/core/js/src/common/components/FieldSet.js create mode 100644 framework/core/js/src/common/components/FieldSet.tsx create mode 100644 framework/core/js/src/common/components/Form.tsx create mode 100644 framework/core/js/src/common/components/Icon.tsx delete mode 100644 framework/core/js/src/common/helpers/avatar.tsx delete mode 100644 framework/core/js/src/common/helpers/icon.tsx create mode 100644 framework/core/js/src/forum/components/Footer.tsx create mode 100644 framework/core/js/src/forum/components/HeaderDropdown.tsx create mode 100644 framework/core/js/src/forum/components/HeaderList.tsx create mode 100644 framework/core/js/src/forum/components/HeaderListGroup.tsx create mode 100644 framework/core/js/src/forum/components/HeaderListItem.tsx create mode 100644 framework/core/js/src/forum/components/IndexSidebar.tsx create mode 100644 framework/core/js/src/forum/components/Notices.tsx create mode 100644 framework/core/js/src/forum/components/PageStructure.tsx delete mode 100644 framework/core/js/src/forum/utils/alertEmailConfirmation.js create mode 100644 framework/core/less/common/DetailedDropdownItem.less create mode 100644 framework/core/less/forum/DiscussionListPane.less rename framework/core/less/forum/{NotificationsDropdown.less => HeaderDropdown.less} (81%) rename framework/core/less/forum/{NotificationList.less => HeaderList.less} (82%) create mode 100644 framework/core/less/forum/PageStructure.less diff --git a/extensions/embed/less/forum.less b/extensions/embed/less/forum.less index b352032ece..d195646aa3 100644 --- a/extensions/embed/less/forum.less +++ b/extensions/embed/less/forum.less @@ -50,7 +50,7 @@ padding: 15px 15px; .scrolled & { - .box-shadow(0 2px 6px @shadow-color); + .box-shadow(0 2px 6px var(--shadow-color)); } } @@ -69,7 +69,7 @@ margin: 0; &, a { - color: @muted-color; + color: var(--muted-color); } } } diff --git a/extensions/emoji/less/forum.less b/extensions/emoji/less/forum.less index 8dba0dc475..2b52ba4773 100644 --- a/extensions/emoji/less/forum.less +++ b/extensions/emoji/less/forum.less @@ -12,7 +12,7 @@ img.emoji { margin: 5px 0 !important; > li > button { - color: @text-color; + color: var(--text-color); font-weight: bold; padding-top: 6px; padding-bottom: 6px; @@ -25,7 +25,7 @@ img.emoji { } .Dropdown-header { - color: @muted-more-color; + color: var(--muted-more-color); text-transform: none; font-weight: normal; padding-bottom: 5px; diff --git a/extensions/flags/js/src/forum/addFlagsToPosts.js b/extensions/flags/js/src/forum/addFlagsToPosts.js index 67f785f2c9..018d6307f8 100644 --- a/extensions/flags/js/src/forum/addFlagsToPosts.js +++ b/extensions/flags/js/src/forum/addFlagsToPosts.js @@ -1,4 +1,4 @@ -import { extend } from 'flarum/common/extend'; +import { extend, override } from 'flarum/common/extend'; import app from 'flarum/forum/app'; import Post from 'flarum/forum/components/Post'; import Button from 'flarum/common/components/Button'; @@ -75,7 +75,7 @@ export default function () { return items; }; - extend(Post.prototype, 'content', function (vdom) { + override(Post.prototype, 'header', function (vdom) { const post = this.attrs.post; const flags = post.flags(); @@ -83,7 +83,7 @@ export default function () { if (post.isHidden()) this.revealContent = true; - vdom.unshift( + return (
{flags.map((flag) => ( diff --git a/extensions/flags/js/src/forum/components/FlagList.js b/extensions/flags/js/src/forum/components/FlagList.js deleted file mode 100644 index dd876c8d79..0000000000 --- a/extensions/flags/js/src/forum/components/FlagList.js +++ /dev/null @@ -1,65 +0,0 @@ -import app from 'flarum/forum/app'; -import Component from 'flarum/common/Component'; -import Link from 'flarum/common/components/Link'; -import LoadingIndicator from 'flarum/common/components/LoadingIndicator'; -import avatar from 'flarum/common/helpers/avatar'; -import username from 'flarum/common/helpers/username'; -import icon from 'flarum/common/helpers/icon'; -import humanTime from 'flarum/common/helpers/humanTime'; - -export default class FlagList extends Component { - oninit(vnode) { - super.oninit(vnode); - this.state = this.attrs.state; - } - - view() { - const flags = this.state.cache || []; - - return ( -
-
-

{app.translator.trans('flarum-flags.forum.flagged_posts.title')}

-
-
-
    - {flags.length ? ( - flags.map((flag) => { - const post = flag.post(); - - return ( -
  • - { - app.flags.index = post; - e.redraw = false; - }} - > - {avatar(post.user())} - {icon('fas fa-flag', { className: 'Notification-icon' })} - - {app.translator.trans('flarum-flags.forum.flagged_posts.item_text', { - username: username(post.user()), - em: , - discussion: post.discussion().title(), - })} - - {humanTime(flag.createdAt())} -
    {post.contentPlain()}
    - -
    • - ); - }) - ) : !this.state.loading ? ( -
    {app.translator.trans('flarum-flags.forum.flagged_posts.empty_text')}
    - ) : ( - - )} -
-
-
- ); - } -} diff --git a/extensions/flags/js/src/forum/components/FlagList.tsx b/extensions/flags/js/src/forum/components/FlagList.tsx new file mode 100644 index 0000000000..74c9c611b7 --- /dev/null +++ b/extensions/flags/js/src/forum/components/FlagList.tsx @@ -0,0 +1,64 @@ +import app from 'flarum/forum/app'; +import Component from 'flarum/common/Component'; +import type { ComponentAttrs } from 'flarum/common/Component'; +import Avatar from 'flarum/common/components/Avatar'; +import username from 'flarum/common/helpers/username'; +import HeaderList from 'flarum/forum/components/HeaderList'; +import HeaderListItem from 'flarum/forum/components/HeaderListItem'; +import type Mithril from 'mithril'; +import type Post from 'flarum/common/models/Post'; +import type FlagListState from '../states/FlagListState'; + +export interface IFlagListAttrs extends ComponentAttrs { + state: FlagListState; +} + +export default class FlagList extends Component { + oninit(vnode: Mithril.Vnode) { + super.oninit(vnode); + this.state = this.attrs.state; + } + + view() { + const flags = this.state.cache || []; + + return ( + +
    + {!this.state.loading && + flags.map((flag) => { + const post = flag.post() as Post; + + return ( +
  • + } + icon="fas fa-flag" + content={app.translator.trans('flarum-flags.forum.flagged_posts.item_text', { + username: username(post.user()), + em: , + discussion: post.discussion().title(), + })} + excerpt={post.contentPlain()} + datetime={flag.createdAt()} + href={app.route.post(post)} + onclick={(e: MouseEvent) => { + app.flags.index = post; + e.redraw = false; + }} + /> +
    • + ); + })} +
+ + ); + } +} diff --git a/extensions/flags/js/src/forum/components/FlagPostModal.js b/extensions/flags/js/src/forum/components/FlagPostModal.js index de68a31662..204dad1dcd 100644 --- a/extensions/flags/js/src/forum/components/FlagPostModal.js +++ b/extensions/flags/js/src/forum/components/FlagPostModal.js @@ -1,5 +1,6 @@ import app from 'flarum/forum/app'; import Modal from 'flarum/common/components/Modal'; +import Form from 'flarum/common/components/Form'; import Button from 'flarum/common/components/Button'; import Stream from 'flarum/common/utils/Stream'; @@ -28,31 +29,31 @@ export default class FlagPostModal extends Modal { if (this.success) { return (
-
+

{app.translator.trans('flarum-flags.forum.flag_post.confirmation_message')}

-
+
-
+
); } return (
-
+
{this.flagReasons().toArray()}
-
+
-
+
); } diff --git a/extensions/flags/js/src/forum/components/FlagsDropdown.js b/extensions/flags/js/src/forum/components/FlagsDropdown.js deleted file mode 100644 index 751d1ce83a..0000000000 --- a/extensions/flags/js/src/forum/components/FlagsDropdown.js +++ /dev/null @@ -1,33 +0,0 @@ -import app from 'flarum/forum/app'; -import NotificationsDropdown from 'flarum/forum/components/NotificationsDropdown'; - -import FlagList from './FlagList'; - -export default class FlagsDropdown extends NotificationsDropdown { - static initAttrs(attrs) { - attrs.label = attrs.label || app.translator.trans('flarum-flags.forum.flagged_posts.tooltip'); - attrs.icon = attrs.icon || 'fas fa-flag'; - - super.initAttrs(attrs); - } - - getMenu() { - return ( -
- {this.showing && } -
- ); - } - - goToRoute() { - m.route.set(app.route('flags')); - } - - getUnreadCount() { - return app.flags.cache ? app.flags.cache.length : app.forum.attribute('flagCount'); - } - - getNewCount() { - return app.session.user.attribute('newFlagCount'); - } -} diff --git a/extensions/flags/js/src/forum/components/FlagsDropdown.tsx b/extensions/flags/js/src/forum/components/FlagsDropdown.tsx new file mode 100644 index 0000000000..3c13211630 --- /dev/null +++ b/extensions/flags/js/src/forum/components/FlagsDropdown.tsx @@ -0,0 +1,34 @@ +import app from 'flarum/forum/app'; +import HeaderDropdown from 'flarum/forum/components/HeaderDropdown'; +import type { IHeaderDropdownAttrs } from 'flarum/forum/components/HeaderDropdown'; +import classList from 'flarum/common/utils/classList'; + +import FlagList from './FlagList'; + +export interface IFlagsDropdownAttrs extends IHeaderDropdownAttrs {} + +export default class FlagsDropdown extends HeaderDropdown { + static initAttrs(attrs: IFlagsDropdownAttrs) { + attrs.className = classList('FlagsDropdown', attrs.className); + attrs.label = attrs.label || app.translator.trans('flarum-flags.forum.flagged_posts.tooltip'); + attrs.icon = attrs.icon || 'fas fa-flag'; + + super.initAttrs(attrs); + } + + getContent() { + return ; + } + + goToRoute() { + m.route.set(app.route('flags')); + } + + getUnreadCount() { + return app.flags.cache ? app.flags.cache.length : app.forum.attribute('flagCount'); + } + + getNewCount() { + return app.session.user!.attribute('newFlagCount'); + } +} diff --git a/extensions/flags/js/src/forum/states/FlagListState.js b/extensions/flags/js/src/forum/states/FlagListState.js deleted file mode 100644 index 94c011b4ee..0000000000 --- a/extensions/flags/js/src/forum/states/FlagListState.js +++ /dev/null @@ -1,37 +0,0 @@ -export default class FlagListState { - constructor(app) { - this.app = app; - - /** - * Whether or not the flags are loading. - * - * @type {Boolean} - */ - this.loading = false; - } - - /** - * Load flags into the application's cache if they haven't already - * been loaded. - */ - load() { - if (this.cache && !this.app.session.user.attribute('newFlagCount')) { - return; - } - - this.loading = true; - m.redraw(); - - this.app.store - .find('flags') - .then((flags) => { - this.app.session.user.pushAttributes({ newFlagCount: 0 }); - this.cache = flags.sort((a, b) => b.createdAt() - a.createdAt()); - }) - .catch(() => {}) - .then(() => { - this.loading = false; - m.redraw(); - }); - } -} diff --git a/extensions/flags/js/src/forum/states/FlagListState.tsx b/extensions/flags/js/src/forum/states/FlagListState.tsx new file mode 100644 index 0000000000..7afa5543fa --- /dev/null +++ b/extensions/flags/js/src/forum/states/FlagListState.tsx @@ -0,0 +1,39 @@ +import type ForumApplication from 'flarum/forum/ForumApplication'; +import type Flag from '../models/Flag'; +import type Post from 'flarum/common/models/Post'; + +export default class FlagListState { + public app: ForumApplication; + public loading = false; + public cache: Flag[] | null = null; + public index: Post | false | null = null; + + constructor(app: ForumApplication) { + this.app = app; + } + + /** + * Load flags into the application's cache if they haven't already + * been loaded. + */ + load() { + if (this.cache && !this.app.session.user!.attribute('newFlagCount')) { + return; + } + + this.loading = true; + m.redraw(); + + this.app.store + .find('flags') + .then((flags) => { + this.app.session.user!.pushAttributes({ newFlagCount: 0 }); + this.cache = flags.sort((a, b) => b.createdAt()!.getTime() - a.createdAt()!.getTime()); + }) + .catch(() => {}) + .then(() => { + this.loading = false; + m.redraw(); + }); + } +} diff --git a/extensions/flags/less/forum.less b/extensions/flags/less/forum.less index 173c58787e..9b89587c0c 100644 --- a/extensions/flags/less/forum.less +++ b/extensions/flags/less/forum.less @@ -1,6 +1,9 @@ .Post--flagged { + --border-width: 2px; padding-top: 0 !important; - border: 2px solid @primary-color; + padding-left: var(--post-padding); + margin-left: calc(~"0px - var(--post-padding)"); + border: var(--border-width) solid var(--primary-color); } .Post-header .item-flagged { @@ -8,29 +11,22 @@ margin: 0; } .Post-flagged { - background: @primary-color; - margin-top: -2px; - margin-bottom: 20px; - margin-left: -22px; - margin-right: -22px; + background: var(--primary-color); + margin: calc(~"0px - var(--border-width)") calc(~"0px - var(--border-width) - var(--post-padding)") var(--post-padding); padding: 10px; - border-radius: @border-radius @border-radius 0 0; + border-radius: var(--border-radius) var(--border-radius) 0 0; overflow: hidden; .light-contents(@color: @body-bg; @control-color: @body-bg); - @media @tablet-up { - margin-left: -22px - 85px; - } + display: flex; + align-items: center; + justify-content: space-between; &, a { - color: @body-bg !important; + color: var(--body-bg) !important; } } .Post-flagged-flags { - @media @tablet-up { - float: left; - } - font-size: 14px; margin: 7px 10px; text-align: left; @@ -42,19 +38,10 @@ font-weight: normal; } .Post-flagged-actions { - @media @tablet-up { - float: right; - } -} -.Post-flagged-actions .Button { - margin-left: 5px; -} - -.FlagsDropdown .Dropdown-toggle { - .Button-label, - .Button-caret { - display: none; - } + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 5px; } .FlagPostModal { @@ -66,7 +53,16 @@ strong { display: block; - color: @text-color; + color: var(--text-color); } } } + +.Flag .HeaderListItem-title { + justify-content: space-between; + flex-wrap: nowrap; +} + +.Flag .HeaderListItem-time { + flex-shrink: 0; +} diff --git a/extensions/likes/js/src/forum/addLikesList.js b/extensions/likes/js/src/forum/addLikesList.js index 8b647200a2..7770b9328c 100644 --- a/extensions/likes/js/src/forum/addLikesList.js +++ b/extensions/likes/js/src/forum/addLikesList.js @@ -4,7 +4,7 @@ import CommentPost from 'flarum/forum/components/CommentPost'; import Link from 'flarum/common/components/Link'; import punctuateSeries from 'flarum/common/helpers/punctuateSeries'; import username from 'flarum/common/helpers/username'; -import icon from 'flarum/common/helpers/icon'; +import Icon from 'flarum/common/components/Icon'; import Button from 'flarum/common/components/Button'; import PostLikesModal from './components/PostLikesModal'; @@ -58,7 +58,7 @@ export default function () { items.add( 'liked',
- {icon('far fa-thumbs-up')} + {app.translator.trans(`flarum-likes.forum.post.liked_by${likes[0] === app.session.user ? '_self' : ''}_text`, { count: names.length, users: punctuateSeries(names), diff --git a/extensions/likes/js/src/forum/components/PostLikesModal.tsx b/extensions/likes/js/src/forum/components/PostLikesModal.tsx index 12e8fe3391..8a092ebb9e 100644 --- a/extensions/likes/js/src/forum/components/PostLikesModal.tsx +++ b/extensions/likes/js/src/forum/components/PostLikesModal.tsx @@ -1,7 +1,7 @@ import app from 'flarum/forum/app'; import Modal from 'flarum/common/components/Modal'; import Link from 'flarum/common/components/Link'; -import avatar from 'flarum/common/helpers/avatar'; +import Avatar from 'flarum/common/components/Avatar'; import username from 'flarum/common/helpers/username'; import type { IInternalModalAttrs } from 'flarum/common/components/Modal'; import type Post from 'flarum/common/models/Post'; @@ -9,6 +9,7 @@ import type Mithril from 'mithril'; import PostLikesModalState from '../states/PostLikesModalState'; import Button from 'flarum/common/components/Button'; import LoadingIndicator from 'flarum/common/components/LoadingIndicator'; +import Form from 'flarum/common/components/Form'; export interface IPostLikesModalAttrs extends IInternalModalAttrs { post: Post; @@ -47,7 +48,7 @@ export default class PostLikesModal (
  • - {avatar(user)} {username(user)} + {username(user)}
    • )) @@ -57,13 +58,13 @@ export default class PostLikesModal {this.state.hasNext() ? (
    -
    +
    -
    +
    ) : null} diff --git a/extensions/likes/less/forum.less b/extensions/likes/less/forum.less index 58a8ae3bfa..79c706511c 100644 --- a/extensions/likes/less/forum.less +++ b/extensions/likes/less/forum.less @@ -4,7 +4,7 @@ margin: 0; a { - color: @text-color; + color: var(--text-color); font-size: 15px; font-weight: bold; display: block; diff --git a/extensions/lock/js/src/forum/components/DiscussionLockedNotification.js b/extensions/lock/js/src/forum/components/DiscussionLockedNotification.js index adc96149c4..1f1fb9c738 100644 --- a/extensions/lock/js/src/forum/components/DiscussionLockedNotification.js +++ b/extensions/lock/js/src/forum/components/DiscussionLockedNotification.js @@ -15,4 +15,8 @@ export default class DiscussionLockedNotification extends Notification { content() { return app.translator.trans('flarum-lock.forum.notifications.discussion_locked_text', { user: this.attrs.notification.fromUser() }); } + + excerpt() { + return null; + } } diff --git a/extensions/markdown/js/src/common/components/MarkdownButton.js b/extensions/markdown/js/src/common/components/MarkdownButton.js index dce1378fac..44072c7402 100644 --- a/extensions/markdown/js/src/common/components/MarkdownButton.js +++ b/extensions/markdown/js/src/common/components/MarkdownButton.js @@ -1,5 +1,5 @@ import Component from 'flarum/common/Component'; -import icon from 'flarum/common/helpers/icon'; +import Icon from 'flarum/common/components/Icon'; import Tooltip from 'flarum/common/components/Tooltip'; export default class MarkdownButton extends Component { @@ -16,7 +16,7 @@ export default class MarkdownButton extends Component { onkeydown={this.keydown.bind(this)} onclick={this.attrs.onclick} > - {icon(this.attrs.icon)} + ); diff --git a/extensions/mentions/js/src/forum/addMentionedByList.js b/extensions/mentions/js/src/forum/addMentionedByList.js index 48fe082f67..ff61ed061a 100644 --- a/extensions/mentions/js/src/forum/addMentionedByList.js +++ b/extensions/mentions/js/src/forum/addMentionedByList.js @@ -5,7 +5,7 @@ import Link from 'flarum/common/components/Link'; import PostPreview from 'flarum/forum/components/PostPreview'; import punctuateSeries from 'flarum/common/helpers/punctuateSeries'; import username from 'flarum/common/helpers/username'; -import icon from 'flarum/common/helpers/icon'; +import Icon from 'flarum/common/components/Icon'; import Button from 'flarum/common/components/Button'; import MentionedByModal from './components/MentionedByModal'; @@ -54,7 +54,9 @@ export default function addMentionedByList() { }} > - {icon('fas fa-reply-all')} + + + {app.translator.trans('flarum-mentions.forum.post.mentioned_by_more_text', { count: post.mentionedByCount() - replies.length })} @@ -145,7 +147,7 @@ export default function addMentionedByList() { 'replies',
    - {icon('fas fa-reply')} + {app.translator.trans(`flarum-mentions.forum.post.mentioned_by${repliers[0].user() === app.session.user ? '_self' : ''}_text`, { count: names.length, users: punctuateSeries(names), diff --git a/extensions/mentions/js/src/forum/components/MentionedByModal.tsx b/extensions/mentions/js/src/forum/components/MentionedByModal.tsx index 9a5d431a06..5638a13523 100644 --- a/extensions/mentions/js/src/forum/components/MentionedByModal.tsx +++ b/extensions/mentions/js/src/forum/components/MentionedByModal.tsx @@ -6,6 +6,7 @@ import type Post from 'flarum/common/models/Post'; import LoadingIndicator from 'flarum/common/components/LoadingIndicator'; import Button from 'flarum/common/components/Button'; import MentionedByModalState from '../state/MentionedByModalState'; +import Form from 'flarum/common/components/Form'; export interface IMentionedByModalAttrs extends IInternalModalAttrs { post: Post; @@ -58,13 +59,13 @@ export default class MentionedByModal {this.state.hasNext() && (
    -
    +
    -
    +
    )} diff --git a/extensions/mentions/js/src/forum/fragments/PostQuoteButton.js b/extensions/mentions/js/src/forum/fragments/PostQuoteButton.js index 79aca7f9f3..378b15ddb4 100644 --- a/extensions/mentions/js/src/forum/fragments/PostQuoteButton.js +++ b/extensions/mentions/js/src/forum/fragments/PostQuoteButton.js @@ -1,6 +1,6 @@ import app from 'flarum/forum/app'; import Fragment from 'flarum/common/Fragment'; -import icon from 'flarum/common/helpers/icon'; +import Icon from 'flarum/common/components/Icon'; import reply from '../utils/reply'; @@ -19,7 +19,7 @@ export default class PostQuoteButton extends Fragment { reply(this.post, this.content); }} > - {icon('fas fa-quote-left', { className: 'Button-icon' })} + {app.translator.trans('flarum-mentions.forum.post.quote_button')} ); diff --git a/extensions/mentions/js/src/forum/mentionables/PostMention.tsx b/extensions/mentions/js/src/forum/mentionables/PostMention.tsx index e32c07789a..d645417808 100644 --- a/extensions/mentions/js/src/forum/mentionables/PostMention.tsx +++ b/extensions/mentions/js/src/forum/mentionables/PostMention.tsx @@ -3,7 +3,7 @@ import MentionableModel from './MentionableModel'; import type Post from 'flarum/common/models/Post'; import type Mithril from 'mithril'; import usernameHelper from 'flarum/common/helpers/username'; -import avatar from 'flarum/common/helpers/avatar'; +import Avatar from 'flarum/common/components/Avatar'; import highlight from 'flarum/common/helpers/highlight'; import { truncate } from 'flarum/common/utils/string'; import getCleanDisplayName from '../utils/getCleanDisplayName'; @@ -63,7 +63,7 @@ export default class PostMention extends MentionableModel return ( <> - {avatar(user)} + {username} {[ app.translator.trans('flarum-mentions.forum.composer.reply_to_post_text', { number: model.number() }), diff --git a/extensions/mentions/js/src/forum/mentionables/UserMention.tsx b/extensions/mentions/js/src/forum/mentionables/UserMention.tsx index 78fb688242..c3b80a9e34 100644 --- a/extensions/mentions/js/src/forum/mentionables/UserMention.tsx +++ b/extensions/mentions/js/src/forum/mentionables/UserMention.tsx @@ -2,7 +2,7 @@ import app from 'flarum/forum/app'; import type Mithril from 'mithril'; import type User from 'flarum/common/models/User'; import usernameHelper from 'flarum/common/helpers/username'; -import avatar from 'flarum/common/helpers/avatar'; +import Avatar from 'flarum/common/components/Avatar'; import highlight from 'flarum/common/helpers/highlight'; import MentionableModel from './MentionableModel'; import getCleanDisplayName, { shouldUseOldFormat } from '../utils/getCleanDisplayName'; @@ -46,7 +46,7 @@ export default class UserMention extends MentionableModel return ( <> - {avatar(model)} + {username} ); diff --git a/extensions/mentions/less/forum.less b/extensions/mentions/less/forum.less index d5d9e819fc..244e81e6be 100644 --- a/extensions/mentions/less/forum.less +++ b/extensions/mentions/less/forum.less @@ -1,7 +1,7 @@ .PostMention, .UserMention, .GroupMention { background: var(--control-bg); color: var(--control-color); - border-radius: @border-radius; + border-radius: var(--border-radius); font-weight: 600; blockquote & { @@ -81,7 +81,7 @@ .MentionsDropdown, .PostMention-preview, .Post-mentionedBy-preview { // @TODO: Rename to .MentionsDropdownItem, along with child classes. 2.0 .PostPreview { - color: @muted-color; + color: var(--muted-color); .Avatar { .Avatar--size(24px); @@ -93,7 +93,7 @@ } } .username { - color: @text-color; + color: var(--text-color); font-weight: bold; } } diff --git a/extensions/nicknames/js/src/forum/components/NicknameModal.js b/extensions/nicknames/js/src/forum/components/NicknameModal.js index a1835b70de..cf6484e05b 100644 --- a/extensions/nicknames/js/src/forum/components/NicknameModal.js +++ b/extensions/nicknames/js/src/forum/components/NicknameModal.js @@ -2,6 +2,7 @@ import app from 'flarum/forum/app'; import Modal from 'flarum/common/components/Modal'; import Button from 'flarum/common/components/Button'; import Stream from 'flarum/common/utils/Stream'; +import Form from '@flarum/core/src/common/components/Form'; export default class NicknameModal extends Modal { oninit(vnode) { @@ -20,16 +21,16 @@ export default class NicknameModal extends Modal { content() { return (
    -
    +
    -
    +
    -
    +
    ); } diff --git a/extensions/package-manager/js/src/admin/components/ExtensionItem.tsx b/extensions/package-manager/js/src/admin/components/ExtensionItem.tsx index aa313800ac..7510805366 100644 --- a/extensions/package-manager/js/src/admin/components/ExtensionItem.tsx +++ b/extensions/package-manager/js/src/admin/components/ExtensionItem.tsx @@ -2,7 +2,7 @@ import type Mithril from 'mithril'; import app from 'flarum/admin/app'; import Component, { ComponentAttrs } from 'flarum/common/Component'; import classList from 'flarum/common/utils/classList'; -import icon from 'flarum/common/helpers/icon'; +import Icon from 'flarum/common/components/Icon'; import Tooltip from 'flarum/common/components/Tooltip'; import Button from 'flarum/common/components/Button'; import { Extension } from 'flarum/admin/AdminApplication'; @@ -35,7 +35,7 @@ export default class ExtensionItem
    - {extension.icon ? icon(extension.icon.name) : ''} + {extension.icon ? : ''}
    {extension.extra['flarum-extension'].title}
    diff --git a/extensions/package-manager/js/src/admin/components/QueueSection.tsx b/extensions/package-manager/js/src/admin/components/QueueSection.tsx index f013e79872..99b83a93f5 100644 --- a/extensions/package-manager/js/src/admin/components/QueueSection.tsx +++ b/extensions/package-manager/js/src/admin/components/QueueSection.tsx @@ -5,7 +5,7 @@ import LoadingIndicator from 'flarum/common/components/LoadingIndicator'; import Button from 'flarum/common/components/Button'; import Tooltip from 'flarum/common/components/Tooltip'; import { Extension } from 'flarum/admin/AdminApplication'; -import icon from 'flarum/common/helpers/icon'; +import Icon from 'flarum/common/components/Icon'; import ItemList from 'flarum/common/utils/ItemList'; import extractText from 'flarum/common/utils/extractText'; @@ -75,7 +75,7 @@ export default class QueueSection extends Component<{}> { return extension ? (
    - {!!extension.icon && icon(extension.icon.name)} + {!!extension.icon && }
    {extension.extra['flarum-extension'].title} @@ -199,17 +199,17 @@ export default class QueueSection extends Component<{}> { } operationIcon(operation: TaskOperations): Mithril.Children { - return icon( - { - update_check: 'fas fa-sync-alt', - update_major: 'fas fa-play', - update_minor: 'fas fa-play', - update_global: 'fas fa-play', - extension_install: 'fas fa-download', - extension_remove: 'fas fa-times', - extension_update: 'fas fa-arrow-alt-circle-up', - why_not: 'fas fa-exclamation-circle', - }[operation] - ); + const iconName = { + update_check: 'fas fa-sync-alt', + update_major: 'fas fa-play', + update_minor: 'fas fa-play', + update_global: 'fas fa-play', + extension_install: 'fas fa-download', + extension_remove: 'fas fa-times', + extension_update: 'fas fa-arrow-alt-circle-up', + why_not: 'fas fa-exclamation-circle', + }[operation]; + + return ; } } diff --git a/extensions/statistics/js/src/admin/components/StatisticsWidget.tsx b/extensions/statistics/js/src/admin/components/StatisticsWidget.tsx index 49b82e53ba..48c7584963 100644 --- a/extensions/statistics/js/src/admin/components/StatisticsWidget.tsx +++ b/extensions/statistics/js/src/admin/components/StatisticsWidget.tsx @@ -6,7 +6,7 @@ import abbreviateNumber from 'flarum/common/utils/abbreviateNumber'; import extractText from 'flarum/common/utils/extractText'; import LoadingIndicator from 'flarum/common/components/LoadingIndicator'; import Placeholder from 'flarum/common/components/Placeholder'; -import icon from 'flarum/common/helpers/icon'; +import Icon from 'flarum/common/components/Icon'; import classList from 'flarum/common/utils/classList'; import DashboardWidget, { IDashboardWidgetAttrs } from 'flarum/admin/components/DashboardWidget'; @@ -291,7 +291,7 @@ export default class StatisticsWidget extends DashboardWidget { <> {' '} 0 ? 'up' : 'down')}> - {icon('fas fa-arrow-' + (periodChange > 0 ? 'up' : 'down'))} + 0 ? 'up' : 'down')} /> {Math.abs(periodChange).toFixed(1)}% diff --git a/extensions/statistics/less/admin.less b/extensions/statistics/less/admin.less index 8d9797896d..d7e1f0dbd7 100644 --- a/extensions/statistics/less/admin.less +++ b/extensions/statistics/less/admin.less @@ -11,7 +11,7 @@ &-title { margin: 0 20px; - color: @muted-color; + color: var(--muted-color); } &-entities { @@ -29,7 +29,7 @@ min-width: 130px; font-size: 12px; font-weight: bold; - color: @muted-color; + color: var(--muted-color); } &-label { @@ -39,7 +39,7 @@ &-entity { min-width: 130px; padding: 15px 20px; - color: @text-color; + color: var(--text-color); font-size: 20px; .StatisticsWidget:not(.StatisticsWidget--mini) & { @@ -47,12 +47,12 @@ &:hover, &:focus-visible { - background: mix(@control-bg, @body-bg, 50%); + background: var(--control-body-bg-mix); text-decoration: none; } &.active { - border-top: 4px solid @primary-color; + border-top: 4px solid var(--primary-color); padding-top: 11px; } } @@ -75,10 +75,10 @@ font-weight: bold; text-transform: uppercase; font-size: 12px; - color: @muted-color; + color: var(--muted-color); .active & { - color: @primary-color; + color: var(--primary-color); } } diff --git a/extensions/subscriptions/js/src/@types/shims.d.ts b/extensions/subscriptions/js/src/@types/shims.d.ts new file mode 100644 index 0000000000..057f872464 --- /dev/null +++ b/extensions/subscriptions/js/src/@types/shims.d.ts @@ -0,0 +1,7 @@ +import 'flarum/common/models/Discussion'; + +declare module 'flarum/common/models/Discussion' { + export default interface Discussion { + subscription(): string; + } +} diff --git a/extensions/subscriptions/js/src/forum/addSubscriptionFilter.js b/extensions/subscriptions/js/src/forum/addSubscriptionFilter.js index ed950fff1e..bd886731f7 100644 --- a/extensions/subscriptions/js/src/forum/addSubscriptionFilter.js +++ b/extensions/subscriptions/js/src/forum/addSubscriptionFilter.js @@ -2,11 +2,12 @@ import app from 'flarum/forum/app'; import { extend } from 'flarum/common/extend'; import LinkButton from 'flarum/common/components/LinkButton'; import IndexPage from 'flarum/forum/components/IndexPage'; +import IndexSidebar from 'flarum/forum/components/IndexSidebar'; import DiscussionListState from 'flarum/forum/states/DiscussionListState'; import GlobalSearchState from 'flarum/forum/states/GlobalSearchState'; export default function addSubscriptionFilter() { - extend(IndexPage.prototype, 'navItems', function (items) { + extend(IndexSidebar.prototype, 'navItems', function (items) { if (app.session.user) { const params = app.search.stickyParams(); diff --git a/extensions/subscriptions/js/src/forum/components/NewPostNotification.js b/extensions/subscriptions/js/src/forum/components/NewPostNotification.js index 785a90141c..93c5ca0946 100644 --- a/extensions/subscriptions/js/src/forum/components/NewPostNotification.js +++ b/extensions/subscriptions/js/src/forum/components/NewPostNotification.js @@ -17,4 +17,8 @@ export default class NewPostNotification extends Notification { content() { return app.translator.trans('flarum-subscriptions.forum.notifications.new_post_text', { user: this.attrs.notification.fromUser() }); } + + excerpt() { + return null; + } } diff --git a/extensions/subscriptions/js/src/forum/components/SubscriptionMenu.js b/extensions/subscriptions/js/src/forum/components/SubscriptionMenu.js deleted file mode 100644 index c0ed97875f..0000000000 --- a/extensions/subscriptions/js/src/forum/components/SubscriptionMenu.js +++ /dev/null @@ -1,115 +0,0 @@ -import app from 'flarum/forum/app'; -import Dropdown from 'flarum/common/components/Dropdown'; -import Button from 'flarum/common/components/Button'; -import Tooltip from 'flarum/common/components/Tooltip'; -import icon from 'flarum/common/helpers/icon'; -import extractText from 'flarum/common/utils/extractText'; -import classList from 'flarum/common/utils/classList'; - -import SubscriptionMenuItem from './SubscriptionMenuItem'; - -export default class SubscriptionMenu extends Dropdown { - oninit(vnode) { - super.oninit(vnode); - - this.options = [ - { - subscription: null, - icon: 'far fa-star', - label: app.translator.trans('flarum-subscriptions.forum.sub_controls.not_following_button'), - description: app.translator.trans('flarum-subscriptions.forum.sub_controls.not_following_text'), - }, - { - subscription: 'follow', - icon: 'fas fa-star', - label: app.translator.trans('flarum-subscriptions.forum.sub_controls.following_button'), - description: app.translator.trans('flarum-subscriptions.forum.sub_controls.following_text'), - }, - { - subscription: 'ignore', - icon: 'far fa-eye-slash', - label: app.translator.trans('flarum-subscriptions.forum.sub_controls.ignoring_button'), - description: app.translator.trans('flarum-subscriptions.forum.sub_controls.ignoring_text'), - }, - ]; - } - - view() { - const discussion = this.attrs.discussion; - const subscription = discussion.subscription(); - - let buttonLabel = app.translator.trans('flarum-subscriptions.forum.sub_controls.follow_button'); - let buttonIcon = 'far fa-star'; - const buttonClass = 'SubscriptionMenu-button--' + subscription; - - switch (subscription) { - case 'follow': - buttonLabel = app.translator.trans('flarum-subscriptions.forum.sub_controls.following_button'); - buttonIcon = 'fas fa-star'; - break; - - case 'ignore': - buttonLabel = app.translator.trans('flarum-subscriptions.forum.sub_controls.ignoring_button'); - buttonIcon = 'far fa-eye-slash'; - break; - - default: - // no default - } - - const preferences = app.session.user.preferences(); - const notifyEmail = preferences['notify_newPost_email']; - const notifyAlert = preferences['notify_newPost_alert']; - const tooltipText = extractText( - app.translator.trans( - notifyEmail ? 'flarum-subscriptions.forum.sub_controls.notify_email_tooltip' : 'flarum-subscriptions.forum.sub_controls.notify_alert_tooltip' - ) - ); - - const shouldShowTooltip = (notifyEmail || notifyAlert) && subscription === null; - - const button = ( - - ); - - return ( -
    - {shouldShowTooltip ? ( - - {button} - - ) : ( - button - )} - - - -
      - {this.options.map((attrs) => ( -
    • - -
      • - ))} -
    -
    - ); - } - - saveSubscription(discussion, subscription) { - discussion.save({ subscription }); - - this.$('.SubscriptionMenu-button').tooltip('hide'); - } -} diff --git a/extensions/subscriptions/js/src/forum/components/SubscriptionMenu.tsx b/extensions/subscriptions/js/src/forum/components/SubscriptionMenu.tsx new file mode 100644 index 0000000000..ba6014e066 --- /dev/null +++ b/extensions/subscriptions/js/src/forum/components/SubscriptionMenu.tsx @@ -0,0 +1,99 @@ +import app from 'flarum/forum/app'; +import Dropdown, { IDropdownAttrs } from 'flarum/common/components/Dropdown'; +import Button from 'flarum/common/components/Button'; +import extractText from 'flarum/common/utils/extractText'; +import DetailedDropdownItem from 'flarum/common/components/DetailedDropdownItem'; +import SplitDropdown from 'flarum/common/components/SplitDropdown'; +import type Discussion from 'flarum/common/models/Discussion'; + +export interface ISubscriptionMenuAttrs extends IDropdownAttrs { + discussion: Discussion; +} + +export default class SubscriptionMenu extends Dropdown { + private options: any[] = [ + { + subscription: null, + icon: 'far fa-star', + label: app.translator.trans('flarum-subscriptions.forum.sub_controls.not_following_button'), + description: app.translator.trans('flarum-subscriptions.forum.sub_controls.not_following_text'), + }, + { + subscription: 'follow', + icon: 'fas fa-star', + label: app.translator.trans('flarum-subscriptions.forum.sub_controls.following_button'), + description: app.translator.trans('flarum-subscriptions.forum.sub_controls.following_text'), + }, + { + subscription: 'ignore', + icon: 'far fa-eye-slash', + label: app.translator.trans('flarum-subscriptions.forum.sub_controls.ignoring_button'), + description: app.translator.trans('flarum-subscriptions.forum.sub_controls.ignoring_text'), + }, + ]; + + private possibleButtonAttrs: any = { + null: { + icon: 'far fa-star', + label: app.translator.trans('flarum-subscriptions.forum.sub_controls.follow_button'), + }, + follow: { + icon: 'fas fa-star', + label: app.translator.trans('flarum-subscriptions.forum.sub_controls.following_button'), + }, + ignore: { + icon: 'far fa-eye-slash', + label: app.translator.trans('flarum-subscriptions.forum.sub_controls.ignoring_button'), + }, + }; + + view() { + const discussion = this.attrs.discussion; + const subscription = discussion.subscription(); + + const buttonAttrs = this.possibleButtonAttrs[subscription]; + + const preferences = app.session.user!.preferences()!; + const notifyEmail = preferences['notify_newPost_email']; + const notifyAlert = preferences['notify_newPost_alert']; + const tooltipText = extractText( + app.translator.trans( + notifyEmail ? 'flarum-subscriptions.forum.sub_controls.notify_email_tooltip' : 'flarum-subscriptions.forum.sub_controls.notify_alert_tooltip' + ) + ); + + const shouldShowTooltip = (notifyEmail || notifyAlert) && subscription === null; + + return ( + + {buttonAttrs.label} + + } + > + {this.options.map((attrs) => ( + + ))} + + ); + } + + saveSubscription(discussion: Discussion, subscription: string | null): void { + discussion.save({ subscription }); + + // @ts-ignore + this.$('.SubscriptionMenu-button').tooltip('hide'); + } +} diff --git a/extensions/subscriptions/js/src/forum/components/SubscriptionMenuItem.js b/extensions/subscriptions/js/src/forum/components/SubscriptionMenuItem.js deleted file mode 100644 index f9ff0ec277..0000000000 --- a/extensions/subscriptions/js/src/forum/components/SubscriptionMenuItem.js +++ /dev/null @@ -1,17 +0,0 @@ -import Component from 'flarum/common/Component'; -import icon from 'flarum/common/helpers/icon'; - -export default class SubscriptionMenuItem extends Component { - view() { - return ( - - ); - } -} diff --git a/extensions/subscriptions/less/forum.less b/extensions/subscriptions/less/forum.less index 7194a53e61..c35f76e0a8 100644 --- a/extensions/subscriptions/less/forum.less +++ b/extensions/subscriptions/less/forum.less @@ -22,18 +22,3 @@ .SubscriptionMenu .Dropdown-menu { min-width: 260px; } -.SubscriptionMenuItem-label { - padding-left: 25px; - display: block; - white-space: normal; - - & strong { - display: block; - } -} -.SubscriptionMenuItem-description { - display: block; - color: @muted-color; - font-size: 12px; - margin-top: 3px; -} diff --git a/extensions/suspend/js/src/forum/components/SuspendUserModal.js b/extensions/suspend/js/src/forum/components/SuspendUserModal.js index faeb03bb16..c581c803ef 100644 --- a/extensions/suspend/js/src/forum/components/SuspendUserModal.js +++ b/extensions/suspend/js/src/forum/components/SuspendUserModal.js @@ -6,6 +6,8 @@ import withAttr from 'flarum/common/utils/withAttr'; import ItemList from 'flarum/common/utils/ItemList'; import { getPermanentSuspensionDate } from '../helpers/suspensionHelper'; +import Form from '@flarum/core/src/common/components/Form'; +import FieldSet from '@flarum/core/src/common/components/FieldSet'; export default class SuspendUserModal extends Modal { oninit(vnode) { @@ -40,18 +42,15 @@ export default class SuspendUserModal extends Modal { content() { return (
    -
    -
    - -
    {this.formItems().toArray()}
    -
    +
    + {this.formItems().toArray()} -
    +
    -
    +
    ); } @@ -109,20 +108,22 @@ export default class SuspendUserModal extends Modal { formItems() { const items = new ItemList(); - items.add('radioItems',
    {this.radioItems().toArray()}
    , 100); + items.add( + 'radioItems', +
    {this.radioItems().toArray()}
    , + 100 + ); items.add( 'reason',
    -