Commit Graph

7687 Commits

Author SHA1 Message Date
Pragati Agrawal 36fcb67812 settings_org: Fix visibility time of `Saved` state.
This fixes the bug where the `Saved` state button faded out almost
instantly (that is actually 300 ms) and `Discard` button fades out
along with `Saved` state button; the key problem here was that the
setTimeout intended to fade was actually delaying the transition from
"saving" to "saved".

Now, first of all, we use `setTimeOut` function to fadeout elements giving
fadeout_delay time as `800 ms` and we hide discard button during `saving`
state. Also, when `Discard` button is selected, `Save changes` and `Dicard`
fade out simultaneously.

Fixes: #11737.
2019-03-10 13:08:57 -07:00
Pragati Agrawal 6a159b5743 settings_org: Refactor `change_save_button_state` function.
This makes the `change_save_button_state` funtion more clear and readable
by removing too many occurences of `.find()` and `.attr()` function.
2019-03-10 13:07:48 -07:00
Tim Abbott 399aa43c75 night mode: Fix initial state of night mode. 2019-03-08 15:45:11 -08: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 725bdcc384 user popover: Pop user menu closer to avatar.
If you click on the avatar, we now show the menu
right next to the avatar.  The current behavior
is particularly funny for long names.  (I confirmed
this with Rishi.)
2019-03-08 15:24:01 -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
Steve Howell 45ba971d6d refactor: Move /me complexity out of body template.
One goal of this commit is to just make the "happy
path" code a lot easier to read.  It should be
pretty easy to verify that in this diff.

And then more stuff is now in me_message.

This is a pure code move, and it doesn't fix these
structural issues yet:

    * the "say hi" part of "/me says hi" is
      inside ".message_sender" (due to legacy
      positioning issues)

    * the avatar is outside of .sender-status
      (again due to legacy positioning issue)

    * we don't have sender_info_hover on
      the sender name (which causes it not
      to launch the user menu)
2019-03-08 15:24:01 -08:00
Steve Howell b00c54ff1c popovers: Remove broken code with 'u" key.
The code that was removed here wasn't doing what it
was intending to do, and we really just want to pop
up the user menu above the currently selected message.
2019-03-08 15:24:01 -08:00
Ben Muschol bb8bdf9960 linkifiers: Add no-select to trash icon.
This fixes some annoying copy-paste issues we've seen with users
accidentally getting a weird invisible unicode character in their URL
format string when trying to copy-paste an existing linkifier to
use for a new linkifier.

Fixes #10828.
2019-03-08 15:05:05 -08:00
Tim Abbott 4986f11c67 popovers: Fix clicking on user popover avatar image.
Previously, because our check for whether to close compose for clicks
on the page body was looking at popover-content, not popover, parts of
larger popover-title areas (e.g. the big avatar at the top of the user
popover) did not have the proper click handler behavior.

Also, rearrange the comments to be a bit clearer.
2019-03-08 13:31:29 -08:00
Wyatt Hoodes 98d489a0d5 popovers: Maintain compose box on profile modal close.
The modal-backdrop and user-profile-modal had their on-click behavior
overridden to simply hide the modal, thus preserving the compose box.

Keeping the compose box open after viewing a user's profile feels
like a more natural UX.

Tweaked by tabbott to move the fix into the central click handler.

Fixes: #11585.
2019-03-08 13:31:29 -08:00
Tim Abbott 3baf1f3dbd narrow: Remove "subscribe" button for guests for emptry streams.
This button didn't work, because the backend blocks subscribing, so it
was just confusing.

Fixes an issue reported in #11743.
2019-03-08 13:12:47 -08:00
Casper f3a4d2df58 search_users: Add | as OR-operator.
Adds possibility for users to use | as an OR-operator (besides ,)
when searching for other users.

This is a thing reasonable folks might try, and | in the thing to
search for isn't a realisitic possibility, so there's no real downside
to adding this.

