Expand reason descriptions and add configurable link to community guidelines

extensions/flags/js/admin/src/components/FlagsSettingsModal.js

@@ -0,0 +1,20 @@
+import SettingsModal from 'flarum/components/SettingsModal';
+
+export default class FlagsSettingsModal extends SettingsModal {
+  className() {
+    return 'FlagsSettingsModal Modal--small';
+  }
+
+  title() {
+    return app.translator.trans('flarum-flags.admin.settings.title');
+  }
+
+  form() {
+    return [
+      <div className="Form-group">
+        <label>{app.translator.trans('flarum-flags.admin.settings.guidelines_url_label')}</label>
+        <input className="FormControl" bidi={this.setting('flarum-flags.guidelines_url')}/>
+      </div>
+    ];
+  }
+}

extensions/flags/js/admin/src/main.js

@@ -2,7 +2,11 @@ import { extend } from 'flarum/extend';
 import app from 'flarum/app';
 import PermissionGrid from 'flarum/components/PermissionGrid';
 
+import FlagsSettingsModal from 'flarum/flags/components/FlagsSettingsModal';
+
 app.initializers.add('flarum-flags', () => {
+  app.extensionSettings['flarum-flags'] = () => app.modal.show(new FlagsSettingsModal());
+
   extend(PermissionGrid.prototype, 'moderateItems', items => {
     items.add('viewFlags', {
       icon: 'flag',

extensions/flags/js/forum/src/components/FlagPostModal.js

@@ -18,30 +18,36 @@ export default class FlagPostModal extends Modal {
   }
 
   content() {
+    const guidelinesUrl = app.forum.attribute('guidelinesUrl');
+
     return (
       <div className="Modal-body">
-        <div className="Form">
+        <div className="Form Form--centered">
           <div className="Form-group">
-            <label>{app.translator.trans('flarum-flags.forum.flag_post.reason_heading')}</label>
             <div>
               <label className="checkbox">
                 <input type="radio" name="reason" checked={this.reason() === 'off_topic'} value="off_topic" onclick={m.withAttr('value', this.reason)}/>
-                {app.translator.trans('flarum-flags.forum.flag_post.reason_off_topic_label')}
+                <strong>{app.translator.trans('flarum-flags.forum.flag_post.reason_off_topic_label')}</strong>
+                {app.translator.trans('flarum-flags.forum.flag_post.reason_off_topic_text')}
               </label>
 
               <label className="checkbox">
                 <input type="radio" name="reason" checked={this.reason() === 'inappropriate'} value="inappropriate" onclick={m.withAttr('value', this.reason)}/>
-                {app.translator.trans('flarum-flags.forum.flag_post.reason_inappropriate_label')}
+                <strong>{app.translator.trans('flarum-flags.forum.flag_post.reason_inappropriate_label')}</strong>
+                {app.translator.trans('flarum-flags.forum.flag_post.reason_inappropriate_text', {
+                  a: guidelinesUrl ? <a href={guidelinesUrl} target="_blank"/> : undefined
+                })}
               </label>
 
               <label className="checkbox">
                 <input type="radio" name="reason" checked={this.reason() === 'spam'} value="spam" onclick={m.withAttr('value', this.reason)}/>
-                {app.translator.trans('flarum-flags.forum.flag_post.reason_spam_label')}
+                <strong>{app.translator.trans('flarum-flags.forum.flag_post.reason_spam_label')}</strong>
+                {app.translator.trans('flarum-flags.forum.flag_post.reason_spam_text')}
               </label>
 
               <label className="checkbox">
                 <input type="radio" name="reason" checked={this.reason() === 'other'} value="other" onclick={m.withAttr('value', this.reason)}/>
-                {app.translator.trans('flarum-flags.forum.flag_post.reason_other_label')}
+                <strong>{app.translator.trans('flarum-flags.forum.flag_post.reason_other_label')}</strong>
                 {this.reason() === 'other' ? (
                   <textarea className="FormControl" value={this.reasonDetail()} oninput={m.withAttr('value', this.reasonDetail)}></textarea>
                 ) : ''}
@@ -51,7 +57,7 @@ export default class FlagPostModal extends Modal {
 
           <div className="Form-group">
             <Button
-              className="Button Button--primary"
+              className="Button Button--primary Button--block"
               type="submit"
               loading={this.loading}
               disabled={!this.reason()}>

extensions/flags/less/forum/extension.less

@@ -56,3 +56,17 @@
     display: none;
   }
 }
+
+.FlagPostModal {
+  .Form-group {
+    margin-bottom: 20px;
+  }
+  .checkbox {
+    margin-bottom: 12px;
+
+    strong {
+      display: block;
+      color: @text-color;
+    }
+  }
+}

extensions/flags/src/Listener/AddFlagsApi.php

@@ -19,10 +19,24 @@ use Flarum\Event\ConfigureModelDates;
 use Flarum\Event\PrepareApiAttributes;
 use Flarum\Flags\Api\Controller;
 use Flarum\Flags\Flag;
+use Flarum\Settings\SettingsRepositoryInterface;
 use Illuminate\Contracts\Events\Dispatcher;
 
 class AddFlagsApi
 {
+    /**
+     * @var SettingsRepositoryInterface
+     */
+    protected $settings;
+
+    /**
+     * @param SettingsRepositoryInterface $settings
+     */
+    public function __construct(SettingsRepositoryInterface $settings)
+    {
+        $this->settings = $settings;
+    }
+
     /**
      * @param Dispatcher $events
      */
@@ -54,6 +68,8 @@ class AddFlagsApi
             if ($event->attributes['canViewFlags']) {
                 $event->attributes['flagsCount'] = (int) $this->getFlagsCount($event->actor);
             }
+
+            $event->attributes['guidelinesUrl'] = $this->settings->get('flarum-flags.guidelines_url');
         }
 
         if ($event->isSerializer(CurrentUserSerializer::class)) {