Commit Graph

461 Commits

Author SHA1 Message Date
Vaida Plankyte 74ab5b607a frontend: Change main UI content to not be background images. 2017-07-11 16:30:07 -07:00
Vaida Plankyte 0452978e6a frontend: Increase contrast of sidebar captions. 2017-07-06 11:21:52 -04:00
Cory Lynch 95d86c8aeb zulip.css: Replace RGB colors with HSL colors. 2017-06-21 07:02:57 -04:00
Yago González 1d0b7e07cc css: Make avatar corners round.
Set a border radius of 4 pixels for user avatars displayed in the message
list view.
2017-06-15 12:36:59 -07:00
Jack Zhang 98a785bb25 message_edit: Replace highlighting replaced text with delete / insert.
Rationale: For the more off-to-the-side edit history view, changes
are easier to digest by highlighting deleted content in red followed
immediately by added and changed content in green.

TODO: Toggle for showing the edited messages without highlighting;
deleted content would not be shown in this view.
2017-06-07 11:06:15 -07:00
Jack Zhang a3557b8d2c message_edit: Style text & highlights for inserted/deleted text.
Changed to: red and line-through for deleted text, green for inserted
text. This should increase contrast.
2017-06-07 11:06:15 -07:00
Tejas Kasetty ba91d7f59f zulip.css: Remove dead realm emoji CSS.
Removes .emoji.realm-emoji; it hasn't been used in months.
2017-06-06 22:54:45 -07:00
David Coleman 01d303da3e message view: show recipient_row_date when floating bar is hidden.
Force display of the top-most recipient_bar's recipient_row_date
when the floating_recipient_bar is just about to overlap and
becomes hidden while user is scrolling.

Fixes #4844.
2017-06-06 20:01:20 -07:00
Cynthia Lin 11e68606b4 design: Improve design of Subscribe/Unsubscribe buttons in message view.
Tweaked by tabbott to use an existing button style.

Fixes #5196.
2017-06-05 16:55:56 -07:00
Tim Abbott 70d414b62c bookend: Switch whitespace from padding to margin.
This creates more consistent spacing for bookends in relation to
actual message groups.
2017-06-05 16:27:57 -07:00
Reid Barton 96dff66743 katek: Make tex errors gray.
Red is too visually loud for a medium where tex errors are not fatal
(readers will be still able to understand the tex source).
2017-05-25 10:57:10 -07:00
Reid Barton f1eb8545b8 katex: Fix line height of inline math.
24cbd6113 changed the line height of katex HTML to avoid overlapping
lines in wrapped math displays. But the change also applied to inline
math, resulting in large vertical gaps in a multi-line paragraph
containing inline math elements.
2017-05-25 10:49:56 -07:00
Brock Whittaker ed767481f5 settings: Clean up organization and user settings pieces.
This cleans up the styling of the organization and the user settings
components to be more responsive and have more consistent styling with
the rest of the overlays.
2017-05-17 12:08:31 -07:00
Tim Abbott a6af57e90d css: Fix floating recipient bar border appearing when bar hidden.
It's the .recipient_row, not the .floating_recipient element, that
gets `display: none` added when the floating recipient bar is hidden.
2017-05-16 23:50:38 -07:00
Cory Lynch 24cbd61131 css: Fix KaTeX summation alignment and line wrapping.
Previously, the sum (capital sigma) operator would become
misaligned so that the lower and upper bounds are placed in
the wrong location. Changing the line height fixes this alignment.

Also, previously, wrapping long lines of TeX did not work, as often,
the different lines of math would overlap with each other.

Fixes #4657.
2017-05-16 23:29:36 -07:00
Tim Abbott feda8cd012 css: Fix missing top border in PM recipient bars.
Technically, they were also missing on stream message recipient bars,
but the difference was invisible.
2017-05-16 14:48:37 -07:00
Tim Abbott d1fb4aa130 css: Fix missing right border in PM recipient bars. 2017-05-16 14:48:37 -07:00
Tim Abbott 5048edc25c css: Decrease vertical space at top of feed.
This is system unfortunately has a rather complicated calculation to
compute the offsets correctly, but the net effect here is that the top
section of the Zulip window is much more space-efficient.

