Commit Graph

51 Commits

Author SHA1 Message Date
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
Aman Agrawal 233b486618 css: Use variable font when using Source Sans 3.
This is to overcome the limitations of previous static font,
which didn't allow us to use various font widths.
2023-07-06 17:57:37 -07:00
Palash Baderia 624fea2e8e upload_banner: Add a cancel button.
This commit adds a cancel button to the upload banner, replacing
the previous close icon. Now, the cancel button is used to cancel
the upload process, while the close icon is used to remove the
upload banner without interrupting the upload.

A new case has been added to the switch statement in the 'upload.js'
file to handle the functionality of hiding the banner called
'upload_banner_hide_button'.

Replaced the functionality of the 'compose_banner_close_banner' case
inside the switch statement with a new case called
'upload_banner_cancel_button'. The cancel button is now assigned
the selector 'upload_banner_cancel_button'.

`Cancel` button is only preset for banner which tracks
progress while a file is being uploaded.

To maintain consistency with other banners, the cancel button's
dimensions and color have been adjusted to match the style of other
buttons present in different banners.

Fixes: #21156
2023-07-06 16:11:09 -07:00
Daniil Fadeev 9c675ce62d giphy: Migrate Giphy popover to Tippy. 2023-07-05 14:43:19 -07:00
Daniil Fadeev 4976655dda compose: Remove unused styles for `compose_gif_icon`. 2023-07-05 14:43:19 -07:00
Daniil Fadeev 37b9e96790 compose: Remove unused `hide` styles for `compose_control_button`.
We use the styles from `app_components.css`.
2023-07-05 14:43:19 -07:00
Daniil Fadeev 83b4fef060 compose: Fix keyboard indicator vertical alignment in send shortcut. 2023-06-23 10:53:51 -07:00
Joelute ccdbdb35b2 unread_banner: Refactor HTML to use main view banner stylings.
Previously, the HTML structure of unread banners continued to utilize the
old stylings. We are currently in the process of simplifing both the
compose banner and unread banner stylings into one. These change will
update the HTML structure to be the same as the compose banner and use
the new stylings.
2023-06-09 11:31:51 -07:00
Joelute 00add94045 compose_banner: Rename classnames to main-view-banner.
Previously, we have duplicate stylings in compose banner and unread banner.
This is rather messy and creates a lot of styling rules. We should define
an abstraction for them. This change will rename compose_banner
to main-view-banner.
2023-06-09 11:31:51 -07:00
Joelute f5a21d0e47 compose_banner: Update classnames to main-view-banner-action-button.
Previously, we have duplicate stylings in compose banner and unread banner.
This is rather messy and creates a lot of styling rules. We should define
an abstraction for them. This change will rename compose_banner_action_button
to main-view-banner-action-button.
2023-06-09 11:31:51 -07:00
Joelute 80ace5c789 compose_banner: Update classnames to main-view-banner-close-button.
Previously, we have duplicate stylings in compose banner and unread banner.
This is rather messy and creates a lot of styling rules. We should define
an abstraction for them. This change will rename compose_banner_close_button
to main-view-banner-close-button.
2023-06-09 11:31:51 -07:00
Karl Stolley 30b7da34e0 css: Size stream recipient box for small screens.
This allows the recipient box to take 100% of the available
horizontal space, up to 175px. The effect is that the
compose-box buttons are available to users at mobile scales
(viewports of 400px wide or less).
2023-05-30 10:39:25 -07:00
Tim Abbott 1f8b3fd09a css: Fix fluid_layout_width setting.
0457f6807c seems to have accidentally
inverted the setting; we also clean up duplicate declarations of this
1400px value.
2023-05-28 22:06:16 -07:00
Aman Agrawal 8654f839b5 overlays: Stop document from occupying the extra scrollbar width.
When overlay / modal is displayed, scrollbar is hidden due to
the disabled scrolling on `html`. Reduce width of fixed elements
that will be visible in background and `html` so that they don't
occupy that extra space.

