Commit Graph

65 Commits

Author SHA1 Message Date
Sahil Batra 6f5143b5b8 invite: Fix margins around subscriptions banner.
This commit fixes the margins around banner for default stream
subscriptions, shown to users who cannot subscribe others, to
be same as that for other banners like the one shown when
description is not set for the organization.
2024-05-15 10:59:05 -07:00
Sahil Batra 016917679e invites: Do not show streams if user cannot subscribe others.
We do not show the streams list in invite modal if the user
does not have permission to subscribe others to stream and
show a notice mentioning it.
2024-05-14 14:20:07 -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
Sayam Samal c3e43586c8 topic_popover: Redesign popover using the "popover-menu" tippy theme. 2024-04-26 10:35:21 -07:00
nimishmedatwal 561cc9eab3 user_profile: Add focus to subscribe button.
Also reduces the number of focusable elements between the "streams"
heading and the stream picker.

Fixes #26690.

Co-authored-by: Tim Abbott <tabbott@zulip.com>
2024-04-17 11:52:57 -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
Sayam Samal d469d37d14 personal_menu: Add theme switcher to personal menu popover.
This commit introduces a theme switcher feature within the personal
menu popover. The implementation begins with the development of a
tab picker, which has the following features:

* Utilization of radio buttons to emulate the tab picker.
    Radio input buttons provides the native way in HTML to select one
    value out of a set.

* Support for both horizontal (default) and vertical orientations.
    Vertical orientation can be achieved by appending the
    `.tab-picker-vertical` class.

* Respects the `prefers-reduced-motion` option set by the user.
    Disables the sliding tab animation to improve accessibility.

Additionally, the theme switcher component incorporates error handling
mechanisms. In the event of a server/network error, the tab slider
reverts to the previous theme option after a delay of 500ms. This
behavior visually communicates the occurrence of an error to the user,
improving the UX.

Fixes: #22803.
2024-03-25 16:31:55 -07:00
Aman Agrawal 47acfc0bae css: Remove unused classes.
While they might be useful, it create a potential for elements
that we want to display on wide widths for a setting like
hide user list but was bugged due to a css class like this.
2024-03-18 15:28:03 -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
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
Aman Agrawal 088eadbca1 css: Remove stale dropdown-list-widget class. 2024-02-03 17:20:28 -08:00
Karl Stolley 3c5ea3895f left_sidebar: Place a dark-mode color for masked unreads. 2023-11-29 13:33:19 -08:00
Sahil Batra 2968eb2b04 user_groups: Add UI to set and update can_mention_group setting.
This commit adds support to set can_mention_group setting
when creating user group and also update the setting for
existing user groups.
2023-11-29 10:58:04 -08:00
Sahil Batra 4c04675965 settings: Fix disabled look of dropdown widgets.
This commit adds code to change the background color of the
disabled dropdown widget to be same as we have for "select"
elements and also updates cursor to be set to "not-allowed".
2023-11-29 10:58:04 -08:00
Aman Agrawal ff19dda71c dropdown_widget: Style cannot view stream similar to disabled state. 2023-11-23 09:09:58 -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
Aman Agrawal bc3d48616e gear_menu: Migrate to use tippy. 2023-10-20 12:36:39 -07:00
Prakhar Pratyush 5e3b8f5393 css: Improve the css of icon-based tab picker used in topic popover.
Remove the solid outline around hovered tabs.

Minor tweaks in height and padding for tabs.
2023-10-17 16:21:06 -07:00
Prakhar Pratyush 2d979fbf0e css: Use CSS variables for the color values of tab-picker.
Use CSS variables for the color values of left sidebar
topic popover, tab-picker widget to change the visibility
policy.
2023-10-17 16:21:06 -07:00
Aman Agrawal 4db331ed21 empty_list_widget: Use class instead of id.
We were using id before to increase their specificity, but
since it is possible for multiple empty_list_widget_for_list/table
to be in DOM at the same time, we should use a class here. Used
`!important` here so that we can force our padding where these
classes are used.
2023-10-17 11:55:41 -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
Hemant Umre 5eb784a652 list_widget: Add functionality to display empty list message.
This commit introduces a function in list_widget.js that allows
displaying a message when the list is empty using the `data-empty`
dataset. The function checks the container type to determine the
appropriate wrapper for the message and appends it to the container
body.

