Commit Graph

33 Commits

Author SHA1 Message Date
Abhijeet Prasad Bodas ed8faf1374 recent topics: Rename some HTML classes for readability. 2021-05-12 09:30:24 -07:00
Tim Abbott f83bea76a2 compose: Revert placeholder styling for bottom reply button.
* Revert "frontend: Remove hover effect from small messagebox."
  This reverts commit 27d9643274.
* Revert "frontend: Use placeholder style for small messagebox text."
  This reverts commit 8453aac260.
* Revert "frontend: Make "Reply" button look more like a textbox."
  This reverts commit 9fdd7184c6.
2021-05-10 12:54:30 -07:00
Wesley Aptekar-Cassels 27d9643274 frontend: Remove hover effect from small messagebox.
Textboxes shouldn't have hover effects.
2021-05-08 08:26:16 -07:00
Wesley Aptekar-Cassels 8453aac260 frontend: Use placeholder style for small messagebox text.
This makes the small messagebox (previously referred to as the "Reply"
button) look more like a textbox.
2021-05-08 08:26:16 -07:00
Wesley Aptekar-Cassels 8bc0c14e81 css: Explicitly set placeholder text style.
Previously, we relied on the browser placeholder text style, but this
makes it impossible to style text to look like a placeholder.

Chrome uses `color` to set the placeholder, while Firefox uses
`opacity`. This commit sets both, since setting one without the other
will lead to strange behaviour.

We pick the color for the light and day themes to ensure that we meet
WCAG standards for accessibility.
2021-05-08 08:26:16 -07:00
Tim Abbott 318dd8b408 css: Remove grey styling for day theme compose buttons.
This day theme styling was added in
74dbcdf2a8, and some users interpreted
this buttons styling as suggesting that these buttons were disabled.
2021-05-05 11:51:56 -07:00
Ken Clary 74dbcdf2a8 frontend: Change 'reply' button label to reflect selected message.
The 'reply' button shows the stream>topic or recipient(s) of the
selected message, for better UX.  It also expands to fill the
remaining horizontal space in the button bar -- this should help make
it easier for new users to figure out how to reply.

Finally, it uses "Message" instead of "Reply", to better match the
compose box.

Fixes #17940.
2021-05-03 14:58:02 -07:00
pilgrim2308 a74b52db22 UI: Add Zulip version in gear menu.
Currently only enabled in development, since the exact details don't
seem right..

Co-Author-By: Signior-X <b19188@students.iitmandi.ac.in>
Co-Author-By: Aman Agrawal <amanagr@zulip.com>

Implements UI for #8005.
2021-04-30 17:58:08 -07:00
Nikhil Maske 0023f7f9a0 settings css: Make HTML table headers sticky.
Introduce a new class "table-sticky-headers" in the settings
and organisation settings HTML table tags and it is used
to make the table headers fix at the top. This commit also
add the background-color and hover properties to the
settings and organisation settings table to make them look
similar to the recent_topics_table.
2021-04-30 08:19:47 -07:00
Aman Agrawal 818b4ee7f9 giphy: Don't change logo color in night mode.
Since giphy logo is no longer an svg, we don't need to change its
color.
2021-04-29 16:06:51 -07:00
Aman Agrawal 33641d7e05 giphy: Change icon of GIF picker.
We use an icon which is more clear for what it stands for.

Increase allowed size of message-control-buttons slightly so
that they are clearly visible. This is more important for
GIF icon to be visible properly than any other icon here.
2021-04-28 07:07:36 -07:00
Aman Agrawal 97496088c9 recent_topics: Use `unread_counts` class for showing unread count. 2021-04-14 10:57:16 -07:00
Aman Agrawal ab87325fea pm_list_item: Use `unread_counts` class for showing unread count. 2021-04-14 10:57:16 -07:00
Aman Agrawal 019afcd40d topic_list_item: Use `unread_counts` class for showing unread count. 2021-04-14 10:57:16 -07:00
Tim Abbott 0dac331c17 css: Adjust scope for main overlay CSS and click handlers.
KaTeX makes use of a "span.overlay" element for the little vector
arrow symbol on top of a `\vec` object. This conflicts with Zulip's
CSS for our overlays, which are divs with the `overlay` CSS class.

