Follow up to #14768. This feature was already non-functional due to
.alert-display { display: none; }, and if we want to reimplement it,
we should do it using a modern library.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
Remove the unused notifications-area wrapper. Remove the feature
detection code as all browsers recognize the <audio> element. Create
the <audio> statically with the page template. Use multiple <source>s
to let the browser detect the appropriate format instead of trying to
do its job for it. Remove the absurd loop="yes" attribute, which had
fortunately been specified on the wrong element.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
The keyboard-shortcuts icon currently has a fix position
causing design related bugs such as overlapping with userlist
in the sidebar.
The fix wraps the invite-more-users link and keyboard icon inside
a div with display property as flex instead of just using the anchor
tags inside the side-bar items.
This commit adds vertical-align: middle to .message_failed in zulip.css
which was necessary as the alignment of .message_failed wasn't matching
with rest of the message controls like .edit_content. This makes the
look of the message controls better that they don't look shifted.
Follow up #17666
This commit removes the option to add more streams out of scrollbar
as it is not visible on mobile devices or organizations with large number of
streams until scrolled down.
As demonstrated with the recent Zabbix integration, our line-wrapping
of numbered lists was busted in the presence of 2-digit numbers of steps.
Fixes#17634.
This commit adds a new class for typeahead items that do not need
a presence circle. It is changed to support addition of new items
that do not require presence circle.
There should not be any visual change due to this.
This commit removes presence circles for special users like
all, stream, and everyone. This was discussed at
#design>Presence circles in typeahead, and this was justified
as presence circles for these special users will always be grey
circle and do not convey any information about presence of anyone.
"Alert Words" is one of Zulip's oldest settings UI elements, and as a
result is buggy. This commit converts it to use our standard
progressive-table-wrapper system used for settings tables, which has
the side effect of fixing a bug that mad ethe tables look pretty bad
if one adds a very long word.
Fixes#17172.
This commit addresses the problem of user's status visibility to
some extent. It adds presence circles, like we have in buddy_list to the
typeahead suggestions that are given for mentioning users in messages.
Tweaked by tabbott to adjust vertical alignment of group mentions as well.
Testing for the changes is done manually in the developement server,
and also by updating frontend tests to address these changes.
Fixes: #17138
Fixes#16674.
The commit hides the tooltip for touch events on touch enabled device.
Touch events trigger both click and hover action,
leaving the hover action sustained until next click.
Hence it is better to hide the tooltip to avoid the clutter in UI.
Hover does not work for touch-based devices like mobile phones.
Hence the icons on the right sidebar do not appear, making the
user unaware of its presence on such devices. The following
media property displays the icon by default for such behaviour.
Hover does not work for touch-based devices like mobile phones.
Hence the the icons does not appear, making the user unaware of its
presence on such devices. The following media property displays the
icon by default for such behaviour.
The textarea in Settings/User Profile was overflowing in
smaller width devices.
This commit fixes that issue by adding appropriate media queries.
Fixes part of #16817.
This reverts commit 34ada11448.
That commit traded a minor visual glitch for a major usability
regression at my most common browser width (960px).
Signed-off-by: Anders Kaseorg <anders@zulip.com>
We change the text. This is an attempt to make the text space occupied by
the col header of last message timestamp smaller so that
it doesn't overflow to next line in some languages.
Also, add some extra padding.
On safari, after search box wraps to next line on smaller widths,
it is not visible due to some flex box default property difference
between chrome and safari. We fix this by resetting default
property.
We need to increase a bit of spacing around text in rows at <750px
because row height is reduced after hiding avatars. We use
padding instead of line height so that this plays nice when text
is wrapped.
Note more padding is also required for >750px now because text
can be wrapped now and take more width than avatars.
Since All messages narrow is no longer home page for webapp,
we change its icon to align-left which also shows a concept of
interleaved topics / messages.
Recent Topics is no longer an overlay now, but note that it is
also not a typical messages narrow. It can reside between
an overlay and a Filter in the sense that it is dispalyed as
a typical Filter narrow but has properties of an Overlay.
Compose box is not visible in this view as it will be confusing
to many users and hence compose shortcuts have also been disabled.
Keyboard shortcuts that apply on messages have also been disabled.
The remaining shortcuts that apply to a narrow are still accessible
here.
This issue adds the appropriate padding to the
copy_generate_invite_link class. This fixes the copy link icon which
seemed to be shifted when clicked.
Fixes#16868
This commits gives a right margin to the stream description
so that it does not collide with the icon on its right and
also become better visually appealing.
When interacting with popovers in the night theme using the keyboard
UI (e.g. the `i` menu for a message), the background color was
incorrectly white, resulting from the bootstrap `nav > li > a:focus`
rule. We had already fixed this for `nav > li > a:hover`; we just
need to add `nav > li > a:focus` to the relevant block of CSS rules as
well.
Replaces #17195 and #17353.
Rewritten to use a cleaner solution by tabbott.
Usually we increase the opacity of an interactable icon on hover, but the search-icon at the top of the
right sidebar was missing the behavior.
Co-authored-by: ritik <ritikcn05@gmail.com>
Lists that were followed by a paragraph (i.e. our p+ul, p+ol CSS rule)
in messages had negative top margin of -3px. Adjusting the margin
here is important, because the default styling would result in an
excessive gap that made bulleted lists weirdly far from the previous
paragraph. See #12113 for background.
However, the -3px negative margin was so large that it reduced spaces
between paragraph and lists, such that there was too little visible
separation between the two. We fix this by going with a 0px
margin-top instead.
This has been tested for various structures of messages:
1. text + bulleted list
2. bulleted list + unbulleted list(or two lists)
3. only list.
And it looks good in all cases.
Fixes#17284.
The code blocks and response blocks had small and unreadable font,
because they were using the bootstrap defaults without adjustment for
the size of content on the rest of the page. Fixes part of
zulip#15967.
Previously, the data type of responses wasn't displayed in the API
Documentation, even though that OpenAPI data is carefully validated
against the implementation. Here we add a recursive function to
render the data types visibly in API Documentation.
Fixes part of #15967.
On a high-DPI display or with a non-default zoom level, the browser
viewport may have a width strictly between md_max = 767px and md_min =
768px. Use only the *_min bounds for consistency.
This requires queries with strict inequalities to express upper
bounds (width < md_min). Fortunately, that functionality is provided
by range context queries. Unfortunately, those are not supported in
all browsers. Fortunately, we can compile them away using
postcss-media-minmax. Unfortunately, postcss-media-minmax currently
subtracts 1px for strict inequalities anyway to work around a Safari
rounding bug. Fortunately, 0.02px should be sufficient for that, so I
submitted a PR:
https://github.com/postcss/postcss-media-minmax/pull/28
Signed-off-by: Anders Kaseorg <anders@zulip.com>
Since the bots list breaks at 625px with left col of settings
hidden and at 850px with left col of settings visible
without this media query,
having this media query trigger at 991px shouldn't produce
any problems.
This media query aligns filter buttons on tablets. Since tablets
range are usually less than 991px in width, this breakpoint makes
more sense. Also, the filter buttons looks nice between 1033px
and 991px.
Instead of adjusting the width of settings container at
1130px, we adjust it at 991px which is the standard for smaller
screens. Adjusting it 1200px(xl) didn't make sense, so the
next reasonable breakpoint was used.
Since alert-box has size of 900px on large devices, we had to
reduce its size for devices less than 900px. Setting this
breakpoint to 991px, shouldn't break anything.
The changes were not live tested since search pill is not enabled.
However, this should look fine since the properties changed
were not depended upon 500px.
We use 767px for hiding left column.
The components changed here were tested to be working fine.
This change is not likely to introduce any regression as the
calculations in the components here were not dependent upon the
breakpoint being at 775px.
We use 1199px for hiding right column.
The components changed here were tested to be working fine.
This change is not likely to introduce any regression as the
calculations in the components here were not dependent upon the
breakpoint being at 1165px.
This code was intended to hide the stream description on stream
settings overlay on display <350px; but, the css selector for
should be `.stream-row` instead of `.stream_row`. Anyway, the
overlay looks fine on small devices with stream description.
Hence, we just remove this dead code.
Previously, the data type of parameters wasn't displayed in the API
Documentation, even though that OpenAPI data is carefully validated
against the implementation. Here we add a recursive function to
render the data types visibly in the API documentation.
This only covers the request parameters; we'll want to do something
similar for response parameters in a follow-up PR.
Fixes part of #15967.
When we switch subscription overlay from two column to one
column overlay, we also set stream buttons to show in next line.
575px because it the breakpoint used by bootstrap 4 for small
screens.
As of Feb 15th 2019, Hipchat Cloud and Stride
have reached End Of Life and are no longer
supported by Atlassian. Since it is almost 2 years
now we can remove the migration guides.
The set status modal to add/remove/update user status was not
visible properly on devices with a small width. This commit fixes
the issue by adding appropriate media queries to the css to make
the modal mobile responsive.
Fixes part of #16817.
The visual noise from the blue border has bothered me forever and I
finally decided to do something about it. I don't know if this is the
best solution, but I do think it's a lot better than the status quo!
Steve asked me to remove this, since the tictactoe game was always
intended as a proof of concept. Now that we have poll and todo
widgets, the sample code for tictactoe has much less value.
We replace the content and type in test_widgets.py to maintain
coverage.
A convenient copy-to-clipboard button was added in the Invite users to
Zulip modal, to make it slightly more convenient to share the
generated links.
The formatting is extracted to a template to make i18n and variable
substitution simpler.
Tweaked by tabbott significantly to simplify JS, HTML, and CSS.
Fixes#16442.
When compose box is open we already set
```
$(".new_message_textarea").css("min-height", "3em");
```
in compose_actions.js.
So, this property actually reduces the min-height slightly which
hides the topic when it is long enough to span in two lines.
This property never gets used and is not necessary since it
is overridden by
```
.button.small {
font-size: 1em;
padding: 3px 10px;
}
```
in compose.css
which looks good enough.
Color-picker overflows the screen width when an user
attempts to change color of the stream in small devices.
Fixed by making it fullscreen in narrow devices.
Fixes#16477
This styles the vertical scrollbar similar to the horizontal
one for <pre/> (which can be seen in narrow windows). Strictly
speaking, this change shouldn't go in rendered_markdown.scss, but
placing it there helps unify the two scrollbar stylings rather than
duplicating them.
Z-index is added to the base class. This doesn't affect copy_code_button
in any way.
Attributes dropped/changed:
- background-color
- Base class on-hover property is now used.
- height, width, padding is now the base classes.
We can also remove the TODO now.
The base class will contain common styling which is used by both
copy_codeblock and copy_message buttons. This sets us up nicely
for following commit(s) which aims to unify the two button styling.
For dropdown elements, use bootstrap styling. The styling
was not applied by default from bootstrap since we
use a combination of dropdown + simplebar for this element.
This doesn't match the expected structure of elements by
bootstrap since simplebar inserts elements of its own.
The style is same as in bootstrap v2.3.2 for
.dropdown-menu > li > a.
In case of previews, we tweak the positioning a bit more
to the right.
The previous styling also had the focus-within action
which isn't needed here as hovering over the codeblock
is enough to display both the icons.
The Formatting button that opens our Markdown help popover previously
had an "A" as its icon (the Font Awesome icon for font). This commit
changes the link to spell out "Help" to make it more discoverable.
Now that they are tab accessible, we should order them by importance.
Previously the order was:
1. Add emoji
2. Formatting
3. Attach files
4. Add video call
5. Preview
6. Drafts
This commit changes the order to:
1. Attach files
2. Preview
3. Add video call
4. Add emoji
5. Drafts
6. Formatting
The "Add emoji" button is moved back because emojis can be more
conveniently entered using the typeahead triggered with ":" or the
emoticon conversions.
We should show normal popover instead of extended profile one for the bot
owner in bots section of organization settings.
A new function show_user_info_popover is added, as it makes sense to keep
it separated from the function used to open popover for sender of a
message, which uses the message from which the popover is opened.
This added function can further be used for showing popover for
"invited_by" in invites table.
This changes the success text of the `subscriber_list_add`
form to display the subscribed and already subscribed users
on success. We also display the user profile as a popover.
Previously we would only display the email ids of the already
subscribed users.
Formatting tweaked by tabbott.
bootstrap sets <code> to use `Monaco` font by default. We don't
want to use this font since some characters are not clearly
readable like `()` appearing as `0`.
Hence, we use Menlo font by default if available.
Since `Monaco` font is only installed in macOS by default, this
mostly affected mac users.
css-loader@4 broke @import statements referencing files with
extensions other than .css, unless those @import statements are
compiled away by another loader. Upstream is more interested in
arguing that such @import statements are semantically incorrect than
applying the one line fix.
https://github.com/webpack-contrib/css-loader/issues/1164
Signed-off-by: Anders Kaseorg <anders@zulip.com>
Fixes#16252.
icon* classes are used by bootstrap for displaying glyphicons.
We removed these classes in our custom version of bootstrap 2.1.1;
but since our reset to v2.3.2, they have been added again and hence
any classes starting with icon* in zulip will have to be renamed.
Improves the display of error messages on registration page fixing
mis-positioning of error messages and overlapping with other text
in some cases.
Part of: #15750.
We display a centered spinner and hide the Submit / Cancel
buttons in the Move Topic modal similar to what is done in
the Deleting messages modal.
This commit also makes a change where we now close the modal
after success/failure response of the second request instead
of the first.
Changes to bootstrap.css made by us after these are not relevant:
d7f9a21 - Reducing z-index of overlay doesn't make sense.
9b740df - some changes were added.
1143ed7 - changes in above commit were moved to a different file.
This commit starts to bring back our changes to bootstrap
files. We try to move these changes to zulip.scss as much
as possible. We are starting with bootstrap.css.
Apply fix in commit 7a3a3be.
Changes before 7a3a3be that
were not to be added. These mostly involve moving files around
and hence are not relevant.
441e4295e2c49389ed4448f1cee01490ae1
Having this option in preview feels rather odd. The code here
would either be pasted from elsewhere (in which case it would
be in the clipboard already) or it could be copied from the
writebox just as easily.
Anders Kaseorg
Sumanth V Rao
PIG208
Gaurav Pandey
Signior-X
Abhijeet Prasad Bodas
Tim Abbott
m-e-l-u-h-a-n
Josh Gilley
smit_patel
Aryan Shridhar
Suyash Vardhan Mathur
Riken Shah
Aman Agrawal
aryanshridhar
Megamind
Ganesh Pawar
Pranav Joglekar
Vishnu KS
Siddharth Asthana
Kamal Marhubi
YashRE42
aniketsonu
sahil839
Gittenburg
Amitsinghyadav
Ryan Rehman
Priyansh Garg
Sankalp