Commit Graph

3516 Commits

Author SHA1 Message Date
Aman Agrawal 788bf8b32e compose: Fix overflowing `.enter_sends` text on `<375px` screens. 2021-12-02 15:11:15 -08:00
Aman Agrawal baa1b4ed1d compose: Fix angle-up icon overlapping with topic input field.
The previous calculations were based on just the cross icon.
Adjusted for the angle-up icon which is 16px in width.
2021-12-02 15:11:15 -08:00
Aman Agrawal 50f916443d compose: Fix alignment of help link. 2021-12-02 15:11:15 -08:00
Aman Agrawal a84869c078 compose: Use a ligther red for character limit exceeded text. 2021-12-02 15:11:15 -08:00
Aman Agrawal ffd9d18577 compose: Enclose hotkeys in `kbd` tag.
We change how `kdb` is displayed in dark-theme for
compose so that they don't take too much user attention
when composing.
2021-12-02 15:11:15 -08:00
Aman Agrawal 7610b33963 flatpickr: Hide bottom arrow in dark mode.
Previous change didn't hide it in dark mode since this css was
being overridden.
2021-12-02 15:11:15 -08:00
Aman Agrawal 4ed6b441c7 flatpickr: Improve look of `Confirm` button.
Change text from OK to Confirm.
Remove icon.
2021-12-02 15:11:15 -08:00
Aman Agrawal aaa7150b8a compose: Move overflowing buttons to a popover.
We don't hide popover on click for formatting buttons, emoji picker and time
picker.
Emoji and time picker popovers need a reference to be displayed,
hence we don't hide them.
Not hiding formatting buttons is based on past discussion.

The current instance of compose popover is stored locally
so that we can access it across different modules.

The basic approach for hiding / displaying a button is based on
width and is executed at `sm` breakpoint as per our
`css_variables.js`.
Used handlebars and `hide/show-sm` css class to make this
work. This avoids using too much JS to hide/display elements.
2021-12-02 15:11:15 -08:00
Aman Agrawal 065b905f87 compose: Slightly move send button upwards.
This may have got misaligned after my last minutes changes to
the compose refactor PR.
2021-12-02 15:11:15 -08:00
Aman Agrawal 63c3f74056 compose: Rearrange compose bottom to separate out enter sends.
* We move enter sends into its own row separate from compose
control buttons and send button. This makes sure compose control
icons don't wrap on narrow widths.

* Move char limit indicator parallel to enter sends button.

* Left align character exceeded count at bottom.
2021-12-02 15:11:15 -08:00
Aman Agrawal a64f6edc2a compose: Use loading spinner as loading indicator. 2021-12-02 15:11:15 -08:00
Aman Agrawal 25ee6a795e compose: Never hide send button.
`Press Enter to send` used to hide `Send` button, we remove that
behaviour.

We show the current state of `Enter` hotkey action via text below
`Send` button which can toggle behaviour on click.
2021-12-02 15:11:15 -08:00
Sahil Batra fc8db93f36 settings: Disable spectator access setting when server setting is False.
We disable the enable_spectator_access setting when the server level
setting, WEB_PUBLIC_STREAMS_ENABLED setting is set to False.

This commit adds a new argument is_disabled to settings_checkbox which
is used to disable the checkbox and set the color of label accordingly.

This commit also adds a help-link besides the label pointing to
"/help/web-public-streams" which is shown irrespective of the
setting being enabled or disabled.

Fixes #20417.
2021-12-02 14:33:51 -08:00
Sahil Batra eb50641af3 settings: Remove is_nested parameter and disableable class.
The is_nested paramter in settings_checkbox.hbs used to
set disableable class in the div element is not used
anywhere and thus we can remove both the is_nested parameter
and disableable class.

The is_nested paramater was first added in 3e0b420423 and
disableable class was added in 706f422c3.

The use of is_nested parameter was removed in a501abf3a1.
2021-12-02 14:33:51 -08:00
Ganesh Pawar 19c4a63d51 move_topic_modal: Use `dialog_error` to display error.
Fixes #20210
2021-12-02 14:02:27 -08:00
Arch0125 7c4382bb06 dropdown_list_widget: Replaced pencil icon with chevron-down.
This is the standard way to indicate that something is a dropdown
menu, and in particular avoids confusion some folks had with the
pencil icon.

Tweaked by tabbott to unify CSS with all of our other dropdown list
widget instances.

