Commit Graph

2293 Commits

Author SHA1 Message Date
Anders Kaseorg b709eeb4d1 third: Remove zocial.
It’s unused since commit 7afbc9ddd6
(#4531).

Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
2019-07-02 15:04:58 -07:00
Pragati Agrawal 2e97b03b2b css: Use SCSS nesting in `settings.scss` for `.new-style`. 2019-06-24 22:14:13 -07:00
Pragati Agrawal b30ae0b7f5 css: Remove redundant `#settings` from `settings.scss`.
This commit removes `settings` element from setiings.scss since now no
such element exists.
2019-06-24 22:12:42 -07:00
Pragati Agrawal 45677990fd css: Remove redundant `#organization` from `settings.scss`.
This commit removes the redundant `#organization` from settings.scss as
organization id no longer exists.
2019-06-24 22:12:42 -07:00
Vaibhav 336ea98dd9 css: Remove buggy white-space style from profile modal content.
This is to make the user profile settings rendered content in accordance
to the message box styling.
2019-06-24 22:10:24 -07:00
Pragati Agrawal 747e797092 stream settings: Disable Mobile notifications if push bouncer not set up.
This commit disables "Mobile notifications" if `push_notifications` are not
enabled. It also adds a tooltip explaining why this is disabled.

Fixes #12208
2019-06-24 14:46:45 -07:00
Yashashvi Dave 84234cabcb stream settings: Disable click handler on label for mute settings.
If stream setting is disabled, setting-checkbox can not be
clicked. Although, it does allow to change value by clicking
on setting label.
This commit fixes above bug and disable click handler on
setting-label for disabled stream settings.
2019-06-24 14:46:45 -07:00
YashRE42 450e675b11 night-mode: Fix invite_user_form overlap bug.
Adding the element for the invite link would cause the modal footer to
shift upwards, in nightmode this caused the stream list to appear
beneath the footer as the footer background was transparent. This commit
replaces that styling with a solid equivalent color.
2019-06-24 13:00:49 -07:00
Shubham Padia 80a3651cf3 auth: Let user choose emails in GitHub auth.
Previously, our Github authentication backend just used the user's
primary email address associated with GitHub, which was a reasonable
default, but quite annoying for users who have several email addresses
associated with their GitHub account.

We fix this, by adding a new screen where users can select which of
their (verified) GitHub email addresses to use for authentication.

This is implemented using the "partial" feature of the
python-social-auth pipeline system.

Each email is displayed as a button. Clicking on that button chooses
the email. The email value is stored in a hidden input above the
button. The `primary_email` is displayed on top followed by
`verified_non_primary_emails`. Backend name is also passed as
`backend` to the template, which in our case is GitHub.

Fixes #9876.
2019-06-23 21:27:04 -07:00
Aman Agrawal 904422d8bc css: Convert colors from rgba to hsla format. 2019-06-20 11:34:59 -07:00
Aman Agrawal 3e589cf65e css: Convert colors from rgb to hsl format.
Note that we are not converting the stream colors.
2019-06-20 11:34:34 -07:00
Thomas Ip 549338dc50 refactor: Use variables for repeated colors in alerts.scss. 2019-06-20 11:20:29 -07:00
Thomas Ip 1fa82b9dea refactor: Extract display and animation properties from alert styling. 2019-06-20 11:20:29 -07:00
Pragati Agrawal 5af8b980fe css: Remove redundant `#settings` from `zulip.scss`.
Since `settings` element no longer exists, hence removing it from
zulip.scss.
2019-06-18 10:09:23 -07:00
Pragati Agrawal 6105b05f50 css: Remove redundant `#organization` from `zulip.scss`.
This has been dead code since 1143ed7219.
2019-06-18 10:03:35 -07:00
Hemanth V. Alluri 52a5474000 realm_plan_type: Restrict uploading organization logos by plan type.
Using the page_param variable "plan_includes_wide_organization_logo"
disallow users in a realm with a "LIMITED" plan type from uploading
their own wide organization logos and instead suggest that they
upgrade their plan using the page_param variable
"upgrade_text_for_wide_organization_logo" for the suggestion message.

Backend validation for this feature already exists.
2019-06-14 16:21:12 -07:00
Yashashvi Dave 15cd238acb notification settings: Remove unused template argument.
This commit removes `propagate_stream_notifications_change`
element from notification template, as it is neglected
since commit b553507412.
Commit also removes `end_content` argument from
`settings_checkbox.handlebars` which was only used
for removed property.
2019-06-14 14:07:22 -07:00
Alexandra Ciobica 5a4f7d9ade css: Align `Invite more users` button. 2019-06-14 09:59:59 -07:00
Thomas Ip da8473e958 draft: Fix draft list not being able to scoll to bottom.
Fixes #12552.
2019-06-13 11:35:14 -07:00
Alexandra Ciobica fbfd5d577a integrations: Move the css for the integrations page into a separate file.
The integrations page had css in both `landing-page.scss` and
`portico.scss`.  With this commit, the styles are mostly unified into
a single separate file.
2019-06-12 17:42:22 -07:00
Alexandra Ciobica ab02fb81c5 css: Remove unused portico css.
This *-page-header CSS all dates from a nearly-original version of the
portico design system, and hasn't been functional in years.
2019-06-12 17:41:50 -07:00
Alexandra Ciobica 13d78e9da7 integrations: Make header of integrations/docs on mobile look good.
Change the display from `block` to `flex` in order to be able to
arrange the elements as wanted. Reset the css of the header elements
only for the description view. Add `font-size: 1.2em` because the font
doesn't need resizing in this case, it needs resizing only when the
title is in the box.

Removed the `padding-bottom` from the `nav` on mobile because it
overlaps the new header and you cannot click the back button from the
integrations.

Fixes: #12365.
2019-06-12 17:33:53 -07:00
Alexandra Ciobica 869c5ce27b integrations: Change integrations content.
We remove the title from `errbot` integration documentation so that
all documentations have the same style.  See
https://github.com/zulip/python-zulip-api/pull/515 for a similar
change to integrations where the docs live elsewhere in version control.

We also remove the `margin: 0` from the instruction tip because where
the tip is followed by a list, there is no space between the two; this
change doesn't mess up the other places where the tip is used.
2019-06-12 17:33:00 -07:00
Vaibhav f3d0d955c3 css: Use SCSS nesting in lightbox.scss for `#lightbox_overlay`. 2019-06-12 17:07:41 -07:00
Vaibhav a7b820ddc3 css: Use SCSS nesting in lightbox.scss for `.image-actions`. 2019-06-12 17:07:41 -07:00
Vaibhav 7610c5f025 css: Cleanup lightbox.scss for download and open buttons.
* There is only one word inside the buttons and that too was wrapped
  inside `span.text` which was unnecessary. This is removed. All
  corresponding properties (font-size) are moved to `.button`.

* Since the only `a` inside image actions are these buttons, all
  the properties are transfered to `.button`.

* Similarly, properties for `.icon` are moved to `.button` and it is
  also removed from the template.
  * Font size was redundant for `.icon`
  * display property is moved
2019-06-12 17:07:41 -07:00
Vaibhav b97ba0b026 css: Remove redundant `span:nth-of-type(2)` rule from lightbox.scss.
Since no such element exists inside `.image-actions`.
2019-06-12 17:07:41 -07:00
Vaibhav 288a0c241c css: Reorder lightbox.scss so that `.image-actions` are in same place. 2019-06-12 17:07:41 -07:00
Vaibhav 96fecdd7d5 css: Use SCSS nesting in lightbox.scss for `.button`. 2019-06-12 17:07:41 -07:00
Vaibhav ede9faef2e css: Remove redundant `.download` top positioning in lightbox.scss.
* This rule was already invalid since `.download` is used in
  templates as `.button.download` and here it was defined as
  `.button .download`

* Even if the above was to be corrected, `.download` has position
  `static` and hence the top positioning would never have affected
  anything.
2019-06-12 17:07:41 -07:00
Vaibhav 3641855a2c css: Change rule from `a.button` to `.button` in lightbox.scss.
This works since the buttons in lightbox overlay are `a`s. Even if
they weren't so, this style can generally be applied to all the
`.button`s.
2019-06-12 17:07:41 -07:00
Vaibhav 351b3e9332 css: Remove redundant .clear-float since already defined in app_components. 2019-06-12 17:07:41 -07:00
Vaibhav b75b6ce64c css: Use SCSS nesting in lightbox.scss for `.center`. 2019-06-12 17:07:41 -07:00
Vaibhav a1f2b2b5ba css: Nest `.image-list .image.selected` inside `.center`. 2019-06-12 17:07:41 -07:00
Vaibhav 7b059fe8bf css: Use SCSS nesting in lightbox.scss for `.player-container`. 2019-06-12 17:07:41 -07:00
Vaibhav 414358e0a0 css: Use SCSS nesting in lightbox.scss for `.image-description`. 2019-06-12 17:07:41 -07:00
Vaibhav a64aac4299 css: Reorder lightbox.scss so `.image-descriptio` are in same place. 2019-06-12 17:07:41 -07:00
Vaibhav 8ab4d38b6e css: Use SCSS nesting in lightbox.scss for `.image-preview`. 2019-06-12 17:07:41 -07:00
Vaibhav 249416e94a css: Use SCSS nesting in lightbox.scss for media queries. 2019-06-12 17:07:41 -07:00
Vaibhav 9096affe77 css: Move stylesheets not included in the app to another directory.
This moves all the stylesheets like stats, billing etc. to another
directory called `static/styles/portico/`, matching the directory
structure of our JavaScript.
2019-06-12 16:59:52 -07:00
Alexandra Ciobica 8f9fa151a6 css: Center left sidebar `Add streams icon`.
The `+` from the add streams button was not on the same line as the
`#`s and the text was not aligned with streams name.  These changes
fix that.
2019-06-12 16:22:51 -07:00
Alexandra Ciobica 7544d0eb11 css: Add space below `Add streams button`.
This ensures the browser's showing the link feature doesn't occlude
this button.

Fixes: #12519.
2019-06-12 16:22:02 -07:00
Alexandra Ciobica 161d196759 css: Add nightmode variant for fetching more messages loading indicator
Fixes: #12522.
2019-06-07 10:45:29 -07:00
Vaibhav 90a67a6b4f css: Use SCSS nesting in alerts.scss for `.alert`. 2019-06-06 11:41:35 -07:00
Vaibhav 4b315a63cc css: Cleanup alerts.scss combing rules under same selector `.alert`. 2019-06-06 11:41:35 -07:00
Vaibhav 7c51e59a35 css: Use SCSS nesting in alerts.scss for `.alert-box`. 2019-06-06 11:41:35 -07:00
Vaibhav b04e1c918a css: Reorder alerts.scss so `.alert-box .alert` are in same place. 2019-06-06 11:41:35 -07:00
Vaibhav 9f5b1f19e9 css: Use SCSS nesting in alerts.scss for `.alert`. 2019-06-06 11:41:35 -07:00
Vaibhav af5d3769a7 css: Nest `.hotspot-popover` arrows inside `.hotspot.overlay`.
No changes were required in night mode since the night-mode css
already includes the same level of nesting.
Tested visually as well.
2019-06-05 17:08:59 -07:00
Vaibhav 4c41bc1324 css: Use SCSS nesting in hotspots.scss for `.hotspot-popover`. 2019-06-05 17:08:59 -07:00
Vaibhav d43548c7ca css: Use SCSS nesting in hotspots.scss for `.hotspot-popover.arrow-*`. 2019-06-05 17:08:59 -07:00
Vaibhav 209b16e667 css: Use SCSS nesting for in hotspots.scss for `.hotspot-confirm`. 2019-06-05 17:08:59 -07:00
Vaibhav 2b6acbfe03 css: Nest hotspot inline elems inside `.hotspot-inline`.
No changes required here for night-mode.
2019-06-05 17:08:59 -07:00
Vaibhav ce34fe51cd css: Use SCSS nesting in hotspots.scss for `.hotspot-inline`. 2019-06-05 17:08:59 -07:00
Vaibhav 9db1a5458d css: Reorder hotspots.scss so `.hotspot-inline` are in same line. 2019-06-05 17:08:59 -07:00
Vaibhav 74e6b5c926 css: Use SCSS nesting in hotspots.scss for `.hotspot.overlay`. 2019-06-05 17:08:59 -07:00
Vaibhav 5f18cc16b7 css: Reorder hotspots.scss so `.hotspots.overlay` are in same place. 2019-06-05 17:08:59 -07:00
Vaibhav 25db1d953d css: Use SCSS nesting in hotspots.scss for `.hotspot-icon`. 2019-06-05 17:08:59 -07:00
Vaibhav e664eb736a css: Reorder hotspots.scss so `.hotspot-icon` are in same place. 2019-06-05 17:08:59 -07:00
Vaibhav a52c157dd3 css: Add similar nesting to night-mode emoji elements as in reactions.scss.
Due to additional nesting added in reactions.scss, night-mode styles
were prioritized lower than the original rules defined.

Fixes regressions introduced by changes in PR #12473
2019-06-05 12:36:53 -07:00
Vaibhav 3444691fc1 css: Nest elems inside `.emoji-info-popover`.
These include:
* `.emoji-showcase-container`
* `.emoji-popover`
2019-06-03 15:30:51 -07:00
Vaibhav c6071c0d7a css: Reorder so that elems inside emoji info popover are together. 2019-06-03 15:30:51 -07:00
Vaibhav 14a850dcb4 css: Nest elements inside `.emoji-popover`.
These include:
* `.emoji-popover-top`
* `.emoji-popover-category-tabs`
* `.emoji-popover-emoji-map`
* `.emoji-search-results-container`
* `.emoji-popover-emoji`
2019-06-03 15:30:51 -07:00
Vaibhav 3d21cb4bea css: Reorder reactions.scss so elems inside emoji popover are together. 2019-06-03 15:30:51 -07:00
Vaibhav e33f8f0730 css: Nest popover subheading inside emoji map. 2019-06-03 15:30:51 -07:00
Vaibhav 7189de9722 css: Seperate height of emoji map from results container.
The only difference between emoji popover map and results container
is their height. For the results container the height is overridden
in the next rule. Seperating just makes it clearer that both of them
have the same styles except for the height. This also makes it easier
to nest the sub-heading inside the map in the following commit.
2019-06-03 15:30:51 -07:00
Vaibhav 62b1ccee26 css: Nest emoji results heading inside results container. 2019-06-03 12:36:32 -07:00
Vaibhav 1f425d8e58 css: Nest emoji preview and canonical name inside showcase container. 2019-06-03 12:36:32 -07:00
Vaibhav a418984bf2 css: Nest `.message_reaction .emoji` inside `.message_reactions`. 2019-06-03 12:36:32 -07:00
Vaibhav 30da8bdf9b css: Rename info-overlay tab-switcher to `.tab-switcher.allow-overflow`.
This apparently is no longer used in any place hence there were no
changes required in the templates.
2019-06-03 12:16:16 -07:00
Vaibhav 56e97d5c37 css: Use SCSS nesting in app_components.scss for `.new-style`. 2019-06-03 12:16:16 -07:00
Vaibhav c6b50fbba6 css: Add `:focus` rule for `.new-style .button.btn-warning`.
Same as the `:hover` rule similar to other buttons.
2019-06-03 12:16:16 -07:00
Vaibhav 09791b9c29 css: Use SCSS nesting in app_components.scss for `.button`. 2019-06-03 12:16:16 -07:00
Vaibhav 331f1fc4b7 css: Reorder app_components.scss so `.button` are in same place. 2019-06-03 12:16:16 -07:00
Vaibhav 6d588b683c css: Use SCSS nesting in app_components.scss for `.tab-switcher`. 2019-06-03 12:16:16 -07:00
Vaibhav 8ebc8602a5 css: Reorder app_components.scss so `.tab-switcher .ind-tab` are together. 2019-06-03 12:16:16 -07:00
Vaibhav 5460c4fce5 css: Use SCSS nesting in app_components.scss for `.informational-overlays`. 2019-06-03 12:16:16 -07:00
Vaibhav a3ec301218 css: Reorder app_components.scss so `.informational-overlays` are seperate.
Two rules corresponding to `.informational-overlays` were placed among the
`.new-style` rules. The file is reordered to seperate them.
2019-06-03 12:16:16 -07:00
Vaibhav 082e0bc6f6 css: Use SCSS nesting in app_components.scss for `.overlay`. 2019-06-03 12:16:16 -07:00
Vaibhav 6abd05f77b css: Reorder app_components.scss so that `.overlay.show` are in one place. 2019-06-03 12:16:16 -07:00
Vaibhav ff7aedd78a css: Use SCSS nesting in app_components.scss for `.clear_search_button`. 2019-06-03 12:16:16 -07:00
Rishi Gupta 849bc382f9 portico: Remove core-team profiles from /team.
This makes the Zulip team look smaller than we are.
2019-06-03 12:14:40 -07:00
vinitS101 ed3e9be142 org_settings: Add collapse/show settings button for users and guests.
For non-admins some organisation settings tabs are 'collapsed' by default.
A button at the bottom of these settings can be used to toggle
show/collapse for these settings tabs.

Resolves #12313.
2019-05-31 22:42:02 -07:00
Puneeth Chaganti 9aa5a2b369 url preview: Use oEmbed html for videos.
Ensure that the html is safe, before using it. The html is considered if it is
in an iframe with a http/https src, based on the recommendations here:
https://oembed.com/#section3

We directly embed the `iframe` html into the lightbox overlay.
2019-05-31 15:59:03 -07:00
YashRE42 5ff27c130a info-overlay: Fix "message formating" styling.
This reverts the temporary solution from 04d9d1d and introduces a
better, more permanent solution for the same bug.
2019-05-30 16:18:54 -07:00
YashRE42 43bc1d4d5a info-overlay: Increase size of arrow icons. 2019-05-30 16:18:54 -07:00
Vaibhav f366c50913 user_info: Add bot owner to the user info popover.
This includes all the changes on the frontend side to include the
bot owner in the popover. Includes the bot owner name as a link which
opens the full profile of the bot owner.

For bots without any owner (such as Notification Bot or Welcome Bot)
in place of bot owner name, 'System Bot' appears for cross realm bots
and 'Bot' for in-realm bots.

Fixes #10844.
2019-05-30 15:45:56 -07:00
Rishi Gupta 0eeae3b6d0 email visibility: Enable feature and add user documentation. 2019-05-27 23:21:39 -07:00
Rishi Gupta ca942b4878 settings: Restructure CSS for fa-question-circle-o.
There are only two of these icons in the codebase, so it is a relatively
safe change.

Making this change to make it easier to add this icon to labels and other
places in settings.
2019-05-27 23:14:26 -07:00
Vaibhav eed09527d5 css: Use SCSS nesting in components.scss for `.new-style`. 2019-05-27 22:50:11 -07:00
Vaibhav f6051d8819 css: Use SCSS nesting in components.scss for `.simplebar-track`. 2019-05-27 22:50:11 -07:00
Vaibhav 5cc331b93f css: Cleanup CSS corresponding to `.flex-row .field`.
A `.field` element already has left margin set as 10px and setting
left-margin explicitly for a `.field + .field` equal to the same
value is redundant. This rule is removed.

Margin is set as `10px 10px` which can be equivalently written as
`10px`.
2019-05-27 22:50:11 -07:00
Vaibhav c50206b824 css: Use SCSS nesting in components.scss for `.flex-row`. 2019-05-27 22:50:11 -07:00
Vaibhav 95ab1f238e css: Reorder components.scss so that `.flex-row` are in same place. 2019-05-27 22:50:11 -07:00
YashRE42 04d9d1d27a info-overlay: Fix "message formating" styling.
The introduction of ".rendered_markdown table" in 00eaf3a, caused some
styling glitches in the "message formatting" overlay, such as an extra
right border and darker internal borders. This commit fixes these
glitches by duplicating bootstrap's table styles.
2019-05-27 14:39:09 -07:00
YashRE42 c2e5aa0f1e info-overlay: Shrink bubble around small_hotkey.
Adding a line-height here makes the bubble around the keys smaller which
makes the text within the bubble seem better aligned.
2019-05-27 14:39:09 -07:00
Anders Kaseorg eec608d6a3 css: Improve SimpleBar scrollbar contrast.
Show black scrollbars with a thin light border in day mode, or white
scrollbars with a thin dark border in night mode (both at 50%
opacity).  This matches the native scrollbars on macOS pretty closely.

Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
2019-05-23 17:26:19 -07:00
Greg Price de66b3b0f1 corporate: Add a /jobs page, with job posts for mobile/fullstack.
With various edits from Rishi and Tim.
2019-05-22 22:20:58 -07:00
Yashashvi Dave 3e50ed2075 org settings: Add organization profile preview option.
This should make it convenient and obvious how verify that their
organization profile looks nice after being markdown-rendered.

Fixes #12105.
2019-05-21 17:53:34 -07:00
David Wood 6b9a9b1e31 org settings: Extract setting for new user waiting period.
This commit separates the `waiting_period_threshold` setting from
the `create_stream_policy` setting, adding a new setting that the user
can use to select a waiting period threshold.

Both the invite to stream policy and create stream policy now have
three options: admins only, members and admins, or members after
waiting period/admins.
2019-05-21 17:36:48 -07:00
Mayank Madan d5e61e20e5 dev tooling: Add "create new user" and "create new realm" buttons.
Significantly tweaked by tabbott to clean up and expand the tests.

Fixes: #6018.
2019-05-21 15:03:37 -07:00
YashRE42 b8afddbd2a info-overlay: Add "bubble" style to keys. 2019-05-21 14:25:24 -07:00
YashRE42 8a914eb111 info-overlay: Unbold "or" between hotkeys. 2019-05-21 14:25:24 -07:00
YashRE42 15d04904bb info-overlay: Switch labels to left, keys to right. 2019-05-21 14:25:24 -07:00
YashRE42 e2ba65aa3f info-overlay: Improve styling of hotkeys.
Fixes: #11573.
This moves help_table to informational-overlays.scss, replaces "," with
"or" and "P" with "shift + p" in order to be more clear and legible
this also improves the styling of the text.
2019-05-21 14:25:24 -07:00
Tim Abbott e35773658b css: Remove weird whitespace rules in markdown content.
These seem to have been there since the very first version of our
markdown styling, and I can't imagine why we would the behavior of not
line-wrapping links now.

(I think the "weird bug" mentioned in the comment history might have
to do with an old animation when you hovered over a link on portico
pages).
2019-05-20 19:14:35 -07:00
Tim Abbott 734c18f356 integrations: Fix buggy ol/paragraph spacing.
This appears to caused by trying to reuse this bit of spacing logic
from the Help Center's CSS rules.

I'm not altogether happy with this fix, but it resolves the issue and
we can defer further work until we're ready to clean up the
portico/landing pages CSS more generally.
2019-05-20 18:54:46 -07:00
sameerchoubey d711b1c8ba portico: Add responsive styling to /integrations/ subpages.
Tweaked by tabbott to clean up the commit message and some confusing
code duplication.

Fixes #11701.
2019-05-20 18:49:27 -07:00
Aditya Bansal 43591d6c71 archives: Display globe icon for web public streams.
In this commit we start reserving the globe icon for web public
streams and replace instances of mixed usage of globe for public
streams with a '#'.
2019-05-20 18:13:31 -07:00
Hemanth V. Alluri 1a12e112d9 devtools: Completely overhaul the frontend for the integrations devtool.
This commit also adds a small functionality change where the results of
each webhook fixture message sent is now displayed to the user.

With a small tweak by tabbott to fix a styling bug.

Fixes #12122.
2019-05-20 12:36:15 -07:00
Tim Abbott a28af1fd64 css: Remove unnecessary prefixed transitions.
The transition keyword has been standard for a while now; see the
previous commit for details.
2019-05-20 12:15:16 -07:00
Boris Yankov 18a350f042 css: Remove unnecessary 'prefixed-transition' mixin.
The `transition` property does not need prefixing. In fact, very
few properties need that nowadays. So remove it to simplify
the code. This is strictly a refactor with no style change intended.

Many of these styles shouldn't have been prefixed even if needed.
The prefixes exist exactly because the implementations might differ
from the incoming standard.

Looking at the supported browsers:
https://caniuse.com/#search=transition

We see that this property has had mainstream support from 2012 and
was supported on Firefox in 2006 !!!
2019-05-20 12:15:16 -07:00
Vaibhav 76295dd59f css: Club rules in reactions.scss under selector `.message_reaction_count`. 2019-05-20 12:01:49 -07:00
Vaibhav ae47ddc16e css: Use SCSS nesting in reactions.scss for `.reaction_button`. 2019-05-20 12:01:49 -07:00
Vaibhav e8c072a4c8 css: Reorder reactions.scss so that `.reaction_button` are in one place. 2019-05-20 12:01:49 -07:00
Vaibhav c4b683a638 css: Use SCSS nesting in reactions.scss for `.message_reaction`. 2019-05-20 12:01:49 -07:00
Vaibhav 9ef3a660b3 css: Reorder reactions.scss so `.message_reaction` are in same place. 2019-05-20 12:01:49 -07:00
Vaibhav 9e1ee434a7 css: Use SCSS nesting in reactions.scss for `.private-message`.
Precisely for `.private-message .message_reactions .message_reaction`.
2019-05-20 12:01:49 -07:00
Vaibhav 129dfec297 css: Use SCSS nesting in reactions.scss for `.message_reactions`. 2019-05-20 12:01:49 -07:00
Vaibhav c726198cbc css: Reorder reactions.scss so `.message_reactions` are in same place.
This atomically makes `.private-message` in same place too.
2019-05-20 12:01:49 -07:00
Vaibhav 7d8ced7375 css: Use SCSS nesting in reactions.scss for `.emoji-popover-emoji`. 2019-05-20 12:01:49 -07:00
Vaibhav eb8a8fa0dc css: Reorder reactions.scss so `.emoji-popover-emoji` are in same place. 2019-05-20 12:01:49 -07:00
Vaibhav a20b48589f css: Use SCSS nesting in reactions.scss for emoji popover rules. 2019-05-20 12:01:38 -07:00
Vaibhav 8eaa12c49a css: Reorder reactions.scss so `.emoji-popover` are in same place. 2019-05-20 11:53:34 -07:00
Vaibhav 09745d6637 css: Remove redundant `.reaction_button` rule from reactions.scss.
The removed rule does not apply in any case since it's always overridden
by `.message_reaction + .reaction_button` rule defined later on.
2019-05-20 11:53:34 -07:00
YashRE42 9b32c844df navbar: Fix stream + topic jump at 500px.
This resolves a bug where the "stream" tab item would be missaligned
with the rest of navbar and leave some empty space.
2019-05-20 11:26:22 -07:00
Anders Kaseorg 141088586b Completely replace perfect-scrollbar with SimpleBar.
perfect-scrollbar replaces both the appearance and the behavior of the
scrollbar, and its emulated behavior will never feel native on most
platforms.  SimpleBar customizes the appearance while preserving the
native behavior.

Signed-off-by: Anders Kaseorg <andersk@mit.edu>
2019-05-17 12:06:51 -07:00
Hemanth V. Alluri 2bd9c8cb42 devtools: Add custom HTTP headers support to the integrations dev panel.
This commit introduces a simple field where the user can now specify custom
HTTP headers. This commit does not introduce an improved system for storing
HTTP headers as fixtures - such a change would modify both the existing unit
tests as well as this devtool.
2019-05-17 11:50:53 -07:00
Rishi Gupta 17774a80cb org settings: Update organization logo section.
This section was taking up too much visual weight, and drowning out other
elements on the page.

Once we remove the Upload buttons, we can likely shrink this further.

We remove the box-radius since at the smaller size it interferes with how
the logos look (and will look in the app).

We remove the margin-top to make this consistent with the spacing around
organization profile picture.

We change the max width from 730 to 500 since the Upload new logo button is
214px in length (not including margin), and those buttons are now inline
instead of on the next line.
2019-05-17 11:48:17 -07:00
Rishi Gupta e9a180dcb4 org settings: Fix box-shadow in organization logos section.
The box-shadow was
* Not being applied to the images (the images get their box shadow from a
  more specific rule)
* Being unintentionally applied to the upload/delete buttons
* Being unintentionally applied to the container housing the buttons and
  error messages.

The last one especially looked bad, since it added boxes where there
otherwise wouldn't be a box.
2019-05-17 11:48:17 -07:00
Hemanth V. Alluri bae8295c52 devtools: Add integrations dev panel.
This commit adds a new developer tool: The "integrations dev panel"
which will serve as a replacement for the send_webhook_fixture_message
management command as a way to test integrations with much greater ease.
2019-05-15 13:07:44 -07:00
vinitS101 611f1f8fd2 left_sidebar: Add "+Add streams" to bottom of streamlist.
Added a new button at the bottom of the stream list which redirects
users to '/#streams/all' where they can create new streams or subscribe
to new streams.
The button is not visible to guests.

Fixes #11642.
2019-05-14 16:12:51 -07:00
Tim Abbott abae98a901 css: Add detailed comment explaining our 1400px max-width.
The reference to this being overriding in scroll_bar.js and how it
causes flashes is valuable.
2019-05-09 14:07:27 -07:00
Tim Abbott beb3059547 css: Remove long-dead "sticky" CSS rules.
The code that uses these rules was removed in
f1e90086f5.
2019-05-09 13:58:41 -07:00
Yashashvi Dave 46f45f35d2 stream_ui_updates: Add generic `initialize_disable_btn_hint_popover` func. 2019-05-08 15:09:16 -07:00
Yashashvi Dave ce917ef3e6 css: Remove `display-none` class css entirely.
All the elements to which `display-none` class
is applied, are handled with `.show()`/`.hide()`
functions instead of `.addClass('display-none')`
and `.removeClass('display-none')`.
Therefore, we should use apply `display: none;`
to elements with `style` attribute.

This commits removes all usage of `display-none`.
2019-05-08 09:41:48 -07:00
Yashashvi Dave ccd3b49555 streams: Disable sub-btn with explanation if user not allowed to subscribe. 2019-05-07 16:38:36 -07:00
Yashashvi Dave 9d21b61f99 streams: Disable sub-check-btn if user is not allowed to subscribe.
This commit disable the subscription checkmark button in stream list
view, if user is not allowed to subscribe to stream.
2019-05-07 16:33:01 -07:00
Vaibhav d93f5b2977 single_msg_handlebars: Cleanup moving css rules in stylesheets.
Cleanup single message template moving CSS rules for box shadow
of a private message stream inside stylesheets. For any messagebox
inside of a `.private-message` element, the box shadow is set using
the class. In cases of normal streams, the box shadow is set using
inline style since we cannot have different classes for each color.

Changes made in drafts.scss are to keep the current style of not
having the left border. Setting style using classes, this rule had
to be overridden.
2019-05-06 21:28:46 -07:00
Vishnu Ks 6c58603eaf support: Add support for scrubbing realm. 2019-05-06 20:12:54 -07:00
Vishnu Ks f6203f068b support: Add support for activating and deactivating realm. 2019-05-06 20:12:48 -07:00
David Wood f53a8f8bb6 settings: Rename `create_stream_permission` in templates.
This commit renames the `create_stream_permission` field in the
templates to `create_stream_policy`, matching the field used in the
database model. This matches what `invite_to_stream_policy` does and
will be clearer when the `waiting_period_threshold` is split into its
own field.
2019-05-06 16:30:01 -07:00
Alexandra Ciobica 8aa982f7ba user status: Add "clear message (x)" button for status message input.
This adds the same "x" button as we have in "stream search" or "people
search" to the user status modal.

The button is shown if someone types something, or if the status
message was already set (meaning there was already a value in the
input field). If the input field is empty, the button is not visible.

This fixes the follow-up comments from #12179.
2019-05-01 16:36:45 -07:00
Alexandra Ciobica 61758735f3 user status: Clean up code for user status options.
- Changed the <p>s to <button>s and modified the css accordingly.
- Changed the css to use scss nesting.
- Changed the line-height from 1.0em to 1.1em, because on Safari the "g" was not fully displayed.
2019-05-01 16:34:54 -07:00
David Wood 272ed90685 settings: Create an explicit invite_to_stream_policy setting.
This commit creates a new organization setting that determines whether
a user can invite other users to streams. Previously this was linked
to the waiting period threshold, but this was both not documented and
overly limiting.

With significant tweaks by tabbott to change the database model to not
involve two threshhold fields, edit the tests, etc.

This requires follow-up work to make the create stream policy setting
work how this code implies it should.

Fixes #12042.
2019-04-29 17:11:28 -07:00
vinitS101 f46b5a8ba1 message view: Decreased top margin of messages with sender info.
Decreased the top margin of first line of messages to align better with
the profile picture of the user.
2019-04-29 10:12:58 -07:00
Wyatt Hoodes 820dd3a946 settings: Fix broken headers in night mode.
This bug turned out to pop up wherever a table existed in both
'settings' and 'organization settings', notably *excluding* both
'Custom Emoji' and 'Authentication Methods'.

The first thought to the solution was to simply add `thead` to the css
rule that applies the appropiate color for headers and the like.  This
was successful, however it brought attention to a sub-problem:

`emoji-settings-admin` and `auth-mehtod-settings-admin` were both
creating table headers in the body of the table. This was causing the
rows in these two tables to be colored inversely from all the others.
This is also the reason why these tables are the only ones correctly
styled. These handlebars were updated with the headers moved out of the
body.

The even and odd rows of the tables were then colored appropriately.

Fixes: #12209
2019-04-27 15:03:57 -07:00
Rishi Gupta 088714fb8f settings: Add sectioning to Other notifications section.
There are no other <h5>'s in static/templates. Basically just copied the
styling of `#settings_page h3` above it.

The vertical spacing here isn't great, but I think will require some deeper
fixes.
2019-04-23 15:24:39 -07:00
Abhinav Singh 8c8df52dd9 user status: Decrease user status modal width by 20%
User status modal width is decreased by 20% to make it look better
with the user status message options added in the previous commit.
2019-04-23 11:21:31 -07:00
Abhinav Singh 3f10dc92ec user status: Add user status message options to user status modal.
Several user status message options are added to user status modal so
that the users can pick from them.

Fixes part of #11629.
2019-04-23 11:21:31 -07:00
Alexandra Ciobica df1ce2eac8 portico: Change android screenshot from /apps. 2019-04-22 14:55:30 -07:00
Nikhil-Vats fba3f49a9a portico: Fix alignment of sidebar zulip logo with label.
This vertically aligns the text "Zulip" with Zulip's logo
in the Portico sidenav.  Fixes #12140.
2019-04-21 23:03:04 -07:00
Tim Abbott 73e7d97a35 css: Fix missing newline at end of file. 2019-04-17 16:22:24 -07:00
Abhinav Singh 01b95d38be user status: Change user status modal style to standard modal style.
Tweaked by tabbott to use SCSS nesting.

Fixes part of #11629.
2019-04-17 15:12:34 -07:00
Yash Rathore bcfc22d94e navbar: Fix bugs caused by zulip.scss refactor.
A few bugs were caused by 7d4cebbc1e.
In night mode:
- home icon was hidden by grey box on "All messages" narrow.
- inactive tabs (eg "mentions" and "stars") were hidden behind grey box.
- topic tab was hidden behind grey box in topic narrow.

In both night mode and normal mode:
- "private messages" tab in individual/group pm narrows was illegible.

These were all results of unexpected differences in precedence rules
caused by the refactor.
2019-04-17 12:10:01 -07:00
Rishi Gupta e2ff91f507 help: Remove indentation from markdown ordered lists.
The indentation doesn't look good with the green circles.
2019-04-16 17:49:42 -07:00
Wyatt Hoodes 0986216e2c compose.scss: Fix alignment of "markdown preview" icons.
Removed the preview tag from the css rule, reduced the undo preview tag
to a font-size of 15px.

The preview tag being attached to the rule proved unnecessary. The icon
for reverting back to an editing state also dipped below the horizontal
level of the icon row.
2019-04-14 16:37:36 -07:00
matkaczmarek b081e6c728 stream-edit: Fix stream name span
This commit fixes broken span for stream-name edit on Firefox by adding
vertical-align to css.

Fixes #11923
2019-04-13 20:35:31 -07:00
vinitS101 5bf8917597 css: Add css rules to display ordered lists like bulleted lists.
This change adds rules for ordered lists that makes them visually similar
to bulleted lists.

Note that is has no effect because our markdown implementation doesn't
currently generate ol tags.
2019-04-13 18:58:26 -07:00
vinitS101 39f40c3f1a css: Changes to top and bottom margins for bulleted lists and blockquotes.
This change decreases the spacing at the top and bottom of bulleted lists
and blockquotes.
Specific rules for p and p:last-of-type have been added for both uls and
blockquotes to maintain visually consistent spacing in all cases.
2019-04-13 18:57:41 -07:00
YashRE42 7d4cebbc1e navbar: Refactor tab_bar to nested selectors.
This refactors tab_list styles to be under tab_bar and to use nesting.
2019-04-13 13:24:20 -07:00
Tim Abbott 75215f0014 left sidebar: Simplify filter icon CSS logic. 2019-04-13 13:21:51 -07:00
Alexandra Ciobica d9edcbfd46 css: Center vertically the global-filters and streams arrows.
Decreased the top with 1px because it was not vertically aligned with respect to the text.
2019-04-13 13:21:51 -07:00
Alexandra Ciobica 97b9755484 left sidebar: Cleanup duplicate icon padding css. 2019-04-13 13:21:42 -07:00
Alexandra Ciobica 4eeb33275e css: Align left sidebar global-filters icons with text.
Removed the top pixel from all messages and added top: -1px to private
messages to align the envelope properly.
2019-04-13 13:12:16 -07:00
vinitS101 5be38f03db css: Change rtl ul rule to only set left and right margins.
This change has been made so that the top and bottom margins for
bulleted lists is completely handled by the other ul rule.
2019-04-13 11:28:05 -07:00
Priyank Patel 8a15b9ee87 Revert "user-profiles: Lazy load profile pictures when in view."
This reverts commit 6441ad0677 since it
causes two bugs: (1) when rendering new message there is glitch where
the profile picture flashes (2) when someone sends a new message their
profile picture flickers.
2019-04-12 16:50:37 -07:00
Tim Abbott d14a1fd1b1 css: Properly nest rules for message embeds and widgets. 2019-04-12 12:52:13 -07:00
Tim Abbott d7aa186dab css: Rewrite styling for markdown paragraph spacing.
Historically, we had a large bottom-margin on p tags designed to
produce correct spacing between consecutive paragraphs (10px, similar
to the spacing between consecutive paragraphs in different messages by
the same sender).  And then we tried to fix the end-of-message spacing
with a p:last-of-type rule, which fixed that problem, but created lots
of unnecessary extra space just before a bulleted list, block quote, etc.

We recently added some p+ul and p+blockquote negative margin rules in
62f2396ee2 to try to fix this, but those
created some secondary issues in interaction with the p:last-pf-type
rule.  This rabbit hole is likely somewhat deep.

The right fix for this overall formatting is to implement the
inter-paragraph spacing as a p+p rule, rather than a bottom-margin on
the p rule; then, we get all the properties we're interested in for
how paragraphs interact.

We may need to do some follow-up work to add small p+ul and
p+blockquote rules to get the pixel-perfect spacing we want (or maybe
just adjust the ul/blockquote spacing CSS), but this is clearly a
better architecture for doing this work.

Fixes #12101 through solving the same problem it does.
2019-04-12 12:52:01 -07:00
Tim Abbott 74a87ecff0 css: Consolidate rendered_markdown CSS blocks.
This has no functional changes.
2019-04-12 12:30:05 -07:00
Tim Abbott 00eaf3a8e6 css: Clean up CSS for blockquotes and markdown tables.
This has no functional changes, just making the implementation more
standard.

We don't have any blockquotes outside markdown rendering, which is why
it's correct to collapse the blockquote rules.
2019-04-12 12:22:40 -07:00
Tim Abbott d6404b978a css: Reorder zulip.scss so rendering markup is in one place. 2019-04-12 12:19:11 -07:00
Tim Abbott ee764e67ad css: Use SCSS nesting for message_embed rules block. 2019-04-12 12:13:30 -07:00
Tim Abbott be965e3b16 css: Fix rules incorrectly attached to messagebox.
These rules should have been on message_content/rendered_markdown, and
as a result did not properly apply to drafts (etc.).
2019-04-12 12:10:44 -07:00
Tim Abbott 27b5168395 css: Move markdown rendering to rendered_markdown class.
This eliminates unnecessary use of the message_content CSS class in
favor of rendered_markdown, which makes more sense for places outside
messages where we display rendered Zulip markdown.
2019-04-12 12:08:34 -07:00
Steve Howell 3cfc3ca24b pm list: Remove "(more conversations)" feature.
Now that we have a scroll container for the PM list,
it doesn't make much sense to limit the number to
five.

We may resurrect this feature if "more conversations"
actually fetches more conversations, but it doesn't
currently.

We also may soon make it easy to limit PMs to just
unread messages, which will make the max-5 feature
perhaps less necessary, and we don't want to make
the UI overly complicated.
2019-04-11 16:26:54 -07:00
Alexandra Ciobica d8e9975b9d css: Align left sidebar icons horizontally and fix the spaces.
Center aligned the icons from streams and decreased the font-size of
the icons from the global filters.

This dramatically improves the visual appearance of the left sidebar.

Fixes: #11917.
2019-04-11 10:47:30 -07:00
vinitS101 62f2396ee2 message view: Reduce extra white space above quotes and unordered lists.
Blockquotes and unordered lists had a large amount of space above them
when preceded by a paragraph tag, which looks ugly.  This is a common
issue with the CSS rendering of essentially all markdown
implementations (e.g. GitHub has this bug).

We resolve the issue by reducing that whitespace with negative
margins.  Hopefully, this won't create other weird glitches in the
process.

Fixes #11631.
2019-04-10 17:51:04 -07:00
Vaibhav 7f27c09704 markdown: Add rendered_content selector to night-mode syntax highlight.
This adds a parent selector, `rendered_content`, to night mode syntax
lighlight selector. This helps us in getting the "day mode" syntax
highlight styles in night mode.
2019-04-05 17:13:20 -07:00
Vaibhav 5c36918c17 markdown: Add .rendered_markdown for all elements with rendered MD content.
This adds a class `rendered_markdown` for all the elements which have
rendered markdown content; This is done to add different styles for
rendered content in day mode and night mode.

Also replace the element selectors from CSS to use the class.
2019-04-05 17:13:20 -07:00
Priyank Patel 6441ad0677 user-profiles: Lazy load profile pictures when in view.
Using lazysizes we only load images if they are in view.
This decreases load time and save more bandwidth since images are loaded
after html is loaded and if they are on screen.

Fixes #3564.
2019-04-05 15:51:02 -07:00
Alexandra Ciobica 0c328d9617 css: Add spacing between info and image on /apps.
Fixes: #11811.
2019-04-04 11:32:58 -07:00
Marco Burstein feadc8bf46 portico: Fix trapsarent gradient styling inconsistencies.
Instead of using the `trapsarent` keyword, which is interpreted
as Safari as black with an opacity of 0%, re-use the gradient colors
themselves in order to lead to a single color gradient. This allows
for the homepage to look the same regardless of browser.

Fix #11985.
2019-03-25 16:25:58 -07:00
Anders Kaseorg 324b1d52cb modals: Replace modal dialog scale transition with short slide.
This works better with SimpleBar (see
https://github.com/Grsmto/simplebar/issues/274).

Signed-off-by: Anders Kaseorg <andersk@mit.edu>
2019-03-21 17:27:45 -07:00
Vishnu Ks 34b8626959 help: Increase the width of sidebar scrollbar. 2019-03-21 16:57:25 -07:00
Vaibhav e2115ad0ba refactor: Nest night-mode syntax highlighting rules into `body.night-mode`.
Rather than using the parent selector multiple times, all the rules
are nested inside one selector.
2019-03-21 16:51:40 -07:00
Vaibhav 46b2d9d328 markdown_docs: Fix styling for in-app docs for inline code.
This adds a selector `#message-formatting` which is basically the
modal id to apply night mode style to inline code in the modal.
2019-03-21 16:51:40 -07:00
Rishi Gupta b47e6d0d94 help: Add status-and-availability. 2019-03-21 12:56:38 -07:00
Tim Abbott a6c0ac44be css: Make message_failed icons always visible.
This fixes the confusing behavior that errors sending messages were
not immediately user-visible.

Based on work by Dominik Gryboś in #11479.

Fixes #10537.
2019-03-19 13:30:28 -07:00
Tim Abbott 9e85478010 css: Fix sizing and height of message_failed error icons.
Inspired by work by Dominik Gryboś in #11479.
2019-03-19 13:30:27 -07:00
Tim Abbott 4ae325ce6c css: Fix alignment of message_controls.
They were 1px too high.
2019-03-19 13:30:27 -07:00
Tim Abbott f9eeddc78c css: Limit message_failed class to inside message_controls.
This is mostly for readability.
2019-03-19 13:30:27 -07:00
Tim Abbott 8700d14c15 css: Remove unused message_local CSS class.
This is likely a very old legacy feature.
2019-03-19 13:30:27 -07:00
Tim Abbott 36b18cd183 css: Use SCSS nesting for message_controls region. 2019-03-19 13:30:27 -07:00
Tim Abbott 38de5740fa integrations: Reduce excessive margin below sidebar headings.
This just didn't look good.
2019-03-19 11:08:51 -07:00
sameerchoubey 2efe1963a5 portico: Add /api links to /integrations.
This PR creates a custom section on the /integrations page and adds
links to /api for common requests.

Fixes #11803.
2019-03-19 11:08:38 -07:00
vipul chhabra 958126733b message view: Fix The unexpected behavior of Youtube Thumbnail.
It is observed in Mozilla margin was considered from other side of thumbnail
due to some special padding issues observed in mozilla.

To fix this top and left value are assigned to 0 so that it automatically
takes its correct position in all browsers

Fixes #11867.
2019-03-18 13:19:59 -07:00
vsvipul a41ada3398 image-action: Fix open and download hover highlight in night mode.
When we try to hover over Open or Download they were not highlighted
in night mode, because of incorrect specificity. This commit adds
highlighting in night mode (possibly fixing a regression when we made
night mode less aggressive about hover).

Fixes #11887.
2019-03-15 11:27:01 -07:00
theredcap 3aa16dcd73 templates: Add "Download APK" button in apps.html.
This allows user to download the latest version of android apk from
the apps/android.

This will help the users who use Android without Google Play to
download the app and install it with ease.

To implement this I added a Download APK link on the apps.html page
which always points to the latest released version.

Fixes part of #11647.
2019-03-15 10:11:39 -07:00
Abhishek Kumar Singh 32853a565f portico: Fix the partial visibility of zulip-octopus on landing page.
The image zulip-octopus.png was not fully visible on the
landing-page due to lesser width thus resulting into an incomplete
image.
2019-03-14 15:31:10 -07:00
Steve Howell 695399322b css: Don't underline topics when we hover them.
We generally don't combine underline effects and
hover backgrounds.

We also remove some CSS related to underlines that
was overridden.
2019-03-14 13:54:38 -07:00
Steve Howell ee9612c927 css: Hover individual topic rows.
Hovering the entire block was confusing.
2019-03-14 13:54:35 -07:00
Steve Howell c2858f1c64 css: Fix hover for "Private messages".
It's ugly to hover the entire block--just hover the individual
rows.
2019-03-14 13:52:50 -07:00
Steve Howell aae3f8a04a css: Fix blue highlights for Private Messages.
We have this strange business requirement that the
blue-ish highlights for the current PM go into the
left gutter and all the way to the right edge.

We also have markup that treats the list of PMs
as a list inside the list item for the "Private
messages", which makes sense logically.

Before this change, the padding was done for the
outer top-left `ul`, but that caused the inner PM
rows not to have that padding when you hovered them.

Now we pad each individual list item and/or inner
list item or div.

Fixes #11879.
2019-03-14 13:52:39 -07:00
Steve Howell 837801ed21 css: Tweak hover color in day mode.
(The new color here shows up better against the
background.  Rishi Gupta provided the new color.)

This only affects day mode.
2019-03-14 13:52:27 -07:00
Steve Howell 10f9b9c616 minor: Change markup for icon fonts.
I am trying to phase out the confusing global-filter
name.
2019-03-14 13:50:09 -07:00
Steve Howell 8efd5a72ec minor: Remove unused padding.
This is overridden in all cases.
2019-03-14 13:50:09 -07:00
Steve Howell 36fb6cd2b2 minor: Remove unused CSS for global-filter. 2019-03-14 13:50:09 -07:00
Anders Kaseorg aad61c42a3 css: Replace generated U+202A LEFT-TO-RIGHT EMBEDDING with CSS properties.
These generated characters (added in #9889) were causing poor wrapping
behavior, at least in Firefox.

Signed-off-by: Anders Kaseorg <andersk@mit.edu>
2019-03-11 17:12:53 -07:00
Vishnu Ks 8eeb8280b4 activity: Create interface for doing support operations.
This should grow into a tool that makes it much easier to do common
organization management tasks without using a manage.py shell.
2019-03-11 12:01:11 -07:00
Boris Yankov 3df4990781 cleanup: Remove unnecessary 'magic' style for night mode.
This was introduced in e0236646

For 1.5 years we did not find a case that needed it (besides the
`a` tag hover state, that is not obvious if it was needed or it was
used as an example)

It is not obvious if this solution was a good idea. The concern was
that `body.night-mode` is more specific than `body` and some styles
might override others less specific in cases we might not want that.

Of course, we want that in the majority of cases, and css-specificity
rules are not simple to comprehend.

Good further reading:
http://cssspecificity.com/
https://specificity.keegan.st/

The added complexity of the resulting styles and the added code that
might not serve any practical purpose seem to not be worth it.
2019-03-08 15:27:32 -08:00
Steve Howell 504759f432 css: Consolidate some widths in left sidebar.
We now use 10px to the left of major elements in
left sidebar.

And we then explicitly use 19px for the following:

    icons in top left
    indent for (more conversations)
    stream hashtag icons
    stream lock icons

We also kill off 2px of gutter that was caused
by whitespace in the HTML (and was slightly messing
up alignment of names beneath "Private messages").

Finally, we make the topic indent a bit more explicit.
2019-03-08 12:04:20 -08:00
Rishi Gupta 4e504e46a1 portico: Fix styling of dropdown menu in nav bar.
The previous gradient must have been from a previous design; it looked kind
of crazy against our current homepage. This widget also appears on /help,
/integrations, and other pages with a variety of different backgrounds, so a
neutral, muted style is probably safest.

The icon change is just because fa-off seems to be broken/missing. Maybe it
was in Font Awesome 3?

The extra padding line is to supercede padding (I assume) unintentionally
added by `.top-links a` to this widget on /help.
2019-03-07 21:28:54 -08:00
Rishi Gupta aa5770f824 portico: Update screenshots on /apps.
The border radius is a compromise between:
* Windows: no border radius on windows
* Mac: border radius top and bottom
* Ubuntu: border radius only on top

Ideally the image itself would just have border radius matching the OS, but
that's a bit tricky to do in the image editing software I'm using.
2019-03-07 21:03:49 -08:00
ruchit2801 9f7e90f68b left sidebar: Add an "unstar all messages" option.
In this commit, I've added a feature to unstar all the starred
messages.  This is useful, e.g., for folks who are using starred
messages to keep track of things they should come back when next at
their desktop.

The event flow is the standard one for a feature with a confirmation modal:

(1) User clicks on unstar all messages.

(2) We display a confirmation modal; if the user confirms, we send a
request to the backend to clear all starred messages.

(3) The events system sends that UI update back to us, removing the
stars from the UI.

Fixes #11401.
2019-03-07 20:52:00 -08:00
Vishnu Ks a288cfc43a uploads: Show used upload space in attachments UI. 2019-03-07 20:18:00 -08:00
Harshit Bansal 3610aaece3 refactor: De-duplicate login button code in portico templates. 2019-03-05 14:02:12 -08:00
Tim Abbott 25f6eccc65 css: Deduplicate some blocks for stream-privacy. 2019-03-04 16:05:16 -08:00
Steve Howell aaf92a8977 css: Tweak the gutter below the top-left corner.
I think 16px is still enough to offset STREAMS,
and putting STREAMS slightly higher gives it more
emphasis.
2019-03-04 15:59:35 -08:00
Steve Howell ed30b45afd css: Clean up top-left icons and margins.
Making the icons slightly smaller helps us align the
icons and text in the top-left corner to the icons
and text in the streams section.
2019-03-04 15:59:35 -08:00
Steve Howell c3a5a1d3d7 css: Simplify hash/lock icon geometry in left sidebar.
Instead of lining these up with margin tweaks, we just
set the min-width on their common parent.
2019-03-04 15:58:33 -08:00
Steve Howell 38e3e22606 css: Make right sidebar fonts be 14px.
They were slightly taller before.  Now they match other
elements on the page.
2019-03-04 15:58:33 -08:00
Steve Howell c57d6b22ec css: Simplify font sizes for left sidebar elements.
Most elements, apart from chevrons, now have explicit
font sizes.

In some cases I chose integer values that were close
to the calculated values you would get with all the
ratio calculations.

And then I tweaked how the hashtag/lock icons get
aligned.

The alignment for those icons if off in this version; it'll be fixed
in an upcoming commit.
2019-03-04 15:58:33 -08:00
Steve Howell c40597b5f5 fonts: Make STREAMS and USERS be 14px.
Before this they were 14.2px due to a complex set of
calculations.
2019-03-04 15:58:33 -08:00
Steve Howell 6be5129056 fonts: Use 14px for top left corner.
The fonts there used to be 14.2px due to an arcane
calculation.  Now we explicity set a value.

If you expand Private Messages, the font inside now
is explicitly set to 13px.  It used to be 12.8px due
to a complex calculation.
2019-03-04 15:58:32 -08:00
Steve Howell 9b616e2411 css: Use more specific selectors for sidebar icons.
This paves the way to tweak chevron geometry on an
individual basis without accidentally breaking other
stuff.  It's also more self-documenting CSS.
2019-03-04 15:35:40 -08:00
Steve Howell 2cf898a0a5 css: Make "All messages" chevron normal size.
14px was too big. (I confirmed on chat that this
was no longer wanted.)
2019-03-04 15:35:40 -08:00
Steve Howell 194619c667 css: Clean up left sidebar chevrons.
This is a fairly big commit, but at the end
it simplifies a lot of things.

It's difficult to fix highly coupled code in
incremental steps because, well, it's highly
coupled code.

The main thing this does is give each type of
chevron in the left sidebar its own class

    * all-messages-arrow (NEW)
    * stream-sidebar-arrow
    * topic-sidebar-arrow

Before this change, the "All messages" chevron
was using stream-sidebar-arrow, which was a
strange name for something that's not actually
in the stream sidebar. Obviously this was
cargo culted.

There was not much JS to change here--we just
fix the click handler for "All messsages".

And then there's a one-line change to the template,
and the rest is re-organizing the CSS.
2019-03-04 15:35:40 -08:00
Steve Howell 0a848e412f buddy list: Use user-list-arrow class.
Using a more specific class avoids confusion related
to the .arrow class, which is not only a popover concept,
but also a Zulip concept in the left sidebar.
2019-03-04 15:35:40 -08:00
Steve Howell 0551b36053 css: Add comment explaining chevron markup.
The way we build chevrons is super messy and highly
coupled.  This comment reflects an audit I did on the
code in its current state.

Subsequent commits will make things a bit easier to
understand.
2019-03-04 15:35:40 -08:00
Steve Howell 9820b07616 minor: Introduce zero-pm-unreads.
We could arguably just use zero-unreads everywhere,
but we definitely don't want zero-topic-unreads
inside our PM list.

I prefer to just have these two concepts:

    zero-pm-unreads
    zero-topic-unreads

And it's super easy to share CSS properties for both.
2019-03-04 15:35:40 -08:00
Tim Abbott ddb965110f CSS: Remove manual antialiasing configuration.
The antialiasing decisions we made for the webapp should be constant
over the entire page, not limited to particular subsections or themes.

If we wanted antialiasing, we should do it on the entire page, not
individual random widgets.  But it's not clear we actually want to do
it on the entire page.  The `-moz-osx-font-smoothing: grayscale`
setting now happens by default in OSX Mojave (40% world market share
right now and growing), so there's no reason to override it.  And
without retina displays, generally, subpixel rendering provides better
results than antialiasing (which overrides subpixel rendering).

Thanks to Anders Kaseorg for advice on this issue.
2019-03-04 15:12:48 -08:00
Alexandra Ciobica dc24efde24 css: Set padding for the testimonials section directly.
This fixes a visual issue with looking at the testimonials in the
mobile /for/open-source page.
2019-03-03 19:52:52 -08:00
Alexandra Ciobica f260a5fea8 css: Remove class hello from testimonials section scss.
This allows us to use this CSS on other pages.
2019-03-03 19:50:47 -08:00
varunvaruns9 b4f35bd54e poll_widget: Add highlight for vote count if current user votes.
Add a background highlight to vote count button if currently
logged in user votes on that option.

Tweaked by tabbott to use better variable names and Rishi for better
styling.
2019-03-01 16:35:18 -08:00
Boris Yankov 9edc39c8be user status: Make "unavailable" status circle grey.
After discussion, we decided that the red color is too distinct
and does not convey the idea of "almost offline".

This changes the new "unavailable" status circle's color from dark
red to grey, the same color used by the "offline" status circle.
2019-03-01 22:51:07 +02:00
Boris Yankov 31536a48ef user status: Add icon for "unavailable".
Fixes #11589.

Adds SCSS style for the "unavailable" user status and enables its
usage in `buddy_data.js`.

The style is a red circle with a horizontal line. The values might
look a bit 'magic' but they were considered carefully ` height` of
1px was too thin, 2px was too thick, thus 1.5px was chosen.
2019-03-01 09:56:09 -08:00
Rishi Gupta 2c0b291902 portico: Add ninth logo to /for/open-source testimonial section. 2019-03-01 09:12:50 -08:00
Rishi Gupta f8c8b41ad8 portico: Fix media parameters for hiding last testimonial logo.
Tested both /hello and /for/open-source.
2019-03-01 09:12:50 -08:00
Rishi Gupta d833c70dc7 org settings: Explain Zoom support is experimental, and fix a few strings.
Visually, #zoom_help_text acts like
.organization-settings-parent div:first-of-type when the Zoom option
is selected, but isn't treated as such.

No visual change with the #google_hangouts_domain change; just there to make
the code more readable/defensible.
2019-02-28 15:09:35 -08:00
synicalsyntax db37192857 integrations: Rename Google logo to bypass Adblock Plus.
Adblock Plus's "Block social media icons tracking" setting blocks
images with for social media platforms in their names from loading, so
we rename the Google logo to bypass this.
2019-02-24 11:09:02 -08:00
Vaibhav 69c16ab90d messagebox: Change alert message background to dark in night mode.
When copying a message by clicking on "copy and close" button in
message edit box an alert appears that says "Copied!"; Background
of the message is set corresponding with the day mode but not the
night mode. This changes the background of the alert message to
the dark color in night mode.
2019-02-22 13:12:00 -08:00
Anders Kaseorg ce2474c0ad css: Fix unread marker gap in night mode.
Instead of drawing a white border between unread markers, leave a real
space.

Signed-off-by: Anders Kaseorg <andersk@mit.edu>
2019-02-22 13:01:03 -08:00
Tim Abbott 5e96f53948 realm_logo: Display with target background, not current background.
This makes it a lot more clear what this feature will look like.
2019-02-20 18:04:04 -08:00
alex 254da4ad81 send_button: Remove unnecessary self-cancelling margin. 2019-02-19 12:14:17 -08:00
synicalsyntax 4cc49a693b night mode: Improve coloring of emoji picker. 2019-02-18 19:49:24 -08:00
synicalsyntax c808dcea18 subs: Reorder stream row selectors for SASS nested selector feature. 2019-02-18 16:08:09 -08:00
synicalsyntax 0d32225bdd night mode: Improve coloring of message reactions. 2019-02-18 15:57:51 -08:00
synicalsyntax 0581fd3d51 integrations: Increase min-height of page content.
This allows the footer to not fall under the gradient area.

Fixes #11591.
2019-02-18 15:41:41 -08:00
synicalsyntax e22c637adf landing page: Adjust white fade gradient color.
The background color of the portico pages aren't true white,
so this commit adjusts it to match the actual portico page
background color to eliminate differences.
2019-02-18 15:41:41 -08:00
sahil839 7157edf4af settings: Add support for uploading logo for night mode.
This adds a new field named realm_night_logo which is used for
displaying the organization logo when the user is in night mode.

Fixes #11176.
2019-02-18 15:15:57 -08:00
Steve Howell e67cf30dfd private messages: Add user circles to top left.
This is mostly adding markup, calling some convenient
functions in buddy_data.js, and adjusting CSS.

To make the circles update dynamically, I mostly
orchestrate this though activity.js for now.  It's
possible we'll want to adjust that eventually to
happen through something like a `presence_events`
dispatcher, but that's essentially what
a good part of `activity.js` does now.
2019-02-18 14:22:37 -08:00
Steve Howell 4c27353154 css: Position/size popover user circles in correct file.
We're soon gonna have user circles in four different places,
and the fourth place, Private Messages, will have different
size/position CSS.

Now each component does positioning and sizing in its
main CSS file:

    user info, group info -- popovers.scss
    buddy list, group PMs -- right-sidebar.scss

(We also use the more explicit syntax for padding each
side.)
2019-02-18 14:22:37 -08:00
Steve Howell 1adcaad04a refactor: Simplify logic for circles.
We now have a function get_user_circle_class
that returns one of these values:

    "user_circle_green"
    "user_circle_orange"
    "user_circle_empty"

And we put that in the templates.

And then CSS renders the circle of the appropriate
color.

The unit tests now explicitly capture whether
we are rendering the correct kind of circle.
2019-02-18 14:22:37 -08:00
Steve Howell ba91f628c7 css: Use user_circle_fraction for group PM circles.
We rename this CSS class to something super concrete,
since all the associated CSS is very specifically
about drawing circles.
2019-02-18 14:22:37 -08:00
Steve Howell ea05afdf04 css: Avoid unused background for group PMs.
The background color for group PMs is driven
by specific styles in the HTML, so the CSS
definition here was inaccurate.
2019-02-18 14:22:37 -08:00
Steve Howell 3c8c2abd99 css: Split out user_circles.scss.
This is a pure code move.

We want to use user circles in the left sidebar,
so this code will no longer belong in
right-sidebar.scss.

This code is just related to drawing the circles.
We can still position in size in other CSS files
(with more context-specific selectors).
2019-02-18 14:22:37 -08:00
Challa Venkata Raghava Reddy 815d009006 left_sidebar: Add scrollbar for private messages region.
This fixes a longstanding UI issue when you have way too many recent
private message conversations, as you can now scroll down the list to
find what you're looking for.

Fixes #5384.
2019-02-18 14:20:55 -08:00
Vaibhav af3b18d1f5 messagebox: Remove on-message-row-hover controls visible rules.
Date separator exists inside the message_row, which causes the
message controls to be visible even when hovering on date
separator. These two rules are redundant and cause this buggy
action. Other rules handle the behaviour of message controls
being visible on message box hover. Hence these can be removed.
2019-02-18 14:15:16 -08:00
Rishi Gupta 2df08618e9 help: Ensure bottom link in sidebar is above browser URL preview.
Previously, if you scrolled down all the way in the left sidebar, and kept
your mouse hovered over a link, you had a feeling that there was still "more
stuff", since you could see the top of "Back to Zulip" peeking out over the
top of the URL Chrome (and maybe some other browsers) add in the bottom left
corner.

This just adds a bit of margin so that "Back to Zulip" is above that when
scrolled all the way down.
2019-02-16 18:19:13 -08:00
Steve Howell 4de04c460a css: Reduce scope of topic-name selector. 2019-02-16 10:07:46 -08:00
Rishi Gupta 86378bd0d8 user status: Remove bolding on button click. 2019-02-16 09:28:58 -08:00
Steve Howell febad410f5 fix: Use padding, not margin, for the date separator.
My very recent margin fix was tested on a slightly
stale version of master.

    see c7e03f9a71
2019-02-15 11:30:36 -08:00
Steve Howell c7e03f9a71 message view: Fix margin for date separator.
Without this tweak the date separator overlaps
the left borner.
2019-02-15 09:55:15 -08:00
Steve Howell 66c6423001 popovers: Restructure hardcoded "top" for user popover.
The patch to bootstrap will make the position smarter, but we still
want to preserve the 100px default vertical offset we chose for visual
reasons.

Tweaked by tabbott to preserve the visual design.
2019-02-14 16:34:15 -08:00
Rishi Gupta 801d14280d search: Update styling and text for no search results.
Changed <h5> to <p>, and removed the special formatting of
.empty_search_text to make this more in line with the formatting we
generally use with empty narrows.
2019-02-14 15:03:14 -08:00
Vaibhav fb111d017f drafts: Remove left border from draft-box.
This removes the left border extending the stream label from the
recipient bar in from the drafts in drafts modal.  Those borders are
important in the message feed for containing several messages, but
here we're only ever going to show individual drafts, and this change
avoids potential color clashes with the blue box surrounding the
recipient blocks.
2019-02-14 11:33:08 -08:00
Vaibhav 162f06bbbb drafts: Add blue border around the active draft.
This removes the change in background to a darker one for active draft,
also removes the change in recipient_row_date color to blue; adds a blue
border around the draft box.
2019-02-14 11:32:11 -08:00
Vaibhav 5796d9d623 drafts: Change width of the drafts modal to 58%. 2019-02-13 16:16:34 -08:00
Vaibhav d710be866f drafts: Change spacing of drafts in modal.
Increase spacing (horizontal padding) of drafts.
Also add spacing between pro-tip and hr.
2019-02-13 16:16:34 -08:00
Steve Howell 0f21020783 drafts: Put 30-day notice in header (to prevent scroll). 2019-02-13 16:16:34 -08:00
Tim Abbott 4d1fb5270d message view: Fix asymmetric padding on date separators. 2019-02-13 16:03:33 -08:00
Anders Kaseorg 89897bcf70 css: Move inline date separators from messagebox to message_row.
Fixes border-related glitches introduced by commit
51c6c82003 (#10820).  Alternative
to #11534.

Signed-off-by: Anders Kaseorg <andersk@mit.edu>
2019-02-13 16:03:21 -08:00
Anders Kaseorg dae6aa21d8 css: Remove dead CSS classes message_data, prev_is_same_sender.
Signed-off-by: Anders Kaseorg <andersk@mit.edu>
2019-02-13 16:03:16 -08:00
YashRE42 93b6fa6036 search: Display stop words from query when no results.
This displays to the user clearly which words we ignored in their
search query due to being stop words.

Fixes #10592.
2019-02-13 13:23:48 -08:00
Puneeth Chaganti 29925fd303 digest: Fix width of digest-email-container.
The width of the messages div is set to 600px, while the
digest-email-container can be 500px at the most. Increasing the width
of the digest-email-container makes the /digest slightly more
readable.
2019-02-13 10:43:21 -08:00
Rishi Gupta 68d73f2e12 left sidebar: Remove border from starred messages count.
The padding changes move the number a bit to the right and down, towards
where the bottom right corner of an unread count box would have been. This
makes the number look better aligned with the unread count boxes above it.
2019-02-12 16:05:35 -08:00
Steve Howell 96cbea3c11 bug fix: Move stream search out of scroll container.
We want the search widget, when visible, to be
outside the scroll container for the stream list.

One obvious use case is if you start scrolling, and
then realize it might be less effort to search.

Also, for user search, it already worked this way.

We have to add a couple resizing hooks here, but
it's not necessary to change the actual resize
calculation, since we move the section inside
of #streams_header, which is already accounted
for.

The only markup change here is to add
a `stream_search_section` class.  I don't
know why we use `notdisplayed` here instead of
jQuery, or what `input-append` is for, but I
considered them outside the scope of this change.

We can also remove some crufty CSS that was
compensating for it being inside the container.
2019-02-12 10:26:13 -08:00
Steve Howell 3a12b514f1 css: Remove Group PMs from **left** sidebar.
First, we are not removing Group PMs from the
right sidebar, where most people see it.

There is a setting called:

    [ ] User list in left sidebar in narrow windows

There are probably very few people that turn that on,
and even when they do, the setting only takes effect
when your window is less than a certain width.

This feature bitrots very quickly, because very few
core maintainers use it.

It's already kind of broken.  It gets very crowded,
and we get CSS bugs when we move the right sidebar
into the left sidebar.  (We can fix those bugs, but
they crop up unexpectedly due to the nature of CSS.)

We historically tried to maintain a ratio between
stream list, single-user buddy list, and group-user
buddy list, but the group-user buddy list gets
particularly crowded out, and it's basically useless
now.

We want to revisit the entire feature eventually, but
this commit at least gives the normal buddy list some
breathing room.

Also, if you need to see the info in the group PM
list, you can basically expand "Private Messages" to
see your recent group PM conversations.  And if you
want to see who's actually online, that info is
already implicit from the normal buddy list.
2019-02-11 19:17:52 -08:00
Steve Howell 5d8664d725 refactor: Add an explicit `user_search_section`.
This, among other things, makes it easier to
troubleshoot the resize code.
2019-02-11 19:12:51 -08:00
Tim Abbott e1832d890a css: Move conversation-partners styles to left-sidebar.css. 2019-02-11 19:12:20 -08:00
Steve Howell b10ef272f1 css: Simplify selector for conversation partners. 2019-02-11 17:47:54 -08:00
Steve Howell fd76b1b226 css: Limit scope of filter-icon css. 2019-02-11 17:47:54 -08:00
Steve Howell 5db26cb7fe css: Remove sidebar-title cruft.
This CSS seems to go back to when sidebar-titles
were links.  It's scoped at the wrong level, and
it seems to have no effect.
2019-02-11 17:47:54 -08:00
Steve Howell 350ed9fcaf css: Limit li padding/border to narrows_panel. 2019-02-11 17:47:54 -08:00
Steve Howell bd3b715cf2 css: Set hover only on narrows_panels. 2019-02-11 17:47:53 -08:00
Steve Howell 51925b03b7 css: Set margin for only narrow_panels.
We don't want this margin to affect every
single thing that goes in the left sidebar.
2019-02-11 17:43:54 -08:00
Steve Howell c4ac7f5b03 left sidebar: Clean up "split" list moves.
This change only impacts users who have the setting
to put the user lists in the left sidebar when they
have a narrow window.

First, we move ".right-sidebar-items" as an entire
group.

Second, we append the items to "#left-sidebar"
instead of ".narrows_panel".
2019-02-11 17:43:54 -08:00
Steve Howell 039daa2bfa refactor: Rename bottom_sidebar to narrows_panel.
The name `bottom_sidebar` was misleading, because it
includes the entire "normal" left sidebar.

It includes the 4 narrow links at the top plus the
stream/topic list.

We now call is narrows_panel.

Note that the left sidebar sometimes also includes
the user list (with a display setting turned on).

And it will eventually include other views.

We also remove an intermediate value in the resize
calculations.
2019-02-11 17:43:54 -08:00
Tim Abbott cbc2f495ff css: Fix night mode styling for mentions.
This was missed in developing
51c6c82003.
2019-02-11 16:11:47 -08:00
Tim Abbott 51c6c82003 message_list: Don't split message groups for a date divider.
This adds date dividers within a single message group when the only
reason we had previously been splitting apart two message groups is a
change of date.  The overall effect is a cleaner message list user
experience.

The downside of this change would be that the recipient bars no longer
will always show a new date for date changes; to fix that, we rewrite
how the floating recipient bars both set the date field on the
floating recipient bar itself, as well as ensure that non-floating
recipient bars don't show duplicate dates.

In a future design update where we modify how message recipient bars
look, we may very well be able to simplify this logic by removing some
of the dynamic nature of the recipient bar calculations.  But this is
a good implementation of what remains.

Tweaked significantly by tabbott from Steve Howell's original, both to
extract these changes from a larger PR as well as to modify the
first_visible_message logic to handle some tricky corner cases.

Fixes #10171.
2019-02-11 15:56:09 -08:00
Rishi Gupta c26e2ab178 help: Adjust CSS for headings.
This looks like it affects why-page as well, but in practice all those pages
seem to have CSS that overrides these values.
2019-02-11 12:05:19 -08:00
Rishi Gupta 0958345416 help: Remove styling from spurious <p></p> tags. 2019-02-11 12:05:19 -08:00
Rishi Gupta 83236dc283 help: Add tab styling to untabbed instructions as well.
This changes the border-radius to 6px for the tabbed display, which is not
in line with the current Zulip style for border-radius (4px). However 6px
really looks a lot better for this (possibly because it's a bigger box than
most of our other boxes?)
2019-02-11 12:05:19 -08:00
Rishi Gupta d6c80d1ce7 help: Restyle tabbed navigation boxes. 2019-02-11 12:05:19 -08:00
Steve Howell 3649293d71 left sidebar: Add a bit of margin below stream list.
Having a tiny bit of margin below the stream list
makes it possible to see the bottom of the scrollbar.

It also makes it so that the scrollbar activates
for a tiny range of list sizes where before the
last element would have been right up against the
bottom of the page, but we wouldn't scroll.
2019-02-08 15:27:50 -08:00
Steve Howell d7f9a21519 api docs: Move json-api-example css to portico.scss.
We didn't need to patch the third-party bootstrap code for this.
2019-02-08 07:42:32 -08:00
Vishnu Ks 6ed6bcef05 invites: Move multiuse invite status to footer. 2019-02-07 15:41:00 -08:00
Vishnu Ks b62bd83083 invites: Add generate multiuse invite button. 2019-02-07 15:41:00 -08:00
Steve Howell e7ead7383d css: Add explicit padding below the navbar.
We have always intended to have 10px of whitespace
below the navbar, and this enforces it directly
and explicitly in the CSS.

Note that the three major panels still should
have a margin of 50px, which is equal to
the safe outer height of the header (40px + 10px).
2019-02-07 22:36:08 +00:00