Commit Graph

105 Commits

Author SHA1 Message Date
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
N-Shar-ma 6ee0825022 css: Make message send / save buttons half opaque when disabled.
So far, the Send buttons area would turn grey when the message could not
be sent. The Save button when editing a message would also turn grey
when the message could not be edited anymore. Now we simply make the
buttons half opaque instead of turning them grey in a disabled state.
2024-04-28 10:38:58 -07:00
Lauryn Menard d7f9f8333e web-stream-settings: Update strings for stream rename channel.
Updates a chunk of translated strings that overlap between files,
with the streams settings overlay being the starting point for
finding these strings, to use channel instead of stream.

Part of stream to channel rename project.
2024-04-24 14:35:04 -07:00
N-Shar-ma 7072794871 css: Make pills' content collapse according to width available.
We set `min-width: 0` on all nested flex containers for pills, not just
the pills label, which allows the label content to collapse as much as
needed with ellipsis when overflowing.

Fixes: #27205.
2024-04-05 09:14:37 -07:00
N-Shar-ma 6f7e030eb2 compose: Increase gap between Draft button's text and the counter. 2024-04-01 13:31:15 -05:00
N-Shar-ma 13df423ae1 compose: Adjust alignment and size of Drafts button at smaller widths.
The padding on the sides of the Drafts button is reduced from 5 to 3px
at smaller width, so that it's not right up against the textareas when
hovered.

The text is also aligned to the Send button's edge, like at larger
widths.
2024-04-01 13:31:15 -05: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
Aman Agrawal 5f1f0f9eb0 compose: Move related media queries to zulip.css. 2024-03-19 15:15:23 -07:00
Aman Agrawal 4740485a13 css: Use better selector names for typeahead. 2024-03-19 15:15:23 -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
Aman Agrawal e6718369d6 css: Apply fa-chevron-down CSS to zulip-icon-chevron-down.
This was missed as part of #27577 migration.
2024-02-20 15:16:56 -08:00
vighneshbhat9945 6d6fa145cc
css: Make the height of compose buttons steady.
When any stream name includes some other language's letters is scrolled down in 
the recent views, the height of compose-controls bar would change.

Fix this by setting a precise line-height for these elements.

Fixes: #27837.
2024-01-25 15:16:00 -08:00
N-Shar-ma 82895ff535 compose: Update icons for formatting buttons.
Also made the buttons bigger, and updated breakpoints accordingly.

Fixes: #27845.
2023-12-01 13:51:39 -08:00
Aman Agrawal c55eaf2bec css: Set tippy-arrow color same as background in light theme. 2023-11-23 10:33:23 -08:00
N-Shar-ma 9eeeabf877 compose: Move buttons to popover in 2 batches instead of all at once.
This ensures that there is never too much awkward empty space in the
row of buttons below the compose box.
2023-11-21 21:01:17 -08:00
N-Shar-ma 143db56992 polls: Add option for modal to create polls.
Earlier the `/poll` slash command was the only way to create polls.
To increase user friendliness with a GUI, a button to launch a modal
to create a poll, has been added to the compose box. This button is
enabled only when the compose box is empty, to avoid complexities with
losing / having to save as draft any message already being composed.

The modal has a form which on submission frames a message using the
`/poll` syntax and the data input in the form, and sets the content of
the compose box to that message, which the user can then send. The
question field is mandatory for form submission.

Fixes: #20304.
2023-11-21 21:01:17 -08:00
N-Shar-ma 30933c5145 compose: Remove gaps between formatting buttons, and make all same size.
Also, added a slight background color change on hover.
2023-11-21 21:01:17 -08:00
N-Shar-ma 42fa4c0011 compose: Refine breakpoints for new compose control buttons.
This is a preparatory commit for new formatting buttons which are added
in the following commits.

Earlier we used multiple classes, each of which handled the hiding or
showing of the element it was applied to, at each breakpoint. Now all
the media queries of those classes have been combined into a new class,
for cleaner and more reusable code. This new combined media query is
also updated to accommodate the new formatting buttons.
2023-11-21 21:01:17 -08:00
Karl Stolley dd938911f7 compose_box: Set auto height on textarea in full screen. 2023-11-15 15:23:48 -08:00
Karl Stolley 17e87c9a20 compose_box: Fix regression on full-screen Preview areas. 2023-11-15 09:04:54 -08:00
Karl Stolley c5b7432cf2 compose_box: Maintain top alignment in Preview mode. 2023-11-15 09:04:54 -08:00
Karl Stolley 6f8cac8077 compose_box: Better align and maintain alignment of topic marker. 2023-11-14 13:14:40 -08:00
Karl Stolley e82c875bc3 compose_box: Remove unreachable enter_sends cruft. 2023-11-14 12:10:38 -08:00
Karl Stolley 0c95772f4e compose_box: Maximize clickable area on send-later vdots. 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 93d6bcef0e compose_box: Properly present Drafts button in all languages. 2023-11-13 12:45:13 -08:00
Karl Stolley be34c4c2ef compose_box: Improve Drafts and button alignment in smaller views. 2023-11-13 12:45:13 -08:00
Karl Stolley 7209476b18 compose_box: Integrate Drafts, Enter-to-send in send-later popover. 2023-11-13 12:45:13 -08:00
Karl Stolley 601faf8548 compose_box: Handle responsive layouts on send column.
Fixes #27576.
2023-11-13 12:45:13 -08:00
Karl Stolley a6b3e74f7d compose_box: Sensibly style disabled Send/vdots buttons. 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 f8fa47fa02 compose_box: Use columnar flex to position Drafts, limit, Send button. 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 ec38c7b5be compose_box: Establish basic message box grid geography. 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
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 88f4ecc943 compose_banner: Restore CSS overzealously removed in #27097.
This also includes a comment for future contributors, explaining
why these styles are necessary.
2023-10-10 10:01:11 -07:00
Karl Stolley d887fb57e7 compose_banners: Better align action and cancel buttons.
This uses the banner message's line-height to set a
max-height on the action and cancel buttons to maintain
a consistent vertical spacing.

Additional uses of flexbox here:

1. help the button to remain shorter when it's adjacent a
   single-line banner message, and
2. center the closing X icon relative to the current size
   of the action button, when one is present
2023-10-09 11:55:01 -07:00
Karl Stolley fe8fc98912 compose_banners: Structure innner <p> elements with .banner_message class.
This also styles those inner .banner_message elements to lose
margin inherited from Bootstrap. (This is now also applied to
the upload-message banner.)

It's better to achieve that with a class selector; using a `p`
element selector would mean that such a style would be evaluated
for all `<p>` elements in the DOM. Which is of course a whole lot,
thanks to Markdown alone.

Fixes: #26922
2023-10-09 11:55:01 -07:00
Karl Stolley 3fdf85872e compose_banners: Remove unnecessary upload-message styles. 2023-10-09 11:55:01 -07:00
Sayam Samal 8d3f2baebf tooltips: Use <div> tags inside tooltip's inner content.
By replacing `<span>` tags with `<div>` tags inside the tooltip's inner
content we remove the redundancy of having to use break tags to
separate the tooltip's title and it's content.

We also replace any `<p>` tags with `<div>` tags for the following
reasons:

- Since what we want to achieve are just block elements in order to
avoid the break tags, using `<div>` tags provide use with a wider
scope of use cases.

- We don't want the pause, screen readers often introduce after reading
the contents of a paragraph.

- The `<p>` tag cannot contain tables and other block-level elements.

- The semantic meaning of the <p> tag doesn't apply to the commonly
used tooltip content.
2023-10-03 14:37:47 -07:00