24cbd6113 changed the line height of katex HTML to avoid overlapping
lines in wrapped math displays. But the change also applied to inline
math, resulting in large vertical gaps in a multi-line paragraph
containing inline math elements.
This cleans up the styling of the organization and the user settings
components to be more responsive and have more consistent styling with
the rest of the overlays.
Previously, the sum (capital sigma) operator would become
misaligned so that the lower and upper bounds are placed in
the wrong location. Changing the line height fixes this alignment.
Also, previously, wrapping long lines of TeX did not work, as often,
the different lines of math would overlap with each other.
Fixes#4657.
This is system unfortunately has a rather complicated calculation to
compute the offsets correctly, but the net effect here is that the top
section of the Zulip window is much more space-efficient.
Shrinking the tab bar underpadding, part of this change, fixes#4444.
We only need the underpadding to be as tall as the space above the
floating recipient bar, which is definitely less than 10px, so I don't
anticipate regressions caused by this.
Without changing how we render emoji in messages or changing the data
set used for emoji names, this switches us to the superior
percentage-based system for choosing which emoji from the spritesheet
to select and the iamcal sprite sheets.
It requires some small changes to CSS to ensure emoji are centered
properly in the new design.
Based on Harshit Gupta's work on "Interrelated emoji infrastructure changes".
I changed the watch_manual_resize function to return the listener
functions it creates, and then these are used to remove the event
listeners before the edit box is hidden.
Reusing code from the main compose_message component so that resizing now
behaves correctly. This means that when the user tries to resize vertically,
the autoresize code is disabled, and the textbox reverts to manual resizing.
Fixes#4573
This fixes the /me elements to be display inline-block and inline
rather than display block with top and left properties.
This also fixes an unrelated issue with emoji reactions not being
able to be clicked on with /me messages.
Fixes: #4218.
When a message update comes back from the server and replaces an
old message, it should fade in. There are two components to the fade:
1. The message fades in from opacity: 0 => 1.
2. The "edited" text will transform from X: -10 => X: 0.
This better sets expectatations for the fact that in Zulip, the
Organization settings UI is available read-only to non-administrator
users.
Tweaked by tabbott to update some additional references.
In this we fix the positioning of the loading spinner on the home page
when its loaded for the first time. First time here does not mean first
time use but means first time of a new session.
The default is too tight for easily distinguishing paragraphs. This
change increases it slightly, while keeping the last paragraph's
margin at the original value.
While it's sometimes nice to put a few selectors on the same line,
it is generally better to have a consistent way of formatting our
selectors, and most of our code up until now lists them vertically.
This change fixes the linter to enforce one selector per line, and
it cleans up the places in the CSS where we had multiple selectors
on the same line.
The advantages of one-per-line are as followers:
* cleaner diffs
* easier to see when multiple areas of the app may have the
same format
* less likely to go over 80 cols
* makes it more clear where we have deep nesting in the
individual selectors
* makes it easier for our linting tools to enforce
whitespace violations
This also fixed an old bug where we had ".landing_page h2, h4", which
sets "h4" styles outside of the landing page.
This adds an image feed that you can scroll through with hotkeys
in the lightbox.
The left and right arrow keys along with the left and right arrows
will go to the prev/next image, and clicking on an image will also
take a user to that image.
Our JS/CSS now only uses the user-fade class for elements
that have the user-sidebar-entry class. This should prevent
bugs related to having doubly opaque elements.
We now have specific HTML/CSS classes for message fading and
user fading. They currently both have the same effect, changing
opacity, but we can now more easily treat them differently.
This change also removes "faded" attributes in compose-fade,
which avoids some confusion related to landing pages having
a "faded" class as well.
This refactors the .message_controls to stop relying on absolute
positioning and strange CSS, and throws them inline.
This also restyles so they hang to the right of the time which is now
always present.
Fixes: #3761.
This changes the layout of administration for non-administrators such
that they can view organization settings and emoji settings and
displays everything as readonly unless they have the capability to edit.
For now, we just enabled this for the emoji settings and organization
settings features.
This makes life a lot easier for people inviting users to a new Zulip
organization, since they can give some form of context now.
Modified by tabbott to clean up CSS, backend code flow, and improve
the formatting of the emails.
Fixes: #1409.
Fixes#268.
Modified significantly by tabbott to:
* improve code cleanliness / repetition
* add missing translation tags
* move code into message_edit.js
* correspond with the new backend.
* not display the option for messages only topic-edited
Like the topic edit pencil icon, the new UI is mostly invisible, but
appears when you hover over the recipient bar.
* Added a tag to hold the mute button in recipient_row.handlebars with
corresponding styling in zulip.css.
* Added an event handler for the mute button in click_handlers.js.
Fixes: #2235.
Now message senders are vertically aligned with the content, whether
mesasges are /me style status messages or not.
We'll want to do more in the future to move both sender names and
message bodies further towards the avatars, I think, but this is
definitely an improvement.
The [More...] link for un-collapsing messages has been made easier to
click, by giving it a top margin which prevent clicks on the top
portion of it from being masked by the top part of the message body.
Fixes#3313.
Currently the loading spinner on the settings page is too small
and is in the left corner of the parent box. This changes the width
to the same as the main page: 100% fill inside a 38px square container.
This adds a capped height of 70px to the description box (same as the
images) and then uses a gradient to fade out any text that may be near
the bottom.
This changes the logo that sits at the top of the messages to an SVG
rather than a PNG used as the current navbar logo that is filtered to
be grayscale.
This fixes a significant performance regression that had been caused
by adding that logo to the top of the feed.
Thanks to @rishig for generating the SVG!
This reverts commit e4761782e0.
This caused performance problems and jolting of the main UI, because
it broke the important invariant that the height of a Zulip message
should not depend on the content of slow-to-load assets such as
images.
Add the Zulip logo to the top of the messages feed to show that there
are no more messages to load, or that it is loading more (if the
spinner is still around).
This shows a date on a message header whenever the date of that
message is different than the date of the previous message.
The previous logic was bugged and didn't display dates in headers at
date transition points.
Previously, the emoji reactions popovers were keyed off the
edit_content area, which is problematic because that area was
created/deleted on hover, resulting in orphaned popovers (which
wouldn't close properly normally). That had been hackishly addressed
in the original PR with the overbroad `$('.popover').remove();`. To
remove that, we fix the actions popover to always be based on an
element that exists in the page.
There probably more to do here, but this is good enough to merge emoji
reactions and iterate from here.
In the new stream creation modal, added checkboxes for each stream
and a toggle to see or hide the checkboxes. Altered filtering to
filter streams and users. Added corresponding casper tests.
When a stream is checked/unchecked, it does not affect the state
of any user checkbox. This may be visually unclear as users can be
added even if their checkboxes are empty.
Fixes#2448
This change adds support for displaying inline open graph previews for
links posted into Zulip.
It is designed to interact correctly with message editing.
This adds the new settings.INLINE_URL_EMBED_PREVIEW setting to control
whether this feature is enabled.
By default, this setting is currently disabled, so that we can burn it
in for a bit before it impacts users more broadly.
Eventually, we may want to make this manageable via a (set of?)
per-realm settings. E.g. I can imagine a realm wanting to be able to
enable/disable it for certain URLs.
This restyles the message_controls options to center them horizontally
while fixing them closer to the right side of the edge, along with just
replacing the edit button with a preview source button once editing is
disabled.
This moves the edit button to underneath the timestamp such that when
you hover over a message now the timestamp hides itself and the edit
button appears (if editing is allowed).
Fixes#1733 and other annoying issues with this field.
In 25b28bf82c and then
cb1bc70ab0, we attempted to make long
code blocks scroll in a reasonable fashion, without much success.
This change causes code blocks to be line-wrapped, without needing to
set `overflow-y: hidden` for paragraphs (which cause problems with
taller elements like emoji that overlfowed wrong). Our octopi finally
have legs again.
It's not clear that this is the final answer, but it's the best
version we've found so far.
This alert bar thing was buggy and didn't look that good, so let's
just remove it. We can always write a nicer thing advertising the
desktop app later.
The issue is that if you post a very long line of code it will overflow
the .message_content div and force the width of the main message page
to be as long as the line of code.
Fixes: #2156
This fixes the z-index of the lightbox overlay, which previously
appeared behind the header, and the muting notification to be above
everything else on the page.
Fixes a regression introduced in
08b61c1b3d, where .alert-bar-container
would be above the menu, and thus block highlighting of the top item
("Manage streams") in that menu.
message_edit_form.handlebars already has a message_edit_topic that
refers to the topic edit section of message editing, and this made
things very confusing.
Filter behaves similarly to filter in left sidebar, see PR #684. Added
stream input field to the stream creation modal along with other settings,
for clarity.
Fixes#455, #563.
- Expand a box full of emojis into the
compose window for users to graphically select emojis.
- Append an emoji to the end of the message when a user
clicks the emoji in the emoji box.
- Trap the escape key to always close the emoji box
before closing anything else if the box is open.
- Fixes: #147.
This adds an event listener (by way of delegation) to the
.message_inline_image elements that pops up the overlay and hides it
when the overlay exit is clicked.
Fixes#654.
This adds a support a notification at the top of the screen that
alerts a user they’ve muted a stream and gives them the option to
unmute if it was an accident.
The notification disappears automatically after 4s, but if a user
moves their mouse over the notification, the timer resets to 2s after
the user moves their mouse off the notification, to make it easy for
users to read the full message and decide what to do.
This adds a preview button to the subscriptions page to allow a user
to check out the stream without having to subscribe.
The button’s default state is hidden but on subscription row hover it
shows itself.
The preview button updates its text from "Narrow" to "Preview" and
back when a user subscribes and unsubscribes from a stream.
Fixes: #1519.
This restructures the styling for the Zulip settings and
administration pages to minimize use of Bootstrap and use a consistent
styling library for similar elements.
While it is basically a wash in terms of the page's visuals, it will
make our life a lot easier for future work on improving the settings
pages section of the site.
From the popups that appear when clicking the down-arrow in the left
column's streams, you can now unsubscribe from that particular
channel. This runs on the same function that unsubscribes you from
streams in the "Subscriptions" tab.
Fixes: #1554.
[tweaked by tabbott to fix some errors]
The ‘for’ attribute is not valid HTML in the case of this because the
emails are invalid character sets and the input has no ID with the
email.
This changes it to a data-name which is still searchable but doesn’t
interfere with typical input behavior.
The checkboxes no longer float-left, fixing an issue with the
subscribe buttons leaning right in narrow windows.
Fixes: #1491.
This adds a permanent scrollbar to code blocks to get around some
Chrome on Mac issues where scrollbars won’t appear with particular
combinations of hardware.
Fixes: #1565.
Due to the border-top being tied to the .message-header-contents
element rather than the recipient_row in private message groups, the
floating container would be 1px more vertical when representing private
message groups than with public message groups.
When the feedback module is hidden the #userlist_header border would
brush against the navbar. Check if the feedback header isn’t there and
remove the border top.
The color picker original z-index was set to (2^31)-1 which overrode
everything on the site. This behavior is unwanted as the color picker
should not override the z-index of the navbar.
In changing the z-index to 100 the navbar remains above the color
picker.
Create `media.css` using media queries that had been at the bottom
of `zulip.css`, then update miscellaneous setttings/docs files.
I also add `.screen-medium-show` and `.screen-narrow-show` to
`media.css`, as they seem to be an important part of our
responsive design.
Fixes#1532.
This is controlled through the admin tab and a new field in the Realms table.
Notes:
* The admin tab setting takes a value in minutes, whereas the backend stores it
in seconds.
* This setting is unused when allow_message_editing is false.
* There is some generosity in how the limit is enforced. For instance, if the
user sees the hovering edit button, we ensure they have at least 5 seconds to
click it, and if the user gets to the message edit form, we ensure they have
at least 10 seconds to make the edit, by relaxing the limit.
* This commit also includes a countdown timer in the message edit form.
Resolves#903.
Assigns hotkey 'w' to search streams.
Only show search box when active. Activate with hotkey or by clicking
STREAMS.
Filter matches at the beginning of words in stream name.
Behaviour is otherwise almost identical to user search.
Casper tests.
* The warning contains a count of the number of people in the stream.
* An error appears if the warning is ignored and the user tries to
send the message anyway.
* The message cannot be sent until the warning is acknowledged or @all
/ @everyone is removed.
* This only applies to stream messages and not private messages.
Fixes#853.
Previously, the Zulip subscriptions page's error bar would always be
at the very top of the scrollable view, and thus would likely be out
of view when an error happened. This fixes it by having the error bar
always placed below the search box (and thus visible regardless of
where in the scrollable streams view we are).
Fixes: #515.
[commit message and comments expanded by tabbott]
Like the Stream Subject lists, Private messages are now shown
when the user clicks on the "Private message" link. User can drill in
to get more than 5 conversations. Selecting PMs from the user or group
PM lists on the right sidebar also opens the list & highlights the
selected conversation.
[Edited by tabbott@mit.edu to fix some small bugs.]
Include new field on Realm to control whether e-mail invitations are required
separately from whether the e-mail domain must match.
Allow control of these fields from admin panel.
Update logic in registration page to use these fields.
(imported from commit edc7f0a4c43b57361d9349e258ad4f217b426f88)
It's been very buggy for a while, has limited usefulness compared with
unread counts, and profiling over the weekend indicates that it's very
slow.
(imported from commit 716fe47f2bbec1bd8a6e4d265ded5c64efe2ad5c)
We show a user as "on mobile" if:
* They are only active on mobile
* They are inactive on all devices and can receive push notifications
(imported from commit 0510b9371727cd19c72f6990df7112921c36ad48)
Also:
* Change fixed element positioning and fix bugs
* Move settings dropdown back to the right and add left padding to left sidebar
(imported from commit fcf903b59617687f94618a01ce7544b69f408130)
Adding one row to the Navigation table made the
Keyboard shortcuts dialog look ridiculous, and it
was caused by a design based around float-left-ing
that broke down when the size of the "Navigation" box
was bigger than the "Composing messages" box.
Now we use a div to enclose the top two boxes in
the modal.
(imported from commit 90288ec288d4cf3d50ed7f5bcb48c8bb3d033f19)
This reverts commit 462a3eb5e6b83f9d8091b83e3f8dc458236938ed.
We're reverting this to see if it is the cause of our recent CSS
performance issues.
(imported from commit 6a0b041cfcb6770bbfda0d354444bad2d64459ab)
The old layout was misleading, because users would make the perfectly
reasonable assumption that their avatar change wouldn't be made until
they hit the Save button. Moving the avatar stuff below the Save button
makes the UI clear and also unclutters the form for updating name and
password.
(imported from commit 9154ba69a2d61844701c88c2afdf399532ccddd9)
A description was added to the streams and it is now displayed on the
subscriptions page. It can not be set in the UI yet.
(imported from commit 81d08b65eee42dba87cd99dd5bd30106c4eb6c6a)
Always render the Administration menu item from the back end, but
make it be hidden by default until the page is loaded. Then, the
client can un-hide it as needed.
(imported from commit 66e607eec430d7179b4d5ac3f5416f5be8ac26c9)
Add javascript to handle the button clicks and update the status based
on the subscribe and unsubscribe events from the server.
(imported from commit 6b9c0b40d9084e3d8b64bed701ebc786bef6d432)
It was confusing, because it has different meaning that being
the opposite of active_user_row.
(imported from commit df190afb2d9bccf9790c7373802b16ff6da2f2cb)
Added a default_desktop_notifications boolean to userprofile with a UI
in Zulip Labs. This flag is used to default the notification flag on new
subscriptions.
(imported from commit a25223cc5ecf09980cf877991e25034bb3fd4046)
Whatever text is entered into the search box under users is used
to filter users by their full names. You can use commas to search
for multiple users. Search terms must be at the start of names, so
"st,fr" would match "Steve Howell" and "Leo Franchi" but not
"jesstess." Names are case insensitive.
(imported from commit 822b72883928d3c941d38e9798774d71b0689f30)
Image and video links in the twitter API are media and need to be
handed on separately. We also include a preview image if the media link
is a to a picture.
(imported from commit 2bd00d267e51b29ad0ba681195b2bfea9b991d8c)
This is the UI piece that finishes the features to let admins
make streams private or public.
(imported from commit 1a193165a6304dc358982e9850a75965fb3a03fd)
On OSX Chrome, if you scrolled and then went to the settings gear
quickly, the scrollbar could stick and obscure the triangle part
of the gear menu, which was annoying. (You don't actually have
to click the triangle to pull up the menu, but that's the
affordance.)
This change adds a little margin to the right of the gear.
(imported from commit fa64122d913a17b765d00802184009eaaeaef0b1)
When we rebuild the user list from scratch, set the unread
counts in the templates to avoid multiple DOM updates.
(imported from commit 2d0c9b0fb99b382332e464ba7c3caad95e05363e)
The rest of the Settings page seems to eschew the colon, so this
change makes the bot listing consistent.
(imported from commit d13ac811b230413f9bbc9718fb7ec35898bdf392)
We now use window.innerWidth to check for CUSTOMER7's skinny
mode, which empirically seems to be more consistent with
CSS's max-width @media settings.
I tested under FF, Safari, and Chrome.
(imported from commit d440998634633c11b471fe732104be252c979cd4)
We now have a stand-in message that says "Loading CSS...", which
only gets hidden once the CSS loads. This is a better user
experience than seeing completely unformatted Zulip HTML on the
page. The message is set to fill the whole page, and it's cleared
once zulip.css gets loaded.
(imported from commit 613fe3d6a39197aabfeb63823b7fad75834bb9eb)
This reverts commit f81f4b2739cbf8e3d3c2db5e467cf55b65f0c2bd.
Conflicts:
static/styles/zulip.css
(imported from commit 6e62619a5f16f120134b222b331a066a57b7cfc6)
This reverts commit b3f8f8f79952c34cdf4087683210bab6e4e46a27.
This seems to break some of our copy-and-pasting code.
(imported from commit 052296a0f4bdb47342708a5e520be260863ccafd)
For some reason "font-style: italic" causes the "(more topics)" link
to be invisible for a while.
(imported from commit e75610e4b1f1263a48dac76ab8d01bb4a29c3d47)
In the first cut at topic zoom, I was re-rendering the
streams list, but this created glitches with orphaned
list items. The reproducible bug was that unread counts
on unshown streams weren't updating.
In the new approach, I keep the elements more permanent, and
I just hide and show them as needed, either through jQuery
show/hide or permanent CSS selectors.
I got rid of toggle_zoom(), so that we just explicitly zoom
in and zoom out in all situations. In particular, when we
narrow, it's more clear now that only stay zoomed in when
we're narrowing to the same stream as before (including topic
narrows within that stream).
When you zoom in, the number of topics is no longer limited
to 30, since that was kind of arbitrary anyway. (In practice,
the number of topics is usually well under 30, anyway, due to
the way we track them on the client.)
(imported from commit 5b6c143dee9ba9fe557d8cc36335ff28efb4b0de)
Reported to us by one of our users - prior to this change, code blocks
get sort of cut off by our "selected message" highlight.
(imported from commit 395ae41baca12ea55bc39048b4291e29f78a8db5)
This link lets you zoom in to more topics. We only show it if
there are topics that we had to hide to respect the max-5 limit
along with other rules of when you show topics.
This is feature flagged to staging only.
(imported from commit 9915004ec2eb3df7416fe45c0e60cebcd7fecfea)
This commit doesn't actually add the final UI to zoom/unzoom
topics, because I want to keep those in separate commits, in
case we change how to enable the feature. But this commit
adds a toggle_zoom() function that zooms/unzooms topics.
Zooming is minimally invasive, because we don't really introduce
many extra elements to the UI; instead, we just make the list of
streams be a list of length one (i.e. the active stream). This
gives us a lot of stuff for free, basically, like unread counts, etc.
(imported from commit 814c1361b6210d1591b4174bed1d6e0c98a3f255)
This moves the notify-not-in-view notifications into the composebox area.
It also tries to be a bit smarter about what action it links and what it displays.
(imported from commit 1c79bd0d9ef972059a006b17501a09b72e961ee3)
If a user types "/me runs to the store", we put "runs to the store"
in bold after their name.
(imported from commit fbc11e99244e1c8fa1c03e4753e706957fcd449e)
Show up to 10 of your recent group PM conversations in the right
sidebar. Clicking on the links narrows to the huddle and opens the
compose box for the huddle. The green circles have opacity
proportional to the number of users present in the huddle.
This is feature flagged to staging only.
Some of this code was written by Allen before commits were squashed.
Known issue: unread counts disappear on certain refresh events.
(imported from commit 3b44665150ba20594d8b0295cb30df03601c1d52)
Cynthia Lin
Tim Abbott
Reid Barton
Brock Whittaker
Cory Lynch
Rishi Gupta
derAnfaenger
Jack Zhang
Raghav Jajodia
Abhijeet Kaur
Aditya Bansal
digi0ps
Kamal Marhubi
Steve Howell
hackerkid
Yago González
Mahim Goyal
Boris Yankov
Ayush Jain
Kartik Maji
Tommy Ip
Durga Akhil M u1604vbox
brockwhittaker
khantaalaman
brockwhittaker
Mahim Goyal
Alicja Raszkowska
peguin40
Brock Whittaker
Igor Tokarev
aakash-cr7
Vikas Parashar
Ilona Brand
Umair Khan
Rishi Gupta
Tim Abbott
Preston Hansen
Michael Cordover
Caroline Liu
gregmccoy
Tomasz Kolek
Vladislav Manchev
Kumar
Josh Mandel
Kara McNair
Kate Buckner
David Roe
Zev Benjamin
Jason Michalski
Allen Rabinovich
Steve Howell
Luke Faraone
Waseem Daher
Leo Franchi
Jessica McKellar
Tim Abbott
acrefoot
Zev Benjamin
Jeff Arnold