Commit Graph

3284 Commits

Author SHA1 Message Date
Ganesh Pawar 415159c5b9 user_status: Fix styling of modal. 2021-06-29 11:44:47 -07:00
Tim Abbott 7010777d6c compose: Remove unnecessary 10x margin.
This margin was ignored and will become a liability with future
changes to the compose box HTML.
2021-06-29 11:28:49 -07:00
sahil839 1cb72c77fe settings_users: Rename user-name-form to edit-user-form.
This commit renames user-name-form to edit-user-form as
the modal for which this id is used, is used to edit all
the user properties, not only name.
2021-06-28 22:11:24 -07:00
Tim Abbott e76fd775ba settings: Remove unnecessary ancient table styling.
This effectively reverts d96d4e30ab,
which is a bug that hasn't been present for other reasons due to past
design changes.

It fixes a bug where the "Search operators" page had missing margin
between the table and post-table content..
2021-06-28 09:14:09 -07:00
Hashir Sarwar 130f1d7153 input_pill: Customize pills for deactivated users.
This modifies the appearance of pills for deactivated users
in the following ways:

* Adds `(deactivated)` with the deactivated user's name.
* Add a tooltip to the deactivated user's pill stating
that one can't send a message to this user.
* Color the deactivated user's pill reddish.

This now also adds tests for user_pills.

Part of #13766.

Co-authored-by: Signior-X <b19188@students.iitmandi.ac.in>
2021-06-25 18:06:42 -07:00
Ganesh Pawar 166bfa4cf8 user_status: Migrate from overlay to modal.
This also migrates from loading the modal dynamically rather than
statically once at page initialization.

With styling changes by tabbott to preserve the original look of the
UI.

Fixes #18278.
2021-06-25 09:43:55 -07:00
sahil839 0b8b7c4441 settings: Use edit_fields_modal framework for user-info edit modal.
This commit modifies the user-info edit modal to use newly added
edit_fields_modal framework.

Fixes a part of #18417.
2021-06-24 16:55:23 -07:00
sahil839 b04647f219 settings: Use edit_fields_modal framework for linkifier-edit modal.
This commit modifies the linkifier-edit modal to use newly added
edit_fields_modal framework.

One important change is that we remove the "edit-linkifier-status"
element as the corresponding "edit-fields-modal-status" element
is added in edit_fields_modal.hbs and we also modify the css
accordingly. This "edit-fields-modal-status" is used only for
this modal and remains empty for others, so this change does not
cause problems with other modals.

There is another element which uses "edit-linkifier-status" as a
class, but the css we defined was for "edit-linkifier-status" as
id, so the css change is also safe.
2021-06-24 16:55:23 -07:00
Dinesh be3b637603 message_view: Make timestamp a permalink to message.
The css edits are to override the `a` tag's default color
with our default values from body, body.night-mode.

Fixes part of #18699.
2021-06-24 16:37:32 -07:00
sahil839 a14d649444 styles: Fix line-height of delete button of image-upload-widget.
This commit fixes the bug with the delete button of both profile
picture and realm-logo buttons. The button was shifted downwards
and was caused due to line height change in 5d64c21c38.

Found the correct value of 20px by checking the line-height in
one test organization on zulipchat.com where the button position
looks correct.
2021-06-24 14:36:58 -07:00
sahil839 98bb0f7b28 settings: Show spinner inside the confirm button for confirm_dialog.
We show a spinner inside the button instead of hiding the button
and then showing the spinner in the bottom area. We also disable
the button to avoid repetitive clicking by user.
2021-06-24 09:48:42 -07:00
m-e-l-u-h-a-n a57aa07a6d css: Extract modal related css rules.
Co-authored-by: Pragati Agrawal <pragati22066@gmail.com>
2021-06-23 17:50:55 -07:00
m-e-l-u-h-a-n 152f979e3b streams: Remove dead CSS rule from subscriptions.css.
Co-authored-by: Pragati Agrawal <pragati22066@gmail.com>
2021-06-23 17:45:02 -07:00
m-e-l-u-h-a-n 41dc123cf1 streams: Reorder buttons in button-group to reflect the visual order.
Co-authored-by: Pragati Agrawal <pragati22066@gmail.com>
2021-06-23 17:45:02 -07:00
m-e-l-u-h-a-n 5de115a964 streams: Use consistent settings HTML structure in stream types modal.
We had our input elements for stream settings inside li tags
and their alignment was managed using CSS. We move away from
this HTML structure to have inputs and labels inside divs for
two reasons. First is that if we want to later refactor the HTML
to have some different design, then having them inside `ul`
requires complex changes to CSS and eventually we would have
to move away from using `li`s for the part that is changed to
have a different design. Second `li`s are generally not used
to organize input elements.

Above is an explanation of why this change is a preparatory
commit for shifting to have a tabbed design in the stream edit page.

So following changes are done to have a more consistent
HTML structure in stream types modal:

* Added modal-body and removed the non-standard
usage of the unordered list for settings header and inputs.

* Updated relevant CSS rules to have the same design during refactor.

