Commit Graph

1648 Commits

Author SHA1 Message Date
Marco Burstein fa95ba9812 style: Fix the stream and user list buttons on mobile in night mode.
These buttons are displayed with a lighter background than other
buttons. Update their borders and background colors (along with the
border on the search box) so that they match the night theme.

Fix #10301.
2018-08-21 12:42:06 -07:00
Yashashvi Dave 9812b81a1e user pills: Rename class `notmem` to `not-editable` for generalization. 2018-08-21 11:50:01 -07:00
Yashashvi Dave 150ea61271 custom profile field: Improve style of user pills in user type field.
Improve style of user pills in user-type-custom-field on
account settings page.
2018-08-21 11:42:59 -07:00
Yashashvi Dave 03f5422ce8 custom profile field: Minor tweaks in field-table in admin settings.
This commit add minor changes in profile field table in
admin settings:
 - Hide table header if there is no field
 - Fix width of table column
2018-08-21 11:42:59 -07:00
Yashashvi Dave 66c2b6d2a6 custom profile field: Remove unnecessary table header from edit form.
Remove unnecessary table header in edit-choice-field form.
2018-08-21 11:42:58 -07:00
Max Nussenbaum eaefa31969 portico: Fix mis-sized bullets.
This fixes the mis-sized text in the bulleted lists on /for/
working-groups-and-communities (and some other pages), by ensuring
p tags inside li tags don't get font-size styling applied to them
twice.
2018-08-21 11:34:39 -07:00
Akash Nimare dab75e4990 help: Fix styling of emoticons on help pages. 2018-08-17 11:37:29 -07:00
Akash Nimare 321b705591 left-sidebar: Add max-height to private message container.
This fixes a UI bug where if a user had a lot of recent private
message threads, they'd take over the entire left sidebar.

This was caused by not setting the max height of users list in private
message container.

Fixes: #5384.
2018-08-14 10:18:34 -07:00
Cynthia Lin 452389df0d night mode: Fix coloring of message edit info tooltip. 2018-08-13 16:17:15 -07:00
Cynthia Lin f3fb616d17 night mode: Improve styling of user groups in night mode. 2018-08-13 16:17:15 -07:00
Cynthia Lin 300c4c496f user groups: Display error on user group name edit failure.
Fixes #10234.
2018-08-13 16:13:49 -07:00
Cynthia Lin b63efb4f5d settings: Remove duplicate color property for alert notifications. 2018-08-13 16:13:49 -07:00
Cynthia Lin 736388b4df user groups: Improve styling of user groups in admin view. 2018-08-13 16:13:49 -07:00
Akash Nimare ee1f87494d portico: Remove unused CSS from why-zulip page. 2018-08-13 13:35:17 -07:00
Shubham Padia 3f019cafb2 compose: Improve error handling when subscribing other users to a stream.
Instead of displaying a fixed error message inside the yellow bar itself,
now the yellow bar disappears on error and a red compose_error is shown.
The error message is the one returned from the server.
2018-08-13 10:18:35 -07:00
Max Nussenbaum 18449c7c57 upgrade: Fix horizontal centering on annual/monthly buttons.
This fixes the annual/monthly selection buttons on the upgrade
page so that the text within them is properly centered.
2018-08-10 22:48:10 -07:00
Max Nussenbaum e0bd719f5c upgrade: Fix styling issue on Add Card button.
This fixes the active state of the Add Card button, which previously
showed a miscolored blue background on click.
2018-08-10 22:48:10 -07:00
Shubham Padia 165636e0c4 compose: Don't close compose box on clicking bottom right keyboard shortcut.
Fixes #9803.
The compose box closes on any click in the document outside the compose
box except for an element with an anchor tag or in its parents.
This commit adds an anchor tag as parent of the keyboard shortcuts
icon.
2018-08-09 17:51:40 -07:00
Yashashvi Dave e4bd72ea44 custom profile field: Replace choice-order input with drag-drop rows.
Currently, admin user has to add order of custom-field-choice in
input box to create and edit choice-type custom field.
Remove this input boxes and add drag-drop list of custom-field-choices
using Sortable.js.

