This allows us to block use of the desktop app with insecure versions
(we simply fail to load the Zulip webapp at all, instead rendering an
error page).
For now we block only versions that are known to be both insecure and
not auto-updating, but we can easily adjust these parameters in the
future.
We've often gotten the complaint that Zulip's emoji are a bit too big;
this should address the worst consequences of that (line-wrapping
being off with large emoji present) while still making it possible to
easily see what a given emoji is.
The right place to change this is in rendered_markdown.scss, not the
main emoji definition in zulip.scss, as the latter is also used in
places like the emoji picker where a larger size is valuable.
Closes#12731, an older PR that did this with slightly different
parameters (and without a comment).
This is a prep commit for the new navbar, since the new navbar switches
between a search bar and stream descriptions, it's easier to have the
border defined in an outer div. Due to the way the changesets is
generated, this may seem like a large diff, however, the only change to
navbar.html is to add an opening div with the ".top-navbar-border" class
and a corrseponding closing div to wrap around "#search_box" and
"#search_box_legacy". Apart from this, a few styles have been edited in
zulip.scss and night_mode.scss.
Punctuate marketing headings with a period. Fix a couple of
title-cased headings to sentense case. Consistently use curly
apostrophes, curly quotation marks, and Unicode ellipses.
Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
Follow an upstream adjustment to the styling of the vertical
scrollbar (but not the horizontal scrollbar).
https://github.com/Grsmto/simplebar/issues/420
Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
The user can pass description along with the task name by splitting the input string with hyphen.
Eg: Task Title - Task Description
todo_list: Add index numbers to task.
This updates update the download android and ios app button on
/apps/android and /apps/ios routes respectively to use the official
badges provided by the google and apple.
We also clean up some of the JavaScript implementing the page.
Fixes#14061.
The example regexes for linkifier settings are not themed according
to the user's dark theme setting.
Modify 'night_mode.scss' to render all 'code' elements with dark
theme.
The copy of the styling for users_hover_info:
```
-#users_hover_info {
- left: 25px;
- top: -40px;
-}
```
Looks less good than the common one with #hoverinfo, so we remove it.
Currently, the cursor for the date input field in the settings page
is 'not-allowed' as it has the disabled attribute because we want
users to pick the date from the date picker. But this leads to
confusion whether the field is editable at all.
Change the cursor to 'pointer' to make it clear that the field has
a click action associated with it.
Bounce five times, once every 5 seconds, rather than forever every
0.75 seconds. This reduces annoying user distraction and idle CPU/GPU
consumption.
Fixes#13760.
Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
Create a new page for desktop auth flow, in which
users can select one from going to the app or
continue the flow in the browser.
Co-authored-by: Mateusz Mandera <mateusz.mandera@protonmail.com>
We avoid complicated code to update unread counts
by just using vdom.js.
One small change here is that if click on "more
topics", we replace it with the spinner instead
of putting the spinner after it. This saves us
a redraw under the new scheme.
Earlier, on narrowing the window to some particular sizes,
long stream names used to overlap with the subscribe and view stream
buttons.
The issue was resolved by cutting the stream name short and putting
ellipses at the end. A title was provided to the stream name div so that
the entire stream name would be visible on hovering over it.
Fixes: #13139
This legacy cross-realm bot hasn't been used in several years, as far
as I know. If we wanted to re-introduce it, I'd want to implement it
as an embedded bot using those common APIs, rather than the totally
custom hacky code used for it that involves unnecessary queue workers
and similar details.
Fixes#13533.
If you clicked for no more topics and then the server didn't find any,
we once had code that would say "No more topics" in light gray at the
bottom of the topic list.
The feature appears to have been broken by some detail in the
`self.dom` refactoring. More importantly, it's not clear it's useful
as opposed to clutter.
Since we added the `stream.first_message_id` feature, it's now very
rare for the `more topics` option to appear when there aren't in fact
older topics that could be fetched. In cases where there are not, the
UI is still clear about what's happening -- it shows a loading
indicator and then displays a list of topics that doesn't have
anything new.
So we're removing this feature; we can re-add it without too much
difficulty if user feedback in the future suggests it would be useful
after all.
We register ZulipRemoteUserBackend as an external_authentication_method
to make it show up in the corresponding field in the /server_settings
endpoint.
This also allows rendering its login button together with
Google/Github/etc. leading to us being able to get rid of some of the
code that was handling it as a special case - the js code for plumbing
the "next" value and the special {% if only_sso %} block in login.html.
An additional consequence of the login.html change is that now the
backend will have it button rendered even if it isn't the only backend
enabled on the server.
This avoids a stream having potentially near-infinite height when
opened in a stream with a large number of unread topics; the benefit
is that you can easily access the next stream.
We show an unread count next to "more topics" to make it hard to miss
that there might be more, older topics with unread messages.
With CSS work by Anders Kaseorg.
Fixes#13087.
Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
Hovering over user names (and user circles for PM List) now displays
Name, Status Message and Last online time in a js tooltip.
Hovering over group names displays the names of all group members.
Unavailable users are shown as "Last active: Today".
Hovering on a user circle in the Buddy List results in a js tooltip
with Active/Idle/Offline/Unavailable for
green/orange/white/white-with-line.
Resolves#11607.
Previously, we had a "Return to login" button on the previous page of
the password reset flow, but none on the final page.
Note that this button is only shown in the Zulip Electron app.
Fixes#13378.
This commit modifies the `#add-stream-link` element to be a `div`
containing the previous `a` element. The margin that was added to
`#stream-filters-container .simplebar-content` is then moved to that new
`div`.
This preserves the intended behaviour of the commit which introduced
the margin, to fix#12519 while removing an unnecessary scrollbar
which could hide the top-most stream in the stream list.
Fixes#13050
Signed-off-by: David Wood <david@davidtw.co>
Webpack code splitting will make the inclusion order of CSS files less
obvious, and we need to guarantee that these rules follow the rules
they override.
Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
login_context now gets the social_backends list through
get_social_backend_dicts and we move display_logo customization
to backend class definition.
This prepares for easily adding multiple IdP support in SAML
authentication - there will be a social_backend dict for each configured
IdP, also allowing display_name and icon customization per IdP.
It should be azuread-oauth2-wrapper, as the name of the corresponding
backend is 'azuread-oauth2'. Without the correct name, the icon isn't
showing on the "Log in with AzureAD" button.
There are a few outstanding issues that we expect to resolve beforce
including this in a release, but this is good checkpoint to merge.
This PR is a collaboration with Tim Abbott.
Fixes#716.
When a user performs a search that might contain historical public
streams messages that the user has access to (but doesn't because
we're searching the user's own personal history), we add a notice
above the first search result to let the user know that not all
messages may have been searched.
Fixes#12036.
A somewhat recent refactoring of the left sidebar had introduced a gap
between the hover areas that looked off; this fixes this with a slight
rearrangement with where the 1px of space between elements lives.
Fixes#12508.
In 50545a3 we made an incomplete revert of some style changes from
7b8da9b, this commit reverts the "x" to "fa fa-times" and also fixes an
alignment issue for the "Discard" box in chrome.
Fixes#13233.
This fixes a glitch where the keyboard shortcuts icon, which is meant
to be a feature of the right sidebar, appears overlapping the "Reply"
button.
Fixes#13122.
The avatar source was misspositioned when avatar changes were disabled.
This also repositions the "X" for when avatar changes are allowed.
Fixes#12524.
This has two purposes:
1. Prevent stupid stacks of diacritical marks from overflowing into
other messages. Fixes#7843.
2. Prevent Chrome from collapsing the inside bottom margin with the
.messagebox outside (in a way that Firefox doesn’t).
Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
I changed the element to be a `p` instead of `div` because the styling
for `a`s inside paragraphs is already there and the element should
anyway be a paragraph.
Fixes part of #12853.
Commit ba66dfe977 incorrectly inflated
the specificity level of these rules by moving them inside
.rendered_markdown “entirely for readability”. KaTeX has its own
rules that work better, so just delete ours.
Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
This brings us in line, and also allows us to style these more like
unordered lists, which is visually more appealing.
On the backend, we now use the default list blockprocessor + sane list
extension of python-markdown to get proper list markup; on the
frontend, we mostly return to upstream's code as they have followed
CommonMark on this issue.
Using <ol> here necessarily removes the behaviour of not renumbering
on lists written like 3, 4, 7; hopefully users will be OK with the
change.
Fixes#12822.
This caused weird behavior in the relevant band of window widths, and
removing it works considerably better.
There's still bad behavior in handling situations where the stream
name is too long and thus this wraps, but we should address that
as a follow-up.
Fixes#13134 as the last commit in the series for this issue.
Solves the "The (?) should just be a target=_blank link to
/help/message-a-stream-by-email." part of the issue.
As a result, a bunch code managing the email hint popup can be deleted,
together with a node test for that.
cssnano reduces this to a constant in a production build. (We could
add postcss-calc if we wanted this reduced in development.)
Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
Many of them are now automatically generated by autoprefixer, while
others are unnecessary based on .browserslistrc, and some were just
wrong (the linear-gradient based checkerboard pattern in lightbox has
been broken in Firefox for a while).
Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
It’s about as fast as node-sass (faster, according to their
benchmarks) and more flexible. Autoprefixer is neat: we can now go
delete all our -moz-, -webkit-, etc. lines and have them autogenerated
as necessary based on .browserslistrc.
Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
Since these rules are overwritten we can remove them. For
message_header_colorblock we can remove `!important` from
box-shadow since it was present due to the removed rules.
While refactoring, I tested all the rules and removed the CSS that was
not needed or duplicated.
I removed the `$("#integration-list-link").css('display', 'block');` and
moved it to css because there is no case in which the back link is
hidden.
I rearranged the elements of the left sidebar in HTML in order to appear
in the order they are displayed and removed the absolute positioning,
because it was not needed if the elements are arranged correctly. I used
`flex` display to arrange them on column.
I removed the styling that positioned the elements absolutely.
Then I tweaked the margins in order to make the elements look good.
Fixes: #12929
I added the `white-box` as it was in the other similar pages
(`/accounts/go`).
In order to be able to style it better, I removed the buttons and added
`div`s instead, then added click handler for submitting the form.
If the email is associated to a Zulip account, the avatar of the account
is displayed and the text `Log in`, otherwize a `+` sign is
displayed and the text `Create new account`.
I changed the class of the title in order to use the same styling as the
other similar pages (like `/accounts/go` or `/login`).
Changed the related test.
Previous cleanups (mostly the removals of Python __future__ imports)
were done in a way that introduced leading newlines. Delete leading
newlines from all files, except static/assets/zulip-emoji/NOTICE,
which is a verbatim copy of the Apache 2.0 license.
Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
Our implementation requires at least 1 space after the
'#' not not break existing linkifiers like '#123', etc.
that generally follow the convention we show in linkifier
examples.
- [valid] : # Hello
- [valid] : # Hello
- [invalid]: #Hello
For the frontend, we have taken the code from v0.7.0 of
upstream marked and made minor changes to avoid having
to refactor a significant part of our marked code.
For the backend, we merely have to change the regex to
force require spaces after #, and add hashheader to our
list of blockparsers.
Fixes#11418.
We can provide a function that returns an HTML string: `this.header()` to
display a header text above the typeahead. This can be used to provide
contextual information such as hinting about the silent mentions syntax
or the topic mentions syntax.
At the end of this commit, the HTML structure is:
$container <div>
$header <p>
info-icon
header-text
$menu <ul>
list-items
This change allows us to add custom changes to the HTML generated
by the typeahead without interfering with the core functions that
are provided by the library.
At the end of this commit, the HTML structure is:
$container <div>
$menu <ul>
list-items
This moves our main CSS for rendered Zulip message content into an
external file, which may be reusable but in any case should make it
easier to find this content.
Apparently, the 30px width we allocated to the bullets was
insufficient with the larger font size there.
Edit by tabbott: better to just increase it to 32px everywhere.
`code-section` is a feature of the markdown system, therefore the
associated CSS should be in the `markdown.scss` file. I also refactored
to use SCSS nesting.
I added the `@media (max-width: 500px)` because the text from the inner
content was gong outside the white background on mobile because of the
height of the `.markdown` class for this viewport.
I moved this `.integration-instructions .help-content h3 { margin: 20px
0 ; }` from the `portico.scss` because it should be in `integrations
.scss`.
I removed the `#hubot-integrations` because I didn't find that id
anywhere.
I removed `.portico-landing.integrations ol ul` because `.markdown`
takes care of that left spacing.
I noticed a super weird bug where the edit pencil would disappear on
hover inside the message feed (!). Investigation determined that what
was actually happening was that the Drafts overlay had been shown and
then hidden at a time when the mouse cursor was over the icons with
`data-toggle="tooltip"` configured, and the tooltip showing. The
result was that this tooltip object, if you mouse over it, would cause
us to no longer be hovering over the message (because your cursor was
actually over the invisible drafts widget's leaked tooltip).
Ideally, we'd have fixed this by making the drafts modal `display:
none`, but that would interfere with the modal's closing animation,
and there's no good way to have an event trigger on a CSS animation
finishing.
There's a second bug that makes this possible, however, which is that
the drafts modal is supposed to be `pointer-events: none` while
hidden, but some rogue CSS for `message_top_line *` set
`pointer-events: auto` to override `pointer-events: none` on
`message_top_line` was accidentally applying to things inside that
line in the drafts modal, and furthermore accidentally overriding the
`none` setting for the modal as a whole.
We fix that second bug here, which resolves the overall issue.
For .start-button, Bootstrap carousel already supports <button
data-target> as a valid alternative to <button href>. For
.call-to-action, the margin is decreased to exactly offset the lack of
margin collapsing with display: inline-block. There should be no
visual change.
Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
Buttons cannot be nested in anchor links because that is invalid HTML.
To make links look like buttons, create a .button class that inherits
styling from buttons and apply them to the necessary links.
Fixes#6126.
This fixes a problem in Chrome where checking our styled checkboxes in
the stream creation form sometimes caused parts of the page to scroll
in weird ways or disappear.
The issue was that the hidden `position: absolute` checkboxes weren’t
scrolling with the `#stream-creation` scrollbar, which is `overflow:
auto`, not SimpleBar. When you focused them, Chrome tried to scroll
them into view by whatever means necessary. In this case, the
necessary means were to scroll the `.subscriptions-container`, which
is `overflow: hidden`.
Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
This replaces the two custom Google authentication backends originally
written in 2012 with using the shared python-social-auth codebase that
we already use for the GitHub authentication backend. These are:
* GoogleMobileOauth2Backend, the ancient code path for mobile
authentication last used by the EOL original Zulip Android app.
* The `finish_google_oauth2` code path in zerver/views/auth.py, which
was the webapp (and modern mobile app) Google authentication code
path.
This change doesn't fix any known bugs; its main benefit is that we
get to remove hundreds of lines of security-sensitive semi-duplicated
code, replacing it with a widely trusted, high quality third-party
library.
When we add Plus, the first sentence should change to "Available on Zulip
Standard and Plus".
I copied the styling of .tip out of expediency, but it's also possible that
long term we'll want only 1 tip-like box styling.
The hover styling is a bit random, but I tried to copy other hover styles I
found in settings.scss.
Note that this renames .upgrade_realm_plan_type_suggestion to .upgrade-tip.
Border and text color applied by specific classes such as sea-green
were nullified by the previous selector; this commit restores the coloring
for these buttons.
Given that all links are now modals triggered by JS, the anchor links are
just invalid HTML that have no purpose. This commit refactors the HTML to
eliminate them by adding the Bootstrap-native btn-link class to maintain
styling. Fixes part of #6126.
This commit adds a new setting to the user's notification settings that
will change the behaviour of the unread count in the title bar and
desktop application.
When enabled, the title bar will show the count of unread private messages
and mentions. When disabled, the title bar will act as before, showing
the total number of unread messages.
Fixes#1736.
We had several patches to spectrum, but the only essential one
(0ea770fc18) had already been fixed upstream,
and another was just handling jQuery deprecation warnings for not yet removed features.
See #12749 for details.
Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
Fixes the click targets for the four links in the top left side bar
(All messages, Private messages, Mentions and Starred messages).
The click target now cover the whole row for these links.
Fixes#12449
The -2px list margin was almost but not exactly cancelling the 3px
paragraph margin, resulting in a line spacing exactly 1px taller than
the normal line spacing.
Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
This fixes (or at least reduces) a problem with inline `code blocks`
causing extra uneven vertical space below their line. The absolute
line-height was being measured relative to the lower midline of the
smaller font-size in the code blocks.
Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
06f3cb2b78 added some styling to make the
embed previews prettier, and in particular added a bottom fading gradient to
make the embed description text fade out slowly, when it is out of bounds.
The fading used an ::after pseudo-element which had 100% height of the
`.data-container` which contained the title and the description of the
preview. This pseudo-element got overlaid on the title and made it
un-clickable.
This commit retains the visual appearance of the fade, while reducing the
height of the ::after pseudo element, so that it never gets overlaid on the
title, keeping it clickable always.
This commit disables "Mobile notifications" if `push_notifications` are not
enabled. It also adds a tooltip explaining why this is disabled.
Fixes#12208
If stream setting is disabled, setting-checkbox can not be
clicked. Although, it does allow to change value by clicking
on setting label.
This commit fixes above bug and disable click handler on
setting-label for disabled stream settings.
Adding the element for the invite link would cause the modal footer to
shift upwards, in nightmode this caused the stream list to appear
beneath the footer as the footer background was transparent. This commit
replaces that styling with a solid equivalent color.
Previously, our Github authentication backend just used the user's
primary email address associated with GitHub, which was a reasonable
default, but quite annoying for users who have several email addresses
associated with their GitHub account.
We fix this, by adding a new screen where users can select which of
their (verified) GitHub email addresses to use for authentication.
This is implemented using the "partial" feature of the
python-social-auth pipeline system.
Each email is displayed as a button. Clicking on that button chooses
the email. The email value is stored in a hidden input above the
button. The `primary_email` is displayed on top followed by
`verified_non_primary_emails`. Backend name is also passed as
`backend` to the template, which in our case is GitHub.
Fixes#9876.
Using the page_param variable "plan_includes_wide_organization_logo"
disallow users in a realm with a "LIMITED" plan type from uploading
their own wide organization logos and instead suggest that they
upgrade their plan using the page_param variable
"upgrade_text_for_wide_organization_logo" for the suggestion message.
Backend validation for this feature already exists.
This commit removes `propagate_stream_notifications_change`
element from notification template, as it is neglected
since commit b553507412.
Commit also removes `end_content` argument from
`settings_checkbox.handlebars` which was only used
for removed property.
The integrations page had css in both `landing-page.scss` and
`portico.scss`. With this commit, the styles are mostly unified into
a single separate file.
Change the display from `block` to `flex` in order to be able to
arrange the elements as wanted. Reset the css of the header elements
only for the description view. Add `font-size: 1.2em` because the font
doesn't need resizing in this case, it needs resizing only when the
title is in the box.
Removed the `padding-bottom` from the `nav` on mobile because it
overlaps the new header and you cannot click the back button from the
integrations.
Fixes: #12365.
We remove the title from `errbot` integration documentation so that
all documentations have the same style. See
https://github.com/zulip/python-zulip-api/pull/515 for a similar
change to integrations where the docs live elsewhere in version control.
We also remove the `margin: 0` from the instruction tip because where
the tip is followed by a list, there is no space between the two; this
change doesn't mess up the other places where the tip is used.
* There is only one word inside the buttons and that too was wrapped
inside `span.text` which was unnecessary. This is removed. All
corresponding properties (font-size) are moved to `.button`.
* Since the only `a` inside image actions are these buttons, all
the properties are transfered to `.button`.
* Similarly, properties for `.icon` are moved to `.button` and it is
also removed from the template.
* Font size was redundant for `.icon`
* display property is moved
* This rule was already invalid since `.download` is used in
templates as `.button.download` and here it was defined as
`.button .download`
* Even if the above was to be corrected, `.download` has position
`static` and hence the top positioning would never have affected
anything.
This moves all the stylesheets like stats, billing etc. to another
directory called `static/styles/portico/`, matching the directory
structure of our JavaScript.
Due to additional nesting added in reactions.scss, night-mode styles
were prioritized lower than the original rules defined.
Fixes regressions introduced by changes in PR #12473
The only difference between emoji popover map and results container
is their height. For the results container the height is overridden
in the next rule. Seperating just makes it clearer that both of them
have the same styles except for the height. This also makes it easier
to nest the sub-heading inside the map in the following commit.
For non-admins some organisation settings tabs are 'collapsed' by default.
A button at the bottom of these settings can be used to toggle
show/collapse for these settings tabs.
Resolves#12313.
Ensure that the html is safe, before using it. The html is considered if it is
in an iframe with a http/https src, based on the recommendations here:
https://oembed.com/#section3
We directly embed the `iframe` html into the lightbox overlay.
This includes all the changes on the frontend side to include the
bot owner in the popover. Includes the bot owner name as a link which
opens the full profile of the bot owner.
For bots without any owner (such as Notification Bot or Welcome Bot)
in place of bot owner name, 'System Bot' appears for cross realm bots
and 'Bot' for in-realm bots.
Fixes#10844.
There are only two of these icons in the codebase, so it is a relatively
safe change.
Making this change to make it easier to add this icon to labels and other
places in settings.
A `.field` element already has left margin set as 10px and setting
left-margin explicitly for a `.field + .field` equal to the same
value is redundant. This rule is removed.
Margin is set as `10px 10px` which can be equivalently written as
`10px`.
The introduction of ".rendered_markdown table" in 00eaf3a, caused some
styling glitches in the "message formatting" overlay, such as an extra
right border and darker internal borders. This commit fixes these
glitches by duplicating bootstrap's table styles.
Show black scrollbars with a thin light border in day mode, or white
scrollbars with a thin dark border in night mode (both at 50%
opacity). This matches the native scrollbars on macOS pretty closely.
Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
This commit separates the `waiting_period_threshold` setting from
the `create_stream_policy` setting, adding a new setting that the user
can use to select a waiting period threshold.
Both the invite to stream policy and create stream policy now have
three options: admins only, members and admins, or members after
waiting period/admins.
Fixes: #11573.
This moves help_table to informational-overlays.scss, replaces "," with
"or" and "P" with "shift + p" in order to be more clear and legible
this also improves the styling of the text.
These seem to have been there since the very first version of our
markdown styling, and I can't imagine why we would the behavior of not
line-wrapping links now.
(I think the "weird bug" mentioned in the comment history might have
to do with an old animation when you hovered over a link on portico
pages).
This appears to caused by trying to reuse this bit of spacing logic
from the Help Center's CSS rules.
I'm not altogether happy with this fix, but it resolves the issue and
we can defer further work until we're ready to clean up the
portico/landing pages CSS more generally.
This commit also adds a small functionality change where the results of
each webhook fixture message sent is now displayed to the user.
With a small tweak by tabbott to fix a styling bug.
Fixes#12122.
The `transition` property does not need prefixing. In fact, very
few properties need that nowadays. So remove it to simplify
the code. This is strictly a refactor with no style change intended.
Many of these styles shouldn't have been prefixed even if needed.
The prefixes exist exactly because the implementations might differ
from the incoming standard.
Looking at the supported browsers:
https://caniuse.com/#search=transition
We see that this property has had mainstream support from 2012 and
was supported on Firefox in 2006 !!!
perfect-scrollbar replaces both the appearance and the behavior of the
scrollbar, and its emulated behavior will never feel native on most
platforms. SimpleBar customizes the appearance while preserving the
native behavior.
Signed-off-by: Anders Kaseorg <andersk@mit.edu>
This commit introduces a simple field where the user can now specify custom
HTTP headers. This commit does not introduce an improved system for storing
HTTP headers as fixtures - such a change would modify both the existing unit
tests as well as this devtool.
This section was taking up too much visual weight, and drowning out other
elements on the page.
Once we remove the Upload buttons, we can likely shrink this further.
We remove the box-radius since at the smaller size it interferes with how
the logos look (and will look in the app).
We remove the margin-top to make this consistent with the spacing around
organization profile picture.
We change the max width from 730 to 500 since the Upload new logo button is
214px in length (not including margin), and those buttons are now inline
instead of on the next line.
The box-shadow was
* Not being applied to the images (the images get their box shadow from a
more specific rule)
* Being unintentionally applied to the upload/delete buttons
* Being unintentionally applied to the container housing the buttons and
error messages.
The last one especially looked bad, since it added boxes where there
otherwise wouldn't be a box.
This commit adds a new developer tool: The "integrations dev panel"
which will serve as a replacement for the send_webhook_fixture_message
management command as a way to test integrations with much greater ease.
Added a new button at the bottom of the stream list which redirects
users to '/#streams/all' where they can create new streams or subscribe
to new streams.
The button is not visible to guests.
Fixes#11642.
All the elements to which `display-none` class
is applied, are handled with `.show()`/`.hide()`
functions instead of `.addClass('display-none')`
and `.removeClass('display-none')`.
Therefore, we should use apply `display: none;`
to elements with `style` attribute.
This commits removes all usage of `display-none`.
Cleanup single message template moving CSS rules for box shadow
of a private message stream inside stylesheets. For any messagebox
inside of a `.private-message` element, the box shadow is set using
the class. In cases of normal streams, the box shadow is set using
inline style since we cannot have different classes for each color.
Changes made in drafts.scss are to keep the current style of not
having the left border. Setting style using classes, this rule had
to be overridden.
This commit renames the `create_stream_permission` field in the
templates to `create_stream_policy`, matching the field used in the
database model. This matches what `invite_to_stream_policy` does and
will be clearer when the `waiting_period_threshold` is split into its
own field.
This adds the same "x" button as we have in "stream search" or "people
search" to the user status modal.
The button is shown if someone types something, or if the status
message was already set (meaning there was already a value in the
input field). If the input field is empty, the button is not visible.
This fixes the follow-up comments from #12179.
- Changed the <p>s to <button>s and modified the css accordingly.
- Changed the css to use scss nesting.
- Changed the line-height from 1.0em to 1.1em, because on Safari the "g" was not fully displayed.
This commit creates a new organization setting that determines whether
a user can invite other users to streams. Previously this was linked
to the waiting period threshold, but this was both not documented and
overly limiting.
With significant tweaks by tabbott to change the database model to not
involve two threshhold fields, edit the tests, etc.
This requires follow-up work to make the create stream policy setting
work how this code implies it should.
Fixes#12042.
This bug turned out to pop up wherever a table existed in both
'settings' and 'organization settings', notably *excluding* both
'Custom Emoji' and 'Authentication Methods'.
The first thought to the solution was to simply add `thead` to the css
rule that applies the appropiate color for headers and the like. This
was successful, however it brought attention to a sub-problem:
`emoji-settings-admin` and `auth-mehtod-settings-admin` were both
creating table headers in the body of the table. This was causing the
rows in these two tables to be colored inversely from all the others.
This is also the reason why these tables are the only ones correctly
styled. These handlebars were updated with the headers moved out of the
body.
The even and odd rows of the tables were then colored appropriately.
Fixes: #12209
There are no other <h5>'s in static/templates. Basically just copied the
styling of `#settings_page h3` above it.
The vertical spacing here isn't great, but I think will require some deeper
fixes.
A few bugs were caused by 7d4cebbc1e.
In night mode:
- home icon was hidden by grey box on "All messages" narrow.
- inactive tabs (eg "mentions" and "stars") were hidden behind grey box.
- topic tab was hidden behind grey box in topic narrow.
In both night mode and normal mode:
- "private messages" tab in individual/group pm narrows was illegible.
These were all results of unexpected differences in precedence rules
caused by the refactor.
Removed the preview tag from the css rule, reduced the undo preview tag
to a font-size of 15px.
The preview tag being attached to the rule proved unnecessary. The icon
for reverting back to an editing state also dipped below the horizontal
level of the icon row.
This change adds rules for ordered lists that makes them visually similar
to bulleted lists.
Note that is has no effect because our markdown implementation doesn't
currently generate ol tags.
This change decreases the spacing at the top and bottom of bulleted lists
and blockquotes.
Specific rules for p and p:last-of-type have been added for both uls and
blockquotes to maintain visually consistent spacing in all cases.
This reverts commit 6441ad0677 since it
causes two bugs: (1) when rendering new message there is glitch where
the profile picture flashes (2) when someone sends a new message their
profile picture flickers.
Historically, we had a large bottom-margin on p tags designed to
produce correct spacing between consecutive paragraphs (10px, similar
to the spacing between consecutive paragraphs in different messages by
the same sender). And then we tried to fix the end-of-message spacing
with a p:last-of-type rule, which fixed that problem, but created lots
of unnecessary extra space just before a bulleted list, block quote, etc.
We recently added some p+ul and p+blockquote negative margin rules in
62f2396ee2 to try to fix this, but those
created some secondary issues in interaction with the p:last-pf-type
rule. This rabbit hole is likely somewhat deep.
The right fix for this overall formatting is to implement the
inter-paragraph spacing as a p+p rule, rather than a bottom-margin on
the p rule; then, we get all the properties we're interested in for
how paragraphs interact.
We may need to do some follow-up work to add small p+ul and
p+blockquote rules to get the pixel-perfect spacing we want (or maybe
just adjust the ul/blockquote spacing CSS), but this is clearly a
better architecture for doing this work.
Fixes#12101 through solving the same problem it does.
This has no functional changes, just making the implementation more
standard.
We don't have any blockquotes outside markdown rendering, which is why
it's correct to collapse the blockquote rules.
This eliminates unnecessary use of the message_content CSS class in
favor of rendered_markdown, which makes more sense for places outside
messages where we display rendered Zulip markdown.
Now that we have a scroll container for the PM list,
it doesn't make much sense to limit the number to
five.
We may resurrect this feature if "more conversations"
actually fetches more conversations, but it doesn't
currently.
We also may soon make it easy to limit PMs to just
unread messages, which will make the max-5 feature
perhaps less necessary, and we don't want to make
the UI overly complicated.
Center aligned the icons from streams and decreased the font-size of
the icons from the global filters.
This dramatically improves the visual appearance of the left sidebar.
Fixes: #11917.
Blockquotes and unordered lists had a large amount of space above them
when preceded by a paragraph tag, which looks ugly. This is a common
issue with the CSS rendering of essentially all markdown
implementations (e.g. GitHub has this bug).
We resolve the issue by reducing that whitespace with negative
margins. Hopefully, this won't create other weird glitches in the
process.
Fixes#11631.
This adds a parent selector, `rendered_content`, to night mode syntax
lighlight selector. This helps us in getting the "day mode" syntax
highlight styles in night mode.
This adds a class `rendered_markdown` for all the elements which have
rendered markdown content; This is done to add different styles for
rendered content in day mode and night mode.
Also replace the element selectors from CSS to use the class.
Using lazysizes we only load images if they are in view.
This decreases load time and save more bandwidth since images are loaded
after html is loaded and if they are on screen.
Fixes#3564.
Instead of using the `trapsarent` keyword, which is interpreted
as Safari as black with an opacity of 0%, re-use the gradient colors
themselves in order to lead to a single color gradient. This allows
for the homepage to look the same regardless of browser.
Fix#11985.
This fixes the confusing behavior that errors sending messages were
not immediately user-visible.
Based on work by Dominik Gryboś in #11479.
Fixes#10537.
It is observed in Mozilla margin was considered from other side of thumbnail
due to some special padding issues observed in mozilla.
To fix this top and left value are assigned to 0 so that it automatically
takes its correct position in all browsers
Fixes#11867.
When we try to hover over Open or Download they were not highlighted
in night mode, because of incorrect specificity. This commit adds
highlighting in night mode (possibly fixing a regression when we made
night mode less aggressive about hover).
Fixes#11887.
This allows user to download the latest version of android apk from
the apps/android.
This will help the users who use Android without Google Play to
download the app and install it with ease.
To implement this I added a Download APK link on the apps.html page
which always points to the latest released version.
Fixes part of #11647.
We have this strange business requirement that the
blue-ish highlights for the current PM go into the
left gutter and all the way to the right edge.
We also have markup that treats the list of PMs
as a list inside the list item for the "Private
messages", which makes sense logically.
Before this change, the padding was done for the
outer top-left `ul`, but that caused the inner PM
rows not to have that padding when you hovered them.
Now we pad each individual list item and/or inner
list item or div.
Fixes#11879.
This was introduced in e0236646
For 1.5 years we did not find a case that needed it (besides the
`a` tag hover state, that is not obvious if it was needed or it was
used as an example)
It is not obvious if this solution was a good idea. The concern was
that `body.night-mode` is more specific than `body` and some styles
might override others less specific in cases we might not want that.
Of course, we want that in the majority of cases, and css-specificity
rules are not simple to comprehend.
Good further reading:
http://cssspecificity.com/https://specificity.keegan.st/
The added complexity of the resulting styles and the added code that
might not serve any practical purpose seem to not be worth it.
We now use 10px to the left of major elements in
left sidebar.
And we then explicitly use 19px for the following:
icons in top left
indent for (more conversations)
stream hashtag icons
stream lock icons
We also kill off 2px of gutter that was caused
by whitespace in the HTML (and was slightly messing
up alignment of names beneath "Private messages").
Finally, we make the topic indent a bit more explicit.
The previous gradient must have been from a previous design; it looked kind
of crazy against our current homepage. This widget also appears on /help,
/integrations, and other pages with a variety of different backgrounds, so a
neutral, muted style is probably safest.
The icon change is just because fa-off seems to be broken/missing. Maybe it
was in Font Awesome 3?
The extra padding line is to supercede padding (I assume) unintentionally
added by `.top-links a` to this widget on /help.
The border radius is a compromise between:
* Windows: no border radius on windows
* Mac: border radius top and bottom
* Ubuntu: border radius only on top
Ideally the image itself would just have border radius matching the OS, but
that's a bit tricky to do in the image editing software I'm using.
In this commit, I've added a feature to unstar all the starred
messages. This is useful, e.g., for folks who are using starred
messages to keep track of things they should come back when next at
their desktop.
The event flow is the standard one for a feature with a confirmation modal:
(1) User clicks on unstar all messages.
(2) We display a confirmation modal; if the user confirms, we send a
request to the backend to clear all starred messages.
(3) The events system sends that UI update back to us, removing the
stars from the UI.
Fixes#11401.
Most elements, apart from chevrons, now have explicit
font sizes.
In some cases I chose integer values that were close
to the calculated values you would get with all the
ratio calculations.
And then I tweaked how the hashtag/lock icons get
aligned.
The alignment for those icons if off in this version; it'll be fixed
in an upcoming commit.
The fonts there used to be 14.2px due to an arcane
calculation. Now we explicity set a value.
If you expand Private Messages, the font inside now
is explicitly set to 13px. It used to be 12.8px due
to a complex calculation.
This is a fairly big commit, but at the end
it simplifies a lot of things.
It's difficult to fix highly coupled code in
incremental steps because, well, it's highly
coupled code.
The main thing this does is give each type of
chevron in the left sidebar its own class
* all-messages-arrow (NEW)
* stream-sidebar-arrow
* topic-sidebar-arrow
Before this change, the "All messages" chevron
was using stream-sidebar-arrow, which was a
strange name for something that's not actually
in the stream sidebar. Obviously this was
cargo culted.
There was not much JS to change here--we just
fix the click handler for "All messsages".
And then there's a one-line change to the template,
and the rest is re-organizing the CSS.
Using a more specific class avoids confusion related
to the .arrow class, which is not only a popover concept,
but also a Zulip concept in the left sidebar.
The way we build chevrons is super messy and highly
coupled. This comment reflects an audit I did on the
code in its current state.
Subsequent commits will make things a bit easier to
understand.
We could arguably just use zero-unreads everywhere,
but we definitely don't want zero-topic-unreads
inside our PM list.
I prefer to just have these two concepts:
zero-pm-unreads
zero-topic-unreads
And it's super easy to share CSS properties for both.
The antialiasing decisions we made for the webapp should be constant
over the entire page, not limited to particular subsections or themes.
If we wanted antialiasing, we should do it on the entire page, not
individual random widgets. But it's not clear we actually want to do
it on the entire page. The `-moz-osx-font-smoothing: grayscale`
setting now happens by default in OSX Mojave (40% world market share
right now and growing), so there's no reason to override it. And
without retina displays, generally, subpixel rendering provides better
results than antialiasing (which overrides subpixel rendering).
Thanks to Anders Kaseorg for advice on this issue.
Add a background highlight to vote count button if currently
logged in user votes on that option.
Tweaked by tabbott to use better variable names and Rishi for better
styling.
After discussion, we decided that the red color is too distinct
and does not convey the idea of "almost offline".
This changes the new "unavailable" status circle's color from dark
red to grey, the same color used by the "offline" status circle.
Fixes#11589.
Adds SCSS style for the "unavailable" user status and enables its
usage in `buddy_data.js`.
The style is a red circle with a horizontal line. The values might
look a bit 'magic' but they were considered carefully ` height` of
1px was too thin, 2px was too thick, thus 1.5px was chosen.
Visually, #zoom_help_text acts like
.organization-settings-parent div:first-of-type when the Zoom option
is selected, but isn't treated as such.
No visual change with the #google_hangouts_domain change; just there to make
the code more readable/defensible.
Adblock Plus's "Block social media icons tracking" setting blocks
images with for social media platforms in their names from loading, so
we rename the Google logo to bypass this.
When copying a message by clicking on "copy and close" button in
message edit box an alert appears that says "Copied!"; Background
of the message is set corresponding with the day mode but not the
night mode. This changes the background of the alert message to
the dark color in night mode.
The background color of the portico pages aren't true white,
so this commit adjusts it to match the actual portico page
background color to eliminate differences.
This is mostly adding markup, calling some convenient
functions in buddy_data.js, and adjusting CSS.
To make the circles update dynamically, I mostly
orchestrate this though activity.js for now. It's
possible we'll want to adjust that eventually to
happen through something like a `presence_events`
dispatcher, but that's essentially what
a good part of `activity.js` does now.
We're soon gonna have user circles in four different places,
and the fourth place, Private Messages, will have different
size/position CSS.
Now each component does positioning and sizing in its
main CSS file:
user info, group info -- popovers.scss
buddy list, group PMs -- right-sidebar.scss
(We also use the more explicit syntax for padding each
side.)
We now have a function get_user_circle_class
that returns one of these values:
"user_circle_green"
"user_circle_orange"
"user_circle_empty"
And we put that in the templates.
And then CSS renders the circle of the appropriate
color.
The unit tests now explicitly capture whether
we are rendering the correct kind of circle.
This is a pure code move.
We want to use user circles in the left sidebar,
so this code will no longer belong in
right-sidebar.scss.
This code is just related to drawing the circles.
We can still position in size in other CSS files
(with more context-specific selectors).
This fixes a longstanding UI issue when you have way too many recent
private message conversations, as you can now scroll down the list to
find what you're looking for.
Fixes#5384.
Date separator exists inside the message_row, which causes the
message controls to be visible even when hovering on date
separator. These two rules are redundant and cause this buggy
action. Other rules handle the behaviour of message controls
being visible on message box hover. Hence these can be removed.
Previously, if you scrolled down all the way in the left sidebar, and kept
your mouse hovered over a link, you had a feeling that there was still "more
stuff", since you could see the top of "Back to Zulip" peeking out over the
top of the URL Chrome (and maybe some other browsers) add in the bottom left
corner.
This just adds a bit of margin so that "Back to Zulip" is above that when
scrolled all the way down.
The patch to bootstrap will make the position smarter, but we still
want to preserve the 100px default vertical offset we chose for visual
reasons.
Tweaked by tabbott to preserve the visual design.
Changed <h5> to <p>, and removed the special formatting of
.empty_search_text to make this more in line with the formatting we
generally use with empty narrows.
This removes the left border extending the stream label from the
recipient bar in from the drafts in drafts modal. Those borders are
important in the message feed for containing several messages, but
here we're only ever going to show individual drafts, and this change
avoids potential color clashes with the blue box surrounding the
recipient blocks.
This removes the change in background to a darker one for active draft,
also removes the change in recipient_row_date color to blue; adds a blue
border around the draft box.
The width of the messages div is set to 600px, while the
digest-email-container can be 500px at the most. Increasing the width
of the digest-email-container makes the /digest slightly more
readable.
The padding changes move the number a bit to the right and down, towards
where the bottom right corner of an unread count box would have been. This
makes the number look better aligned with the unread count boxes above it.
We want the search widget, when visible, to be
outside the scroll container for the stream list.
One obvious use case is if you start scrolling, and
then realize it might be less effort to search.
Also, for user search, it already worked this way.
We have to add a couple resizing hooks here, but
it's not necessary to change the actual resize
calculation, since we move the section inside
of #streams_header, which is already accounted
for.
The only markup change here is to add
a `stream_search_section` class. I don't
know why we use `notdisplayed` here instead of
jQuery, or what `input-append` is for, but I
considered them outside the scope of this change.
We can also remove some crufty CSS that was
compensating for it being inside the container.
First, we are not removing Group PMs from the
right sidebar, where most people see it.
There is a setting called:
[ ] User list in left sidebar in narrow windows
There are probably very few people that turn that on,
and even when they do, the setting only takes effect
when your window is less than a certain width.
This feature bitrots very quickly, because very few
core maintainers use it.
It's already kind of broken. It gets very crowded,
and we get CSS bugs when we move the right sidebar
into the left sidebar. (We can fix those bugs, but
they crop up unexpectedly due to the nature of CSS.)
We historically tried to maintain a ratio between
stream list, single-user buddy list, and group-user
buddy list, but the group-user buddy list gets
particularly crowded out, and it's basically useless
now.
We want to revisit the entire feature eventually, but
this commit at least gives the normal buddy list some
breathing room.
Also, if you need to see the info in the group PM
list, you can basically expand "Private Messages" to
see your recent group PM conversations. And if you
want to see who's actually online, that info is
already implicit from the normal buddy list.
This change only impacts users who have the setting
to put the user lists in the left sidebar when they
have a narrow window.
First, we move ".right-sidebar-items" as an entire
group.
Second, we append the items to "#left-sidebar"
instead of ".narrows_panel".
The name `bottom_sidebar` was misleading, because it
includes the entire "normal" left sidebar.
It includes the 4 narrow links at the top plus the
stream/topic list.
We now call is narrows_panel.
Note that the left sidebar sometimes also includes
the user list (with a display setting turned on).
And it will eventually include other views.
We also remove an intermediate value in the resize
calculations.
This adds date dividers within a single message group when the only
reason we had previously been splitting apart two message groups is a
change of date. The overall effect is a cleaner message list user
experience.
The downside of this change would be that the recipient bars no longer
will always show a new date for date changes; to fix that, we rewrite
how the floating recipient bars both set the date field on the
floating recipient bar itself, as well as ensure that non-floating
recipient bars don't show duplicate dates.
In a future design update where we modify how message recipient bars
look, we may very well be able to simplify this logic by removing some
of the dynamic nature of the recipient bar calculations. But this is
a good implementation of what remains.
Tweaked significantly by tabbott from Steve Howell's original, both to
extract these changes from a larger PR as well as to modify the
first_visible_message logic to handle some tricky corner cases.
Fixes#10171.
This changes the border-radius to 6px for the tabbed display, which is not
in line with the current Zulip style for border-radius (4px). However 6px
really looks a lot better for this (possibly because it's a bigger box than
most of our other boxes?)
Having a tiny bit of margin below the stream list
makes it possible to see the bottom of the scrollbar.
It also makes it so that the scrollbar activates
for a tiny range of list sizes where before the
last element would have been right up against the
bottom of the page, but we wouldn't scroll.
We have always intended to have 10px of whitespace
below the navbar, and this enforces it directly
and explicitly in the CSS.
Note that the three major panels still should
have a margin of 50px, which is equal to
the safe outer height of the header (40px + 10px).
The border makes the alignment look nicer. Without
a border your eyes plays tricks on you and makes it
seem like numbers are not in the same column.
The border color is the same subtle color as the
backgrounds in others.
Because CSS is annoying, you have to tweak the padding
to make room for the border.
(It should look ok in night mode, too.)
This replaces the current usage of stream names with stream ids.
This commit also removes the `traditional` attribute from the invite
form as now we are sending stream_ids as an argument; this was the
only place in the codebase we used traditional=true, and it's great to
have it removed.
We had initially designed the poll widget like a blog
post with comments beneath it but it makes more sense
to think of it as just a simple poll with options.
This is likely not the "right" fix in that it involved a negative
margin, but this does eliminate an annoying visual glitch where the
scrollbar overflows above its container in the left sidebar, without
creating other apparent problems.
Fixes#8731.
User was able to click delete button multiple time which could cause
multiple delete requests. This commit disables and hides the delete
message button after the first click and shows a spinner until http
the delete request responds.
Also adds a casperjs test to ensure that spinner becomes visible and
delete button becomes invisible after clicking on delete button for
first time and hides spinner and show delete buttton when message is
deleted.
Fixes: #11219.
NOTE: If you revert this commit, you want to revert
the immediately prior commit as well. The history
is that Ishan made some improvements to the widget,
but there were some minor bugs. I decided not
to squash the commits together so that the git
history is clear who did what. (In particular, I
want questions about the JS code to come to me if
somebody does `git blame`.)
Anyway...
This is a fairly significant rewrite of the polling
widget, where I clean up the overall structure of
the code (including things from before the prior
fix) and try to polish the prior commit a bit as
well.
There are a few new features:
* We tell "other" users to wait for the poll
to start (if there's no question yet).
* We tip the author to say "/poll foo" (as
needed).
* We add edit controls for the question.
* We don't allow new choices until there's
a question.
These mentions look like regular mentions except they do not
trigger any notification for the person mentioned. These are
primarily to be used when you make a bot take an action and
the bot mentions you, or when you quote a message that mentions
you.
Fixes#11221.
The legacy "Updated Successfully" message shown after saving changes,
is removed, and replaced with our standard "Saving" spinner and
animation.
Fixes: #11177.
This adds a proper template for the /digest page, making it a
reasonable way to view the digest email content for development and
debugging.
Fixes: #11016.
Add explanation in popover on disabled add-subscriptions input elements,
admin can't add subscribers to non subscribed private streams, only
subscribed users can.
Fixes#10593
This adjusts the spacing so that the out-of-view notifications for
group PMs (which have particularly long text) don't end up with the
"x" to close the notification overlapping the text.
Fixes#11058.
This adds a new realm_logo field, which is a horizontal-format logo to
be displayed in the top-left corner of the webapp, and any other
places where we might want a wide-format branding of the organization.
Tweaked significantly by tabbott to rebase, fix styling, etc.
Fixing the styling of this feature's loading indicator caused me to
notice the loading indicator for the realm_icon feature was also ugly,
so I fixed that too.
Fixes#7995.
This form isn't actively used, which is how it ended up broken, but it
basically didn't display its content properly at all.
Convert it to use our standard white-box framework.
This still doesn't look great in various ways, but it's at least not
obviously totally busted now.
Fix an issue that when a message is being edited, sometimes compose
options are hidden if there is no time limit. Also, move the options
further from the time limit to make them more noticeable.
Fix#11056.
The fixture changes are because self.upgrade formerly used to cause a page load
of /billing, which in turn calls Customer.retrieve.
If we ran the full test suite with GENERATE_STRIPE_FIXTURES=True, we would
likely see several more Customer.retrieve.N.json's being deleted. But
keeping them there for now to keep the diff small.
This styles the avatar and username that show when the registering
user is importing their settings from an existing Zulip account.
Tweaked by tabbott to fix the test/linter failures, a bit of styling,
and tag strings for translation.
A bug caused background links to open even when a modal in the user
settings overlay was active in the foreground. This commit fixes this
by disabling mouse events for the background when the modal is active,
and restoring them as soon as the modal starts closing.
Fixes#10654.
The stream/topic edit areas now have these ids:
#stream_message_recipient_stream
#stream_message_recipient_topic
They are pretty verbose, but being able to grep
for these without noise does have some value.
Also, add a new notification sound, "ding". It comes from
https://freesound.org, where the original Zulip notification sound comes
from as well. In the future, new sounds can be added by adding audio
files to the `static/audio/notification_sounds` directory.
Tweaked significantly by tabbott:
* Avoided removing static/audio/zulip.ogg, because that file is
checked for by old versions of the desktop app.
* Added a views check for the sound being valid + tests.
* Added additional tests.
* Restructured the test_events test to be cleaner.
* Removed check_bool_or_string.
* Increased max length of notification_sound.
* Provide available_notification_sounds in events data set if global
notifications settings are requested.
Fixes#8051.
Add a lock icon to the right of tabs on which nothing is editable
for normal users. Add lock next to Custom emoji option if only admin
can edit them.
Tweaked by tabbott to use title for the lock icons, rather than
aria-hidden, since they do convey useful information.
Fixes: #10893.
Positioning using flexbox makes life much easier for everyone. With
this change we make positioning of icon relative to the label in the
dropdown menu much easier to do and alter if required. We now no
longer need to fiddle with tedious pixel measurements for placing the
icon in the right place.
As a result of this commit we had to change a click event binding
back to be associated with .dropdown-toggle class rather than being
associated with the h3, i because of the re-arrangement of the
dropdown configs.
The integration categories dropdown was too wide in comparison to
the category lozenges and hence this commit attempts to smooth up
the UI a bit on that front.
The issue here was that if we opened up integrations page in
responsive mode (so the integrations category sidebar turns into a
dropdown) and click a few centimeters outside the actual dropdown
or perhaps the dropdown menu when its open, it is possible to toggle
or select a integration category.
What this essentially means is that clicking in blank area outside
visible boundaries of dropdown menu its possible to interact with it.
Fix: We change elements on which the click event is tied to and
adjust a bit of CSS for relevant elements so things look as they
used to but function in correct or better manner.
Previously, because the parens were added via CSS, copy-pasting the
EDITED notices resulted in junk like this:
Iago 3:51 PMEDITED
edited message content
Now, you get:
Iago 3:51 PM (EDITED)
edited message content
When a user clicks the compose `+` button, create a popover at the
bottom right of the screen including buttons for opening a new stream
message or a new private message.
Use CSS to display a `+` button on mobile but keep the more verbose
buttons on desktop. In the future, this button will be used to display
a popop for a new message.
This module makes it really easy to create are-you-sure
dialogs for dangerous operations.
Basically it's one function with five parameters. You
give three chunks of HTML, a callback function, and
a parent container.
The first use of this will be in settings_user_groups,
coming up in a couple commits.
This removes some unnecessary code duplication in the CSS classes for
Google and GitHub authentication social auth buttons.
This will, in turn, help us avoid extra work every time we add a new
authentication backend.
Changes -
a) Updated the border-radius to 4px for all the buttons.
b) Increased the margins between the labels and inputs.
These changes affect the login and register page's styling.
* Eliminate unnecessary div element wrapping around the icon and
change jQuery selectors accordingly
* Set initial position through CSS instead of JS
* Set color to inherit to prevent night mode issues.
Wrap all inputs tabs and inputs in `.contributors-list`, and increase
the width of that `div` to be 80px larger than the width of the other
content in order to fit each tab.
Instead of rendering tabs upfront, initialize them to a `Loading…`
indicator and then render them when clicked.
Use a `rendered_tabs` object to cache rendered HTML strings instead of
re-loading a tab (e.g. if it is selected, another tab is selected, and
then it is selected again).
Empty "person picker" fields appear with a much smaller width than all
other custom fields. Increase the `min-width` of the field that it
matches the widths of other text boxes.
Fix#10414.
On mobile devices, the search bar appears as too tall for the rest of
the top header. Fix this by setting `#search_query`'s height and
vertical alignment properties.
Fix#10373.
These buttons are displayed with a lighter background than other
buttons. Update their borders and background colors (along with the
border on the search box) so that they match the night theme.
Fix#10301.
This fixes the mis-sized text in the bulleted lists on /for/
working-groups-and-communities (and some other pages), by ensuring
p tags inside li tags don't get font-size styling applied to them
twice.
This fixes a UI bug where if a user had a lot of recent private
message threads, they'd take over the entire left sidebar.
This was caused by not setting the max height of users list in private
message container.
Fixes: #5384.
Instead of displaying a fixed error message inside the yellow bar itself,
now the yellow bar disappears on error and a red compose_error is shown.
The error message is the one returned from the server.
Fixes#9803.
The compose box closes on any click in the document outside the compose
box except for an element with an anchor tag or in its parents.
This commit adds an anchor tag as parent of the keyboard shortcuts
icon.
Currently, admin user has to add order of custom-field-choice in
input box to create and edit choice-type custom field.
Remove this input boxes and add drag-drop list of custom-field-choices
using Sortable.js.
Fixes#10129
This new div allows us to split out two concerns:
semantic list of items - remains in #user_presences
widget real estate - controlled by new #buddy_list_wrapper
We will use this for progressive rendering. We want to add
padding to the buddy list without messing with the integrity
of the actual HTML '<ul>' list. (One ugly alternative would
have been to add a dummy list item, which be a pitfall for
any code traversing the list.)
Basically, all the code relating to click handlers and similar
things was left alone. We only change js/css related to
scrolling, resizing, and overflow.
Changed search pill padding, `.navbar-search` flex-wrap to match with
the CSS refactoring in 66df4e3e84.
The `height: 100%` changes to `.navbar-search` and `.input-append`
make up for the issue in which the pills overflowed in the mobile
view due to `.navbar-search` height being declared 40px explicitly
while the actual heiight in mobile view was shorter.
Fixes#10059.
In 66df4e3e84,
`display: inline-flex` was added to `.pill-container` but
`flex-wrap: wrap` was missing which forced overflow pills to be on
one line and made the pill text overflow vertically. This was not
observed in composebox pills as `.pm_recipient .pill-container`
already had a `flex-wrap: wrap` rule which has been removed in this
commit to avoid duplication.
This is a fixup for e1291cf839.
While copying the the rules of `#searchbox` to `#searchbox_legacy`
in the search pills feature, the existing `#searchbox` rules were
missed in the conversion.
`#searchbox_legacy` has been added beside `#searchbox` in `media.scss`
instead of replacing that as both of them need those rules for the
mobile view.
Shrinking the widths enables all five core team profiles to be aligned
on the same line, instead of having four on the first line and one
profile on its own line.
Fix#10008.
Adds box-shadow to `#searchbox` when either `#search_query` or any
of the pills have focus. Uses jquery instead of pure css as the
`:focus` event occurs on `#search_query`, while we want to add
box-shadow to `#searchbox`. This could have been done with
`:focus-within` CSS selector, but it is not supported in IE or Opera.
`#search_query` already had an onfocus/focusout listener, adding
listeners to `#searchbox.pills` for those events wouldn't have worked
as you don't want the focusout event to fire when the focus shifts
from input to pill.
Also adds `focusin`, `focusout` and `css()` to zjquery. `css` is
same as `val`, except it returns an empty object in case of no value
instead of an empty string. I don't think `css()` is valid syntax
in actual jquery.
tab_bar.js becomes redundant after implementation of search pills.
This commit adds a comment to tab_bar.initiliaze, so the event
listeners related to it do not get initiated. This does not remove
any code related to tab_bar.js.
Also adds left and right border around the search icon.
Following points have been implemented in this commit:
1.) Add search pill on selecting typeahead.
2.) Re-narrow after removing a search pill.
3.) Add quiet optional parameter to removeLastPill.
4.) Pre populate search pills in narrow.activate.
5.) Clear existing search pills on narrow.deactivate.
Description of above points:
1.) I tried out using the description from suggestions.lookup_table
to append a pill using appendValidatedData so that the description
had not to be calculated again. But the description in the suggestions
lookup contains html due to highlighting. This html is escaped when
inputed in a pill. An attempt was also made to remove the higlighting
by replacing the tags. But other espaced characters like < also
popped up, so it was better to use append_search_string.
3.) If one wants to refresh the pill using pill.clear and wants to
repopulate them, evaluating the event_handler associated with the
action of removing the pill may not be desired.
4.) Pill population code is added to narrow.activate. Pills are not
populated if the narrow was triggered by search as search handles the
addition and removal of pill by itself. The reason for not handling
search too in narrow.activate is to avoid clearing the pills and
repopulating them. Example of some of the triggers for narrow.activate
include `restore draft`, `topic change`,`sidebar`.
Also modifies tests for search.js
The letter-spacing was changed last in commit
fc4d80d941 which is about a 5 year old
commit at the point of writing. The change is removed as I did not
notice any visual change on removing it. Changing the letter spacing to
normal lets the text in the pills be seen legibly, otherwise the characters
were overlapping.
Input pills require a contenteditable div with a class named input
to fall inside the pill container. On converting the input tag into
a div, the size of the input decreases which is compensated by a
line-height of 40px. Comment above letter-spacing:normal was removed
as chrome and firefox do not change the letter-spacing to normal
for a div via the default browser stylesheet.
NOTE: Currently writing something into the div will call the action
corresponding to that key in the keyboard shortcuts. The input will
work fine once the pills have been initiated.
For the casper tests, for now, we just use the legacy search code.
When we change that, $.val() cannot be used on contenteditable div, so
$.html() will need to be used instead in select_item_via_typeahead.
This changes the icon indicating that you can drug the custom
profile field rows in settings to be the double rows of dots
typically used to indicate draggability. It also gives those
rows the "move" cursor on hover.
This is essential for using simplebar, since simplebar doesn't account
for parent <div> paddings, which might cause scrollbars to be mispositioned
if not considered.
When you hover above the navbar, the cursor focuses on the page
body and scrolls the entire page, breaking the positioning of the
fixed sidebar and page content.
We disable scrolling on the body but allow the sidebar and Markdown
content page elements to be scrolled to fix this bug.
It seems to have been there to paper over a styling problem that was
actually caused by slightly mismatched font sizes (em vs. rem).
Signed-off-by: Anders Kaseorg <andersk@mit.edu>
This commit adds a Markdown tree-processor extension that renders
multi-line code blocks that are nested inside lists with the
formatting. Note that the code block could be nested inside multiple
list levels and would still get rendered correctly.
Tim: This fixes the need for unpleasant workarounds like
f5bfa4e793 and makes nested code blocks
in our documentation look exactly how users would expect them to.
This was used for the very early-stage Zulip "ask for invite" form,
which was built around a stamped envelope concept. The form was
removed from Zulip a couple years ago in
bded0d9d54, but this CSS was missed in
the removal.
This hides the up and down arrows that appear in the year input
of the Flatpickr-provided datepicker. (This is only used in
settings for now, but the arrows will be hidden anywhere Flatpickr
is used.)
Previously, commit e5d2e95 attempted to change the styling of the user
profile pill containers to match the inputs above it. However, it used
an incorrect selector (#settings_page), resulting in all other pill
containers on settings pages being changed to match it as well
(example: User groups pill containers in Organization
settings). Additionally, its selector's specified background attribute
resulted in problems in dark mode.
To correctly style the user profile pill containers to match the other
input's styling, we apply the uneditable-input class native to
Bootstrap so that we don't need to create an entirely new selector to
style it.
Note that the .custom_user_field .pill-container selector was added so
that it could match the padding of inputs. Also, the
.custom_user_field .pill-container:focus-within selector was added
with attributes straight from Bootstrap's input:focus selectors so
that .custom_user_field .pill-container would have a blue outline
while users were typing in the input pill, just like the other inputs.
Adding the 20*20 image inside the pill caused a minor increase in
pill height. Making the image 19*19 causes some increase in the height
under different zoom conditions. I'm not sure about the reason behind
this, so this can be counted as a hack.
Allow passing image link in the item passed to appendValidatedData.
When passing image link via any of the append* functions, make sure
that create_item_from_text for that pill also adds the image link to
the item created.
This commit does not make any visual change to the current app.
Changes to user_pill.js are necessary to enable user avatars for
pills.
This implements right-to-left message automatic detection support in
the compose box as well as the message feed. Full unit tests and
support in the message-editing UI are for future work (as are
potentially more fancy things like supporting things like
right-to-left multi-word names for users/streams/etc.).
Fixes#3123.
I also removed the comment that said "this is just a workaround".
It is not, it is technically correct for us to do apply different
CSS rules to <p> tags that aren't the first child of the <li>
element in question.
We remove css which has been dead since convertion of subscriptions
page to an overlay. This should ideally have been dealt with in
commit 1886f0a which actually did the converstion but we forgot to
handle it at that time.
We remove the dead CSS which was introduced in commit 963a93367
back in 2013 and doesn't seem to have any use now. Its probably
the case that we removed the actual html structure which used this
CSS since 2013 and forgot to clean up the css part.
This cleans up some leftover js and css from the effort of
redesign the rows of the #subscriptions table. Redesign happened
in commit 368b5859 and but we forgot to clean up these js and css
pieces.
squash to subs.js.
The user can also edit the question after adding it.
The question in the poll can only be added/edited
by the user who started the poll.
The input bar will be disabled for the other users
if the question is not yet added. If the question is
added, the input bar will not be visible to the other
users.
Fixes#9797.
Clicking on the unread count badge on the right sidebar did not
narrow the selected pm/group-pm. This commit moves the count div
inside selectable_sidebar_block. Also uses flexbox instead of
inline-blocks for user presences selectable_sidebar_block.
The reason for the bug was 71e3f778cc.
This commit makes the width 100% for selectable_sidebar_block only
on the right sidebar, the left sidebar selectable_sidebar_block
width is unset.
This updates the unread pills in the left and right sidebar
to look better at a wide range of zoom values. (It doesn't change
their appearance at all.)
Set the initial visibility of the page content to hidden via
the stylesheet, and allow any data fetching and rendering to
complete before making content visible.
Adjust the conditional logic within `render` to first check for
the case in which a user goes to a doc link, the case in which
we asynchronously fetch data prior making content visible.
Fixes#9577.
The list with the options for normal settings now has
the class normal-settings-list.
The list with the options for org settings now has
the class org-settings-list.
The new markup helps us avoid code like this:
$(".settings-list li:not(.admin)")
We also have funny hacks in our key handlers related
to the old combined-list approach, which we can
eventually eliminate.
Siddharth Varshney
Tim Abbott
shubhamgupta2956
YashRE42
Anders Kaseorg
majordwarf
Divyanshu Agrawal
vsvipul
Ryan Rehman
Steve Howell
Vaibhav Raj Singh
Rohitt Vashishtha
Mateusz Mandera
Vinit Singh
Ivan Mitev
Thomas Ip
David Wood
Dinesh
YashRE42
Rishi Gupta
Alexandra Ciobica
Yashashvi Dave
Vaibhav
Pragati Agrawal
Wyatt Hoodes
Cynthia Lin
Harshit Bansal
Archit Kaushik
Puneeth Chaganti
Shubham Padia
Aman Agrawal
Hemanth V. Alluri
Greg Price
Mayank Madan
sameerchoubey
Aditya Bansal
Boris Yankov
Anders Kaseorg
Vishnu Ks
Abhinav Singh
Nikhil-Vats
matkaczmarek
Priyank Patel
Marco Burstein
vipul chhabra
theredcap
Abhishek Kumar Singh
ruchit2801
varunvaruns9
alex
sahil839
Challa Venkata Raghava Reddy
overide
Shubham Dhama
TharunThomas8
Mohit Gupta
ishanrai05
Jeswin
Shoumorup
Akash Nimare
Cynthia Lin
seresheim
Joshua Pan
Max Nussenbaum
Aditya Jain
Marco Burstein
Roger Souza
psg0796
dipu989
Scott Lee
Abhilash Verma
Lyla Fischer
Eeshan Garg
Anupam Dagar
Rhea Parekh
Shayan Toqraee
Jack Zhang