Commit Graph

113 Commits

Author SHA1 Message Date
Ryan Rehman 4cdd7aed2b css: Narrow the gap between searchbox and searchbox_legacy.
This is a prep commit which combines the previous `#searchbox`
block with the newly updated `#searchbox_legacy` block which
contains the modifications related to the new navbar display.

This only consists of changes to `#searchbox` and is still broken.
But it integrates the searchbox with the new tab_bar changes so that
only one searchbox is shown (instead of two, previously).
2020-05-26 22:04:36 -07:00
YashRE42 669f482b0d icons: Switch from text-o to code-o for view source / edit topics.
This commit replaces fa-file-text-o with fa-file-code-o which is a
better signal for the "view source" action. It also deletes a single
line comment that had suggested the change once we moved into font
awesome 4, which Aditya Bansal <adi.bansal241996@gmail.com> helped
out in doing, first via
91962aa6ab and most recently via
75ae94e459 with several commits in
between.
2020-05-25 16:19:50 -07:00
Aman Agrawal 7c502acb4c message_edit: Show stream color bar alongside stream select.
* Stream bar color logic is borrwoed from compose stream bar.
* Use flex containers to align elements and automatically set their
  height to be same, them automatically filling the stream color bar
  height to be the height of the select box.
* Use flex-wrap to wrap the propagate selector when out of space.

* To make sure stream select box and stream color box are closest possible,
  select box has been moved under stream color box.
2020-05-14 14:27:53 -07:00
Aman Agrawal 9734bcc7cd compose_ui: Extract method to set color of stream header bar.
Similar method will be used to set color for stream selection bar
when editing stream of topic/message.
2020-05-14 14:27:53 -07:00
Hashir Sarwar 0cbb778af4 ui_init: Fix play button position on video thumbnails.
This fixes a jQuery bug that broke the postion of play
button on video thumbnails particularly when YouTube
images fetched from oembed are displayed.
2020-04-28 22:41:00 -07:00
Steve Howell beaf488eeb ui: Make selectors more specific for message hover.
The hover values here should not apply to draft
messages, for example.
2020-04-02 16:57:01 -07:00
Steve Howell 2cd9c77979 refactor: Stop using page_params.realm_default_streams.
We now only use `page_params.realm_default_streams` during
initialization, and then after that we use `stream_data`
APIs to get default stream ids and related info.  (And
for the event that replace the data, we just update our
internal data structures as well.)

Long term we should have the server just send us ids here,
since we are now hydrating info from stream data in all places.
2020-03-25 17:11:25 -07:00
Anders Kaseorg 71dd495214 js: Convert _.pluck(a, "key") to item => item.key.
Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
2020-02-27 17:20:34 -08:00
Steve Howell 1f156230b0 refactor: Clean up alert_words API.
We add these two functions to the API,
so that we no longer have `alert_words_ui`
using private data from `alert_word`:

    alert_words.has_alert_word()
    alert_words.get_word_list()

And to initialize the data, we have a proper
`initialize` method that is passed in only
the parameters that it needs from `ui_init`.

(We also move the step of deleting `alert_words`
from `page_params` to the `ui_init` module.)

Because it's a bit less cumbersome to initialize
`alert_words`, we now just it directly in the
node tests for `alert_words_ui`.
2020-02-27 11:10:13 -08:00
Steve Howell c32b4d098f ui_init: Pass params to pm_conversations.recent.
This is follow up to da79fd206a

I accidentally skipped over pm_conversations.  Same
ideas as the bigger previous commit--we pass in params
to the initialize function and do the delete cleanup
within ui_init.
2020-02-27 11:10:13 -08:00
Steve Howell da79fd206a ui_init: Handle page_params more cleanly.
This cleans up the handoff of page_params
data between ui_init and modules that
take over ownership of page_params-derived
data.

Read the long comment in ui_init for a bit
more context.