Co-authored-by: Pragati Agrawal <pragati22066@gmail.com>
2021-06-23 17:45:02 -07:00
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
Anders Kaseorg 3691805253 styles: Remove invisible .stream_label::before rules.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-06-23 09:10:50 -07:00
Anders Kaseorg cbec20cfdf message_body: Fix -3px alignment kludge using whitespace control.
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
Aman Agrawal b99a720012 left_sidebar: Hide "Add streams" widget for spectators. 2021-06-16 10:16:40 -07:00
Aman Agrawal 99cd837421 css: Introduce class which will hide elements for spectators.
`.hidden-for-spectators` class can now be used to hide elements
which should not be visible to spectators.
2021-06-16 10:16:04 -07:00
Signior-X c1833b74f0 login: Remove browser show password in IE, edge.
The Microsoft browsers such as IE and Edge has their own
show password that is a bit bugy and also conflicts with
the show password in Zulip that was added in #17305.
This fixes the issue by making the display none for the
ms-reveal that comes in the input.

More details can be found at
https://chat.zulip.org/#narrow/stream/101-design/topic/Show.20password/near/1173890
2021-06-14 16:35:25 -07:00
Tim Abbott 8181a2fe57 css: Remove unnecessary font sizes in stream settings. 2021-06-11 17:15:46 -07:00
Tim Abbott 95efadaf86 css: Use default font size for buttons and dropdowns. 2021-06-11 17:15:45 -07:00
Tim Abbott 7291f2c1ca css: Avoid hardcoding font size in input pills.
This also fixes horizontal alignment issues when scaling.
2021-06-11 16:59:35 -07:00
Tim Abbott 6a7d4d96c5 settings: Fix size of dropdown_list_widget elements.
We remove the small CSS class, which set the font size as something
tiny, and also restructure it with a fixed height and more natural
markup for the reset link.
2021-06-11 16:58:52 -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
Tim Abbott 64f9721ce5 css: Use default font size for user search icon.
This icon always looked really small, so it's probably visually better
this way, and this lets us remove an unnecessary font-size override.
2021-06-11 16:03:39 -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 8efa8e378d css: Simplify preview_message_area CSS. 2021-06-11 16:03:39 -07:00
Tim Abbott 9a5b0b4f0a css: Remove useless undo_markdown_preview CSS.
These properties had no effect, since the compose_control_button CSS
has the same effect.
2021-06-11 16:03:39 -07:00
Tim Abbott 147e243113 css: Use default font for left sidebar private messages.
Previously, this used a slightly smaller font size than the default.
Given that it looks visually fine to use the default font size, it's
better to remove this inconsistency.

It's also worth noting that we plan to move this component to be
parallel to STREAMS in a way that is likely to also want the new font
size, so this is a step towards that goal.
2021-06-11 16:02:56 -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
Tim Abbott 1298b4a0d2 css: Remove font size hardcoding of save/discard button. 2021-06-11 15:08:14 -07:00
Tim Abbott ff93176743 css: Remove special font size for settings errors.
These errors look fine with our normal font size, and it's one less
thing to potentially test.
2021-06-11 15:08:14 -07:00
Tim Abbott e77bb84988 css: Remove invalid widgets CSS.
This green font block seems to apply to a TODO widget that is also a
poll, which doesn't exist.
2021-06-11 15:08:14 -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
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
Aman Agrawal 2f46b80005 left_sidebar: Use padding instead of margin around clickable icons.
For create stream icon specially, this is useful to allow user having
some extra space around the icon to click.

This fixes the bug that you can have the tooltip of "Add streams" and
by hovering at the bottom of `+` icon but clicking on it shows stream
search.
2021-06-10 09:01:43 -07:00
aryanshridhar 418c40b2ea settings_users: Refactor user_deactivation modal to confirm_dialog module.
The "email" span in the old modal was not used for styling, just to
support updating the field visually.
2021-06-08 17:57:27 -07:00
m-e-l-u-h-a-n 3f0ed46fa2 left-sidebar: Add topic filter input in zoomed topic view.
Fixes: #18505.
2021-06-08 15:09:26 -07:00
Aman Agrawal e6f38f9bc2 css: Remove bad color change of create stream button.
This color change make the button less visible on hover which
doesn't makes sense.
2021-06-08 14:55:48 -07:00
Aman Agrawal 4b4fdad0e3 left_sidebar: Replace cog icon with plus icon.
We add a popover on click which allows user to create or browse
streams too.

Reason for doing so:

At present, it is hard to discover how to join streams
and create new streams. In particular:

Users have a hard time finding the gear in the STREAMS
header in the left sidebar and realizing that it's relevant for them.
Even once a user is in the STREAMS menu, the Create
stream button is hard to spot.

Fixes #18694.
2021-06-08 14:55:48 -07:00
Wesley Aptekar-Cassels 5c4db6ec41 compose: Increase opacity of icons.
The icons at the bottom were previously too low-contrast, so bump the
opacity up to 0.7 from 0.4.
2021-06-07 17:53:44 -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
Aman Agrawal ac360b3a6b left_sidebar: Increase font size of STREAM header icons.
Font size increased from 13px to 14px to allow users to click easily;
this was already the default, so we can just delete the line.
2021-06-07 14:14:02 -07:00
Aman Agrawal 7e814f4877 tippyjs: Add light theme for tippyjs.
This is important for showing popovers/menus with a light background
in Zulip's light theme.

We extend light-theme to show dark colours in night theme.
2021-06-07 14:10:11 -07:00