Ds/small fixes improvements (#104)

* "Add 'searchUsers' permission check & hide 'search all users' if not permitted Closes #103, #69 * Update JS deps * Improve styling of search & filtering components on directory page * Add option to link group mentions to user directory page Closes #101 * Set title in UserDirectoryPage * Apply fixes from StyleCI --------- Co-authored-by: StyleCI Bot <[email protected]>
FriendsOfFlarum · Sep 27, 2023 · c2728e5 · c2728e5
1 parent 086a12b
commit c2728e5
Show file tree

Hide file tree

Showing 13 changed files with 704 additions and 749 deletions.
diff --git a/extend.php b/extend.php
@@ -13,6 +13,7 @@
 
 use Flarum\Api\Serializer\ForumSerializer;
 use Flarum\Extend;
+use Flarum\User\User;
 
 return [
  (new Extend\Frontend('admin'))
@@ -28,6 +29,9 @@
  (new Extend\ApiSerializer(ForumSerializer::class))
  ->attributes(PermissionBasedForumSettings::class),
 
+ (new Extend\Policy())
+ ->modelPolicy(User::class, Access\UserPolicy::class),
+
  (new Extend\View())
  ->namespace('fof.user-directory', __DIR__.'/resources/views'),
 ];
diff --git a/js/package-lock.json b/js/package-lock.json
diff --git a/js/package.json b/js/package.json
@@ -3,19 +3,19 @@
  "name": "@fof/user-directory",
  "prettier": "@flarum/prettier-config",
  "dependencies": {
- "flarum-webpack-config": "^2.0.0",
- "flarum-tsconfig": "^1.0.2",
- "@flarum/prettier-config": "^1.0.0",
- "webpack": "^5.76.0",
- "webpack-cli": "^4.9.2"
+  "@flarum/prettier-config": "^1.0.0",
+  "flarum-tsconfig": "^1.0.2",
+  "flarum-webpack-config": "^2.0.2",
+  "webpack": "^5.88.2",
+  "webpack-cli": "^5.1.4"
  },
  "devDependencies": {
- "prettier": "^2.6.2"
+  "prettier": "^3.0.2"
  },
  "scripts": {
- "dev": "webpack --mode development --watch",
- "build": "webpack --mode production",
- "format": "prettier --write src",
- "format-check": "prettier --check src"
+  "dev": "webpack --mode development --watch",
+  "build": "webpack --mode production",
+  "format": "prettier --write src",
+  "format-check": "prettier --check src"
  }
 }
diff --git a/js/src/admin/index.js b/js/src/admin/index.js
@@ -29,6 +29,11 @@ app.initializers.add('fof-user-directory', (app) => {
  label: app.translator.trans('fof-user-directory.admin.settings.disable-global-search-source'),
  type: 'boolean',
  })
