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.
The padding on the sides of the Drafts button is reduced from 5 to 3px
at smaller width, so that it's not right up against the textareas when
hovered.
The text is also aligned to the Send button's edge, like at larger
widths.
Fix overlapping UI layout for stream subscribers search
on screens smaller than 320px. Break the search field
to a new row in the layout. Also fix the same issue in
the group settings > members panel.
Fixes#29368
There seem to be two different ways of making the unread
marker visible:
(1) `user-with-count` classname on the `user_sidebar_entry`
element, which is added on render and not modified after
render at all.
(2) `hide` classname, which is toggled on the `unread_count`
element in `update_unread_count_in_dom`.
This creates a bug where sometimes the buddy list doesn't
update when messages are marked unread. This actually
doesn't always happen, since if there was an unread marker
that was there on the original render (and then removed
and put back) it will display again.
This commit keeps the `hide` class and removes the
`user-with-count` strategy.
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.
To increase the discoverability of the possibility of specifying the
language for a code block, we trigger the language typeahead when code
syntax is added using the code formatting button. A blank option is
shown preselected in the typeahead, so that pressing enter will not
mistakenly add a language to the code block.
We only trigger the typeahead on empty opening fences when added by the
button, by setting a state variable to true when adding the syntax using
the button, checking for this state when sourcing languages for the code
typeahead, and then resetting the state variable to false.
Fixes: #29150.
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.
We redesign the message history modal to make it look similar to the
drafts and scheduled messages, using the shared styling/rendering
logic for that those existing elements to have a less goofy widget.
Fixes#28695.
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.
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.
Now we show the number of drafts that are addressed to the current
recipient selected in the compose box, if any, in the Drafts button
within parentheses (whether it is next to the Send button, or in the
Send options popover), and explain that it is the number of drafts for
this conversation in the tooltip.
Fixes: #28696.
Convert anchor tag to pills containing an image/avatar
and username within both existing and new stream
subscriber member lists and group member lists
using the new user_display_only_pill.hbs template.
If user has long username that breaks the UI,
overflow is handled with ellipsis.
add a context class (panel_subscriber_member_list)
to add 'padding 5px'to 'pill_value' for stream
subscriber member list and group member list.
To retrieve an avatar of a user add a
'img_src: people.small_avatar_url_for_person(user/person)'
field in 'stream_editsubscriber.js', 'user_group_edit_members.js',
'stream_create_subscribers.js' and 'user_group_create_members.js'.
Fixes: #25724.
Includes has_stale_audit_log boolean in the remote support view
data so that we can style the last audit log data for the remote
server to visually highlight if it is stale or current.
Adds a class to the form for removing a configured CustomerPlanOffer
so that we can add some margin between the form and the information
about the plan offer.
Add a word-wrap rule so that longer code elements, such as example
URLs or long return value names in the API documentation, do not
overflow out of the view in narrowed browsers or mobile views.
In the situation where the DMs are disabled in an organization, we
disable the new conversation button. But due to this, the tooltip
hinting towards the same, was also being disabled because it was
attached to a disabled element which does not fire any events.
This commit fixes this bug, by wrapping the new conversation button
inside a div, and attaching the tooltip to this wrapper instead.
The remote support view now returns results for deactivated remote
servers with those results sorted to the end and formatted to
visually stand out.
Forms to change sponsorship and discount fields on the customer
for the remote server or realm are not shown, but the data stored
on the customer object is shown, including any sponsorship request
information (if the customer had a sponsorship request pending when
it was deactivated).
Forms to schedule a plan are also not shown for deactivated servers
and their associated remote realms.
Forms and information for any current plan or scheduled plan, for
either the deactivated remote server or its associated remote
realms, are shown so that support staff can update those plans if
necessary.
To address feedback that own emoji reactions were not sufficiently distinct, we increase
the prominence of one's own emoji reactions by:
- Setting a pixel-and-a-half border around own reactions.
- Reducing the alpha on the inner drop shadow of other reactions.
- Increasing the contrast on own reactions borders (and decreasing
them, in dark mode, on other reactions).
- Space around the emoji is maintained as in the current design in the own reactions.
Other reactions benefit from an additional half pixel of padding, top and bottom,
which is necessary to keep the pills (and the hover reaction button) the same
height as each other--regardless of whether there's an own reaction among them
or not. Padding is reduced in line with the increased border on own reactions.
Sets the max-width for table data cells in the activity and
installation charts.
If the content exceeds the limit, then the overflow is set to
hidden and the text-overflow is set to ellipsis, so there is
a visual indication that the text is not completely visible.
Adds the information returned by get_push_status_for_remote_request
for remote billing users to the support page. Note that getting
the current push status data will result in some duplicate database
queries (getting customer, plan, current billed users, next billing
cycle) when generating the remote support view.
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.
This is no longer necessary for vertical alignment, and by
removing the 6px of padding it represents, bot DM rows will have
the same 22px height as other DM rows.
Updates the class name used for the sponsorship form container in
the remote support views to be more specific.
Adds a shared "support-form" class for the different forms in the
realm_details template.
Use the same CSS rule for current and next plan information sections.
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.
This commit disables the stream-select dropdown in the "Move message"
modal if the user is not allowed to move messages between streams, and
adds a tooltip for clarification when the dropdown is disabled.
Fixes#28345.
Adds a link on the upgrade and billing pages that opens a stripe
billing portal for the customer to update their name and address
that will appear on invoices and receipts.
On the billing page, updating the credit card information will
no longer update the customer billing address, since they can
now do this directly through the billing portal. To be consistent
with the credit card form on the upgrade page, we still require
inputting a billing address for the card.
Note that, once an invoice is paid/complete, then changes to the
customer's name and address will not be applied to those invoices.
Also, renames `ad_hoc_query.html` to `activity_table.html`,
`realm_summary_table.html` to `installation_activity_table.html`,
and `activity_details_template.html` to `activity.html`.
Removes the style attribute in the installation activity template
and uses a CSS class, "installation-activity-header", to center the
h3 and p tags instead. This removes an exception from the custom
lint check.
Moves CSS styles for support view buttons to
`web/styles/portico.activity.css`.
Also removed the "sea-green" and "small" classes from a few buttons
as no CSS rules were being applied and most of those buttons will
be removed when these forms are refactored to use a modal.
This commit re-adds the bootstrap CSS rules for the specific
btn-link elements in invite modal to zulip.css. This is part
of the bootstrap removal project.
Updates the total row for the installation and remote activity
charts to be in the table footer. Makes the footer class sticky
to the bottom of the view so that it is always visible on the
chart.
Also, updates the installation activity column for revenue to
be formatted as a dollar string, since this formatting was being
applied in the updated total row.
This commit tries to improve the CSS related to the emoji picker by
restructuring relevant parts of `reactions.css` and `dark_theme.css`.
Via this commit, the redundant classes -- "reaction", "status-emoji",
"composition" are also removed from `emoji_popover_emoji.hbs`.
If needed, specific styling -- according to the type of emoji picker,
can now be applied using the `data-emoji-destination` attribute of the
`.emoji-picker-popover`.
When any stream name includes some other language's letters is scrolled down in
the recent views, the height of compose-controls bar would change.
Fix this by setting a precise line-height for these elements.
Fixes: #27837.
This commit moves the "Download config of all active outgoing
webhook bots in Zulip Botserver format." text to be shown in the
"Active bots" section since the text is relevant for active bots
only. This commit also updates the code to show the text only
if user has atleast one active outgoing webhook bot since the
text is relavant only for outgoing webhook bots.
This will be applied to both the overall installation activity chart
as well as the associated remote, client, realm and user views.
Co-authored-by: Karl Stolley <karl@zulip.com>
use flex display justify-content for vertical alignment
instead of using offsets like "top". for horizontal
alignment of smiley-icon use text-align center.
Signed-off-by: sayyedarib <sayyedaribhussain4321@gmail.com>
Fixed an issue in the linkifier and custom profile tables where
dragging darker rows color changes in the background.
Following a CZO discussion on using alpha values in HSL,
I implemented a fix using the CSS color-mix property. This approach
mixes the original color with var(--color-background-modal) in
sRGB mode, effectively eliminating the use of alpha and preventing
color leaks. For more context, see the CZO discussion:
[https://chat.zulip.org/#narrow/stream/6-frontend/topic/alphas.20in.20color.20definitions].
Fixes#26480.
This reduces reliance on margin for layout, preventing undesired
space appearing below the footer and better using flexbox to align
elements in the legal area.
Also avoid prompting for full name time more than once.
Adds TOS version field to Remote server user.
Co-authored-by: Karl Stolley <karl@zulip.com>
Co-authored-by: Aman Agrawal <amanagr@zulip.com>
The paragraph tag was being used along with the bold tag to style the
topic and stream in the popovers. The semantic meaning of these tags
are more specialized and should not be used in this context. Replaced
the <p> tags with the more general <div> tags and accounted for the
bold text via the `font-weight` CSS property.
The `.topic-name` class, used to style the topic/stream name in the
topic list in the left sidebar, was also being used to the style the
topic/stream name in the topic/stream popover. This lead to irrelevant
properties being applied to the popover > topic/stream name. Through
this commit, the styling for both of these different cases are now
separated using the appropriate selectors.
Fixes#27562.
When a stream name becomes very long, it may stretch the popover menu
by a lot. We prevent this by allowing the stream name to wrap onto
multiple lines.
We set the streams popover width to be equal to the width of the longest
menu item, via the min-content intrinsic sizing. We also set all the
menu items to `white-space: nowrap` to prevent them wrapping. These
two changes allow the menu items to dictate the width of the popover
instead of a static max-width property, and thus helps with languages
where the length of the translated item may be long enough to wrap.
We set the topics popover width to be equal to the width of the longest
menu item, via the min-content intrinsic sizing. We also set all the
menu items to `white-space: nowrap` to prevent them wrapping. These
two changes allow the menu items to dictate the width of the popover
instead of a static max-width property, and thus helps with languages
where the length of the translated item may be long enough to wrap.
As per the intended design, the font size of the org plan should
be equal to the font size of other similar links such as org version.
It should not be one size smaller than it, such as those of the
upgrade links.
Some organizations may have long names that could blow up the gear
menu width, in those cases we want to prevent it by wrapping the
org name by explicitly setting the white-space property, and thus
enabling any soft-wrap opportunities.
Through this commit, we set the width of the navbar dropdowns to be
equal to the longest menu item, via the min-content intrinsic sizing.
Note, that the min-content width takes into account all soft-wrapping
opportunities, which could result in the wrapping of the menu items in
many cases. To prevent this, we use the white-space property to prevent
menu items from wrapping in any case.
We currently don't have appropriate padding applied to the lists and
links in the org info section of the gear menu popover. This becomes
an issue when we have a long org name, org url or org version, as
text starts touching the edges of the popover.
This commit adds the missing padding to the items in the org info
section of the gear menu popover.
This commit updates the CSS to fix the alignment of loading
spinner in "Save" button and also to make sure that button's
width does not change after clicking on the button.
The separation of files no longer makes any sense, with some of these
forms being used by the RemoteRealm and legacy server flows together.
And in general we don't need to scatter this stuff across files.
Also, the unifying of the class of loader on the buttons, fixes a visual
bug on the final "Confirm login" page where you would see it spinning
for half a second upon loading the page, until the .hide() code
triggered.
The cursor should be a pointer for the whole visibility policy options;
since the whole option is selectable and not just for the anchor tag
within it.
* Reformat "This is a legacy plan" notice on billing page.
* Add a link to the plan name on upgrade page title.
* Tweak discount style on billing page.
* Add line break to server login page title.
* Match server login page title and tab title.
The "User groups" panel is now removed from settings overlay
and we instead use new "#groups" UI.
This commit also makes some changes to tests to ensure coverage
for pill_typeahead.js which was previously done by
settings_user_group_legacy.test.js. We have still not got
complete coverage on user_pill.ts as we have removed
settings_user_group_legacy.test.js, but we just add the file
to EXEMPT_FILS list for now and will handle it in future.
Fixes#28012.
This commit updates the user group popovers to change the icon
and text of ".manage-group" option to match what we have in
gear menu and also change the heading and ".manage-group"
option to be left-aligned.
We already had the code to override the margin but it was not
being applied due to CSS specificity. This commit fixes it.
Due to this change, there was too much space on the left of
member names, so this commit also decreases the left padding.
This is a follow up commit to 2f1ea2fe4e,
for dark mode. The previously mentioned commit fixed the issue of help
link widget turning to blue instead of inheriting the color in light
mode only.
Moves the section in support views for any current plan details
to a new template: `templates/analytics/current_plan_details.html`.
Also, updates the PlanData dataclass to have a boolean that checks
if the current plan tier is the self-hosted legacy plan.
Karl Stolley
Aman Agrawal
N-Shar-ma
Sayam Samal
Pratik
CIC4DA
Lauryn Menard
Adnan Shabbir Husain
tnmkr
sujal shah
nimishmedatwal
PieterCK
Kislay Verma
Jose Corte
Shubham Padia
Mahhheshh
Afonso Azaruja
adnan-td
Anders Kaseorg
Aditya Bajaj
evykassirer
Vector73
Tim Abbott
Prakhar Pratyush
Sahil Batra
Alya Abbott
Mateusz Mandera
shashank-23002
Varun-Kolanu
somudas
ayush amawate
vighneshbhat9945
vighneshbhat9945
Aditya Kumar Kasaudhan
sayyedarib
Vidhi Agrawal
sanchi-t
afeefuddin
ecxtacy
kota-karthik
Joydeep Bhattacharjee
Karl Stolley