From a34cebd94b62209e3b0c39b4510cad56ead594ab Mon Sep 17 00:00:00 2001 From: Toby Zerner Date: Fri, 7 Aug 2015 08:51:03 +0930 Subject: [PATCH] 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 | 32 +++++++++++-------- .../js/admin/src/components/LoadingModal.js | 19 +++++++++++ framework/core/js/lib/components/Modal.js | 25 +++++++++++---- .../core/js/lib/components/ModalManager.js | 2 +- framework/core/less/admin/ExtensionsPage.less | 7 ++++ framework/core/less/lib/App.less | 1 + 6 files changed, 65 insertions(+), 21 deletions(-) create mode 100644 framework/core/js/admin/src/components/LoadingModal.js diff --git a/framework/core/js/admin/src/components/ExtensionsPage.js b/framework/core/js/admin/src/components/ExtensionsPage.js index 660ada63b..e23e1e95b 100644 --- a/framework/core/js/admin/src/components/ExtensionsPage.js +++ b/framework/core/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' })}
- + + {extension.icon ? icon(extension.icon.name) : ''} +

{extension.title}{' '} {extension.version} @@ -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) { - items.add('uninstall', Button.component({ - icon: 'trash-o', - children: 'Uninstall' - })); - } + // if (!enabled) { + // items.add('uninstall', Button.component({ + // icon: 'trash-o', + // children: 'Uninstall' + // })); + // } - items.add('separator2', Separator.component()); + // items.add('separator2', Separator.component()); - items.add('support', LinkButton.component({ - icon: 'support', - children: 'Support' - })); + // items.add('support', LinkButton.component({ + // icon: 'support', + // children: 'Support' + // })); return items; } diff --git a/framework/core/js/admin/src/components/LoadingModal.js b/framework/core/js/admin/src/components/LoadingModal.js new file mode 100644 index 000000000..8d0bf0bf6 --- /dev/null +++ b/framework/core/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 ''; + } +} diff --git a/framework/core/js/lib/components/Modal.js b/framework/core/js/lib/components/Modal.js index b04863535..38a42c280 100644 --- a/framework/core/js/lib/components/Modal.js +++ b/framework/core/js/lib/components/Modal.js @@ -28,13 +28,15 @@ export default class Modal extends Component { return (
-
- {Button.component({ - icon: 'times', - onclick: this.hide.bind(this), - className: 'Button Button--icon Button--link' - })} -
+ {this.isDismissible() ? ( +
+ {Button.component({ + icon: 'times', + onclick: this.hide.bind(this), + className: 'Button Button--icon Button--link' + })} +
+ ) : ''}
@@ -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. * diff --git a/framework/core/js/lib/components/ModalManager.js b/framework/core/js/lib/components/ModalManager.js index 81e3b78f5..e3fd72c7d 100644 --- a/framework/core/js/lib/components/ModalManager.js +++ b/framework/core/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(); } diff --git a/framework/core/less/admin/ExtensionsPage.less b/framework/core/less/admin/ExtensionsPage.less index 05a78fec3..da8caf68a 100644 --- a/framework/core/less/admin/ExtensionsPage.less +++ b/framework/core/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; diff --git a/framework/core/less/lib/App.less b/framework/core/less/lib/App.less index 3a69a1ca9..8061b71d2 100755 --- a/framework/core/less/lib/App.less +++ b/framework/core/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;