Commit Graph

393 Commits

Author SHA1 Message Date
Tim Abbott b79a66fb71 messages: Fix alignment of message sender names.
Now message senders are vertically aligned with the content, whether
mesasges are /me style status messages or not.

We'll want to do more in the future to move both sender names and
message bodies further towards the avatars, I think, but this is
definitely an improvement.
2017-02-11 23:01:22 -08:00
brockwhittaker 47a3ce2d35 Seperate information overlay CSS into own file.
This takes the information overlay CSS and moves it from zulip.css to
informational-overlays.css to help separate out isolated components.
2017-02-10 15:18:41 -08:00
Brock Whittaker 1500e93092 Convert overlay modals to unified modal system.
This converts three modals:

1. Markdown Help
2. Keyword Shortcuts
3. Search Operators

Into a system in which they all appear in the same overlay now.
2017-02-10 15:18:41 -08:00
Brock Whittaker 1143ed7219 redesign: Change /#settings and /#administration to an overlay.
This also adds a box-shadow to the #deactivate_self_modal so that it
looks similar to the old backdrop.
2017-02-09 23:35:10 -08:00
khantaalaman b82104a769 message-view: Uncollapsing using [More...] made easier.
The [More...] link for un-collapsing messages has been made easier to
click, by giving it a top margin which prevent clicks on the top
portion of it from being masked by the top part of the message body.

Fixes #3313.
2017-02-05 12:48:12 -08:00
Tim Abbott daf43c5e4d navbar: Add margin between icons and text. 2017-01-31 18:11:34 -08:00
brockwhittaker 49b150bcb3 navbar: Center icons in gear-menu.
This centers the icons in the gear menu so they are naturally
in line and centered.
2017-01-31 18:11:28 -08:00
brockwhittaker b37b7de498 Fix the position of the edit message label.
This fixes the position of the "Topic" label to be above
the input and adds a "Content" label to improve consistency.
2017-01-31 17:53:20 -08:00
Brock Whittaker ebe0aa48a7 Enlargen settings page loading spinner.
Currently the loading spinner on the settings page is too small
and is in the left corner of the parent box. This changes the width
to the same as the main page: 100% fill inside a 38px square container.
2017-01-30 17:51:05 -08:00
Cynthia Lin 522ac3ea4a frontend: Add #search-operators link to search icon; Fixes #1369. 2017-01-29 07:20:15 -08:00
Brock Whittaker 1dd8fb7966 Display realm emojis in the emoji picker container.
This displays the realm emojis in the emoji picker container in their
own divs styled similarly to the existing .emoji divs.
2017-01-27 15:39:22 -08:00
Brock Whittaker 4ac12745cd Add capped height to description box.
This adds a capped height of 70px  to the description box (same as the
images) and then uses a gradient to fade out any text that may be near
the bottom.
2017-01-26 22:02:16 -08:00
Steve Howell cc7ccb56d4 Revert "Fix inconsistent spacing in message actions popover."
This reverts commit 1f13a991f4.

Moving to tables makes it so that we can't navigate the menu
with the keyboard.

Fixes #3352
2017-01-17 14:40:49 -08:00
Mahim Goyal 1f13a991f4 Fix inconsistent spacing in message actions popover.
This was implemented by changing the format of the popover from a list
to a table.

Fixes #3010.
2017-01-16 20:10:06 -08:00
brockwhittaker 3cb0db586d Change the "top of messages" logo to SVG from PNG.
This changes the logo that sits at the top of the messages to an SVG
rather than a PNG used as the current navbar logo that is filtered to
be grayscale.

This fixes a significant performance regression that had been caused
by adding that logo to the top of the feed.

Thanks to @rishig for generating the SVG!
2017-01-12 10:36:29 -08:00
Yago González a613bc43fe frontend: Keep showing hover menu after opening popovers.
Fixes: #3172
2017-01-11 14:20:48 -08:00
Steve Howell 48e68791e8 Fix duplicate HTML id: fmt_help_table.
We replace the id with a class called help-table.
2017-01-11 14:00:10 -08:00
Tim Abbott 89b47bb653 Revert "Fix Small Image Preview Sizing."
This reverts commit e4761782e0.

