Commit Graph

448 Commits

Author SHA1 Message Date
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
Tomasz Kolek 9933abf833 css: Fix problem with too long stream name on stream deletion modal.
Add overflow-wrap rule to zulip.css for deactivation_stream_modal h3.

Fixes: #2596.
2016-12-07 21:23:23 -08:00
Tomasz Kolek 4fe3cd98f8 css: Fix problem with too long stream name in left sidebar.
Add overflow-wrap rule for .stream-name class to left-sidebar.css.
2016-12-07 21:21:47 -08:00
Tomasz Kolek eac002c6bd css: Fix problem with too long stream error formatting.
Add overflow-wrap rule for #response span to subscriptions.css.
2016-12-07 21:20:57 -08:00
Igor Tokarev c93f1d4eda Add oembed/Open Graph/Meta tags data retrieval from inline links.
This change adds support for displaying inline open graph previews for
links posted into Zulip.

It is designed to interact correctly with message editing.

This adds the new settings.INLINE_URL_EMBED_PREVIEW setting to control
whether this feature is enabled.

By default, this setting is currently disabled, so that we can burn it
in for a bit before it impacts users more broadly.

Eventually, we may want to make this manageable via a (set of?)
per-realm settings.  E.g. I can imagine a realm wanting to be able to
enable/disable it for certain URLs.
2016-12-07 17:40:18 -08:00
Brock Whittaker 83ca1ab149 register: Make /register responsive again.
After some tremendous changes the container now shouldn’t break badly
on narrow screens as flexbox doesn’t set it off the screen.
2016-12-07 15:33:57 -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
Brock Whittaker b837221e05 Fix for possible webkit painting bug.
The left sidebar will overflow its bounds (even when set to overflow:
hidden) and go behind other text on the sidebar above. By setting the
z-index to 0 we seem to solve the problem.

This is probably actually a webkit bug, but this makes it no longer
affect us.

Fixes #1899.
2016-11-29 15:29:59 -08:00
aakash-cr7 73fb9c6f66 Fix alignment of 'Not Delivered buttons' on smaller devices. 2016-11-26 10:13:48 -08:00
aakash-cr7 79b4ac8155 Add tooltips to buttons appearing when message is not delivered. 2016-11-26 10:13:48 -08:00
aakash-cr7 0525b65f90 Fix positioning of error message appearing on adding custom alert words.
Fixes #2413.
2016-11-26 10:11:55 -08:00
Vladislav Manchev d7e1e4a2c0 Add initial implementation of custom realm filters.
This PR was abandoned by Vladislav and then substantially modified by
Igor Tokarev and Tim Abbott to complete it and fix a number of bugs.

Fixes #544.
2016-11-17 17:11:25 -08:00
Tomasz Kolek ea58005796 Fix styling in api_key_box section on settings page.
Before fix, "Your API key" section was to close left side of the box.
2016-11-15 09:32:10 -08:00
Steve Howell e732892654 css: De-duplicate some common styles for unread counts. 2016-11-14 16:16:55 -08:00
Steve Howell 7c1711179c Rename subject_count class to topic-unread-count. 2016-11-14 16:16:55 -08:00
Brock Whittaker d45c050994 message_edit: Restyle message_controls options to have better spacing.
This restyles the message_controls options to center them horizontally
while fixing them closer to the right side of the edge, along with just
replacing the edit button with a preview source button once editing is
disabled.
2016-11-10 19:47:26 -08:00
Brock Whittaker 5497416a36 Move edit button to underneath message timestamp.
This moves the edit button to underneath the timestamp such that when
you hover over a message now the timestamp hides itself and the edit
button appears (if editing is allowed).

Fixes #1733 and other annoying issues with this field.
2016-11-10 19:45:09 -08:00
Brock Whittaker 129d88825c messages: Wrap inline code blocks on long lines.
In 25b28bf82c and then
cb1bc70ab0, we attempted to make long
code blocks scroll in a reasonable fashion, without much success.

This change causes code blocks to be line-wrapped, without needing to
set `overflow-y: hidden` for paragraphs (which cause problems with
taller elements like emoji that overlfowed wrong).  Our octopi finally
have legs again.

