Commit Graph

254 Commits

Author SHA1 Message Date
Ryan Rehman aa82008503 search pills: Fix pills misalignment bugs visible in firefox.
The `.search_icon` lies inside the `.pill_container` so we had to
remove it's display attribute which should have no visual changes.

We add `flex-wrap: nowrap` to prevent the cursor from moving onto
a new line, below the pills.

Fixes #15480.
2020-06-20 14:50:56 -07:00
YashRE42 c3d322f1a7 navbar: Improve spacing between stream name and sub_count. 2020-06-16 17:26:55 -07:00
YashRE42 63f69c48a5 navbar: Fix clickable area between sub_count and narrow_description.
Previously, there was a small dead spot in the click area between the
sub_count and narrow_description, such that the mouse cursor would
switch from pointer to the default.

This commit corrects the dead spot by adjusting the margins and styles
on navbar elements.

This should be workable, but there is scope for improvement especially
given that the current margins and paddings are messy and not very
semantic.

The end result is that the entire navbar becomes a smooth, clickable
region.
2020-06-16 17:26:55 -07:00
YashRE42 71e393575b navbar: Improve click area around stream name.
Previously the click area to open the settings modal was limited to
just the stream name (just the text). This, inconveniently, created a
lot of empty, unclickable space around the stream name.

This commit resolves the problem by:
  * Extracting the title and icon into a separate template as
    `navbar_title_and_icon.hbs` and calls this partial in
    `tab_bar.hbs`.
  * Calling the partial within an <a> tag for stream based narrows
    and in a <span> tag for non-stream narrows.
  * Making some CSS changes so that everything still renders correctly
    (visually).

This commit also:
  * Leads us to "piggy back" all stream based narrow elements on the
    `stream_settings_link` conditional. (Previously the only "piggy
    backing" was by `narrow_description` on `sub_count`, which was
    necessary for the rendering of the `(no description)` string.)

The end goal here is that the entire navbar is clickable. This is a
step towards that goal, but some of the margins on the sub count and
its ::before and ::after pseudo-elements still need to be fixed.
2020-06-16 17:26:55 -07:00
YashRE42 846383f4a0 navbar: Set user count region as click target to open settings modal.
Previously the click area to open the settings modal was limited to
just the stream name (just the text).

A nice goal to strive for here is to make the entire navbar a
continuous clickable region.

This adds the same click action as `stream_name` to the `sub_count`.

There's still scope for improvement after this change because of the
margins on `sub_count::before` and `sub_count::after` as well as
because only the text in `stream_name` is clickable.
2020-06-16 17:26:55 -07:00
YashRE42 94746977ad refactor: Extract pseudoclass based tags out of span in tab_bar.
Currently the styles for the navbar are in a confusing and ugly state.

One of the problems is that we have several styles within the `span`
including some nested pseudotag selectors within the `span`.
This is bad because it gives semantic meaning to the `span` element
which we do not intend. We should remove as many styles which intend
to target "direct children" instead of "direct children that are
spans" and (iff there are styles for the later) then substitute the
"span" for a semantically meaningful class name.

Another problem here is that these pseudotag based selectors aren't
very clear and readable, which is something we can look into
correcting now that they are separate from the `span` tag.

This is a prep commit that aims to set us on the path for further
improvements. It also enables us to switch some tags around and allows
us to use the styles in the `span` block with other selectors via `,`.
This should make no visual or behavioral changes.
2020-06-16 17:26:55 -07:00
Aman Agrawal 33ace41ffe recent_topics: Add filter button to show muted topics.
We don't show muted streams/topics by defualt. Only when user
turns on muted filter.
2020-06-09 22:08:31 -07:00
Aman Agrawal bdaf4e1079 recent_topics: Add action to mark topic as read. 2020-06-09 22:08:31 -07:00
YashRE42 43bf6a0b1a search box: Align the search exit button for pills and legacy.
This commit aligns the search icon in the navbar (with the search bar
closed) to be in the same position as the "search_exit" or "x" icon
(which appears when the search bar is open).
2020-06-09 14:49:38 -07:00
YashRE42 716a39fcb5 search_box: Fix search bar background on nightmode.
Commit c4e59309e4 introduced a
regression that caused a small part of the navbar in night mode to not
have the correct background color.

