This commit addresses to issues with the left sidebar:
The cursor flickering when hovering over topics, and
the cursor not becoming a pointer when resting just right
of a topic's name (in a clickable area).
This is a follow-up to #4675.
Can be added to the landing pages via:
+ {% include 'zerver/compare.html' %}
+
I'm avoiding adding that include into the landing pages until we have
time to do a bit of tweaking of the styling to integrate better into
/hello/ (primarily color-wise).
Most of the work for this was done by Brock, huge thanks to him!
This enforces a max-width of 1024px on the #settings overlay.
This commit also cleans up the "Your Account" tab to display
correctly without the avatar bleeding over to the next line.
This changes the styling of the user profile popup to be responsive
to mobile devices. In this case it is converted to a modal form using
flex to center it on devices with screen sizes under 768px in width.
Fixes#4669.
This doesn't completely fix settings responsiveness, but it's a big
step along the way. Outstanding issues include:
1. When switching tabs from settings to organization, it will launch
the first item which is more annoying in this view since it brings you
into that tab. Haven’t decided on an elegant solution to this yet.
2. Sidebar scrolling doesn’t work. I have to restructure how the top
section and bottom sections of content are displayed to fix this.
Likely by enforcing min-height of 100% - bottom height on the top piece.
3. Most of it is actually reasonably responsive but some isn’t, and
should be fixed on a case-by-case.
The avatars were previously their natural width, however the avatars
should always be 100% width since the height and width of the images
are known to always be equal.
Before this commit, hovering over the blank area of a stream
would not reflect its "clickability". This behavior is
inconsistent with other clickable lists, such as the user sidebar.
This commit changes the cursor to a pointer when hovering over a
stream and removes annoying pointer-default-pointer changes when
hovering with the mouse over multiple users in the user sidebar.
This removes scaling from the emojis by changing the background size to
a lower value and then allowing for the widths and heights of the
emojis to be proportionally smaller.
The transform: scale property would cause many more repaints in Chrome
and other browsers than should have been necessary which would render
messages above and below the feed light grey boxes that would
momentarily flash as blank before filling with content.
Modified by tabbott to use a percentage in the background-size.
Fixes#4660.
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".
Tables were previously improperly using the <tbody> to show the headers
so it was not obvious that the styling for <thead> did not represent
the styling of the rest of the tables anymore, so this normalizes
the styling to be consistent with how it looked when the first row
was in the <tbody>.
This removes the old compose emoji picker in its entirety, changing
the few callbacks needed to launch the reactions-style emoji picker
instead and hook it up properly.
Callbacks for reactions and composing messages are distinguished by
selecting for, respectively, the .reaction and .composition classes.
Fixes#4122.
It's technically the number of users yesterday. Also, "number of active
users today" suggests something like daily actives today, whereas this graph
currently shows 2-week actives.
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 restructures the <a> tag to be clickable essentially anywhere
within the <li> tags, unlike before where due to it being “inline”, you
had to hover over the text in particular.
This completes a major redesign of the Zulip login and registration
pages, making them look much more slick and modern.
Major features include:
* Display of the realm name, description and icon on the login page
and registration pages in the subdomains case.
* Much slicker looking buttons and input fields.
* A new overall style for the exterior of these portico pages.
This makes the height of the list-items all 24px and changes
the home icon to be a slightly larger 16px instead of 14px which
looked visually smaller than the other icons.
This fixes an issue with topic names overlapping in the left sidebar.
While we're doing that, it makes sense to shrink the maximum size of
the topic input box, to discourage sending with topics that will be
cut off.
This changes the right sidebar unread count styling to match the left
sidebar styling — in that they all now should have a 4px border radius
on the edges of the unread count blocks.
Note that this code is disabled until the infrastructure for the
feature can be finished.
Tweaked by tabbott to use slightly cleaner names for the various sets.
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 fixed the fact that the scrollbar for this popover was super ugly
on Linux, while also ensuring that we have a consistent 6 emoji per
row in the popover (an important detail for the arrow hotkeys).
Transfer css from right-sidebar.css to components.css to make it reusable.
The 'margin-bottom' property is removed from 'input-append' class as
it does not affect the styling of the element.
The height of the settings page content is not quite as tall as the
settings page could allow which makes for an empty white space at the
bottom of the settings content container.
The tabs can have text inside them that is wider than 90px, especially
in some unexpected cases (e.g. a translation longer than the original
English string).
This type of tabs can be seen in the following popover menus:
- Stream subscriptions
- Help (with hotkeys, formatting info, etc.)
- Settings
Now text wider than the tab is ellipsized so it doesn't cause any
problem with the rest of the layout, except in the help popover (where
it gets wrapped).
This changes the font size and weight of the popver at the bottom
of the screen (hover over "?" to see) to be a larger font size
(increased to 0.75rem from 11px) and to a bolder font weight
(500 from 300) which improves the readability of it.
In this commit we just adjust the position of user profile popover
opened when we click upon buddy from buddy list to view user profile.
The new position ensures that the little blue border visible from back
due to pointed to message is completely hidden by the popover.
In this commit we remove the extra padding appearing around the
user profile images. This can be only reproduced when opening
user profile from buddy list.
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.
This fixes the height of the content body to be 100% - 45px instead
of 100% - 60px which is a fix necessary due to the previous change
in height of the settings navbar.
* Change the classes and ids of different widgets and modals
and make suitable changes in `admin.js`.
* Remove any other occurrences of `alias` or `realm_alias`
from admin.js.
This `overflow: hidden` constraint would make it so that modals
embedded in the sections would have their edges cut off. This fixes
that and doesn’t seem to cause any other regressions.
Fixes#4208.
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.
This removes the 200px width limitation that was part of a previous
style guide for the settings/administration pages. It force-wraps
lines that shouldn't be wrapped and no longer serves its original
purpose.
Fixes: #4312.
There appears to be an issue in which on production the
./landing-page/assets folder is excluded from the build process,
so move it to the parent folder to fix the assets to appear in
production.
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.
- Add message retention period field to organization settings form.
- Add css for retention period field.
- Add convertor to not negative int or to None.
- Add retention period setting processing to back-end.
- Fix tests.
Modified by tabbott to hide the setting, since it doesn't work yet.
The goal of merging this setting code now is to avoid unnecessary
merge conflicts in the future.
Part of #106.
This fixes the styling to stay on the screen of most reasonably sized
monitors along with extending the JavaScript code to allow for the
video to be keyed to in the lightbox.
The issue is that stacking the two transitions appears to make the
::after pseudo-element slower for some reason than its parent. This
visually appears to fix it.
- Set the width of .login-page-header to 100% to make it responsive on
smaller screens. Previously, the header went off screen for screen
widths <360 px.
Tweaked by tabbott to remove unnecessary translation tags.
Fixes#4106.
- Added a media query for `max-width: 768px` where the changes in the
css will take place.
- This fix also makes the navigation menu responsive.
Tweaked by tabbott to better contain the CSS to this module.
Fixes#4022.
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.
The child ".image-preview" has a background which is ordinarily
invisible (as it is the same color as the #lightbox_overlay bg,
however when fading in it is noticeable.
- The buttons now have a flat look (dropped the border-radius) with a
white background color.
- The font colors now match the darker green shade of the navbar.
- The border-colors match the lighter green shade of the navbar.
- Green is used for all the normal user buttons, while the admin
buttons are a nice blue.
- I’ve `git grep`d to confirm that changes in .btn-direct only affect
the buttons on login.html
Fixes part of #4106.
Send typing notification events when user types in the compose box.
Listen for these events and display a notification.
Sending notifications: Notifications are throttled, so that start
notifications are sent every 10 seconds of active typing, and stop
notifications are sent 5 seconds after active typing stops or when the
compose box is closed.
Displaying notifications:
When a typing notification is received, if the current narrow is private
messages or is: pm-with and the user is not the sender,
"Othello is typing..." is displayed underneath the last message. This notification is
removed after 15 seconds. If another notification is received during this period, the
expiration is extended. When a stop notification is received the notification is removed.
Internally, a list of users currently typing is maintained for each
conversation (in a dict). When an event is received the list (for the appropriate
conversation) is updated and the notifications template is re-rendered
based on the narrow information. This template is also re-rendered when
the narrow changes.
Significantly modified by tabbott for clarity.
Fixes#150.
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.
The pointer events for the sidebar were incorrect in the way they
were set such that when the sidebar was off to the right and
hidden it would still attract pointer events.
This allows for users to resize the message compose box without it
collapsing back down to jQuery autosize’s preferred height.
When you hide the compose box and then re-show it, it keeps the
previous height but reactivates the jQuery module.
Fixes: #2236.
The drafts container was too skinny on mobiles, so the enforced
max-width of 60% should be ignored in favor of expanding to 90%
of the screen width.
This also fixes an issue where the content does not reach the bottom
of the container due to having too short of a height.
Fixes: #3867.
This fixes the mobile web experience for Chrome on iOS.
Apparently, Chrome-on-iOS silently has a `viewport` module that
overrides and user-defined module by that name, causing all of our
code that accesses the viewport module to not work on that platform.
We fix this by renaming it.
Using this UI, a user can now reactivate the bots owned by him.
Until now if a bot was deactivated, there was no way to use the
old bot's original email address. But now they can be reactivated
and their email can be reused.
Fixes: #1183.
This adds a button to #subsciption page called "View Stream"
that narrows the user to that particular stream.
This fix involves typical changes to JS/CSS to add new features,
and we also add a "preview_url" field to the sub object in
stream_data.js.
Fixes#3878
- Change templates/analytics/stats.html to use 'Last
Week', 'Last Month', 'Last Year' time ranges instead
of 'Last 10 days', 'Last 30 days'.
- Change static/styles/stats.css to not set background
color for default time option, for messages sent by
client and message by recipient type.
- Change static/js/stats/stats.js to show only available
time range options, and set background color for the
default. The default is Last Month if it exists, and
otherwise All Time.
Fixes: #3856
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.
A clear-search option to clear the user-list searchbox has been added.
This feature was present in the main searchbar but absent elsewhere.
Fix a part of #3716.
Now because it isn’t floating left it won’t slide down to a level below
the rest of the content when there are pixel rounding errors with
browser zoom.
This currently only supports this in emoji reactions, not in actual
emoji in message bodies, but it's a great start for people who want a
text-only view.
Tweaked to update the text by tabbott.
Fixes#3169.
This restyles the subscriber list in the subscription settings panel to
have a more padded and lighter aesthetic and replaces the dark red
buttons with transparent buttons that have only red borders and inner
text.
It's currently broken (e.g. see Issue #3713) and non-responsive. The whole
page needs to be styled anyway, so these can be added back once that
happens.
This makes text look bad in Chrome on Linux; it happened to not cause
problems in production because our minifier broke it (see
https://github.com/yui/yuicompressor/issues/91), but text looked bad
in development.
The transition "all" by default also affected the transition
on the height change of the compose box which ended up making the
compose box appear to be laggy and choppy.
Change the remaining "Admin settings" with a button, namely
changing a stream's privacy, to instead be a "[Change]" link
opening a confirmation modal.
Fixes: #3493.
This removes the arrow from the subscriptions header at full
widths where the arrow is not required because the subscription
settings/stream creation prompt don't take up the full width of
the screen and require an arrow to go back to the streams list.
Fixes: #3762.
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.
* Created a drafts modal to display/restore/delete drafts
* Created a Draft model to support storing draft data in localstorage
* Removed existing restore-draft functionality
* Added casper and node tests for drafts functionality
Fixes#1717.
This provides a fairly intense highlighting of when you're hovering
over a given emoji reaction element.
We may want to tone down the color a bit; I'm hoping for some feedback on this.
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
This fixes the issue where scrollbars that take up space (eg. Chrome on
Linux) force the inline-block items to overflow their container and
fall down a line.
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.
This replaces the bootstrap default modal footers that have a
[data-dismiss] button with an .exit button in the top section of the
overlay that is styled congruently to the current subscriptions page.
This is technically part of the settings page redesign in the next
commit, but it's probably useful to keep separate, since it touches
totally different code.
This makes the subscriptions page responsive by having the settings tab
slide over when a user taps on a stream, giving almost the whole screen
to view the settings.
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.
This fixes a number of issues in the prototype /stats graphs, including:
* Adding a Total Users number to the Users graph.
* Changing the Messages sent over time graph so that the bot
trace is hidden by default.
* Fades out the last bars in the weekly view to represent unfinished
ata.
* Sets the default view to weekly only if the realm is > 12 weeks old.
* Gets rid of the tooltips and replaces them with hover text
for the Number of Users graph.
* Fixes a bug in the legend colors for the Messages Over Time
graph.
* It also adds the year to the hover text.
* Sets the pie chart colors and adds spaces between sectors.
* Changes the font to Humbug.
This adds a frontend for the analytics system we've had for a few
months, showing several graphs of the data in Zulip.
There's a ton more that we can do with this tooling, but this initial
version is enough to provide users with a pretty good experience.
Fixes#2052.
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 fixes CSS issues such as removing padding with negative margins
and then re-adding padding back later. It also ensures the width of the
picker is exactly six columns wide and does not shift around when zoom
is enabled in the browser.
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.
Contributor visualization showing the avatar, user name and number
of commits for each contributors. The JSON data would be updated
upon deployment, triggered by the `update-prod-static` script.
Due to the fact that getComputedValue is called when using filter and
opacity attributes, it is much more efficient to use an SVG that has a
changing fill color rather than something that may be interpreted by
browsers as a layout change that requires layout recalculation.
This should result in noticeably smoother and more responsive :hover
events for the streams with greyed checkmarks.
This adds styling such that when you hover over a stream in the streams
list and you are not subscribed, you will see a faint grey checkmark
that serves as a target of where to click so you can subscribe to a
stream.
This adds a deep link behind a “+” icon above the streams list on the
left-sidebar which opens the subscriptions page and then also toggles
the tabs to go to the unsubscribed stream list.
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 fixes the user’s name to not fall on the next line. Instead it
appears on the same line and overflows properly into an ellipsis so it
theoretically should never overflow on to the next line.
Emoji styling was broken in Firefox browser due to its lack of support
for the zoom property.
This replaces the zoom property with the transform property that now
scales the emojis down to 70% of their original size.
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.
This fixes two issues:
* If you had around 10 distinct emoji reactions on a message (enough
to force a line wrap if the add-your-emoji button was visible),
Zulip would add that button into a new row on hover, jolting the
message feed. This fixes that problem by leaving a blank last line
for the add-your-emoji button.
* We were incorrectly showing the padding for the emoji reactions
region even if there were no emoji reactions, causing messages to
have too much padding.
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.
Stream descriptions are now displayed along with the name. The
autocomplete results include streams with matches in the stream
descriptions. Added styling for description in compose.css.
Fixes#2398.
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.
This commit replaces the placeholder "clipboard" button with a reaction button.
This is done on any message that can't be edited. Also, on messages sent by
the user the actions popover (toggled by the down chevron icon) contains
an option to add a reaction.
When clicked, a popover with a search bar and a list of emojis is displayed.
If the right sidebar is collapsed (the viewport is small), the popover is placed
to the left of the button.
Focus is set to the search bar. Typing in the search bar filters emojis.
Emojis with which the user has reacted to this message are highlighted.
Clicking them sends an API request to remove that reaction.
Clicking on non-highlighted emojis sends an API request to add a reaction.
When the popover loses focus it is closed.
The frontend listens for reaction events. When an add-reaction event is
received, the emoji is displayed at the bottom of the message with a
count initialized to 1. If there was an existing reaction to the message with
the same emoji, the count is incremented.
Old messages fetched from the server contain reactions.
They are displayed (along with title and count) at the bottom
of each message.
When clicking the emoji reaction at the bottom of the message, if the
user has already reacted with that emoji to this message, the reaction
is removed and the count is decremented. Otherwise, a reaction is added
and the count is incremented.
Hovering over the emoji reaction at the bottom of the message displays
a list of users who have reacted with this emoji along with the
emoji name.
Hovering over the emoji reactions at the bottom of the message displays
a button to add a reaction.
Fixes#541.
Some of the work here was done Tomasz Kolek.
When we click on "more conversations" in "Private Messages,"
we call it being "zoomed in." Before this change, when
new PMs arrived, we would rebuild the list and zoom out
again. Now we track the zoomed_in state with a variable.
Also, if you are zoomed in and switch from one PM narrow
to another, we also keep you zoomed in.
This fix also removes some extraneous/redundant code.
Fixes: #2561
This was intercepting pointer events even though the lightbox was
closed. This fixes the issue with the streams exit not working in some
responsive cases.
Fixes: #2818.
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 styles inline images, the markdown page as a whole, and the
notification buttons to be CSS rather than images.
[Tweaked by tabbott to temporarily remove the Yantramanov font, since
we should be committing that to the repo so Zulip works correctly without
Internet access]
Previously, this would create a weird blue banner across the top of
the gear menu.
We can't remove it, since it’s required for the gear menu navigation.
Description edited by tabbott.
There is a case with browser zoom that the inline-block split view
breaks down and the two 50% tabs fall below each other. This prevents
that issue from happening.
On hover, the transparency of muted stream/topic groups should turn up
to 0.6 so that they are easily readable by people looking to find a
particular stream/topic, but not completely opaque as to be confused
with a non-muted item.
Fixes: #2487.
This is a major change to the /#subscriptions page, converting it to
by a side-by-side list of streams and their settings in an overlay.
There are no new features added/removed, but it's a huge changeset,
because it replaces the old navigation logic and moves the stream
creation modal to appear in the right side of this overlay.
Cynthia Lin
Tim Abbott
derAnfaenger
Brock Whittaker
Rishi Gupta
Cory Lynch
Rohitt Vashishtha
Jack Zhang
digi0ps
Harshit Bansal
Italo Batista
Raghav Jajodia
Yago González
hackerkid
Aditya Bansal
Abhijeet Kaur
Kamal Marhubi
Steve Howell
K.Kanakhin
Jeremy Philemon
Mahim Goyal
Arpith Siromoney
Kanak Garg
Rafid Aslam
Boris Yankov
Archana BS
Sourav Badami
Brock Whittaker
Sampriti Panda
Ayush Jain
Kartik Maji
aakash-cr7
paxapy
Tommy Ip
Durga Akhil M u1604vbox
brockwhittaker
khantaalaman
Amy Liu
Mahim Goyal
Umair Khan
Alicja Raszkowska
Sanskar Modi
JefftheBest1
peguin40
Brock Whittaker