Commit Graph

24 Commits

Author SHA1 Message Date
Anders Kaseorg 35778fa100 overlays: Remove unused support for Bootstrap modals.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2022-07-26 17:48:31 -07:00
yogesh sirsat 3260353aeb dialog_widget: Add shared function for api requests from modals.
This function will replace `settings_ui.do_settings_change` for api
requests which confirms from modals to make loading indicator and
error handling easy and clean inside modals.

Also replacing some previous code blocks of `channel` with this function
in `settings_users.js` which was being used for confirmations modals.

This has the side effect of doing better in-modal error handling for
accessing the user info modal from the "Manage user" button in user
info popovers.

Additionally, we now show a loading indicator while waiting for the
server in these modals.

CZO: #frontend > Error handling inside modals.
2022-05-04 17:30:10 -07:00
Anders Kaseorg f84a2c08d5 js: Prefix jQuery object variable names with $.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2022-03-16 12:52:07 -07:00
Dinesh 57b8e43dbb dialog_widget: Mention post_render in optional parameters for launch(). 2022-03-07 12:44:36 -08:00
Ganesh Pawar 73533e578a modal: Add support for event handler on closing a modal.
Part of implementing #20373.
2022-02-08 16:50:46 -08:00
Ganesh Pawar 4ccaff6e32 modal: Hide, instead of empty, the dialog error element.
Consider a modal with an error element displayed. When a user clicks
the submit button, the current behaviour is to empty the element. This
empties the inner HTML of the error element, but the CSS makes it still
visible, just empty. This looks bad. To avoid this, we hide the element.
We use the `ui_report` module to display errors, which adds the `show`
class to the error element every time an error is to be displayed. This
makes sure that the error element isn't hidden when the user re-clicks
the submit button while the modal is still open.
2021-12-02 14:02:27 -08:00
Sahil Batra c20f5a9866 dialog_widget: Add a new optional parameter validate_input.
This commit extends dialog_widget class by adding a new
optional paramter validate_input which will be a function
to validate the inputs in the dialog and will be called
before showing the spinner and calling the on_click function.

Currently, the password change modal uses this paramter to
validate that the old and new password inputs must not be
empty. Since the spinner will not be initiated in the case
where form is invalid, we need not hide the spinner after
showing the error and thus we can simplify the code to use
ui_report.error to show the error messages of empty fields.
2021-11-29 13:28:52 -08:00
Ganesh Pawar 291aaf373f modal: Add support for modal event handlers. 2021-11-22 15:00:38 -08:00
Ganesh Pawar 8908ea99ec modal: Add support for linking the submit button to a form element. 2021-11-22 15:00:38 -08:00
Ganesh Pawar 14b07669cc dialog_widget: Add support for rendering a single footer button. 2021-10-26 18:20:17 -07:00
Ganesh Pawar c429c5d70e dialog_widget: Add support for having a custom id on the container element. 2021-10-26 18:20:17 -07:00
Ganesh Pawar 1e8bfa710e dialog_widget: Migrate modal to Micromodal.
Also removed the `danger_submit_button` config option
from the dialog_widget since it isn't needed in the new modals.
2021-10-26 18:20:17 -07:00
Ganesh Pawar 6a07a90499 dialog_widget: Remove the `fade` parameter.
A user wouldn't differentiate between a "normal" modal and a "settings"
modal. If one shows up instantly, one would expect all the others to do
the same. The difference between Bootstrap fade and non-fade is pretty
noticeable (300 ms for fading).

This is a prep commit for the Micromodal migration which will have 120ms
as the animation time which wouldn't feel slow.
2021-10-26 18:20:17 -07:00
Ganesh Pawar e6e601077f dialog_widget: Append dialog_widget to the body element.
We attach the DOM for the modal to the body element
to avoid style interference from other elements and having to choose
a separate parent element for every single dialog_widget.
2021-10-26 18:20:17 -07:00
Ganesh Pawar fe7a1c0722 dialog_widget: Extract out `close_modal()`. 2021-10-22 16:08:26 -07:00
Ganesh Pawar e1070fe3d0 dialog_widget: Pass the event object to the `on_click` function. 2021-10-22 16:08:25 -07:00
Ganesh Pawar 0811bda192 dialog_widget: Clear error element when clicked on the submit button. 2021-07-26 16:37:16 -07:00
sahil839 fb53556cef loading: Use img tag for loading indicator instead of object tag.
We use img tag for showing the loading spinner in message edit form
and dialog-widget submit button, instead of object tag because using
object tag gives the following error- "Refused to display
'https://chat.zulip.org/' in a frame because it set 'X-Frame-Options'
to 'deny'." in the browser console.

As mentioned by Anders in czo, this is probably because we’re loading
the SVG using an <object> tag as if it’s totally-not-an-IE3-ActiveX-
control.

We also need to add a new svg file similar to loader.svg with the
change that the retangles are filled with black color. This needs
to be done because we cannot get access to the svg document if we
use img tag and so we cannot change the color of rectangles using
jquery as we were doing before to show the spinner depending on
day/night mode. So, now we just set the src attribute of img tag
to the correct svg file depending on day/night mode.

Discussed in #issues > loading tail-spin.svg denied by X-Frame-Options.
2021-07-18 11:44:17 -07:00
Tim Abbott c5b455d5c2 dialog_widget: Simplify rendering logic.
This makes the templates a lot more readable.
2021-07-14 13:32:26 -07:00
Tim Abbott e0135e278d dialog_widget: Fix race focusing submit button.
Opening the modal before adding the on_shown handler makes it possible
that the modal could full appear before the handler runs.
2021-07-14 13:32:26 -07:00
Tim Abbott 6fb0d414b4 dialog_widget: Remove is_confirm_dialog variable.
Making the controls declarative makes the system more flexible for
future use cases.
2021-07-14 13:32:24 -07:00
sahil839 f6d8204d23 dialog_widget: Color of button should be according to use of modal.
We show red color for confirmation modals and green for other
modals with input fields.

As of this commit, only confirmation modals use dialog_widget but
some other modals with input fields will be migrated to use
dialog_widget.
2021-07-14 13:02:26 -07:00
sahil839 dff374a48b frontend: Remove html_submit_button paramter passed to dialog_widget.
We used html_submit_button to pass text to be present in the modal
submit button. There are only two possible options as of now -
"Confirm" and "Save changes" and the correct one can be determined
using is_confirm_modal parameter. So, we remove this paramter for
now and we can add it later if we have more type of modals using
this widget.
2021-07-14 13:02:25 -07:00
sahil839 ec3c5547ff frontend: Add dialog_widget module and refactor confirm_dialog.
This commit adds a new dialog_widget.js file containing most
of the code of confirm_dialog.js with some minor changes and
changes confirm_dialog to be a wrapper around dialog_widget.js.
We pass 'is_confim_dialog' as true in dialog_widget for a
confirm_dialog modal. This commit also renames confirm_dialog.hbs
and confirm_dialog_heading.hbs to dialog_widget.js,
dialog_widget.hbs and dialog_widget_heading.hbs respectively.
2021-07-14 12:58:00 -07:00