Commit Graph

54 Commits

Author SHA1 Message Date
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
Gaurav Pandey fa235e60ff login: Add show password feature to login page.
The show password feature is a functionality to
toggle the visibility of the password fields in forms
so that one can check if they have entered the correct
password or not. We implement this using an eye icon
toggling which converts input field type from password
to text and vice-versa.
Fixes part of #17301.
2021-04-23 15:01:37 -07:00
Aman Agrawal 18907eac33 tippy: Set default font size to 12px.
The default font size for tippy before was 14px and it appears large
for a tooltip compared to rest of the content.
2021-04-07 01:16:29 -07:00
Anders Kaseorg 6a877890b8 Revert "css: Fix webapp alert styling incorrectly applying to portico."
This reverts commit 85b3157b47.

This broke the × button on Blueslip alert boxes, because @extend does
not work across different PostCSS compilation units.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-04-01 15:25:23 -07:00
Tim Abbott 85b3157b47 css: Fix webapp alert styling incorrectly applying to portico.
In a00f5dd90e, we needed to move the
`alert-box` styles from alerts.css to be visible in portico pages.
However, when doing so, we incorrectly moved all of alerts.css, which
also has styles for `alert` and` alert-error` designed to make it
convenient to include hidden elements for potential errors in the
webapp settings UIs directly in the HTML template (and then use
show/hide to manage them).

We fix this by moving just the alert-box scope to the common
components.css module, which is designed as the place for styles
shared between the webapp and portico pages.

