Commit Graph

59 Commits

Author SHA1 Message Date
Hemant Umre eeec8f06e9 templates: Stop using `::after` to render empty list message.
This commit removes all instances of the `required-text` class,
which utilizes the `::after` pseudo-element to render empty list
message. To avoid inserting non-decorative content using a pseudo-
element, we will now use `list_widget.render_empty_list_message_
if_needed` introduced a few commits back to display the empty list
message.

Fixes #23072.
2023-10-11 18:03:53 -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
Aman Agrawal c69fe4b6a0 popover: Remove `.popover` class.
Since we are not using bootstrap popover, we don't have popovers
with that class.
2023-10-09 11:39:12 -07:00
Aman Agrawal 8430674aee popovers: Remove unused popover-content class.
Fixes #26821
2023-10-09 11:39:12 -07:00
Aman Agrawal a04117b6d3 user_group_info_popover: Remove bootstrap popover classes.
Added a `group-info-content` inplace of them and added the required
CSS.
2023-10-09 11:39:12 -07:00
Aman Agrawal 04c4b6e8b8 giphy: Move `popover-content` styles to `giphy-scrolling-container`. 2023-10-09 11:39:12 -07:00
Aman Agrawal 094ac010fb user_card_popover: Remove popover content class.
Added CSS styles that were removed due to this back. No visual
changes.
2023-10-09 11:39:12 -07:00
Aman Agrawal 0976b9006e popover-title: Remove class.
Remove bootstrap-tooltip class `popover-title` from code.

It was only used in user_card_popover for showing user avatar,
so cleaned up properties that were duplicated or not required.
2023-10-09 11:39:12 -07:00
Hardik Dharmani 4ee515a245 user_profile_modal: Abbrevate long URLs of custom fields.
Abbreviated long URL for custom field in the user profile modal
and user card popover. Added a copy-to-clipboard icon at
the end of the URL. When hovering over the copy button, it displays
a tippy tooltip with the text `Copy URL`. Clicking the copy button
displays a `Copied` tippy tooltip for 1 second.

Fixes #21680
2023-09-28 15:15:57 -07:00
Hardik Dharmani f27adec02d refactor: Rename `custom_profile_fields_link` to use kebab-case.
This is a prep commit. This commit renames
`custom_profile_fields_link` to `custom-profile-fields-link`
to follow kebab-case, which is the preferred style in Zulip.
2023-09-28 15:15:57 -07:00
Daniil Fadeev 8de397b37f user_card_popover: Migrate all user card popovers to Tippy. 2023-09-25 06:29:47 -07:00
Daniil Fadeev 91d2b5ed81 user_group_popover: Migrate popover to Tippy.
Fixes part of #23632.
2023-09-15 13:40:53 -07:00
Daniil Fadeev a678aee467 popovers: Apply styles for `hr` tag not just when nested under `.nav`.
We've got `hr` elements not just under `ul.nav`, like in
`user_group_info_popover`, so we need to apply styles there too.
2023-09-15 13:40:53 -07:00
Daniil Fadeev b9e1537ee6 user_card_popover: Rename `user_info_status_text` class. 2023-09-15 12:24:00 -07:00
Daniil Fadeev d5f731f0bd user_card_popover: Rename `user-info-popover` class. 2023-09-15 12:24:00 -07:00
Daniil Fadeev ff892925ce user_card_popover: Rename `info_popover_actions` class. 2023-09-15 12:24:00 -07:00
Daniil Fadeev 7c3f79df0d user_card_popover: Rename `user_info_popover_manage_menu_btn` class. 2023-09-15 12:24:00 -07:00
Daniil Fadeev a8bce8e178 user_card_popover: Rename `user_info_popover_action_buttons` class. 2023-09-15 12:24:00 -07:00
Karl Stolley b86b7ab067 vdots: Place new more-vertical icon on user card. 2023-09-14 17:13:58 -07:00
Daniil Fadeev 2f1561e3b8 giphy: Fix giphy popover rendering on narrow screens.
We should render the giphy popover as a centered overlay for
mobile-sized screens.
2023-09-13 12:20:35 -07:00
Daniil Fadeev 08aec5ac41 stream_popover: Migrate from Bootstrap to Tippy. 2023-09-13 10:55:40 -07:00
Aman Agrawal 58c5701e5e css: Assign a variable to focus underline color of recent view. 2023-09-12 09:20:33 -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
palashb01 f9dd2db3e4 user_profile: Move bot icon to the left of the name.
This commit moves the bot icon to the left of the name in the user
profile and adds a margin-left and margin-right to the name to ensure
there is enough space between the icon, name, and edit pencil.
2023-09-11 10:39:00 -07:00
palashb01 c6bb7b9169 user_profile: Redirect edit pencil to manage user tab.
This commit redirects the edit pencil in the user profile modal to
the 'manage user' tab whenever a user with permission to manage
other users via the user profile opens another user's profile.
However, we still want to redirect the edit pencil to
'settings/profile' if the user opens their own profile. The user
management permission is granted if the user is an admin or the
owner of the bot. However, we do not want system bots to have
access to the edit pencil or the 'manage user' tab. Therefore,
a new variable called 'can_manage_profile' has been introduced
to manage all these permissions, and the CSS has been updated
accordingly.

