This is really the first step of implementing the "Oppa Gmail Style!"
redesign, and is largely an HTML/CSS-based change, with some
slight JS tweaks to deal with things being renamed or being no
longer necessary.
(imported from commit e05adc283ea066f0f90009cf712c4f3657c2485a)
If you create a spinner in a hidden element and then show the
element, the spinner is placed differently than if you had created
the spinner while the element was visible. This commit makes it so
that we never create spinners while their parent is hidden.
(imported from commit a21e68976d70fcceece30ee35f5e7cf6f9490497)
This allows us to use a uniform style across all our spinners. It
also cuts down on boilerplate HTML.
(imported from commit 9879f38e0f1ca8edd40a937753811e329447262d)
So that it is, in fact, navigable via keyboard shortcut. It's not the
most beautiful way to do this; in the ideal world the layout would be
more properly responsive and could fill up the screen for you when you
have the room for it.
The issue is that the version of Bootstrap we're running doesn't
easily allow for variable-sized modals, and the hassle of showing
and hiding a div manually didn't seem worth it.
The pixel sizes are specified manually as well, in a way that
isn't particularly responsive, because of a few competing
desires:
1) For them to appear side-by-side when wide enough
2) For them to stack when not wide enough
3) The fact that they're awkwardly between a span2 and a span3,
so we can't just use the Bootstrap responsive layout stuff
Finally, the diff here is best viewed with -w. (I also swapped the
order of Narrowing and Navigation, which unfortunately clutters the
diff.)
(imported from commit 62cfa7959d48ce515562713eb48f9d9b33c8cc16)
I'd like to phase this out in favor of something you actually
see only when you don't use Tab-Enter, but that's more challenging
than I'm prepared to tackle right this second.
(imported from commit eeda53b0ed69d0e528b00ea9e7c7a20edb35df34)
Accomplished by:
- Hiding the stream/PM selector
- Eliminating the "tab to send" reminder
- Moving send and formatting links to the right
- Reducing the size of the 'subject' box
- Generally tightening up whitespace
To be fixed later in this series:
- A Tab-Enter reminder
- Completely eliminating the stream/PM selector
(imported from commit 7efe04adcbe373f99a36d3ba23b32944c17aa099)
It can easily cost an entire line, and the information is available by
clicking on the sender's name. Plus on a phone, you can't hover
anyways.
Annoyingly, this tends to put the popover partly off the window, but
there must be a way to fix that separately.
(imported from commit 19334cb067981b323e300245654c83c8e545fb2e)
Watching new users, I've seen them not notice the pointer and
mix. Give them a little more hinting about what message is selected.
(imported from commit c98e22dcef881ed7400071ec438a6e91d6cd3d9e)
I don't view this as a complete solution to
Trac #466 - Make the fact that you are narrowed more apparent,
but it's a start.
(I think a real solution would have to give you something that
helps you make the determination of "Is this view narrowed?"
when you come back to your computer, and this animation does not
help you do that.)
(imported from commit eb3646f3f3a4e25a43266e9146308633fd997eb2)
And change the color to a more thematically appropriate blue.
The shadow pointer is sort of confusing; we should really provide some
different sort of indication that your pointer is potentially moving
on narrow-and-unnarrow. (I think my fade-in-fade-out later in this
commit series is a not-bad first crack at this.)
Resolves Trac #472 - Dual pointers in narrowed view can be confusing
(imported from commit 2450517d99de85ade1c0e98c5510b59e70282451)
For whatever reason, specifying a percentage for bottom_whitespace
seems to cause issues in some browsers, including Firefox 17
and the Firefox Nightlies.
This is a bit confusing to me, since bottom_whitespace is basically
immediately resized by resizehandler initially anyway. But hey.
(imported from commit 93da101edeb6f16b01a92aed775e9117c0295086)
CSS height percentage was not working because parent div has an undefined
height, so instead it is set to 40% of the window height on resize (and initial
load) via JavaScript.
Fixes trac ticket #24.
(imported from commit 2c6a8489585c4bf70c44469ce8628264ec3fbc36)
Hopefully this will make things slightly more discoverable;
the previous solution (putting a prompt in the initial text)
was not that discoverable.
(imported from commit f6a7fce1bfd27bda412522768e981b2ffc39f474)
feedback-bot and zephyr_mirror will need to be updated and restarted
when this is deployed to prod.
(imported from commit fe2b524424c174bcb1b717a851a5d3815fda3f69)
The tabindex on this link doesn't actually do anything, because of the Safari
tab workaround. I added it anyway in case we remove that workaround later.
(imported from commit 11f31f2561907300b350c11732be88589d736f94)
This should address the catherio/tibbetts feedback of the name
breaking oddly across the middle of their name.
One notable change introduced by this commit is: If your name is very
long, e.g., "Waseemio Daherioian", it gets cut off. (On Firefox, it
gets rendered as "Waseemio Daherioia...", and on Chrome it gets no
ellipsis at all.)
The current behavior is that the long name actually overflows into
the main text area, which I think is worse.
(imported from commit 668cb30bc2326c255b229f4f19f29be473bdc1e8)
This is nearly perfect, modulo two things:
1. If you have a search active and you resize the window, the search
box resize doesn't take effect until you exit the search.
2. In super-narrow windows (<380px), the searchbox overshoots
the message area slightly.
I don't regard either as huge issues -- I'll probably fix#1
eventually.
(imported from commit 4900fb9783cc9f447315b0892bd3505f5c31ce15)
If we don't do this, we get all kinds of nasty shadowing where
references to 'search.whatever' seem to be references to the
HTML input element, rather than our search.js module.
(imported from commit 4e4b562ddf895baea9619316d9fab27ae5e9fc4e)
Personals are now just private messages between two people (which
sometimes manifests as a private message with one recipient). The
new message type on the send path is 'private'. Note that the receive
path still has 'personal' and 'huddle' message types.
(imported from commit 97a438ef5c0b3db4eb3e6db674ea38a081265dd3)
This clarifies that clicking on any of those three pieces of
information will pop up the user info tooltip.
(imported from commit 1e57550d66acbb2e8d5d244d2997bbd394c334c3)
This reverts commit 429e055d3eca65af8bc0fe58481a7becf9ced66a.
There is some inconsistency between the names 'huddle' and 'personal' that is
breaking things.
(imported from commit 4c81853fca9d88d13ce8f23e2d6884c33cdc57d2)
This reverts commit 074011dfe7dfa4d3cb331b32fc6cf465f98d095f. For
some reason this introduces some buggy behavior, and if anything I
should debug it more locally first.
(imported from commit 182193e6bb466a5668c2bb64e41712a793fa7ca2)
When the scrollbar appears/disappears, it changes the window size for the
purpose of responsive layout. This made the nav sidebar jump around as you
switch tabs.
(imported from commit 8174a8571131ddf2b195cf9bfb5e427cd07b4378)
Known issues:
* Not all of the options in the menu are functional yet
* The wording isn't totally perfect on some of these options;
I kind of want to use a 'first name' in some of them.
(imported from commit 5a333fb939fcca7e0d0ecb2c43e79501139ac0db)
We'll use this internally for the commit bot. We might eventually disable it
for external users.
(imported from commit 3136cd9faadc6b81355889d2ee6472985da87fbe)
There was this very cute problem where if you were narrowed and
scrolled to the top of the page, you couldn't seem to click on the
stream or subject name.
The issue was: the floating_recipient_row div was visibility: hidden,
which means that it made top_statusbar big enough to cover up that top
part, capturing the clicks.
So instead we make top_statusbar also visibility: hidden so that
the clicks get through.
(imported from commit 471e041ba1c429ad0b6e225da22585dc72120945)
If we make the recipient_rows the same size for huddles and stream
messages, this becomes a non-issue. (Previously, the border on huddles
was 2px, which I think caused our invisible row to have its height
grow by 1px -- which was a problem, because then it left a little 1px
gap that you could see through when we scrolled over non-huddle
messages.)
(imported from commit d1f24e5c536bdf9c0827a15b611ba680ee4e5e36)
When the window is narrow, vertical space (particularly in
our navigation menu) is at a premium, so let's be more
parsimonious.
(imported from commit 72628827bc108f4d9f2d47a11c48e0e772b769d4)
Before this commit, the timestamps are higher than the narrowbar,
on the z-axis, so they slide over it as you scroll.
As a philosophical aside, I almost wonder if the timestamps should
live in their own table row, that way they can't possibly overlap
with the message bodies. (This would require reverting Tim-style
sometimes-show-date-and-time timestamps.)
(imported from commit 0c59f1feacebd59b88e76bf056d96e05159d2937)
This is one approach, anyway. Another is to keep it inside
message_list, which is what we (currently) do in the composebox.
(imported from commit 64c69b931012e3d21b7a10e3909f7a13f7dcfc4f)
Paradoxically, life is better if we specify a max-width rather
than a min-width!
(This has the side effect, though, of sometimes having our message
boxes, etc. be ~548px rather than 640px, but philosophically
it's kind of nice if that all scales nicely).
(imported from commit 7f41c147b727348a148197c74b299cb31636f83b)
The issue with the animation is that it removes the composebox div
when it's done -- or more relevantly, it "adds" it when the composebox
appears, which causes some DOM elements to get reshuffled slightly
which causes some jitter.
(Similar to what was happening with the email addresses earlier.)
So instead of using display:none, we play with visibility:hidden,
which causes the thing not to show up, but doesn't cause it to
lose its place in the DOM.
(imported from commit a18dbdcd1784b2b54436d48d8425d5fdc8dfbba4)
This also prevents the "bounciness" associated with the fact
that the stream/huddle selector was an absolutely positioned
div relative to the bottom of the compose window.
(imported from commit 413003a83c187efd45d0281f7cb6c9d0bd550674)
The form decides which fields to require based on whether
or not the personal-message bar is showing. Hide it by
default.
(Otherwise, both the 'Stream' and 'Huddle' prompts show up,
and you're obligated to fill out both of them.)
(imported from commit 13521ed5b7849f41c0335157d468f5e463c7f62d)
(It's not totally beautiful, though, in that it causes
your timestamp to appear in a weird place, but it's
better than the alternative.)
(imported from commit 217b6545330f7850f2892df2e82df18976463361)
I'd like it to ultimately be the case that if you make the window
too narrow, the menubar goes to the very top and has small icons.
(imported from commit 0a5fe548d4d848c0358c9780df7af1fe1abc93fa)
Try to adhere to Bootstrap grid system a bit more consistently.
Unstyle subscriptions page for consistency.
Still not sure why the "affix" jumps when we switch to "Subscriptions."
(imported from commit 1c28de4e2ef3d6ed3d1bdcfd143eadefba2b46cb)
scrolling-tab used to be used to target which tab would be a recipient
of the scroll events generated by PgUp, PgDn, etc. Since we now let
the browser handle these natively, we don't need to worry about it.
(Instead, when we hook the 'scroll' event, we should make sure that
home screen.)
(imported from commit c555d960da995a09b370867c96d17f4ce4f2171f)
This causes #home to expand to contain it, which is great because
now we can bind to things like "click" or "scroll" or "keydown"
that are in #home.
(imported from commit 3efe95a7a96f7aee9983369848bf9e7210e00c66)
Previously, when we narrowed on a super-long class/instance or
a huddle with lots of people, the box overflowed. This is an
attempt to fix that, even if it isn't the prettiest.
(imported from commit 4eb58726a4c4714bd5435a791ad8fea0eabb58ed)
This required some serious retooling of the table,
and some thinking about the interactions between
table-layout: fixed and colspan.
And some of it is still a little magic-number-y.
(Like that 97% width on zephyr_compose_box -- without
it, the stream compose box looks weird in Chrome,
but not Firefox.)
(imported from commit 20c426ad2dae5efa3107890b28976a957bb3d1e3)
We will probably re-style this eventually.
Also, the animation freezes during template rendering. And the HTML is a "give
up and use tables" situation.
(imported from commit 847374b616dc7ce909834f23d5ed9522aa457254)
This actually involved refactoring a good bit of existing code; we
in this commit introduce a new property of zephyr called .reply_to, which
is the fully rendered-to-string and pretty-printable version of the person
to which any reply should be addressed.
This is useful for grouping personals, where if you simply went by the
.display_recipient or .sender you would have to check them against
eachother.
We also introduce a new narrow_classish command, which is triggered on
clicking on the "Huddle with…" text. This method intelligently determines
which sort of narrowing to do; we essentially moved out code from the 'r'
key handling section and put it in its own function.
(imported from commit 2406ee0f6f83b990eec83190d2e8858865c06238)
We previously weren't actually applying collapsed_parent to any zephyrs,
switching from .children to .find fixes this.
We also don't add a bookend in front of the first zephyr.
Also, borders are handled by the zephyr trs themselves as opposed to the
bookend tr.
(imported from commit 8bdc9bd812833288c85c13a102459a5ef1e36225)
We no longer break random things! Its pretty grand, actually.
This reworks and reverts commit fbadd6e854722e41cccd2535748ee47f4efd657b.
Conflicts:
zephyr/static/js/zephyr.js
(imported from commit 534a120290855d3bf2cf979ac174267c2d07bf68)
This was copied from a Bootstrap example page and is messing up the topbar on
login, subscriptions, etc.
But I like the padding on the main view left side links, so we'll keep that.
(imported from commit 67ef75a7a0f359d0f2bc2857e56aa2249ec09cbf)
I still don't love it visually, but it's getting there.
Some obvious issues:
Personals window is totally unstyled
Clicking 'new message' should perhaps give you a fresh new window
not something prepopulated with old stuff. Think about this.
(imported from commit 8b28fd084d550db404eabbe63c056fa6866c0697)
Put a little 'x' by the class or class-instance indicator, to make
it more analogous to the planned behavior of the view-in-context
search box.
(imported from commit fa01001cffa6a6094ba5fbdcbdc965addb2efa1c)
Waseem Daher
Zev Benjamin
Reid Barton
Jessica McKellar
Keegan McAllister
Tyler Hallada
Tim Abbott
Zev Benjamin
Luke Faraone