Commit Graph

175 Commits

Author SHA1 Message Date
evykassirer f6c9b515c7 input_pill: Redesign input pills.
This commit also replaces the close button with
an svg. This is part of the app redesign, and
preparation for the upcoming search pill project.
2024-06-20 15:16:17 -07:00
Shubham Padia 628757a2df left_sidebar: Use same color for active narrow filter for dm section.
Fixes #30467.
2024-06-19 18:10:15 -07:00
Shubham Padia e9f3371eca css: Remove unused css rules for background colour in dark theme.
We don't need this explicit rule anymore, since the css variable will
change the background color from zulip.css itself.
2024-06-19 18:10:15 -07:00
Shubham Padia b0eab81459 left_sidebar: Rename active_private_messages_section to use `direct`.
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.
2024-06-19 18:10:15 -07:00
Shubham Padia 694d457f43 css: Remove unnnecessary ids from active pm section color.
By removing the ids and setting the background-colour directly
for `.active_private_messages_section` achieves the same purpose.
2024-06-19 18:10:15 -07:00
Sahil Batra 77f327260d settings: Fix public channel creation setting in dark theme.
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.
2024-06-14 17:11:23 -07:00
PieterCK dae4c28b5b css: Add new css for rendered markdown table in dark mode.
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.
2024-06-12 06:45:00 -07:00
PieterCK e16b8eba56 css: Refactor css for markdown thead background color.
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.
2024-06-12 06:45:00 -07:00
N-Shar-ma ac3b5b3b04 compose: Redesign and relocate compose expand / collapse button.
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.
2024-06-11 14:13:10 -07:00
N-Shar-ma 41d790bd08 compose: Make the preview box background color same as the textbox's. 2024-06-11 14:13:10 -07:00
Aman Agrawal 371cd0da6c recent_view: Use html as scroll container.
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.
2024-06-07 10:17:10 -07:00
Tim Abbott 097066f412 Revert "recent_topics: Change background color in dark mode on hover on a row."
This reverts commit 4ee37244bb.

This was not found to be uniformly agreed as an improvement.
2024-05-28 14:38:50 -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
Shubham Padia 4ee37244bb recent_topics: Change background color in dark mode on hover on a row.
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
2024-05-14 11:46:37 -07:00
Prakhar Pratyush bf2360bcf2 onboarding_steps: Remove hotspot as an onboarding_step.
Earlier, hotspots and one-time notices were the valid
type of onboarding step.

Now, one-time notice is the only valid type.

