Commit Graph

39 Commits

Author SHA1 Message Date
Anders Kaseorg 5d64c21c38 styles: Globally set font-size and a unitless line-height.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-06-23 09:10:50 -07:00
m-e-l-u-h-a-n e10a315efd temaplate: Separate stream and user group tabs in user profile modal.
We had stream and group tab inside a common div with class
`subscription-group-list` due to this adding any info
elements like alert boxes that were specific to one of them
became difficult. To fix this we keep them in their own
`.tabcontent` div. This change also makes the handling of
display of different tabs a lot easier and cleans
up unnecessary javascript code that was handling the
display of common parent div of stream and group tab.
2021-06-23 08:08:23 -07:00
Tim Abbott 579a9d60e9 css: Remove 15px font usage in full profile.
Together, these larger font size declarations made the modal look
worse, in addition to just being inconsistent with the rest of the
app.
2021-06-11 16:03:39 -07:00
m-e-l-u-h-a-n b080417960 popovers: Add tabs for profile, groups and streams in user_info modal.
Fixes: #16233.

Co-authored-by: Abhirup Pal <abhiruppalmethodist@gmail.com>
2021-06-11 07:56:32 -07:00
Tim Abbott 99636c36a3 css: Remove inconsistent topic edit modal margin.
Similar elements in both the compose box and main message edit UI have
no margin in this location, and look better.
2021-05-09 19:47:27 -07:00
Tim Abbott 3e4a819722 css: Centralize topic edit modal CSS. 2021-05-09 19:47:08 -07:00
Anders Kaseorg 178736c8eb docs: Fix spelling errors caught by codespell.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-04-26 09:31:08 -07:00
Aman Agrawal b1f8041c31 giphy: Use simplebar to replace browser scrollbar. 2021-04-14 10:50:47 -07:00
Aman Agrawal 35bd44ed2a giphy: Add clear search button.
Make the input more square looking to match with our other
input boxes.
2021-04-14 10:50:47 -07:00
Aman Agrawal 84f7bb85f6 giphy: Make footer background black to match to with attribution.
Adjust border-radius to make edges smooth.
2021-04-14 10:50:47 -07:00
Aman Agrawal 5e83965e80 giphy: Use GIPHY web SDK to allow inserting GIFs in compose box.
We use GIPHY web SDK to create popover containing GIFs in a
grid format. Simply clicking on the GIFs will insert the GIF in the compose
box.

We add GIPHY logo to compose box action icons which opens the GIPHY
picker popover containing GIFs with "Powered by GIPHY"
attribution.
2021-04-05 15:04:49 -07: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 f8aea9aecb postcss_vars: Use underscore to follow better naming convention. 2021-01-25 14:49:32 -08:00
Aman Agrawal e404fea055 popovers: Use $md-max=767px for 769px breakpoint.
md == 768px so there si only 1px difference here which is not
noticeable here.
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
aryanshridhar c591141d7c popover: Fixed color-picker popover responsiveness.
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
2020-10-29 16:56:02 -07:00
sahil839 7525642507 popover: Show normal popover instead of extended profile one for bot owner.
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.
2020-09-22 15:42:53 -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
Vishnu Ks 7533796ea9 popover: Add an option to show user profile.
Fixes #8880
2018-04-23 16:56:24 -07:00
Shubham Dhama c995c1a36a popovers: Fix two click handler attached to (rightbar) user_popovers.
No need to have separate click handler for user_popovers and
message_info_popovers as the same user-id can be extracted similarly
from the target of both the click events.

Another refactor, `sender_info_popover` was confusing as it doesn't
fix into the context of rightbar user popovers so changed it to
`info_popover_actions` since that section of popovers contains popover
actions.
2018-03-01 08:00:42 -08:00
Shubham Dhama 25e78abf53 group popovers: Fix entire vertical scrollbar motion on overflow.
This fixes the motion of entire vertical scrollbar (along with
the sliding of bar) when we have many users in group.
2018-02-18 20:20:51 -08:00
Eric Eslinger 786bda674c popovers: Add a popover for group mentions.
This adds a click handler to `.user-group-mention` which works in a
fashion that is quite similar to `.user-mention`. It generates and
displays a popover.