To redirect to the manage user tab without opening another modal,
I have extracted the toggler. This toggler will store the
component, and if the edit pencil button is clicked, we can use
the goto function to redirect to a different tab.

Changed the id names of both the edit pencil icons to explain
better of what they do.
2023-09-11 10:39:00 -07:00
palashb01 c2f878638b user_profile: Fix inconsistent height of user profile switching tabs.
This commit fixes the inconsistent height of the user profile when
switching tabs. We now have four tabs in the user profile:
"Profile," "Streams," "User Groups," and "Manage User." However,
the "Manage User" tab has footer buttons that need to remain
sticky at the bottom without changing the overall height of
the modal.

To achieve this, we wrapped the footer inside a div element and
assigned it a class called "manage-profile-tab-footer." The main
body of the user profile is given a height of 60vh. However, for
the "Manage User" tab, we decreased this height to 52vh and
allocated the remaining 8vh height to the div element to
accommodate the footer buttons. This ensures that the user
profile maintains consistent height when switching between tabs.

However, we have a 1px border in the footer, so to ensure that
the height is consistent, we reduce the height of the modal
content by 1px, making it calc(52vh - 1px).

To implement this, CSS code was added to the "popover.css" file
and accessed through the class specified in the "user_profile.js"
file.

The default padding of the buttons inside footer is 20px, but
with the above solution on large screens the buttons are not
aligned properly, so removed the padding top and bottom
and instead applied the flex box and property to align the buttons.
2023-09-11 10:39:00 -07:00
palashb01 1765ce23b0 user_profile: Adjust the stream tab headings to look good.
With the previous commits, we have now implemented the subscribe
widget with a separate heading. However, the font size and the gap
of both the heading of the widget and the streams list look bad,
so this commit fixes that.

Since the heading of both the widget and the list have the same CSS,
instead of duplicating it, we used the same class for both and
reduced the font size.
2023-09-10 11:20:15 -07:00
palashb01 4e786293ae user_profile: Add the subscribe widget to user profile.
This commit adds a subscription widget to the user profile,
including the logic to prevent non-admin users from seeing the
subscription widget of other users. Additionally, as it is not
possible to subscribe generic bots to streams, and the user should
not be a deactivated user, we check for these conditions before
displaying the subscription widget.

To ensure that the alert for both subscribing and unsubscribing
appears on top of the subscribe widget, changed the location of
the alert to be displayed at the top.

Additionally, considering that no stream will be initially selected,
we have made the decision to disable the subscribe button. Once the
user selects a stream, we will enable the subscribe button
accordingly.

Changed the add_user_ids_to_stream function inside subscriber_api.js
to support self subscribe also, so that we don't have to duplicate the
logic in user_profile.js

Created a separate file for the subscribe widget called
user_profile_subscribe_widget.hbs.

