Commit Graph

86 Commits

Author SHA1 Message Date
YashRE42 30065b4ee8 navbar: Increase the click area of to initiate search.
This commit:
- Switches margin for padding on the search closed icon, to ensure we
  cover the region to the right of icon as clickable area.
- Applies the click handler that initiates the search to the second
  last element of the navbar:
  - This will most commonly be the narrow_description element, but may
    also be the entire navbar eg in the case of "ALL" or "starred".
    Applying this change to user names in "group-pm-with: ..." based
    narrows is a little questionable, but there are no other triggers
    on these names so this change makes sense for now.
  - The narrow_description may also contain links, which need to be
    handled correctly so that the behave like links should. We work
    around the onClick on the narrow_description, by applying a
    handler to <a> tags and invoking stopPropagation.
- We also add CSS to change the cursor to a pointer to make the
  search icon change color on hover over the clickable area to
  indicate that the search box can be opened with a single click.
- However, since <a> tags are handled differently, we add a hover
  listener which makes sure it behaves appropriately. We also increase
  the vertical padding of the <a> tags so they cover the entire
  vertical navbar region.
2020-04-23 15:37:51 -07:00
vaibhavrajsingh2001 2c0c936e40 stream settings: Correct alignment of filter streams div.
The div containing options for filtering streams was placed in the
centre. Aligned it towards the right. Had to pass a special check
variable in subs.js:540 to add the specific class for this purpose.
This was a specific scenario where this sort of CSS was to be added,
hence had to make a specific case.

Also, fixed the bottom border color of the search streams bar for night
mode.
2020-04-21 16:59:41 -07:00
Siddharth Varshney 2d11d58c9a ui: Fix deleted msg color in Message edit history modal.
New colors are introduced in msg edit history modal for better readability
These color will have better constrat with their background colors

Fixes #13622
2020-04-20 15:42:24 -07:00
YashRE42 87ba6cb4c9 tab_bar: Fix colors stream_count and description in nightmode.
This fixes a bug which caused by removing an <li> based structure on
the navbar. We forgot to update these styles.
2020-04-17 14:49:39 -07:00
YashRE42 eb4a2b9d4e navbar: Improve structure & styling for top navbar.
This updates the logged-in top navbar to display the stream/message
name, number of users, and description. It also replaces the search
bar with a search icon that expands into a full-width search bar.

Co-authored-by: Max Nussenbaum <max@maxnuss.com>

Fixes: #164.
Fixes: #5198.
2020-04-17 13:35:44 -07:00
vaibhavrajsingh2001 f0c5b1a8d7 design: Use CSS instead of disabled property for non-editable text.
The disabled property actually prevented text selection, so it seems
better to use CSS through the `readonly="readonly"` property.
For this, swapped .prop() with .attr() since .prop() was setting it as
`readonly=""`.
2020-04-17 08:36:21 -07:00
Katerina Perikou 3a07febc20
night mode: Fix how "x" is displayed on "You have nothing to send!".
Enhance visibility of "x" to dismiss the dialog box of "You have nothing
to send!" message.

To achieve this:
Added class 'compose-send-status-close' with new color attribute in
file night_mode.scss.

Fixes: #14459

Co-authored-by: @MariaGkoulta <43913366+MariaGkoulta@users.noreply.github.com>
2020-04-06 16:21:05 -07:00
Stefan Weil d2fa058cc1
text: Fix some typos (most of them found and fixed by codespell).
Signed-off-by: Stefan Weil <sw@weilnetz.de>
2020-03-27 17:25:56 -07:00
Abhishek-Balaji 0ec1710fec css: Reorder elements in `.rendered-markdown` in night_mode.scss.
Some styling elements associated with '.rendered-markdown' were
present separately. Reordering them so that they are together.
2020-03-25 15:10:34 -07:00
Abhishek-Balaji da818e16ed css: SCSS nesting for `.top-messages-logo` in night_mode.scss. 2020-03-25 15:10:34 -07:00
Abhishek-Balaji f2e6c5b317 css: SCSS nesting for `.hotspot.overlay` in night_mode.scss.. 2020-03-25 15:10:34 -07:00
Abhishek-Balaji b5dd58415e css: SCSS nesting in night_mode.scss for `.alert`. 2020-03-25 15:10:34 -07:00
Abhishek-Balaji 694035171d css: SCSS nesting for `.alert-box` in night_mode.scss. 2020-03-25 15:10:34 -07:00
Abhishek-Balaji e7b7a644ea css: SCSS nesting for `.rendered_markdown` in night_mode.scss. 2020-03-25 15:10:34 -07:00
YashRE42 254cc96420 navbar: Extract navbar border into outer div.
This is a prep commit for the new navbar, since the new navbar switches
between a search bar and stream descriptions, it's easier to have the
border defined in an outer div. Due to the way the changesets is
generated, this may seem like a large diff, however, the only change to
navbar.html is to add an opening div with the ".top-navbar-border" class
and a corrseponding closing div to wrap around "#search_box" and
"#search_box_legacy". Apart from this, a few styles have been edited in
zulip.scss and night_mode.scss.
2020-03-20 14:53:43 -07:00
Divyanshu Agrawal 8b2b693231 settings page: Apply dark theme to 'code' elements in night mode.
The example regexes for linkifier settings are not themed according
to the user's dark theme setting.

Modify 'night_mode.scss' to render all 'code' elements with dark
theme.
2020-03-06 11:59:28 -08:00
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