The relevant changes in that commit intended to fix the margin for the
search box for when the search pills feature was set to active.

This commit slightly increases the padding for the search box (when
pills are active), to improve pill alignment, and adds styles for
"#searchbox_legacy" to correct the background when search pills are
disabled.

This also reverts the change from commit
29b8e11e20 which tried to improve the
alignment of pills by adding a margin left but didn't address the
background color issue.
2020-06-09 14:49:38 -07:00
Sharif Naas 78691b13ad css: Extract message_edit_history.scss.
Note that the .rendered_markdown selector is incorrect, and will be
fixed in a following commit.
2020-06-07 13:57:28 -07:00
Aman Agrawal a096f34cab move_topic_to_stream: Add option to disable breadcrumb messages.
Option to disable breadcrumb messages were given in both message edit
form and topic edit stream popover.

User now has the option to select which stream to send the notification
of stream edit of a topic via checkboxes in the UI.
2020-06-05 12:28:51 -07:00
Wyatt Hoodes 5fe489c5ae dropdown-menu: Remove caret-down icon and fix alignment.
The alignment on narrow windows is also off.  We fix
this spacing issue while we're at it.
2020-06-05 10:56:33 -07:00
Aman Agrawal c276bcd6af stream_header_colorblock: Combine compose and msg_edit css blocks.
Remove unused properties and fix border in message edit colorblock.
2020-06-05 09:39:00 -07:00
majordwarf 29b8e11e20 navbar: Fix search input margin.
The commit fixes the spacing between the search icon and the input
field by adding `margin-left` to the search input field. The following
issue is only visible in dark mode as the nav and search input have
different background color while normal theme uses same background color
for nav and search input.
2020-06-04 14:28:00 -07:00
Steve Howell ccde1907d9 css: Remove obsolete logo markup.
This section was made obsolete by
4c4733bcec
2020-05-27 17:57:50 -07:00
Steve Howell add641d0c9 css: Use vars for header-size related values.
The header is 40px tall, with a 10px gutter
below it, which means the top of our sidebars
are 50px from the top of the viewport.

Now all the places that share these values
use `$header_right` and related values.

This is pretty easy to test out by just doubling
or tripling the two numbers at the top of the
file.

The section for `@media (max-width: 500px)` seems
to have its own smaller values for things like
the `height` of `.header`, so I left it alone.
2020-05-27 17:57:50 -07:00
Ryan Rehman c4e59309e4 navbar: Refactor `#searchbox`.
Along with various style fixes for the search pills
enabled case, this de-duplicates the css.
2020-05-26 22:04:36 -07:00
Ryan Rehman 4cdd7aed2b css: Narrow the gap between searchbox and searchbox_legacy.
This is a prep commit which combines the previous `#searchbox`
block with the newly updated `#searchbox_legacy` block which
contains the modifications related to the new navbar display.

This only consists of changes to `#searchbox` and is still broken.
But it integrates the searchbox with the new tab_bar changes so that
only one searchbox is shown (instead of two, previously).
2020-05-26 22:04:36 -07:00
Ryan Rehman 77a26d41ae message view: Show indicator while fetching new messages.
We already have a loading indicator for fetching older
messages. Thus it makes sense to implement the same
for displaying newer messages.

We set the display of `bottom-messages-logo` to none,
to prevent displaying two loading indicators during
the initial message load.

Fixes #15060.
2020-05-26 15:21:42 -07:00
Ryan Rehman 9c733b42df minor: Rename loading_more_messages_indicator.
`loading_more_messages_indicator` is renamed to
`loading_older_messages_indicator`.

This is a prep commit to introduce
`loading_newer_messages_indicator`.
2020-05-26 15:21:42 -07:00
YashRE42 7f1cafd108 navbar: Remove redundant .emoji styles from scss.
This commit fixes the alignment of emoji in the navbar by removing a
redundant style which was breaking the emoji alignment.