Shrinking the tab bar underpadding, part of this change, fixes #4444.

We only need the underpadding to be as tall as the space above the
floating recipient bar, which is definitely less than 10px, so I don't
anticipate regressions caused by this.
2017-05-16 14:48:34 -07:00
Rishi Gupta 0ce04556bf CSS: Change color of PMs from yellow to blue-grey. 2017-05-11 16:18:39 -07:00
derAnfaenger d63fdf5bc6 Fix Twitter bot breaking layout with long words/links.
Long words and links now get automatically broken down in the
'twitter-tweet' div; prevents a message box overflow.

Fixes #4659.
2017-05-08 09:56:35 -07:00
Tim Abbott b20a24875a emoji: Switch to using iamcal sprite sheets for reactions and pickers.
Without changing how we render emoji in messages or changing the data
set used for emoji names, this switches us to the superior
percentage-based system for choosing which emoji from the spritesheet
to select and the iamcal sprite sheets.

It requires some small changes to CSS to ensure emoji are centered
properly in the new design.

Based on Harshit Gupta's work on "Interrelated emoji infrastructure changes".
2017-05-03 13:30:42 -07:00
Jack Zhang df817f12f4 emoji: Rename reaction-popover to emoji-popover.
The name emoji-popover should now be more appropiate, as there's no more
need to distinguish between reacting to messages and composing messages.
2017-04-30 15:15:33 -07:00
Cory Lynch e972453a73 message edit: Remove Topic and Content labels.
Removed the components from the template and
cleaned up the relevant css.

Fixes #4562
2017-04-28 20:57:06 -07:00
Cory Lynch 81a575e4d5 Add cleanup for resize listeners on message editing.
I changed the watch_manual_resize function to return the listener
functions it creates, and then these are used to remove the event
listeners before the edit box is hidden.
2017-04-28 12:15:34 -07:00
Cory Lynch f9d1bff167 Fix textarea resize for editing messages.
Reusing code from the main compose_message component so that resizing now
behaves correctly. This means that when the user tries to resize vertically,
the autoresize code is disabled, and the textbox reverts to manual resizing.
Fixes #4573
2017-04-28 12:15:34 -07:00
Brock Whittaker c506a92d05 left-sidebar: Restyle to have new look.
This restyles the color swatches to either be locks or hashes,
and changes the notifications to be rounded rather than squared.
2017-04-25 17:47:36 -07:00
Tim Abbott f3c36147d9 /me: Fix alignment of name with non-/me messages. 2017-04-20 14:58:22 -07:00
Brock Whittaker 323ff6edca /me: Fix presentation and markup for /me statuses.
This fixes the /me elements to be display inline-block and inline
rather than display block with top and left properties.

This also fixes an unrelated issue with emoji reactions not being
able to be clicked on with /me messages.

Fixes: #4218.
2017-04-20 14:36:17 -07:00
Brock Whittaker 3041480600 message-edit: Fade in message on update.
When a message update comes back from the server and replaces an
old message, it should fade in. There are two components to the fade:

1. The message fades in from opacity: 0 =>  1.
2. The "edited" text will transform from X: -10 => X: 0.
2017-04-19 22:14:58 -07:00
Raghav Jajodia 09090fa8a6 message_edit: Replace image tag with inline SVG tag for clipboard image. 2017-04-14 14:07:59 -07:00
Raghav Jajodia ae48eaa90d single_message: Show "Copied!" success message after copying.
As the user clicks the "Copy and close" button, the message_edit
closes and a success message is shown for a few seconds.
2017-04-14 14:07:36 -07:00
Raghav Jajodia 2bb632824e message_edit: Modify css for hover over 'Copy' button.
Replace background-image of copy button with an image
and change color on hover.
2017-04-14 14:01:57 -07:00
Brock Whittaker d74f72f08f gear-menu: Re-add the organization settings link.
This re-adds the organization settings link and toggles the text
dependent on whether the user is an administrator or not.

