We only use "modal-footer" class in stream and user group
creation forms which is actually not a modal, so this commit
renames the class to a better name "settings-sticky-footer".
This commit changes the UI for subscribing to streams on stream rows
to be more like the mobile version (zulip/zulip-mobile#5333).
The current design made it hard to discover how to subscribe to
streams via left panel and is not very clear on the fact that
its not possible to subscribe to private streams.
To address this the following changes have been made:
- For unsubscribed streams, the on hover-checkmark is replaced by
a "+" which is always displayed and has on-hover highlighting.
- For unsubscribed private streams, the "+" is disabled.
- Tooltips with appropriate messages are added on the "+" sign for the
above 2 cases.
- A tooltip has also been for the on-hover checkmark for subscribed
streams.
Fixes: #22217.
Co-authored-by: Raghav Luthra <rluthra2002@gmail.com>
This commit adds user avatar icon in navbar. This new avatar icon
will be used as dropdown toggle button. Made `.column-right` a flex,
every element in right-side navbar is in this div now rather than all
elements positioned absolutely with hardcoded values like before.
Fixed some CSS as per new flex layout if `.column-right`.
Fixes part of #22802
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.
This is a Prep commit. This commit fixes the color of
`BACK TO STREAMS` label in the dark theme to be equal to other labels
in left sidebar such as `STREAMS` label.
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.
We use "modal-footer" class in stream and user group creation form
and this commit adds bootstrap CSS rules for it to subscriptions.css
so that we can remove the CSS from bootstrap.css.
Adds warning banner to the organization settings overlay/tabs
for demo organizations. For owners, clicking on the link in the
banner opens a modal to convert the demo organization into a
permanent organization.
For admins that are not owners, clicking on the link will go
to the help center article on demo organizations.
Non-admin users will not see the warning banner.
The modal for converting a demo organization requires the owner
to have set their email address. Once the owner's email address
is set, then the organization can be made permanent by changing
the subdomain of the organization. The deletion date for the
demo organization will be removed as part of updating the
subdomain.
The organization owner must also have updated the organization
type to be any value other than unsepecified to convert the
demo organization to a permanent organization. The modal's
submit button will be disabled if that is the value for the
organization type in the form. The demo organizations created
in the dev environment now have their organization type set to
unspecified on creation.
This is a part of #19523.
Co-authored by: Lauryn Menard <lauryn@zulip.com>
On hovering the not-selected option in the left sidebar
topic popover widget to change visibility policy, a wiggle
effect was observed.
This commit fixes the wiggle effect.
The internal design here was that we had no-select on the outer
element and auto-select on these inner elements to override it.
But, `auto-select` class seems to have no effect so we are
removing it.
This commit renames search-container class used in stream and
user group settings overlay to list-toggler-container since
the element does not contain search UI and instead contains
the toggler for "Subscribed" and "All streams" and similarly
for "Your groups" and "All groups".
We add tabs to make distinction between the groups the user
is a member of and all groups in the realm. This is a preliminary
commit and there would be following immediate follow-ups to this:
* Persisting the active state of selected group in the left panel
as the list updates with search and thorugh tab toggles.
* Updating the display of group in the left panel list on membership
update events.
This expresses the colors for vdots icons in just three variations,
all as CSS variables. The colors are all derived from the existing
design, and the dots colors in the streams/topics area was used as
as reference. The only visual change here, then, is to the global
filters area, whose vdots were the outliers prior to this change.
The three variations are:
1. hint: for touchscreens where a :hover state is not available
2. visible: for all screens when a parent element is highlighted
3. hover: for when the vdots themselves are hovered
The selectors have been streamlined to use the .sidebar-menu-icon
utility class, and the hover-within-a-hover color on vdots is
expressed more directly, eliminating the need for
selector-specificity busting via !important.
Fixes: #20600
This commit adds the CSS variable '--color-unmuted-topic-list-item'
for the unmuted topic's color in the topic list.
The color for both the light and dark themes is defined in
'zulip.css' and used in 'left_sidebar.css'.
This approach helps to remove the use of the selector 'unmuted_topic'
only for color definition in 'dark_theme.css'.
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.
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.
In commit 5edc8fc, abstract classes were added to the
drafts overlay, but the classes that were already there
were not removed. This resulted in the same styles being
applied twice.
This commit re-adds bootstrap CSS rules defined using "table"
class to the specific CSS files where CSS for different tables
is present.
This is a prep commit for removing table related bootstrap CSS
from bootstrap.css.
This commit renames "dialog_cancel_button" class in the exit button
of modals to "dialog_exit_button", which seems a much better name
for a button that is used to close a modal.
The terminology "arrows" comes from historical functionality
that is no longer relevant, so searchbox_container is a more
clear and accurate name.
It would be nice in the future to see if we can remove
some of the nesting of HTML (#searchbox, #searchbox_form,
and #searchbox_container).
This commit adds support for following a topic from the topic
three-dot menu in the left sidebar.
Three options, i.e., 'Mute topic', 'Unmute topic', and 'Follow topic',
are shown at the top of the menu (in the mentioned order), regardless
of whether the stream is muted or unmuted.
We can no longer set the topic's visibility_policy to INHERIT
(the default value) from this menu.
The changes are visible in the development environment only.
Fixes#25917.
Co-authored-by: Prakhar Pratyush <prakhar841301@gmail.com>
Co-authored-by: Hardik Dharmani <Ddharmani99@gmail.com>
This commit re-adds required bootstrap CSS rules for
search box input element.
We also need to add the code to handle dark theme CSS
here to make sure the CSS for dark theme is prioritized
correctly.
This commit re-adds bootstrap CSS for custom expiration time
input in invite modal.
We also need to add the code to handle dark theme CSS here to
make sure the CSS for dark theme is prioritized correctly.
This commit also refactors the CSS to modify the selectors to
be simple and remove unnecessary IDs.
This commit adds a cancel button to the upload banner, replacing
the previous close icon. Now, the cancel button is used to cancel
the upload process, while the close icon is used to remove the
upload banner without interrupting the upload.
A new case has been added to the switch statement in the 'upload.js'
file to handle the functionality of hiding the banner called
'upload_banner_hide_button'.
Replaced the functionality of the 'compose_banner_close_banner' case
inside the switch statement with a new case called
'upload_banner_cancel_button'. The cancel button is now assigned
the selector 'upload_banner_cancel_button'.
`Cancel` button is only preset for banner which tracks
progress while a file is being uploaded.
To maintain consistency with other banners, the cancel button's
dimensions and color have been adjusted to match the style of other
buttons present in different banners.
Fixes: #21156
Previously, the HTML structure of unread banners continued to utilize the
old stylings. We are currently in the process of simplifing both the
compose banner and unread banner stylings into one. These change will
update the HTML structure to be the same as the compose banner and use
the new stylings.
Previously, we have duplicate stylings in compose banner and unread banner.
This is rather messy and creates a lot of styling rules. We should define
an abstraction for them. This change will rename compose_banner
to main-view-banner.
Previously, we have duplicate stylings in compose banner and unread banner.
This is rather messy and creates a lot of styling rules. We should define
an abstraction for them. This change will rename compose_banner_action_button
to main-view-banner-action-button.
Previously, we have duplicate stylings in compose banner and unread banner.
This is rather messy and creates a lot of styling rules. We should define
an abstraction for them. This change will rename compose_banner_close_button
to main-view-banner-close-button.
This change enables the unread marker to participate as a grid item,
rather than the product of various absolute/relative positioning
hacks. The intention is to therefore prevent the blue active-message
box from disappearing on browsers that have zoomed out (~80% zoom).
With grid in place, this also makes for a more robust presentation
of each message row, and named grid areas should make it possible to
modify and extend the grid into the future.
Finally, this change removes styles that are no longer necessary in
the context of CSS Grid.
In #22524, we have updated the compose banner to the new, updated design
while the unread banners have remained the same. When comparing them side
by side, they look rather old and outdated. We should apply the updated
design to the unread banners as well.
Fixes: #25551.
Now that the navbar is a different color, we want it to also
take up the full width of the screen. Because the navbar has
margin, this commit adds a new div. To not have to add a new
div, the scrollbar would need to be moved to the `html`
element, which is a bigger project.
This commit also moves the zulip logo to be left-justified instead
of centered, since it looks strange centered with the full
width navbar.
Previously, infomational banners didn't have any dark theme stylings which
resulted in a messy and terrible contrast with the dark themed app. These
changes adds those missing styles and uses the same stylings and colors
as the compose banners. Thus, making a definite improvement then before.
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.
We now show a banner on opening the compose box and changing the
stream in dropdown, if a user is not allowed to post in a stream.
The "Send" button is also disabled if user is not allowed to post
in the stream.
This commit also moved the CSS for disabled modal button in dark
theme below after the other CSS for modals as we are using the
same CSS for the "Send" button as well in disabled state.
We add a new banner informing the user if and when they send a message
to a muted topic / stream. It also has a button to unmute the topic.
Fixes: #24246.
If there are unread_mentions in unmuted topic in muted stream then,
show `.subscription_block unread_mention` in regular font not faded.
An additional parameter is passed to the update_count_in_dom function
to add or remove the "has-unmuted-mentions" class from the
.subscription_block, allowing for the relevant CSS to be applied to
display the unread mentions in regular font.
Fixes part of #24243.
Add class unmuted_topic to li.bottom_left_row element if topic is
unmuted. Add relevant CSS for .unmuted_topic to display unmuted
topics in regular font.
Fixes part of #24243.
Previously, muted streams in the left sidebar were faded using
opacity: 0.5, and on hover, the opacity was increased to 0.75.
This opacity was applied to all elements within the muted stream,
including the stream-privacy icon, names of the stream and topics
within, and the unread_count.
In this PR, we changed this behavior to handle opacity for each
element separately. We changed the opacity of the stream-privacy icon
and unread_count, while for the text (names of stream and topics),
we changed the alpha factor for the hsla color property.
The reason for this change is that we can have different opacity levels
for the unread_count and other elements. This will allow us to add
feature in next commits in this PR to set the opacity of unread_count
to 1 while keeping it at 0.5/0.75 for other elements in the case of
muted streams with unread messages in unmuted topics.
Fixes part of #24243
The logic to avoid first unread message with a date row to not
have an unread marker works purely based on `z-index` and seems
to be working nicely.
This avoids a bug where the background color of the date row
of the first unread message is different from others.
This will help up achieve 2 things:
* Have a lot of common CSS for drafts and scheduled messages.
* Have common JS for things like keyboard navigation between drafts
and scheduled messages.
Following important changes are being made here:
* color_class lib is removed since it not used anywhere now.
* We don't need the `dark_background` class since the background
color is already adjusted based on color scheme. So, all
instances of it being used is removed.
Changed the `.enter_sends` css selector for launching tippyjs popover from
`compose.hbs` because it was colliding with `.enter_sends` selector present in
`organization_user_settings_defaults.hbs`.
Before this change when an admin tried to change user realm default setting of
`enter_sends` it was opening a tippyjs popover despite being a checkbox and it
was hitting `/json/settings` endpoint instead of `/json/realm/user_setting_defaults`.
postcss-preset-env transpiles this back as necessary. (It does a
better job than we did, in fact: we had several four-argument hsl()
calls that should have been hsla().)
Signed-off-by: Anders Kaseorg <anders@zulip.com>
Earlier, if the content of the modal (apart from the header and footer)
overflowed, the whole modal would become scrollable which would hide
the modal header and footer on scrolling. This commit makes only
the modal content scrollable and keeps the modal header and
footer static.
Ever since we started bundling the app with webpack, there’s been less
and less overlap between our ‘static’ directory (files belonging to
the frontend app) and Django’s interpretation of the ‘static’
directory (files served directly to the web).
Split the app out to its own ‘web’ directory outside of ‘static’, and
remove all the custom collectstatic --ignore rules. This makes it
much clearer what’s actually being served to the web, and what’s being
bundled by webpack. It also shrinks the release tarball by 3%.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
Karl Stolley
Vector73
Aman Agrawal
Prakhar Pratyush
Sahil Batra
m-e-l-u-h-a-n
Hardik Dharmani
Eeshan Garg
Tim Abbott
YashRE42
Satyam Bansal
palashb01
evykassirer
Daniil Fadeev
Ujjawal Modi
Prakhar Pratyush
Julia Bichler
evykassirer
Anders Kaseorg
Joelute
Alex Vandiver
Karl Stolley
N-Shar-ma
Lalit
Lauryn Menard
Ganesh Pawar