Fixes #10129
2018-08-08 11:31:15 -07:00
Cynthia Lin d37a7dd9a7 popovers: Recolor user profile avatar border to fit in night mode. 2018-08-08 11:29:51 -07:00
Cynthia Lin 16518aaa34 night-mode: Change coloring of disabled items to fit night mode. 2018-08-08 11:29:49 -07:00
Cynthia Lin 89dbfc2926 night-mode: Fix stream creation loading indicator background color. 2018-08-08 11:29:49 -07:00
Cynthia Lin ecbc58c586 settings: Fix color styling for nested inputs to work in night mode. 2018-08-08 11:29:48 -07:00
Cynthia Lin a001e8d6ec night-mode: Fix color of clear search button for filter inputs. 2018-08-08 11:29:45 -07:00
Cynthia Lin d46ad47bd2 night-mode: Fix broken selector for legacy searchbox styling. 2018-08-08 11:29:36 -07:00
Marco Burstein 5a160c66b7 night-mode: Add styles for disabled buttons.
Also create the similar styles for the hovered state.
2018-08-07 10:19:44 -07:00
Priyank Patel 97d93ec8cb group pms: Fix unread count not on the same line of text.
Fixes #10199.
The issue was observed on Chrome v68 while it was not reproduced
on Chrome v64.
2018-08-05 16:04:07 -07:00
Abhilash Verma 8826ea1eaf settings_emoji: Reduce size to 20px in custom emoji list. 2018-08-04 09:40:52 -07:00
Yashashvi Dave aa14d24618 settings: Fix color of icons in custom profile settings. 2018-08-02 17:27:28 -07:00
Tim Abbott 97711ce083 settings: Remove useless duplicated margin-top.
We only needed this margin for the "filter settings" CSS, and it
doesn't take effect anyway due to CSS precedence.
2018-08-02 17:26:56 -07:00
Tim Abbott 0984d876ed settings: Fix styling for admin_filters_table.
Apparently, the 20px top margin was being overriden because it wasn't
deeply layered enough.
2018-08-02 17:24:38 -07:00
Tim Abbott 786501f707 buddy list: Shrink #user_presences to 95% width.
This fixes annoying problems where the scrollbar at the right of the
buddy list looks bad where it overlaps the buddy list.
2018-08-02 16:57:25 -07:00
Steve Howell 94884a4418 buddy list: Introduce buddy_list_wrapper div.
This new div allows us to split out two concerns:

    semantic list of items - remains in #user_presences
    widget real estate - controlled by new #buddy_list_wrapper

We will use this for progressive rendering.  We want to add
padding to the buddy list without messing with the integrity
of the actual HTML '<ul>' list.  (One ugly alternative would
have been to add a dummy list item, which be a pitfall for
any code traversing the list.)

Basically, all the code relating to click handlers and similar
things was left alone.  We only change js/css related to
scrolling, resizing, and overflow.
2018-08-02 16:56:50 -07:00
Cynthia Lin 0f34e2fe3c subs: Fix broken streams list header/search container in Safari.
Fixes #10064.
2018-08-02 09:55:32 -07:00
Cynthia Lin 9efe907ef1 night_mode: Use nested selectors to change night mode element styling.
This is a SASS-exclusive feature that simplifies a majority of the night
mode selectors.
2018-07-31 17:41:27 -07:00
Cynthia Lin 0314d63e7a night_mode: Improve legacy searchbox styling to fit night mode. 2018-07-31 17:41:27 -07:00
Cynthia Lin ae48010158 night_mode: Improve pill searchbox styling to fit night mode. 2018-07-31 17:41:27 -07:00
Cynthia Lin cdbb38096a night_mode: Fix broken background color for user profile. 2018-07-31 17:06:11 -07:00
Akash Nimare cc6af84a08 portico: Redesign download button on apps page.
This PR updates the styling of download button so
that it matches with the other buttons on portico pages.

Partially fixes #10104.
2018-07-31 14:18:28 -07:00
Shubham Padia 3e6eb360c4 stream edit: Remove bottom margin from `sub_settings_title`. 2018-07-31 11:12:09 -07:00
Akash Nimare 57ed871800 pill: Fix broken width of input-pill.
This PR fixes a UI bug which was caused by removing
the width of pill-container.

