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.
This was used for the very early-stage Zulip "ask for invite" form,
which was built around a stamped envelope concept. The form was
removed from Zulip a couple years ago in
bded0d9d54, but this CSS was missed in
the removal.
This hides the up and down arrows that appear in the year input
of the Flatpickr-provided datepicker. (This is only used in
settings for now, but the arrows will be hidden anywhere Flatpickr
is used.)
Previously, commit e5d2e95 attempted to change the styling of the user
profile pill containers to match the inputs above it. However, it used
an incorrect selector (#settings_page), resulting in all other pill
containers on settings pages being changed to match it as well
(example: User groups pill containers in Organization
settings). Additionally, its selector's specified background attribute
resulted in problems in dark mode.
To correctly style the user profile pill containers to match the other
input's styling, we apply the uneditable-input class native to
Bootstrap so that we don't need to create an entirely new selector to
style it.
Note that the .custom_user_field .pill-container selector was added so
that it could match the padding of inputs. Also, the
.custom_user_field .pill-container:focus-within selector was added
with attributes straight from Bootstrap's input:focus selectors so
that .custom_user_field .pill-container would have a blue outline
while users were typing in the input pill, just like the other inputs.
Adding the 20*20 image inside the pill caused a minor increase in
pill height. Making the image 19*19 causes some increase in the height
under different zoom conditions. I'm not sure about the reason behind
this, so this can be counted as a hack.
Allow passing image link in the item passed to appendValidatedData.
When passing image link via any of the append* functions, make sure
that create_item_from_text for that pill also adds the image link to
the item created.
This commit does not make any visual change to the current app.
Changes to user_pill.js are necessary to enable user avatars for
pills.
This implements right-to-left message automatic detection support in
the compose box as well as the message feed. Full unit tests and
support in the message-editing UI are for future work (as are
potentially more fancy things like supporting things like
right-to-left multi-word names for users/streams/etc.).
Fixes#3123.
I also removed the comment that said "this is just a workaround".
It is not, it is technically correct for us to do apply different
CSS rules to <p> tags that aren't the first child of the <li>
element in question.
We remove css which has been dead since convertion of subscriptions
page to an overlay. This should ideally have been dealt with in
commit 1886f0a which actually did the converstion but we forgot to
handle it at that time.
We remove the dead CSS which was introduced in commit 963a93367
back in 2013 and doesn't seem to have any use now. Its probably
the case that we removed the actual html structure which used this
CSS since 2013 and forgot to clean up the css part.
This cleans up some leftover js and css from the effort of
redesign the rows of the #subscriptions table. Redesign happened
in commit 368b5859 and but we forgot to clean up these js and css
pieces.
squash to subs.js.
The user can also edit the question after adding it.
The question in the poll can only be added/edited
by the user who started the poll.
The input bar will be disabled for the other users
if the question is not yet added. If the question is
added, the input bar will not be visible to the other
users.
Fixes#9797.
Clicking on the unread count badge on the right sidebar did not
narrow the selected pm/group-pm. This commit moves the count div
inside selectable_sidebar_block. Also uses flexbox instead of
inline-blocks for user presences selectable_sidebar_block.
The reason for the bug was 71e3f778cc.
This commit makes the width 100% for selectable_sidebar_block only
on the right sidebar, the left sidebar selectable_sidebar_block
width is unset.
This updates the unread pills in the left and right sidebar
to look better at a wide range of zoom values. (It doesn't change
their appearance at all.)
Set the initial visibility of the page content to hidden via
the stylesheet, and allow any data fetching and rendering to
complete before making content visible.
Adjust the conditional logic within `render` to first check for
the case in which a user goes to a doc link, the case in which
we asynchronously fetch data prior making content visible.
Fixes#9577.
The list with the options for normal settings now has
the class normal-settings-list.
The list with the options for org settings now has
the class org-settings-list.
The new markup helps us avoid code like this:
$(".settings-list li:not(.admin)")
We also have funny hacks in our key handlers related
to the old combined-list approach, which we can
eventually eliminate.
These styles aren't great, but they're hopefully
better than none at all and inspire a follow up
commit from somebody else (so it starts to look
like a "real" feature instead of feeling completely
proof-of-concept).
The user can now specify the value while creating a stream.
An admin can later change it via `Change stream permissions`
modal. Add is_announcement_only to subscription type text.
First, it's silly that these weren't in common.css in the first place,
since that meant these were a bunch of duplicated code, but
additionally, that meant that these weren't available on the
`/activity` page (or other pages that don't include the portico styles).
Fixes#9561.
A "zform" knows how to render data that follows our
schema for widget messages with form elements like
buttons and choices.
This code won't be triggered until a subsequent
server-side commit takes widget_content from
API callers such as the trivial chat bot and
creates submessages for us.
This is a trial to have the first reply hotspot in the bottom
whitespace (and stick there until "Got it!" is pressed).
Tweaked by tabbott to clean it up a bit. Still needs more work on the
visuals.
This should significantly improve the user experience for creating
additional accounts on zulipchat.com.
Currently, disabled in production pending some work on visual styling.
This adds a tour of Zulip to the bottom of the homepage.
In order to get the carousel nave, we use Bootstrap 2 from a CDN on
this page; this isn't ideal in the medium term, but upgrading
Bootstrap across the project is too much work for now.
Fixes#9182. Adds a link to the keyboard shortcuts popup at the
bottom-right corner of the right sidebar. A tooltip saying
`Keyboard Shortcuts(?)` has been added to the icon. The icon is
positioned using `position: fixed`.
This uses scss mixins, this are functions you can pass parameter in it and
return css/scss. It made repeating vendored transistion, and user-select property
more easier to use with less repetation. This also includes a scss file called reuseable_components.scss
which can be used anywhere else.
The app icons (web/mobile/desktop) got all squished together when
they broke to a new line in smaller windows. They now have better
spacing and all break at the same time.
The integration widgets on the homepage had a weird-looking white
border. That border has now been updated to match the better-
looking border on the integrations page.
We only use this data in a rarely-used settings screen, and it can be
large after years of posting screenshots.
So optimize the performance of / by just loading these data when we
actually visit the page.
This saves about 300ms of runtime for loading the home view for my
user account on chat.zulip.org.
This commit moves the stylesheets under the archive bundle in
the Django pipeline to being compiled by webpack instead. It
also removes a remaining call to a portico stylesheet that no
longer exists.
This commit transitions landing-page.css from the Django pipeline
to being compiled by webpack as landing-page.scss under the
'landing-page' and 'integration' bundles.
This fixes some minor glitches with buttons:
* Movement of the organization-settings-parent block on the
appearance of widgets.
* Large and odd look of save button.
* Use of fadeIn and fadeOut rather than changing opacity as
opacity don't actually remove them.
This commit transitions all styles in app.css in the Django pipeline
to being compiled by webpack in an app-styles bundle, and renames the
various files to now be processed as SCSS.
To implement this transition, we move the old CSS file refernces in
settings.py and replace them with a bundle declared in
`webpack.assets.json` and includedn in the index.html template
Tweaked by tabbott to keep the list of files in `app.css` in
`webpack.assets.json`, and to preserve the ordering from the old
`settings.py`.
This is done because the current column-left and column-right were
actually just floating left and right and making use of float-left
and float-right makes more sense. This also helps with the upcoming
public archives feature which will try to include portico content
with main app content.
Add realm setting to set time limit for message deleitng.
Set default value of message_content_delete_limit_seconds
to 600 seconds(10 min).
Thanks to Shubham Dhama for rebasing and reworking this. Some final
edits also done by Tim Abbott.
Fixes#7344.
static/styles/scss/portico.scss is now compiled by webpack
and supports SCSS syntax.
Changed the server-side templates to render the portico-styles
bundle instead of directly requiring the portico stylesheet. This
allows webpack to handle stylesheet compilation and minification.
We use the mini-css-extract-plugin to extract out css from the
includes in webpack and let webpacks production mode handle
minification. Currently we're not able to use it for dev mode
because it does not support HMR so we use style-loader instead.
Once the plugin supports HMR we can go on to use it for both
dev and prod.
The downside of this is that when reloading pages in the development
environment, there's an annoying flash of unstyled content :(.
It is now possible to make a change in any of the styles included
by static/styles/scss/portico.scss and see the code reload live
in the browser. This is because style-loader which we currently
use has the module.accept code built-in.
This is a slight change in the responsive design, moving the 975px
cutoff to 1025px; the main effect is that for windows that just barely
had a right sidebar, we now hide the ride sidebar. This is pretty
beneficial for the user experience specifically in the common size of
1024px, where that sidebar was making things feel a bit too
constrained.
Shubham Padia
Lyla Fischer
Vishnu Ks
Marco Burstein
Tim Abbott
Cynthia Lin
Akash Nimare
Max Nussenbaum
Anders Kaseorg
Eeshan Garg
Aditya Bansal
Anupam Dagar
Rhea Parekh
Shayan Toqraee
Jack Zhang
Yashashvi Dave
Shubham Dhama
Steve Howell
Utkarsh Patil
Joshua Pan
Nikhil Kumar Mishra
Aman Ghebreweldi
Priyank Patel
Armaan Ahluwalia
gooca