Commit Graph

114 Commits

Author SHA1 Message Date
Karl Stolley 520b7b6a9e compose: Declare banner dimensions in ems. 2024-06-11 10:38:40 -07:00
Karl Stolley 2b92baa754 compose: Size collapsed compose buttons relatively. 2024-06-11 10:38:40 -07:00
Karl Stolley 131ae54eb7 compose: Prevent blowout on recipient box. 2024-06-11 10:38:40 -07:00
N-Shar-ma e959a392c9 compose: Make conversation arrow double as a go-to-conversation button.
The chevron arrow icon before the topic / dm user field now also acts as
a go to conversation button. Whenever the functionality is available,
the plain icon changes to look and behave like a button. The old go to
conversation button on the right of the field is removed.

Fixes: #28697.
2024-06-05 09:26:01 -07:00
Karl Stolley 0fbdd02d87 compose: Tune send-controls vdots for narrowest viewports. 2024-05-22 11:36:28 -07:00
Karl Stolley ac6ac58385 compose: Strengthen layout in send-controls area. 2024-05-22 11:36:28 -07:00
Aman Agrawal 0d3e223493 compose: Fix formatting popover persists on wide screens.
Reproducer:

1. Make your window narrow, to get the `...` formatting buttons menu.
2. Open the menu.
3. Make your window wide again.
2024-05-21 14:56:00 -07:00
Aman Agrawal 80d19fe15d css: Fix theme switch changing color of elements at different intervals.
Due to these transitions the theme switch from dark <-> light was
not pleasant as the background color and color changed at different
intervals.
2024-05-13 13:21:10 -07:00
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
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