Fixes #29296.
2024-05-10 12:30:22 -07:00
Karl Stolley 7baf3e5e4d selected_message: Correctly express outline colors as variables. 2024-05-08 09:59:40 -07:00
Pratik fdbce9d889 profile_modal: Replaces underscore style classes with hyphenated one.
This commit replaces the underscore-style classes of user profile modal
with the hyphenated one.
2024-05-06 18:14:40 -07:00
N-Shar-ma 1ba3cda229 compose: Refactor recipient area to use grid layout instead of flexbox.
This is a prep commit for moving the narrow to compose recipients button
before the input, and also aids in the overall compose area redesign.
2024-05-02 14:28:04 -07:00
nimishmedatwal d73a5d06c0 compose(typeahead): Remove text color change on hover.
Fixes #29842.
2024-05-02 13:47:47 -07:00
Karl Stolley 1695b8c240 unread_marker: Handle offset entirely through CSS variables. 2024-04-30 17:35:36 -07:00
N-Shar-ma 7104c06459 css: Make all modal buttons half opaque when disabled, instead of grey.
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.
2024-04-28 10:38:58 -07:00
N-Shar-ma 6ee0825022 css: Make message send / save buttons half opaque 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.
2024-04-28 10:38:58 -07:00
Sayam Samal de25006c3d stream_popover: Redesign popover using the "popover-menu" tippy theme. 2024-04-26 10:35:21 -07:00
sujal shah 16db1df416 templates: Use 'panel_user_list' as classname.
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'.
2024-04-20 16:59:45 -07:00
Karl Stolley 1425d2f71f message_body: Hyphenate message-time class. 2024-04-03 17:38:43 -07:00
Afonso Azaruja e217d35ccd link_preview: Fix extraneous shadow.
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.
2024-04-01 13:06:42 -07:00
Vector73 7bd893915d css: Fix css styling in "profile-settings-form".
This is a follow-up for #28924 to fix css issues related to border around
required custom-profile-fields.
2024-03-25 13:23:19 -07:00
Vector73 f758ca596b custom_profile_fields: Add "required" parameter to the profile fields.
Fixes #28512.
2024-03-21 10:48:54 -07:00
Aman Agrawal 66bc77cf61 css: Remove unused property.
`zulip.css` applies the same style to this so there is no need
for this.
2024-03-19 15:15:23 -07:00
Mahhheshh e7adde96e0 message_edit: Reimplement message history modal as an overlay.
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.
2024-03-18 17:26:28 -07:00
Aman Agrawal 4c6164ad49 ui_init: Remove unused dropdown menu code.
We migrated from bootstrap dropdown to use tippy. This change should
have been removed as part of that change.
2024-03-18 15:28:03 -07:00
Aman Agrawal 341c25d087 css: Use variables for border colors in sidebars.
This is important step to fix a bug related to making sure css
for `.column-right` doesn't apply in navbar but only `.app-main`.
2024-03-18 15:28:03 -07:00
sujal 29ca4ba662 stream_settings: Convert name to pills.
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.
2024-03-08 17:33:14 -08:00
Karl Stolley b20beda905 emoji_picker: Express colors as CSS variables.
This also adds a previously missing dark-mode background color for
reacted emoji's :focus state in the picker.
2024-03-05 14:58:58 -08:00
evykassirer 231aa098cb buddy list: Create section in buddy list for users from narrow.
Fixes #21285.
2024-02-22 16:05:27 -08:00
Sayam Samal 9a12d1798e read_receipts: Fix duplication bug when opening menu repeatedly.
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.
2024-02-22 10:49:29 -08:00
Pratik 4f89a0f605 user_profile: Add "copy link to profile" button in user_profile_modal.
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.
2024-02-15 17:17:38 -08:00
Vector73 6801ea33ba message_move: Disable stream select dropdown for unprivileged users.
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.
2024-02-14 12:46:13 -08:00
Tim Abbott f04b54ff47 css: Remove unused boostrap nav-header styles. 2024-01-25 18:35:38 -08:00
Sayam Samal 222364733f emoji_picker: Restructure CSS related to the emoji picker.
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`.
2024-01-25 18:15:45 -08:00
Sahil Batra a6370fda68 settings: Do not use bootstrap tabs in bots panel.
This commit replaces the boostrap tabs with our own
tabs implementation from components.ts. This is part
of the bootstrap removal project.
2024-01-25 14:28:48 -08:00
kota-karthik 9143172619 settings: Fix color leak during row dragging in tables.
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.
2024-01-07 19:30:00 -08:00
Sahil Batra 8f795e22e8 settings: Fix discard button in groups UI in dark theme. 2023-12-30 11:15:30 -08:00
Sahil Batra 3d181a8ee1 settings: Remove "User groups" panel from settings overlay.
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.
2023-12-07 06:35:38 -08:00
Sayam Samal 027df67fdc help_link_widget: Replace blue with inherit color on hover in dark mode.
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.
2023-12-06 11:22:44 -08:00
Karl Stolley 78d767c1ee pygments: Place Quansight Labs accessible GitHub themes. 2023-12-04 13:03:34 -08:00
Karl Stolley f1a5fffae9 markdown: Express Markdown code/pre colors as CSS vars.
This ensures that all colors (text, background, and border) are
explicitly declared for Markdown-rendered pre elements, even when
the colors replicate values already declared, e.g., with Pygments.
2023-12-04 13:03:34 -08:00
Karl Stolley c3adfa2679 top_navbar: Apply current icon styles to narrow login icon. 2023-12-04 12:11:00 -08:00
Karl Stolley d85dd6bf2b top_navbar: Set new spectator button styles. 2023-12-04 12:11:00 -08:00
Sahil Batra bc2f1ab68c settings: Fix user-access setting dropdown in dark mode.
This commit fixes the design of user access setting
dropdown in dark mode including the case when the
dropdown is disabled.
2023-11-30 12:33:44 -08:00