Currently, we shows data-no-recipients placeholder text even if
there are recipients selected. It's not visible cause it's value
is override by data-some-recipients helper text in case if there
are recipients selected.
Show data-no-recipients placeholder text only when `input` element
is first child of `pill-container`, which means there are no `pills`
selected by user yet.
@brockwhittaker wrote the original prototype for having
pills in the recipient box when users compose PMs (either
1:1 or huddle). The prototype was test deloyed on our
main realm for several weeks.
This commit includes all the original CSS and HTML from
the prototype.
After some things changed with the codebase after the initial
test deployment, I made the following changes:
* In prior commits I refactored out a module called
`user_pill.js` that implemented some common functions
against a more streamlined version of `input_pill.js`,
and this commit largely integrates with that.
* I made changes in a prior commit to handle Zephyr
semantics (emails don't get validated) and tested
this commit with zephyr.
* I fixed a reload bug by extracting code out to
`compose_pm_pill.js` and re-ordering some
calls to `initialize`.
There are still two flaws related to un-pill-ified text in the
input:
* We could be more aggressive about trying to pill-ify
emails when you blur or tab away.
* We only look at the pills when you send the message,
instead of complaining about the un-pill-ified text.
(Some folks may consider that a feature, but it's
probably surprising to others.)
In org settings, loading spinners are not visible, currently
because their size is very small.
Fix this, by increasing width and height of spinners and
adding spinner text, to make spinners more visible.
Fixes#8502
The problem that prompted this PR is that I couldn't select the API
key of a bot in chrome to copy it, but I could on Firefox.
Using the `auto` proerty value to override the `user-select`
property of a parent does not seem to be compatible
with all browsers.
This makes it easier for users to tell how Zulip ended up with an
avatar for them without them uploading one: through the Gravatar
service used across many Wordpress blogs.
Fixes#8225.
This replaces the cumbersome system we had for giving users feedback
on settings state changes in the display settings UI.
We expect this new system to be what we will attempt to migrate other
settings widgets to match over the coming weeks and months. It also
provides the opportunity to significant refactor away a lot of the
code duplication in settings_display.js.
Thanks to Brock Whittaker for redoing the styling and improving the
code simplicity.
Fixes#7622.
No need to have separate click handler for user_popovers and
message_info_popovers as the same user-id can be extracted similarly
from the target of both the click events.
Another refactor, `sender_info_popover` was confusing as it doesn't
fix into the context of rightbar user popovers so changed it to
`info_popover_actions` since that section of popovers contains popover
actions.
This adds button under "Organization profile" settings, which
deactivates the organization and sends an "event" to all the
active user and log out them.
Fixes: #8212.
This really only touches a couple of key points, but it does most of
what's needed to collapse stuff down into columns or a single column
when stuff is narrow.
Fixes#7925.
This adds a click handler to `.user-group-mention` which works in a
fashion that is quite similar to `.user-mention`. It generates and
displays a popover.
The popover has a list of members, their online status (if they are
not bots) or their bot status if they are bots (it's not clear whether
ultimately bots should be able to be members of usergroups, but I'm
able to add one, so I thought it would be worth supporting).
The popover's `UL` element has max-height and overflow-y atttributes
so large groups will grow a scrollbar.
Fixes#8300.
This reverts commit 8e2d9b8f68.
This adds the arrows back to the recipient bars because even though
it's not our end state, it looks better than the boxy design that we
had in between.
This dynamically resizes the box to fit the variable text size present
with different languages.
At the same time, it adds padding to the English version to make it
look similar to previous versions.
Fixes#8275.
When in the stream-searchbar, a user can now use the arrow keys to iterate
through the suggestions. Therefore the currently selected list element is
assigned a CSS class 'highlighted_user'.
The main functional testing is done with casper but node test are still
included to keep the high coverage.
Line-wrapping issues are resolved. Night-mode CSS handling is included.
This fixes a bug where the open graph preview bottom fade is dark
rather than white when not in dark mode, which results in a heavy
dark faded line at the bottom of the description.
These were removed in 953ee778f, along with the stream names and
right-sidebar user names mentioned in the commit message. But unlike
those, these don't get any background change on hover, so we need some
way to show the hover.
We can probably still do something that looks nicer than this, but
it's better than not having it.
This makes them roughly the same visual weight as the (non-muted)
stream icons below -- though that's imprecise because the latter
varies with color. Tested in both normal and dark-mode.
This adds some styling to make the open graph previews look a bit nicer,
including:
1. Adding a bottom fading gradient to slowly fade out text that is out
of bounds rather than chopping it off.
2. Using font anti-aliasing to make the characters appear smoother.
3. Increasing the font size of the title to give it prominence.
4. Changing the height to 80px from 70px.
Also refactor the "panels"/banner code to be a bit clearer about how
it's supposed to generically work, using [data-process] as a uniquely
identifying marker.
Fixes: #8166.
[greg: rebased and squashed a series of fixup commits.]
This properly vertically centers the deactivation modal in the
user settings section by setting the top to 50% and the transform
to -50% (50% of the height of the actual modal).
This is an alternate solution to #7888, which just removes the
animation, breaking the normal modal behavior.
The header had a padding of "20px 0 15px", which meant that there
was more padding on the top than the bottom, so it has been changed
to "15px 0" instead.
This is a partial revert of c5cdede891.
The added 4px padding made the dropdown pill not vertically center
within the portico header. This removes the padding as it was a
cosmetic change that was not necessary.
This is a partial revert of a37e993907.
This makes this UI widget more consistent with its neighbors.
tabbott: This introduces a bug with how the `full_name_field` HTML is
managed; it should be done via the `server_events.js` handler.
Previoulsy, we display "0 subscribers" if user can't access stream's
subscribers. Replace subscriber count with lock icon in case of
unsubscribed private stream, in "All stream" list.
Display warning, saying "You can not access private stream subscribers,
in which you aren't subscribed", if user can not access subscribers;
instead of showing zero subscriber to stream.
The alert word highlighting is too light to work with the font
when it is white, so this changes it to have a translucent background
so that the color adjusts to be more visible on a darker background.
This is originally taken from #7844 and is a modification of the
solution in #7847.
The reason this approach is better for the codebase is now there is
only one color to change for alert words which reduces the likelihood
that someone in the future will change the color of one theme's
alert words and not the other.
Fixes: #7844.
We no longer have a special UI setting and model
field ("emoji_alt_code") for saying users want text-only
emojis. We now instead make "text" be a fifth choice
for "emojiset".
Fixes#7406
Adds type "embedded bot" to bot creation menu. Lets
users select a bot to run from a list of bots.
Currently, this list is hard-coded into the backend.
Currently, users are warned when mentioning @all and @everyone, but not
when posting on the #announce stream. Confirm with users that they want
to send their message on #announce if over 60 people are going to be
notified.
Fixes#6928.
Previosly, a pointer cursor would display when hovering over some of the
headings in the API docs, however nothing would happen when clicked.
Fixes#7702.
This commit ensures that size of each graph is the same before and
after the data is loaded. It also adds a loading indicator to each
graph until the data is loaded.
Fixes https://github.com/zulip/zulip/issues/6490
This applies the same overflow changes to “.message-info-popover” by
imposing a max width on the popover (so it doesn’t increase in width
when it gets larger) and adding the tooltip on hover.
This reverts commit aebf63c28 "sidebars: Change to more muted
hover/active colors."
In addition to the effects described in its commit message, this
commit gave the unread counts in the left sidebar a much lighter
background, making them harder to see. I'm not quite sure which part
of this change caused that effect how; reverting for now and we
can sort out a new version of the change.
This removes the underlines on the stream names and user names when
hovered over for a cleaner look. This is acceptable due to the fact
that hover is signified already by a light grey background.
This was accidentally changed due to an inheritance problem of
`.typeahead.dropdown-menu a` overriding the default bootstrap
selector `.dropdown-menu .active > a` with its color styling
preferences.
This removes the width attribute that actually makes the notification
about a pixel too long, because removing this with a block element will
automatically make it 100% auto fit.
This makes all the alerts in the compose box compatible with dark mode
by choosing different colors and fixing borders to be properly
pronounced, along with removing text shadows that make text unreadable.
On the warning that occurs when you are cross posting to a different
stream, move the “x” to be vertically centered and horizontally aligned
with the”x” on other warnings in the compose box.
This makes the bankruptcy modal compatible with dark mode by adding the
`.modal-bg` class to switch it to dark mode, and by setting a darker
background and border color to the modal header.
This fixes and adds to the logic in commit `525e8e3`. That commit
would only have the stream be the correct color if it was active,
but really it should be dark text by default regardless of whether
it is the active tab bar list item.
This makes the typeaheads dark-mode compatible by changing to the
background to be dark and the text to inherit from the body text
(rather than bootstrap’s default of #333).
The streams can be light and if it inherits the white text color they
will not be readable. It should default to dark text with the exception
of when the tab is is `.dark-background`, in which case then it should
revert to inheriting the white color.
This makes the edit history overlay dark mode compatible by changing
the background to the dark blue along with changing the highlight
colors to work with white text and dark backgrounds.
This adds custom CSS through JavaScript for things that do not
scope well and will override other inherited styles.
This should ONLY be used for problematic CSS that has no obvious
or easy CSS-only solution.
(Specifically, we need this for the "default link" styling, which is
hard to override because we don't want to start winning ties due to
specificity that we would not have won in the light theme).
This makes the gear-menu icon translucent rather than medium grey and
black (which isn't even our base text color) to be half opaque (approx)
and base text color.
This makes the compose icons translucent rather than medium grey
and black (which isn't even our base text color) to be half opaque
(approx) and base text color.
This changes it to be compatible with the dark-mode which involves one
change to light mode of changing a grey to a translucent white in
reactions.css.
There isn’t any reason for either of these mention code paths to be
using specified background types, so convert them all to background so
inheritance is more simple.
Long URLs in Markdown macros overflow their containers without this
property. This reverts 0dc91a9148. We
will likely need to fix the original Windows bug that
0dc91a9148 has resolved another way.
This PR removes unnecessary white background from realm-icon.
Also, I have given padding and border-radius to make it look good.
This also fixes a bug where realm-name didn't show up because of the
white font color.
Fixes#7374. Since we use `table-layout: fixed`, the width of the first
row are applied to all the remaining rows, thus wrapping all the columns
to 20% width. This is fixed by making the selector specific to only
user_rows and not the editable data row.
Ideally, empty messages are never created. However, sometimes even
non empty messages can act as if empty, such as one consisting only
of an opening and closing blockquote tag. This sets the
.message_content to have a minimum height equal to the line height.
This is overridden with zero (the default) in the case of collapse.
It appears as though the ordering of the overlays in the DOM is
overriding their z-index in Safari on mobile. This moves them up to
the top of the template ahead of the header so that the header will no
longer display above the overlays in positioning.
Fixes: #7248.
This changes the icons to be translucent rather than grey and also
makes them get darker on hover rather than lighter (which didn’t really
make sense) on the normal theme.
This removes the background color declaration on the search bar so it
can inherit the standard input background color.
navbar: Let search bar inherit from base color.
Note from tabbott: While this initial version is experimental and
definitely incomplete, we expect to have a solid version done over the
next few weeks (after more refactoring). We're merging this now to
make it easy to test both versions when refactoring our CSS.
Fixes#267.
The CSS linter was pretty hard to reason about. It was
pretty flexible about certain things, but then it would
prevent seemingly innocuous code from getting checked in.
This commit overhauls the pretty-printer to be more composable,
where every object in the AST knows how to render itself. It
also cleans up a little bit of the pre_fluff/post_fluff logic
in the parser itself, so comments are more likely to be "attached"
to the AST node that make sense.
The linter is actually a bit more finicky about newlines, but
this is mostly a good thing, as most of the variations before
this commit were pretty arbitrary.
This restyles and rewords some of the emoji style section to look
better and fit it more with the current style guide.
Tweaked by tabbott to modify the historical migration rather than
adding a new one. This is OK because the emojiset choices text change
doesn't touch the database; it's just a Django Python code thing.
Also removed translation tags, since we don't need them for a set of
brand names.
This now allows all tab switcher components to be used with left
and right arrows, given that a tab is already in focus, which is
the default behavior unless overridden (like on the streams
overlay).
This adds a slide class that specifies that the JS actions for sliding
up and down sections is the desired behavior, along with a bit of CSS
to help display correctly in the case of not being a sliding section.
This removes the leading whitespace that was approximately the width of
a space character that would get underlined when hovering over any one
of the global filters.
Add a spinner for when a stream is being created to show that
an operation is being performed, while also disallowing users to
modify the form in the meanwhile.
Commit modified by Brock Whittaker <brock@zulipchat.com>.
Fixes: #5268.
On stream names that don’t quite fit, we’ll add overflow ellipsis to
them. It appears we already did this on mobile in a sub-optimal way so
we can remove that media query with preference to the new, better
styling.
This allows a user to scroll all the way down on the sidebar and the
main panel in the settings page on narrow height windows by removing
the min-height specification and making the “Log out” line in the
sidebar become statically positioned at shorter heights.
Fixes: #7251.
This commit allows for the /api-new/ page to rendered similarly to our
/help pages. It's based on the old content for /api, but we're not
replacing the old content yet, to give a bit of time to restructure
things reasonably.
Tweaked by eeshangarg and tabbott.
This creates a template for the /team/ page that is currently just
embedded inside the /about/ page. This includes the titles for core
team members with their pictures.
Lets administrators view a list of open(unconfirmed) invitations and
resend or revoke a chosen invitation.
There are a few changes that we can expect for the future:
* It is currently possible to invite an email that you have already
invited, it might make sense to change this behavior.
* Resend currently sends an invite reminder instead of resending the
original invite, this is because 'custom_body' was not stored when
the first invite was sent.
Tweaked in various minor ways, primarily in the backend, by tabbott,
mostly for style consistency with the rest of the codebase.
Fixes: #1180.
All links by default had an underline on hover, including when
<a> tags were wrapping <div> and <img> tags, which made for a small
underline near them on hover. This better focusses the underline
behavior to just paragraphs and lists.
This adds two constraints to the image:
1. The `max-width` can not be more than 500px (which prevents it
from being to vertically tall.
2. The `display` is set to `none` below 1024px because the image is
too small at that point to be legible.
This changes some text that would display gray when on a blue body
text page; we considered changing the opacity instead, but probably we
should just delete this..
This changes the <ul> styling so that when not nested in a <p>
tag it'll have the standard font-weight (400) and be the same
color as the body text (blue/gray).
This removes the old blue styled outline around the PM recipient
box that was part of the older bootstrap styling in favor of the
dark outline on :focus that had been implemented for the rest of
the recipient boxes recently.
This creates a dropdown in place of the normal register/login links
you get when logged out, with an option to go to the app or log out if
that appears you click on the avatar.
A bit more work is needed to make this look really good, but it's a
great start.
This imposes a maximum width constraint on the center block so
that it can maintain readability and keep the content paragraphs
to less than 1000px.
Fixes: #7092.
The arrows were too close to the scrollbars that it would be
difficult to click them sometimes. This moves over the arrows and
unread counts to combat the issue.
This presents multiple states for the subdomain input option
depending on the existence of a root domain.
Commit modified heavily by Brock Whittaker <brock@zulipchat.com>.
Fixes#6863.
This is a two-step notifications process that will ask a user
to enable notifications and if they click exit give them three
options:
1. Enable notifications.
2. Ask later.
3. Never ask on this computer again.
The first two are self-explanatory (ask later = next session it
asks again). The third is captured and stored in localStorage and
a check is done on page load to see whether or not notifications
should be displayed.
Commit modified heavily by Brock Whittaker <brock@zulipchat.com>.
Fixes#1189.
The left and right sidebar are now equidistant from the edges of the
center pane, and the contents within have equal margin from the edges
of their containers (5px).
The group PM unread counts were pushed over toward the edge of the
screen which made them unaligned with the user unread PMs directly
above.
Fixes: #7064.
This lowers the amount of margin in the :before hack that we use
to put padding before anchored elements from 40px to 30px on <h1>
tags and 10px on everything else, which seems to be plenty.
Fixes: #7069.
This allows CSS to discriminate by platform and show particular
content; in this case showing things with the attribute
[if-zulip-desktop] content only on “ZulipElectron”.
This switches the checkboxes to be natively grayscale by
referencing the `checkbox.png` file rather than `checkbox-gree.png`
which means that we no longer need to apply the -webkit-filter
setting for grayscale.
This makes the standard checkboxes 7% darker and makes the disabled
ones about 12% darker + 7% darker than they were before, to
increase visibility.
Fixes: #6331.
This de-duplicates occurances of the `.no-underline` class by
removing it from "portico.css" and ensuring compaitbility by adding
support for the standard and :hover cases.
This fixes the width of the call-to-action button to be auto, as it
previously was set in the #hero to be 150px which forced the words in
the button to wrap to two lines.
The header line-height is too short when it collapses to multiple
lines so this sets the line-height back to "normal" from "30px"
which sets the text further apart.
The min-height for the error pages was not updated to reflect the
height of the new footer, so this updates the value and makes it a
non-scrolling page in most browsers again.
This sets the column width of the upload table actions and size
columns to always be 75 so that the buttons are always in the same
line and take up the least amount of space possible with that
constraint.
This removes the underline on hover and changes the text to get to the
index.
This also changes it to an <h2> tag so that it will be more inline
with the styling of the rest of the sections, but without the
down chevron.
This restyles the headers to make the <h1> more prominent with a line
break below it, and the <h2> to be less prominent with smaller text and
pushed closer to the <p> tags.
This adds a hover state to just the checkmark that makes it darker
than the line hover state that allows a user to know that the
checkmark is allowed to be toggled.
Emoji showcase refers to the space at the bottom of the emoji
picker we use for showing name as well as aliases of the currently
focused emoji.
Fixes: #6110.
This adds a max-width constraint to the hero content so that the images
inside the hero don’t keep expanding forever and eventually outside of
the hero’s bounds.
Fixes: #6713.
This adds the perfectScrollbar to the right side and theoretically
updates it any time a piece of code interacts with the sidebar and
updates the counts of users displayed in it.
The list needs to be set to use perfectScrollbar so that it can
scroll due to the fact that it resides within another instance of
perfectScrollbar.
Fixes: #6351.
The popovers for the message down chevron and left sidebar had
strange side padding and non-uniform padding between the top and
bottom. This changes them to all have the same padding as the
nav `#gear_menu`; none on the sides and 5px on the top and bottom.
This moves the chevron arrow and the "All Streams" text over 10px
so that it will be inline with the hashes below and not be up
against the edge of the screen in some collapsed modes.
The issue before was that the left sidebar would become too tall for
the screen because the standard header that has “STREAMS” and buttons
is 20px tall, and this one is 30px tall. This makes it much shorter,
changes the text to be the same style as the “STREAMS” text (medium
grey, uppercase text).
The markup is then fixed to be significantly less verbose than before —
changing a list to just a simple link.
The progressively rendered table extends too far down, causing the page
to scroll needlessly, which then causes there to be two scrollbars — a
scrollbar for the table and a view scrollbar outside that.
Fixes: #6391.
retsediv
YJDave
Steve Howell
Cynthia Lin
Xavier Cooney
Tommy Ip
Rhea Parekh
Balaji2198
Shubham Padia
Aditya Bansal
Shubham Dhama
Utkarsh Patil
Tim Abbott
Aastha Gupta
Anurag Sharma
Vaida Plankyte
ihsavru
Eric Eslinger
Brock Whittaker
Rohitt Vashishtha
Patrick Naughton
Florian Jüngermann
Greg Price
VishalCR7
Harshit Bansal
Vishwesh Jainkuniya
Angelika Serwa
Andy Perez
rht
Abhijeet Kaur
Marco Burstein
Rishi Gupta
Utkarsh Patil
Shreyansh Dwivedi
Vishnu Ks
cPhost
civilnewsnetwork
Eeshan Garg
Robert Hönig
akashnimare
Umair Khan
Andy Perez
Henrik Pettersson
amanharitsh123
brockwhittaker