Improve extensions page

- Allow extensions to define an icon in their flarum.json
- Show a "please wait" modal when enabling/disabling an extension
- Styling tweaks

js/admin/src/components/ExtensionsPage.js

@@ -4,7 +4,9 @@ import Button from 'flarum/components/Button';
 import Dropdown from 'flarum/components/Dropdown';
 import Separator from 'flarum/components/Separator';
 import AddExtensionModal from 'flarum/components/AddExtensionModal';
+import LoadingModal from 'flarum/components/LoadingModal';
 import ItemList from 'flarum/utils/ItemList';
+import icon from 'flarum/helpers/icon';
 
 export default class ExtensionsPage extends Component {
   view() {
@@ -36,7 +38,9 @@ export default class ExtensionsPage extends Component {
                       menuClassName: 'Dropdown-menu--right'
                     })}
                     <div className="ExtensionListItem-content">
-                      <span className="ExtensionListItem-icon ExtensionIcon"/>
+                      <span className="ExtensionListItem-icon ExtensionIcon" style={extension.icon}>
+                        {extension.icon ? icon(extension.icon.name) : ''}
+                      </span>
                       <h4 className="ExtensionListItem-title">
                         {extension.title}{' '}
                         <small className="ExtensionListItem-version">{extension.version}</small>
@@ -65,7 +69,7 @@ export default class ExtensionsPage extends Component {
     }
 
     items.add('toggle', Button.component({
-      icon: enabled ? 'times' : 'check',
+      icon: 'power-off',
       children: enabled ? 'Disable' : 'Enable',
       onclick: () => {
         app.request({
@@ -73,22 +77,24 @@ export default class ExtensionsPage extends Component {
           method: 'PATCH',
           data: {enabled: !enabled}
         }).then(() => window.location.reload());
+
+        app.modal.show(new LoadingModal());
       }
     }));
 
-    if (!enabled) {
+    // if (!enabled) {
-      items.add('uninstall', Button.component({
+    //   items.add('uninstall', Button.component({
-        icon: 'trash-o',
+    //     icon: 'trash-o',
-        children: 'Uninstall'
+    //     children: 'Uninstall'
-      }));
+    //   }));
-    }
+    // }
 
-    items.add('separator2', Separator.component());
+    // items.add('separator2', Separator.component());
 
-    items.add('support', LinkButton.component({
+    // items.add('support', LinkButton.component({
-      icon: 'support',
+    //   icon: 'support',
-      children: 'Support'
+    //   children: 'Support'
-    }));
+    // }));
 
     return items;
   }

js/admin/src/components/LoadingModal.js

@@ -0,0 +1,19 @@
+import Modal from 'flarum/components/Modal';
+
+export default class LoadingModal extends Modal {
+  isDismissible() {
+    return false;
+  }
+
+  className() {
+    return 'LoadingModal Modal--small';
+  }
+
+  title() {
+    return 'Please Wait...';
+  }
+
+  content() {
+    return '';
+  }
+}

js/lib/components/Modal.js

@@ -28,6 +28,7 @@ export default class Modal extends Component {
     return (
       <div className={'Modal modal-dialog ' + this.className()}>
         <div className="Modal-content">
+          {this.isDismissible() ? (
             <div className="Modal-close App-backControl">
               {Button.component({
                 icon: 'times',
@@ -35,6 +36,7 @@ export default class Modal extends Component {
                 className: 'Button Button--icon Button--link'
               })}
             </div>
+          ) : ''}
 
           <form onsubmit={this.onsubmit.bind(this)}>
             <div className="Modal-header">
@@ -50,6 +52,15 @@ export default class Modal extends Component {
     );
   }
 
+  /**
+   * Determine whether or not the modal should be dismissible via an 'x' button.
+   *
+   * @return {Boolean}
+   */
+  isDismissible() {
+    return true;
+  }
+
   /**
    * Get the class name to apply to the modal.
    *

js/lib/components/ModalManager.js

@@ -50,7 +50,7 @@ export default class ModalManager extends Component {
 
     m.redraw(true);
 
-    this.$().modal('show');
+    this.$().modal({backdrop: this.component.isDismissible() ? true : 'static'}).modal('show');
     this.onready();
   }
 

less/admin/ExtensionsPage.less

@@ -22,6 +22,10 @@
 .ExtensionListItem.disabled .ExtensionListItem-content {
   opacity: 0.5;
   color: @muted-color;
+
+  .ExtensionListItem-icon {
+    opacity: 0.5;
+  }
 }
 .ExtensionListItem-controls {
   float: right;
@@ -41,6 +45,9 @@
 .ExtensionListItem-icon {
   float: left;
   margin-left: -42px;
+  text-align: center;
+  padding: 3px;
+  font-size: 14px;
 }
 .ExtensionListItem-title {
   font-size: 14px;

less/lib/App.less

@@ -3,6 +3,7 @@
   padding-top: @header-height;
   padding-bottom: 50px;
   overflow-x: hidden;
+  min-height: 100vh;
 
   @media @phone {
     padding-top: @header-height-phone;