Also, I was over-thinking how we can get the scrollbar width. The
moment we allowed scrolling on `html`, it was easy to get the
scrollbar width.
2023-05-28 15:20:20 -07:00
Karl Stolley 060c95dda6 compose_box: Explicitly set topic bar text color. 2023-05-25 17:19:29 -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
Karl Stolley 4df04f1032 compose_box: Correct topic input-box height.
While this commit achieves what the subject advertises (fixing the
input box's height to match the recipient drop-down), but it does
so by relying heavily on flexbox's behavior to manage the height
of the elements and vertical centering, where necessary, rather
than positioning hacks or vertical padding.

This commit also removes some additional styles that do not make
sense (e.g., `min-width: 0`) or that need not be set.
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 393bcb4a9a compose: Increase font size of recipient privacy icon. 2023-05-10 12:00:18 -07:00
evykassirer e026aa1217 UI redesign: Change background color.
Fixes: #21750
2023-05-09 16:25:28 -07:00
Aman Agrawal 8ea59f7f02 compose: Use tippy for stream select dropdown.
Fixes #25434
2023-05-09 14:11:26 -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 578ddbc5c8 scheduled_message_banner: Change design.
Convert `View scheduled messages` button into a link and use
default colors for "Undo" button.
2023-05-02 09:10:58 -07:00
Aman Agrawal 1885ed783a compose: Add new banner for success message scheduled. 2023-05-01 22:45:03 -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
Tim Abbott 368d2aa27d compose: Fix misaligment of compose top right icons.
When composing a private message to a different recipient than the
current view, the go-to-compose-target icon looked vertically
misaligned with these icons. Fix this by removing the CSS rule that
made these other top-corner icons not centered within their row.
2023-04-30 21:02:21 -07:00
Tim Abbott cef1e3363c compose: Increase size of recipient menu.
We should do a better long-term fix, but the current menu feels cramped.
2023-04-28 18:44:11 -07:00
Tim Abbott 798391824b compose: Refactor dropdown-menu CSS rules. 2023-04-28 18:43:51 -07:00
Karl Stolley df508659db css: Lighten button border for visibility.
This replaces the previous dark border.

A pure white border looked a little too garish, so this dials back the
alpha channel just a bit.

Fixes: #25303.
2023-04-28 12:44:30 -07:00
Karl Stolley 942eb7b375 css: Pad send button for click comfort. 2023-04-28 12:44:30 -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 6c797904f2 compose: Let recipient switcher change width with content. 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
Sahil Batra 7eacd525b4 compose: Show banner if user is not allowed to post in the stream.
We now show a banner on opening the compose box and changing the
stream in dropdown, if a user is not allowed to post in a stream.

The "Send" button is also disabled if user is not allowed to post
in the stream.

This commit also moved the CSS for disabled modal button in dark
theme below after the other CSS for modals as we are using the
same CSS for the "Send" button as well in disabled state.
2023-04-27 12:31:40 -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
N-Shar-ma 9f2ef69c71 compose: Add banner for unmuting the muted topic a message is sent to.
We add a new banner informing the user if and when they send a message
to a muted topic / stream. It also has a button to unmute the topic.

Fixes: #24246.
2023-04-25 16:16:47 -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 5ca73388c0 compose: Overflow long stream names with ellipsis in dropdown menu. 2023-04-20 16:09:55 -07:00
evykassirer 19a47a71d8 stream dropdown: Add a space after the stream icon.
This applies to several dropdowns, and matches the spacing of
the left sidebar.
2023-04-20 16:09:55 -07:00
evykassirer 02ae5818ae compose: Add privacy icons to the stream dropdown menu.
These were previously used in the input form field and
this commit removes the code that supported that and
replaces it by using existing dropdown_widget functionality
to display the icons in the compose dropdown.
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
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 1e62a42d75 compose: Reduce height of compose banners to better match designs.
Figma: https://www.figma.com/file/jbNOiBWvbtLuHaiTj4CW0G/Zulip-Web-App?node-id=2441%3A180271&t=tFynBT5Akes5HJ95-0
2023-03-31 13:52:31 -07:00
evykassirer 4cfafa382a compose: Rename recipient selector classes to be more descriptive. 2023-03-31 13:45:24 -07:00
Anders Kaseorg d274583d8f styles: Use modern color notation.
postcss-preset-env transpiles this back as necessary.  (It does a
better job than we did, in fact: we had several four-argument hsl()
calls that should have been hsla().)

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-24 17:26:55 -07:00
Anders Kaseorg 5cdf38b1f7 styles: Use standard CSS nesting syntax.
CSS nesting is being standardized with the syntactic restriction that
the nested selector cannot start with an identifier.  This was
necessary to allow the syntax to be parsed without lookahead.

https://webkit.org/blog/13813/try-css-nesting-today-in-safari-technology-preview/
https://www.w3.org/TR/css-nesting-1/#syntax

The postcss-nesting plugin used by postcss-preset-env enforces this
restriction.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 11:26:30 -07:00