This caused performance problems and jolting of the main UI, because
it broke the important invariant that the height of a Zulip message
should not depend on the content of slow-to-load assets such as
images.
2017-01-06 17:21:15 -08:00
Tim Abbott a6cd0650fe css: Fix styling for bulleted lists.
Previously, Zulip's bulleted list styling didn't have balanced
margins, which mean that they would look misplaced within single-line
messages.
2017-01-06 14:46:47 -08:00
Brock Whittaker 3f286e65d1 Add logo to the top of the message feed.
Add the Zulip logo to the top of the messages feed to show that there
are no more messages to load, or that it is loading more (if the
spinner is still around).
2017-01-06 10:37:54 -08:00
Brock Whittaker 7b00bd6f7e Remove the old spinner, replace with new one.
This removes the old content loading spinner and replaces it with a new
SVG.
2017-01-06 10:37:54 -08:00
Brock Whittaker 3d5c24ab40 Show date correctly on message headers.
This shows a date on a message header whenever the date of that
message is different than the date of the previous message.

The previous logic was bugged and didn't display dates in headers at
date transition points.
2017-01-05 17:28:08 -08:00
Brock Whittaker b976e179e6 css: Restyle Open-Graph Links.
This styles open-graph links to be cleaner and smaller.
2017-01-05 16:15:01 -08:00
Alicja Raszkowska e21fe8b886 css: Create a separate file for right-sidebar CSS.
Create a new file right-sidebar.css.
Move all right-sidebar CSS from zulip.css to right-sidebar.css.
2017-01-03 16:57:51 -08:00
Brock Whittaker e4761782e0 Fix Small Image Preview Sizing.
Before the sizing of the preview would be 100px in height regardless of
whether the image was that tall. Now it is any value up to 100px.
2017-01-03 15:59:25 -08:00
Brock Whittaker 50f6681319 Fix z-index Issues.
This fixes the z-index issue with the navbar along with hiding any
popovers when you enter into the lightbox.

