Commit Graph

52 Commits

Author SHA1 Message Date
Aman Agrawal 26011c98fd css: Use grid layout for messages.
Using grid layout moves us away from fixed widths
and position for items where possible, which will
make it easier to make messagebox changes without
breaking formatting.

Visual changes expected in this commit:
- When the action buttons overlap the message content,
it will no longer visually overlap but completely cut off
the content — which is good, but means the messages can’t
be as wide on narrow width views. There’s a slight improvement
to this in an upcoming commit.

Also removes the `last_message` CSS, which was busted due to the
`last_message` calculation not correctly being updated for new
messages arriving, and didn't improve styling.
2023-01-10 17:03:37 -08:00
Raghav Luthra a8fc195402 reactions: Change color of reaction counter from blue to black.
The blue font color on the vote_text beside the reactions in
light mode made it seem like a link which it's not, so it has
been changed to regular font color.

We preserve the blue font color on hover, matching the add-reaction
button.
2022-10-27 12:41:51 -07:00
Raghav Luthra 477a1b5789 reactions: Refactor CSS to prepare for longer vote_text.
This fixes a bug where in narrow windows, long vote_text could extend
beyond the body of the reaction's allocated area.

It also provides a matching right margin around the count/name inside
the reaction pill, which looks better when we have strings inside them.
2022-10-27 12:41:51 -07:00
Eyuel Berga Woldemichael 1e4e0a8155 message feed UI: Remove redundant color declaration.
The color for the message control buttons is set in the
`message_control_button` class. The `reaction_button_visible` class
also sets a color declaration with the same value.

This commit removes this declaration because it doesn't change the
color of the reaction icon(the class is currently only used in
conjunction with `message_control_button` to toggle the button
visibility) nor does it override any inherited  style (hover color
remains the same regardless) as it lacks an `!important` rule.
2022-10-24 10:29:23 -07:00
Tim Abbott 36b208ad51 reactions: Increase font size for reactions.
This seems to have no negative effect, and substantially improves the
visuals in situations where we're displaying a user's name.

While we're at it, switch to a relative font size.
2022-02-14 12:01:09 -08:00
Anders Kaseorg 52ad928d3e styles: Fix shorthand-property-no-redundant-values.
Generated by stylelint --fix.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-11-05 17:34:13 -07:00
Tim Abbott f89af5b2b4 css: Add block comment for reaction button logic. 2021-04-16 12:20:54 -07:00
Aman Agrawal c3211b652f reaction_button: Hide if it is the first child.
Since all the message reactions are inserted before the
add reaction button, if it is the first child, we can safely
remove it.

We changed this from `only-child` to be `first-child` because
we append tooltips as siblings of `reaction_button` but since
they are appended, they are always appended after the `reaction_button`.
Thus, if there were tooltips present the reaction_button won't hide.
2021-04-16 12:17:54 -07:00
Gittenburg 6e95809cc4 emoji_picker: Fix search input length.
This was probably a regression from our upgrade to bootstrap 2.3.2.
2020-09-23 11:33:27 -07:00
Anders Kaseorg a3d26d701e styles: Rename .scss files back to .css.
css-loader@4 broke @import statements referencing files with
extensions other than .css, unless those @import statements are
compiled away by another loader.  Upstream is more interested in
arguing that such @import statements are semantically incorrect than
applying the one line fix.

https://github.com/webpack-contrib/css-loader/issues/1164

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-09-15 16:33:28 -07:00
Armaan Ahluwalia 5f7b47e20c css: Transition 'app.css' to SCSS.
This commit transitions all styles in app.css in the Django pipeline
to being compiled by webpack in an app-styles bundle, and renames the
various files to now be processed as SCSS.

To implement this transition, we move the old CSS file refernces in
settings.py and replace them with a bundle declared in
`webpack.assets.json` and includedn in the index.html template