Fixes: #18883
2023-09-10 11:20:15 -07:00
Daniil Fadeev 08279820fb emoji: Rename `emoji-info-popover` to `emoji-picker-popover`. 2023-09-07 14:44:18 -07:00
Daniil Fadeev 82ca794f94 emoji: Migrate popover from Bootstrap to Tippy.
Fixes part of #23632.
2023-09-07 14:44:18 -07:00
Daniil Fadeev f3641b8369 popovers: Move color style declaration to a better place. 2023-08-25 12:29:36 -07:00
Prakhar Pratyush 41697f2663 message_header: Add support to follow topic from the message header bar.
This commit replaces the mute/unmute topic button in the message
header bar with a button that allows the user to set the
visibility_policy of the topic to muted, unmuted, followed or inherit.

The button in the message header bar has an icon corresponding to the
current visibility policy of the topic.

In a muted stream:
A click on the button opens a popover with 'Mute', 'Default', 'Unmute',
and 'Follow' options.

In a not muted stream:
A click on the button opens a popover with 'Mute', 'Default', and
'Follow' options. 'Unmute' option is available only when the
visibility_policy is set to 'Unmute'.

The current visibility_policy of the topic is highlighted in the
popover.
2023-08-17 13:30:24 -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
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
Aman Agrawal fcac413138 move_topic_to_stream: Migrate to use tippy dropdown widget. 2023-07-11 13:37:50 -07:00
Aman Agrawal ef4454ab7e css: Default 550 font weight to 600.
Since we support 600 font weight, 550 defaults to 600, so we
directly use it here.
2023-07-06 17:57:37 -07:00
Daniil Fadeev 9c675ce62d giphy: Migrate Giphy popover to Tippy. 2023-07-05 14:43:19 -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
Hardik Dharmani cfbcbe901a topic_edit: Rename `inline_topic_edit` to `move_messages_edit_topic`.
In move_topic modal, Renamed inline_topic_edit to
move_messages_edit_topic to be more specific selector as
inline_topic_edit is also used in message header.

Additionally, Removed id inline_topic_edit as it was only used
in zulip.css instead used `.inline_topic_edit` selector as that
element also have class with same name inline_topic_edit.

Fixes #24805
2023-05-09 13:51:07 -07:00
palashb01 29377c7f32 user_card: Fix the padding of bot-icon with name.
This commit fixes the padding of the bot-icon with the name
to make it look consistent with the way it is displayed in
the message feed.
2023-04-28 19:14:00 -07:00
palashb01 bb4d2f5f5b profile_popover: Remove the display presence dot for bots.
This commit removes the presence dot display for bots and fixes
the gap between the bot name and bot icon in the user profile
popover. It also fixes the alignment of the bot icon.

Fixes: #25066
2023-04-28 19:14:00 -07:00
Karl Stolley e4ae4c5b75 send_later: Remove send_later_input_group.
This removes the HTML structure and CSS styles previously associated
with the element in the scheduling modal.

Preserving this all in its own commit in case it needs to be
restored.
2023-04-28 17:50:54 -07:00
Aman Agrawal e89cbf0ac1 send_later: Move some options to a modal. 2023-04-28 17:50:54 -07:00
Hardik Dharmani a2b36bbabb user_card: Fix user_card background for dark theme for width < $md_min.
Previously, in the dark theme, the `background-color: #18222f` of the
`.popover` class took precedence over the
`background-color: hsla(0,0%,0%,.7)` of the `.message-info-popover`
and `.user-info-popover` classes. This commit fixes this issue by
adding !important to the background-color property of
`.message-info-popover, .user-info-popover` classes.
2023-04-28 15:35:43 -07:00
Aman Agrawal ff52187289 compose: Add UI to schedule messages.
Fixes #20971
2023-04-17 16:59:25 -07:00
brijsiyag ee1a83996a user-profile: Prevent unintended clicks through profile modal overlay.
When a user opens a profile modal, the overlay is clicked
through in responsive mode, which results in unintended button/link
clicks. This commit removes the causing CSS properties
`pointer-events:none;` which was passing pointer-events to other
elements and `pointer-events:all` which is experimental and do no
effect.
2023-04-07 10:09:04 -07:00
Karl Stolley 674cf8eacc css: Hyphenate .status-emoji selector. 2023-03-27 17:31:31 -07:00