Most of this diff is actually test cleanup.
And a lot of the diff to "real" code is
just glorified `s/page_params/params/`
in the `initialize` functions.

One little oddity is that we don't actually
surrender ownership of `page_params.user_id`
to `people.js`.  We could plausibly sweep
the rest of the codebase to just use
`people.my_user_id()` consistently, but it's
not a super high priority thing to fix,
since the value never changes.

The stream_data situation is a bit messy,
since we consume `page_params` data in the
initialize() function in addition to the
`params` data we "own".  I added a comment
there and intend to follow up.  I tried
to mostly avoid the "word soup" by extracting
three locals at the top.

Finally, I don't touch `alert_words` yet,
despite it also doing the delete-page-params-data
dance.  The problem is that `alert_words`
doesn't have a proper `initialize()`.  We
should clean that up and have it use a
`Map` internally, too.
2020-02-26 13:14:09 -08:00
Anders Kaseorg 1cdab5ae61 emoji: Resolve emoji sprite sheets and stylesheets through Webpack.
This gives them cache-compatible URLs, and also avoids some extra
copies of the sprite sheet images.

Comments on the Octopus emoji added by tabbott.

Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
2020-02-25 14:43:46 -08:00
Steve Howell b55d2bc256 markdown: Add helper configuration for mobile.
This refactoring is the first step toward sharing
our markdown code with mobile.  This focuses on
the Zulip layer, not the underlying third party `marked`
library.

In this commit we do a one-time initialization to
wire up the markdown functions, but after further
discussions with Greg, it might make more sense
to just pass in helpers on every use of markdown
(which is generally only once per sent message).
I'll address that in follow-up commits.

Even though it looks like a pretty invasive change,
you will note that we barely needed to modify the
node tests to make this pass.  And we have pretty
decent test coverage here.

All of the places where we used to depend on
other Zulip modules now use helper functions that
any client (e.g. mobile) can configure themselves.
Or course, in the webapp, we configure these from
modules like people/stream_data/hash_util/etc.

Even in places where markdown used to deal directly with
data structures from other modules, we now use functions.
We may revisit this in a future commit, and we might
just pass data directly for certain things.

I decided to keep the helpers data structure completely flat,
so we don't have ugly nested names like
`helpers.emoji.get_emoji_codepoint`.  Because of this,
some of the names aren't 1:1, which I think is fine.

For example, we map `user_groups.is_member_of` to
`is_member_of_user_group`.

It's likely that mobile already has different names
for their versions of these functions, so trying for
fake consistency would only help the webapp.  In some
cases, I think the webapp functions have names that
could be improved, but we can clean that up in future
commits, and since the names aren't coupled to markdown
itself (i.e. only the config), we will be less
constrained.

It's worth noting that `marked` has an `options`
data structure that it uses for configuration, but
I didn't piggyback onto it, since the `marked`
options are more at the lexing/parsing layer vs.
the app-data layer stuff that our helpers mostly
help with.

Hopefully it's obvious why I just put helpers in
the top-level namespace for the module rather than
passing it around through multiple layers of the
parser.

There were a couple places in markdown where we
were doing awkward `hasOwnProperty` checks for
emoji-related stuff.  Now we use the Python
principle of ask-forgiveness-not-permission and
just handle the getters returning falsy data.  (It
should be `undefined`, but any falsy value is
unworkable in the places I changed, so I use
the simpler, less brittle form.)

We also break our direct dependency on
`emoji_codes.json` (with some help from the
prior commit).

In one place I rename streamName to stream_name,
fixing up an ancient naming violation that goes
way back to before this code was even extracted
away from echo.js.  I didn't bother to split this
out into a separate commit, since 2 of the 4
lines would be immediately re-modified in the
subsequent commit.

Note that we still depend on `fenced_code`
via the global namespace, instead of simply
requiring it directly or injecting it.  The
reason I'm postponing any action there is that
we'll have to change things once we move
markdown into a shared library.  (The most
likely outcome is that we'll rename/move both files
at the same time and fix the namespace/require
details as part of that commit.)

