In 9648e64d23, we added a clear outline
around focused link elements in popovers.
This was a good fix for popovers, but it's distracting for the
experience of clicking links in the sidebars and message feed.
For a:focus Bootstrap sets the following rules:
outline: thin dotted #333;
outline: 5px auto -webkit-focus-ring-color;
Firefox does not know -webkit-focus-ring-color and falls back to the
previous rule, making the outline invisible in darkmode.
Chromium has a bug[1] that makes outline: auto invisible when focussing
elements programmatically (which we do for the up & down arrow keys).
[1]: https://bugs.chromium.org/p/chromium/issues/detail?id=1105822Fixes#15768.
Previously, we were experiencing a bug that caused the left border of
the searchbox/tab_bar to disappear when the searchbox was opened. This
bug was a result of the following changes:
- 4cdd7aed2b accidentally added this line
as right: 2; instead of right: 2px;
- 46c966576d fixed this line to be
right: 2px; but caused the regression.
This commit fixes the bug by deleting this line.
Previously user have to click pixel perfect on the message controls
icons to achieve the click action.
This commit will uniformly increases the click target
area for the icons.
Tweaked by tabbott to avoid some weird glitches.
Throughout the codebase we use <i> tag for icons.
This commit will add <i> tag inside the starred message
div and fa classes are now used with this <i> tag.
The starred message div is now consistent with other
message_controls divs.
Tweaked by tabbott to use the name star_container for better
readability.
Prior to commit eb4a2b9d4e the center
area of the navbar was based on a structure that appended crumbs or
"tabs" as <li>s, forming a tab_bar and a tab_list.
However, in eb4a2b9d4e we apply a new
style and structure to the navbar which lets go of the convention of
tabs. Hence, we'd like to purge the tab_bar and tab_list labels from
our code base.
It would have been nicer if we could simply purge tab_bar from the
codebase and rename "#tab_list" so that we have an anchor and wrapper
structure in the html, but dropping the float: left on tab_bar causes
some confusing problems such as causing the horizontal border to
disappear and the search_box to shift out of its intended position and
so its simpler to get rid of tab_list from our code base first.
This commit:
- Removes the #tab_list wrapper div from tab_bar.hbs.
- Removes any #tab_list selectors from night_mode.scss so that they
simply target based on "#tab_bar" instead of "#tab_bar #tab_list".
- Removes tab_list selectors from zulip.scss, so that #tab_list
attributes now apply to the #tab_bar, in the process we drop the
duplicated width property and reorder the attributes.
- Replaces all mention of #tab_list with #tab_bar in JS files.
Prior to commit eb4a2b9d4e the center
area of the navbar was based on a structure that appended crumbs or
"tabs" as <li>s, forming a tab_bar and a tab_list.
However, in eb4a2b9d4e we apply a new
style and structure to the navbar which lets go of the convention of
tabs. Hence, we'd like to purge the tab_bar and tab_list labels from
our code base. This commit pushes us towards that goal by simplifying
the future merge of the two CSS labels.
Prior to commit eb4a2b9d4e the center
area of the navbar was based on a structure that appended crumbs or
"tabs" as <li>s, forming a tab_bar and a tab_list.
However, in eb4a2b9d4e we apply a new
style and structure to the navbar which lets go of the convention of
tabs. Hence, we'd like to purge the tab_bar and tab_list labels from
our code base. This commit pushes us towards that goal by simplifying
the future merge of the two CSS labels.
The letter-spacing attribute was set to its default value and so we
remove it and rely on the default.
Prior to commit eb4a2b9d4e the center
area of the navbar was based on a structure that appended crumbs or
"tabs" as <li>s, forming a tab_bar and a tab_list.
However, in eb4a2b9d4e we apply a new
style and structure to the navbar which lets go of the convention of
tabs. Hence, we'd like to purge the tab_bar and tab_list labels from
our code base. This commit pushes us towards that goal by simplifying
the future merge of the two CSS labels.
Currently the #tab_bar is just a container for the #tab_list and the
#tab_list handles the overflow attributes and so these do not serve
any purpose.
Prior to commit eb4a2b9d4e the center
area of the navbar was based on a structure that appended crumbs or
"tabs" as <li>s, forming a tab_bar and a tab_list.
However, in eb4a2b9d4e we apply a new
style and structure to the navbar which lets go of the convention of
tabs. Hence, we'd like to purge the tab_bar and tab_list labels from
our code base. This commit pushes us towards that goal by simplifying
the future merge of the two CSS labels.
We have the same selector within #tab_list and the duplication is
unnecessary.
Ideally we would not be relying on something that requires a 4 line
comment, and also makes it harder to add more static elements at the
end of the navbar, but this block should be acceptable for now.
One alternate would be a "grow-1" class or similar but we might need
to think that through.
My previous message_header fix
0b4568d249
accidentally changed the alignment of dates in private messages (so that
it was inconsistent to the alignment in other narrows).
Previously .recipient_row_date was positioned absolutely, allowing it to
overlap with the topic name on narrow screens. This can be solved by
using flexbox. To implement the empty space between the bar controls and
the date on wider screens we move the date outside of the bar controls
(which also makes more sense semantically since the date isn't a
control).
Fixes#15501.
Fixes the click target for the gear icon by providing
a proper rectangular area around it.
Minor UI adjustments of gear icon and expanded
navbar-search for small size devices.
Fixes: #15222.
Previously, the message controls had a bug where they would trigger on
mobile with a single tap over the area they occupy when visible. This
is wrong because a user would expect to first see the controls and
only trigger them once they are visible (with a second tap).
The above bug is caused by the fact that we were using "opacity: 0" on
".message_controls > div" to hide the controls and "opacity: 1" on
".messagebox &:hover .message_controls > div" to show the controls on
hover, however, this would not effect the click action because
"opacity". So we used "pointer-events: none;" and "pointer-events:
all;" with the hopes that it would prevented the above bug, but in
practice, it didn't.
(the most probable explanation being that tapping the message_control
area would cause the "&:hover" rule to trigger and change the
"pointer-event" to "all" before it could prevent the click trigger,
But that explanation is just conjecture.)
This commit replaces both "pointer-events" attributes with
"visibility: hidden" and "visibility: visible" respectively. The
result being that the message_controls behave identically to before,
except without the above bug.
The addition to the ".has_actions_popover .info" selector is important
because without it, we would regress on issue #3172.
Trivia:
An alternate approach to using "opacity" is to set the
"display" attribute to "none", however, using "display" prevents the
transition from animating (which is probably why we were using opacity
here in the first place). "visibility" does not prevent the transition
from animating.
History: The "pointer-events" attribute was introduced in
4d5aa3ddc9 and it replaced prior code
which relied on the "visibility" attribute... But it seems PR #3792
was mostly focused on improving the positioning through removal of
`display: none`, but introduced opacity to make the animations work
rather than visibility as the replacement solution, which requires the
pointer-events hack and resulted in the bug described here.
Fixes the second bug described in #13642.
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.
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.
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.
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.
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.
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).
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.
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.
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.
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.
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).
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.
`loading_more_messages_indicator` is renamed to
`loading_older_messages_indicator`.
This is a prep commit to introduce
`loading_newer_messages_indicator`.
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.
Gittenburg
Tim Abbott
YashRE42
SiddharthVarshney
Aman Agrawal
Ryan Rehman
Sharif Naas
Wyatt Hoodes
majordwarf
Steve Howell