The home icon was too far to the right and did not have equal
padding within the <li> tab so this makes the padding an equal
10px on the left and right and none on the top and bottom.
Change the reaction popover to be based off the container elements
for the various message control icons. This will enable us to easily
control the visibility of the base element when the popover is opened
or closed. Also removes redundant `reactions_hover` class.
This makes the JavaScript tooltips more legible by increasing
the font size and decreasing the line-height, while also increasing
the opacity of the tooltip from 0.8 => 1.
Until we get search bubbles, the search text is kind of a
distracting detail for most users. This just makes the
height 2px smaller for now. This will also make more text
show up on mobile web.
That's what the font is actually called, and should help future Zulip
developers save time trying to figure out what's up and why our font
is unrelated to the "Humbug" font on the Internet.
This refactor will facilitate making it possible to set CSS properties
on this controls span; in particular, we're hoping to disable user
selection of the whitespace in this region.
The main side effect of this refactor is that we need to add JS code
to also hide the icon-vector-pencil element, since it's now in a new
span.
The bot API key when selected in the "Your bots" panel would have
some whitespace due to the fact that the HTML markup would make
some space between the span and button.
Fixes: #6189.
There is a "user-select: none" (cross-browser) that was put on
the #bottom_whitespace div, but the div doesn't actually have any
content that can be selected, and it also makes it difficult to
deselect selected text because when clicked over it will save the
current selection.
Rationale: For the more off-to-the-side edit history view, changes
are easier to digest by highlighting deleted content in red followed
immediately by added and changed content in green.
TODO: Toggle for showing the edited messages without highlighting;
deleted content would not be shown in this view.
Force display of the top-most recipient_bar's recipient_row_date
when the floating_recipient_bar is just about to overlap and
becomes hidden while user is scrolling.
Fixes#4844.
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.