This block is probably just a remanent from WIP development of this
version of the navbar & its inclusion on master was as an oversight.
2020-05-26 12:49:06 -04:00
Tim Abbott deeed5c4c8 css: Move some styles out of zulip.scss.
settings_section belongs next to the rest of itself, and the loading
indicator is clearly a common reused component.
2020-05-20 11:42:59 -07:00
Tim Abbott 0340ec8a0a css: Remove duplicate #user_settings_avatar styling. 2020-05-20 11:41:55 -07:00
Tim Abbott 3d435e12c3 css: Remove useless stream-label margin.
This margin was already 0px.
2020-05-20 11:24:04 -07:00
Tim Abbott 7aefe5f1ff css: Extract styling for .zulip-icon.bot. 2020-05-20 11:22:06 -07:00
majordwarf 59e3c14211 css: Merge `.message_controls` css ruleset in zulip.scss. 2020-05-20 11:17:19 -07:00
majordwarf ce07d8514a css: Use SCSS nesting in zulip.scss for `.column-left.expanded`. 2020-05-20 11:17:19 -07:00
majordwarf e327c6f521 css: Merge `.top-navbar-border` css ruleset in zulip.scss. 2020-05-20 11:17:19 -07:00
majordwarf 01840d0017 css: Use SCSS nesting in zulip.scss for `.column-left`. 2020-05-20 11:17:19 -07:00
majordwarf 109a0f55fe css: Use SCSS nesting in zulip.scss for `.nav .dropdown-menu`. 2020-05-20 11:17:19 -07:00
majordwarf c6cc843fbb css: Use SCSS nesting in zulip.scss for `.column-right`. 2020-05-20 11:17:19 -07:00
majordwarf c97d03345d css: Use SCSS nesting in zulip.scss `.user_popover_email`. 2020-05-20 11:17:19 -07:00
majordwarf 25084f3da2 css: Reorder zulip.scss to put `.user_popover_email` alongside. 2020-05-20 11:17:19 -07:00
majordwarf 995331fd8d css: Use SCSS nesting in zulip.scss for `#message_edit_form`. 2020-05-20 11:17:19 -07:00
majordwarf b70b1685a3 css: Use SCSS nesting in zulip.scss for `.date_row`. 2020-05-20 11:17:19 -07:00
majordwarf a3ba1c7067 css: Use SCSS nesting in zulip.scss for `#invite-user`. 2020-05-20 11:17:19 -07:00
majordwarf aec3e95279 css: Reorder zulip.scss to put `#invite-user` alongside. 2020-05-20 11:17:19 -07:00
majordwarf 6f140bc8f8 css: Use SCSS nesting in zulip.scss for `.modal`. 2020-05-20 11:17:19 -07:00
majordwarf b4920ac318 css: Reorder zulip.scss to put `.modal` alongside. 2020-05-20 11:17:19 -07:00
majordwarf 2a1fde0b3b css: Use SCSS nesting in zulip.scss for `#stream-checkboxes`. 2020-05-20 11:17:07 -07:00
majordwarf 2cf287b9ad css: Use SCSS nesting in zulip.scss for `#user-checkboxes`. 2020-05-20 11:17:07 -07:00
majordwarf 3f3576660d css: Use SCSS nesting in zulip.scss for `.settings-section`. 2020-05-20 11:17:07 -07:00
majordwarf 77a727a13d css: Use SCSS nesting in zulip.scss for `nav`. 2020-05-20 11:17:07 -07:00
majordwarf cb7dbb5cde css: Reorder zulip.scss to put `nav` alongside. 2020-05-20 11:17:07 -07:00
majordwarf 1d74660067 css: Use SCSS nesting in zulip.scss for `.typeahead`. 2020-05-20 11:17:07 -07:00
majordwarf 841749c90b css: Reorder zulip.scss to put `.typeahead` alongside. 2020-05-20 11:17:07 -07:00
majordwarf b94f5eded6 css: Use SCSS nesting in zulip.scss for `.nav`. 2020-05-20 11:17:07 -07:00
majordwarf 63a7117517 css: Reorder zulip.scss to put `.nav` alongside. 2020-05-20 11:17:07 -07:00
majordwarf 4eb62960ef css: Use SCSS nesting in zulip.scss for `#navbar-buttons`. 2020-05-20 11:17:07 -07:00