Commit Graph

44 Commits

Author SHA1 Message Date
sanchi-t ca74c95c60 user_profile: Display `Saved` feedback.
Visually confirms successful profile changes with a clear
`Saved` message.

Fixes part of #26692.

Co-authored-by: Kunal Sharma <v.shm.kunal@gmail.com>.
Co-authored-by: Angelica <angelica.ferlin@gmail.com>.
2024-05-28 14:34:57 -07:00
Pratik 3b2bf7b2b9 modal_css: Refactor css of header of user profile modal.
This commit enhances the layout of user profile modal header by using
flexbox properties.
2024-05-06 18:14:40 -07:00
Pratik fdbce9d889 profile_modal: Replaces underscore style classes with hyphenated one.
This commit replaces the underscore-style classes of user profile modal
with the hyphenated one.
2024-05-06 18:14:40 -07:00
Sahil Batra 040486776c modals: Add bottom margin to label elements.
This commit adds bottom margin to label elements of
different inputs by adding "modal-field-label" class
to the label elements. Some of them already have the
margin due to having dropdown-title class.
2024-05-03 09:51:36 -07:00
N-Shar-ma 7104c06459 css: Make all modal buttons half opaque when disabled, instead of grey.
Earlier, the primary modal button always turned grey on being disabled,
while other modal buttons remained as is in light mode, and grey in dark
mode. Now the styling is made consistent across all modal buttons, by
giving them all 50% opacity when disabled.
2024-04-28 10:38:58 -07:00
N-Shar-ma 528e7e4a0e css: Redesign exit / close buttons.
We change the background colors for the close / cancel / exit buttons
in modals and messages (when editing them or viewing their source). The
border is also removed for those buttons in messages.
2024-04-28 10:38:58 -07:00
Kislay Verma 505d66afeb user_invite: Convert invite modal to tabbed format.
This commit converts the radio buttons (for
selecting email/link) to tab
components in the user invite modal.

The selected tab is in focus by default and arrow keys
can be used to toggle the selected tab.

Appropriate tooltips are shown when a tab is disabled.

Fixes #29392.
2024-04-12 08:23:00 -07:00
sujal fbcf31c9e0 bot-url: Add event filtering UI to generate bot URL modal.
Adds an option to the generate bot URL modal to filter for events
that will trigger notifications. This option is conditionally
displayed when only `all_event_types` is defined for the selected
integration.

If selected, the URL will display all events by default. There
are "check all" and "uncheck all" buttons to easily include or
remove all the events from the URL.

Fixes #27628.
2024-04-01 11:39:03 -07:00
Prakhar Pratyush 9a7634d527 onboarding: Show one-time modal to introduce inbox view.
To improve onboarding experience, this commit adds
a one-time modal which introduces the inbox view.

Users see this one-time modal on visiting the inbox view.

Fixes part of #29073.
2024-03-19 09:32:59 -07:00
Sayam Samal 9a12d1798e read_receipts: Fix duplication bug when opening menu repeatedly.
The (1) delay in fetching the read receipts data from the api call to
`/json/messages/${message_id}/read_receipts`; followed by the execution
of the success callback function, and the (2) use of `.append()` to
render the modal and user list, together lead to duplication of the read
receipts modal and also the user list inside the read receipts menu.

This commit adds a check to set the read receipts menu contents only if
the read receipts modal for the selected message ID is open by the time
the network request is resolved.

In addition, this commit also uses the `on_shown` hook instead of the
`on_show` hook in the read receipts modal logic, to add a delay in the
calling of the read receipts API, which prevents the stacking of the
requests.
2024-02-22 10:49:29 -08:00
Aman Agrawal 4d1bb762be css: Add 25px to content width on right for chevron-down icon.
This fixes chevron-down icon overlapping with content when content
occupies full width of the select element.
2024-02-20 09:29:26 -08:00
Pratik 4f89a0f605 user_profile: Add "copy link to profile" button in user_profile_modal.
This commit adds a "copy link to profile" button in user_profile_modal.
Clicking on this button copies the user's profile link and displays a
"Copied!" tooltip.
2024-02-15 17:17:38 -08:00
Aman Agrawal 1b8605a6e6 stream_popover: Remove remnants select_stream_widget.
We replaced the bootstrap dropdown with our custom dropdown
widget. These were missed during the migration.
2024-02-03 17:20:28 -08:00
Aman Agrawal 7834748dd7 css: Fix modal exit button colors not working on billing pages.
This was due to color variables not being accessible as `zulip.css`
is not a file we import on billing page.
2023-11-29 21:46:13 -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
Karl Stolley 8bc12a4ee2 modal_buttons: Make exit button colors in to CSS variables. 2023-11-15 10:41:51 -08:00
Vector73 6dd7efae85 user_profile: Fix alignment and color of edit icon. 2023-10-26 13:17:28 -07:00
Sahil Batra 0c146d21e3 overlays: Rename "modal-bg" class to "overlay-container".
This commit renames "modal-bg" class to "overlay-container"
since we use this class only for overlays and this seems a
better name.
2023-10-17 10:28:50 -07:00
Sahil Batra b3d9f5a419 overlays: Rename "modal-body" class.
We use "modal-body" class in informational overlays and
"About Zulip" overlay. For informational overlays, the
class is used on the element acting as scroll container
so we just rename the class to "overlay-scroll-container".