Tweaked by tabbott to keep the list of files in `app.css` in
`webpack.assets.json`, and to preserve the ordering from the old
`settings.py`.
2018-05-02 17:13:16 -07:00
Harshit Bansal e0ffab8e05 emoji picker: Fix categories overflow in Firefox at 90% zoom.
Explanatory comments added by tabbott.

Fixes: #7511.
2018-01-24 16:20:10 -08:00
Vishwesh Jainkuniya b1e16d55ac dark-mode: Fix text color of emoji_alt_code. 2018-01-24 15:48:26 -08:00
Brock Whittaker ad9c71b4b1 dark-mode: Change emoji reaction overlay to be dark mode compatible.
This changes it to be compatible with the dark-mode which involves one
change to light mode of changing a grey to a translucent white in
reactions.css.
2017-11-29 16:44:42 -08:00
Tim Abbott 1152246993 Revert "reactions: Change from grey to translucent."
This reverts commit 30f45ac061.

This commit caused problems with the compose box emoji picker
overflowing its bounds in Firefox at 90% zoom.
2017-11-23 14:55:00 -08:00
Brock Whittaker 30f45ac061 reactions: Change from grey to translucent.
This keeps the look the same on a white background but works better on
color backgrounds, as it shares a similar saturation.
2017-11-17 10:30:23 -08:00
Brock Whittaker d13e556923 reactions: Remove unecessary color declaration. 2017-11-17 10:30:23 -08:00
Steve Howell 99ecb51c5f minor: Add whitespace after commas in CSS. 2017-11-13 12:43:43 -08:00
Steve Howell f35b7b4c77 css: Convert colors to hsl() format.
This changes most of the app-related CSS files, but leaves
things like landing pages and bootstrap alone.
2017-11-13 12:43:43 -08:00
Brock Whittaker 7b8f2f8828 emoji-popover: Change :focus state from outline to darken.
This changes the :focus state of reactions that have been reacted
by yourself to darken on :focus rather than have the default
browser outline.
2017-10-11 12:31:49 -07:00
Cynthia Lin 884d4dad6e emoji_picker: Change emoji background color when selected by hotkey.
[Tweaked by HarshitOnGithub to remove the `:hover` and `:active`
selector.]
2017-10-05 09:02:49 -07:00
Cynthia Lin 18c0257fc4 emoji_picker: Change background color upon hover for unreacted emojis. 2017-10-03 11:06:17 -07:00
Harshit Bansal 2873b886fb emoji_picker: Add emoji showcase.
Emoji showcase refers to the space at the bottom of the emoji
picker we use for showing name as well as aliases of the currently
focused emoji.

Fixes: #6110.
2017-09-29 21:09:00 +00:00
Harshit Bansal 4973d992d1 emoji_picker: Move the category tabs to just below the emoji filter.
Also removes the now unused `get_rendered_emoji_categories()` function.
2017-09-29 20:22:09 +00:00
Harshit Bansal 5620d88b7d typeahead: Fix the vertical positioning of emojis. 2017-09-29 11:17:06 -07:00
Harshit Bansal dae51b821d message_controls: Don't auto-hide message control if a popover is open.
If a reactions picker is open then don't auto-hide the element over
which it is based off. Earlier we were inconsistently auto-hiding
some elements while keeping others visible.
2017-09-16 08:17:41 -07:00
Harshit Bansal 912d4ebd66 reactions.css: Remove the hack used for correctly positioning the emojis. 2017-08-28 14:49:40 -07:00
Harshit Bansal 923fb7be16 emoji: Fix mis-alignment of realm emoji div with other div in emoji picker.
Tweaked by tabbott to fix the CSS to not break the emoji typeahead.

