Commit Graph

578 Commits

Author SHA1 Message Date
Tim Abbott 95efadaf86 css: Use default font size for buttons and dropdowns. 2021-06-11 17:15:45 -07:00
Tim Abbott 18bcff8c96 css: Remove font-size for message_edit_tooltip.
This looks better with the default font-size, though it needs an
alignment fix.
2021-06-11 16:03:39 -07:00
Tim Abbott f5369db8f1 css: Remove duplicate specifications of default font size.
These unnecessary references to 14px font size complicate any effort
to adjust the font size in Zulip.
2021-06-11 15:11:33 -07:00
Tim Abbott 01bfb621ba css: Rename settings forgot password CSS class.
"info" in not a sensible name for a broadly used CSS class.
2021-06-11 15:08:45 -07:00
Tim Abbott 90041ff453 css: Deduplicate CSS for message_control_button elements.
Each copy set the same 3 properties, with the actions menu relying on
the terribly named "info" class for its copy.
2021-06-11 15:08:14 -07:00
Ganesh Pawar 1afcc98be2 confirm_dialog: Add support for loading spinner. 2021-06-10 12:16:23 -07:00
Steve Howell 842b14b916 layout: Introduce a #compose-content div.
This should make it more intuitive to add
new elements to the compose box (such as
banners), and it also makes it a bit more
clear for styling purposes that the same
geometry happens whether the compose box
is open or the buttons are visible.

I lifted the #compose_container div into
the server template.  It's not totally
clear to me why we need both #compose
and #compose_container, but there are
some scary comments about 1400px that
made me too timid to address that quirk.

In passing I removed a clearly redundant
click handler.
2021-06-10 11:22:05 -07:00
Riken Shah ccfee49407 navbar_alerts: Replace HTML template with handlebars architecture.
This moves this block of HTML templates, which are dynamically
rendered with some user data, to be managed by the frontend handlebars
template system.

This migration involves only displaying active alerts in the DOM, and
thus we no longer need navbar_alerts to have display: none by default.
2021-06-07 17:52:08 -07:00
Riken Shah 51e24519b8 refactor: Rename `panels.js` to `navbar_alerts.js` as it better explains it. 2021-05-21 17:49:12 -07:00
Aman Agrawal ddfb9b5200 tippy: Increase font size from 12 to 13px.
Increasing the font size for clear visibility.
2021-05-19 11:20:49 -07:00
Aman Agrawal 987acd93f4 message_edit_form: Fix vertical alignment of bottom elements. 2021-05-13 17:11:29 -07:00
Anders Kaseorg 668b5137b0 version: Display Zulip version in About Zulip dialog.
We record Git details about the merge-base with upstream branches in
the zulip-git-version file, if the upstream repository is available.

Note that the first Git upgrade after merging the parent commit will
not include the merge-base details, since the upstream repository will
not have been available.

Co-authored-by: Tim Abbott <tabbott@zulip.com>
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-05-13 11:36:12 -07:00
Tim Abbott 3e4a819722 css: Centralize topic edit modal CSS. 2021-05-09 19:47:08 -07:00
aryanshridhar 85fc8d5472 popovers: Allow Move topic's dropdown_list_widget to overflow.
Added a CSS overflow property to Move topic popover so that the
dropdown_list_widget doesn't hide behind the modal.
2021-05-09 19:35:51 -07:00
aryanshridhar 42c02f0788 popovers: Add search typeahead to Move topic popover.
Implemented dropdown_list_widget in Move topic popover which enables,
the functionality to search for streams while moving a particular topic.

The aim is to reduce the user effort by having an input
typeahead instead of haivng a dropdown list of streams.

Closes #14860.
2021-05-09 19:32:33 -07:00
Sumanth V Rao a510dac024 settings_playground: Add UI to create a new playground.
The design of the form is similar to the linkifiers page
and is styled similarly.

The introduction text for "Code playgrounds" is improved
with more details and examples.

