Commit Graph

70 Commits

Author SHA1 Message Date
Tim Abbott d7ba77b83b search: Simplify CSS for search_icon.
This is preparatory refactoring for replacing the top navbar UI; in
the new version, the search_icon may not be an <a> tag.
2020-01-25 23:55:48 -08:00
Rohitt Vashishtha 39420d6adb night_mode: Render the message instead of showing raw `/night` text. 2020-01-25 22:56:45 -08:00
Thomas Ip c93522d847 blueslip: Make stack trace more readable.
The stack trace popup is now sourcemapped and each stackframe have a
expandable code context window.

[anders@zulipchat.com: Rebased and simplified.]
2019-10-31 13:47:54 -07:00
Vinit Singh 01b19291e7 search: Advertise the ability to search shared history.
When a user performs a search that might contain historical public
streams messages that the user has access to (but doesn't because
we're searching the user's own personal history), we add a notice
above the first search result to let the user know that not all
messages may have been searched.

Fixes #12036.
2019-10-09 15:12:52 -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 d20204826d css: Nest .drafts-header inside .drafts-container. 2019-08-15 22:39:39 -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 38ffde37e5 css: Move edit history highlighting CSS into rendered_markdown. 2019-07-31 12:08:17 -07:00
Tim Abbott 5b732437c1 css: Scope mentions and alert words in rendered_markdown. 2019-07-31 12:08:17 -07:00
Vaibhav 4c70a23d43 css: Nest `#stream_creation_form` inside `#stream-creation`. 2019-07-25 14:44:58 -07:00
Cynthia Lin 8c55e27d1e night mode: Fix loss of border color on default style buttons. 2019-07-22 17:28:38 -07:00
Cynthia Lin bbdf00e6e5 night mode: Improve coloring of .new-style buttons.
Border and text color applied by specific classes such as sea-green
were nullified by the previous selector; this commit restores the coloring
for these buttons.
2019-07-19 13:27:37 -07:00
Vaibhav ba2d609e6a css: Nest `.subscriptions-header` inside `.subscriptions-container`. 2019-07-18 11:41:18 -07:00
Alexandra Ciobica 117e1e05ea css: Clean up styling of topic edit buttons.
Related to: #11233.
2019-07-17 22:20:52 +03:00
Vaibhav 81a7467441 css: Nest `.subscriber-list` inside `.subscriber_list_container`. 2019-07-11 12:23:42 -07:00
Puneeth Chaganti d92af69a03 url preview: Fix CSS to make url preview titles clickable.
06f3cb2b78 added some styling to make the
embed previews prettier, and in particular added a bottom fading gradient to
make the embed description text fade out slowly, when it is out of bounds.
The fading used an ::after pseudo-element which had 100% height of the
`.data-container` which contained the title and the description of the
preview. This pseudo-element got overlaid on the title and made it
un-clickable.

This commit retains the visual appearance of the fade, while reducing the
height of the ::after pseudo element, so that it never gets overlaid on the
title, keeping it clickable always.
2019-07-03 14:38:19 -07:00
YashRE42 450e675b11 night-mode: Fix invite_user_form overlap bug.
Adding the element for the invite link would cause the modal footer to
shift upwards, in nightmode this caused the stream list to appear
beneath the footer as the footer background was transparent. This commit
replaces that styling with a solid equivalent color.
2019-06-24 13:00:49 -07:00
Aman Agrawal 904422d8bc css: Convert colors from rgba to hsla format. 2019-06-20 11:34:59 -07:00
Aman Agrawal 3e589cf65e css: Convert colors from rgb to hsl format.
Note that we are not converting the stream colors.
2019-06-20 11:34:34 -07:00
Alexandra Ciobica 161d196759 css: Add nightmode variant for fetching more messages loading indicator
Fixes: #12522.
2019-06-07 10:45:29 -07:00
Vaibhav a52c157dd3 css: Add similar nesting to night-mode emoji elements as in reactions.scss.
Due to additional nesting added in reactions.scss, night-mode styles
were prioritized lower than the original rules defined.

Fixes regressions introduced by changes in PR #12473
2019-06-05 12:36:53 -07:00
vinitS101 ed3e9be142 org_settings: Add collapse/show settings button for users and guests.
For non-admins some organisation settings tabs are 'collapsed' by default.
A button at the bottom of these settings can be used to toggle
show/collapse for these settings tabs.