Fixes a part of #23072.
2023-10-11 18:03:53 -07:00
Hardik Dharmani 7e776b9c76 refactor: Make variable for unread counter's background colors.
This is Prep commit that introduces 2 new CSS variable
`--color-background-unread-counter` and
`--color-background-unread-counter-popover-menu` that has value
`hsl(105deg 2% 50% / 50%)` in dark theme and `hsl(105deg 2% 50%)`
in light theme for unread counter and `hsl(200deg 100% 40%)`
for unread counter in popover menus to match its blue theme.
2023-10-10 16:48:20 -07:00
Eeshan Garg f3465dea08 demo-orgs: Add UI for converting to permanent organization.
Adds warning banner to the organization settings overlay/tabs
for demo organizations. For owners, clicking on the link in the
banner opens a modal to convert the demo organization into a
permanent organization.

For admins that are not owners, clicking on the link will go
to the help center article on demo organizations.

Non-admin users will not see the warning banner.

The modal for converting a demo organization requires the owner
to have set their email address. Once the owner's email address
is set, then the organization can be made permanent by changing
the subdomain of the organization. The deletion date for the
demo organization will be removed as part of updating the
subdomain.

The organization owner must also have updated the organization
type to be any value other than unsepecified to convert the
demo organization to a permanent organization. The modal's
submit button will be disabled if that is the value for the
organization type in the form. The demo organizations created
in the dev environment now have their organization type set to
unspecified on creation.

This is a part of #19523.

Co-authored by: Lauryn Menard <lauryn@zulip.com>
2023-10-03 09:11:41 -07:00
Prakhar Pratyush 3b56e0f5ca topic_popover: Fix the wiggle on hovering visibility policy buttons.
On hovering the not-selected option in the left sidebar
topic popover widget to change visibility policy, a wiggle
effect was observed.

This commit fixes the wiggle effect.
2023-10-03 09:00:46 -07:00
N-Shar-ma 3c0a6d8ee3 compose: Add button to format bulleted lists.
A formatting button below the compose box can format the selected text
by bulleting or unbulleting the selected (partially or completely)
lines. The behaviour is inspired by how GitHub's bullet list format
button works.

Also adds a new breakpoint for showing vdots for formatting buttons.

Fixes part of: #20305.
2023-09-28 15:05:34 -07:00
Lalit 0e73b5547c user_settings: Add new user setting to show/hide unread counts on streams.
Added a show_unread_counts personal user setting to the
Settings > Display settings > Advanced section which
lets user choose whether he/she wants to see unread messages
count on the left sidebar for streams.

This setting have three options,
"All Streams" - This will show unread messages count for all
streams.
"Unmuted Stream" - This will be default option and it will
only show unread messages count for unmuted streams.
"No Stream" - This option will not show unread messages count
on any stream.

Fixes #24149
2023-09-13 18:45:45 -07:00
Aman Agrawal 58c5701e5e css: Assign a variable to focus underline color of recent view. 2023-09-12 09:20:33 -07:00
Sahil Batra 882663394a settings: Reduce width of "Actions" column in tables.
This commit reduces the width of "Actions" column in tables so
that they do not take any unnecessary space.
2023-08-21 15:00:39 -07:00
Sahil Batra ebdd63f327 settings: Fix heading borders for striped tables.
The bottom border of heading row in striped (and not bordered)
tables was thicker than needed due to two borders being present -
one from the bottom border for heading element and one from top
border for the first row in the table.

This commit changes the CSS to remove the top border of the first
row.
2023-08-21 15:00:39 -07:00
Daniil Fadeev d4ef28bc8d unread_count: Remove letter spacing for better horizontal alignment. 2023-08-21 11:23:35 -07:00
Satyam Bansal e4048de0a9 app_components: Convert "overlay_message_controls" div to flexbox.
Previously, the icons were spaced by hardcoded values of margins
and would require changes everytime a new icon is added.
2023-08-11 15:54:17 -07:00
Sahil Batra 817e39650e css: Re-add bootstrap CSS defined using "table" class.
This commit re-adds bootstrap CSS rules defined using "table"
class to the specific CSS files where CSS for different tables
is present.

