Commit Graph

2840 Commits

Author SHA1 Message Date
YashRE42 a4f5b0c635 message_controls: Prevent clicks via visibility & not pointer-events.
Previously, the message controls had a bug where they would trigger on
mobile with a single tap over the area they occupy when visible. This
is wrong because a user would expect to first see the controls and
only trigger them once they are visible (with a second tap).

The above bug is caused by the fact that we were using "opacity: 0" on
".message_controls > div" to hide the controls and "opacity: 1" on
".messagebox &:hover .message_controls > div" to show the controls on
hover, however, this would not effect the click action because
"opacity". So we used "pointer-events: none;" and "pointer-events:
all;" with the hopes that it would prevented the above bug, but in
practice, it didn't.
(the most probable explanation being that tapping the message_control
area would cause the "&:hover" rule to trigger and change the
"pointer-event" to "all" before it could prevent the click trigger,
But that explanation is just conjecture.)

This commit replaces both "pointer-events" attributes with
"visibility: hidden" and "visibility: visible" respectively. The
result being that the message_controls behave identically to before,
except without the above bug.

The addition to the ".has_actions_popover .info" selector is important
because without it, we would regress on issue #3172.

Trivia:
An alternate approach to using "opacity" is to set the
"display" attribute to "none", however, using "display" prevents the
transition from animating (which is probably why we were using opacity
here in the first place). "visibility" does not prevent the transition
from animating.

History: The "pointer-events" attribute was introduced in
4d5aa3ddc9 and it replaced prior code
which relied on the "visibility" attribute... But it seems PR #3792
was mostly focused on improving the positioning through removal of
`display: none`, but introduced opacity to make the animations work
rather than visibility as the replacement solution, which requires the
pointer-events hack and resulted in the bug described here.

Fixes the second bug described in #13642.
2020-06-21 10:12:41 -07:00
MariaGkoulta b10f156250 settings: Add automatic theme detection feature.
With this implementation of the feature of the automatic theme
detection, we make the following changes in the backend, frontend and
documentation.

This replaces the previous night_mode boolean with an enum, with the
default value being to use the prefers-color-scheme feature of the
operating system to determine which theme to use.

Fixes: #14451.

Co-authored-by: @kPerikou <44238834+kPerikou@users.noreply.github.com>
2020-06-21 01:09:01 -07:00
SiddharthVarshney 1a8e9d1164 user-profile: Change color of `name` field.
With the previous color it was hard to read the text and
also that color does not matches with the zulip style.

