Happily, every last CSS property in these styles is already
described for the places <pre> appears in the Zulip UI:
1. In rendered message markdown
2. In the compose preview
3. In the information overlay (Message formatting)
The `line-height` value is set to `inherit` in zulip.css, rendering
this line moot. `inherit` will always force list items to take
their line height from the nearest ancestor that sets one.
* `font-size: 100%` is unnecessary, as `font-size: 16px` is set on
the `body` selector.
* `text-size-adjust` is unnecessary, as supporting browsers appear
to use `100%` as a default value anyway.
We currently use btn-link class only in buttons used for
changing email and password in account settings panel and
for we already bootstrap CSS rules for those so we can
safely remove the CSS rules in bootstrap-btn.css.
Since the keyup event for keys including shift triggers the typeahead,
shift tabbing into the topic recipient field would show the typeahead
momentarily, which is distracting.
As we need typeahead to trigger on shift for certain use cases in the
compose box, but not in the topic recipient field, we now do not trigger
typeahead on shift keyup events in the topic recipient field.
Fixes: #24152.
We don't want to process the key if `suppressKeyPressRepeat`
is true, but we always want to check to see if we should
stop propagation, or else characters typed into the input
field can be processed as hotkeys.
This reverts commit 091e2f177b.
This version of python_to_js_linkifier fails for at least some real
linkifiers. We'll likely re-introduce this after a bit more debugging.
Since the server-side implementation no longer uses look-ahead
or (more importantly) look-behind, it is possible to exactly implement
in Javascript. This removes a common class which would prevent local
echo.
This requires reworking the topic linking algorithm, to march the
server's as well. The tests and behaviour are adjusted in so doing --
previously, the JS implementation would have linked `#foo` with a
`foo` regex on the linkifier, but the server implementation would not
have.
This reverts the typeahead library part of commit
0cdb54cf65.
The extra refocusing was breaking the `>` typeahead acceptance logic.
Further, generally typeahead acceptance won't introduce block syntax
or newlines, so I'm not sure whether the original motivation for doing
this in other code paths applies to typeahead.
With the autocomplete dropdown, some users face trouble or uncertainty
while selecting topics. These changes adds a new indicator to the topic
typeahead dropdown while typing to the topic box. This ensures users
that they are on track and they are doing the right things. We also
suggest the current query even if it doesn't match a topic to continue
providing the new indicator.
Fixes: #23296.
This fixes the bug where on pressing enter after the last line in a
textarea, the cursor would go to the new line but the textarea would
not scroll it into view unless more was typed. This was observed on
chromium browsers.
A new function `insert_and_scroll_into_view` is added to `compose_ui.js`
which blurs and refocuses the textarea after inserting the content, then
autosizes the textarea.
We used "btn-success" class only in user profile modal subscribe
widget and the CSS rules applied by bootstrap on this class were
overridden by other CSS. We also remove the btn-success class
since this is a bootstrap-specific class and we no longer
need it.
We used "btn-primary" class only in integrations dev panel page
and this commit re-adds the CSS applied by this class in
integrations_dev_panel.css. We also remove the btn-primary class
since this is a bootstrap-specific class and we no longer
need it.
Commit 537617b46d (#23466) removed our
last use of .button(), and we have never used data-toggle="button".
(We are still very entangled with the Bootstrap button CSS, so that
remains for now.)
Signed-off-by: Anders Kaseorg <anders@zulip.com>
Apparently, we had two copies -- the one in bootstrap.js being
overridden by the one in the separate module.
We can't yet remove all the CSS, since some of it appears to still be
in use in some of the popovers.
This commit adds a function to make it easier to close
the search bar consistently in any siuation where the
typeahead closes, to avoid being in broken middle states.
Fixes#11767.
Previously multi-character emoji sequences weren't matched in the
emoji regex, so we'd convert the characters to separate images,
breaking the intended display.
This change allows us to match the full emoji sequence, and
therefore show the correct image.
We have already re-added the bootstrap CSS rules defined using
"table-bordered" class in the specific files where required and
thus this commit removes them from bootstrap.css.
We do not use classes like "success", "warning", "info"
and "error" for "tr" elements used in tables and thus
we can remove the related CSS from bootstrap.css.
We also do not have selectors of the form ".table .table"
and so we can remove that CSS from bootstrap.css as well.
ALso, the CSS defined using ".table tbody + tbody" to
set the border is not required as we already set borders
on th and td elements.
The browser defaults for font-weight for `th` elements
is "bold" so we can remove the CSS to set font-weight
from bootstrap.css.
The html for tables used by us has a following structure-
<table>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
So, as per the above structure, we do not have th elements
inside tbody and td elements inside thead and thus we can
remove the bootstrap CSS rules for these cases. Also, we
always have a thead before tbody, so tbody:first-child CSS
can also be removed.
We use "tfoot" element only in realm_domains_modal.hbs
template and this table does not have table-bordered class.
The bootstrap CSS rules for "tfoot" elements are only for
the "tfoot" elements inside a table with "table-bordereds"
class so we can safely remove the bootstrap CSS.
We have added the bootstrap CSS rules for blockquote elements
to the specific elements in previous commits and thus we can
safely remove these from bootstrap.css.
The "label" class was only used for the labels shown in
activity support page. This commit adds the required CSS
rules to activity.css and removes them from bootstrap.css.
We use "small" element only to show secondary details in
a typeahead option. This commit re-adds bootstrap CSS
rule to the specific element in compose.css and removes
the CSS from bootstrap.css.
Also, we do not use small elements inside any of h1, h2,
h3, h4 and blockquote elements, so the CSS for those can
be safely removed.
We use input-append class only for some search elements
in the app and the CSS rules applied by bootstrap which
are really used are "white-space" and "margin-bottom"
for a couple of ".input-append" elements and "margin-left"
property on clear button which is re-added to the CSS for
specific elements in this commit.
Others are either redundant or overridden by the other CSS
for the specific elements.
The border-radius property for the clear button was applied
but since we use "x" for it, there is no border for that
button and hence it is redundant.
This commit removes the CSS for "text" type input elements
from bootstrap.css as we have already added the required
CSS rules to the specific elements in their specific files.
This commit re-adds bootstrap CSS for text inputs in realm details
page by using a more specific selector in activity.css. The CSS
added for search input includes bootstrap CSS applied using
".search-query" and "input[type="text"]" selectors.
We remove the CSS for search-query CSS from bootstrap.css
as the search element in app navbar already overrides the
bootstrap CSS.
This is a prep commit for removing bootstrap CSS for text type
inputs.
We use url type inputs in the add and edit custom field modals
and also to show the url type custom fields in "Profile" panel
and "Manage user" modal.
This commit re-adds the bootstrap CSS rules to these specific
input elements using modal_url_input and settings_url_input
class and thus removes the CSS for url type inputs from
bootstrap.css.
We might replace the new class added here with a common class
for all type of inputs in further commits.
We use email type inputs only in portico pages and
the bootstrap CSS is already overridden by CSS
defined in portico_signin.css. Only outline property
was being applied by bootstrap on focusing the input
which has been added to CSS in portico_signin.css in
the previous commit as password and email type inputs
have common CSS.
Thus, we can remove the bootstrap CSS for email type
inputs safely.
We use password type inputs for API key and password
change modal in the main app and in login, register
and password reset pages.
For the portico pages, i.e. login, register and
password reset pages, the bootstrap CSS is already
overridden by our custom CSS defined in
portico_signin.css and some of the CSS added by
bootstrap is redundant. Only outline property was
being applied by bootstrap on focusing the input
which has been added to CSS in portico_signin.css
in this commit.
For the inputs used in app, i.e. API key and password
change modal, we have already added the CSS rules of
Bootstrap using "modal_password_input" class.
Thus, we can remove the CSS for password type inputs
from bootstrap.css.
The "pull-left" class was used for hidden file type input
in compose_control_buttons.hbs and in the copy code button
in codeblocks. It was only used to set the float property
in CSS, but we do not need to set it and removing it does
not make any change in the position of these elements.
So, this commit removes the pull-left class and its CSS
from bootstrap.css as well.
For the file type input, it is already hidden and after
removing the float property also, it is positioned at the
same place due to ordering of elements in HTML.
For the copy code button in codeblocks, it is postioned
using "position" and "right" attributes and removing
"float" property has no effect.
We use pull-right class for copy button with the multi-use
invite link only and this commit adds CSS for that specific
element. This commit then removes the bootstrap CSS for
pull-right class and also removes pull-right class from the
copy button since it is no longer required.
This commit adds the required bootstrap CSS rules for fieldset
elements to the specific selector in portico_signin.css and
removes the CSS from bootstrap.css.
We use input-block-level class only for search input
and this commit adds the required bootstrap rules for
it to the specific elements in search.css. So, we can
safely remove the CSS defined for this class in
bootstrap.css.
We use "submit" type inputs in dev login page. Only "cursor"
CSS was applied to those elements from bootstrap and this
commit adds it to those elements in portico_signin.css and
removes the CSS in bootstrap.css and bootstrap-btn.css.
We use "input-xxlarge" class for search box in activity
support page only. This commit adds the width property
in activity.css for the search box and rest of the CSS
applied using this class was redundant and can be removed
safely.
Currently, we are in the process of removing bootstrap out of the current
Zulip codebase. A quick git grep on btn-info shows that the class is only
used in `templates/corporate/billing.html`. But it doesn't take advantage
or use most of the styling rules that are set.
We should get rid of those rules as it's not being used and help simplify
the process in removing bootstrap.
When search bar is empty and we've reached that state
by using the `backspace` key. There are no suggestions
as there are when you select an empty search bar.
The cause of this was an explicit prevention of this
suggestion box in `typeahead.js` so that the
`backspace` key is free to interact with the other
elements.
The fix here is to add an optional `hideOnEmpty` option
so that if we want this suggestion box to appear we can
set this option to `false` and this behavior will be
prevented.
This option is enabled for the search input when pills are not
enabled.
Fixes: #25062.
Previously the typeahead container was being created at the bottom
of `body`, and its width (and `top` and `left`) were being set to
move it to the right position.
Now it sits in the search box container, which gives it the correct
position and width by default. This is better for DOM readability,
and is also better for the new 100% width (which is part of the
search bar redesign) because it can change width more smoothly
with the search bar when the page changes width.
This commit adds custom functionality to the bootstrap typeahead
to allow the typehead to be placed in the search box container
(whereas previously, it could only be appended to `body`).
Anders Kaseorg
Karl Stolley
Aman Agrawal
evykassirer
Sahil Batra
Tim Abbott
N-Shar-ma
Alex Vandiver
Joelute
Daniil Fadeev
evykassirer
Lakshay Mittal