This issue was only visible in night mode.
2018-07-31 09:45:12 -07:00
Shubham Padia 5bf6e55778 search pills: Fix visual bugs due to CSS refactoring of input pills.
Changed search pill padding, `.navbar-search` flex-wrap to match with
the CSS refactoring in 66df4e3e84.
The `height: 100%` changes to `.navbar-search` and `.input-append`
make up for the issue in which the pills overflowed in the mobile
view due to `.navbar-search` height being declared 40px explicitly
while the actual heiight in mobile view was shorter.
2018-07-27 10:54:09 -07:00
Aditya Bansal 5190f4c51a stylesheets: Fix coding style to comply with stylistic rules. 2018-07-27 00:15:58 -07:00
Aditya Bansal 5bca93d147 hotspots.scss: Fix styling to conform to stylistic rules. 2018-07-27 00:15:58 -07:00
Aditya Bansal 4cbe827581 portico.scss: Fix styling to conform to stylistic rules. 2018-07-27 00:15:58 -07:00
Aditya Bansal 92e29db3f5 landing-page.scss: Fix styling to conform to stylistic rules. 2018-07-27 00:15:58 -07:00
Shubham Padia 6162ea1075 pills: Add `flex-wrap: wrap` to pill container for all pills.
Fixes #10059.
In 66df4e3e84,
`display: inline-flex` was added to `.pill-container` but
`flex-wrap: wrap` was missing which forced overflow pills to be on
one line and made the pill text overflow vertically. This was not
observed in composebox pills as `.pm_recipient .pill-container`
already had a `flex-wrap: wrap` rule which has been removed in this
commit to avoid duplication.
2018-07-25 16:35:00 -07:00
Aditya Bansal fa3a337f37 stylelint: Fix css stylistic violations in various scss stylesheets. 2018-07-25 14:58:25 -07:00
Aditya Bansal be77e600ee stylelint: Fix landing-page.scss to comply with stylelist rules. 2018-07-25 14:58:25 -07:00
Rishi Gupta 1bbe87cf82 portico: Add links to import from slack and gitter to /new. 2018-07-25 08:49:27 -07:00
Shubham Padia 22c5a73ccb search: Add #searchbox_legacy selector to #searchbox rules in media.scss.
This is a fixup for e1291cf839.
While copying the the rules of `#searchbox` to `#searchbox_legacy`
in the search pills feature, the existing `#searchbox` rules were
missed in the conversion.
`#searchbox_legacy` has been added beside `#searchbox` in `media.scss`
instead of replacing that as both of them need those rules for the
mobile view.
2018-07-25 08:47:58 -07:00
Lyla Fischer d50faa4d81 user docs: Add reference to support email in docs footer. 2018-07-24 11:10:23 -07:00
Vishnu Ks 82fc82b7e2 billing: Sign and verify the seat count during upgrade. 2018-07-24 08:04:00 -07:00
Marco Burstein 7daf7c1498 portico: Slightly shrink the Core Team profiles' width.
Shrinking the widths enables all five core team profiles to be aligned
on the same line, instead of having four on the first line and one
profile on its own line.

Fix #10008.
2018-07-23 22:43:07 -07:00
Shubham Padia 1f553a41d0 search: Higlight `#searchbox` on focus.
Adds box-shadow to `#searchbox` when either `#search_query` or any
of the pills have focus. Uses jquery instead of pure css as the
`:focus` event occurs on `#search_query`, while we want to add
box-shadow to `#searchbox`. This could have been done with
`:focus-within` CSS selector, but it is not supported in IE or Opera.

`#search_query` already had an onfocus/focusout listener, adding
listeners to `#searchbox.pills` for those events wouldn't have worked
as you don't want the focusout event to fire when the focus shifts
from input to pill.

Also adds `focusin`, `focusout` and `css()` to zjquery. `css` is
same as `val`, except it returns an empty object in case of no value
instead of an empty string. I don't think `css()` is valid syntax
in actual jquery.
2018-07-23 11:29:10 -07:00
Shubham Padia 069a4f1626 search: Disable tab_bar due to addition of search pills.
tab_bar.js becomes redundant after implementation of search pills.
This commit adds a comment to tab_bar.initiliaze, so the event
listeners related to it do not get initiated. This does not remove
any code related to tab_bar.js.
Also adds left and right border around the search icon.
2018-07-23 11:29:10 -07:00
Shubham Padia 36707a33ca search: Add a basic implementation of search pills.
Following points have been implemented in this commit:
1.) Add search pill on selecting typeahead.
2.) Re-narrow after removing a search pill.
3.) Add quiet optional parameter to removeLastPill.
4.) Pre populate search pills in narrow.activate.
5.) Clear existing search pills on narrow.deactivate.

