Commit Graph

50 Commits

Author SHA1 Message Date
N-Shar-ma 1121d317c2 compose: Restructure HTML for common compose textarea/preview parent.
Earlier, the compose textarea and the preview (container) occupied the
same grid area, 1 at a time. Now, they are both children of a common div
which is assigned the same grid area. This allows adding more elements
to the same grid area in the future.

This is purely a code change and should have no visible effects.

This is a prep commit for relocating the compose expand / collapse
buttons to the top right inside corner of the textarea / preview.
2024-05-13 12:11:29 -07:00
N-Shar-ma 1ba3cda229 compose: Refactor recipient area to use grid layout instead of flexbox.
This is a prep commit for moving the narrow to compose recipients button
before the input, and also aids in the overall compose area redesign.
2024-05-02 14:28:04 -07:00
N-Shar-ma bfbf4f6f68 compose: Redesign limit indicator to show remaining characters count.
Additionally, the text colors have been updated for both light and dark
themes, it starts showing when 900 or less characters are left, as 999
was too soon, and has a tooltip to show the maximum characters limit.

Fixes: #28706.
2024-04-30 14:16:10 -07:00
Kenneth Rodrigues 110ca73545 compose_tooltips: Improve tooltip logic for compose_reply_button.
Change compose_reply_button tooltip logic to show the correct tooltip.
Earlier in organizations where DMs were disabled, a stale tooltip was
being displayed.

Earlier if the user hovered over the compose_reply_button when it was
disabled and switched to a stream in which it was enabled before waiting
for the tooltip delay, the next time the user hovers over the
compose_reply_button the stale disabled tooltip is displayed instead of
the enabled one.

This is fixed by checking if the compose_reply_button is enabled on the
fly while rendering the tooltip via instance.setContent().

Fixes #29238.
2024-04-24 17:29:16 -07:00
N-Shar-ma f800d4404e compose: Redesign the arrow between stream and topic.
The icon is now bigger, slimmer in stroke width, lighter in color, and
has less horizontal spacing around it.

Fixes: part of #28792.
2024-03-25 16:12:32 -07:00
Mahhheshh 1c48ed0a1c stream picker: Remove stream colorblock.
To achive this the `stream_header_colorblock` div was removed from
`dropdown_widget_with_stream_colorblock.hbs` template. this change made
the file name irelevenet so it was necessary to rename the file to
`dropdown_widget_wrapper.hbs`. After removing the html strcuture for
colorblock from templates the css for colorblock was also removed.
followed by the javascript which was used to add colorblock to the
stream picker. After removing javascript tests were updated.
Fixes: #28796.
2024-03-15 11:11:04 -07:00
N-Shar-ma f4d58f1ba6 compose: Show counter inside Drafts button for the current recipient.
Now we show the number of drafts that are addressed to the current
recipient selected in the compose box, if any, in the Drafts button
within parentheses (whether it is next to the Send button, or in the
Send options popover), and explain that it is the number of drafts for
this conversation in the tooltip.

Fixes: #28696.
2024-03-13 16:53:45 -07:00
Sayam Samal a0411e32b6 compose_tooltips: Fix tooltips for disabled conversation button.
In the situation where the DMs are disabled in an organization, we
disable the new conversation button. But due to this, the tooltip
hinting towards the same, was also being disabled because it was
attached to a disabled element which does not fire any events.

This commit fixes this bug, by wrapping the new conversation button
inside a div, and attaching the tooltip to this wrapper instead.
2024-03-05 10:55:20 -08:00
Karl Stolley 3201c7dfb5 compose_box: Extend use of send-control-button.
This uses `.send-control-button` to handle Tippies on those
elements (currently vdots and Drafts), and removes a confusing
compose-formatting class.
2023-11-14 09:21:11 -08:00
Karl Stolley 5bedbb14b4 compose_box: Rename message-control-button to send-control-button. 2023-11-14 09:21:11 -08:00
Karl Stolley d92a1e7ca8 compose_box: Update vdots tooltip to 'Send options'. 2023-11-13 12:45:13 -08:00
Karl Stolley 609106e2d0 compose_box: Implement redesigned vdots-button styles. 2023-11-13 12:45:13 -08:00
Karl Stolley bf0e806fed compose_box: Implement redesigned send-button styles. 2023-11-13 12:45:13 -08:00
Karl Stolley a3c1399924 compose_box: Handle compose and preview expansion. 2023-11-13 12:45:13 -08:00
Karl Stolley 9f00b513f7 compose_box: Improve structures around compose buttons. 2023-11-13 12:45:13 -08:00
Karl Stolley e608a389af compose_box: Improve structures around send controls. 2023-11-13 12:45:13 -08:00
Karl Stolley b4b71880e1 compose_box: Prepare redesign send and draft structures. 2023-11-13 12:45:13 -08:00
Karl Stolley f98570704d compose: Present Start new topic button adjacent the reply button.
Fixes: #24889.