It's not clear that this is the final answer, but it's the best
version we've found so far.
2016-11-09 19:26:45 -08:00
Steve Howell debc06b449 Rename subject-name to topic-name and move CSS to left-sidebar.css. 2016-11-05 15:03:29 -07:00
Steve Howell 06fe4bc943 Rename subject_box to pm-box/topic-box.
I'm not crazy about the names pm-box and topic-box, but they
are less confusing now.
2016-11-05 15:03:29 -07:00
Steve Howell 43c372bfb6 css: Clean up styles for subject_box.
These styles are uniform for now, so we don't need a complicated
selector.
2016-11-05 15:03:29 -07:00
Steve Howell e38b684eea Simplify CSS for topic-sidebar-arrow. 2016-11-05 15:03:29 -07:00
Steve Howell b1f288dddb topic lists: Rename expanded_subject to topic-list-item. 2016-11-05 15:03:29 -07:00
Steve Howell 8b7e9101ca topic lists: Rename expanded_subjects -> topic-list. 2016-11-05 15:03:29 -07:00
Brock Whittaker ee8d54db0f Change content to rely on data-* attribute.
Content now relies on the data-no-description attribute which then
allows for it to be embedded in HTML and therefore translatable.
2016-11-04 17:26:53 -07:00
Brock Whittaker 4400665a6d subs: Move stream settings into an independent overlay.
This replaces the scrolling stream settings feature with a stream
settings overlay.
2016-11-04 17:13:26 -07:00
Brock Whittaker 4c4733bcec Change logo/type on left sidebar column.
This changes to a new logo/type on the left sidebar column.
2016-11-03 18:12:00 -07:00
Tim Abbott cb1bc70ab0 css: Set only message overflow-x to auto.
This fixes a nasty problem where if you zoomed in Chrome, you'd get
little scrollbars on every message body.
2016-11-03 18:09:36 -07:00
Tim Abbott 368b585980 subs: Redesign the rows of the #subscriptions table. 2016-11-03 17:33:33 -07:00
Tim Abbott ebe959f2b0 tutorial: Remove low-quality alert bar onboarding flow.
This alert bar thing was buggy and didn't look that good, so let's
just remove it.  We can always write a nicer thing advertising the
desktop app later.
2016-11-02 23:41:16 -07:00
Tim Abbott 2506c691b8 css: Fix alert-bar-container CSS blocking "Home" button.
Because the alert-bar-container had the full width of the page, it's
higher z-index caused it to break clicking on things.
2016-11-02 23:41:16 -07:00
Tim Abbott 8f779056e1 register: Improve password strength meter display.
This previously didn't handle the new grid layout particularly well.
2016-11-02 23:34:55 -07:00
Tim Abbott 9aa346db71 css: Remove unnecessary share-the-love-title class. 2016-11-01 21:32:57 -07:00
trueskawka 977339954c css: Create a separate file for left-sidebar CSS.
Create a new file left-sidebar.css.
Move all left-sidebar CSS from zulip.css to left-sidebar.css.
2016-11-01 21:32:57 -07:00
Brock Whittaker 25b28bf82c Fix inline code lines that are too long in .message_content.
The issue is that if you post a very long line of code it will overflow
the .message_content div and force the width of the main message page
to be as long as the line of code.

Fixes: #2156
2016-10-31 17:17:17 -07:00
Brock Whittaker d49076d0d4 Add @media query for mobile muting UI.
This adds a media query so that the muting UI on mobile displays
correctly.

Fixes: #2149.
2016-10-31 17:17:17 -07:00
Tim Abbott 3727ea6fb0 subs: rename .subscription_description to .description. 2016-10-28 14:47:23 -07:00
Tim Abbott 66e2632809 subs: Rename .subscription_name to .stream-name. 2016-10-28 14:47:22 -07:00
Tim Abbott f18d53d46a subs: Rename .subscription_row to .stream_row.
The new name is clearer, since we show these rows for streams whether
or not you're subscribed.
2016-10-28 14:25:00 -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
Brock Whittaker 38f7349771 components: Add .tab-switcher component.
This adds the .tab-switcher component to components.css.
2016-10-28 14:04:38 -07:00
Brock Whittaker 1562f9fe76 lightbox: Fix Z-Index for Proper Ordering.
This fixes the z-index of the lightbox overlay, which previously
appeared behind the header, and the muting notification to be above
everything else on the page.
2016-10-28 13:57:37 -07:00
Tim Abbott c6f7b786a6 css: Fix problems selecting the first item in gear menu.
Fixes a regression introduced in
08b61c1b3d, where .alert-bar-container
would be above the menu, and thus block highlighting of the top item
("Manage streams") in that menu.
2016-10-27 23:10:27 -07:00
trueskawka df7e430849 css: Create a separate file for compose CSS.
Create a new file compose.css.
Move all compose CSS from zulip.css to compose.css.
2016-10-27 16:45:32 -07:00
trueskawka 0b8a2a6449 css: Create a separate file for subscriptions CSS.
Moves all subscriptions page CSS from zulip.css to a new file,
subscriptions.css.
2016-10-25 22:57:50 -07:00
Rishi Gupta d14f276322 topic_edit_form: Rename message_edit_topic to inline_topic_edit.
message_edit_form.handlebars already has a message_edit_topic that
refers to the topic edit section of message editing, and this made
things very confusing.
2016-10-25 16:33:20 -07:00
reyha d96d4e30ab Stream settings: sets zero margin for 'Streams Deletion' table.
This removes the extra space at the bottom of the 'Stream Deletion'
table, by setting the margin for the table to '0px'.