+ .registerSetting({
+ setting: 'fof-user-directory.link-group-mentions',
+ label: app.translator.trans('fof-user-directory.admin.settings.link-group-mentions'),
+ type: 'boolean',
+ })
  .registerSetting({
  setting: 'fof-user-directory.default-sort',
  label: app.translator.trans('fof-user-directory.admin.settings.default-sort'),

diff --git a/js/src/forum/components/SearchField.js b/js/src/forum/components/SearchField.js
@@ -70,7 +70,7 @@ export default class SearchField extends Component {
 
  return (
  <div className="Form-group Usersearchbox">
- <div className={`UserDirectorySearchInput FormControl ${this.focused ? 'focus' : ''}`}>
+ <label className={`UserDirectorySearchInput FormControl ${this.focused ? 'focus' : ''}`}>
  <span className="UserDirectorySearchInput-selected">
  {this.appliedFilters.map((recipient, index) => (
  <span
@@ -120,7 +120,7 @@ export default class SearchField extends Component {
  ))}
  </ul>
  )}
- </div>
+ </label>
  </div>
  );
  }

diff --git a/js/src/forum/components/UserDirectoryPage.js b/js/src/forum/components/UserDirectoryPage.js
@@ -8,6 +8,7 @@ import Button from 'flarum/common/components/Button';
 import LinkButton from 'flarum/common/components/LinkButton';
 import SelectDropdown from 'flarum/common/components/SelectDropdown';
 import Dropdown from 'flarum/common/components/Dropdown';
+import extractText from 'flarum/common/utils/extractText';
 import UserDirectoryList from './UserDirectoryList';
 import UserDirectoryState from '../states/UserDirectoryState';
 import CheckableButton from './CheckableButton';
@@ -48,6 +49,12 @@ export default class UserDirectoryPage extends Page {
  app.history.push('users', app.translator.trans('fof-user-directory.forum.header.back_to_user_directory_tooltip'));
  }
 
+ oncreate(vnode) {
+ super.oncreate(vnode);
+
+ app.setTitle(extractText(app.translator.trans('fof-user-directory.forum.page.nav')));
+ }
+
  view() {
  return (
  <div className="IndexPage">

diff --git a/js/src/forum/index.js b/js/src/forum/index.js
@@ -2,7 +2,8 @@ import { extend } from 'flarum/common/extend';
 import app from 'flarum/forum/app';
 import UsersSearchSource from 'flarum/common/components/UsersSearchSource';
 import LinkButton from 'flarum/common/components/LinkButton';
-import IndexPage from 'flarum/common/components/IndexPage';
+import IndexPage from 'flarum/forum/components/IndexPage';
+import CommentPost from 'flarum/forum/components/CommentPost';
 import UserDirectoryPage from './components/UserDirectoryPage';
 import UserDirectoryList from './components/UserDirectoryList';
 import UserDirectoryListItem from './components/UserDirectoryListItem';
@@ -14,6 +15,28 @@ import Text from './models/Text';
 // Allow other extensions to extend the page
 export { UserDirectoryPage, UserDirectoryList, UserDirectoryListItem, UserDirectoryState, SortMap, CheckableButton };
 
+export const linkGroupMentions = function () {
+ if (app.forum.attribute('canSeeUserDirectoryLink') && app.forum.attribute('userDirectoryLinkGroupMentions')) {
+ this.$('.GroupMention').each(function () {
+ if ($(this).hasClass('GroupMention--linked')) return;
+
+ const name = $(this).find('.GroupMention-name').text();
+ const group = app.store.getBy('groups', 'namePlural', name.slice(1));
+
+ if (group) {
+ const link = $(`<a class="GroupMention-link" href="${app.route('fof_user_directory', { q: `group:${group.id()}` })}"></a>`);
+
+ link.on('click', function (e) {
+ m.route.set(this.getAttribute('href'));
+ e.preventDefault();
+ });
+
+ $(this).addClass('GroupMention--linked').wrap(link);
+ }
+ });
+ }
+};
+
 app.initializers.add('fof-user-directory', (app) => {
  app.routes.fof_user_directory = {
  path: '/users',
@@ -23,7 +46,7 @@ app.initializers.add('fof-user-directory', (app) => {
  app.store.models['fof-user-directory-text'] = Text;
 
  extend(UsersSearchSource.prototype, 'view', function (view, query) {
- if (!view || app.forum.attribute('userDirectoryDisableGlobalSearchSource')) {
+ if (!view || !app.forum.attribute('canSeeUserDirectoryLink') || app.forum.attribute('userDirectoryDisableGlobalSearchSource')) {
  return;
  }
 
@@ -46,7 +69,7 @@ app.initializers.add('fof-user-directory', (app) => {
  });
 
  extend(IndexPage.prototype, 'navItems', (items) => {
- if (app.forum.attribute('canSeeUserDirectoryLink')) {
+ if (app.forum.attribute('canSeeUserDirectoryLink') && app.forum.attribute('canSearchUsers')) {
  items.add(
  'fof-user-directory',
  LinkButton.component(
@@ -60,6 +83,9 @@ app.initializers.add('fof-user-directory', (app) => {
  );
  }
  });
+
+ extend(CommentPost.prototype, 'oncreate', linkGroupMentions);
+ extend(CommentPost.prototype, 'onupdate', linkGroupMentions);
 });
 
 export * from './components';

diff --git a/resources/less/components/SearchFiled.less b/resources/less/components/SearchFiled.less
@@ -2,18 +2,27 @@
 .UserDirectorySearchInput {
  padding-top: 0;
  padding-bottom: 0;
+ margin-bottom: 0 !important;
  height: auto;
+ min-height: 36px; // Same as .FormControl
  position: relative;
- margin-left: 15px; // Space with sort dropdown
+
+ display: grid !important;
+ grid-template-columns: max-content 1fr;
+ column-gap: 10px;
 
  @media @phone {
  margin-left: 0;
  }
 
  // Same background as .focus to give it better visibility
- background-color: @body-bg;
- color: @text-color;
- border-color: @control-bg;
+ background-color: var(--body-bg);
+ color: var(--text-color);
+ border-color: var(--control-bg);
+
+ &:focus-within {
+ border-color: var(--primary-color);
+ }
 
  input {
  display: inline;
@@ -41,17 +50,17 @@
  }
 }
 
-.UserDirectorySearchInput-filter {
- cursor: not-allowed;
-}
-
 .UserDirectorySearchInput-selected {
- .UserDirectorySearchInput-filter {
- margin-right: 5px;
+ display: flex;
+ align-items: center;
+ column-gap: 5px;
+
+ &:empty {
+ display: none;
+ }
 
- &:last-child {
- margin-right: 10px;
- }
+ .UserDirectorySearchInput-filter {
+ cursor: not-allowed;
  }
 }
 
@@ -60,13 +69,13 @@
  font-weight: 600;
  display: inline-block;
  padding: 0.1em 0.5em;
- border-radius: @border-radius;
- background: @control-bg;
- color: @control-color;
+ border-radius: var(--border-radius);
+ background: var(--control-bg);
+ color: var(--control-color);
  text-transform: none;
 
  &.colored {
- color: @body-bg !important;
+ color: var(--body-bg) !important;
  }
 }
 

diff --git a/resources/less/components/toolbar.less b/resources/less/components/toolbar.less
@@ -1,58 +1,64 @@
-.User--directory .IndexPage-toolbar {
- .IndexPage-toolbar-view > li {
- vertical-align: middle;
- }
- @media @phone {
+.User--directory {
+ .IndexPage-toolbar {
  display: flex;
- flex-direction: column;
+ row-gap: 10px;
 
- .IndexPage-toolbar-view,
- .IndexPage-toolbar-action {
- display: flex;
- flex-wrap: wrap;
- }
  .IndexPage-toolbar-view {
- flex-wrap: wrap-reverse;
- margin-bottom: 5px;
+ display: flex;
+ column-gap: 10px;
+ row-gap: 5px;
+ flex-grow: 1;
 
- & > li {
- margin-right: 0;
+ > li {
+ vertical-align: middle;
+ width: fit-content;
  }
  }
 
- .IndexPage-toolbar-action {
- & > li {
- margin-left: 0;
+ @media @phone {
+ flex-direction: column;
+
+ .item-search {
+ flex: 0 1 100%;
+ }
+
+ .IndexPage-toolbar-view,
+ .IndexPage-toolbar-action {
+ display: flex;
+ flex-wrap: wrap;
  }
- li.item-refresh {
- margin-left: auto;
+ .IndexPage-toolbar-view {
+ flex-wrap: wrap-reverse;
+ justify-content: space-between;
+
+ & > li {
+ margin-right: 0;
+ }
+ }
+
+ .IndexPage-toolbar-action {
+ flex-shrink: 1;
+ float: none;
+
+ & > li {
+ margin-left: 0;
+ }
+ li.item-refresh {
+ margin-left: auto;
+ }
  }
  }
- }
- @media screen and (max-width: 370px) {
- .IndexPage-toolbar-view {
- & > li {
- width: 100%;
+  @media screen and (max-width: 370px) {
+  .IndexPage-toolbar-view {
+  & > li {
+  width: 100%;
+ }
  }
  }
  }
 }
 
 .item-filterGroups {
- margin-left: 15px;
-
- @media screen and (max-width: 370px) {
- margin-bottom: 5px;
- }
-
- @media screen and (max-width: 320px) {
- margin-left: 0;
- }
-
- @media @phone {
- margin-left: auto;
- }
-
  .ButtonGroup {
  button {
  @media @phone {
@@ -73,14 +79,6 @@
  }
 }
 
-.item-search {
- @media @phone {
- margin-top: 5px;
- width: 100%;
- margin-bottom: 5px;
- }
-}
-
 @media @tablet-up {
  .IndexPage-toolbar-action {
  .item-clarkwinkelmann-mailing {

diff --git a/resources/locale/en.yml b/resources/locale/en.yml
@@ -28,6 +28,7 @@ fof-user-directory:
  default-sort: Default sort
  use-small-cards: Use small user cards
  disable-global-search-source: Do not add User Directory to the Flarum global search field
+ link-group-mentions: Link group mentions in posts to the User Directory
 
  lib:
  sort:

diff --git a/src/Access/UserPolicy.php b/src/Access/UserPolicy.php
@@ -0,0 +1,23 @@
+<?php
+
+/*
+ * This file is part of fof/user-directory.
+ *
+ * Copyright (c) FriendsOfFlarum.
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+namespace FoF\UserDirectory\Access;
+
+use Flarum\User\Access\AbstractPolicy;
+use Flarum\User\User;
+
+class UserPolicy extends AbstractPolicy
+{
+ public function seeUserList(User $actor, User $user)
+ {
+ return $actor->hasPermission('fof.user-directory.view') && $actor->hasPermission('searchUsers');
+ }
+}