Commit Graph

540 Commits

Author SHA1 Message Date
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
Aman Agrawal f8aea9aecb postcss_vars: Use underscore to follow better naming convention. 2021-01-25 14:49:32 -08:00
Aman Agrawal ac09572317 media_query: Use 575px instead of 500px to reduce spacing.
At 575px, we used to reduce spacing for
all components around webapp.

This is basically the standard breakpoint for mobile devices.
2021-01-25 14:49:32 -08:00
Aman Agrawal a55128721b search_pills: Use 575px instead of 500px as breakpoint for mobile.
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.
2021-01-25 14:49:32 -08:00
Aman Agrawal e941ee4a15 media_query: Use 767px instead of 775px as md breakpoint.
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.
2021-01-25 14:49:32 -08:00
Aman Agrawal 5a8150e34b media_query: Use 1199px instead of 1165px as xl breakpoint.
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.
2021-01-25 14:49:32 -08:00
YashRE42 79d077135e navbar: Remove :not() text-overflow selector.
Here we change from using clip to using ellipses on stream name.
2020-11-03 16:54:09 -08:00
YashRE42 af221526f2 navbar: Remove unnecessary :not() selector.
Replace not selector with equivalent properties.
2020-11-03 16:54:09 -08:00
YashRE42 4c0b7f9e9b messsage_view_header: Remove flex set via :not().
This did not server any purpose.
2020-11-03 16:54:09 -08:00
aniketsonu 28aaf24a61 invite: Add Copy-to-Clipboard button for multiuse links.
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.
2020-11-02 15:34:50 -08:00
Anders Kaseorg 192f1eb0fc styles: Convert [disabled] selectors to :disabled pseudo-class.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-10-30 11:46:57 -07:00
Sumanth V Rao 264bf1fc2a css: Hide bottom-right resizable box in view-source textarea. 2020-10-08 17:13:50 -07:00
Sumanth V Rao ab9a011f89 css: Modify button styling to adjust for svg size change.
This builds on the previous commit and adds final touches to
both the button positioning and style.
2020-10-08 17:13:50 -07:00
Sumanth V Rao 792029cbb8 css: Refactor copy_message button to use copy_button_base class styling.
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.
2020-10-08 17:13:50 -07:00
Sumanth V Rao 26ff6db751 css: Extract copy_button_base from copy_codeblock class.
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.
2020-10-08 17:13:50 -07:00
Gittenburg 55a67ee7c5 message_edit: Display Formatting button as "Help".
Match the compose change b245e1e49a.
2020-10-02 14:54:14 -07:00
Aman Agrawal f6e42d3c28 msg_edit: Don't show checkbox label in next line. 2020-10-01 17:45:11 -07:00
Aman Agrawal ef19e4870d css: Don't use `Monaco` font for <code>.
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.
2020-09-18 11:35:13 -07:00
Anders Kaseorg a3d26d701e styles: Rename .scss files back to .css.
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>
2020-09-15 16:33:28 -07:00
Armaan Ahluwalia 5f7b47e20c css: Transition 'app.css' to SCSS.
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`.
2018-05-02 17:13:16 -07:00
Yashashvi Dave 7bbe44d7a0 org settings: Remove "Delete streams" administrative tab from settings.
Fixes #9227
2018-04-30 17:47:34 +05:30
Tim Abbott d1cc442404 compose: Move colorblock CSS to compose.css. 2018-04-19 22:51:25 -07:00
Cynthia Lin f1db3a681a compose: Refactor compose box from `<table>` to `<div>` structure.
`<td>` elements are fixed-width, so we refactor the entire
`<table>` structure for responsive design.

This fixes a bug with how the `To:` block looks in other languages.

Fixes #9152.
2018-04-19 22:51:13 -07:00
Tim Abbott 636390104a css: Fix glitchy white line in recipient headers.
The intent had always been for this to be just a color change; a white
boundary didn't look good for either the day or night theme.
2018-04-16 13:37:21 -07:00
novokrest 0d164fab1b message_edit_form: Show default cursor instead of pointer.
Fixes part of #3938.

(This only changes the sections within the message-edit form; the top
and left chrome are still cursor: pointer).
2018-04-12 15:08:38 -07:00
guaca a19daf0ab2 Settings: Fix vertical spacing.
Removed the top margin of input-group css
 to prevent the double margins. Also fixed the
 default-language positioning, and maintained
margin consistency in organization settings.

Fixes #8890.
2018-04-12 09:38:24 -07:00
Marco Burstein 7c66d11781 compose: Show avatars for people in typeahead autocompletes.
`@everone` and `@all` will have a megaphone icon from FontAwesome in
place of the avatar.

Also, fix the `composebox_typeahead` tests to account for the images.

Fix #6635.
2018-04-09 15:47:11 -07:00
Aastha Gupta f900f955c0 message edit: show spinner on topic change.
On clicking the checkbox in topic edit form, display a spinner and
hide the cancel icon.  Also, do not display any success message.

Fixes #8793.
2018-03-23 07:21:22 -07:00
Shubham Dhama 8f4523e8dd compose typeahead: Add all public streams including unsubscribed streams.
This makes it convenient to mention a stream you're not subscribed to,
which can be useful for communicating about where a topic is
discussed, for example.

Fixes: #5757.
2018-03-14 11:10:43 -07:00
Tim Abbott 4ae1418831 popovers: Rename confusing my_email to user_popover_email. 2018-03-12 12:24:50 -07:00
Priyank Patel 29c6d23043 user profiles: Add copy-to-clipboard btn for long emails.
Implements copy to clipboard btn that shows up if email is too long.
Making it easier for user to copy long emails.
2018-03-12 12:06:40 -07:00
YJDave f46d925208 org settings: Fix issue, loading spinners are not visible.
In org settings, loading spinners are not visible, currently
because their size is very small.

Fix this, by increasing width and height of spinners and
adding spinner text, to make spinners more visible.
Fixes #8502
2018-03-07 13:34:50 -08:00
Xavier Cooney 769052d9c7 css: Allow the bot API key to be selected on all browsers.
The problem that prompted this PR is that I couldn't select the API
key of a bot in chrome to copy it, but I could on Firefox.

Using the `auto` proerty value to override the `user-select`
property  of a parent does not seem to be compatible
with all browsers.
2018-03-06 12:55:53 -08:00
Vaida Plankyte 80ff3d8da5 frontend: Reduce opacity of hotkey hints.
This helps these draw a bit less attention.
2018-02-19 11:53:37 -08:00
Brock Whittaker d30a6c64c3 Revert "Make recipient bar styling more compact and clean."
This reverts commit 8e2d9b8f68.

This adds the arrows back to the recipient bars because even though
it's not our end state, it looks better than the boxy design that we
had in between.
2018-02-16 11:55:00 -08:00
Brock Whittaker 06f3cb2b78 message-feed: Add some styling to open graph previews.
This adds some styling to make the open graph previews look a bit nicer,
including:

1. Adding a bottom fading gradient to slowly fade out text that is out
of bounds rather than chopping it off.
2. Using font anti-aliasing to make the characters appear smoother.
3. Increasing the font size of the title to give it prominence.
4. Changing the height to 80px from 70px.
2018-02-05 16:27:31 -08:00
Brock Whittaker 1a93cd4ffe panels: Give admins a red warning banner when email isn't configured.
Also refactor the "panels"/banner code to be a bit clearer about how
it's supposed to generically work, using [data-process] as a uniquely
identifying marker.

Fixes: #8166.

[greg: rebased and squashed a series of fixup commits.]
2018-02-05 16:00:52 -08:00
Brock Whittaker c129bba1af informational-overlays: Move CSS => informational-overlays.css.
This moves the CSS to a specialized stylesheet and adds a custom class ".hotkeys_full_table".
2018-01-27 15:20:12 -08:00
YJDave 2ca0fb4128 user setting: Move password change flow in UI into modal.
Thanks to @brokwhittaker for his significant chagnes in
password modal design.
2018-01-23 14:40:47 -05:00