Fixes: #5229.
2017-08-27 17:21:08 -07:00
Brock Whittaker 1a9c1241af Disable ability to highlight message reactions.
This adds the `user-select: none` property to `.message_reactions`
to disable accidental highlighting or selecting of the text.
2017-08-22 11:11:40 -07:00
Harshit Bansal 99d3668523 emoji_picker: Change emoji picker to be category based. 2017-08-14 12:52:35 -07:00
Cory Lynch c33dc4a5a5 reactions.css: Replace RGB colors with HSL colors. 2017-06-21 07:02:57 -04:00
Tejas Kasetty 1415efea55 emoji-picker: Order emoji filter list after each search.
* change emoji-container to 'flex' display inorder to support ordering
  of the contents (emojis).
* order emojis after each filter. The ordering is based on search string
  and is similar to the ordering in emoji typeahead.

Fixes #4806.
2017-06-07 21:54:07 -07:00
Brock Whittaker a88ca9fafc emoji-reactions: Fix reactions to not break inline-block display.
This fixes the reactions to not break a new line by changing them from
a weird combination of “float: left” and “display: block” (inlined), to
just “display: inline-block”.

With fixes from Harshit Bansal for an issue with using the hotkeys in
a filtered popover.

Fixes: #4818.
2017-05-17 12:49:40 -07:00
Rishi Gupta 0ce04556bf CSS: Change color of PMs from yellow to blue-grey. 2017-05-11 16:18:39 -07:00
Tim Abbott 35a5ca411a emoji: Fix scaling of realm emoji in reactions.
Fixes #4762.
2017-05-11 14:40:05 -07:00
Brock Whittaker ed4866b9f9 message-feed: Improve scroll perf by removing scaling on emojis.
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.
2017-05-03 14:49:47 -07:00
Cory Lynch 5d6724345a Fix scrollbar stylining for reactions picker.
Scrollbar previously collapsed when searching for
emoji and became misaligned. Fixed in CSS.
2017-05-02 14:23:26 -07:00
Jack Zhang df817f12f4 emoji: Rename reaction-popover to emoji-popover.
The name emoji-popover should now be more appropiate, as there's no more
need to distinguish between reacting to messages and composing messages.
2017-04-30 15:15:33 -07:00
Tim Abbott b3c8562bd9 css: Remove use of under-specified 'thin' borders.
This was causing buggy behavior in our emoji reactions when zoomed to
200%.
2017-04-20 15:07:26 -07:00
Tim Abbott 540bfce83f reactions: Use perfectScrollbar for emoji reactions scrollbar.
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).
2017-04-18 22:58:11 -07:00
Sourav Badami 4616ee7762 Enable display of emoji as their alt codes in reactions.
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.
2017-03-03 15:19:34 -08:00
Tim Abbott e051336ff6 emoji: Tweak emoji reactions CSS to add hover effects.
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.
2017-02-21 23:12:15 -08:00
hackerkid 10324ba592 Change reaction button color when user reacts.
This makes it easy to see whether you were one of the people who
reacted to a give message.
2017-02-21 23:09:46 -08:00
Sourav Badami eaaec4c908 reactions: Fix emoji picker scrollbar overflow issue.
Fixes #3644.
2017-02-19 21:11:39 -08:00
Brock Whittaker e44723f79d Fix broken emoji popover styling.
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.
2017-01-27 16:12:38 -08:00
Tim Abbott 914d9a3412 reactions: Fix bottom margin to look good on selected message. 2017-01-10 12:32:30 -08:00
Tommy Ip bb0225acec emoji reactions: Prevent scroll bar from appearing.
Fixes #3188.
2017-01-10 12:32:30 -08:00
Brock Whittaker 1d414a432f Re-order reactions CSS for better understanding.
This reorders the structure of the styling for the emoji reactions
to better follow the order of the markup.
2017-01-07 10:18:32 -08:00
Brock Whittaker e41b0b80ef Emoji CSS refactoring for FF support.
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.
2017-01-07 10:18:32 -08:00
Brock Whittaker c961172ab1 css: Fix emoji reactions jolt and padding issues.
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.
2017-01-06 16:38:12 -08:00