Fixes #19888.
2021-12-01 13:35:15 -08:00
Sahil Batra b23df8dc9b popovers: Add "Manage this user" option to user info popover.
This commit adds "Manage this user" option in the user-info popover
which simply opens the administrative user-info modal.

We show a spinner on submit button in this case as modal
is not closed immediately and thus we need some indicator
to show that the task is in progress. There is no spinner
on submit button in the modal opened from "Users" section
of organization settings.

Error handling for this case is different than when the
modal is opened from "Users" section of organization
settings because there is no overlay in the background
of modal in this case.

In this case, we show error inside the modal and do not
close it and in case the change is completed successfully
we just close the modal without showing any message.

Fixes part of #18944.
2021-12-01 12:13:06 -08:00
Ganesh Pawar f760850993 login_to_access_modal: Migrate modal to Micromodal. 2021-11-30 14:39:46 -08:00
Aman Agrawal 8a0c3aeadd landing_page: Force white background colour.
A page can have either `white` (from `landing_page.css`) or `gray`
(from `portico.css`) background color depending on
webpack chunking order.  So, this fixes that bug.
2021-11-30 13:08:17 -08:00
Manan Rathi b40bd21691 data_exports: Fix the heading cutoff in Settings.
Removed the unnecessary margin from the admin_exports_table
class.

Fixes #20311
2021-11-28 07:15:28 -08:00
Sahil Batra 99acb9a876 css: Replace "night-mode-block" with "dark-theme-block". 2021-11-26 22:03:29 -08:00
Sahil Batra 2feb1443df css: Replace "dark mode" with "dark theme" in comments. 2021-11-26 22:03:29 -08:00
Sahil Batra dcd6da0351 misc: Replace "night" and "day" with "dark" and "light".
This commit replaces "night" and "day" used in the context
of themes with "dark" and "light".
2021-11-26 22:03:29 -08:00
Sahil Batra 29dcbbb548 frontend: Rename "night-mode" class to "dark-theme". 2021-11-26 22:03:29 -08:00
Sahil Batra 88e21d0387 misc: Replace "night mode" with "dark theme" in comments. 2021-11-26 22:03:29 -08:00
YashRE42 775018a818 stream_privacy_modal: Fix vertical alignment of radio inputs.
Fixes: #20347.
2021-11-24 10:39:23 -08:00
Ganesh Pawar a7badd726f api_key_modal: Migrate modal to Micromodal. 2021-11-23 15:43:38 -08:00
Ganesh Pawar f5fbf5f0e0 change_password: Migrate modal to dialog_widget. 2021-11-23 15:41:54 -08:00
Ganesh Pawar 3b5b98c8f9 modal: Set margin-bottom to 10px.
Bootstrap sets the margin-bottom to 20px for alert classes, which
is too much for our needs.
2021-11-23 15:41:54 -08:00
Tim Abbott 5ac2241cf9 stream settings: Remove further differences from settings.css.
This fixes various visual glitches that resulted from reusing
components and overriding key elements of them.  The specific logical
changes are as follows:

* Delete custom checkbox positioning for stream settings; we now just
  use the common app_components.css code.
* Remove custom subscription-control-label styling; just use settings
  defaults.
* Copy the h3/h4 styling from settings.css. Ideally we'll deduplicate
  this in further cleanup.
* Add the inline property to stream_settings_checkbox elements, to
  reduce variable with settings_checkbox.hbs.
* Place every individual input inside an input-group, so that we can
  use the standard settings.css styling.
2021-11-23 14:48:17 -08:00
YashRE42 53a5942ab3 stream_types: Remove new-style class in stream_types.hbs.
Previously, the stream_edit modal relied on the new-style class to set
the margin-bottom value for stream-message-retention-days-input to 0,
in order to override the value set by bootstrap. The class new-style
is unhelpful because of its generic name, and in addition, time has /
will eroded away the significance of its name.

Hence, this commit adds the necessary rules to subscriptions.css and
removes the new-style class.

In order to make this change, this commit adds a block to
`subscriptions.css` with the selector `#stream_privacy_modal
.stream-message-retention-days-input input[type="text"]` one important
rule that this adds is `height: inherit;`. Adding this rule solves a
minor UI glitch where selecting "retain N days after posting" would
cause the save and cancel buttons to jump down by a pixel or so.

Fixes: #20222.
2021-11-23 14:11:35 -08:00
YashRE42 9851ed82a7 stream_settings: Remove unused rule referencing .modal-body .grey-box.
In d62e44fcba we migrate to using
micromodal for this pop up (via dialog_widget), as a result the
.modal-body style no longer applied as that class is not used.

