Commit Graph

673 Commits

Author SHA1 Message Date
Brock Whittaker 1bb260325c settings: Improve general table styling.
This generally makes the tables that have thead attributes look
uniform with the tables that use the first tbody column as a thead.
2017-05-04 16:43:34 -07:00
Tim Abbott b0bd501c0d portico: Remove now-unused hello-footer code. 2017-05-04 16:09:12 -07:00
Brock Whittaker d21e1ccc1c Unify styling on password reset flow pages. 2017-05-04 16:09:12 -07:00
Brock Whittaker 55b1d480ec Fix avatar sizing issue.
The avatars were previously their natural width, however the avatars
should always be 100% width since the height and width of the images
are known to always be equal.
2017-05-04 16:09:12 -07:00
Brock Whittaker 736701f900 Add account_send_confirm styling. 2017-05-04 16:09:12 -07:00
Brock Whittaker 48ac49385e Fix lack of uniformity with box content layout.
The various portico pages had various styling differences that made
them less consistent when responsive.
2017-05-04 16:09:12 -07:00
Brock Whittaker 89242da269 Remove .footer_padder in favor of proper screen tolerances.
This removes the .footer_padder element in favor of just having correct
min/max heights and margins on the footers.
2017-05-04 16:09:12 -07:00
Brock Whittaker 58d00af6c3 portico-pages: Fix flex height issues with content.
This fixes the existing issue where the titles of content is chopped
off when the screen height is too small.
2017-05-04 16:09:12 -07:00
derAnfaenger 37a8a43cc4 Change cursor to pointer when hovering over streams.
Before this commit, hovering over the blank area of a stream
would not reflect its "clickability". This behavior is
inconsistent with other clickable lists, such as the user sidebar.
This commit changes the cursor to a pointer when hovering over a
stream and removes annoying pointer-default-pointer changes when
hovering with the mouse over multiple users in the user sidebar.
2017-05-04 15:55:51 -07:00
Brock Whittaker ed4866b9f9 message-feed: Improve scroll perf by removing scaling on emojis.
This removes scaling from the emojis by changing the background size to
a lower value and then allowing for the widths and heights of the
emojis to be proportionally smaller.

The transform: scale property would cause many more repaints in Chrome
and other browsers than should have been necessary which would render
messages above and below the feed light grey boxes that would
momentarily flash as blank before filling with content.

Modified by tabbott to use a percentage in the background-size.

Fixes #4660.
2017-05-03 14:49:47 -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
Cory Lynch 5d6724345a Fix scrollbar stylining for reactions picker.
Scrollbar previously collapsed when searching for
emoji and became misaligned. Fixed in CSS.
2017-05-02 14:23:26 -07:00
Tim Abbott 07db233ffd register: Remove long-unused company-email HTML/CSS. 2017-05-01 17:18:03 -07:00
Rohitt Vashishtha 47eb19331d ux: Display error on login/registration if no auth backends are enabled.
Also makes a small tweak to CSS to ensure the styling is consistent on
the two pages.

Fixes #4525.
2017-05-01 17:17:37 -07:00
Brock Whittaker 2fafc6bec5 Change streams subscriber lists to render progressively. 2017-05-01 16:56:54 -07:00
Brock Whittaker 4e980ad545 Change <thead> styling in settings containers.
Tables were previously improperly using the <tbody> to show the headers
so it was not obvious that the styling for <thead> did not represent
the styling of the rest of the tables anymore, so this normalizes
the styling to be consistent with how it looked when the first row
was in the <tbody>.
2017-05-01 16:56:54 -07:00
Brock Whittaker 3ff55034fe admin: Restyle administration checkboxes to match new style.
This restyles the administration checkboxes to look similar to those
that are currently present in the settings section.
2017-05-01 16:01:36 -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
Jack Zhang a9505654da emoji: Replace the old compose emoji picker with the reactions picker.
This removes the old compose emoji picker in its entirety, changing
the few callbacks needed to launch the reactions-style emoji picker
instead and hook it up properly.

Callbacks for reactions and composing messages are distinguished by
selecting for, respectively, the .reaction and .composition classes.