This commit changes the color of `name` field for
user-profile modal for better visability both in day
and night mode.
2020-06-20 23:32:49 -07:00
SiddharthVarshney 3e1a0c0e32 portico: Fix UI of /accounts/go page.
Fixes: #14809
2020-06-20 17:54:06 -07:00
SiddharthVarshney 92059a5379 css: Use SCSS nesting for `.portico-landing.hello .gradients .gradient`. 2020-06-20 17:46:08 -07:00
SiddharthVarshney 5f8b8d62b9 css: Use SCSS nesting for `.portico-landing.hello .hero`. 2020-06-20 17:46:08 -07:00
SiddharthVarshney c3847c9b30 css: Use SCSS nesting for `.portico-landing.hello .hero header`. 2020-06-20 17:46:08 -07:00
SiddharthVarshney 0453c0bc36 css: Use SCSS nesting for `.portico-landing.hello .hero header button`. 2020-06-20 17:46:08 -07:00
SiddharthVarshney 5a02fd4a6b css: Use SCSS nesting for `.portico-landing.hello .hero .content`. 2020-06-20 17:46:08 -07:00
SiddharthVarshney cabdc72722 css: Use SCSS nesting for `.portico-landing.hello .hero .waves`. 2020-06-20 17:46:08 -07:00
SiddharthVarshney 45ea511225 css: Use SCSS nesting for `.portico-landing.hello .hero .waves .wave`. 2020-06-20 17:46:08 -07:00
SiddharthVarshney f96e38a8bd css: Reorder css for `.portico-landing.hello .hero`. 2020-06-20 17:46:08 -07:00
SiddharthVarshney be8027cb54 css: Use SCSS nesting for `.portico-landing.features-app`. 2020-06-20 17:46:08 -07:00
SiddharthVarshney ce9a365c62 css: Use SCSS nesting for `.portico-landing.features-app .feature-block`. 2020-06-20 17:46:08 -07:00
SiddharthVarshney d8a3ca0b2e css: Use SCSS nesting for `.portico-landing.features-app .cta`. 2020-06-20 17:46:08 -07:00
SiddharthVarshney c37d83347c css: Use SCSS nesting for `.portico-landing.features-app .cta:hover`. 2020-06-20 17:46:08 -07:00
SiddharthVarshney 7ea662e035 css: Use SCSS nesting for `.portico-landing.features-app section`. 2020-06-20 17:46:08 -07:00
SiddharthVarshney b3db95e879 css: Use SCSS nesting for `.portico-landing.features-app section a`. 2020-06-20 17:46:08 -07:00
SiddharthVarshney 544622a435 css: Use SCSS nesting for `.portico-landing.features-app section a.feature-block`. 2020-06-20 17:46:08 -07:00
SiddharthVarshney 553c3f1a50 css: Use SCSS nesting for `.portico-landing.features-app section .headliner`. 2020-06-20 17:46:08 -07:00
SiddharthVarshney 17ddbf33b1 css: Use SCSS nesting for `.portico-landing.features-app section.notifications`. 2020-06-20 17:46:08 -07:00
SiddharthVarshney acfd7755bb css: Use SCSS nesting for `.portico-landing.features-app section.notifications .feature-list`. 2020-06-20 17:46:08 -07:00
SiddharthVarshney b19902e00c css: Use SCSS nesting for `.portico-landing.features-app section.notifications .feature-list h3`. 2020-06-20 17:46:08 -07:00
SiddharthVarshney 88c2dfa580 css: Merge css for `.portico-landing.features-app section.notifications`. 2020-06-20 17:46:08 -07:00
SiddharthVarshney 6ec11e549d css: Use SCSS nesting for `.portico-landing.features-app section.messages`. 2020-06-20 17:46:08 -07:00
SiddharthVarshney ea1d2688c8 css: Use SCSS nesting for `.portico-landing.features-app section.messages .features`. 2020-06-20 17:46:08 -07:00
SiddharthVarshney 9a7c6504bb css: Use SCSS nesting for `.portico-landing.features-app section.keyboard-shortcuts`. 2020-06-20 17:46:08 -07:00
SiddharthVarshney 621dd2a445 css: Use SCSS nesting for `.portico-landing.features-app section.keyboard-shortcuts img`. 2020-06-20 17:46:08 -07:00
SiddharthVarshney 00eb90a551 css: Use SCSS nesting for `.portico-landing.features-app section.hero`. 2020-06-20 17:46:08 -07:00
SiddharthVarshney 68268c8c1e css: Use SCSS nesting for `portico-landing.show`. 2020-06-20 17:46:08 -07:00
SiddharthVarshney d61fd5d9eb css: Reorder `.portico-landing` and `.portico-landing.show`. 2020-06-20 17:46:08 -07:00
arpit551 0c6488b284 analytics: Added frontend for messages read over time graph.
The chart added is similar to the messages sent over time chart.

Fixes #15167
2020-06-20 16:52:33 -07:00
SiddharthVarshney e763d30f18 help: Update help docs for ellipsis.
Update help docs where chevron was previously
mentioned for sidebar manu icons.

Add css for `i.zulip-icon` to position icon
properly.
2020-06-20 16:47:43 -07:00
SiddharthVarshney b122ad7da4 topic-popover: Add chevron-right icon in topic popover title. 2020-06-20 14:57:54 -07:00
Ryan Rehman aa82008503 search pills: Fix pills misalignment bugs visible in firefox.
The `.search_icon` lies inside the `.pill_container` so we had to
remove it's display attribute which should have no visual changes.

We add `flex-wrap: nowrap` to prevent the cursor from moving onto
a new line, below the pills.

Fixes #15480.
2020-06-20 14:50:56 -07:00
jagansivam28 9038c7f28f settings CSS : Fix 'user-avatar-source' text reflow bug.
When we move the avatar upload widget to `image_upload_widget.hbs` file
the CSS `position:absolute` for `avatar-source` is preserved.
by removing CSS `position:absolute` we can fix the bug.
2020-06-19 15:53:51 -07:00
Rohitt Vashishtha c3bfa3de0d timestamp: Update night mode css after the syntax change. 2020-06-19 13:07:16 -07:00
Tim Abbott 9173f32a10 api docs: Fix formatting in changelog.
The CSS changes prevent our API docs markdown processor from
preserving line breaks within inline code block content.
2020-06-18 22:38:05 -07:00
Siddharth Varshney bbb07aed38 portico: Add hint text for invite only realm on /login.
Fixes: #10542

This will make obvious for users what to do when they are not able to login.