Also the markdown code still relies on `_` being
available in the global namespace.  We aren't
quite ready to share code with mobile yet, but the
underscore dependency should not be problematic,
since mobile already uses underscore to use the
webapp's shared typing_status module.
2020-02-18 16:13:38 -08:00
Steve Howell f603710cd1 markdown: Pass in page_params.realm_filters to initialize(). 2020-02-18 15:52:34 -08:00
Anders Kaseorg 2834b051d2 js: Read zid with rows.id.
Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
2020-02-12 10:39:01 -08:00
Steve Howell 75dbc4a2b1 presence: Extract presence.initialize(). 2020-02-10 14:37:44 -08:00
Steve Howell 0aa9decd86 blueslip: Add feature to time common operations.
This is relatively unobtrusive, and we don't send
anything to the server.

But any user can now enter blueslip.timings in the
console to see a map of how long things take in
milliseconds.  We only record one timing per
event label (i.e. the most recent).

It's pretty easy to test this by just clicking
around.  For 300 users/streams most things are
fast except for:

    - initialize_everything
    - manage streams (render_subscriptions)

Both do lots of nontrivial work, although
"manage streams" is a bit surprising, since
we're only measuring how long to build the
HTML from the templates (whereas the real
time is probably browser rendering costs).
2020-01-15 12:01:16 -08:00
Tim Abbott 263ac0eb45 pm_conversations: Initialize using server data.
This simple change switches us to take advantage of the
server-maintained data for the pm_conversations system we implemented
originally for mobile use.

This should make it a lot more convenient to find historical private
message conversations, since one can effectively scroll infinitely
into the history.

We'll need to do some profiling of the backend after this is deployed
in production; it's possible we'll need to add some database indexes,
denormalization, or other optimizations to avoid making loading the
Zulip app significantly slower.

Fixes #12502.
2019-11-21 17:01:41 -08:00
Anders Kaseorg 28f3dfa284 js: Automatically convert var to let and const in most files.
This commit was originally automatically generated using `tools/lint
--only=eslint --fix`.  It was then modified by tabbott to contain only
changes to a set of files that are unlikely to result in significant
merge conflicts with any open pull request, excluding about 20 files.
His plan is to merge the remaining changes with more precise care,
potentially involving merging parts of conflicting pull requests
before running the `eslint --fix` operation.

Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
2019-11-03 12:42:39 -08:00
Anders Kaseorg 4d37dfcf85 js: Convert vars declared separately and assigned once to const.
Because of the separate declarations, ESLint would convert them to
`let` and then trigger the `prefer-const` error.

Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
2019-10-28 15:02:43 -07:00
Anders Kaseorg d17b577d0c js: Purge useless IIFEs.
With webpack, variables declared in each file are already file-local
(Global variables need to be explicitly exported), so these IIFEs are
no longer needed.

Signed-off-by: Anders Kaseorg <andersk@mit.edu>
2019-10-25 13:51:21 -07:00
Vinit Singh d09a80260b lint: Replace local variables named 'msgid' with 'message_id'.
Follow up of commit 2a1305d. Replace all local variables named 'msgid'
with 'message_id' in all JS and HTML files, and adds a linter rule for
it as well.

Resolves #12952.
2019-08-28 15:19:30 -07:00
Anders Kaseorg 2ac944c31f css: Remove message_hovered class.
This appears to have been dead for years.

Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
2019-07-23 17:54:12 -07:00
Anders Kaseorg 6e4ae95994 message_viewport.js: Add setter for last_movement_direction.
After migration to an ES6 module, `last_movement_direction` would no
longer be mutable from outside the module.

