We already have single-key shortcuts for all message controls but Zulip
should be usable from the keyboard without having to learn a bunch of
Zulip-specific keyboard shortcuts.
Prior to commit eb4a2b9d4e the center
area of the navbar was based on a structure that appended crumbs or
"tabs" as <li>s, forming a tab_bar and a tab_list.
However, in eb4a2b9d4e we apply a new
style and structure to the navbar which lets go of the convention of
tabs. Hence, we'd like to purge the tab_bar and tab_list labels from
our code base.
We purged tab_list in 1267caf5009118875f47fdafe312880af08024e1.
This commit purges tab_bar, it includes:
- A blanket search and replace of tab_bar with message_view_header.
- Splitting a single line comment in
tab_bar.js / message_view_header.js.
- The renaming of tab_bar.js to message_view_header.js.
- The renaming of tab_bar.hbs to message_view_header.hbs.
- A blanket search and replace of tab_data with
message_view_header_data.
- Replacing the single occurrence of tabbar with message_view_header
(it was within a comment.)
For mysterious reasons, this avoids the following message printed by
webpack on a cold cache after upgrading postcss-nested from 4.2.1 to
4.2.2:
Ignoring local source map at "/srv/zulip/<no source>" as resource is missing.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
Not having a focus outline is very bad for accessibilty.
Browsers have it by default but we completely disabled it for links in
the sidebar in 9955580251.
Showing the outline when selecting a page in the sidebar can be
distracting, so we hide the outline for the highlighted sidebar link.
Since every focusable element however should have a focus outline, we
make the highlighted link unfocusable by setting tabindex=-1 (which also
makes sense since the link to the current page doesn't do anything
anyway).
Part of #15948.
Improved markup of help-text.
Showing Email as plain-text instead of disabled input.
Changed page heading to 'Create your organization' in realm creation form
and 'Create your account' in normal signup form.
Grouped org settings and user settings with fieldsets.
Reduced space between Password field and Password strength bar.
Also, updated the corresponding test cases.
Partially Fixes: #15750.
Previously when hovering over a selected topic in the left sidebar
a barely different hover color was employed (and overriden in the dark
mode). This resulted in a small UX issue because after selecting a topic
in the sidebar it should immediately be colored as such (and not just
after moving the mouse cursor away).
Previously the left sidebar used a darker hover background than the
right sidebar, presumably to stand out more when hovering over an active
filter (which have a blue background in the light theme). This can be
more elegantly solved by using a transparent hover background.
There were two problems preventing the autofocus:
* The focus was triggered at the wrong time.
* transition: all; affected the visibility, making browsers
abort the focus since the input was still hidden.
Previously, image upload widget delete text CSS class name was
`settings-page-upload-text`.
We can change the CSS class name to `image-upload-text`
so that the name can be more generic.
Previously, image upload widget delete text CSS class name was
`settings-page-delete-text`.
We can change the CSS class name to `image-delete-text`
so that the name can be more generic.
Previously, image upload widget delete button CSS class name was
`settings-page-delete-button`.
We can change the CSS class name to `image-delete-button`
so that the name can be more generic.
Previously, image upload widget CSS class name was
`avatar-icon-logo-settings` it is not relevant to the widget so
we can change the CSS class name to `image_upload_widget`
so that the name can be more generic.
These checkboxes will now be more consistent
in design as we have in other part of the UI.
e.preventDefault() is added inside the
stream_is_muted_clicked function will disable
the default checkbox and make sure click event
come from only <span> part of the checkbox.
It's unclear what the purpose of this logic was, but testing confirms
that the text color is as expected without this in the day theme (so
it's likely a relic of an old design) and removing it fixes the hover
text being overridden to white in the night theme.
This handler adds a neat little effect whereby hovering over the
clickable region to open the navbar triggers the search_icon hover
effect and is a neat little visual cue about what happens onClick.
The previous implementation was slightly messy because it fetched the
color and applied it via ".css(". This commit cleans it up by creating
and using the class "search_icon_hover_highlight" instead. We also
make the selectors more specific, ensuring they target children of
"#tab_bar", this was so because it was reasonable to expect someone to
define eg `search_closed` elsewhere and we wanted to prevent bugs when
that happened.
In 9046fc1032 we updated the navbar.html
file so that our css selectors did not override each other and cause
annoying problems.
Unfortunately this caused a regression in night mode where the
search_icon didn't have the correct hover effect.
This fixes the regression by adding the selectors.
In 9648e64d23, we added a clear outline
around focused link elements in popovers.
This was a good fix for popovers, but it's distracting for the
experience of clicking links in the sidebars and message feed.
This commit fixes the dropdown_list_widget to use simplebar for
scrolling.
It was not being used because data-simplebar should not be inserted
to the element being rerendered. This commit adds a new element
wrapping 'dropdown-list-body' which was being rerendered and
data-simplebar is added to that new element 'dropdown-list-wrapper'.
Also, there should always be a max-height property on data-simplebar
element and it is also added in this commit.
There is also a change to set margin of 10px only on the first div
element and which is direct children of organization-settings-parent
element. This is correct because we only want margin to add some space
between the heading of subsection and the first setting of that
subsection. Previously, the margin was being added to first div of all
the other child containers also and this was adding unnecessary margin
to the first div element of different simplebar containers.
We remove the action column and show action buttons next to topic
after unread count (if present). This save us a lot of extra space
on small window sizes.
For a:focus Bootstrap sets the following rules:
outline: thin dotted #333;
outline: 5px auto -webkit-focus-ring-color;
Firefox does not know -webkit-focus-ring-color and falls back to the
previous rule, making the outline invisible in darkmode.
Chromium has a bug[1] that makes outline: auto invisible when focussing
elements programmatically (which we do for the up & down arrow keys).
[1]: https://bugs.chromium.org/p/chromium/issues/detail?id=1105822Fixes#15768.
jQuery's fadeOut() sets display: none using inline CSS.
This was overriden by .alert-notification since it used !important
to override the display: block set in loading.js. Removing the latter
allows us to remove the !important, and doesn't seem to break anything.
Fixes#15759.
Previously, we were experiencing a bug that caused the left border of
the searchbox/tab_bar to disappear when the searchbox was opened. This
bug was a result of the following changes:
- 4cdd7aed2b accidentally added this line
as right: 2; instead of right: 2px;
- 46c966576d fixed this line to be
right: 2px; but caused the regression.
This commit fixes the bug by deleting this line.
Previously user have to click pixel perfect on the message controls
icons to achieve the click action.
This commit will uniformly increases the click target
area for the icons.
Tweaked by tabbott to avoid some weird glitches.
Throughout the codebase we use <i> tag for icons.
This commit will add <i> tag inside the starred message
div and fa classes are now used with this <i> tag.
The starred message div is now consistent with other
message_controls divs.
Tweaked by tabbott to use the name star_container for better
readability.
Prior to commit eb4a2b9d4e the center
area of the navbar was based on a structure that appended crumbs or
"tabs" as <li>s, forming a tab_bar and a tab_list.
However, in eb4a2b9d4e we apply a new
style and structure to the navbar which lets go of the convention of
tabs. Hence, we'd like to purge the tab_bar and tab_list labels from
our code base.
It would have been nicer if we could simply purge tab_bar from the
codebase and rename "#tab_list" so that we have an anchor and wrapper
structure in the html, but dropping the float: left on tab_bar causes
some confusing problems such as causing the horizontal border to
disappear and the search_box to shift out of its intended position and
so its simpler to get rid of tab_list from our code base first.
This commit:
- Removes the #tab_list wrapper div from tab_bar.hbs.
- Removes any #tab_list selectors from night_mode.scss so that they
simply target based on "#tab_bar" instead of "#tab_bar #tab_list".
- Removes tab_list selectors from zulip.scss, so that #tab_list
attributes now apply to the #tab_bar, in the process we drop the
duplicated width property and reorder the attributes.
- Replaces all mention of #tab_list with #tab_bar in JS files.
Prior to commit eb4a2b9d4e the center
area of the navbar was based on a structure that appended crumbs or
"tabs" as <li>s, forming a tab_bar and a tab_list.
However, in eb4a2b9d4e we apply a new
style and structure to the navbar which lets go of the convention of
tabs. Hence, we'd like to purge the tab_bar and tab_list labels from
our code base. This commit pushes us towards that goal by simplifying
the future merge of the two CSS labels.
Prior to commit eb4a2b9d4e the center
area of the navbar was based on a structure that appended crumbs or
"tabs" as <li>s, forming a tab_bar and a tab_list.
However, in eb4a2b9d4e we apply a new
style and structure to the navbar which lets go of the convention of
tabs. Hence, we'd like to purge the tab_bar and tab_list labels from
our code base. This commit pushes us towards that goal by simplifying
the future merge of the two CSS labels.
The letter-spacing attribute was set to its default value and so we
remove it and rely on the default.
Prior to commit eb4a2b9d4e the center
area of the navbar was based on a structure that appended crumbs or
"tabs" as <li>s, forming a tab_bar and a tab_list.
However, in eb4a2b9d4e we apply a new
style and structure to the navbar which lets go of the convention of
tabs. Hence, we'd like to purge the tab_bar and tab_list labels from
our code base. This commit pushes us towards that goal by simplifying
the future merge of the two CSS labels.
Currently the #tab_bar is just a container for the #tab_list and the
#tab_list handles the overflow attributes and so these do not serve
any purpose.
Prior to commit eb4a2b9d4e the center
area of the navbar was based on a structure that appended crumbs or
"tabs" as <li>s, forming a tab_bar and a tab_list.
However, in eb4a2b9d4e we apply a new
style and structure to the navbar which lets go of the convention of
tabs. Hence, we'd like to purge the tab_bar and tab_list labels from
our code base. This commit pushes us towards that goal by simplifying
the future merge of the two CSS labels.
We have the same selector within #tab_list and the duplication is
unnecessary.
Ideally we would not be relying on something that requires a 4 line
comment, and also makes it harder to add more static elements at the
end of the navbar, but this block should be acceptable for now.
One alternate would be a "grow-1" class or similar but we might need
to think that through.
My previous message_header fix
0b4568d249
accidentally changed the alignment of dates in private messages (so that
it was inconsistent to the alignment in other narrows).
Previously .recipient_row_date was positioned absolutely, allowing it to
overlap with the topic name on narrow screens. This can be solved by
using flexbox. To implement the empty space between the bar controls and
the date on wider screens we move the date outside of the bar controls
(which also makes more sense semantically since the date isn't a
control).
Fixes#15501.
This fixes the bug of extra topics not being rendered on scrolling.
list_render uses `max-height` to determine which container is being
scrolled upon. Set the `max-height` on the scrolling container of
recent topics to help list_render identify it.
This particular commit has been a long time coming. For reference,
!avatar(email) was an undocumented syntax that simply rendered an
inline 50px avatar for a user in a message, essentially allowing
you to create a user pill like:
`!avatar(alice@example.com) Alice: hey!`
---
Reimplementation
If we decide to reimplement this or a similar feature in the future,
we could use something like `<avatar:userid>` syntax which is more
in line with creating links in markdown. Even then, it would not be
a good idea to add this instead of supporting inline images directly.
Since any usecases of such a syntax are in automation, we do not need
to make it userfriendly and something like the following is a better
implementation that doesn't need a custom syntax:
` Alice: hey!`
---
History
We initially added this syntax back in 2012 and it was 'deprecated'
from the get go. Here's what the original commit had to say about
the new syntax:
> We'll use this internally for the commit bot. We might eventually
> disable it for external users.
We eventually did start using this for our github integrations in 2013
but since then, those integrations have been neglected in favor of
our GitHub webhooks which do not use this syntax.
When we copied `!gravatar` to add the `!avatar` syntax, we also noted
that we want to deprecate the `!gravatar` syntax entirely - in 2013!
Since then, we haven't advertised either of these syntaxes anywhere
in our docs, and the only two places where this syntax remains is
our game bots that could easily do without these, and the git commit
integration that we have deprecated anyway.
We do not have any evidence of someone asking about this syntax on
chat.zulip.org when developing an integration and rightfully so- only
the people who work on Zulip (and specifically, markdown) are likely
to stumble upon it and try it out.
This is also the only peice of code due to which we had to look up
emails -> userid mapping in our backend markdown. By removing this,
we entirely remove the backend markdown's dependency on user emails
to render messages.
---
Relevant commits:
- Oct 2012, Initial commit c31462c278
- Nov 2013, Update commit bot 968c393826
- Nov 2013, Add avatar syntax 761c0a0266
- Sep 2017, Avoid email use c3032a7fe8
- Apr 2019, Remove from webhook 674fcfcce1
When we extract common HTML template (`image_upload_widget.hbs` )
for user avatar, realm day/night logo and realm icon widget's
lot of new CSS are created to match image_upload_widget.hbs and
old CSS are preserved in `settings.scss`. This commit removes all
unwanted or unused CSS in `settings.scss`.
For the email and full name modals we simply change width to max-width.
The password modal used a flex-row class for no apparent reason,
the class wasn't used anywhere else and removing it fixes the UI bug.
Fixes#15311.
Fixes the click target for the gear icon by providing
a proper rectangular area around it.
Minor UI adjustments of gear icon and expanded
navbar-search for small size devices.
Fixes: #15222.
Since we had extracted `image_upload_widget.hbs` HTML for
image upload widget's like user avatar, realm logo, realm icon
we can also extract `image_upload_widget.scss` SCSS file
from settings.scss file with all the CSS related
to image upload widget's.
This change will also help us to keep `settings.scss` cleaner.
In zulip.yaml, add `deprecated` tags to all parameters/keys with
`Deprecated` in the description. Then add tests to ensure that deprecated
parameters/keys will always have the `deprecated` key. Also, in
the API docs, sort the parameters according to presence of `deprecated`
key, presenting the `deprecated` keys at the end and add a `deprecated`
tag next to them.
If your browser width was between 701px and 750px you got the mobile
view without the mobile header preventing you from changing sections in
the settings menu.
This was caused by a media-query mismatch:
subscriptions.scss used @media (max-width: 750px)
settings.scss however used @media (max-width: 700px)
Comments added by tabbott to help avoid future bugs like this.
* Don't annoyingly open the first section when switching
between the Settings and Organization tabs.
* Don't highlight currently active section in the settings list
(we don't display the currently active section in the mobile settings
list so it isn't actually active).
* Remove nearly invisible and buggy no-border logic.
The previous architecture did not work properly with the automatically
detected night theme, resulting in a weird mix of the night and day
themes on code blocks.
I'm not thrilled with the requirement this imposes that all of our
night theme CSS needs to be in one file, but we do need to get a quick
fix out here.
Fixes#15554.
Previously in desktop view, the realm day/night logo element is arranged
one by one which is not looking good since we have a lot of space on the
the right side of the logo elements so we can move day/night logo elements
to allow them being alongside.
In mobile view, we don't have any space on the right side of the logo
elements so we don't have to change anything.
Fixes these compilation errors from webpack and PostCSS, exposed by
commit b10f156250 (#14997) which tries
to @extend these directives:
Unexpected '}' at app.d5da4b9d46e79634b8fb.css:9103:4.
Unexpected '}' at app.d5da4b9d46e79634b8fb.css:9104:0.
Invalid property name '@-moz-document url-prefix() {
@nest & #settings_page select {
background-color' at night_mode.scss:788:0. Ignoring.
Invalid selector '}
}
.user_status_overlay .overlay-content' at night_mode.scss:797:4. Ignoring.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
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.
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>
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.
SiddharthVarshney
Gittenburg
YashRE42
Anders Kaseorg
Priyansh Garg
Aman Agrawal
Vishnu KS
jagansivam28
Tim Abbott
Rohitt Vashishtha
orientor
Ryan Rehman
MariaGkoulta