Description of above points:
1.) I tried out using the description from suggestions.lookup_table
to append a pill using appendValidatedData so that the description
had not to be calculated again. But the description in the suggestions
lookup contains html due to highlighting. This html is escaped when
inputed in a pill. An attempt was also made to remove the higlighting
by replacing the tags. But other espaced characters like &lt; also
popped up, so it was better to use append_search_string.
3.) If one wants to refresh the pill using pill.clear and wants to
repopulate them, evaluating the event_handler associated with the
action of removing the pill may not be desired.
4.) Pill population code is added to narrow.activate. Pills are not
populated if the narrow was triggered by search as search handles the
addition and removal of pill by itself. The reason for not handling
search too in narrow.activate is to avoid clearing the pills and
repopulating them. Example of some of the triggers for narrow.activate
include `restore draft`, `topic change`,`sidebar`.

Also modifies tests for search.js
2018-07-23 11:29:10 -07:00
Shubham Padia 5212026620 search: Change letter-spacing to normal for search box.
The letter-spacing was changed last in commit
fc4d80d941 which is about a 5 year old
commit at the point of writing. The change is removed as I did not
notice any visual change on removing it. Changing the letter spacing to
normal lets the text in the pills be seen legibly, otherwise the characters
were overlapping.
2018-07-23 11:29:10 -07:00
Shubham Padia e228687094 search: Make search query a contenteditable div for search pill.
Input pills require a contenteditable div with a class named input
to fall inside the pill container. On converting the input tag into
a div, the size of the input decreases which is compensated by a
line-height of 40px. Comment above letter-spacing:normal was removed
as chrome and firefox do not change the letter-spacing to normal
for a div via the default browser stylesheet.

NOTE: Currently writing something into the div will call the action
corresponding to that key in the keyboard shortcuts. The input will
work fine once the pills have been initiated.

For the casper tests, for now, we just use the legacy search code.
When we change that, $.val() cannot be used on contenteditable div, so
$.html() will need to be used instead in select_item_via_typeahead.
2018-07-23 11:29:10 -07:00
Tim Abbott e1291cf839 search: Copy CSS to a separate #searchbox_legacy block.
This way, we can edit the CSS for the searchbox without having to
worry about changing the legacy behavior.
2018-07-23 11:29:10 -07:00
Tim Abbott 87427fb923 css: Put searchbox CSS into a single CSS block. 2018-07-23 11:29:10 -07:00
Tim Abbott 26cd7f931c css: Move message edit history CSS from middle of search CSS. 2018-07-23 11:29:10 -07:00
Cynthia Lin 66df4e3e84 input-pill: Refactor pills to eliminate fixed positioning of elements. 2018-07-23 10:21:13 -07:00
Cynthia Lin f081ee7120 help: Limit width of documentation content. 2018-07-23 10:10:02 -07:00
Akash Nimare 5f4895f780 user-groups: Centre align popover content. 2018-07-22 20:14:29 -07:00
Max Nussenbaum 122dcc9760 billing: Style upgrade page.
This styles /upgrade.
2018-07-13 18:32:29 +05:30
Max Nussenbaum 8fd900626d billing: Style billing page.
This adds styles to /billing.
2018-07-13 18:30:38 +05:30
Max Nussenbaum 4af3b8bdda settings: Improve styling of draggable profile field rows.
This changes the icon indicating that you can drug the custom
profile field rows in settings to be the double rows of dots
typically used to indicate draggability. It also gives those
rows the "move" cursor on hover.
2018-07-13 18:17:03 +05:30
Cynthia Lin ab9f167053 help: Refactor help page CSS to eliminate padding on content containers.
This is essential for using simplebar, since simplebar doesn't account
for parent <div> paddings, which might cause scrollbars to be mispositioned
if not considered.
2018-07-13 18:03:32 +05:30
Cynthia Lin 1babd6aa28 help: Prevent scrolling on sidebar when collapsed in mobile view. 2018-07-13 18:03:32 +05:30
Cynthia Lin 8ee034a41c help: Prevent scrolling when cursor is on body.
When you hover above the navbar, the cursor focuses on the page
body and scrolls the entire page, breaking the positioning of the
fixed sidebar and page content.