Fixes: #4201.
2017-04-11 16:31:33 -07:00
Abhijeet Kaur 8f88b045a4 Rename "Administration" to "Organization" in the settings UI.
This better sets expectatations for the fact that in Zulip, the
Organization settings UI is available read-only to non-administrator
users.

Tweaked by tabbott to update some additional references.
2017-04-07 17:32:56 -07:00
Aditya Bansal aa10127cb6 loading-spinner: Fix position of spinner on home page.
In this we fix the positioning of the loading spinner on the home page
when its loaded for the first time. First time here does not mean first
time use but means first time of a new session.
2017-04-06 06:43:25 +05:30
digi0ps a935325420 settings: Fix positioning of user upload spinner.
Previously the "Uploading" text was floating outside the upload
widget.

Fixes #4223.
2017-04-05 12:22:15 -07:00
Kamal Marhubi 8d787ed887 style: Increase messagebox inter-paragraph spacing
The default is too tight for easily distinguishing paragraphs. This
change increases it slightly, while keeping the last paragraph's
margin at the original value.
2017-04-03 17:28:42 -07:00
Brock Whittaker 34f9ccb87c alerts: Change sidebar alerts to be at top of the screen.
This changes the alerts to be individual boxes that slide down from
the top of the screen for a better UI experience.
2017-04-03 16:22:05 -07:00
Steve Howell c0a6038a95 css: Enforce one selector per line.
While it's sometimes nice to put a few selectors on the same line,
it is generally better to have a consistent way of formatting our
selectors, and most of our code up until now lists them vertically.
This change fixes the linter to enforce one selector per line, and
it cleans up the places in the CSS where we had multiple selectors
on the same line.

The advantages of one-per-line are as followers:
    * cleaner diffs
    * easier to see when multiple areas of the app may have the
      same format
    * less likely to go over 80 cols
    * makes it more clear where we have deep nesting in the
      individual selectors
    * makes it easier for our linting tools to enforce
      whitespace violations

This also fixed an old bug where we had ".landing_page h2, h4", which
sets "h4" styles outside of the landing page.
2017-03-26 16:57:33 -07:00
Steve Howell 3d76088f59 tools: Make CSS style more consistent with opening brace.
We now always put the opening brace of a CSS section on
the same line as the last selector (with a space in front).
2017-03-26 16:57:33 -07:00
Tim Abbott 5672618b82 css: Extract popovers.css. 2017-03-25 20:14:17 -07:00
Tim Abbott 69323d12c9 Fix click message_content covering bottom half of avatar.
This causes clicks to correctly hit the avatar an open the profile
popover.

Fixes #4251.
2017-03-23 15:22:06 -07:00
Aditya Bansal 17a4c5d0d8 Fix horizontal scroll for super long lines in bullet lists.
Fixes: #4245.
2017-03-23 15:19:28 -07:00
Tim Abbott 1f89058023 Fix broken size for message actions popover.
This fixes a regression introduced in
23a5f56023 where the `.popover-inner`
CSS wasn't scoped properly.
2017-03-22 16:44:23 -07:00
hackerkid ed72ee476f Make user_popover use user_info_popover template. 2017-03-22 16:04:38 -07:00
hackerkid 23a5f56023 Add sender avatar in message popover. 2017-03-22 16:04:38 -07:00
Raghav Jajodia 9707c74f33 message_edit: Added copy to clipboard button.
A copy-to-clipboard button is added over message-edit textarea.
Closes #3239.
2017-03-22 11:00:18 -07:00
Yago González 34a9e1ae11 markdown: Add TeX typesetting support.
Co-authored-by: Reid Barton <rwbarton@gmail.com>

Fixes #2056.
2017-03-21 16:40:00 -07:00
adnrs96 257187a239 Clean zulip.css to use 4 space indents. 2017-03-21 13:40:05 -07:00
Mahim Goyal 91252b3909 Fix alignment in actions drop-down menu.
Fixes: #3010.
2017-03-20 21:21:53 -07:00
Brock Whittaker 2775707a67 hotkeys: Add lightbox image feed with controls.
This adds an image feed that you can scroll through with hotkeys
in the lightbox.