Co-Authored-By: Daniil Fadeev <shameondev@gmail.com>
2023-10-10 17:37:03 -07:00
Karl Stolley 654469b29f compose: Make DM identifiers align with new conversations. 2023-10-10 17:37:03 -07:00
Karl Stolley c73de34f32 compose: Introduce 'Start new conversation' button. 2023-10-10 17:37:03 -07:00
Daniil Fadeev 9303339810 compose: Remove the unused span wrapper for buttons. 2023-10-10 17:37:03 -07:00
Karl Stolley 5b82a62b26 compose: Add button to clear topic box.
Fixes part of #24889.

Co-Authored-By: Daniil Fadeev <shameondev@gmail.com>
2023-10-10 17:37:03 -07:00
Karl Stolley 89ce2c112c vdots: Place new more-vertical icon in compose box. 2023-09-14 17:13:58 -07:00
Aman Agrawal 6efcb7a349 dropdown_widget: Refactor to use Class. 2023-07-27 14:10:08 -07:00
Aman Agrawal ecc1433d02 compose_recipient: Improve post recipient selection behaviour.
This moves selection of the correct input box / textarea to
a `on_hidden_callback` of dropdown widget, which also allows us
to just simplify `on_compose_select_recipient_update` to only
call `switch_message_type` when necessary so that it doesn't
interfere with setting focus.
2023-05-29 08:59:18 -07:00
Karl Stolley 42e0d72b67 compose_box: Maintain consistent dropdown height.
This commit keeps the height of the dropdown consistent, even when
it's adjacent a multiline collection of pills in a group DM.

It also keeps the righthand buttons and narrows top-aligned, too.

Additional markup and CSS ensures that the < marker always stays
vertically centered with respect to the dropdown.
2023-05-25 17:19:29 -07:00
Satyam Bansal fad5c88aa9 select_recipient_widget: Use "button" tag instead of "div".
Previously, hovering over the stream selector in the
compose box would show a mouse/text pointer instead
of a hand pointer.

Fixes #25592.
2023-05-14 16:35:48 -07:00
Aman Agrawal 8ea59f7f02 compose: Use tippy for stream select dropdown.
Fixes #25434
2023-05-09 14:11:26 -07:00
Hardik Dharmani 3a358a9a11 tooltips: Shift all tooltip templates to tooltip_templates.hbs.
Refactored all tooltip templates with static content to be in
tooltip_templates.hbs to avoid duplicate IDs and DOM element.

Fixes #25324
2023-05-09 11:10:58 -07:00
Hardik Dharmani 2aaf098ebc compose: Shorter the separator line between Send and 3-dot buttons.
Added a div inside #send_later button with class separator-line,
height 70%, width 1px and `background-color: hsl(0deg 0% 100% / 65%)`
to make it look like a line also made #send_later a flex with
`align-items: center` so that separator line is vertically centered.
2023-05-02 11:05:45 -07:00
Aman Agrawal 1b60019c60 schedule: Remove 'Schedule' state of compose box.
Fixes #25340

This means that we now schedule the message simply after selecting
time if the message is valid.

Also, editing scheduled messages will now delete the scheduled
message and open compose with scheduled message.
2023-05-01 22:45:03 -07:00
Karl Stolley d9654f4f0a css: Introduce padded vdots for send later.
This uses eyeballed vertical padding on the nested .zulip-icon class
to ensure that the entire send-later button area is clickable (and
not merely hoverable).
2023-04-28 12:44:30 -07:00
evykassirer 18312be6db compose: Add ability to switch to PM in stream dropdown.
Fixes #3409
2023-04-27 17:04:19 -07:00
evykassirer 695946746e compose: Rename stream selection widget to "select_recipient".
Previously this dropdown was only for selecting streams, but
soon it will also be for switching to a private message. This
name helps it be clearer that the dropdown is more general
purpose.
2023-04-27 17:04:19 -07:00
Daniil Fadeev 980f7df376 compose: Fix banners running off the screen.
We introduce a scrollable region, with a simplebar scrollbar.

Fixes: #25115.
2023-04-26 14:03:34 -07:00
Sahil Batra 99f8c19d6d compose: Show loading spinner in "Schedule" button.
We now showing spinner in the "Schedule" button while the
message is being schedules similar to how we show the spinner
for "Send" button.

Fixes #25182.
2023-04-25 12:51:59 -07:00
Sahil Batra 639af1d56d compose_ui: Refactor functions to show and hide loading spinners.
This commit refactors show_compose_spinner and hide_compose_spinner
functions to use class of the button instead of ID to select the
appropriate elements such that we can use the same function to show
and hide spinner in "Schedule" button in further commits. For this
purpose, we add a new class compose-submit-button to the "Send"
button and this class will be added to "Schedule" button as well
in the next commit.
2023-04-25 12:51:59 -07:00
palashb01 047bffe257 compose_box: Convert dynamic closed compose box tooltips to tippyjs.
This commit converts the dynamic closed_compose_box
tooltip to template-based tippy.js tooltips. The functions in
the compose_closed_ui.js file are refactored to dynamically change
the 'data-tooltip-template-id' attribute according to the situation.