We disable scrolling on the body but allow the sidebar and Markdown
content page elements to be scrolled to fix this bug.
2018-07-13 18:03:32 +05:30
Cynthia Lin 0ed13e3631 stats: Fix incorrect data-user attribute on Everyone button.
For some reason, it was defined as "realm" instead of "everyone",
resulting in undefined value JS errors when draw_plot() was called.

Fixes #9937.
2018-07-13 10:24:13 +05:30
Anders Kaseorg ae55107560 HTML validation: Replace Drafts button with styled link.
<button> inside <a> is invalid.

Signed-off-by: Anders Kaseorg <andersk@mit.edu>
2018-07-12 18:47:10 +05:30
Anders Kaseorg 6107382b2a HTML validation: Remove invalid <pipe> element from portico-header.
It seems to have been there to paper over a styling problem that was
actually caused by slightly mismatched font sizes (em vs. rem).

Signed-off-by: Anders Kaseorg <andersk@mit.edu>
2018-07-12 18:46:31 +05:30
Eeshan Garg 3eaf00444a markdown: Render nested multi-line code blocks correctly.
This commit adds a Markdown tree-processor extension that renders
multi-line code blocks that are nested inside lists with the
formatting. Note that the code block could be nested inside multiple
list levels and would still get rendered correctly.