Fixes #4109.
2019-03-08 12:09:49 -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
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
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
Anders Kaseorg 674abdef43 drafts: Fix CSS transition when opening drafts.
The code was all there, but we weren't triggering a style calculation.

Signed-off-by: Anders Kaseorg <andersk@mit.edu>
2019-03-07 20:55:02 -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
Pragati Agrawal bf1c9420df org_settings: Refactor `build_realm_logo_widget` function.
This commit deduplicates the code for `build_realm_logo_widget` and
`build_realm_night_logo_widget`. It deduplicates the common code for
`build_realm_day_mode_logo_widget` & `build_realm_night_mode_logo_widget`
into tthe function `build_realm_logo_widget`.
2019-03-07 12:12:00 -08:00
Steve Howell 1b065d811a me messages: Avoid empty "message_content" div.
We no longer have an empty message_content div for
messages like this:

    /me gets some coffee

This requires a minor change in how we compute the
position of the message for editing.
2019-03-07 11:39:38 -08:00
Steve Howell 9aa7ebadd7 me messages: Turn off collapse feature.
This is totally broken on master.  If you "collapse" a /me
message, it adds the "More..." link without actually
hiding any content.

I have another branch related to collapse/condense that
will make this easier to resurrect.
2019-03-07 11:32:09 -08:00
Tim Abbott 00903a19c0 Revert "templates: Avoid empty message_content div for /me messages."
This reverts commit 3a73d03e8e.

This was making casper test 08 fail.
2019-03-06 18:28:27 -08:00
Rishi Gupta 99ea5f4e32 popovers: Remove a few entries from stream popover.
These options are pretty low-value, since clicking the stream does the
narrow, and it's likely that almost nobody sends messages via these
buttons.
2019-03-06 17:36:06 -08:00
Steve Howell 3a73d03e8e templates: Avoid empty message_content div for /me messages.
This also makes the template a bit more readable.

(As an aside, copy/paste is broken for /me messages,
but that precedes this commit.)
2019-03-06 12:55:02 -08:00
Anders Kaseorg d7c8d11586 templates: Remove dead <div class="messagebox-border">.
Signed-off-by: Anders Kaseorg <andersk@mit.edu>
2019-03-06 12:47:42 -08:00
Harshit Bansal 3610aaece3 refactor: De-duplicate login button code in portico templates. 2019-03-05 14:02:12 -08:00
Vishnu Ks 6af885bd5c attachments: Export bytes_to_size function. 2019-03-04 18:46:13 -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 028715099e minor: Remove unneeded "arrow" class.
The previous commits made the "arrow" class no longer
necessary for these left sidebar elements.

The "arrow" class was always a bit dangerous, as bootstrap
has a class by the same name for a different concept.

We weren't really using consistent styling for "arrow"
across all our chevrons, so even without bootstrap in
play, it was just creating complexity.
2019-03-04 15:35:40 -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 3222f170c9 minor: Remove dead code in PM template.
The topic-sidebar-arrow chevron never shows
here--it was just cargo-culted code from
the topic lists.

It's also a landmine--we don't want to
accidentally build a topic-related sidebar
menu for PMs.
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
okmanl ec869f51b9 admin: Display email addresses in user-edit widget.
When the user logs in as an admin, and clicks on the 'edit user'
button under the url path #organization/user-list-admin, the modal
that was displayed didn't contain the user's email address under the
list of information. This commit adds the email input as a readonly
element, which at the very least provides helpful confirmation that
you have the right user.

Fixes part of #11453.
2019-03-04 09:17:05 -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
Tim Abbott 16123c9a58 realm_logo: Fix synchronization of realm night logo.
The night logo synchronization on the settings page was perfect, but
the actual display logic had a few problems:

* We were including the realm_logo in context_processors, even though
  it is only used in home.py.
* We used different variable names for the templating in navbar.html
  than anywhere else the codebase.

* The behavior that the night logo would default to the day logo if
  only one was uploaded was not correctly implemented for the navbar
  position, either in the synchronization for updates code or the
  logic in the navbar.html templates.
2019-03-02 09:45:50 -08:00