Commit Graph

50 Commits

Author SHA1 Message Date
Anders Kaseorg 30ab261f91 styles: Undo calc(x + y) → calc(x - -y) workaround.
The bug this was working around does not affect our current toolchain,
as confirmed by grepping through the minified output.

(Also, this linter rule only matched calc(x + y) with two arguments
and we were already using calc($far_left_gutter_size + $left_col_size
+ 4px).)

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-05-27 16:29:25 -07:00
Bhanu Gupta 0f6a5ce9fb compose: Fix visual glitch in compose box decoration.
Fixes #14996.
2020-05-27 14:15:47 -07:00
Siddharth Varshney 9cc64156e4 compose: Fix color of preview icon.
Fixes the color of preview iocn to match other message-control-button icons.
2020-04-13 14:58:10 -07:00
Anders Kaseorg 27fac76da8 styles: Move media queries into the files they override.
Webpack code splitting will make the inclusion order of CSS files less
obvious, and we need to guarantee that these rules follow the rules
they override.

Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
2019-10-28 15:39:17 -07:00
Rohitt Vashishtha 1df5cdc41a typeahead: Align the tip text centered vertically. 2019-09-17 13:09:03 -07:00
Rohitt Vashishtha 3e3deb2f17 typeahead: Move tip text to bottom. 2019-09-17 13:09:03 -07:00
Anders Kaseorg abbd8a7f45 styles: Remove most vendor-prefixed CSS attributes.
Many of them are now automatically generated by autoprefixer, while
others are unnecessary based on .browserslistrc, and some were just
wrong (the linear-gradient based checkerboard pattern in lightbox has
been broken in Firefox for a while).

Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
2019-08-30 14:51:52 -07:00
Vaibhav 8f13b6eed1 css: Use SCSS nesting for `#stream_message_recipient_stream`. 2019-08-25 15:09:31 -07:00
Vaibhav 9566f4cf6a css: Reorder so `#stream_message_recipient_stream` is in same place. 2019-08-25 15:09:31 -07:00
Vaibhav edb61eb35e css: Use SCSS nesting for textarea and .compose_table .recipient_box. 2019-08-25 15:09:31 -07:00
Vaibhav c15c2d3b97 css: Use SCSS nesting for `.dropdown-menu`. 2019-08-25 15:09:31 -07:00
Vaibhav 9652e8affb css: Use SCSS nesting for `.message-control-button`. 2019-08-25 15:09:31 -07:00
Vaibhav 71efd80dac css: Reorder compose.scss so `.drafts-link` is with `.compose_table`. 2019-08-25 15:09:31 -07:00
Vaibhav 72e13478cb css: Nest `#compose-send-button:focus` inside `#send_controls`. 2019-08-25 15:09:31 -07:00
Vaibhav ffa6e72086 css: Use SCSS nesting for `#send_controls`. 2019-08-25 15:09:31 -07:00
Vaibhav 417284f38a css: Remove unnecessary `table.compose_table` rule.
Since `.compose_table` is a div and not a table.
2019-08-25 15:09:31 -07:00
Vaibhav 52d97e2ca7 css: Use SCSS nesting for `#send_message_form`. 2019-08-25 15:09:31 -07:00
Vaibhav ca4cdb2b29 css: Remove redundant border-radius rule.
It's over-written just below.
2019-08-25 15:09:31 -07:00
Vaibhav a19c74bd5e css: Remove redundant rules for `.message_header*`.
Since these rules are overwritten we can remove them. For
message_header_colorblock we can remove `!important` from
box-shadow since it was present due to the removed rules.
2019-08-25 15:09:31 -07:00
Vaibhav 1e350cbd09 css: Nest `.message_header_colorblock` inside `.compose_table`. 2019-08-25 15:09:31 -07:00
Vaibhav d18492c1c7 css: Use SCSS nesting for `.compose_table`. 2019-08-25 15:09:31 -07:00
Vaibhav 9dd5641d90 css: Use SCSS nesting for #compose-buttons media queries. 2019-08-25 15:08:47 -07:00
Vaibhav 8f6ad6bd11 css: Nest `.drafts-link` inside `.new_message_button`. 2019-08-25 15:08:47 -07:00
Vaibhav 870ca49f0d css: Nest `.alert-draft` inside `.new_message_button`. 2019-08-25 15:08:47 -07:00
Vaibhav 0b4f82df79 css: Nest `.button.small` inside `.new_message_button`. 2019-08-25 15:08:47 -07:00
Vaibhav ac94e3c7b5 css: Use SCSS nesting for `#compose_buttons`. 2019-08-25 15:08:47 -07:00
Vaibhav 877d198363 css: Nest `new_message_button` inside `#compose_buttons`. 2019-08-25 15:08:47 -07:00
Vaibhav 60fe12bcfe css: Reorder compose.scss so #compose-controls are in same place. 2019-08-25 15:08:47 -07:00
Rohitt Vashishtha 6c34d99ad0 typeahead: Add header text to show info about current completion.
We can provide a function that returns an HTML string: `this.header()` to
display a header text above the typeahead. This can be used to provide
contextual information such as hinting about the silent mentions syntax
or the topic mentions syntax.

