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.
This adds the new tabs from /plans to:
* /for/business
* /self-hosting
And it isolates legacy styles to preserve the tabs on
/for/education
Fixes: #28013
In this commit, we add css to help link widgets so that they can inherit
the color property on hover,
Changing `.help_link_widget` selector to `a.help_link_widget` allows
us to increase the specificity of the selector, thus enabling us to
override the on hover property set by the bootstrap classes.
Prior to merging, this commit and others in the PR should be adjusted
and squashed for a cleaner history.
Co-Authored-By: Vlad Korobov <terpimost@gmail.com>
It appears as though we're still setting a background color,
but that is only to push back against the background set by
Pygments.
However, code blocks in mention messages get the same color
background as ordinary messages, preserving contrast on syntax
highlighting.
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.
The "send_invoice" and "charge_automatically" strings used by stripe
for the `collection_method` are referred to both as the "billing
method" and "billing modality" in the billing code.
Because we send this as data to stripe as either `collection_method`
or `billing_modality`, renames any references that are any form of
"billing method".
We reduced the width of "Actions" column too much in stream subscribers
and group members list when there were no users matching the text in
search input and it did not look good because of "Actions" heading
being shifted to extreme right.
This commit fixes it by removing the "actions" class on the heading,
which was used to set the width to "1%" which is needed for tables
with only icons in buttons to avoid unused space but not here.
As a result of removing this class, the CSS of "min-width: 100px"
is being applied to the column, but that's fine atleast for stream
subscribers list as it did not look good before due to scrollbar
overlapping the buttons and it looks better now.
For the group members list, we set min-width to 80px, as we do
not require 100px width and it is enough to avoid overlapping
scrollbars to an extent.
The overlapping scrollbars problem is still not fixed completely
but that will handled in a separate commit. This commit was
just to make the heading row look better when there are no users
in the list.
This commit removes unnecessary border related CSS for stream
subscribers and user group members table. The border properties
set on tr elements are not required as we set borders on td
elements and we also remove the border-radius set on table
element as we set border on the required th (and td elements
in further commits) elements and the border-radius was anyways
set to 6px when the border-radius on th element is set to 4px.
This commit updates the message shown for empty group members
list to use "members" instead of "subscribers" and also updates
the wording of messages in both stream subscribers and group
members list to match with the one shown in right sidebar users
list.
We also show different message when there are no subscribers or
members matching the filter text.
This commit adds support to join and leave buttons from the
left section using the plus/checkmark icon present towards
left in each group row.
Fixes part of #25538.
This commit adds a button to join or leave a user group
in the right section of stream settings overlay to the
right of tabs like we have for streams.
Fixes part of #25538.
This commit adds code to change the background color of the
disabled dropdown widget to be same as we have for "select"
elements and also updates cursor to be set to "not-allowed".
This CSS style was added to ".unsubscribed" selector inside
".stream-header" and ".group-header" elements but the
".unsubscribed" class is only added to the subscription
button which is not inside ".stream-header" element.
To extend the drag and drop upload area to blank areas after sidebars,
we now detect the drag/drop event on the entire ".app" division.
We also change replace `width` and `height` css properties with
`min-width` and `min-height` properties respectively, to make sure
that the ".app" div spans the entire width and height of the viewport.
Fixes: #27550.
Despite the existing comment in the CSS, the previous DM row was
22.5px tall. Adjusting the padding makes for 22px tall box, which
greatly improves the centering of the unread count within its
bounding box.
Rules followed:
1. Bold and highlighted background if the mention was processed
as a mention that includes you.
2. Bold personal mention (but not highlighted) if you were mentioned
but not subscribed at the time.
3. Otherwise not bold, no highlighting.
As we plan to keep the mention pill CSS the same if a user
was mentioned via that personal/wildcard/usergroup mention
irrespective of whether the user is subscribed or not, we use
usermessage flags to determine when to add 'user-mention-me' class.
Fixes#27654.
This commit updates the backend code to allow changing
can_access_all_users_group setting in development environment
and also adds a dropdown in webapp UI which is only shown in
development environment.
As reported on #27270, the emoji picker in the set status modal was
not opening when pressing enter. This commit adds a keypress event
listener to the emoji picker in the set status modal, and opens the
emoji picker when the enter key is pressed.
Fixes part of #27270.
Renames CSS rule that styles Zulip UI icons in the help center
so that it makes sense to use it regardless of whether we are
documenting a mobile or desktop/web feature.
Earlier the `/poll` slash command was the only way to create polls.
To increase user friendliness with a GUI, a button to launch a modal
to create a poll, has been added to the compose box. This button is
enabled only when the compose box is empty, to avoid complexities with
losing / having to save as draft any message already being composed.
The modal has a form which on submission frames a message using the
`/poll` syntax and the data input in the form, and sets the content of
the compose box to that message, which the user can then send. The
question field is mandatory for form submission.
Fixes: #20304.
This is a preparatory commit for new formatting buttons which are added
in the following commits.
Earlier we used multiple classes, each of which handled the hiding or
showing of the element it was applied to, at each breakpoint. Now all
the media queries of those classes have been combined into a new class,
for cleaner and more reusable code. This new combined media query is
also updated to accommodate the new formatting buttons.
The user avatar flowed out of the popover and this commit
fixes it by increasing the popover width by 2px and making
it 242px (240px for avatar and 2px for borders). This
also changes the width of user group popovers, but it is
only a slight change so should be fine.
This commit adds new API endpoint to get stream email which is
used by the web-app as well to get the email when a user tries
to open the stream email modal.
The stream email is returned only to the users who have access
to it. Specifically for private streams only subscribed users
have access to its email. And for public streams, all non-guest
users and only subscribed guests have access to its email.
All users can access email of web-public streams.
Align the `dropdown-widget` and `<select>` UIs.
Removed default `<select>` tag styles with `appearance: none` css.
Added custom chevron-down icon with `background-image` attribute
to the `<select>` tag.
The svg icon is used in a CSS variable with a data URI.
The CSS variable is used to set different colors for dark and light
theme.
Tweaked by tabbott to scope selectors appropriately and also delete a
10px font-size in one settings dropdown widget.
Fixes#26859.
This commit allows the user to change notification settings even though
the stream is muted and adds a line of text in stream settings and
notification settings.
Fixes#27272.
This switches to our preferred dash-separated classnames
instead of underscore-separated, and also updates the
classname to be differentiable from users that aren't
part of the current narrow.
Until the next commit that splits the buddy list, the
name is a bit inaccurate since it still contains all
the users.
This is a case where the use of alpha channels in HSL color values
shows its limits.
The use of an alpha channel is necessary for the background
elements for the top navbar elements, because they sit over the
top of the navbar's bottom border (actually an inset shaddow).
However, it's impossible to use the alpha-channel based color on
elements like the unread dot, where the border actually sits on
top of the element itself--meaning that the effect would be a
larger dot with an imperceptibly darker ring around it.
What this commit does is use a technique suggested by Anders
Kaseorg for using CSS's `color-mix()` functional notation to
calculate an opaque version of the alpha color for use on
elements that do not or cannot directly take the color with
the alpha channel.
See CZO discussion:
https://chat.zulip.org/#narrow/stream/6-frontend/topic/alphas.20in.20color.20definitions/near/1670102
This fixes a state where the expanded left sidebar appears under
the navbar at the smallest mobile views.
It also provides a stop-gap fix for the right sidebar's USERS
heading, making it align better (but certainly not perfectly)
with the left sidebar's.
3ac0c3c401 incorrecly removed
specificity declarations needed to prevent that CSS from applying to
the right sidebar, which hasn't been properly prepared for this
change.
This brings modern alignment methods to all vdots instances,
including in views, streams, and topic rows.
This also aligns the vdots in the condensed view row with
all the others in the left sidebar.
This is according to Vlad's design in figma which differs from the
style we have in `tooltip-hotkey-hint`.
I used font-weight: 500 instead of 400 as it looked nicer and since
Vlad used Source Sans Pro as font-family which we don't have.
This helps us add elements like hotkey hint which can take more
space that available for text. There are no visual changes.
Removed some duplicate properties too.
Replaced element selectors with specific selectors, those that
remain are intentionally left.
This is to avoid inner-most selectors as element selectors.
The reason being is that browsers evaluate selectors from right
to left, meaning that every time a selector ends in an element,
the browser has to work that much harder whenever and wherever
on a page it encounters the element.
This slightly increases the size of the clock for recent
conversations, and descreases the size of the left-aligned icon
for all messages.
Icon sizes in the expanded view are left untouched.
This also introduces a combo grid/flex layout, which will also be
applied to the DM and Streams headings.
Because there are now multiple classes referenced from the
Puppeteer tests, those selectors now include the expanded
navigation area's parent ID selector.
We were using id before to increase their specificity, but
since it is possible for multiple empty_list_widget_for_list/table
to be in DOM at the same time, we should use a class here. Used
`!important` here so that we can force our padding where these
classes are used.
The CSS variables for heights in subscriptions overlay uses
"modal" word but we actually use overlays for subscriptions
UI, so this commit renames those variables to better names.
We use "modal-body" class in informational overlays and
"About Zulip" overlay. For informational overlays, the
class is used on the element acting as scroll container
so we just rename the class to "overlay-scroll-container".
For "About Zulip" overlay, we do not support scrolling
so "overlay-body" seems a better class name.
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 is a UI experiment which change the regular and on-hover
colors of the green checkmark in All Streams UI to match the send
button of the compose box.
Co-authored-by: Raghav Luthra <rluthra2002@gmail.com>
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>
Add a personal menu dropdown that opens on clicking user avatar icon
in navbar added in previous commit.
The args passed to render_personal_menu() in onShow() are returned by
get_personal_menu_content_context() in popover_menus_data.js so that
they can be unit tested.
Additionally, added CSS to get a custom arrow for dropdown menu.
Added a `?` hotkey in keyboard shortcuts option in personal_menu
dropdown in a style similar to our tooltip's hotkey by adding
? in a span with class .tooltip-hotkey-hint and adding some CSS.
Fixes part of #22802.
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
Sahil Batra
Mateusz Mandera
Sayam Samal
Aman Agrawal
Karl Stolley
Prakhar Pratyush
Lauryn Menard
Tim Abbott
N-Shar-ma
evykassirer
David Rosa
aryan
Vector73
Anders Kaseorg
ecxtacy
Pratik
m-e-l-u-h-a-n
Hardik Dharmani