Test added by hackerkid.
2020-06-18 17:23:11 -07:00
sahil839 d9b7228444 streams: Add frontend to set/update message_retention_days of a stream.
This commit adds frontend support for setting and updating message
retention days of a stream from stream settings.

Message retention days can be changed from stream privacy modal of the
stream and can be set from stream_creation_form while creating streams.

Only admins can create streams with message_retention_days value other
than realm_default.

This commit also contains relevant changes to docs.
2020-06-18 17:00:34 -07:00
Rohitt Vashishtha 6ea3816fa6 markdown: Use html5 <time> tag for timestamps.
Previously, we had implemented:
    <span class="timestamp" data-timestamp="unix time">Original text</span>
The new syntax is:
    <time timestamp="ISO 8601 string">Original text</time>
    <span class="timestamp-error">Invalid time format: Original text</span>

Since python and JS interpretations of the ISO format are very
slightly different, we force both of them to drop milliseconds
and use 'Z' instead of '+00:00' to represent that the string is
in UTC. The resultant strings look like: 2011-04-11T10:20:30Z.

Fixes #15431.
2020-06-18 14:11:33 -07:00
Dinesh 9801692a2d css: Fix size of GitLab icon in login and signup buttons. 2020-06-18 13:06:10 -07:00
Dinesh 0445311430 auth: Make apple log in and sign up buttons consistent with others. 2020-06-18 13:06:10 -07:00
sahil839 8bd1429f4c css: Move css of upgrade-tip class to app_components.scss.
This commits moves the css of upgrade-tip class from settings.scss
to app_components.scss as this class will also be used in stream
settings page for message-retention-days setting in further commits.

tip class in settings.scss is also moved as it has the same styles as
upgrade-tip class.
2020-06-18 01:17:58 -07:00
SiddharthVarshney 20f7e6a393 left-sidebar: Update comment.
Since chevron is replaced with ellipsis this
commit will update the comment.
2020-06-18 00:54:18 -07:00
jagansivam28 548107632c settings org: Use `image_upload_widget.hbs` for realm day/night logo.
Now we can use common HTML image upload widget template
`image_upload_widget.hbs` for realm day/night logo and
we should access those day/night logo elements using
e.g., "#realm-day/night-logo-upload-widget .realm-logo-elements".
since we use image_upload_widget.hbs for realm day/night logo upload
widget we need to extract CSS for realm day/night logo and
place them separately under `#realm-day-logo-upload-widget`
and `#realm-day-logo-upload-widget` css id.
2020-06-17 17:47:49 -07:00
jagansivam28 e132db3480 settings org: Use `image_upload_widget.hbs` for realm icon.
Now we can use common HTML image upload widget template
`image_upload_widget.hbs` for realm icon. we can access icon
element using "#realm-icon-upload-widget .realm-icon-elements".
also we need to extract CSS for realm icon and place them
separately under `#realm-icon-upload-widget` css id.
2020-06-17 17:47:49 -07:00
YashRE42 c3d322f1a7 navbar: Improve spacing between stream name and sub_count. 2020-06-16 17:26:55 -07:00
YashRE42 63f69c48a5 navbar: Fix clickable area between sub_count and narrow_description.
Previously, there was a small dead spot in the click area between the
sub_count and narrow_description, such that the mouse cursor would
switch from pointer to the default.

This commit corrects the dead spot by adjusting the margins and styles
on navbar elements.

This should be workable, but there is scope for improvement especially
given that the current margins and paddings are messy and not very
semantic.

The end result is that the entire navbar becomes a smooth, clickable
region.
2020-06-16 17:26:55 -07:00
YashRE42 71e393575b navbar: Improve click area around stream name.
Previously the click area to open the settings modal was limited to
just the stream name (just the text). This, inconveniently, created a
lot of empty, unclickable space around the stream name.

This commit resolves the problem by:
  * Extracting the title and icon into a separate template as
    `navbar_title_and_icon.hbs` and calls this partial in
    `tab_bar.hbs`.
  * Calling the partial within an <a> tag for stream based narrows
    and in a <span> tag for non-stream narrows.
  * Making some CSS changes so that everything still renders correctly
    (visually).

This commit also:
  * Leads us to "piggy back" all stream based narrow elements on the
    `stream_settings_link` conditional. (Previously the only "piggy
    backing" was by `narrow_description` on `sub_count`, which was
    necessary for the rendering of the `(no description)` string.)

The end goal here is that the entire navbar is clickable. This is a
step towards that goal, but some of the margins on the sub count and
its ::before and ::after pseudo-elements still need to be fixed.
2020-06-16 17:26:55 -07:00