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.
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.
Tim Abbott
Steve Howell
Cynthia Lin
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
K.Kanakhin
Jeremy Philemon
Mahim Goyal
Arpith Siromoney
Kanak Garg
Rafid Aslam
Boris Yankov
Archana BS
Sourav Badami
Brock Whittaker