The left and right arrow keys along with the left and right arrows
will go to the prev/next image, and clicking on an image will also
take a user to that image.
2017-03-19 22:11:38 -07:00
Steve Howell eece725073 compose fade: Limit user-fade to .user-sidebar-entry.
Our JS/CSS now only uses the user-fade class for elements
that have the user-sidebar-entry class.  This should prevent
bugs related to having doubly opaque elements.
2017-03-16 14:06:40 -07:00
Steve Howell 19729b83f4 compose fade: Introduce message-fade/user-fade CSS classes.
We now have specific HTML/CSS classes for message fading and
user fading.  They currently both have the same effect, changing
opacity, but we can now more easily treat them differently.

This change also removes "faded" attributes in compose-fade,
which avoids some confusion related to landing pages having
a "faded" class as well.
2017-03-16 14:06:40 -07:00
Brock Whittaker 3bc2ed6dc9 Switch "invite users" to new component overlay.
Fixes #4036.
2017-03-15 12:29:09 -07:00
Brock Whittaker 11c7bb49d4 Restyle "invite" modal.
This restyles the invite modal to have the same header as the rest of
the overlays.
2017-03-14 14:47:12 -07:00
Steve Howell 1e5ec689b7 tools/css: Trim whitespace around CSS values. 2017-03-14 09:29:56 -07:00
Tim Abbott a1d7e1b5f6 css: Tweak padding around code blocks to look nicer.
It makes sense to a bit tighter padding around code blocks in a chat context.
2017-03-13 22:35:00 -07:00
Brock Whittaker a9db9eb389 css: Improve code block styling.
Change pygments for prettier syntax highlighting with white
backgrounds for both inline and multi-line code blocks.
2017-03-13 22:34:11 -07:00
Brock Whittaker 30bd61530d Add elastic scrolling to iOS.
This adds elastic scrolling to iOS to allow for scroll inertia
properties as standard webpages should exhibit.
2017-03-08 17:04:10 -08:00
Tim Abbott 345ece0ee5 message view: Improve readability of dates and times. 2017-03-07 18:56:30 -08:00
Boris Yankov 890ff16b37 message view: Increase font weight of timestamps for readibility. 2017-03-07 18:56:05 -08:00
Brock Whittaker 4d5aa3ddc9 Restyle and refactor .message_controls for better UX.
This refactors the .message_controls to stop relying on absolute
positioning and strange CSS, and throws them inline.

This also restyles so they hang to the right of the time which is now
always present.

Fixes: #3761.
2017-03-06 22:24:21 -08:00
hackerkid 3fdad8b64a Align message info action lines vertically. 2017-03-04 16:26:41 -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
Ayush Jain 455c1919fc Add customizable invite-new-user text.
This makes life a lot easier for people inviting users to a new Zulip
organization, since they can give some form of context now.

Modified by tabbott to clean up CSS, backend code flow, and improve
the formatting of the emails.

Fixes: #1409.
2017-02-21 22:35:01 -08:00
Kartik Maji 1a697b6e02 Add frontend to show message edit history.
Fixes #268.

Modified significantly by tabbott to:
* improve code cleanliness / repetition
* add missing translation tags
* move code into message_edit.js
* correspond with the new backend.
* not display the option for messages only topic-edited
2017-02-19 17:41:06 -08:00
Tommy Ip abf522adfb Add styling to distinguish bots from human users in message view.
With work by Brock Whittaker and Tim Abbott on rebasing + changing
styling.

Fixes #1107
2017-02-16 17:00:21 -08:00
Durga Akhil M u1604vbox f833f68bfd mute_ui: Add UI for mute on recipient bar.
Like the topic edit pencil icon, the new UI is mostly invisible, but
appears when you hover over the recipient bar.

* Added a tag to hold the mute button in recipient_row.handlebars with
corresponding styling in zulip.css.
* Added an event handler for the mute button in click_handlers.js.

Fixes: #2235.
2017-02-12 00:45:20 -08:00
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