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 <[email protected]>
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 <[email protected]>
2023-03-20 11:26:30 -07:00