We still had some code in invite.ts for the textarea element
which was replaced by pill container, so this commit removes
that code.
This commit also removes the CSS for textarea and radion buttons
which are no longer present in the UI.
When input pills are hovered, the 'x' button is highlighted.
This commit ensures that 'x' button is highlighted only if the
'x' button is hovered, not anywhere else on the pill.
Author: ecxtacy <dc.dhruvchouhan@gmail.com>.
This commit refines word wrapping in user profile popovers. It implements 'overflow-wrap: break-word;' for category ‘name’ items (e.g., ‘Email’, ‘User ID’) and 'overflow-wrap: anywhere;' for category ‘value’ segments, ensuring proper line breaks and preventing overflow issues. Additionally, addressed prettier problems to maintain code consistency.
Fixes#22865
Updates instances of default-streams-list to instead be
default-channels-list as the data-section for the organization
settings overlay is part of the URL hash.
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.
Fixes#30083.
We have used the dark theme color for the left sidebar row hover:
`--color-background-active-narrow-filter`. We are not using that variable
directly since we don't want a change in that color affecting the color in
recent conversations.
We've also used a single color on hover compared to 2 different colors
for unread and read row before. Light mode also uses a single color on
hover.
Relevant CZO conversation:
https://chat.zulip.org/#narrow/stream/101-design/topic/Hover.20color.20in.20Recent.20conversations.20dark.20mode.2E/near/1797727
Adds description in views styled like stream descriptions also adds a
help center link to the appropriate page at the end of each
description.
Fixes#29769.
Earlier, the compose textarea and the preview (container) occupied the
same grid area, 1 at a time. Now, they are both children of a common div
which is assigned the same grid area. This allows adding more elements
to the same grid area in the future.
This is purely a code change and should have no visible effects.
This is a prep commit for relocating the compose expand / collapse
buttons to the top right inside corner of the textarea / preview.
The `margin-bottom` was removed for the last element in the preview in
e55f5a1b59 to remove vertical shifts when
toggling preview mode, but it is not needed for image / video previews,
so now `margin-bottom` is not set to 0 for the last inline preview.
e.target is the wrong element, and even if this were to successfully
add the _full-height-no-scroll class to <body>, that’s not a child of
.portico-hello-page.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
We now use "settings-field-label" and "modal-field-label"
class on label elements in settings and modals respectively
to add the bottom margin which was previously done by
"dropdown-title" class as it is better to have more
generic names to use on label for all type of inputs.
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.
This removes the common min-width being used across all popovers and
instead sets the min-width according to a popover's requirements.
This allows for greater control over the popovers since we have a
variety of use cases for them — which a single common min-width cannot
accommodate.
Additionally, the text colors have been updated for both light and dark
themes, it starts showing when 900 or less characters are left, as 999
was too soon, and has a tooltip to show the maximum characters limit.
Fixes: #28706.
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.
So far, the Send buttons area would turn grey when the message could not
be sent. The Save button when editing a message would also turn grey
when the message could not be edited anymore. Now we simply make the
buttons half opaque instead of turning them grey in a disabled state.
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.
When viewing the source of a message when not editable, the opacity of
the read-only textarea would be reduced to 0.5, like for any other read-
only textarea in dark mode. This was unnecessary for viewing message
source, so the opacity for this case is now set to 1.
Fixes: #28701.
Updates a chunk of translated strings that overlap between files,
with the streams settings overlay being the starting point for
finding these strings, to use channel instead of stream.
Part of stream to channel rename project.
This expresses the height of the message row without need of
margical margins.
Extending the correct line-height to timestamps also means that
single-line messages will be the height of their combined content
and padding, and not erroneously held open by an oversize 28px
timestamp line-height.
Those corrections mean, too, that .message-time only needs to have
its line-height declared a single place, regardless of context.
This establishes the same 5px bottom margin on all Markdown
elements, which will aid in converting such values to variables
as part of the information-density project.
Because paragraphs have a 3px bottom margin, the 2px top margin
on ordered and unordered lists would collapse into it, for 3px
of space total. So setting 0 on these special selectors has no
effect.
We want to make it easier to find stream details such as creator,
creation date and stream id. The commit replaces the "Email address"
section in General tab of stream overlay with a new section called
"Stream details", "Email address" is now a field in this section.
If the stream does not have a creator, we only show the stream creation
date in creation details.
Fixes: #25648.
This is a prep commit to add a .pill-label wrapper around .pill-value
and other flair text. This extra flexbox structure will help us
vertically align this pill with surrounding text when adopting it to be
used inline.
We also introduce a new class to target this pill. The intention is that
this will more descriptive than contextually styling .pill-container.
This is so that it better matches existing buttons in this overlay. For
example the "Reset to default notifications" button in Personal tab.
This is a prep commit.
The term 'subscriber' might be misleading as it doesn't accurately
reflect the purpose of the list, which simply contains all users
within the organization. To enhance clarity and maintain consistency,
I've replaced the classname 'panel_subscriber_member_list'
with 'panel_user_list'.
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>
When users needed to add a new task in the todo widget, they would type
it in the field at the top, but the task would be appended to the list,
showing up at the very bottom, which can seem unintuitive.
Now the `add-task-bar` is at the bottom of the list, so that when a new
task is added, it'll appear right where it was typed. The task field
would then shift lower.
Users can now name task lists by providing the task list title in the
`/todo` command on the same line. Example: `/todo School Work`. If no
title is provided by the user, "Task list" (which is also the
placeholder) is used as default.
The author of a task list can later edit / update the task list title
in the todo widget, just like the question in the poll widget.
Fixes part of #20213.
This change allows different types of lists to
be rendered properly inside the {{start_tabs}} /
{{end_tabs}} block in markdown.
Fixes zulip#29669
Suggested-by: Lauryn Menard <github:laurynmm>
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.
The simplebar core documentation, recommends to not style the element
initalising the simplebar at all and use an inner element instead.
Following the recommendation, we move the max-width property from the
popover tippy options, to the `.simplebar-content` element via the
`--popover-menu-max-width` custom property.
While doing so, we also simplify the max-width to `350px`, since the
responsiveness for smaller screen is already been taked care of in the
shared popover styling.
This prevents the issue where the content overflows and gets hidden
instead of wrapping, when the width of the popover reaches the set
max width (if any).
Following ca9b1060b7, we allow the content of popover menu items to
control the width of the popover.
While using `white-space: nowrap` works, we should instead use the
`max-content` intrinsic sizing so that, if necessary, we can still
provide a `max-width` to the popover which would then force the popover
menu content to wrap.
Added `tippy.js/dist/border.css` along with some custom CSS override,
to add arrows which inherit the border color and width of the popover,
while also supporting all placements.
Also consolidates the CSS styling of the popovers to the `tippy-box`
element, which is the recommended way to theme the element according to
https://atomiks.github.io/tippyjs/v6/themes/#creating-a-theme.
This further helps in unifying the styling of the popover and the arrow,
and prevents inconsistencies such as shadow of the popover being casted
onto the arrows.
Fixes#18617.
- The role filter is added to both active and deactivated user
list. The original plan was to introduce a multi select checkbox
dropdown for the roles, but since that component is not ready yet,
we will use the dropdown component for the first iteration.
- To accomodate multiple filters, we have used an approach
similar to the one in recent_view_ui.js where we use dropdown
callback function and on("input") event on text search to set the
filter value in memory. The predicate functions uses these filters.
- We have also changed the default message when there are no
users to show to reflect `filters` instead of `current filter`.
Adds a loading spinner to the message history overlay,
improving the user experience by providing visual feedback while the
message edit history is loading.
We set `min-width: 0` on all nested flex containers for pills, not just
the pills label, which allows the label content to collapse as much as
needed with ellipsis when overflowing.
Fixes: #27205.
Removes the extra side margin on tip, warning and keyboard tips when
they are in ordered lists.
Removes the extra bottom margin for h3 elements in the integrations
docs.
Removes the unordered list style for the integrations docs.
Fix extraneous shadow at bottom of link preview
in stream messages in dark theme, in private
messages for both themes and in mentions, group
mentions and direct mentions.
This is done by applying the same color, used
in the background, to the shadow. There are CSS
variables that hold the values of the background
color.
Fixes#28853.
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.