The row of buttons is placed using CSS grid template areas so that
visually it is now inside the bottom edge of the textbox. The color of
the buttons row and individual buttons is changed to match the color of
the textbox. All textbox border / box shadow properties are now applied
to its parent instead which is extended under the buttons' row, so that
its border snuggly fits around the buttons row too.
Notable side effects:
- In dark mode the textbox in focused state now has a light border which
does not match the recipient input's current border which doesn't change
when focused. Likely, the recipient input should be updated to match the
textbox's border color.
- The dividers in the formatting buttons row are not vertically centered
now. This should be figured out soon.
Fixes: #28702.
These styles were from before opting to work with themes maintained
by the Pygments project. Their removal will make it much easier to
upgrade Pygments themes in the future, and more importantly,
reduce the effort required to square syntax highlighting in the web
and mobile apps.
This style is currently only used for search suggestions. Soon,
styling for those suggestions will become more specific, and so
for now we'll keep those styles in search.css to be more clear
about what the new styles affect. If we want to repeat something
like this in the future somewhere else in the app, we can come
up with a generic styling then once we have a better idea of
what that will look like.
Removes some CSS rules used in the invite user modal that were
already being applied via the shared `modal_select` class.
Co-authored-by: Lauryn Menard <lauryn@zulip.com>
Fixes#30403.
Having tabIndex set to 0 led to keyboard focus being put on
a scrollbar container, which led to users having to tab twice
to skip a container.
This commit also removes instances of tabIndex being set to
-1 programatically for certain cases, since it is -1 by default now.
This commit also removes `outline: none` for simplebar since
that property is not needed anymore because the wrapper is
not focusable anymore.
Rename `show_all_private_messages` to `show-all-direct-messages`.
We've also hyphenated the attribute during the rename.
Part of the private_message to direct_message rename project.
Rename `toggle_private_messages_section_icon` to
`toggle-direct-messages-section-icon`.
We've also hyphenated the attribute during the rename.
Part of the private_message to direct_message rename project.
Rename `private_messages_section_header` to
`direct-messages-section-header`.
We've also hyphenated the attribute during the rename.
Part of the private_message to direct_message rename project.
Rename `private_messages_section` to `direct-messages-section`.
We've also hyphenated the attribute during the rename.
Part of the private_message to direct_message rename project.
For the compose control buttons, the compose close button, and the send
later vdots button, we show the focus ring only on `focus-visible` and
not on `focus`.
Fixes part of: #27117.
The css variable `--color-outline-focus`, which affects focus rings
throughout the app, now has a different value defined for the dark theme
but this should have no visible effect, and help clean up the code.
This is a prep commit for the next, which shows focus rings only on
`focus-visible` and not on `focus` for composer buttons.
The margin properties in question were getting overridden by other
css, so they were not important. The width was not making a difference
in case of channel filter, since its parent was a flexbox. For the
topic list, the width was getting overriden by
`#stream_filters .input-append.topic_search_section input`.
Rename `active_private_messages_section` to
`active-direct-messages-section`.
We've also hyphenated the attribute during the rename.
Part of the private_message to direct_message rename project.
We now right align recipient input (even at very narrow widths) and
banners to the textbox, and move the close button to the absolute top
right corner of the compose box, updating the icon to be slimmer, bigger
and purplish, and adding a background highlight on hover.
This involved refactoring the send control area width into a responsive
css variable, and simplifying the html structure of the compose box.
Fixes: #28792.
Previously, the typing notifications used to appear between the
message list and the mark as read banner in a thread. This would
cause the banner to shift down whenever someone starts typing,
and shift back up if everyone stops typing.
This frequent bouncing of the banner could be distracting, and hence,
is fixed by moving the typing notifications to below the mark as
read banner.
Add new app variable for .notification-table class.
This variable is responsible to set the tables' thead
background color in dark theme. Previously it depended
on a genral CSS rule in dark_theme.css for its thead
color, however that cluster of rule has been deprecated
in #29859.
Note: The `thead` background color for the notification
table in the light theme is transparent, so the new
variable in `app_variable.css` does not have a
corresponding value for the light theme.
This optional commit also fixes#30431. It refactors the CSS
for the .table-bordered class, which is used directly by the
tables in the info_overlay menus (keyboard_shortcuts,
search_operators, markdown_help). This approach differs from
PR #30431, where the CSS for .overlay_body—a wrapper div
around these tables—was edited instead.
This commit make the CSS rules for .table-bordered class
use a new CSS variable for its border color where appropriate.
This is aligns with how we organizes CSS in #29859 and in
cd63e8d93cb0f84ec1e4ead348a225cb798f9cf0.
Fixes#39431.
This is a prep commit to an optional commit. It rolls back the
changes from #30431 because #30449 tries to fix a wider regression
that included the issue #30431 tried to fix.
This commit fix the regression for tables at uses the
.table-striped css, which are primarily used at the
settings menu.
In #29859, we began organizing CSS into more specific
variables and selector, which led to the deprecation of
several general CSS rules that affected these tables.
The fix switches the border-color value used by the
.table-striped css rules to a new CSS variable that
contains both dark and light theme values.
Fixes#30449
When left sidebar is hidden between 1200px and 768px, we show
smaller realm icon logo instead of the full realm logo. Also,
we use the new space to expand the middle column to better show
the narrow description.
This commit also sets all popover labels to flex grow into the remaining
available space. This allows us to align the unread counters, if any
to the rightmost corner of the menu option. This change, however, does
not lead to visual changes in any popover.
Fixes part of #28699.
Previously, there were three different sections for managing active
users, deactivated users and invitations.
This commit combines users section has into a single tabbed panel.
Fixes: #26949.
Co-authored-by: shashank-23002 <21bec103@iiitdmj.ac.in>
Changed the title of the first panel to
"Create channel: configure settings" and title of second panel to
"Create channel: add subscribers".
Implement logic in stream_create.js to show and hide both the panels.
Add two buttons to facilitate switching between the tabs or panels.
Added new descriptions to 'stream type descriptions'.
Removed the "Stream permissions" heading to simplify the panel.
Moved the "Announce new stream in {stream}" option just above
"Default stream for new users".
Implement a collapsible "Advanced configurations" section,
collapsed by default, to accommodate less commonly changed settings.
This allows for future expansion of stream permission configurations.
Fixes part of #29403.
This commit updates CSS to use a common selector to set the
width and color properties for all dropdown widgets in the
"Organization permissions" panel as we expect all dropdown
widgets to have same width and color.
This helps in avoiding bug in UI if someone forgots to update
the CSS while adding a new setting using dropdown widget.
The correct CSS was not being applied to the public channel
creation setting dropdown in dark theme and this commit fixes
it by just updating the CSS to use a common selector for all
dropdown widgets in "Organization permissions" panel, so that
we would avoid having this kind of bug in future when more
settings are added.
We do not update the CSS to use a common selector for all
dropdown widgets in the whole settings overlay because
the one used for notification stream settings use different
text color for now.
This commit refactors the CSS for table in info_overlay
menus (keyboard_shortcuts, search_operators, markdown_help).
In #29859, we began organizing CSS into more specific
variables and selector, which led to the deprecation of
several general CSS rules that affected these tables. The
fix adds a new variable in app_variables.css which is used
at a wrapper div specificly targeting these tables.
Fixes#30428.
Extracts code for generating the events table strings to a separate
function and uses templates so that the HTML is clearer.
Updates events table classes for CSS to start with "api-" for
clarity.
Creates a dataclass for getting the data needed for an individual
event's documentation and uses that dataclass in a separate
function for generating the strings for each event's documentation.
Uses templates for parts of event documentation with HTML and CSS,
and updates CSS classes to have clearer names.
The messagebox-wrapper div is removed, and it's only style `flex: 1` is
applied to the messagebox div. The `height: 100%` and `margin-top: 5px`
styles on the messagebox div were earlier causing it to move 5px down,
outside the messagebox-wrapper div, when the compose box was expanded.
Add a new dark mode css in app_variable.css for rendered
markdown tables. This rule sets a brighter color for tables
in messages / chat to make it more visible when the user is
using dark theme.
Fixes zulip#29856.
This refactor aims to make managing css for rendered
markdown table easier by abstracting the css for thead
background color into a new variable in app_variable.
This refactor aims to make managing css for rendered
markdown table easier by abstracting the css for table
border color into a new variable in app_variable.
Since left sidebar was in fixed position, mac's rubber-band scroll
effect was not working on it while it was working for others making
the bounce look weird.
Fixed by letting it bounce with the rest of the elements on the page.
The compose expand / collapse button is moved from the top right of the
compose area to the top right corner inside the compose textarea /
preview.
The textarea / preview and the button area shares the same grid parent.
25px extra padding is added to and margin is subtracted from the right
of the element so the button is visually inside it. It appears only on
hovering the compose area, and uses a new custom icon.
Fixes: #28791.
We don't need to reduce height of user list toggle button on
narrow widths. Reduced height is already applied to the user list
toggle button when the window height is below a threshold.
Removes the fixed height of the input field in compose
DM recipient box. This commit makes the behaviour of recipient
compose box equal to input pills used else where.
Fixes: #27688.
* `.container` class is only used in `/activity/support` and
`/activity/remote/support` pages. It is also used in emails but
it has its own CSS.
* Since the CSS applied is localized and looks good, we just
move the CSS relevant to us to `activity.css` which is used
by both of these pages.
* Searched `"container"`, ` container `, `"container ` and
` container"` to look for the uses of this class.
This commit, adds the `.popover-menu-tab-group` class to the tab pickers
that appear together with the other popover menu options and thus
need to match their spacing and margins for a uniform look.
This removes the need to maintain a cluttered list of tab pickers that
need to be styled as such in the `popovers.css` file.
As part of the popover menu redesign, this updates the topic visibility
popover to use the new "popover-menu" popover theme and improves
accessibility by using appropriate ARIA attributes.
This also moves the `:focus-visible` CSS rule to apply to any tab
picker in a popover, removing the need to explicitly add it to each
tab picker.
Fixes part of #28699.
Create has:reaction search operator and search suggestions.
Create sidebar view for the user to view their messages that
have reactions using has:reaction sender:me operators.
Add custom heading for the view and tooltip in the sidebar.
Add documentation for the new operator.
Fixes: #27328.
Fixes#17933, #27517
Instead of `recent_view_table`, we make `html` as our scroll container.
This fixes an important bug for us where filters sometimes disappear
due to them scrolling under navbar which is unexpected. Since we are
now using separate containers to display rows and
filter (while includes table headers), where filters use sticky
positioning, this bug will be fixed.
The chevron arrow icon before the topic / dm user field now also acts as
a go to conversation button. Whenever the functionality is available,
the plain icon changes to look and behave like a button. The old go to
conversation button on the right of the field is removed.
Fixes: #28697.
This commit updates the sidebar topic actions popover to use the new
sliding tab switcher for the topics visibility policy switcher.
This also includes changes such as hiding the popover only on
successful request completion, and adds error feedback by indicating
it via the sliding animation.
Fixes#28526
* Removed `container` and `row-fluid` class from error pages.
* Use a variable for footer height.
* Made header sticky instead of fixed allowing us to position
page content without adding arbitrary padding or margin at top.
Header is around 60px in height, so reduced that much top padding
or margin.
This refactors popover list structure to use a flattened `ul > li`
structure along with aria-related additions, enabling screen reader
accessibility and announcing menu length and position (`# of n`).
Added ARIA roles:
- `role="menu"` to the parent `<ul>` element, indicating it is a widget
offering a list of choices.
- `role="menuitem"`, `role="menuitemcheckbox"`,
or`role="menuitemradio"` to child elements based on their function.
- `role="group"` to the topic visibility picker, identifying it as a
container for related menu items.
- `role="none"` to `<li>` elements, removing the implied `listitem`
role that conflicts with the parent menu structure.
This refactors popover list structure to use a flattened `ul > li`
structure along with aria-related additions, enabling screen reader
accessibility and announcing menu length and position (`# of n`).
Added ARIA roles:
- `role="menu"` to the parent `<ul>` element, indicating it is a widget
offering a list of choices.
- `role="menuitem"`, `role="menuitemcheckbox"`,
or`role="menuitemradio"` to child elements based on their function.
- `role="none"` to `<li>` elements, removing the implied `listitem`
role that conflicts with the parent menu structure.
This refactors popover list structure to use a flattened `ul > li`
structure along with aria-related additions, enabling screen reader
accessibility and announcing menu length and position (`# of n`).
Added ARIA roles:
- `role="menu"` to the parent `<ul>` element, indicating it is a widget
offering a list of choices.
- `role="menuitem"`, `role="menuitemcheckbox"`,
or`role="menuitemradio"` to child elements based on their function.
- `role="none"` to `<li>` elements, removing the implied `listitem`
role that conflicts with the parent menu structure.
Also removes the unused `should_display_reminder_option` code, which
should have been removed in f40855bad2.
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.
Karl Stolley
Aman Agrawal
sanchi-t
N-Shar-ma
evykassirer
Ujjawal Modi
Shubham Padia
roanster007
sujal shah
opmkumar
PieterCK
Sayam Samal
Kislay Verma
Sahil Batra
Lauryn Menard
Vector73
adnan-td
Sayam Samal
Kenneth Rodrigues
Tim Abbott
Anders Kaseorg
ecxtacy
Isabela Pereira
Shubham Padia
nimishmedatwal
Prakhar Pratyush
Pratik