Commit Graph

44 Commits

Author SHA1 Message Date
Parth e3ddd662ab message_editing: Fix topic edit propagate option cut-off.
In the topic changing UI, the 'Change later messages to this topic'
and other options in the drop down were cut off when selected in some
languages like Russian.

Make the selection box width adjust appropriately according to the
length of the text, and also place it on its own line unconditionally.
users.

With tweaks by tabbott to use the same approach we already use in the
"Move topic" modal to have the bottom margin for the color block match
that of the dropdown_list_widget itself, of having them share CSS.

Fixes #19739.
2022-02-09 14:06:49 -08:00
Steve Howell fdd63546b2 linters: Rewrite check-templates.
I rewrote most of tools/lib/pretty-printer.py, which
was fairly easy due to being able to crib some
important details from the previous implementation.

The main motivation for the rewrite was that we weren't
handling else/elif blocks correctly, and it was difficult
to modify the previous code. The else/elif shortcomings
were somewhat historical in nature--the original parser
didn't recognize them (since they weren't in any Zulip
templates at the time), and then the pretty printer was
mostly able to hack around that due to the "nudge"
strategy. Eventually the nudge strategy became too
brittle.

The "nudge" strategy was that we would mostly trust
the existing templates, and we would just nudge over
some lines in cases of obviously faulty indentation.

Now we are bit more opinionated and rigorous, and
we basically set the indentation explicitly for any
line that is not in a code/script block. This leads
to this diff touching several templates for mostly
minor fix-ups.

We aren't completely opinionated, as we respect the
author's line wrapping decisions in many cases, and
we also allow authors not to indent blocks within
the template language's block constructs.
2021-11-23 15:55:54 -08:00
anurastogiji 5de556cbc8 message_edit: Expand breadcrumb checkbox spacing in topic edit UI.
For background, the .topic_move_breadcrumb_messages and
.message_edit_breadcrumb_message classes is applied to these checkboxes.

We add margin-top of 10px to the second checkbox to space them
appropriately. Additionally, we can remove some unnecessary complexity
from the template/CSS.

With a tweak from tabbott to remove the break-row logic as well.

Fixes #19947.
2021-10-14 15:38:53 -07:00
Aman Agrawal d9b1981335 message_edit_form: Change class name of stream select element.
We set the class name to be same as the one used in move topic
to stream popover so that a single class can be used to control
the look of both dropdowns.
2021-09-07 09:43:31 -07:00
aryanshridhar 89e60ef938 message_edit: Toggle checkbox by clicking it's label as well.
This commit adds the support to toggle `send_notification`
checkbox by clicking over its corresponding label as well.

It is a similar case as the checkboxes within organization
settings.
2021-07-22 11:07:49 -07:00
Aryan Shridhar 3991fb3ea6 Revert "message_edit: Replace checkboxes with settings_checkbox partial."
This reverts commit 54a1c73c78.
2021-07-22 11:07:49 -07:00
aryanshridhar 54a1c73c78 message_edit: Replace checkboxes with settings_checkbox partial.
This commits replaces the custom `send_notification` message_edit
checkboxes with our `settings_checkbox` partial.

The main intention is to also support the feature of selecting a
checkbox by clicking over its corresponding label as we have
in the case of the organization settings checkboxes.

Due to above change, this commit also removes the redundant
`break-row` HTML class along with it styles.
2021-07-21 10:43:18 -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
aryanshridhar 7c25bd1aa8 message_edit: Refactor message_edit to use dropdown_list_widget.
Implemented dropdown_list_widget in message_edit UI
which enables the functionality to search for streams
while moving a particular message across streams.

This matches the UI we have in the "move topic" widget.

Fixes #18416.
2021-07-15 08:27:55 -07:00
m-e-l-u-h-a-n 6eaf111bde message-editing: Add autocomplete suggestions for topic editing.
We extends composebox_typeahead to support autocompletion
suggestions on editing the topic of a message from message
edit form as well as from recipient bar.

Tweaked by tabbott to have correct keyboard interaction without
needing to patch Bootstrap.

Fixes: #16368.
2021-07-07 15:18:39 -07:00
sahil839 8e7ad58557 message_edit: Show loading indicator inside the button.
We now show loading indicator inside the 'save' button
instead of hiding the buttons to show the loading
indicator. Both the save and clear buttons are disabled
when the request is processing. We do not change color
of the buttons just change the cursor to indicate that
button are disabled and nothing happens on clicking them.

The reason for disabling the cancel button is that it
is actually not possible to cancel the action once
loading has started, so it is actually better to disable
it only such that users are not confused.

This commit adds a wrapper div element around the button
because we wanted to add two css properties to the button-
 'pointer-events: none' such that nothing happens on click