Fixes #2077.
2016-10-25 15:08:47 -07:00
Brock Whittaker 2ce601ebd1 Fix Multiple Lightbox Issues.
This fixes the following issues:
1. Photos are no longer resized larger than their native resolution.
2. Photos with transparency now have a checkerboard behind them to
signal an alpha of less than one.
2016-10-25 14:51:35 -07:00
Brock Whittaker 10f7146ddd Change Lightbox to Support YouTube Videos.
The lightbox will now distinguish between whether or not something is a
photo and a YouTube video by the class name of the message inline
preview. It embeds the YouTube video in the lightbox as an iFrame
rather than previewing the video screenshot.
2016-10-18 14:45:47 -07:00
trueskawka aa7fd9a07c stream_creation: Add a clear error message for duplicate streams.
User is now unable to create a stream with duplicate or empty name
through the create stream modal. An appropriate error message appears
on attempt.
2016-10-16 12:59:41 -07:00
trueskawka 9c8f4d9a1e stream_filtering: Filter streams on subscriptions page.
Filter behaves similarly to filter in left sidebar, see PR #684. Added
stream input field to the stream creation modal along with other settings,
for clarity.

Fixes #455, #563.
2016-10-16 12:59:41 -07:00
deekshaarul 357fbfcaa3 Zocial buttons: Fix overflow of text when internationalized.
Previously, the text in the Google/GitHub auth buttons would overflow
in languages like German where text is longer than in English.

Fixes #1876.
2016-10-16 12:35:43 -07:00
Brock Whittaker baa5de5230 Increase default emoji box size.
Set the default emoji box size height to 140px rather than 60px, so
you can see more than one row of text.
2016-10-15 12:29:05 -07:00
Vikas Parashar 08b61c1b3d Fix z-index of desktop app recommendation banner.
Change banner container's z-index so it's stay on top.

Fixes #1862.
2016-10-13 09:13:45 -07:00
Umair Khan 36c6a5d758 Add support for changing user's name by admin.
Fixes: #1553
2016-10-11 16:36:48 -07:00
Brock Whittaker 3494fa0635 Add lightbox media queries.
Add media queries to hide the image actions if on mobile (probably
unnecessary to have), and make the image description (name, author)
close to full width.
2016-10-11 15:22:31 -07:00
Brock Whittaker 162ee29aee Lightbox Overlay Style Fixes.
This fixes two minor issues with the lightbox styling:

1. The width was not supposed to be calc(100% - 20px) anymore. It now
should just be full width.

2. The exit button was not vertically aligned exactly nor horizontally
centered between the edge of the nearest button and the edge of the
screen. Both are fixed with the new margin.
2016-10-11 15:22:14 -07:00
Ilona Brand 4bf908c2d6 Add emoji map to the compose box.
- Expand a box full of emojis into the
compose window for users to graphically select emojis.

- Append an emoji to the end of the message when a user
clicks the emoji in the emoji box.

- Trap the escape key to always close the emoji box
before closing anything else if the box is open.

- Fixes: #147.
2016-10-10 16:12:25 -07:00
Rishi Gupta 777fcaa6a0 Add new organization type field to Realm objects.
Adds a new field org_type to Realm.  Defaults for restricted_to_domain
and invite_required are now controlled by org_type at time of realm
creation (see zerver.lib.actions.do_create_realm), rather than at the
database level.  Note that the backend defaults are all
org_type=corporate, since that matches the current assumptions in the
codebase, whereas the frontend default is org_type=community, since if
a user isn't sure they probably want community.

