Commit Graph

98 Commits

Author SHA1 Message Date
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
Karl Stolley ec8e6c2179 compose_banners: Explicitly target banner content, child p.
This ensures uniform display and flexing of different bits of
banner content, including:

* Banners like Sent! Scroll down to view...) that have only a
  classless `<p>` marking their content
* Banners like the unscheduled message allert, which puts a
  .banner_content class right on the paragraph
* Banners like the Your message was sent to a stream you have
  muted", which tuck a `<p>` into a div with the .banner_content
  class
2023-09-28 17:06:49 -07:00
Karl Stolley 89ce2c112c vdots: Place new more-vertical icon in compose box. 2023-09-14 17:13:58 -07:00
Karl Stolley 5708b57acd compose: Present banners with intrinsic layout.
By implementing a careful flexbox declaration on a new banner-
element container, this presents banners accessibly across the full
range of possible viewports--and relies only on a single, small
media query to do so.

Fixes: #25847

Co-Authored-By: Hardik Dharmani <Ddharmani99@gmail.com>
2023-09-14 10:13:29 -07:00
yogesh sirsat 953f026487 compose: Disable unneeded control buttons in preview mode.
Buttons which change the content in the compose textarea were so far
enabled even in preview mode, and would work, but those changes would
not be reflected in the visible preview. This is extremely confusing,
and can lead to the possibility of a user accidentally changing the
content of the compose textarea while previewing, and sending that.

Now we disable those buttons in preview mode, both when composing a new
message and when editing an existing one. We still show the tooltips,
but grey them out and make them unclickable.

Fixes: #20962
2023-09-13 15:09:16 -07:00
Aman Agrawal 6efcb7a349 dropdown_widget: Refactor to use Class. 2023-07-27 14:10:08 -07:00
Sahil Batra 861312e120 bootstrap: Remove bootstrap CSS for "small" element.
We use "small" element only to show secondary details in
a typeahead option. This commit re-adds bootstrap CSS
rule to the specific element in compose.css and removes
the CSS from bootstrap.css.

Also, we do not use small elements inside any of h1, h2,
h3, h4 and blockquote elements, so the CSS for those can
be safely removed.
2023-07-23 15:44:58 -07:00
Aman Agrawal 0024e88fcb css: Remove unused `float` property.
Ths is already alingned corrected using flex, so no need to use float.
2023-07-11 13:37:50 -07:00