Resolves #12313.
2019-05-31 22:42:02 -07:00
Anders Kaseorg eec608d6a3 css: Improve SimpleBar scrollbar contrast.
Show black scrollbars with a thin light border in day mode, or white
scrollbars with a thin dark border in night mode (both at 50%
opacity).  This matches the native scrollbars on macOS pretty closely.

Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
2019-05-23 17:26:19 -07:00
Anders Kaseorg 141088586b Completely replace perfect-scrollbar with SimpleBar.
perfect-scrollbar replaces both the appearance and the behavior of the
scrollbar, and its emulated behavior will never feel native on most
platforms.  SimpleBar customizes the appearance while preserving the
native behavior.

Signed-off-by: Anders Kaseorg <andersk@mit.edu>
2019-05-17 12:06:51 -07:00
Vaibhav d93f5b2977 single_msg_handlebars: Cleanup moving css rules in stylesheets.
Cleanup single message template moving CSS rules for box shadow
of a private message stream inside stylesheets. For any messagebox
inside of a `.private-message` element, the box shadow is set using
the class. In cases of normal streams, the box shadow is set using
inline style since we cannot have different classes for each color.

Changes made in drafts.scss are to keep the current style of not
having the left border. Setting style using classes, this rule had
to be overridden.
2019-05-06 21:28:46 -07:00
Wyatt Hoodes 820dd3a946 settings: Fix broken headers in night mode.
This bug turned out to pop up wherever a table existed in both
'settings' and 'organization settings', notably *excluding* both
'Custom Emoji' and 'Authentication Methods'.

The first thought to the solution was to simply add `thead` to the css
rule that applies the appropiate color for headers and the like.  This
was successful, however it brought attention to a sub-problem:

`emoji-settings-admin` and `auth-mehtod-settings-admin` were both
creating table headers in the body of the table. This was causing the
rows in these two tables to be colored inversely from all the others.
This is also the reason why these tables are the only ones correctly
styled. These handlebars were updated with the headers moved out of the
body.

The even and odd rows of the tables were then colored appropriately.

Fixes: #12209
2019-04-27 15:03:57 -07:00
Yash Rathore bcfc22d94e navbar: Fix bugs caused by zulip.scss refactor.
A few bugs were caused by 7d4cebbc1e.
In night mode:
- home icon was hidden by grey box on "All messages" narrow.
- inactive tabs (eg "mentions" and "stars") were hidden behind grey box.
- topic tab was hidden behind grey box in topic narrow.

In both night mode and normal mode:
- "private messages" tab in individual/group pm narrows was illegible.

These were all results of unexpected differences in precedence rules
caused by the refactor.
2019-04-17 12:10:01 -07:00
Vaibhav 5c36918c17 markdown: Add .rendered_markdown for all elements with rendered MD content.
This adds a class `rendered_markdown` for all the elements which have
rendered markdown content; This is done to add different styles for
rendered content in day mode and night mode.

Also replace the element selectors from CSS to use the class.
2019-04-05 17:13:20 -07:00
Vaibhav 46b2d9d328 markdown_docs: Fix styling for in-app docs for inline code.
This adds a selector `#message-formatting` which is basically the
modal id to apply night mode style to inline code in the modal.
2019-03-21 16:51:40 -07:00
Steve Howell ee9612c927 css: Hover individual topic rows.
Hovering the entire block was confusing.
2019-03-14 13:54:35 -07:00
Steve Howell c2858f1c64 css: Fix hover for "Private messages".
It's ugly to hover the entire block--just hover the individual
rows.
2019-03-14 13:52:50 -07:00
Boris Yankov 3df4990781 cleanup: Remove unnecessary 'magic' style for night mode.
This was introduced in e0236646

For 1.5 years we did not find a case that needed it (besides the
`a` tag hover state, that is not obvious if it was needed or it was
used as an example)

It is not obvious if this solution was a good idea. The concern was
that `body.night-mode` is more specific than `body` and some styles
might override others less specific in cases we might not want that.

Of course, we want that in the majority of cases, and css-specificity
rules are not simple to comprehend.

Good further reading:
http://cssspecificity.com/
https://specificity.keegan.st/

