This new div allows us to split out two concerns:
semantic list of items - remains in #user_presences
widget real estate - controlled by new #buddy_list_wrapper
We will use this for progressive rendering. We want to add
padding to the buddy list without messing with the integrity
of the actual HTML '<ul>' list. (One ugly alternative would
have been to add a dummy list item, which be a pitfall for
any code traversing the list.)
Basically, all the code relating to click handlers and similar
things was left alone. We only change js/css related to
scrolling, resizing, and overflow.
Changed search pill padding, `.navbar-search` flex-wrap to match with
the CSS refactoring in 66df4e3e84.
The `height: 100%` changes to `.navbar-search` and `.input-append`
make up for the issue in which the pills overflowed in the mobile
view due to `.navbar-search` height being declared 40px explicitly
while the actual heiight in mobile view was shorter.
Fixes#10059.
In 66df4e3e84,
`display: inline-flex` was added to `.pill-container` but
`flex-wrap: wrap` was missing which forced overflow pills to be on
one line and made the pill text overflow vertically. This was not
observed in composebox pills as `.pm_recipient .pill-container`
already had a `flex-wrap: wrap` rule which has been removed in this
commit to avoid duplication.
This is a fixup for e1291cf839.
While copying the the rules of `#searchbox` to `#searchbox_legacy`
in the search pills feature, the existing `#searchbox` rules were
missed in the conversion.
`#searchbox_legacy` has been added beside `#searchbox` in `media.scss`
instead of replacing that as both of them need those rules for the
mobile view.
Shrinking the widths enables all five core team profiles to be aligned
on the same line, instead of having four on the first line and one
profile on its own line.
Fix#10008.
Adds box-shadow to `#searchbox` when either `#search_query` or any
of the pills have focus. Uses jquery instead of pure css as the
`:focus` event occurs on `#search_query`, while we want to add
box-shadow to `#searchbox`. This could have been done with
`:focus-within` CSS selector, but it is not supported in IE or Opera.
`#search_query` already had an onfocus/focusout listener, adding
listeners to `#searchbox.pills` for those events wouldn't have worked
as you don't want the focusout event to fire when the focus shifts
from input to pill.
Also adds `focusin`, `focusout` and `css()` to zjquery. `css` is
same as `val`, except it returns an empty object in case of no value
instead of an empty string. I don't think `css()` is valid syntax
in actual jquery.
tab_bar.js becomes redundant after implementation of search pills.
This commit adds a comment to tab_bar.initiliaze, so the event
listeners related to it do not get initiated. This does not remove
any code related to tab_bar.js.
Also adds left and right border around the search icon.
Following points have been implemented in this commit:
1.) Add search pill on selecting typeahead.
2.) Re-narrow after removing a search pill.
3.) Add quiet optional parameter to removeLastPill.
4.) Pre populate search pills in narrow.activate.
5.) Clear existing search pills on narrow.deactivate.
Description of above points:
1.) I tried out using the description from suggestions.lookup_table
to append a pill using appendValidatedData so that the description
had not to be calculated again. But the description in the suggestions
lookup contains html due to highlighting. This html is escaped when
inputed in a pill. An attempt was also made to remove the higlighting
by replacing the tags. But other espaced characters like < also
popped up, so it was better to use append_search_string.
3.) If one wants to refresh the pill using pill.clear and wants to
repopulate them, evaluating the event_handler associated with the
action of removing the pill may not be desired.
4.) Pill population code is added to narrow.activate. Pills are not
populated if the narrow was triggered by search as search handles the
addition and removal of pill by itself. The reason for not handling
search too in narrow.activate is to avoid clearing the pills and
repopulating them. Example of some of the triggers for narrow.activate
include `restore draft`, `topic change`,`sidebar`.
Also modifies tests for search.js
The letter-spacing was changed last in commit
fc4d80d941 which is about a 5 year old
commit at the point of writing. The change is removed as I did not
notice any visual change on removing it. Changing the letter spacing to
normal lets the text in the pills be seen legibly, otherwise the characters
were overlapping.
Input pills require a contenteditable div with a class named input
to fall inside the pill container. On converting the input tag into
a div, the size of the input decreases which is compensated by a
line-height of 40px. Comment above letter-spacing:normal was removed
as chrome and firefox do not change the letter-spacing to normal
for a div via the default browser stylesheet.
NOTE: Currently writing something into the div will call the action
corresponding to that key in the keyboard shortcuts. The input will
work fine once the pills have been initiated.
For the casper tests, for now, we just use the legacy search code.
When we change that, $.val() cannot be used on contenteditable div, so
$.html() will need to be used instead in select_item_via_typeahead.
This changes the icon indicating that you can drug the custom
profile field rows in settings to be the double rows of dots
typically used to indicate draggability. It also gives those
rows the "move" cursor on hover.
This is essential for using simplebar, since simplebar doesn't account
for parent <div> paddings, which might cause scrollbars to be mispositioned
if not considered.
When you hover above the navbar, the cursor focuses on the page
body and scrolls the entire page, breaking the positioning of the
fixed sidebar and page content.
We disable scrolling on the body but allow the sidebar and Markdown
content page elements to be scrolled to fix this bug.
It seems to have been there to paper over a styling problem that was
actually caused by slightly mismatched font sizes (em vs. rem).
Signed-off-by: Anders Kaseorg <andersk@mit.edu>
This commit adds a Markdown tree-processor extension that renders
multi-line code blocks that are nested inside lists with the
formatting. Note that the code block could be nested inside multiple
list levels and would still get rendered correctly.
Tim: This fixes the need for unpleasant workarounds like
f5bfa4e793 and makes nested code blocks
in our documentation look exactly how users would expect them to.
