Previously, when you clicked the confirmation button in a
dialog_widget, we'd display a loading spinner on top of an ugly grey
button background.
Remove the ugly grey background color, while making sure the loading
spinner inside the button looks good and doesn't resize the button.
Fixes: #22002
Previously, our modal system prevented opening a modal when one was
already open. It appears this was implemented to work around the fact
that we're using Micromodal selectors to determine if a modal is open
(and those don't update until after an animation frame).
We'd like to support opening the full user profile and manage user
modals while read receipts is open. While we could work around this in
that place, it feels like one needs a lot of documentation in order to
add a setTimeout in those code paths.
So we instead make open_modal support this, with a guard to prevent
infinite recursion in case of future bugs.
Note that dialog_widget was already closing modals before opening the
next one, so this is a behavior change only for our 3 modals that do
not use dialog_widget.
(I'm not sure why the `dialog_widget` modals did not already require a
delay, but likely there's some CSS difference).
We likely will want to redo this to instead use a better state
tracking system.
See https://chat.zulip.org/#narrow/stream/49-development-help/topic/close.20and.20open.20another.20modal.20immediately
for discussion.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Anders Kaseorg
aparna-bhatt
Tim Abbott
Julia Bichler
yogesh sirsat
Dinesh
Ganesh Pawar
Sahil Batra
sahil839