Commit Graph

28 Commits

Author SHA1 Message Date
Karl Stolley 3c4d1510d5 reactions: Add 5px of bottom space to reactions area with reactions. 2024-04-25 12:45:41 -07:00
Karl Stolley c1c9db4955 reactions: Correctly size reaction-button content.
Matching the `line-height` on + with the height of the smiley icon
ensures proper vertical centering.
2024-04-25 12:45:41 -07:00
Karl Stolley 18b86ab29e reactions: Consolidate icon styles in reaction button. 2024-04-25 12:45:41 -07:00
Karl Stolley 9d45ecdef4 reactions: Remove unnecessary flex on reaction button. 2024-04-25 12:45:41 -07:00
Karl Stolley d939b9aae6 reactions: Reorganize and deduplicate reaction button CSS. 2024-04-25 12:45:41 -07:00
Karl Stolley b20beda905 emoji_picker: Express colors as CSS variables.
This also adds a previously missing dark-mode background color for
reacted emoji's :focus state in the picker.
2024-03-05 14:58:58 -08:00
Karl Stolley 11fcd4091c emoji_picker: Reorder CSS to match template structure. 2024-03-05 14:58:58 -08:00
Karl Stolley e22666f116 emoji_picker: Remove selectors not used with Tippy. 2024-03-05 14:58:58 -08:00
Karl Stolley 7930209929
reactions: Increase prominence of own reactions.
To address feedback that own emoji reactions were not sufficiently distinct, we increase
the prominence of one's own emoji reactions by:

- Setting a pixel-and-a-half border around own reactions.
- Reducing the alpha on the inner drop shadow of other reactions.
- Increasing the contrast on own reactions borders (and decreasing 
  them, in dark mode, on other reactions).
- Space around the emoji is maintained as in the current design in the own reactions. 

Other reactions benefit from an additional half pixel of padding, top and bottom, 
which is necessary to keep the pills (and the hover reaction button) the same 
height as each other--regardless of whether there's an own reaction among them 
or not. Padding is reduced in line with the increased border on own reactions.
2024-02-28 13:04:11 -08:00
Sayam Samal 222364733f emoji_picker: Restructure CSS related to the emoji picker.
This commit tries to improve the CSS related to the emoji picker by
restructuring relevant parts of `reactions.css` and `dark_theme.css`.

Via this commit, the redundant classes -- "reaction", "status-emoji",
"composition" are also removed from `emoji_popover_emoji.hbs`.

If needed, specific styling -- according to the type of emoji picker,
can now be applied using the `data-emoji-destination` attribute of the
`.emoji-picker-popover`.
2024-01-25 18:15:45 -08:00
Karl Stolley 4493ee346d reactions: Set more explicit reaction-text setting. 2023-11-15 14:02:45 -06:00
Karl Stolley 6fe49f93ad reactions: Redesign reaction button colors and style.
See CZO discussion:
https://chat.zulip.org/#narrow/stream/9-issues/topic/Reactions.20background.20color/near/1632171

Also:
https://github.com/zulip/zulip/pull/26580#issuecomment-1705734770

Co-Authored-By: Vlad Korobov <terpimost@gmail.com>
2023-11-15 14:02:45 -06:00
Karl Stolley 534683a3ff reactions: Express reaction button colors as CSS vars. 2023-11-15 14:02:45 -06:00
Karl Stolley 474dcf60a2 reactions: Unify stream and DM colors, express as CSS vars. 2023-11-15 14:02:45 -06:00
Anders Kaseorg 9b83dc1b79 stylelint: Fix declaration-block-no-redundant-longhand-properties.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-11-08 16:11:15 -08:00
Aman Agrawal ce656da8d7 emoji_popover: Remove popover-content div.
`popover-content` class had no effect on emoji popover since
it was resetting `padding: 0` and background color was
already applied by tippy theme.

In short, removing `popover-content` had no visual changes.
2023-10-09 11:39:12 -07:00
Daniil Fadeev 79e050b81b playground_links: Fix disappearing reference when popover is active. 2023-09-15 12:25:26 -07:00
Daniil Fadeev 96d070143a emoji: Rename `reaction_button_visible`.
This commit renames the `reaction_button_visible` class to
`active-emoji-picker-reference` to clearly document what it's for.
2023-09-07 14:44:18 -07:00
Daniil Fadeev 08279820fb emoji: Rename `emoji-info-popover` to `emoji-picker-popover`. 2023-09-07 14:44:18 -07:00
Daniil Fadeev 82ca794f94 emoji: Migrate popover from Bootstrap to Tippy.
Fixes part of #23632.
2023-09-07 14:44:18 -07:00
Daniil Fadeev 54c01ac46e emoji: Remove unnecessary style declaration.
The `.emoji-popover` element is a div and thus has display: block by
default.
2023-08-24 17:54:13 -07:00
Karl Stolley 13311ef91d reactions: Present alt-code emoji like other reaction emoji. 2023-08-21 11:38:39 -07:00
Karl Stolley 65466cec44 reactions: Let emoji and count act as simple flex items.
This commit uses a `gap` property on the containing reactions
flexbox to recreate space previously set by margins.
2023-08-21 11:38:39 -07:00
Karl Stolley 69413fe887 reactions: Mirror reaction_button styles with message_reaction. 2023-08-21 11:38:39 -07:00
Karl Stolley c0c62e477c reactions: Use a flex layout for reactions. 2023-08-21 11:38:39 -07:00
Anders Kaseorg d274583d8f styles: Use modern color notation.
postcss-preset-env transpiles this back as necessary.  (It does a
better job than we did, in fact: we had several four-argument hsl()
calls that should have been hsla().)

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-24 17:26:55 -07:00
Anders Kaseorg 5cdf38b1f7 styles: Use standard CSS nesting syntax.
CSS nesting is being standardized with the syntactic restriction that
the nested selector cannot start with an identifier.  This was
necessary to allow the syntax to be parsed without lookahead.

https://webkit.org/blog/13813/try-css-nesting-today-in-safari-technology-preview/
https://www.w3.org/TR/css-nesting-1/#syntax

The postcss-nesting plugin used by postcss-preset-env enforces this
restriction.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 11:26:30 -07:00
Anders Kaseorg c1675913a2 web: Move web app to ‘web’ directory.
Ever since we started bundling the app with webpack, there’s been less
and less overlap between our ‘static’ directory (files belonging to
the frontend app) and Django’s interpretation of the ‘static’
directory (files served directly to the web).

Split the app out to its own ‘web’ directory outside of ‘static’, and
remove all the custom collectstatic --ignore rules.  This makes it
much clearer what’s actually being served to the web, and what’s being
bundled by webpack.  It also shrinks the release tarball by 3%.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-02-23 16:04:17 -08:00