For "About Zulip" overlay, we do not support scrolling
so "overlay-body" seems a better class name.
2023-10-17 10:28:50 -07:00
Sahil Batra 37d12250ed modal: Re-add required bootstrap CSS for ".modal-body".
This commit adds the required bootstrap CSS rules for
".modal-body" elements to modal.css so that we can remove
them from bootstrap.css.
2023-10-09 11:25:26 -07:00
palashb01 1c049ab5f4 user_profile: Replace the id with class for pencil button.
This commit replaces the id attribute with class attribute for the
edit pencil button in user profile modal.
2023-09-11 10:39:00 -07:00
palashb01 135518435a user_profile: Align the title header of the modal and fix edit button.
This commit unsets the padding of the bot icon and, as the anchor
tag has been replaced with the i tag, we have also set the color
and pointer. This is done so that when the user hovers over the
icon, it will appear as a clickable button.
2023-09-11 10:39:00 -07:00
Satyam Bansal eefa124351 dialog_widget: Add horizontal padding to the modal content.
Previously, the modal content bottom border sometimes got hidden
due to subpixel rounding.
2023-08-16 10:38:42 -05:00
Sahil Batra befcb46ba3 dialog_widget: Rename "dialog_cancel_button" to "dialog_exit_button".
This commit renames "dialog_cancel_button" class in the exit button
of modals to "dialog_exit_button", which seems a much better name
for a button that is used to close a modal.
2023-07-25 10:25:12 -07:00
Anders Kaseorg 7746e11486 dependencies: Upgrade JavaScript dependencies.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-07-21 15:58:42 -07:00
Sahil Batra b51bce7c90 bootstrap: Re-add bootstrap CSS for modal_text_input class.
This commit re-adds bootstrap CSS rules to ".modal_text_input"
selector in modal.css and this helps in adding the bootstrap
CSS to text inputs used in modals.

This is a prep commit to remove bootstrap CSS for text type inputs.
2023-07-07 10:10:28 -07:00
Ujjawal Modi a45853d313 streams: Warn when archiving a notification stream.
Archiving a user/stream notification stream disables
user/stream notifications.This commit adds a warning
that notifications will be disabled while archiving
any notification stream.

Fixes #22110.

Co-authored-by: Victor Fróes <71036803+vfroes21@users.noreply.github.com>
Co-authored-by: Isabella Carmo <isabella.carmo@hotmail.com>
2023-07-06 16:04:11 -07:00
Lauryn Menard 85096cfb4d web-styles: Update references to "private message" and "PM".
Updates any use of "private message" and "PM" in the `web/styles`
directory to instead use "direct messages".
2023-06-26 11:07:28 -07:00
Sahil Batra 7d0da75430 modal: Remove modal_text_input class from password and url type inputs.
We remove the modal_text_input class from password and url type inputs
in modals and add the width property CSS to modal_password_input and
modal_url_input instead.

Note that we might instead have a single class for all type of inputs
instead of having different classes for url, password and text type
inputs in further commits.
2023-06-23 11:53:38 -07:00
Sahil Batra a860e717bb bootstrap: Remove bootstrap CSS for url type inputs.
We use url type inputs in the add and edit custom field modals
and also to show the url type custom fields in "Profile" panel
and "Manage user" modal.

This commit re-adds the bootstrap CSS rules to these specific
input elements using modal_url_input and settings_url_input
class and thus removes the CSS for url type inputs from
bootstrap.css.

We might replace the new class added here with a common class
for all type of inputs in further commits.
2023-06-23 11:53:38 -07:00
Sahil Batra 5ac72eedd9 modals: Re-add bootstrap CSS to password inputs in modals.
This commit adds specific CSS styles from bootstrap to password
type inputs in modals using modal_password_input class. This
change helps us in removing the bootstrap CSS for password type
inputs in further commits.