Signed-off-by: Anders Kaseorg <andersk@mit.edu>
2019-07-08 21:22:54 -07:00
YashRE42 ae6e99ae34 tooltips: Fix doubling of keyboard-icon.
This fixes a bug where the default fade-in animation of bootstrap tool
tips caused the tool tip over the keyboard-icon to change shape slightly
while fading away.

Fixes #11766.
2019-06-24 12:57:48 -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
Rishi Gupta 36ff56e741 message feed: Add hotkey hint to Edit pencil on message hover. 2019-05-20 12:18:13 -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
Steve Howell bfdce11c8f refactor: Initialize stream list code in stream_list.js.
This code was in subs.js for historical reasons.
2019-04-11 10:50:55 -07:00
Anders Kaseorg bd50c6a152 resize: Don’t hide popovers on mobile resize.
Or on the scroll triggered by that resize.

Then we don’t need a kludge that skips the resize handler in
situations where it might hide popovers.

Signed-off-by: Anders Kaseorg <andersk@mit.edu>
2019-03-15 09:52:08 -07:00
Abhinav Singh 8fbba64377 emoji: Allow users to add emoji or react in mobile browsers.
It was impossible to add emoji to the message or to react on other's
message in mobile browsers because emoji popover used to get closed
due to the resize event being fired by the virtual keyboard. This
commit solves this issue by ignoring the resize event when the user
is trying to use emoji popover.

Fixes #11448.
2019-03-14 14:50:26 -07:00
Tim Abbott 399aa43c75 night mode: Fix initial state of night mode. 2019-03-08 15:45:11 -08:00
Steve Howell fb750a2656 bug fix: Fix hovers for /me messages.
This fixes several bugs with /me messages:

    * We no longer hover name if you're over
      the message.

    * We now launch the user popup if you
      click on the name.

    * Even if you click on the avatar, we
      launch the user popup to the right
      of the name.  (I think this is odd,
      but it's consistent with how we
      do it for normal messages.)

The underlying problem here is that you have
two possible organizations.

From a logical standpoint, the image and
name go together (and both launch the user menu):

    img Alice | says hi

From a physical perspective, the main message
is "Alice says hi" and it's aligned differently
from the image:

    img | Alice says hi

Our HTML reflects the latter.

HTML doesn't allow overlapping diffs, of course,
so you have to pick your poison.
2019-03-08 15:24:01 -08:00
Abhinav Singh 99df926ef3 sidebar: Allow users to use sidebar search in mobile browser.
It was impossible to search people in mobile browsers because virtual
keyboard used to fire resize event and the function call that we used
to handle this event caused the input field to loose focus and this
made it impossible to type in the people search bar.

The code in this commit fixes this by simply ignoring the resize
events when the user wants to search.

Fixes #11795.
2019-03-08 11:37:02 -08:00
Steve Howell a964977960 user status: Add ability to edit status text. 2019-01-29 10:27:49 -08:00
Steve Howell 995a26f4e5 ui: Explicity initialize night mode. 2019-01-04 10:54:10 -08:00
Steve Howell f985125eb0 js: Initialize people.js earlier.
There is no reason not to initialize people.js
super early in the process, as it only reads
data from page_params.  Also, other modules
are likely to want its data during their own
initialization steps.
2019-01-03 13:49:44 -08:00
Steve Howell 6b7a4f8611 tests: Add unit tests for ui_init.js.
This test tries to find obvious dependency bugs, but
it really doesn't do anything other than fail when
it tries to use unavailable resources.
2019-01-03 13:44:38 -08:00
Steve Howell d8d703af45 frontend: Add basic user_status module.
So far this processes page_params, but it's otherwise
an unused internal API.
2019-01-02 09:16:31 -08:00
Steve Howell a4c80089f3 page load: Fix two bugs related to muting/unreads.
The first bug fixed here has been around for a long
time--we were redundantly updating unread counts
indirectly via muting_ui.initialize(). The
unread counts also get updated in
unread_ui.initialize(), when we have more valid
state.  (And it's worth noting here that the unread
counts get updated yet again once message fetches
complete.)

