feat: add setting to only show icons on small screens

.editorconfig

@@ -15,5 +15,5 @@ indent_size = 2
 [*.{diff,md}]
 trim_trailing_whitespace = false
 
-[*.{js,php}]
+[*.php]
 indent_size = 4

extend.php

@@ -39,4 +39,9 @@
     (new Extend\ApiController(ShowForumController::class))
         ->addInclude(['links', 'links.parent'])
         ->prepareDataForSerialization(LoadForumLinksRelationship::class),
+
+    (new Extend\Settings())
+        ->registerLessConfigVar('fof-links-show-only-icons-on-mobile', 'fof-links.show_icons_only_on_mobile', function ($value) {
+            return $value ? 'true' : 'false';
+        }),
 ];

js/src/admin/components/EditLinkModal.js

@@ -208,23 +208,21 @@ export default class EditlinksModal extends Modal {
       isInternal: this.isInternal(),
       isNewtab: this.isNewtab(),
       visibility: this.visibility(),
-    }
+    };
   }
 
   onsubmit(e) {
     e.preventDefault();
 
     this.loading = true;
 
-    this.link
-      .save(this.submitData())
-      .then(
-        () => this.hide(),
-        (response) => {
-          this.loading = false;
-          this.handleErrors(response);
-        }
-      );
+    this.link.save(this.submitData()).then(
+      () => this.hide(),
+      (response) => {
+        this.loading = false;
+        this.handleErrors(response);
+      }
+    );
   }
 
   delete() {

js/src/admin/components/LinksPage.js

@@ -40,9 +40,24 @@ export default class LinksPage extends ExtensionPage {
     this.forcedRefreshKey = 0;
   }
 
-  content() {
+  sections() {
+    const items = super.sections();
+
+    items.setPriority('content', 100);
+
+    items.add('links', this.links(), 80);
+
+    return items;
+  }
+
+  links() {
     return (
       <div className="LinksPage">
+        <div className="ExtensionPage-permissions-header">
+          <div className="container">
+            <h2 className="ExtensionTitle">{app.translator.trans('fof-links.admin.links.links')}</h2>
+          </div>
+        </div>
         <div className="container">
           {Button.component(
             {

js/src/admin/index.js

@@ -10,5 +10,12 @@ export * from '../common/models';
 app.initializers.add('fof-links', () => {
   app.store.models.links = Link;
 
-  app.extensionData.for('fof-links').registerPage(LinksPage);
+  app.extensionData
+    .for('fof-links')
+    .registerPage(LinksPage)
+    .registerSetting({
+      setting: 'fof-links.show_icons_only_on_mobile',
+      label: app.translator.trans('fof-links.admin.settings.show_icons_only_on_mobile'),
+      type: 'boolean',
+    });
 });

js/src/forum/components/LinkItem.tsx

@@ -55,7 +55,8 @@ export default class LinkItem extends LinkButton {
           }}
           data-toggle={this.attrs.isDropdownButton ? 'dropdown' : undefined}
         >
-          {this.icon} {link.title()}
+          {this.icon}
+          <span className="LinksButton-title">{link.title()}</span>
         </LinkLabelNode>
         {this.attrs.inDropdown && <Separator />}
       </>
@@ -75,7 +76,8 @@ export default class LinkItem extends LinkButton {
 
     return (
       <Link {...linkAttrs}>
-        {this.icon} {link.title()}
+        {this.icon}
+        <span className="LinksButton-title">{link.title()}</span>
       </Link>
     );
   }
@@ -95,7 +97,7 @@ export default class LinkItem extends LinkButton {
     const iconClass = link.icon();
 
     if (iconClass) {
-      return icon(iconClass, { className: 'Button-icon' });
+      return icon(iconClass, { className: 'Button-icon LinksButton-icon' });
     }
 
     return null;

less/forum.less

@@ -68,6 +68,20 @@
     width: auto;
     margin-right: 10px;
   }
+
+  @media (max-width: 1100px) {
+    &-icon {
+      & when (@fof-links-show-only-icons-on-mobile = true) {
+        margin-right: 0;
+      }
+    }
+
+    &-title {
+      & when (@fof-links-show-only-icons-on-mobile = true) {
+        display: none;
+      }
+    }
+  }
 }
 
 @media @phone {

locale/en.yml

@@ -32,6 +32,9 @@ fof-links:
       create_button: => fof-links.ref.create_link
       links: => fof-links.ref.links
 
+    settings:
+      show_icons_only_on_mobile: Show icons only on mobile
+
   # Strings in this namespace are referenced by two or more unique keys.
   ref:
     create_link: Create Link