The popover has a list of members, their online status (if they are
not bots) or their bot status if they are bots (it's not clear whether
ultimately bots should be able to be members of usergroups, but I'm
able to add one, so I thought it would be worth supporting).

The popover's `UL` element has max-height and overflow-y atttributes
so large groups will grow a scrollbar.

Fixes #8300.
2018-02-16 13:37:02 -08:00
Aditya Bansal 0f71a7ecca reminders: Add UI for setting up reminders for messages in the feed. 2018-01-19 11:33:11 -05:00
Brock Whittaker 20f3b0f599 popovers: Apply email overflow changes to ".message-info-popover".
This applies the same overflow changes to “.message-info-popover” by
imposing a max width on the popover (so it doesn’t increase in width
when it gets larger) and adding the tooltip on hover.
2017-12-13 14:20:18 -06:00
Brock Whittaker ca46a2152b popovers: Restyle border-bottom below avatar in user popovers.
This styles the border-bottom to be an opacity based solution to
work the same with the normal mode and better with dark mode.
2017-11-17 08:44:04 -08:00
Steve Howell f35b7b4c77 css: Convert colors to hsl() format.
This changes most of the app-related CSS files, but leaves
things like landing pages and bootstrap alone.
2017-11-13 12:43:43 -08:00
Brock Whittaker c2b7cd0f7e color-picker: Fix input height to display correct on FF.
This fixes the input to not be too short on FF and to have proper
padding on Chrome.

Fixes: #6361.
2017-10-11 12:59:28 -07:00
Brock Whittaker 2ed3c615de popovers: Fix padding to be more uniform.
The popovers for the message down chevron and left sidebar had
strange side padding and non-uniform padding between the top and
bottom. This changes them to all have the same padding as the
nav `#gear_menu`; none on the sides and 5px on the top and bottom.
2017-09-27 18:46:08 -07:00
Brock Whittaker be64c43cc5 emoji-popover: Add centered layout for mobile/responsive.
This adds a centered layout for mobile and responsive screens where the
emoji picker is guaranteed to be in the center of the screen, and the
rest of the screen darkens behind it.

Fixes: #6291.
2017-09-26 14:18:20 -07:00
Brock Whittaker 056418b54c user-profile: Break long emails into multiple lines.
Before the user profile bounding box width was not set so it
would overflow the 240px and there would be grey space next to
the avatar. Now the width is always maintained and long text
is cut into multiple lines.
2017-07-27 11:10:09 -07:00
Cory Lynch d04fbc0a53 popovers.css: Replace RGB colors with HSL colors. 2017-06-21 07:02:57 -04:00
hackerkid 648b2823bb Show user presence and last seen status in user popover. 2017-06-11 07:09:21 -05:00
Brock Whittaker f651c7fb18 user-profile: Add mobile-responsive styling.
This changes the styling of the user profile popup to be responsive
to mobile devices. In this case it is converted to a modal form using
flex to center it on devices with screen sizes under 768px in width.

Fixes #4669.
2017-05-10 16:49:42 -07:00
Brock Whittaker 1f8d9a46f0 Remove extra "Unsubscribe" on left-sidebar stream popover.
An extra "Unsubscribe" was left over from when it was a CSS :pseudo
content rather than text in the templates.
2017-04-11 16:14:55 -07:00
Aditya Bansal d56100693d profile-popover: Fix position to hide the pointed-to message border.
In this commit we just adjust the position of user profile popover
opened when we click upon buddy from buddy list to view user profile.
The new position ensures that the little blue border visible from back
due to pointed to message is completely hidden by the popover.
2017-04-07 17:34:57 -07:00
Aditya Bansal 5ff87892ee profile-popover: Fix extra padding in user-profile popovers.
In this commit we remove the extra padding appearing around the
user profile images. This can be only reproduced when opening
user profile from buddy list.
2017-04-07 17:34:57 -07:00
Rishi Gupta daed1fc2aa user_info_popover_content: Fix padding issues.
Removes 1px padding around edge of avatar added by bootstrap.
Removes column of whitespace to right of avatar.
2017-03-29 11:36:51 -07:00
Tim Abbott 5672618b82 css: Extract popovers.css. 2017-03-25 20:14:17 -07:00