Tim: This fixes the need for unpleasant workarounds like
f5bfa4e793 and makes nested code blocks
in our documentation look exactly how users would expect them to.
2018-07-12 12:22:04 +05:30
Aditya Bansal c47db1a1e8 left_sidebar.html: Upgrade to use font-awesome 4.7 icon prefixes. 2018-07-11 20:31:18 +05:30
Aditya Bansal fb839c1d5b compose.html: Upgrade to use font-awesome 4.7 icon prefixes.
We also adjust some CSS so that icons after this upgrade look exactly
or nearly the same as they did before the upgrade.
2018-07-11 20:31:17 +05:30
Aditya Bansal 21b9e8dee1 typeahead_list_item.handlebars: Upgrade to font-awesome 4.7 icon prefixes.
We also remove a CSS hack that was required because the original icon
was poorly centered.
2018-07-11 20:31:03 +05:30
Aditya Bansal ae6c8692a9 subscriptions_settings_modal: Upgrade to font-awesome 4.7 icon prefixes. 2018-07-11 20:17:11 +05:30
Aditya Bansal aeac7fb5b5 stream_privacy.handlebars: Upgrade to font-awesome 4.7 icon prefixes. 2018-07-11 20:17:11 +05:30
Aditya Bansal 145af3f7c8 emoji_popover_content.handlebars: Upgrade to font-awesome 4.7 icon prefixes. 2018-07-11 20:17:11 +05:30
Aditya Bansal 5552bfbeda settings_overlay.html: Upgrade to use font-awesome 4.7 icon prefixes. 2018-07-11 20:17:11 +05:30
Aditya Bansal ccb4e11eb4 navbar.html: Upgrade to use font-awesome 4.7 icon prefixes. 2018-07-11 20:17:11 +05:30
Tim Abbott 1381603c29 portico: Remove unused Stamp font-face.
This was used for the very early-stage Zulip "ask for invite" form,
which was built around a stamped envelope concept.  The form was
removed from Zulip a couple years ago in
bded0d9d54, but this CSS was missed in
the removal.
2018-07-11 20:09:00 +05:30
Max Nussenbaum 568aa43838 flatpickr: Hide the up/down arrows in the Flatpickr datepicker.
This hides the up and down arrows that appear in the year input
of the Flatpickr-provided datepicker. (This is only used in
settings for now, but the arrows will be hidden anywhere Flatpickr
is used.)
2018-07-11 19:16:25 +05:30
Max Nussenbaum 9be31d2b1b settings: Restyle x that clears date field.
This restyles the x that clears a date field to be more consistent
with the rest of the app, and to appear inside the field.
2018-07-11 19:16:25 +05:30
Cynthia Lin e790f35d0e settings UI: Change user profile pill containers to match input styling.
Previously, commit e5d2e95 attempted to change the styling of the user
profile pill containers to match the inputs above it. However, it used
an incorrect selector (#settings_page), resulting in all other pill
containers on settings pages being changed to match it as well
(example: User groups pill containers in Organization
settings). Additionally, its selector's specified background attribute
resulted in problems in dark mode.

To correctly style the user profile pill containers to match the other
input's styling, we apply the uneditable-input class native to
Bootstrap so that we don't need to create an entirely new selector to
style it.

Note that the .custom_user_field .pill-container selector was added so
that it could match the padding of inputs. Also, the
.custom_user_field .pill-container:focus-within selector was added
with attributes straight from Bootstrap's input:focus selectors so
that .custom_user_field .pill-container would have a blue outline
while users were typing in the input pill, just like the other inputs.
2018-07-11 19:06:04 +05:30
Anupam Dagar 88ddf2bf5d settings UI: Add copy zuliprc button to bot information box.
Fixes: #9510
2018-07-10 15:19:05 +05:30
Shubham Padia 549d5af1a3 pills: Explicitly declare height of input pill as 20px.
Adding the 20*20 image inside the pill caused a minor increase in
pill height. Making the image 19*19 causes some increase in the height
under different zoom conditions. I'm not sure about the reason behind
this, so this can be counted as a hack.
2018-07-10 15:07:56 +05:30
Shubham Padia e5f28e8960 pills: Add basic support for images in input pills.
Allow passing image link in the item passed to appendValidatedData.
When passing image link via any of the append* functions, make sure
that create_item_from_text for that pill also adds the image link to
the item created.
This commit does not make any visual change to the current app.
Changes to user_pill.js are necessary to enable user avatars for
pills.
2018-07-10 15:07:56 +05:30
Rhea Parekh fe4cad15a4 widgets: Add todo widget. 2018-07-10 11:18:05 +05:30
Shayan Toqraee 0757d022f5 messages: Add support for right-to-left messages.
This implements right-to-left message automatic detection support in
the compose box as well as the message feed.  Full unit tests and
support in the message-editing UI are for future work (as are
potentially more fancy things like supporting things like
right-to-left multi-word names for users/streams/etc.).

Fixes #3123.
2018-07-10 10:47:56 +05:30
Eeshan Garg 8362d927d0 css: Refactor CSS responsible for rendering multi-paragraph lists.
I also removed the comment that said "this is just a workaround".
It is not, it is technically correct for us to do apply different
CSS rules to <p> tags that aren't the first child of the <li>
element in question.
2018-07-10 10:01:16 +05:30
Jack Zhang 8fe422794d register-accounts: Align terms of service checkbox.
Fixes an invalid css property from
https://github.com/zulip/zulip/commit/30815b402, which addressed #9328.
2018-07-06 22:54:37 +02:00
Cynthia Lin 642111b6fa settings UI: Expand bot card width in narrow windows.
Fixes #9513
2018-07-05 12:29:52 +02:00
Aditya Bansal b10822efcf subscriptions.scss: Remove dead CSS.
We remove css which has been dead since convertion of subscriptions
page to an overlay. This should ideally have been dealt with in
commit 1886f0a which actually did the converstion but we forgot to
handle it at that time.
2018-07-04 23:51:45 +05:30
Aditya Bansal 69904e04d8 help: Remove dead css and js left over from the time of redesign.
This removes some left over dead code from the redesign which was
introduced in commit 1cf7ee.
2018-07-04 23:51:45 +05:30
Aditya Bansal e3aa479cc3 zulip.scss: Remove dead CSS from 2013.
We remove the dead CSS which was introduced in commit 963a93367
back in 2013 and doesn't seem to have any use now. Its probably
the case that we removed the actual html structure which used this
CSS since 2013 and forgot to clean up the css part.
2018-07-04 23:51:45 +05:30
Aditya Bansal db7448c4e3 subs: Remove dead css and js left over from a redesign.
This cleans up some leftover js and css from the effort of
redesign the rows of the #subscriptions table. Redesign happened
in commit 368b5859 and but we forgot to clean up these js and css
pieces.

squash to subs.js.
2018-07-04 23:51:45 +05:30
Shubham Padia d07f5eef22 bot settings: Change top and bottom margins of bot_error. 2018-07-03 06:02:49 -07:00