This is a prep commit for removing table related bootstrap CSS
from bootstrap.css.
2023-08-06 18:13:33 -07:00
Sahil Batra fcaaa6566e bootstrap: Remove bootstrap CSS for <table> element.
This commit adds the required bootstrap CSS for "<table>"
element in the specific files and removes them from
bootstrap.css.
2023-08-06 18:13:33 -07:00
Sahil Batra 9240d780a4 bootstrap: Remove CSS for table-stripped from bootstrap.css.
This commit re-adds the CSS to have different background for
alternate rows in striped tables to specific files and remove
them from bootstrap.css.
2023-08-06 18:13:33 -07:00
Sahil Batra 806abf7d1c bootstrap: Remove bootstrap CSS for table-condensed class.
This commit re-adds bootstrap CSS rules defined using
"table-condensed" class to the required files and removes
them from bootstrap.css.
2023-08-06 18:13:33 -07:00
Sahil Batra 91cba1a05e informational_overlays: Fix top and bottom borders in thead.
Previously, two borders were applied on the heading of tables
in informational_overlay. Top of the heading element had one
border from "table" and one from "th" element. Bottom of the
heading had one border from "th" element and one from "td"
element.

This commit fixes it by changing the CSS for borders on
"th" element to be applied only on striped tables without
borders (i.e. tables having "table-striped" class but not
"table-bordered" class) as bordered tables already have
top borders defined on td and table element while on
striped tables without borders, only bottom border is
applied on "td" elements along with the top and bottom
borders on "th".
2023-08-06 18:13:33 -07:00
Sahil Batra 3ce6fbe10a css: Re-add bootstrap CSS for tables with "table-bordered" class.
This commit re-adds bootstrap CSS rules with "table-bordered" class
to app_components.css so that tables used in the app can use this
css and we can remove the CSS from bootstrap.css.
2023-08-06 18:13:33 -07:00
Aman Agrawal 6efcb7a349 dropdown_widget: Refactor to use Class. 2023-07-27 14:10:08 -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
Prakhar Pratyush 237f9f4799 topic_popover: Add support to follow a topic from the topic_popover.
This commit adds support for following a topic from the topic
three-dot menu in the left sidebar.

Three options, i.e., 'Mute topic', 'Unmute topic', and 'Follow topic',
are shown at the top of the menu (in the mentioned order), regardless
of whether the stream is muted or unmuted.

We can no longer set the topic's visibility_policy to INHERIT
(the default value) from this menu.

The changes are visible in the development environment only.

Fixes #25917.

Co-authored-by: Prakhar Pratyush <prakhar841301@gmail.com>
Co-authored-by: Hardik Dharmani <Ddharmani99@gmail.com>
2023-07-17 17:39:17 -07:00
Karl Stolley 0058cc5f92 message_overlays: Apply grid to drafts and scheduled messages.
This also removes duplicate, unreachable CSS that probably
should have been removed in a941545523.
2023-07-13 09:02:00 -07:00
Sahil Batra 5442bfb07c templates: Add filter_text_input class to inputs used for filtering.
This commit adds filter_text_input class to various search inputs
used across the app. This new class is used to re-add the bootstrap
CSS rules such that we can remove the CSS from bootstrap.css.
2023-07-07 10:10:28 -07:00
Aman Agrawal b236902ec7 save_discard_widget_icon: Use 400 font-weight directly.
`Lighter` for this icon gets converted to 100 font weight, but the
visual difference starts to appear only after 500 font weight so,
we keep at 400 to begin with, which is what we support.
2023-07-06 17:57:37 -07:00
Hardik Dharmani e549c416db tooltips: Use tippy tooltips for drafts and schedule message overlays.
Fixes #25892
2023-06-13 16:49:54 -07:00
evykassirer 47c107faa5 modals: Fix background color bug from background color changes. 2023-05-23 21:40:11 -07:00
Aman Agrawal f04ae8acd3 drafts: Fix message header overlapping outline. 2023-05-22 09:31:21 -07:00
Daniil Fadeev e64e5f2413 scheduled_messages: Add keyboard navigation.
Keyboard navigation has been added to the scheduled messages modal
in this commit. The solution is based on the `modals_handle_events`
function from the `messages_overlay_ui.js` module, as well as some
helpful functions from the same module.

Fixes: #25181.
2023-05-15 14:46:21 -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