Commit Graph

514 Commits

Author SHA1 Message Date
Brock Whittaker 836bfd8f45 dark-mode: Refactor gear-menu icon to be translucent.
This makes the gear-menu icon translucent rather than medium grey and
black (which isn't even our base text color) to be half opaque (approx)
and base text color.
2017-11-29 16:44:43 -08:00
Tim Abbott 377cad7dc2 css: Deduplicate user-group-mention CSS.
These CSS rules were identical before, anyway.
2017-11-29 16:43:46 -08:00
Brock Whittaker e62ba13887 dark-mode: Change `background-image` and `background-color` to background.
There isn’t any reason for either of these mention code paths to be
using specified background types, so convert them all to background so
inheritance is more simple.
2017-11-29 16:42:07 -08:00
Balaji2198 585cd36a2e setting: Align elements properly in invite users.
Adds a margin-top to `Check all` and `Uncheck all` elements.

Fixes #7488.
2017-11-26 09:13:33 -08:00
Tommy Ip f425f9ad3d navbar: Fix transparency issue. 2017-11-22 13:02:13 -08:00
Andy Perez bdaf3275f7 message feed: Fix display height of empty messages.
Ideally, empty messages are never created.  However, sometimes even
non empty messages can act as if empty, such as one consisting only
of an opening and closing blockquote tag.  This sets the
.message_content to have a minimum height equal to the line height.
This is overridden with zero (the default) in the case of collapse.
2017-11-17 11:40:22 -08:00
Brock Whittaker 015cd65e8f message-feed: Change borders from grey to translucent.
This changes the borders from grey to translucent and bins them to the
nearest tenth of opacity.
2017-11-17 10:30:23 -08:00
Brock Whittaker 151e5b0e51 app: Remove column-middle background color.
The declaration making the background color white seems to be
unnecessary.
2017-11-17 08:44:04 -08:00
Brock Whittaker f5f217570c message-feed: Change private message blue to be translucent.
This looks the same on white, different on dark blue.
2017-11-17 08:44:04 -08:00
Brock Whittaker 53616cc714 gear-menu: Inherit body color.
Instead of overriding the default link color with grey, just inherit
the body color.
2017-11-17 08:44:04 -08:00
Brock Whittaker a77b41dce4 navbar: Remove background attribute on search bar.
This removes the background color declaration on the search bar so it
can inherit the standard input background color.

navbar: Let search bar inherit from base color.
2017-11-17 08:44:04 -08:00
Brock Whittaker 3df96a27cc message-feed: Make stream labels inherit color.
Instead of overriding the default link color with grey, just inherit
the base color.
2017-11-17 08:44:04 -08:00
Brock Whittaker ff39aa0eb5 message-feed: Remove white backgrounds on messages.
They aren’t necessary either I don’t believe.
2017-11-17 08:44:04 -08:00
Brock Whittaker cd3ea16785 navbar: Remove white background.
It’s never been necessary afaik.
2017-11-17 08:44:04 -08:00
Brock Whittaker e806300b51 settings: Use `.modal-bg` class to control background color.
This lets the `.modal-bg` class dictate background color instead of
manually setting it for all modals.
2017-11-17 08:44:04 -08:00
Steve Howell f35b7b4c77 css: Convert colors to hsl() format.
This changes most of the app-related CSS files, but leaves
things like landing pages and bootstrap alone.
2017-11-13 12:43:43 -08:00
Steve Howell ba51078418 Simplify CSS linter and clean up CSS.
The CSS linter was pretty hard to reason about.  It was
pretty flexible about certain things, but then it would
prevent seemingly innocuous code from getting checked in.

This commit overhauls the pretty-printer to be more composable,
where every object in the AST knows how to render itself.  It
also cleans up a little bit of the pre_fluff/post_fluff logic
in the parser itself, so comments are more likely to be "attached"
to the AST node that make sense.

The linter is actually a bit more finicky about newlines, but
this is mostly a good thing, as most of the variations before
this commit were pretty arbitrary.
2017-11-13 12:43:43 -08:00
Cynthia Lin 1bcc07f7dd popovers: Add bot icon to user profile popovers for bots.
Fixes #7176.
2017-11-10 11:18:43 -08:00
Cynthia Lin a3e5f2a887 message view: Use new custom bot icon in messages. 2017-11-10 11:18:43 -08:00
Umair Khan ef545b9180 user-groups: Add css for user-group-mention class. 2017-11-09 17:35:46 -08:00
Aastha Gupta 0fae83b301 notifications: Prompt user to enable desktop notifications.
This is a two-step notifications process that will ask a user
to enable notifications and if they click exit give them three
options:

1. Enable notifications.
2. Ask later.
3. Never ask on this computer again.

The first two are self-explanatory (ask later = next session it
asks again). The third is captured and stored in localStorage and
a check is done on page load to see whether or not notifications
should be displayed.

Commit modified heavily by Brock Whittaker <brock@zulipchat.com>.

Fixes #1189.
2017-10-18 21:55:43 -07:00
Brock Whittaker 04273c077d sidebars: Make sidebar margins more uniform.
The left and right sidebar are now equidistant from the edges of the
center pane, and the contents within have equal margin from the edges
of their containers (5px).
2017-10-18 18:03:06 -07:00
Brock Whittaker 4ab8337b2b message-feed: Normalize padding for topic headers.
This normalizes the padding on the sides of the topic headers to
all be 6px on the left and right for both PMs and for streams.
2017-10-12 14:25:40 -07:00
Brock Whittaker 33c1755c69 message-feed: Remove visually unappealing top border.
This removes an unecessary and unappealing top border to the
message headers while keeping all else the same.
2017-10-12 14:25:40 -07:00
Brock Whittaker 9aa2d4ee94 spectrum: Remove the box-sizing attribute on input.
This removes the `box-sizing` attribute on the spectrum input that was
causing the characters to overflow the bounds of the padding, which
would cut off things like the bottom of a “g” or the top of an “f”.

Fixes: #6361.
2017-09-26 11:43:19 -07:00
Brock Whittaker ae4c3873af navbar: Re-center home icon within <li> tab.
The home icon was too far to the right and did not have equal
padding within the <li> tab so this makes the padding an equal
10px on the left and right and none on the top and bottom.
2017-09-20 15:23:38 -07:00
Harshit Bansal afba03f84e emoji_picker: Change reaction popover's base element.
Change the reaction popover to be based off the container elements
for the various message control icons. This will enable us to easily
control the visibility of the base element when the popover is opened
or closed. Also removes redundant `reactions_hover` class.
2017-09-16 08:17:41 -07:00
Brock Whittaker ec4cd950ea Make tooltips more legible.
This makes the JavaScript tooltips more legible by increasing
the font size and decreasing the line-height, while also increasing
the opacity of the tooltip from 0.8 => 1.
2017-09-16 00:41:57 -07:00
Tommy Ip 641d4c167b Remove line left of search bar 2017-09-15 03:39:40 -07:00
Tommy Ip 3fb660d46e Fix search bar box-shadow alignment. 2017-09-15 03:39:40 -07:00
Steve Howell 99f4d420a5 Reduce the font size for search.
Until we get search bubbles, the search text is kind of a
distracting detail for most users.  This just makes the
height 2px smaller for now.  This will also make more text
show up on mobile web.
2017-09-06 18:49:54 -07:00
Steve Howell 8e2d9b8f68 Make recipient bar styling more compact and clean. 2017-09-06 18:49:54 -07:00
Steve Howell ad52ef27ee Make tab styling more compact and clean. 2017-09-06 18:49:54 -07:00
Cynthia Lin 23e8582bfd message view: Change PM flag to match PM compose flag.
Fixes #6413
2017-09-06 10:12:13 -07:00
Shubham Dhama dc49f563eb message view: Fix line-wrapping of empty conversation/feed message. 2017-09-06 09:13:33 -07:00
Shubham Dhama 67abd9d1f7 message view: Center-align text of an empty conversation/feed message.
Fixes: #6150
2017-09-06 09:13:33 -07:00
Cynthia Lin 5f9cd1f7d2 message view: Set mininum height for embedded tweets.
Fixes #5973.
2017-08-28 20:36:12 -07:00
Tim Abbott f67326bb81 css: Rename 'Humbug' font to Source Sans Pro.
That's what the font is actually called, and should help future Zulip
developers save time trying to figure out what's up and why our font
is unrelated to the "Humbug" font on the Internet.
2017-08-28 16:16:08 -07:00
Harshit Bansal 912d4ebd66 reactions.css: Remove the hack used for correctly positioning the emojis. 2017-08-28 14:49:40 -07:00
Tim Abbott bb655e6945 css: Fix selecting of the EDITED notices.
Apparently, the previous approach didn't actually work.
2017-08-27 22:54:34 -07:00
Tim Abbott 3c8eb3c743 message_edit: Create recipient_bar_controls span.
This refactor will facilitate making it possible to set CSS properties
on this controls span; in particular, we're hoping to disable user
selection of the whitespace in this region.

The main side effect of this refactor is that we need to add JS code
to also hide the icon-vector-pencil element, since it's now in a new
span.
2017-08-27 22:18:05 -07:00
Tim Abbott 36fa6fe548 css: Remove duplicate emoji height CSS. 2017-08-27 17:20:37 -07:00
Cynthia Lin 8addc9b97e message view: Maintain stream color border on @-mention messages.
Fixes #6241
2017-08-24 23:37:59 -07:00
Brock Whittaker a6f2a0c943 settings: Remove whitespace on left side of bot key.
The bot API key when selected in the "Your bots" panel would have
some whitespace due to the fact that the HTML markup would make
some space between the span and button.

Fixes: #6189.
2017-08-23 15:31:28 -07:00
Vaida Plankyte cd1b01996e frontend: Add perfectScrollbar to invite users modal. 2017-08-16 08:23:34 -07:00
Rishi Gupta be7f6db854 tutorial: Remove rest of tutorial.
Replaces the call to welcome() in tutorial.start with finale(true), and then
iteratively removes all orphaned code.
2017-08-01 22:38:22 -07:00
Brock Whittaker d1508a6435 Add "touch-action: manipulation" for less tap delay.
This is a google recommendation to remove the 300ms tap delay on
mobile web.
2017-08-01 12:37:08 -07:00
Vaida Plankyte 30361f50f8 frontend: Fix elements that are not visible should not be focusable.
Fixes #5534.
2017-08-01 08:56:11 -07:00
Brock Whittaker 8445f886d7 Add ability to pan and zoom lightbox images.
This adds the ability to pan and zoom lightbox images because they
are now converted to <canvas> elements.
2017-07-31 17:03:31 -07:00
Harshit Bansal f7f4d1ca58 markdown: Fix the broken rendering of tables.
It was a regression introduced in the commit
`0d08acaa1b5713be464dfca4836e5b238f45621c`.
2017-07-24 17:31:08 -07:00
Brock Whittaker 1e7665effe message_feed: Remove unnecessary "user-select: none".
There is a "user-select: none" (cross-browser) that was put on
the #bottom_whitespace div, but the div doesn't actually have any
content that can be selected, and it also makes it difficult to
deselect selected text because when clicked over it will save the
current selection.
2017-07-17 16:27:30 -07:00
Vaida Plankyte b533732c6b frontend: Change custom_invite_body to use an ID. 2017-07-14 14:45:10 -07:00
Tim Abbott ac3e9256bb frontend: Remove unused sender_name_hovered CSS. 2017-07-11 16:30:34 -07:00
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