While KaTeX may rename their class
(https://github.com/KaTeX/KaTeX/issues/1456), we can work around this
issue by scoping our own overlay CSS and click handlers to
"div.overlay" rather than ".overlay".

Fixes #18068.
2021-04-14 08:27:18 -07:00
TylerPham2000 4dacbfdc82
panels: Adjust opacity value for the exit widget.
This makes this icon less invisible.

Once the user hovers over the "x" it will become brighter to notify the user.
2021-04-09 14:49:50 -07:00
Aman Agrawal f7f5308986 recent_topics: Don't change background color on thead hover.
We expect to give recent topics a cleaner look by doing so.

Fixes #17934
2021-04-03 07:41:01 -07:00
Aman Agrawal ad011272fe recent_topics: Remove top and bottom borders.
Don't show recent topics in a separate box.
2021-02-25 17:31:32 -08:00
Aman Agrawal 1eafb1d8b3 recent_topics: Move from overlay to a narrow-like view.
Recent Topics is no longer an overlay now, but note that it is
also not a typical messages narrow. It can reside between
an overlay and a Filter in the sense that it is dispalyed as
a typical Filter narrow but has properties of an Overlay.

Compose box is not visible in this view as it will be confusing
to many users and hence compose shortcuts have also been disabled.

Keyboard shortcuts that apply on messages have also been disabled.

The remaining shortcuts that apply to a narrow are still accessible
here.
2021-02-25 17:31:32 -08:00
Aman Agrawal 9ed3e47796 recent_topics: Show read topics in a darker shade. 2021-02-25 17:31:32 -08:00
Tim Abbott 28ac9f941d css: Fix night theme keyboard UI with popovers.
When interacting with popovers in the night theme using the keyboard
UI (e.g. the `i` menu for a message), the background color was
incorrectly white, resulting from the bootstrap `nav > li > a:focus`
rule.  We had already fixed this for `nav > li > a:hover`; we just
need to add `nav > li > a:focus` to the relevant block of CSS rules as
well.

Replaces #17195 and #17353.

Rewritten to use a cleaner solution by tabbott.
2021-02-24 12:21:54 -08:00
Anders Kaseorg b98434682e styles: Convert [readonly] selector to :read-only pseudo-class.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-10-30 11:46:57 -07:00
Anders Kaseorg 192f1eb0fc styles: Convert [disabled] selectors to :disabled pseudo-class.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-10-30 11:46:57 -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
Shubham Dhama 330d75efb7 settings: Make bot-settings tabs look better in dark mode.
Fixes: #9230.
2018-04-26 09:01:11 -07:00
Cynthia Lin d963fd8180 night-mode: Change coloring for compose close button. 2018-04-19 23:04:15 -07:00
Cynthia Lin 71e6b93277 night-mode: Add borders to input pill containers. 2018-04-19 10:03:37 -07:00
Cynthia Lin ad6fbbed62 night mode: Remove white borders in collapsible sidebars. 2018-04-17 11:18:09 -07:00
Gooca 3ed5a64e13 Dark-mode: Update rail-y to match dark theme. 2018-04-07 20:03:19 -07:00
Marco Burstein 7def65d7a3 style: Give inputs with `type="number"` a dark background in night mode.
Fix #8905.
2018-04-01 15:14:42 -07:00
Marco Burstein 382f93189f night mode: Fix unreadable new user tips.
Fix the border color, shadow color, arrow color, and background color
of the tips popovers for new users in dark mode.

Fix #8868.
2018-03-29 10:28:12 -07:00
Tim Abbott 013a8886b2 styles: Rename dark.css to night_mode.css. 2018-03-28 10:42:28 -07:00