This fixes an issue where the error messages for wrong password and
the like were invisible :(.
2021-03-31 10:06:40 -07:00
Aman Agrawal ff5d00890c new-style-checkbox: Set to cursor to not-allowed when disabled. 2020-10-01 17:45:11 -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
Gooca 2363c9955a ui scrollbar: Update perfect-scrollbar to 1.3.0.
Update perfect-scrollbar to fix stutter space-scrolling in #8544. Also
reworked deprecated `element.perfectScrollbar` to `new
PerfectScrollbar(element)`.  Lastly, updated provision version and
changed node module path to new path.

This also refactors perfect-scrollbar in help.js to work with updated
version of perfect-scrollbar. Because the update also changed
perfect-scrollbar's css selectors for all scrollbars in zulip, we
update those too.

Fixes #8544.
2018-03-20 21:59:11 -07: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
Xavier Cooney 6dbc7c5656 org-settings: Fix pointers near disabled checkboxes.
Fixes #7768
2018-01-12 07:26:38 -05:00
civilnewsnetwork 76511449f1 Added darken to perfect-scrollbar on scroll 2017-12-13 14:14:59 -06:00
Cynthia Lin eddf3a722a components: Change cursor to pointer for checkbox labels.
Lets users know that they can toggle the checkbox by clicking the corresponding label.
2017-12-07 14:37:23 -08:00
Brock Whittaker 83f329b41a components: Change checkboxes from grey to translucent.
This works better with color background and looks the same on white.
2017-11-17 10:30:23 -08:00
Brock Whittaker 4f088292ee popovers: Hide user email and PM feature for deactivated users.
This hides the emails of deactivated users from the popovers along
with the link to send a PM to them.
2017-10-18 00:06:12 -07:00
Brock Whittaker 3379be9b46 components: Switch checkboxes to be natively grayscale.
This switches the checkboxes to be natively grayscale by
referencing the `checkbox.png` file rather than `checkbox-gree.png`
which means that we no longer need to apply the -webkit-filter
setting for grayscale.
2017-10-11 13:15:44 -07:00
Brock Whittaker 835b6c7059 components: Make checkboxes darker.
This makes the standard checkboxes 7% darker and makes the disabled
ones about 12% darker + 7% darker than they were before, to
increase visibility.

Fixes: #6331.
2017-10-11 13:15:44 -07:00
Brock Whittaker 897b33e79d components: De-duplicate `.no-underline` class.
This de-duplicates occurances of the `.no-underline` class by
removing it from "portico.css" and ensuring compaitbility by adding
support for the standard and :hover cases.
2017-10-11 12:24:44 -07:00
Brock Whittaker df9092cf42 components: Split out "app_components.css" for shared components.
This new “app_components.css” is for shared components between the
internal app and the portico pages.
2017-10-11 12:24:44 -07:00
Brock Whittaker 05ae3f643d Make `.grey-box` an unscoped, generic class.
This now makes it accessible outside of the subscriptions overlay.
2017-09-15 04:57:03 -07:00
Cynthia Lin 0686567e46 settings UI: Make disabled checkboxes darker.
Fixes part of #6331.
2017-08-28 21:14:26 -07:00
Brock Whittaker 624f1bb151 Restyle checkboxes to be less visually abrasive.
This restyles the checkboxes to be more subtle in their rest and
unchecked state so they don't create too much visual noise on the
page.
2017-08-24 14:19:49 -07:00
Rafid Aslam 5f7e23e8ef frontend: Add perfectScrollbars to Settings/Organization overlay.
Use perfectScrollbar on settings sidebar, since the default scrollbar
makes settings menu break when not enough vertical space available.

Add perfectScrollbar to main settings section, and reset the scrollbar
position when switching between tabs.

Also delete the z-index on `.settings-list` since it makes the
perfectScrollbar covered.

Fixes #5216.
2017-08-16 08:23:30 -07:00
Brock Whittaker e5e73f364b settings: Change [Change] button styles. 2017-07-17 16:18:46 -07:00
Cory Lynch d1d1906460 components.css: Replace RGB colors with HSL colors. 2017-06-21 07:02:57 -04:00
Brock Whittaker 5606435a90 components: Make button component styles sensible.
This removes the old base button style which was a blue button and
kills the unnecessary .white class which was essentially just acting as
the new button base.

This then removes all references throughout the settings/subscriptions
pages to those button styles.

This also fixes the strange button styles that changed the :hover and
:active opacity to 0.05 which led to unpredictable results on various
backgrounds.
2017-06-08 17:09:31 -07:00
Brock Whittaker b00f7f09bc components: Darken checkbox default color.
This darkens the default checkbox color to be more contrasty as to not
look like they are disabled.
2017-05-17 11:54:55 -07:00
Tim Abbott 2007144c23 css: Fix arrangement of streams in new user invitations.
Previously, they were line-wrapped in an ugly fashion.
2017-05-15 20:43:24 -07:00
Cynthia Lin 1bea4da0f4 org settings: Fix minor styling inconsistencies.
Fixes #4789.
2017-05-15 11:35:58 -07:00
Brock Whittaker 3ff55034fe admin: Restyle administration checkboxes to match new style.
This restyles the administration checkboxes to look similar to those
that are currently present in the settings section.
2017-05-01 16:01:36 -07:00
digi0ps 8fb9d2bff3 settings: Redesign settings/administration panel buttons.
This redesigns all the ugly bold-colored buttons in the settings and
administration pages.
2017-04-25 16:33:59 -07:00
Raghav Jajodia 6be6aec825 components: Add new css to text input fields. 2017-04-17 11:12:01 -07:00
Raghav Jajodia 99f8750684 Refactor code associated with clear_search button.
Transfer css from right-sidebar.css to components.css to make it reusable.
The 'margin-bottom' property is removed from 'input-append' class as
it does not affect the styling of the element.
2017-04-17 11:12:01 -07:00
Yago González f62b8ea080 css: Properly wrap text inside tabs.
The tabs can have text inside them that is wider than 90px, especially
in some unexpected cases (e.g. a translation longer than the original
English string).

This type of tabs can be seen in the following popover menus:

 - Stream subscriptions
 - Help (with hotkeys, formatting info, etc.)
 - Settings

Now text wider than the tab is ellipsized so it doesn't cause any
problem with the rest of the layout, except in the help popover (where
it gets wrapped).
2017-04-14 14:15:37 -07:00
Brock Whittaker c324cdf6cb Add component overlay classes.
These are the classes that should apply to all overlays and replace
their current functions.
2017-03-15 12:17:27 -07:00
Brock Whittaker b8f2685b18 Change bots actions to sidebar.
This changes the bot actions to a sidebar that resides in the settings
overlay.
2017-02-28 20:02:23 -08:00
Brock Whittaker 9ee5ac6d23 Redesign compose box.
This redesigns it to closer to the new implementation design.
2017-02-24 15:07:33 -08:00
Brock Whittaker 0f9a5108fc settings: Change admin pages to have readonly view for non-admins.
This changes the layout of administration for non-administrators such
that they can view organization settings and emoji settings and
displays everything as readonly unless they have the capability to edit.

For now, we just enabled this for the emoji settings and organization
settings features.
2017-02-23 14:20:31 -08:00
brockwhittaker c70de3ca83 Refactor components.css toggle to include more than two tabs.
This allows for the toggle component to have more than two option tabs.
2017-02-10 14:43:18 -08:00
Tim Abbott 7a76f3dcc8 settings: Redesign the account settings template.
This is technically part of the settings page redesign in the next
commit, but it's probably useful to keep separate, since it touches
totally different code.
2017-02-09 23:33:28 -08:00
Brock Whittaker 214b011bb5 Add subscribe button inside subscription settings.
This adds a subscribe/unsubscribe button inside the subscription
settings container for a stream right next to the stream name.
2017-01-26 21:02:57 -08:00
Brock Whittaker 36319ca501 Give the #home entry in the gear menu an invisibility cloak.
Previously, this would create a weird blue banner across the top of
the gear menu.

We can't remove it, since it’s required for the gear menu navigation.

Description edited by tabbott.
2016-12-15 18:13:33 -08:00
Brock Whittaker 1886f0a015 redesign: Convert subscriptions page to overlay.
This is a major change to the /#subscriptions page, converting it to
by a side-by-side list of streams and their settings in an overlay.
There are no new features added/removed, but it's a huge changeset,
because it replaces the old navigation logic and moves the stream
creation modal to appear in the right side of this overlay.
2016-12-09 11:08:08 -08:00
Brock Whittaker 9823e4de33 components: Change label.checkbox style.
Change the label.checkbox style to be grey instead of green which I
think blends with the current aesthetic more.
2016-12-08 11:49:45 -08:00
Tim Abbott d184288e00 css: Add box-shadow and bg-white components. 2016-12-02 13:03:43 -08:00
Tim Abbott 6e86515b15 css: Move display-none and inline-block to components.css. 2016-12-02 13:03:43 -08:00
Tim Abbott a7681c3c2f css: Move .light to components.css. 2016-12-02 13:03:43 -08:00
Brock Whittaker 7fd15984fc components: Add a new settings page checkbox.
This allows us to style checkboxes to be transparent boxes with green
borders.
2016-12-02 12:06:49 -08:00
Tim Abbott 368b585980 subs: Redesign the rows of the #subscriptions table. 2016-11-03 17:33:33 -07:00
Brock Whittaker 2bf2468ffe css: Namespace buttons in components.css.
This namespaces components.css to not conflict with the existing CSS of
the rest of the site.
2016-10-28 14:14:52 -07:00