Since we will likely in the future enable/disable various
administrative features based on whether an organization is corporate
or community, we discuss those issues in the realm creation form.
Before we actually implement any such features, we'll want to make
sure users understand what type of organization they are a member of.

Choice of org_type (via radio button) has been added to the realm
creation flow and the realm creation management command, and the
open-realm option removed.

The database defaults have not been changed, which allows our testing code
to work unchanged.

[includes some HTML/CSS work by Brock Whittaker to make it look nice]
2016-10-05 17:01:46 -07:00
Brock Whittaker a550399f7d lightbox: Change aesthetic to white-on-blue design.
No longer is there a white information bar at the bottom. Now it is all
aligned to the top.
2016-09-30 16:44:40 -07:00
Brock Whittaker 339249602f Remove Blur on lightbox background.
This removes the blur feature as the background of the info settings
container is now #FFF.
2016-09-30 16:42:26 -07:00
Brock Whittaker 6b3aded32d Aesthetic Changes for Overlay.
This includes reduced title font size to bring the total info bar
height to the same height as the buttons, and an image preview that
doesn’t hit the walls of the container.
2016-09-30 16:42:26 -07:00
Tim Abbott aaa221233a lint: Ban 2-space indentation in our CSS.
Probably most properly we should check for any number of spaces that
isn't 4, but that's a bit more work to do with our linter framework,
and in practice basically every CSS whitespace error we see is 2-space.
2016-09-27 18:06:44 -07:00
Tim Abbott 855c306c01 Document components.css a little. 2016-09-27 17:56:14 -07:00
Brock Whittaker 87afe61860 Add overlay lightbox for displaying inline image previews.
This adds an event listener (by way of delegation) to the
.message_inline_image elements that pops up the overlay and hides it
when the overlay exit is clicked.

Fixes #654.
2016-09-27 17:50:51 -07:00
Tim Abbott 2ea7d2341e css: Move new-style buttons to new components.css and expand. 2016-09-27 17:48:24 -07:00
Tim Abbott dd3553cc5b zulip.css: Fix some 2-space indentation errors. 2016-09-27 17:43:28 -07:00
Sahil Dua 058587da77 Remove extra new lines at the ends of Zulip authoried files.
Fixes #1627.

[tweaked by tabbott to avoid patching third-party modules, for now]
2016-09-26 21:05:24 -07:00
hackerkid 9a2e24a458 Use spinner as message preview loader. 2016-09-26 21:00:28 -07:00
Brock Whittaker c833265fae Add notification for muting with unmute option.
This adds a support a notification at the top of the screen that
alerts a user they’ve muted a stream and gives them the option to
unmute if it was an accident.

The notification disappears automatically after 4s, but if a user
moves their mouse over the notification, the timer resets to 2s after
the user moves their mouse off the notification, to make it easy for
users to read the full message and decide what to do.
2016-09-26 20:55:53 -07:00
Brock Whittaker 3a4fff837f Identify if an emoji URL is invalid and signal an error.
Previously, no error would display in the UI if the link to the emoji
image was invalid. This would happen for instance if you put in
“invalid” for the Emoji URL. No alerts would pop up but it would refuse
to add the emoji.

This catches the error and displays a notification that looks like
“Failed: Enter a valid URL.”

Fixes #1116.
2016-09-26 20:52:45 -07:00
hackerkid 0412e1e20b Add support for markdown preview in compose area.
This doesn't currently use the backend markdown processor, so the
previews are not completely faithful.

Fixes #217.
2016-09-21 22:33:35 -07:00
Brock Whittaker f87c78d3f1 Add preview button to subscriptions page.
This adds a preview button to the subscriptions page to allow a user
to check out the stream without having to subscribe.

The button’s default state is hidden but on subscription row hover it
shows itself.

The preview button updates its text from "Narrow" to "Preview" and
back when a user subscribes and unsubscribes from a stream.

Fixes: #1519.
2016-09-19 22:13:47 -07:00
Brock Whittaker 706f422c3a Massively refactor settings page templates and styling.
This restructures the styling for the Zulip settings and
administration pages to minimize use of Bootstrap and use a consistent
styling library for similar elements.

While it is basically a wash in terms of the page's visuals, it will
make our life a lot easier for future work on improving the settings
pages section of the site.
2016-09-19 21:55:06 -07:00
Brock Whittaker 64079b382f Channel popup unsubscribe button.
From the popups that appear when clicking the down-arrow in the left
column's streams, you can now unsubscribe from that particular
channel. This runs on the same function that unsubscribes you from
streams in the "Subscriptions" tab.

