From b40567559dcda1179415b3a9a8b8023c9fc5a2cf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20Sevilla=20Mart=C3=ADn?= Date: Fri, 3 Feb 2017 14:56:28 -0500 Subject: [PATCH] Turn "Rename Discussion" dialog into a modal, closes #616 (#1083) * Changed "Rename Discussion" prompt into a modal. * Added DiscussionRenameModal component (Modal) * Changed DiscussionControls.renameAction to use the modal (I may have removed the ability to return a promise) * Added punycode.js back to js/forum dist * Fixed some formatting, removed some unnecessary variables --- framework/core/js/forum/dist/app.js | 140 +++++++++++++++--- .../src/components/DiscussionRenameModal.js | 67 +++++++++ .../js/forum/src/utils/DiscussionControls.js | 19 +-- 3 files changed, 188 insertions(+), 38 deletions(-) create mode 100644 framework/core/js/forum/src/components/DiscussionRenameModal.js diff --git a/framework/core/js/forum/dist/app.js b/framework/core/js/forum/dist/app.js index 5d1184ef4..b74068555 100644 --- a/framework/core/js/forum/dist/app.js +++ b/framework/core/js/forum/dist/app.js @@ -22162,6 +22162,108 @@ System.register('flarum/components/DiscussionRenamedPost', ['flarum/components/E });; 'use strict'; +System.register('flarum/components/DiscussionRenameModal', ['flarum/components/Modal', 'flarum/components/Button'], function (_export, _context) { + "use strict"; + + var Modal, Button, DiscussionRenameModal; + return { + setters: [function (_flarumComponentsModal) { + Modal = _flarumComponentsModal.default; + }, function (_flarumComponentsButton) { + Button = _flarumComponentsButton.default; + }], + execute: function () { + DiscussionRenameModal = function (_Modal) { + babelHelpers.inherits(DiscussionRenameModal, _Modal); + + function DiscussionRenameModal() { + babelHelpers.classCallCheck(this, DiscussionRenameModal); + return babelHelpers.possibleConstructorReturn(this, (DiscussionRenameModal.__proto__ || Object.getPrototypeOf(DiscussionRenameModal)).apply(this, arguments)); + } + + babelHelpers.createClass(DiscussionRenameModal, [{ + key: 'init', + value: function init() { + babelHelpers.get(DiscussionRenameModal.prototype.__proto__ || Object.getPrototypeOf(DiscussionRenameModal.prototype), 'init', this).call(this); + + this.discussion = this.props.discussion; + this.currentTitle = this.props.currentTitle; + this.newTitle = m.prop(this.currentTitle); + } + }, { + key: 'className', + value: function className() { + return 'DiscussionRenameModal Modal--small'; + } + }, { + key: 'title', + value: function title() { + return app.translator.trans('core.forum.discussion_controls.rename_modal.title'); + } + }, { + key: 'content', + value: function content() { + return m( + 'div', + { className: 'Modal-body' }, + m( + 'div', + { className: 'Form' }, + m( + 'div', + { className: 'Form-group' }, + m('input', { className: 'FormControl title', placeholder: this.currentTitle, bidi: this.newTitle }) + ), + m( + 'div', + { className: 'Form-group' }, + Button.component({ + className: 'Button Button--primary', + type: 'submit', + loading: this.loading, + children: app.translator.trans('core.forum.discussion_controls.rename_modal.submit_button') + }) + ) + ) + ); + } + }, { + key: 'onsubmit', + value: function onsubmit(e) { + var _this2 = this; + + e.preventDefault(); + + this.loading = true; + + var title = this.newTitle; + var currentTitle = this.currentTitle; + + // If the title is different to what it was before, then save it. After the + // save has completed, update the post stream as there will be a new post + // indicating that the discussion was renamed. + if (title && title !== currentTitle) { + return this.discussion.save({ title: title }).then(function () { + if (app.viewingDiscussion(_this2.discussion)) { + app.current.stream.update(); + } + m.redraw(); + _this2.hide(); + }); + } else { + this.hide(); + } + } + }]); + return DiscussionRenameModal; + }(Modal); + + _export('default', DiscussionRenameModal); + } + }; +});; +'use strict'; + System.register('flarum/components/DiscussionsSearchSource', ['flarum/helpers/highlight', 'flarum/components/LinkButton'], function (_export, _context) { "use strict"; @@ -22983,12 +23085,6 @@ System.register('flarum/components/ForgotPasswordModal', ['flarum/components/Mod onchange: m.withAttr('value', this.email), disabled: this.loading }) ), - m( - 'label', - { className: 'checkbox' }, - m('input', { name: 'remember', type: 'checkbox', bidi: this.remember, disabled: this.loading }), - app.translator.trans('core.forum.log_in.remember_me_text') - ), m( 'div', { className: 'Form-group' }, @@ -23936,6 +24032,12 @@ System.register('flarum/components/LogInModal', ['flarum/components/Modal', 'fla bidi: this.password, disabled: this.loading }) ), + m( + 'label', + { className: 'checkbox' }, + m('input', { name: 'remember', type: 'checkbox', bidi: this.remember, disabled: this.loading }), + app.translator.trans('core.forum.log_in.remember_me_label') + ), m( 'div', { className: 'Form-group' }, @@ -31140,10 +31242,10 @@ System.register('flarum/utils/computed', [], function (_export, _context) { });; 'use strict'; -System.register('flarum/utils/DiscussionControls', ['flarum/components/DiscussionPage', 'flarum/components/ReplyComposer', 'flarum/components/LogInModal', 'flarum/components/Button', 'flarum/components/Separator', 'flarum/utils/ItemList', 'flarum/utils/extractText'], function (_export, _context) { +System.register('flarum/utils/DiscussionControls', ['flarum/components/DiscussionPage', 'flarum/components/ReplyComposer', 'flarum/components/LogInModal', 'flarum/components/Button', 'flarum/components/Separator', 'flarum/components/DiscussionRenameModal', 'flarum/utils/ItemList', 'flarum/utils/extractText'], function (_export, _context) { "use strict"; - var DiscussionPage, ReplyComposer, LogInModal, Button, Separator, ItemList, extractText; + var DiscussionPage, ReplyComposer, LogInModal, Button, Separator, DiscussionRenameModal, ItemList, extractText; return { setters: [function (_flarumComponentsDiscussionPage) { DiscussionPage = _flarumComponentsDiscussionPage.default; @@ -31155,6 +31257,8 @@ System.register('flarum/utils/DiscussionControls', ['flarum/components/Discussio Button = _flarumComponentsButton.default; }, function (_flarumComponentsSeparator) { Separator = _flarumComponentsSeparator.default; + }, function (_flarumComponentsDiscussionRenameModal) { + DiscussionRenameModal = _flarumComponentsDiscussionRenameModal.default; }, function (_flarumUtilsItemList) { ItemList = _flarumUtilsItemList.default; }, function (_flarumUtilsExtractText) { @@ -31303,22 +31407,10 @@ System.register('flarum/utils/DiscussionControls', ['flarum/components/Discussio } }, renameAction: function renameAction() { - var _this3 = this; - - var currentTitle = this.title(); - var title = prompt(extractText(app.translator.trans('core.forum.discussion_controls.rename_text')), currentTitle); - - // If the title is different to what it was before, then save it. After the - // save has completed, update the post stream as there will be a new post - // indicating that the discussion was renamed. - if (title && title !== currentTitle) { - return this.save({ title: title }).then(function () { - if (app.viewingDiscussion(_this3)) { - app.current.stream.update(); - } - m.redraw(); - }); - } + return app.modal.show(new DiscussionRenameModal({ + currentTitle: this.title(), + discussion: this + })); } }); } diff --git a/framework/core/js/forum/src/components/DiscussionRenameModal.js b/framework/core/js/forum/src/components/DiscussionRenameModal.js new file mode 100644 index 000000000..4cbd4d0b7 --- /dev/null +++ b/framework/core/js/forum/src/components/DiscussionRenameModal.js @@ -0,0 +1,67 @@ +import Modal from 'flarum/components/Modal'; +import Button from 'flarum/components/Button'; + +/** + * The 'DiscussionRenameModal' displays a modal dialog with an input to rename a discussion + */ +export default class DiscussionRenameModal extends Modal { + init() { + super.init(); + + this.discussion = this.props.discussion; + this.currentTitle = this.props.currentTitle; + this.newTitle = m.prop(this.currentTitle); + } + + className() { + return 'DiscussionRenameModal Modal--small'; + } + + title() { + return app.translator.trans('core.forum.discussion_controls.rename_modal.title'); + } + + content() { + return ( +
+
+
+ +
+
+ {Button.component({ + className: 'Button Button--primary', + type: 'submit', + loading: this.loading, + children: app.translator.trans('core.forum.discussion_controls.rename_modal.submit_button') + })} +
+
+
+ ) + } + + onsubmit(e) { + e.preventDefault(); + + this.loading = true; + + const title = this.newTitle; + const currentTitle = this.currentTitle; + + // If the title is different to what it was before, then save it. After the + // save has completed, update the post stream as there will be a new post + // indicating that the discussion was renamed. + if (title && title !== currentTitle) { + return this.discussion.save({title}).then(() => { + if (app.viewingDiscussion(this.discussion)) { + app.current.stream.update(); + } + m.redraw(); + this.hide(); + }); + } else { + this.hide(); + } + } +} diff --git a/framework/core/js/forum/src/utils/DiscussionControls.js b/framework/core/js/forum/src/utils/DiscussionControls.js index 951f800e8..8757acce7 100644 --- a/framework/core/js/forum/src/utils/DiscussionControls.js +++ b/framework/core/js/forum/src/utils/DiscussionControls.js @@ -3,6 +3,7 @@ import ReplyComposer from 'flarum/components/ReplyComposer'; import LogInModal from 'flarum/components/LogInModal'; import Button from 'flarum/components/Button'; import Separator from 'flarum/components/Separator'; +import DiscussionRenameModal from 'flarum/components/DiscussionRenameModal'; import ItemList from 'flarum/utils/ItemList'; import extractText from 'flarum/utils/extractText'; @@ -227,19 +228,9 @@ export default { * @return {Promise} */ renameAction() { - const currentTitle = this.title(); - const title = prompt(extractText(app.translator.trans('core.forum.discussion_controls.rename_text')), currentTitle); - - // If the title is different to what it was before, then save it. After the - // save has completed, update the post stream as there will be a new post - // indicating that the discussion was renamed. - if (title && title !== currentTitle) { - return this.save({title}).then(() => { - if (app.viewingDiscussion(this)) { - app.current.stream.update(); - } - m.redraw(); - }); - } + return app.modal.show(new DiscussionRenameModal({ + currentTitle: this.title(), + discussion: this + })); } };