The second bug was a very recent regression from
my recent stream name -> stream id cleanup in the
muting system.  We now depend on stream_data to
initialize muting data, so we need to initialize
muting.js slightly later in the process.

These fixes are intertwined, because they were both
somewhat caused by the anti-pattern of having
muting_ui.js initialize unread_ui.js and muting.js,
instead of doing more direct, fine-grained initialization
from ui_init.js.

Essentially we replace this code:

    exports.update_muted_topics = function (muted_topics) {
        muting.set_muted_topics(muted_topics);
        unread_ui.update_unread_counts();
    };

with this:

    exports.initialize = function () {
        exports.set_muted_topics(page_params.muted_topics);
    };

And the modules load like this:

    stream_data
    ...
    muting
    ...
    unread_ui

And we don't need any page-load initialization for muting_ui,
which is mostly used for Settings/Muted topics.
2018-12-15 13:44:30 -08:00
Steve Howell 625388ccf0 refactor: Call stream_data.initialize() more directly.
This function used to be called initialize_from_page_params(),
and we called it indirectly through `subs.js`.

Now we call it directly from `ui_init.js`, which gives us a
bit more control over how things are initialized.  In fact,
this sets us up for the next commit, where I fix a recent
regression I introduced.
2018-12-15 13:44:30 -08:00
Steve Howell d7c2577ffb subject -> topic: Rename compose fields.
The stream/topic edit areas now have these ids:

        #stream_message_recipient_stream
        #stream_message_recipient_topic

They are pretty verbose, but being able to grep
for these without noise does have some value.
2018-12-09 21:28:45 -08:00
Steve Howell acb7149386 Extract topic_zoom.js.
This small modules nicely breaks down the
responsibilities of topic_list and stream_list
when it comes to zooming in and out of topics
(also known as hitting "more topics" or "All
Streams).

Before this, neither module was clearly in
charge, and there were kind of complicated
callback mechanisms.  The stream_list code
was asking topic_list to create click handlers
that called back into stream_list.

Now we just topic_zoom set up its own click
handlers and delegate out to the other two
modules.
2018-10-24 16:54:35 -07:00
Akash Nimare da7adb038f thumbnail: Show play button on hovering youtube thumbnail.
This PR adds a play icon on hovering the youtube thumbnails.
Also, shows the pointer cursor on vimeo videos instead of
zoom-in.
2018-10-09 16:12:36 -07:00
Cynthia Lin 1ab4d08258 right-sidebar: Improve keyboard shortcuts icon styling.
* Eliminate unnecessary div element wrapping around the icon and
change jQuery selectors accordingly
* Set initial position through CSS instead of JS
* Set color to inherit to prevent night mode issues.
2018-08-31 13:36:17 -07:00
Joshua Pan 2aeabf24a6 frontend: Create data structure for starred messages. 2018-08-21 13:42:23 -07:00
Shubham Padia 069a4f1626 search: Disable tab_bar due to addition of search pills.
tab_bar.js becomes redundant after implementation of search pills.
This commit adds a comment to tab_bar.initiliaze, so the event
listeners related to it do not get initiated. This does not remove
any code related to tab_bar.js.
Also adds left and right border around the search icon.
2018-07-23 11:29:10 -07:00
Shubham Padia 4c575985c1 search: Initialize search pill widget in ui_init.js.
Adds the initialize function to search_pill_widget.js for initializing
a pill object on search query box.
2018-07-23 11:29:10 -07:00
Steve Howell b88206a637 Remove code for full-width feature.
The full-width feature has been turned off for
about four years.
2018-07-07 10:19:15 +02:00
Shubham Dhama 9387efc399 scroll_bar: Initialize scroll_bar in ui_init.js.
This will help in making the order of ui modules initialization
more explicit and clear.
2018-06-20 07:38:22 -04:00