and 'cursor: not-allowed' to indicate that buttons are
disabled. But these boht styles cannot be added to same
element because 'pointer-events: none' overrides the
'cursor: not-allowed' style and normal cursor is visible.
That's why we add a wrapper to add 'cursor: not-allowed'
style to it and add 'pointer-events: none' to the button.
2021-07-05 17:24:28 -07:00
sahil839 7c7e81e662 message_edit: Rename show_edit_stream to is_stream_editable.
This commit renames show_edit_stream to is_stream_editable
for more clarity.
2021-06-03 17:58:19 -07:00
Ganesh Pawar ddf2127035 widgets: Prevent edits to widgets.
As of now, editing a widget doesn't update the rendered content.
It's important to ensure that existing votes or options added later on
don't get deleted when rendered.
This seems more complex than it's worth.

For now, we just prevent edits to widgets.
This commit makes the UI clearer that editing widgets isn't allowed.

See also:
https://github.com/zulip/zulip/issues/14229
https://github.com/zulip/zulip/issues/14799

Fixes #17156
2021-04-30 09:55:25 -07:00
Aman Agrawal 1b844a8d1c message_edit: Deduplicate control buttons.
Deduplicate control buttons by re-using the
compose_control_buttons.

A link to `help` overlay was added to `message_edit_form`
as a part of this process.

This fixes a bug that when video provider is set to `Jitsi`
from `none` in organization settings while message_edit_form
is open, the video icon is not displayed since
it was not present in the message_edit_form DOM even if
compose.update_video_chat_button_display tries to display it.
It is fixed since the `.video_link` element is always present
in DOM of `message_edit_form` now.
2021-04-27 10:06:25 -07:00
Aman Agrawal 4c60585820 giphy: Get message_id for `compose_giphy_logo` from `.message_row`. 2021-04-27 10:06:25 -07:00
Aman Agrawal 4a55296377 emoji_picker: Get message_id from `.message_row` for `.emoji_map`. 2021-04-27 10:06:25 -07:00
Aman Agrawal 54b31df1b6 emoji_map: Convert from id to class.
Since it can present in multiple elements, we use it as a class.
2021-04-27 10:06:25 -07:00
Aman Agrawal 9816da629b message_edit: Get `message_id` from `message_row` for `video_link`.
We remove `data-message-id` from `.video_link` in `message_edit_form`
and get message_id from `message_row` when it is required.
2021-04-27 10:06:25 -07:00
Aman Agrawal 84a7f08acc compose: Use `class` to find `markdown_preview` related elements.
We convert the following elements to use a class instead of
id for accessing them across the codebase:

* markdown_preview
* undo_markdown_preview
* markdown_preview_spinner
* message_edit_content
* preview_content

Converted them together since changes to one impacted the other in
some modules like click_handlers.

Also, added a function in rows to get `message_row`.
2021-04-27 10:06:25 -07:00
Aman Agrawal 8ebced2791 compose: Use `compose_upload_file` class for upload file icon.
We use `.compose_upload_file` across compose and message_edit_form
for file upload icon. This will help us share common code between
`compose` and `message_edit_form`.
2021-04-27 10:06:25 -07:00
Aman Agrawal 7ae04a6ba8 compose: Use `file_input` class for file input element.
In both compose and `message_edit_form` we use `file_input`
class to identify the file `input` element. This will help
to more easily share common elements between compose and message_edit.
2021-04-27 10:06:25 -07:00
Aman Agrawal eae1829ead message_edit_form: Convert from `id` to `class`.
Since we can have multiple instances of `message_edit_form`, it
makes sense to have it as a class.

