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.
This fixes the issue on subdomain.zulipchat.com/login/ where the
organization name will have characters such as the lowercase "g"
cut off near the bottom due to the line-height being too small and
the overflow being hidden.
This re-arranges the properties to fix that issue.
This adds a centered layout for mobile and responsive screens where the
emoji picker is guaranteed to be in the center of the screen, and the
rest of the screen darkens behind it.
Fixes: #6291.
This commit is a bit complicated, because we do full redraws of
the topic list frequently, and we don't want to randomly obliterate
our "No more topics found" message, so we need to keep a bit of
extra state around.
This fixes the characters like “g” and “l” from overflowing the input
bounds while maintaining the previous height of the input box itself.
Fixes: #6665.
This removes the `box-sizing` attribute on the spectrum input that was
causing the characters to overflow the bounds of the padding, which
would cut off things like the bottom of a “g” or the top of an “f”.
Fixes: #6361.
The home icon was too far to the right and did not have equal
padding within the <li> tab so this makes the padding an equal
10px on the left and right and none on the top and bottom.
This adds perfectScrollbar to the default streams table
because it currently is inside another perfectScrollbar which
actually makes it impossible to scroll the table normally without
enabling the perfectScrollbar library on this.
Fixes: #6391.
If a reactions picker is open then don't auto-hide the element over
which it is based off. Earlier we were inconsistently auto-hiding
some elements while keeping others visible.
Change the reaction popover to be based off the container elements
for the various message control icons. This will enable us to easily
control the visibility of the base element when the popover is opened
or closed. Also removes redundant `reactions_hover` class.
This now shows `blueslip.error` and other JS exceptions in development
in the alert box at the top of the page. Hopefully this will make it
a lot easier to notice newly introduced JS exceptions when working on
Zulip.
Tweaked by tabbott to handle all JS errors, not just blueslip.error.
Fixes: #6155.
This makes the JavaScript tooltips more legible by increasing
the font size and decreasing the line-height, while also increasing
the opacity of the tooltip from 0.8 => 1.
Until we get search bubbles, the search text is kind of a
distracting detail for most users. This just makes the
height 2px smaller for now. This will also make more text
show up on mobile web.
This responsively hides the last row of testimonials that only has a
single one it the row at certain widths in which the grid is a [4, 4,
1] layout, making it simply [4, 4].
This removes the scaling feature where a plan that a user
hovers over would increase in size and have a box shadow.
This used to be here because there was a clickable region that
would pop open an overlay that would have more plan information,
but that feature no longer exists.
This changes the second plans block label to dark grey responsively
when the width is less than 1390px because the white text does not
appear on that portion of the white background when the block collapses
down a line.
The moving label is acting like a placeholder here, and should be positioned
as such for consistency with the rest of the site. The two forms with a
moving label are /accounts/find/ and /accounts/password/reset.
This restructures organization settings and permissions to be
more accurately grouped and for the permissions page to not be too
long.
CHANGES:
PROFILE:
(this was split out)
organization-profile-admin.handlebars:
form #1:
name
description
(SUBMIT)
avatar:
(UPLOAD)
(DELETE)
SETTINGS:
organization-settings-admin.handlebars:
language (mostly untouched)
message editing:
time limit/history/retention
message feed:
mandatory-topics
preview images
preview websites
PERMISSIONS:
organization-permissions-admin.handlebars
(mostly stuff was removed)
Joining:
restrict domains
require invite
User Identity:
name changes
email changes
Streams/Emoji:
creating streams:
waiting period (ADDED)
adding emojis
(SUBMIT) for whole panel
The profile group (name, description, avatar) were split into a new
page that did not previously exist, and the permissions was stripped
of message settings (message editing, message feed), but keeping the
"waiting period" input and putting it in the "Streams & custom emoji"
section.
Fixes: #5844.
That's what the font is actually called, and should help future Zulip
developers save time trying to figure out what's up and why our font
is unrelated to the "Humbug" font on the Internet.
Previously, the font-weight for 500 did not exist in our set, so
all of those examples defaulted to 400. This fixes them to stay
as they previously were by migrating them to a font weight of 400.
The sidebar height was set to shorter than what the sidebar actually
was and so it would overflow the parent. By resetting it, it now
will not overflow.
Fixes: #6315.
This cleans up the styling of the page by adding the white box
around the text content, and by making the header the same
`.get-started` class as other headers in the portico-signup group.
This removes some of the min-height constraint on .flex that would
push the footer down futher than it should have been and would
introduce scrolling to the page.
This removes the old flex model for the footer to stay at the bottom
of short pages and instead always just positions the footer below
the portico content and makes the content generally tall enough that
issues don't occur.
This replaces the old footer that has one section with a small list of
items. This expands the footer to have multiple sections.
Actual content tweaked and tagged for i18n by tabbott.
This fixes the padding above the –– OR –– line on the register form.
This also fixes the left-alignment of the form starting at 795px
wide.
Fixes: #6265.
This adds perfectScrollbar to the `.subscriber_list_container` to
allow for the table to scroll naturally again. This was broken
because when perfectScrollbar is put on the parent element, any
naturally scrolling element within it will not scroll naturally
anymore.
Tweaked by tabbott to update the scrollbar on rerender.
Fixes: #6215.
The hack used to make the placeholders in the ::after element
work correctly is no longer needed, so we can revert the width
of 200% back to 100%.
The hack is no longer required because Vaida split these into
two tables, of which in the second table there are no columns,
which means that 100% represents the table width rather than
the width of the first column.
Fixes: #6271.
This refactor will facilitate making it possible to set CSS properties
on this controls span; in particular, we're hoping to disable user
selection of the whitespace in this region.
The main side effect of this refactor is that we need to add JS code
to also hide the icon-vector-pencil element, since it's now in a new
span.
This makes the /help/ sidebar more discoverable at windows less
than 1000px in width because it makes it stick out a bit when it
is closed with the hamburger menu at the top.
Fixes: #6038.
The bot API key when selected in the "Your bots" panel would have
some whitespace due to the fact that the HTML markup would make
some space between the span and button.
Fixes: #6189.
This refactors and fixes unicode issues where entities don't display
properly due to being a special character that seems to be rendered
incorrectly in a non-deterministic way every time.
Use perfectScrollbar on settings sidebar, since the default scrollbar
makes settings menu break when not enough vertical space available.
Add perfectScrollbar to main settings section, and reset the scrollbar
position when switching between tabs.
Also delete the z-index on `.settings-list` since it makes the
perfectScrollbar covered.
Fixes#5216.
This adds the authors to the Zulip repository on GitHub from
/authors/ along with re-styling the page to fit the same
aesthetic as /for/open-source/ and other product-pages.
In the case of no subdomains, the input is too large because the JS
calculated size does not account for padding. The correct solution is
to do this in JS.
A large portion of the diff for landing-page.js is due to refactoring the
contents of integrations_search into top level UI update functions.
State flows as follows: dispatch(action) -> render(state) -> update UI
Routes now use pushState instead of hashes.
On transition between categories scrolling position is fixed,
and on transition between catalog and integration sub-pages the page
scrolls to the top.
On some monitors it appears as though there's a slight gap between
the bottom of the wave and the top of the section below. This moves
the wave down a pixel to ensure the gap disappears.
Fixes: #6064.
This fixes the registration padding to not be really large. It was an
issue of margin + padding instead of using margin for both where the
result would be max(margin1, margin2).
This keeps hotspot icons positioned at the front of the message
viewport but behind sidebars (i.e. the left sidebar has a z-index
of 103). Hotspots associated with elements outside of the message
viewport should be individually adjusted at the bottom of hotspots.css.
This is a redesign of the features landing page from the current style
that includes the new sections in a grid format as well as some new
high-quality sections.
The overflow was set to "hidden". I'm unsure of how this was even
working on desktop, but the #user-presences div certainly would
not scroll on mobile. This enables mobile scrolling.
Before the user profile bounding box width was not set so it
would overflow the 240px and there would be grey space next to
the avatar. Now the width is always maintained and long text
is cut into multiple lines.
While demoing Zulip at PyCon, I learned that it is hard to
distinguish topics from streams in our left sidebar.
Indenting them by a few pixel seems to make it more clear
that topics belong to a stream.
There is a "user-select: none" (cross-browser) that was put on
the #bottom_whitespace div, but the div doesn't actually have any
content that can be selected, and it also makes it difficult to
deselect selected text because when clicked over it will save the
current selection.
This makes the avatar portion more responsive and efficient on many
screen settings and also fixes some of the design incongruences present
on the page.
This changes the markdown section and sidebar to be the correct
height on mobile along with correcting the broken footer to always
appear below the content.
Fixes: #5798.
This redesigns the /help/ page sets to be a single page app that uses
history.pushState to work the same as the old app.
The big new feature is that now we have the index in a nicely designed
left sidebar.
Our current workflow for creating a new stream allows the user to
invite as many other users as they like but since there can be
mistakes in doing so, we now open a modal with a warning if the
number of invites are more than 100 just to confirm that user indeed
wanted to do this.
Fixes: #1663.