Fixes #4122.
2017-04-30 15:14:42 -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
Rishi Gupta cf90fed418 stats: Remove users_today from Active Users.
It's technically the number of users yesterday. Also, "number of active
users today" suggests something like daily actives today, whereas this graph
currently shows 2-week actives.
2017-04-28 16:15:07 -07:00
Tim Abbott 6c9daf7c3b alerts: Clean up network error messages a bit. 2017-04-28 12:58:30 -07:00
Brock Whittaker c7cb20d873 alerts: Polish .alert-box .alert styling.
This polishes the styling on the alerts inside of the .alert-box to
have more appropriate colors, margins, and padding.
2017-04-28 12:50:04 -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 dcc2b3a900 left-sidebar: Restructure <a> to cover the <li>.
This restructures the <a> tag to be clickable essentially anywhere
within the <li> tags, unlike before where due to it being “inline”, you
had to hover over the text in particular.
2017-04-28 09:56:15 -07:00
Brock Whittaker e7ac6710e9 Resize <li> text and align icons.
This resizes the text of the line items to be 5% larger and aligns
the #global_filters icons to be centered vertically.
2017-04-28 09:56:15 -07:00
Brock Whittaker 7afbc9ddd6 Redesign login and registration pages.
This completes a major redesign of the Zulip login and registration
pages, making them look much more slick and modern.

Major features include:
* Display of the realm name, description and icon on the login page
  and registration pages in the subdomains case.
* Much slicker looking buttons and input fields.
* A new overall style for the exterior of these portico pages.
2017-04-26 18:04:05 -07:00
Brock Whittaker 6e512dddcb left-sidebar: Make <li> height and icon size consistent.
This makes the height of the list-items all 24px and changes
the home icon to be a slightly larger 16px instead of 14px which
looked visually smaller than the other icons.
2017-04-26 17:13:03 -07:00
Tim Abbott b43385ec34 Shrink max display width of topics.
This fixes an issue with topic names overlapping in the left sidebar.
While we're doing that, it makes sense to shrink the maximum size of
the topic input box, to discourage sending with topics that will be
cut off.
2017-04-25 17:51:47 -07:00
Brock Whittaker 3d64d190c1 Change right sidebar unread counts to be rounded.
This changes the right sidebar unread count styling to match the left
sidebar styling — in that they all now should have a 4px border radius
on the edges of the unread count blocks.
2017-04-25 17:47:36 -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
digi0ps 8fb9d2bff3 settings: Redesign settings/administration panel buttons.
This redesigns all the ugly bold-colored buttons in the settings and
administration pages.
2017-04-25 16:33:59 -07:00
digi0ps 1cc9cb969b sidebar: Make topic name width consistent. 2017-04-25 11:58:33 -07:00
digi0ps eb852ef19e sidebar: Move chevron in the stream list further from the scrollbar.
Previously, the chevrons were too close to the scrollbar. This commit
fixes that by moving it farther from the scrollbar.
2017-04-25 11:58:33 -07:00
Harshit Bansal 6cb03ea78e frontend: Add UI necessary to change emoji set.
Note that this code is disabled until the infrastructure for the
feature can be finished.

Tweaked by tabbott to use slightly cleaner names for the various sets.
2017-04-24 22:31:30 -07:00
Tim Abbott b3c8562bd9 css: Remove use of under-specified 'thin' borders.
This was causing buggy behavior in our emoji reactions when zoomed to
200%.
2017-04-20 15:07:26 -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
Tim Abbott 540bfce83f reactions: Use perfectScrollbar for emoji reactions scrollbar.
This fixed the fact that the scrollbar for this popover was super ugly
on Linux, while also ensuring that we have a consistent 6 emoji per
row in the popover (an important detail for the arrow hotkeys).
2017-04-18 22:58:11 -07:00
Italo Batista d77d7dc493 analytics: Add a 'me' option for messages_sent_over_time.
With some tweaked by Rishi Gupta.

Fixes #3630.
2017-04-17 22:18:24 -07:00
Raghav Jajodia 6be6aec825 components: Add new css to text input fields. 2017-04-17 11:12:01 -07:00
Raghav Jajodia d4e1f0a9a8 stream_filter: Add clear-search button to Search stream input field. 2017-04-17 11:12:01 -07:00
Raghav Jajodia 99f8750684 Refactor code associated with clear_search button.
Transfer css from right-sidebar.css to components.css to make it reusable.
The 'margin-bottom' property is removed from 'input-append' class as
it does not affect the styling of the element.
2017-04-17 11:12:01 -07:00
Brock Whittaker f08c8b1c56 Fix settings page height issue.
The height of the settings page content is not quite as tall as the
settings page could allow which makes for an empty white space at the
bottom of the settings content container.
2017-04-14 14:38:45 -07:00
Yago González f62b8ea080 css: Properly wrap text inside tabs.
The tabs can have text inside them that is wider than 90px, especially
in some unexpected cases (e.g. a translation longer than the original
English string).

This type of tabs can be seen in the following popover menus:

 - Stream subscriptions
 - Help (with hotkeys, formatting info, etc.)
 - Settings

Now text wider than the tab is ellipsized so it doesn't cause any
problem with the rest of the layout, except in the help popover (where
it gets wrapped).
2017-04-14 14:15:37 -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