Also, we can remove the hardcoded playground and the fix
we had previously done to prevent breaking the hardcoded
playground.
2021-05-04 11:39:33 -07:00
akshatdalton bf41f455cd message_view: Add support for unmuting of topic from its recipient bar.
Earlier, a user can only mute a topic from its recipient bar but can't
unmute it from there (and in fact we displayed an option to mute even
if the topic was already muted!). This commit fixes that bug and
allows a user also to unmute the topic from its recipient bar.

There are two core issues here;
* We did not have code, an icon, etc. for the "already muted" case in
  the recipient bar logic at all.
* We did not rerender messages in !excludes_muted_topics views when
  muting state changed.

See: 660475bd0c for background on when
we started only rerendering the streams with excludes_muted_topics
after muting changes.  Rerendering of newly muted topics are important
for live rendering if a user is narrowed to that topic itself, which
are essentially all excludes_muted_topics narrows anyway.

Hence, now, we rerender by calling the `rerender` function for muted
topics (which is done just before we update the items for muting via
the function: `update_items_for_topic_muting`).

Tweaked by tabbott to add comments explaining the reasoning and
long-term plans.

Fixes #15223.
2021-05-03 13:07:09 -07:00
pilgrim2308 a74b52db22 UI: Add Zulip version in gear menu.
Currently only enabled in development, since the exact details don't
seem right..

Co-Author-By: Signior-X <b19188@students.iitmandi.ac.in>
Co-Author-By: Aman Agrawal <amanagr@zulip.com>

Implements UI for #8005.
2021-04-30 17:58:08 -07:00
Tim Abbott 3e8ec76aa0 css: Slightly increase size of left sidebar. 2021-04-30 16:02:31 -07:00
Tim Abbott ed6d5dcf36 css: Extract variables for the widths of the sidebars. 2021-04-30 16:02:31 -07:00
Aman Agrawal 4a91d5ffdb compose_control_buttons: Change class name for GIF icon.
Since we no longer use giphy logo to open giphy
popover, this is a more appropriate name.
2021-04-29 16:06:51 -07:00
Aman Agrawal 374ce1094b giphy: Use `zulip-icon` font to render giphy icon. 2021-04-29 09:02:25 -07:00
Aman Agrawal 5bd37b44f2 zulip-icon: Add `zulip-icon` as classPrefix for icon.
This avoids general class names like `bot`.
2021-04-29 09:02:25 -07:00
Aman Agrawal 33641d7e05 giphy: Change icon of GIF picker.
We use an icon which is more clear for what it stands for.

Increase allowed size of message-control-buttons slightly so
that they are clearly visible. This is more important for
GIF icon to be visible properly than any other icon here.
2021-04-28 07:07:36 -07:00
Aman Agrawal 1b844a8d1c message_edit: Deduplicate control buttons.
Deduplicate control buttons by re-using the
compose_control_buttons.

A link to `help` overlay was added to `message_edit_form`
as a part of this process.

This fixes a bug that when video provider is set to `Jitsi`
from `none` in organization settings while message_edit_form
is open, the video icon is not displayed since
it was not present in the message_edit_form DOM even if
compose.update_video_chat_button_display tries to display it.
It is fixed since the `.video_link` element is always present
in DOM of `message_edit_form` now.
2021-04-27 10:06:25 -07:00
Aman Agrawal eae1829ead message_edit_form: Convert from `id` to `class`.
Since we can have multiple instances of `message_edit_form`, it
makes sense to have it as a class.

We track the message_edit_form by setting an id to
`form` element dependent on message_id.
2021-04-27 10:06:25 -07:00
Aman Agrawal 384156c307 stream_create: Use ListWidget to render list of all users.
This improves the UX of creating a stream for atleast 1000+ users
realm by showing the the stream creation form much faster than
before.

Search, user addition, scrolling worked smoothly on 15k+
users realm as tested on dev setup.

Also, simplebar is used to replace the default scrollbar.

Fixes #16805
2021-04-25 08:54:08 -07:00
Aman Agrawal 2ceda13e31 tippy: Fix weird looking arrow for playground and copy code tooltips.
They were taking the height of the code block, we don't want them to,
hence we explicitly set their height to 0.
2021-04-23 11:59:18 -07:00
Aman Agrawal 9350bbd976 tippy: Fix font-family for copy code and playground tooltips. 2021-04-23 11:59:18 -07:00
Aman Agrawal 489daa7f7c tippy: Append tooltips to the parent of the `reference`.
This allows us to hide tooltips automatically when the
parent container is hidden while tooltip is active.