At the end of this commit, the HTML structure is:

$container <div>
  $header <p>
    info-icon
    header-text
  $menu <ul>
    list-items
2019-07-31 15:33:27 -07:00
Rohitt Vashishtha b071270788 typeahead: Add a container div for the typeahead list.
This change allows us to add custom changes to the HTML generated
by the typeahead without interfering with the core functions that
are provided by the library.

At the end of this commit, the HTML structure is:

$container <div>
  $menu <ul>
    list-items
2019-07-31 15:33:27 -07:00
Tim Abbott a28af1fd64 css: Remove unnecessary prefixed transitions.
The transition keyword has been standard for a while now; see the
previous commit for details.
2019-05-20 12:15:16 -07:00
Tim Abbott abae98a901 css: Add detailed comment explaining our 1400px max-width.
The reference to this being overriding in scroll_bar.js and how it
causes flashes is valuable.
2019-05-09 14:07:27 -07:00
Wyatt Hoodes 0986216e2c compose.scss: Fix alignment of "markdown preview" icons.
Removed the preview tag from the css rule, reduced the undo preview tag
to a font-size of 15px.

The preview tag being attached to the rule proved unnecessary. The icon
for reverting back to an editing state also dipped below the horizontal
level of the icon row.
2019-04-14 16:37:36 -07:00
Tim Abbott ddb965110f CSS: Remove manual antialiasing configuration.
The antialiasing decisions we made for the webapp should be constant
over the entire page, not limited to particular subsections or themes.

If we wanted antialiasing, we should do it on the entire page, not
individual random widgets.  But it's not clear we actually want to do
it on the entire page.  The `-moz-osx-font-smoothing: grayscale`
setting now happens by default in OSX Mojave (40% world market share
right now and growing), so there's no reason to override it.  And
without retina displays, generally, subpixel rendering provides better
results than antialiasing (which overrides subpixel rendering).

Thanks to Anders Kaseorg for advice on this issue.
2019-03-04 15:12:48 -08:00
alex 254da4ad81 send_button: Remove unnecessary self-cancelling margin. 2019-02-19 12:14:17 -08:00
Vaibhav 5e4bd9f57d compose: Change preview_message_area and preview_content to classes.
Preview box is to be reused in message edit. ID does not remain the
same in message-edit section so the styles are changed to classes.
2019-02-05 11:28:13 -08:00
Vishnu Ks 8f3a0927c3 lint: Ban color names in CSS.
We already lint using HSL rather than RGB consistently.
2019-01-22 15:33:18 -08:00
Tim Abbott c70face2dc css: Make message editing controls look like compose controls. 2019-01-15 12:05:02 -08:00
Archit Kaushik 43fd8e658d notifications: Fix styling for long compose alerts.
This adjusts the spacing so that the out-of-view notifications for
group PMs (which have particularly long text) don't end up with the
"x" to close the notification overlapping the text.

Fixes #11058.
2018-12-29 11:15:39 -08:00
Steve Howell d7c2577ffb subject -> topic: Rename compose fields.
The stream/topic edit areas now have these ids:

        #stream_message_recipient_stream
        #stream_message_recipient_topic

They are pretty verbose, but being able to grep
for these without noise does have some value.
2018-12-09 21:28:45 -08:00
Tim Abbott 8673b4f4a6 compose: Use a more reasonable plus sign for opening send menu.
This icon styling definitely still doesn't look great, but it's an
improvement over what we had before.
2018-10-31 16:59:16 -07:00
Marco Burstein 502e9fe8a6 compose: Open the mobile compose popover when the `+` button is pressed.
The `+` button will only be displayed on mobile devices.
2018-10-31 16:47:48 -07:00
Marco Burstein 9249d08a96 compose: Create the mobile compose `+` button.
Use CSS to display a `+` button on mobile but keep the more verbose
buttons on desktop. In the future, this button will be used to display
a popop for a new message.
2018-10-31 16:47:48 -07:00
Cynthia Lin cbb6b3a1af styles: Normalize differences in previous hex-to-HSL conversion. 2018-10-16 13:14:19 -07:00
Cynthia Lin 89d81b37d4 styles: Convert background properties to background-color. 2018-10-16 13:14:19 -07:00
Cynthia Lin 67b705207e styles: Convert 3-digit hex values to HSL values. 2018-10-16 13:14:19 -07:00
Shubham Padia 3f019cafb2 compose: Improve error handling when subscribing other users to a stream.
Instead of displaying a fixed error message inside the yellow bar itself,
now the yellow bar disappears on error and a red compose_error is shown.
The error message is the one returned from the server.
2018-08-13 10:18:35 -07:00
Cynthia Lin 66df4e3e84 input-pill: Refactor pills to eliminate fixed positioning of elements. 2018-07-23 10:21:13 -07:00
Aditya Bansal fb839c1d5b compose.html: Upgrade to use font-awesome 4.7 icon prefixes.
We also adjust some CSS so that icons after this upgrade look exactly
or nearly the same as they did before the upgrade.
2018-07-11 20:31:17 +05:30
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