We track the message_edit_form by setting an id to
`form` element dependent on message_id.
2021-04-27 10:06:25 -07:00
Anders Kaseorg dd3fa4ac52 templates: Mark all void tags as self-closing.
This reverses the policy that was set, but incompletely enforced, by
commit 951514dd7d.  The self-closing tag
syntax is clearer, more consistent, simpler to parse, compatible with
XML, preferred by Prettier, and (most importantly now) required by
FormatJS.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-04-21 09:49:34 -07:00
Aman Agrawal 11b09bba83 compose: Replace `message-control-button` with `compose_control_button`.
This is both more correct and also fixes this element having had a
name very similar to message_control_button, which refers to an
element in the message_controls section of a rendered message.
2021-04-19 16:54:10 -07:00
Anders Kaseorg 5fed442bb1 templates: Remove context argument from {{#tr}} block helper.
It only had one nontrivial use, and it’s easily replaced using the
builtin {{#with}} block helper.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-04-13 18:59:46 -07:00
Anders Kaseorg 0892e98012 i18n: Convert Handlebars messages to FormatJS.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-04-13 17:41:10 -07:00
Aman Agrawal 700cfd648c giphy: Add GIPHY picker to message edit form.
We try to keep only one instance of GIPHY popover active.
2021-04-08 10:17:20 -07:00
Aman Agrawal dc432d0b6f message_edit_tooltip: Use tippy for tooltip.
Tippyjs automatically places it to left.
2021-04-07 17:37:02 -07:00
Sumanth V Rao 413df1881e templates: Extract and tweak copy_message_button from message_edit_form.
Small tweak in the extracted text which adds aria-lable to the button.
2020-10-08 17:13:50 -07:00
Sumanth V Rao 792029cbb8 css: Refactor copy_message button to use copy_button_base class styling.
Z-index is added to the base class. This doesn't affect copy_code_button
in any way.

Attributes dropped/changed:
    - background-color
    - Base class on-hover property is now used.
    - height, width, padding is now the base classes.

We can also remove the TODO now.
2020-10-08 17:13:50 -07:00
Gittenburg 55a67ee7c5 message_edit: Display Formatting button as "Help".
Match the compose change b245e1e49a.
2020-10-02 14:54:14 -07:00
Gittenburg d99c3c0b55 message_edit: Reorder buttons to match compose.
Match the compose change 0c6df114f6.
2020-10-02 14:54:14 -07:00
Tim Abbott 40c840f88a message_edit: Remove duplicate tabindex declaration. 2020-08-31 22:57:21 -07:00
Ryan Rehman 34b420bf59 ui: Add loading indicator for message edits.
This commit hides the "Save" and "Cancel" buttons
after the first click and shows a spinner until a
successful / failed response is received.

We do not allow sending any other message edit
requests during this time frame, similar to how
our inline topic edit ui works.

Fixes #16143.
2020-08-25 17:22:29 -07:00
Gittenburg 0dbc5df42d message_edit_form: Make edit controls accessible.
Fixes #6234.
2020-08-11 12:35:15 -07:00
Aman Agrawal c947be5411 msg_edit_form: Show checkboxes in separate lines if present. 2020-07-06 12:38:58 -07:00
Aman Agrawal ac0db1ab81 message_edit_form: Rename thread to topic for clarity. 2020-06-29 12:26:43 -07:00
Aman Agrawal a096f34cab move_topic_to_stream: Add option to disable breadcrumb messages.
Option to disable breadcrumb messages were given in both message edit
form and topic edit stream popover.

User now has the option to select which stream to send the notification
of stream edit of a topic via checkboxes in the UI.
2020-06-05 12:28:51 -07:00
Aman Agrawal 7c502acb4c message_edit: Show stream color bar alongside stream select.
* Stream bar color logic is borrwoed from compose stream bar.
* Use flex containers to align elements and automatically set their
  height to be same, them automatically filling the stream color bar
  height to be the height of the select box.
* Use flex-wrap to wrap the propagate selector when out of space.

* To make sure stream select box and stream color box are closest possible,
  select box has been moved under stream color box.
2020-05-14 14:27:53 -07:00
Aman Agrawal 7197a7ac68 message_edit: Add support for changing stream of a message.
* This feature is currently only visible to admins.
* Locally echoed messages are also updated.
* Add UI for editing stream if user is admin.
* Show propagate mode selector if either stream or topic changed.
2020-05-11 16:25:47 -07:00
sahil839 65d953b2af settings: Add option to disable video call in org settings.
Option is added to video_chat_provider settings for disabling
video calls.

Video call icon is hidden in two cases-
1. video_chat_provider is set to disabled.
2. video_chat_provider is set to Jitsi and settings.JITSI_SERVER_URL
   is none.

Relevant tests are added and modified.

Fixes #14483
2020-04-09 16:03:30 -07:00
Anders Kaseorg 68cfcd6446 CVE-2020-9444: Prevent reverse tabnabbing attacks.
While we could fix this issue by changing the markdown processor,
doing so is not a robust solution, because even a momentary bug in the
markdown processor could allow cached messages that do not follow our
security policy.

This change ensures that even if our markdown processor has bugs that
result in rendered content that does not properly follow our policy of
using rel="noopener noreferrer" on links, we'll still do something
reasonable.

Co-authored-by: Tim Abbott <tabbott@zulipchat.com>
Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
2020-04-01 14:01:45 -07:00
Wyatt Hoodes a283d6e239 message_edit_form: Change topic editing default to `change_later`. 2020-02-27 11:30:11 -08:00
Anders Kaseorg 3c3471b720 templates: Rename *.handlebars ↦ *.hbs and - ↦ _.
Tweaked by tabbott to avoid accidentally disabling the linter for
handlebars templates.

Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
2019-07-12 21:11:03 -07:00