In an overlay, when a tooltip is active and `esc` is pressed,
the tooltip will remain active without this commit.

This has side effects of some properties of parent applying to
tooltips if property is directly set to `div`. Through manual testing,
only area where this was found was fixed.
2021-04-23 11:59:18 -07:00
Aman Agrawal 6271a7db9c message_controls: Don't set css properties for all `div`s in it.
This tends to behave badly when we add new elements which don't
want these properties.
2021-04-14 10:15:58 -07:00
Rutvi Sharma 71edbd47d5 style: Increase width of gear menu to avoid distracting hover.
The comment explains the reasoning, but this should make it a lot
easier for users to visually focus on the menu items in the sidebar.

Changed by tabbott to use the same width as the right sidebar itself.

Inspired by #17169.
2021-04-09 15:52:37 -07:00
Anders Kaseorg d84727ce7f styles: Use Source Code Pro as our monospace font.
Fixes #15993.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-04-05 15:18:41 -07:00
Anders Kaseorg 236e114870 styles: Consistently use generic fallback font families.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-04-05 15:18:41 -07:00
Palash Singh Raghuwanshi 7c43f1e2f7 static: Fix setting gear to be not active when app loads.
From the commit history, this typo has always been there; because it
had the same priority as the `opacity: 0.5` for that element,
it can be nondeterministic whether the bug appeared.

Fixes #17476.
2021-04-02 18:15:00 -07:00
Anders Kaseorg d22a61443e notifications: Remove in_browser_notify and bootstrap-notify.
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>
2021-03-22 23:40:38 -07:00
Anders Kaseorg aff8a32bc1 notifications: Simplify sound playing.
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>
2021-03-22 23:36:38 -07:00
Signior-X 31b7eb7439 style: Fix the vertical alignment in message controls.
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
2021-03-21 17:38:14 -07:00
m-e-l-u-h-a-n e781136acd css: Add separate class for typeahead items with no presence circle.
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.
2021-03-12 02:10:21 -08:00
m-e-l-u-h-a-n 629aeced16 compose: Remove presence circles for wildcard users.
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.
2021-03-12 02:10:21 -08:00
m-e-l-u-h-a-n cd0d3347ab compose: Fix spacing of presence circles in typeahead.
This commit increases spacing between presence circles and user avatar
in typeahead suggestions.
These changes were discussed in #design>Presence.
2021-03-12 02:10:21 -08:00
m-e-l-u-h-a-n f4a111e314 compose: Add user presence circles in mention and pm typeahead.
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
2021-03-04 17:06:02 -08:00
Tim Abbott 7def3e7832 css: Fix vertical alignment of mention typeahead.
Somehow the previous styling was oddly off-center.
2021-03-04 17:05:04 -08:00
Gaurav Pandey 3dcf97bf27 tooltip: Hide tooltip for touch events on touch-enabled devices.
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.
2021-03-04 12:32:16 -08:00
Gaurav Pandey a3561c15d2 invites: Remove odd box-shadow for invite link clipboard svg. 2021-03-03 21:57:41 -08:00
Signior-X 15c4a72ac5 frontend: Fix shifted user invite copy icon
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
2021-02-25 17:38:08 -05:00
Anders Kaseorg ba0ee6ddfa dependencies: Upgrade Source Sans Pro font to Source Sans 3.
https://blog.adobe.com/en/2020/11/30/whats-new-in-source-sans-3.html

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-02-23 14:55:33 -08:00
Anders Kaseorg 64b78ad992 styles: Use range context queries to eliminate *_max variables.
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>
2021-02-05 09:23:59 -08:00
Aman Agrawal 705fd50e9e feedback_container: Expand to almost full width below 767px.
Remove css clutter.
2021-01-25 14:49:32 -08:00
Aman Agrawal 1374d556da css: Use a min width for main app containers below mm (375px) widths. 2021-01-25 14:49:32 -08:00