We might replace the new added class with a single class which
will be used for all type of inputs in further commits.
2023-06-23 11:53:38 -07:00
evykassirer 9427fb7230 settings: Fix narrow-screen background color, use color variable.
Fixes #25708.
2023-05-23 11:31:03 -07:00
Lakshay Mittal a208da9c4d style: Fix dropdown text alignment by reducing vertical padding.
Zulip's select widgets have a 30px height; this comes from Bootstrap
but is also generally nice for visual consistency.

In modals, we use a 15px font-size, instead of the 14px used in the
rest of the app, and in that context, the 4px vertical padding plus
30px fixed height resulted in the text not being vertically aligned.

Fix this by removing that vertical padding; all of our select elements
with these classes appear to position the text in the center of the
dropdown through other CSS mechanisms.
2023-05-16 15:43:06 -07:00
Aman Agrawal a196b949f7 dropdown_widget: Implement dropdown widget using tippy.
This will soon replace DropdownListWidget.
2023-05-09 14:11:26 -07:00
m-e-l-u-h-a-n 308f42eded css: Add word-break property to .modal__title.
Modal that were used as dialog boxes for editing info
had issues with long heading text int .modal__title,
This commit add word-break to break words and avoid
abrupt ui in such cases.
2023-04-24 16:53:35 -07:00
Sahil Batra 2ebb9834cd modal: Fix flex-direction property for modal__content.
The flex-direction property for modal__content should
be set to column as we want to display the elements.

This does not affect most of the modals since they
do not have multiple direct child elements that are
visible at same time and the data-simplebar attribute
already sets the "flex-direction: column" property to
the elements where it is used.

But in the email address visibility modal on user
registration page, there are multiple direct child
elements for the "modal__content" element and we need
to set "flex-direction: column" property for them to
work correctly. We also change the width of select
element in the modal to "fit-content" to avoid it
taking the whole width even when not required.

This commit also fixes the bug in login_to_access
modal, since the `modal__content` for it also
has two direct child elements.
2023-03-31 10:02:42 -07:00
Sahil Batra 1c6bed55e4 modals: Add modal_text_input class to text inputs.
This commit adds modal_text_input class to text inputs
in modals to set width of them as set by bootstrap.
This class is used to set the width of inputs to 206px,
as we will be removing the boostrap rule which sets width
of the input in further commits.
2023-03-27 22:34:30 -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 ecde9066d7 stylelint: Fix declaration-block-no-redundant-longhand-properties.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 15:48:29 -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
Hardik Dharmani 74ff9a4beb
popovers: Add disabled button CSS for light theme.
Previously, we only had disabled button CSS for the dark theme in dialog widgets.

Fixes #24567.
2023-03-07 11:01:01 -08:00
Ganesh Pawar 5a5203144d modal: Make the modal content scrollable instead of the whole modal.
Earlier, if the content of the modal (apart from the header and footer)
overflowed, the whole modal would become scrollable which would hide
the modal header and footer on scrolling. This commit makes only
the modal content scrollable and keeps the modal header and
footer static.
2023-03-01 15:36:29 -08:00
Sahil Batra a862e686db modal: Do not use flex for all modal titles.
The "display: flex" property was added to ".modal__title"
element in 9e4aa19ac in #24194 to fix overlay of long
name in user profile modal (#23781).

Due to this change, the space between words in heading of
"Archive stream" modal is being removed.

This commit fixes it by adding "display: flex" only to the
title of user profile modal and not all the modals. The
heading in "Archive stream" modal is not perfect but there
is ongoing work to fix it and till then this commit changes
it to be the same as it was before adding flex property.

There is no major change in other modals, except that the
space between heading and help-link widget has increased
which was anyways the case before adding the flex property
and that can be modified later if we want to.
2023-02-24 09:13:09 -08:00
Anders Kaseorg c1675913a2 web: Move web app to ‘web’ directory.
Ever since we started bundling the app with webpack, there’s been less
and less overlap between our ‘static’ directory (files belonging to
the frontend app) and Django’s interpretation of the ‘static’
directory (files served directly to the web).

Split the app out to its own ‘web’ directory outside of ‘static’, and
remove all the custom collectstatic --ignore rules.  This makes it
much clearer what’s actually being served to the web, and what’s being
bundled by webpack.  It also shrinks the release tarball by 3%.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-02-23 16:04:17 -08:00