Fixes: #1554.

[tweaked by tabbott to fix some errors]
2016-08-26 20:22:11 -07:00
Brock Whittaker 5840fef3b6 Text overflow for subscription description.
The text now overflows with an ellipsis and doesn’t break the page when
the page closes up.

Fixes: #1490.
2016-08-26 16:05:00 -07:00
Brock Whittaker 64c48119de Fix message topic edit CSS.
This fixes the overflowing issues, the broken styling of the topic
edit input box, and makes it somewhat more responsive.

Fixes: #1270.
2016-08-26 15:22:39 -07:00
Brock Whittaker 5de33c94be Add padding to checkboxes and fix HTML.
The ‘for’ attribute is not valid HTML in the case of this because the
emails are invalid character sets and the input has no ID with the
email.

This changes it to a data-name which is still searchable but doesn’t
interfere with typical input behavior.

The checkboxes no longer float-left, fixing an issue with the
subscribe buttons leaning right in narrow windows.

Fixes: #1491.
2016-08-26 15:03:45 -07:00
Brock Whittaker ce4ff5850c Add permanent scrollbar to code blocks.
This adds a permanent scrollbar to code blocks to get around some
Chrome on Mac issues where scrollbars won’t appear with particular
combinations of hardware.

Fixes: #1565.
2016-08-26 14:33:19 -07:00
Brock Whittaker d8aed0227a Put register template into centering containers.
This centers the content of the register container by putting it in
some flex box elements.
2016-08-25 20:55:55 -07:00
Brock Whittaker b8a1dcdf0d Restyle registration pages.
The registration pages — both the landing page and the follow through
page after receiving an email have been restyled to be more linear in
nature and centered using flex box.
2016-08-25 20:55:55 -07:00
Brock Whittaker edb7d72dc2 Fix 1px private message group header height difference.
Due to the border-top being tied to the .message-header-contents
element rather than the recipient_row in private message groups, the
floating container would be 1px more vertical when representing private
message groups than with public message groups.
2016-08-22 20:37:49 -07:00
Brock Whittaker b83691fd6f Apply styling to password reset modal
A centered version of the modal that looks more uniform and centers vertically as the screen height changes.
2016-08-16 16:36:42 -07:00
Brock Whittaker c9b05a2a84 Removing the leading border-top in sidebar items.
When the feedback module is hidden the #userlist_header border would
brush against the navbar. Check if the feedback header isn’t there and
remove the border top.
2016-08-15 16:40:28 -07:00
Umair Khan 8bf4d9288d Create a nice default language modal.
Fixes: #1396.
2016-08-10 16:22:36 -07:00
Brock Whittaker 77aa43fffb Prevent the color-picker from appearing above the navbar.
The color picker original z-index was set to (2^31)-1 which overrode
everything on the site. This behavior is unwanted as the color picker
should not override the z-index of the navbar.

In changing the z-index to 100 the navbar remains above the color
picker.
2016-08-09 09:07:15 -07:00
Steve Howell 15f46a142e Remove obsolete #navbar-spacer style. 2016-08-08 15:24:45 -07:00
Steve Howell 98abe5bb3b Remove obsolete #left-of-compose style. 2016-08-08 15:24:45 -07:00
Steve Howell cdd03dec4d Extract media queries to media.css.
Create `media.css` using media queries that had been at the bottom
of `zulip.css`, then update miscellaneous setttings/docs files.

I also add `.screen-medium-show` and `.screen-narrow-show` to
`media.css`, as they seem to be an important part of our
responsive design.

Fixes #1532.
2016-08-05 10:32:55 -07:00
Steve Howell af7e39fde2 Remove spurious whitespace in portico.css. 2016-07-31 19:40:21 -07:00
Steve Howell 2af176709a Put each selector on its own line in zulip.css. 2016-07-31 17:46:21 -07:00
Umair Khan c1d8ad3d9a Add GitHub login button to login page. 2016-07-29 12:49:10 -07:00
Steve Howell dc0a26deab Unify styles for settings panel. 2016-07-18 11:11:32 -07:00
Steve Howell 7a66d74f8f Merge common compose_table styles. 2016-07-18 11:11:32 -07:00
Steve Howell 287752ee5f Consolidate CSS styles with similar background color. 2016-07-18 11:11:32 -07:00
Steve Howell 51e35cbad4 Remove empty CSS blocks. 2016-07-18 11:11:32 -07:00