Fixes #3078.
2017-01-03 15:33:54 -08:00
Tim Abbott 2ef19901dd notifications: Improve HTML/CSS for desktop notifications. 2017-01-02 16:42:04 -08:00
Tim Abbott ec3e5e844a reactions: Clean up popovers and hover logic.
Previously, the emoji reactions popovers were keyed off the
edit_content area, which is problematic because that area was
created/deleted on hover, resulting in orphaned popovers (which
wouldn't close properly normally).  That had been hackishly addressed
in the original PR with the overbroad `$('.popover').remove();`.  To
remove that, we fix the actions popover to always be based on an
element that exists in the page.

There probably more to do here, but this is good enough to merge emoji
reactions and iterate from here.
2016-12-30 21:42:54 -08:00
Tommy Ip 7b6603b169 admin: Fix strike-through styling in users & bots tab.
Fix an issue where the `deactivated_user` class is unintentionally
applied to the reactivate user and reactive bot buttons.

Fixes #2905.
2016-12-26 14:51:12 -08:00
Akhil 06615bee00 streams: Implement copy-subscribers feature.
In the new stream creation modal, added checkboxes for each stream
and a toggle to see or hide the checkboxes. Altered filtering to
filter streams and users. Added corresponding casper tests.

When a stream is checked/unchecked, it does not affect the state
of any user checkbox. This may be visually unclear as users can be
added even if their checkboxes are empty.

Fixes #2448
2016-12-17 11:20:47 -08:00
Brock Whittaker 706b2e7978 Absolutely position the .recipient_row_date.
Firefox doesn’t handle multiple floats well so this is a better
solution — to absolutely position it in the recipient row container.
2016-12-14 15:44:54 -08:00
peguin40 01a0d11705 Show markdown help in message editing UI.
Fixes #2578.
2016-12-13 20:49:39 -08:00
Brock Whittaker a460fcddef Add Date Headers to Floating Bar and Message Headers.
This adds the date of a block of messages to the floating recipient
bar along with message headers of blocks that are the first of a
particular day.
2016-12-13 20:36:39 -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
Tim Abbott a7681c3c2f css: Move .light to components.css. 2016-12-02 13:03:43 -08:00
aakash-cr7 79b4ac8155 Add tooltips to buttons appearing when message is not delivered. 2016-11-26 10:13:48 -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
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 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
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 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
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
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
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
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 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 dd3553cc5b zulip.css: Fix some 2-space indentation errors. 2016-09-27 17:43:28 -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
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 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 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 2af176709a Put each selector on its own line in zulip.css. 2016-07-31 17:46:21 -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
Steve Howell 0c96d39f2e Fix whitespace in CSS. 2016-07-18 11:11:32 -07:00
Rishi Gupta d529a94e4d Add realm setting to time-limit editing of message content.
This is controlled through the admin tab and a new field in the Realms table.
Notes:
* The admin tab setting takes a value in minutes, whereas the backend stores it
  in seconds.
* This setting is unused when allow_message_editing is false.
* There is some generosity in how the limit is enforced. For instance, if the
  user sees the hovering edit button, we ensure they have at least 5 seconds to
  click it, and if the user gets to the message edit form, we ensure they have
  at least 10 seconds to make the edit, by relaxing the limit.
* This commit also includes a countdown timer in the message edit form.

Resolves #903.
2016-07-15 13:55:49 -07:00
Tim Abbott f513a68ac9 lint-all: Check for missing whitespace before { in CSS.
Also fix the existing violations of this rule.
2016-07-10 17:29:36 -07:00
Tim Abbott 4d28111178 Move alert_words CSS to settings.css. 2016-07-09 08:01:54 -07:00
Tim Abbott a43021005a Remove unused notification-docs CSS. 2016-07-09 08:01:19 -07:00
aakash-cr7 63475a55f3 Add bots and avatars css to settings.css. 2016-07-09 08:01:12 -07:00
aakash-cr7 e37e384dd4 Add notification css to settings.css. 2016-07-09 07:53:51 -07:00
Kartik Maji e5a3339725 Add search box for filtering users to add when creating new streams.
Fixes: #779.
2016-07-06 16:01:33 -07:00
Umair Khan 035fceb814 Add dynamically loaded language dropdown. 2016-07-04 11:56:02 -07:00
Kartik Maji f8bb7503e6 Add ability to pin streams to top of the streams sidebar list.
Based on work by Lauren Long, with some tweaks by tabbott.
2016-06-30 22:26:09 -07:00
Tim Abbott 199e2df1e3 Split styles/settings.css out of zulip.css. 2016-06-26 08:21:39 -07:00
Preston Hansen 57dec15c6c Update alert word UI to match the style of bots.
Resolves #1075.
2016-06-24 16:43:19 -07:00
Michael Cordover a51ec44005 Search streams from left sidebar (resolves #565).
Assigns hotkey 'w' to search streams.
Only show search box when active. Activate with hotkey or by clicking
STREAMS.
Filter matches at the beginning of words in stream name.
Behaviour is otherwise almost identical to user search.
Casper tests.
2016-06-23 17:21:57 -07:00
Vishnu Ks 055c7eed04 Tweak the CSS of skip-tutorial button. 2016-06-21 14:23:17 -07:00
Vishnu Ks f9f31b79d0 Make default_streams web controllable.
Fixes: #665
2016-06-09 15:24:32 -07:00
Caroline Liu 60e5140406 Add warning for @all / @everyone.
* The warning contains a count of the number of people in the stream.
* An error appears if the warning is ignored and the user tries to
  send the message anyway.
* The message cannot be sent until the warning is acknowledged or @all
  / @everyone is removed.
* This only applies to stream messages and not private messages.

Fixes #853.
2016-06-09 14:38:58 -07:00
gregmccoy 1844f1b054 Add button to exit the Zulip tutorial.
Fixes: #872.

[Tweaked by tabbott to fix focus and rename to "Exit tutorial".]
2016-06-06 14:38:11 -07:00
Tomasz Kolek c5b56c15de Fix placement of EDITED in one line status messages.
Fixes #836.
2016-06-05 10:11:05 -07:00
Kartik Maji 3d77aa49db Add subscribe button in narrowed view when stream has no messages.
A temporary message appears on successful subscription, with a button
offering to unsubscribe in case the user subscribed by accident.
2016-05-18 20:06:30 -07:00