The added complexity of the resulting styles and the added code that
might not serve any practical purpose seem to not be worth it.
2019-03-08 15:27:32 -08:00
ruchit2801 9f7e90f68b left sidebar: Add an "unstar all messages" option.
In this commit, I've added a feature to unstar all the starred
messages.  This is useful, e.g., for folks who are using starred
messages to keep track of things they should come back when next at
their desktop.

The event flow is the standard one for a feature with a confirmation modal:

(1) User clicks on unstar all messages.

(2) We display a confirmation modal; if the user confirms, we send a
request to the backend to clear all starred messages.

(3) The events system sends that UI update back to us, removing the
stars from the UI.

Fixes #11401.
2019-03-07 20:52:00 -08:00
Steve Howell 194619c667 css: Clean up left sidebar chevrons.
This is a fairly big commit, but at the end
it simplifies a lot of things.

It's difficult to fix highly coupled code in
incremental steps because, well, it's highly
coupled code.

The main thing this does is give each type of
chevron in the left sidebar its own class

    * all-messages-arrow (NEW)
    * stream-sidebar-arrow
    * topic-sidebar-arrow

Before this change, the "All messages" chevron
was using stream-sidebar-arrow, which was a
strange name for something that's not actually
in the stream sidebar. Obviously this was
cargo culted.

There was not much JS to change here--we just
fix the click handler for "All messsages".

And then there's a one-line change to the template,
and the rest is re-organizing the CSS.
2019-03-04 15:35:40 -08:00
Steve Howell 0a848e412f buddy list: Use user-list-arrow class.
Using a more specific class avoids confusion related
to the .arrow class, which is not only a popover concept,
but also a Zulip concept in the left sidebar.
2019-03-04 15:35:40 -08: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
Vaibhav 69c16ab90d messagebox: Change alert message background to dark in night mode.
When copying a message by clicking on "copy and close" button in
message edit box an alert appears that says "Copied!"; Background
of the message is set corresponding with the day mode but not the
night mode. This changes the background of the alert message to
the dark color in night mode.
2019-02-22 13:12:00 -08:00
synicalsyntax 4cc49a693b night mode: Improve coloring of emoji picker. 2019-02-18 19:49:24 -08:00
synicalsyntax 0d32225bdd night mode: Improve coloring of message reactions. 2019-02-18 15:57:51 -08:00
Anders Kaseorg 89897bcf70 css: Move inline date separators from messagebox to message_row.
Fixes border-related glitches introduced by commit
51c6c82003 (#10820).  Alternative
to #11534.

Signed-off-by: Anders Kaseorg <andersk@mit.edu>
2019-02-13 16:03:21 -08:00
Tim Abbott cbc2f495ff css: Fix night mode styling for mentions.
This was missed in developing
51c6c82003.
2019-02-11 16:11:47 -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
Rohitt Vashishtha f993fdd480 markdown: Add _@**Name** syntax for silent mentions.
These mentions look like regular mentions except they do not
trigger any notification for the person mentioned. These are
primarily to be used when you make a bot take an action and
the bot mentions you, or when you quote a message that mentions
you.

Fixes #11221.
2019-01-16 16:01:06 -08:00
Vaibhav ac4aa16962 markdown preview: Fix `code` style for preview in night mode.
When in night mode, `code` style was still the same as in the light mode;
The fix is for the same.

Fixes #11269.
2019-01-13 23:14:19 -08:00
Steve Howell 0c48dad1da muting: Use more generic markup for undo-mute popup.
This makes everything generic except for the main
message given to the user.
2019-01-04 10:40:05 -08:00
AsociTon 7a80456832 reactions: Make styling for night mode reactions more distinctive.
Fixes #10840.
2018-12-29 10:40:32 -08:00
Cynthia Lin c9b75a8a65 night mode: Alter compose warning background to fit night mode.
Fixes #10916.
2018-12-13 13:29:14 -08:00
Vishnu Ks e5b3d39ce9 messages: Show banner when message history is limited.
This communicates to users clearly about the situation when the
history_limited flag is set by the backend (because message history
was cutoff).
2018-12-13 09:02:11 -08:00
Cynthia Lin 89d81b37d4 styles: Convert background properties to background-color. 2018-10-16 13:14:19 -07:00