The title parameter is removed from the functions in
compose_closed_ui.js so that we can change the tooltip within the
caller functions themselves, according to the situation. Since there
is no way to match the title in existing functions with different
languages to change the tooltip attribute dynamically, it is better
to change the tooltip attribute within the caller function according
to the situation, rather than passing the title as a parameter.

In the case of the reply button, we disable it when direct messages
are not allowed. However, tippy.js tooltips do not appear in the
case of disabled elements, so we have to use the container element
around it to show the tooltip. This approach is used in the case of
the reply button, where the span element wraps the button.

We used to have two titles for the reply button: one is the usual
'Reply to selected message', and the other is for the disabled state.
However, in the case of recent conversations, it makes more sense
to have a new tooltip title: 'Reply to selected conversation'.

To ensure that the tooltip content changes dynamically, it is
required to destroy the tooltip instance and then reinitialize it
every time.

Fixes: #25096
2023-04-24 11:45:56 -07:00
palashb01 aa23b9deaf compose_box: Convert compose_box tooltips to tippyjs tooltips.
This commit converts the static tooltips of closed compose box
to tippy.js tooltips.
2023-04-24 11:45:56 -07:00
evykassirer 5948671f92 compose: Improve responsiveness for compose recipient.
This allows the dropdown to display larger names, and also
overall improves the compose recipient experience on small
screens.
2023-04-20 16:09:55 -07:00
evykassirer 8a2455a294 compose: Change stream field in composebox to be a dropdown.
Fixes #11832

This lets the user see more options than the three that appear
in the typeahead menu, and prevents them from inputting invalid
stream names.

This change replaces the input field with the dropdown, and
updates everything that referred to the classnames of the old
input field, so that they now get the data they need from the
new dropdown.
2023-04-20 16:09:55 -07:00
Hardik Dharmani ab70df5f44 tooltips: Change compose-send-button tooltip dynamically.
Added a tippy tooltip in `tippyjs.js` that delegates to
`#compose-send-button`. Content of tippy tooltip is changed
dynamically as per value of `user_settings.enter_sends`.
`user_settings.enter_sends` returns true if send shortcut is
`enter` and flase if shortcut is `Ctrl + Enter`.

Fixes #24619
2023-04-19 16:13:29 -07:00
Aman Agrawal 5f0fa1b730 compose: Fix send later tooltip being cut by compose box container. 2023-04-19 09:43:50 -07:00
Aman Agrawal ff52187289 compose: Add UI to schedule messages.
Fixes #20971
2023-04-17 16:59:25 -07:00
Lalit fd830ce453 popover_menus: Change the selector `.enter_sends` for opening tippyjs popover.
Changed the `.enter_sends` css selector for launching tippyjs popover from
`compose.hbs` because it was colliding with `.enter_sends` selector present in
`organization_user_settings_defaults.hbs`.

Before this change when an admin tried to change user realm default setting of
`enter_sends` it was opening a tippyjs popover despite being a checkbox and it
was hitting `/json/settings` endpoint instead of `/json/realm/user_setting_defaults`.
2023-04-05 12:05:44 -07:00
evykassirer 4cfafa382a compose: Rename recipient selector classes to be more descriptive. 2023-03-31 13:45:24 -07:00
Anders Kaseorg 36475daba7 templates: Remove references to undefined fields.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-22 17:10:28 -07:00
Anders Kaseorg 83b6866018 templates: Replace unnecessary {{#tr}} blocks with {{t}} helper.
`{{#tr}}` supports HTML and allows translators to accidentally
introduce HTML, so it’s safer to use the `{{t}}` helper unless HTML is
needed.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-16 11:26:45 -07:00
Lauryn Menard 42775219b3 private-messages: Update frontend strings to use "direct message" or "DM".
Updates frontend user-facing strings with "private message" or "PM" to
use "direct message" or "DM" respectively instead.

Note that this updates translated strings as well as a few that
are not translated like search suggestions.

Updates `tools/lib/capitalization.py` for some specific strings
that are impacted by these changes, and removes "PM" and "PMs"
from checked strings.
2023-02-24 11:47:26 -08:00
Anders Kaseorg c1675913a2 web: Move web app to ‘web’ directory.
Ever since we started bundling the app with webpack, there’s been less
and less overlap between our ‘static’ directory (files belonging to
the frontend app) and Django’s interpretation of the ‘static’
directory (files served directly to the web).

Split the app out to its own ‘web’ directory outside of ‘static’, and
remove all the custom collectstatic --ignore rules.  This makes it
much clearer what’s actually being served to the web, and what’s being
bundled by webpack.  It also shrinks the release tarball by 3%.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-02-23 16:04:17 -08:00