Commit Graph

17 Commits

Author SHA1 Message Date
evykassirer 553723e5d4 compose: Offer narrow to compose target button for private messages.
We already offer this for stream messages, but had been blocked on
adding it for private messages for visual design reasons. The dark
theme had a natural place to put this, since it had a box around the
private message recipient box; but the light theme didn't.

We add a border to the light theme private message recipient box to
allow us to add the same button to private messages, and implement
that button.

Fixes #21962.
2022-10-05 11:11:28 -07:00
Oliver Pham 2ed650f596 search_suggestion: Show profile pictures in autocomplete suggestions.
Because the typeahead.js list items are currently just text, a user's
full name and avatar should be displayed in `input_pill`. To use
`input_pill`, a separate Handlebars partial view was created to
provide a mandatory container (`<div class="pill-container">`) for
`input_pill` and a flex container (`<div class="search_list_item">`)
for vertically aligning the text.

The description of each suggestion (i.e `description_html`) is
rendered as raw HTML, so every special character (e.g. whitespace)
should be HTML-escaped. This enables highlighting the substring in
each search suggestion that matches the query.

Fixes: #20267
2022-08-16 14:17:42 -07:00
Tim Abbott 5e591f840b css: Fix night styling for deactivated pills.
The new styling isn't perfect, but it's also not obviously broken.

We also move the existing day theme styling to the appropriate files.
2021-07-22 15:29:00 -07:00
Tim Abbott 7291f2c1ca css: Avoid hardcoding font size in input pills.
This also fixes horizontal alignment issues when scaling.
2021-06-11 16:59:35 -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
Cynthia Lin 20f14508ff compose: Fix styling of PM recipient input pill.
Fixes #9128.
2018-04-19 10:03:37 -07:00
Cynthia Lin 02d122bed5 input-pill: Wrap input pills when they overflow pill container.
Fixes #9096.
2018-04-16 09:44:22 -07:00
Tarun Kumar f3501b7f60 user-groups: Update css for a user who is not in a user group.
Add required css in input_pill.css.
Add required css in settings.css.
2018-03-23 14:42:55 -07:00
Cynthia Lin fd486f7839 input-pill: Fix vertically-misaligned PM compose pills.
Fixes #8775.
2018-03-22 21:26:15 -07:00
Cynthia Lin b7f6dbf44f input-pill: Force words to break to prevent text overflow. 2018-03-22 21:26:15 -07:00
Tarun Kumar 9969762f01 input_pill: Change user group pills to be same as PM pills.
Fixes #8686.
2018-03-22 16:45:05 -07:00
YJDave a598befc9e pills: Show data-some-recipients placeholder text only on focus.
Show data-some-recipients placeholder text only when input
element to add recipients is focused.

Fixes #8622
2018-03-08 15:11:01 -08:00
YJDave c035acce6c pills: Show data-no-recipients text only if no recipients selected.
Currently, we shows data-no-recipients placeholder text even if
there are recipients selected. It's not visible cause it's value
is override by data-some-recipients helper text in case if there
are recipients selected.

Show data-no-recipients placeholder text only when `input` element
is first child of `pill-container`, which means there are no `pills`
selected by user yet.
2018-03-08 15:11:01 -08:00
Steve Howell 3a1bf04a56 compose: Add pills for typing in PM recipients.
@brockwhittaker wrote the original prototype for having
pills in the recipient box when users compose PMs (either
1:1 or huddle).  The prototype was test deloyed on our
main realm for several weeks.

This commit includes all the original CSS and HTML from
the prototype.

After some things changed with the codebase after the initial
test deployment, I made the following changes:

    * In prior commits I refactored out a module called
      `user_pill.js` that implemented some common functions
      against a more streamlined version of `input_pill.js`,
      and this commit largely integrates with that.

    * I made changes in a prior commit to handle Zephyr
      semantics (emails don't get validated) and tested
      this commit with zephyr.

    * I fixed a reload bug by extracting code out to
      `compose_pm_pill.js` and re-ordering some
      calls to `initialize`.

There are still two flaws related to un-pill-ified text in the
input:

    * We could be more aggressive about trying to pill-ify
      emails when you blur or tab away.

    * We only look at the pills when you send the message,
      instead of complaining about the un-pill-ified text.
      (Some folks may consider that a feature, but it's
      probably surprising to others.)
2018-03-07 15:53:11 -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 00d11fb0af input-pill: Add styling.
This adds some styling for the default case of the input pills and some
custom styling.
2017-11-10 14:14:03 -08:00