In 55adf88e667da02284f0a6ffb6bcfdf73b5427cb we remove the grey-box
class from the stream_types template, hence even if the above wasn't
true, this rule would still not apply.

This commit thus removes this rule.
2021-11-23 14:10:49 -08:00
YashRE42 7151147907 stream_settings: Replace ul, li tags with div tags for checkboxes.
Due to reasons similar to 5de115a964, we
switch from using `ul`/`li`s to using `div`s here.
2021-11-23 14:10:49 -08:00
YashRE42 aaef190a36 stream_settings: Remove grey-box from personal tab & stream create.
Previously, the presence of the styles applied by grey-box caused a
visual disparity between the stream settings overlay and the
personal/organization settings overlay, hence, this commit removes
this class.
2021-11-23 14:10:49 -08:00
YashRE42 afa62609bc stream_types: Remove grey-box class.
Previously, the presence of the styles applied by grey-box caused a
visual disparity between this modal and similar settings in our
organisation settings view, hence, this commit removes this class.
2021-11-23 14:10:48 -08:00
Aman Agrawal bf93ae1644 ui: Align bottom components in the same horizontal line. 2021-11-22 18:44:32 -08:00
Aman Agrawal 061e274716 compose: Add dividers.
These improves the visual organization of the compose controls.

This is consistent with the divider we have for the navbar.
2021-11-22 18:44:32 -08:00
Aman Agrawal 2af933678c compose: Refactor bottom part of compose box.
* We use flexbox instead of `position: relative` to align elements.
* Increase clickable area of icons using more padding.
* Increase space between elements.
* Fix mobile compose box icon alignment.
2021-11-22 18:29:45 -08:00
Julia Bichler 32f206e1e5 popovers: Add sidebar menu to delete all drafts.
This provides a convenient interface to hide all drafts.

Fixes #19360.

However, we may want to continue to implement a button in the drafts
overlay as well for doing this operation.
2021-11-22 17:01:47 -08:00
Aman Agrawal d9338a68d1 compose: Show globe icon for web public streams.
Fixes #20285.
2021-11-22 15:31:22 -08:00
Aman Agrawal 4e5e1a2542 recipient_row: Generalize class name for icon in recipient_row. 2021-11-22 15:26:21 -08:00
Aman Agrawal a39d9ee4fd portico: Center align moving label text in input. 2021-11-22 15:02:00 -08:00
Aman Agrawal ecb966c850 landing_page: Explicitly define transparent for gradients.
Safari interprets transparent as rgba(255, 255, 255, 0)
`transparent black` instead of rgba(0, 0, 0, 0).

We explicitly define transparent to help safari understand the
gradients.

This fixes the bug where our gradients look black on safari
on narrow screens.
2021-11-18 17:35:09 -08:00
Aman Agrawal fce9b2dbb4 features: Only change gradient height for feature page.
This gradient works well to display white colored text
on top of it on other pages. So, we only need this change on
features page.
2021-11-18 17:35:09 -08:00
Sahil Batra 291f8e570d styles: Rename night_mode.css to dark_theme.css.
Fixes part of #20228.
2021-11-18 16:55:35 -08:00
Ganesh Pawar e7b9173ef5 default_language: Migrate modal to dialog_widget. 2021-11-16 17:02:29 -08:00
YashRE42 3a06025e5a stream_settings_overlay: Fix padding for right section headings.
At some point we must have made a change that caused the "create
stream" and "#stream name" headings to take up more vertical space,
resulting in the dividing line for the headings of the right side of
the subscription overlay to be miss-aligned with the same for the left
side. For the "create stream" panel, it also caused the scroll bar and
some content to be visible through the partially transparent bottom
section in night mode.

In this commit we reduce the padding for those headings so that things
don't look broken anymore.
2021-11-16 16:33:33 -08:00
Ganesh Pawar 6262c88e00 modal: Grey out the submit button when disabled. 2021-11-15 10:38:57 -08:00
Ganesh Pawar ca4d9b0fd6 modal: Mark submit button CSS `color` property as important.
This is necessary to override the global `color` property defined
for disabled buttons in night mode.
2021-11-15 10:38:57 -08:00
Aman Agrawal 5f4595d7b6 landing_page: Avoid gradient overflowing under content.
Gradient under content makes links which are of similar color
hard to see.
2021-11-14 18:56:34 -08:00