Handles the edge case where images in the Install steps can obscure the text below them at certain window dimensions.
In most cases, it's not possible to replicate this behavior due to minimum dimension settings in `chromium.js`. However, some window managers (such as i3) can ignore those settings, producing this bug.
This fix introduces a flexible, responsive layout to the Install steps, with the goal of keeping the action buttons in a consistent position while adapting the rest of the content to the remaining available space. The result is a clean, usable screen at any window size.
In the rare instance that a window's dimensions are less than that of the minimums set in `chromium.js`, scrollbars will appear to keep the smallest acceptable layout intact.
Potential side effects:
- Each `.step` element contains an`.inner` flexbox wrapper, which arranges its children in a column. The layout works best when each `flex-item` is an element that wraps the content inside of it. I think I accounted for all the possibilities on the Install screen, but any future `.step` items might want to keep that pattern in mind.
Resolves#1059
FREEBIE
Adding the class `.text-security` to the body element will (should) turn
all names, phone numbers, and message bodies into unreadable squares.
Nice to have when you want to screenshot without leaking too much info.
Note that emojis and images are not obscured.
This isn't fully baked or exposed as a feature. You have manually
inspect and tweak the DOM to enable it, but I leave it here for the
benefit of devs and other "frequent flyers" of our issue tracker.
// FREEBIE
* Fixes hourglasses
* Fix delivered status icon
* Other changes aiming for more consistency of visual structure
between light and dark themes.
* Restores left pane header focus/transition effect.
This breaks the css-purity of our mixin but is necessary in order to
apply the initial offset of the hourglass animation dynamically, since
jquery can't manipulate arbitrary css on psuedo elements.
When initialized, or when expiration-related attributes change, expiring
messages will set timers to self-destruct. On self-destruct they trigger
'expired' events so that frontend listeners can clean up any collections
and views referencing them.
At startup, load all messages pending expiration so they can start their
timers even if they haven't been loaded in the frontend yet.
Todo: Remove expired conversation snippets from the left pane.
Previously we only declared the message body as selectable, but Chrome's
implementation of user-select is a little quirky in that it allows
unselectable text to be copied if you select elements around it. Oddly
enough, styling the entire bubble contents as selectable, including the
timestamp, actually prevents chrome from copying the timestamp text when
it's not supposed to, i.e., when triple-clicking the message body.
Fixes#887
// FREEBIE
Use emojijs for replacing unicode with image tags for display. We were
already using it to replace colons with unicode. Additionally it has
a companion data repo that is kept up to date with images from all
the common image sets.
// FREEBIE
Move away from inline style attributes for setting contact colors.
Apply colors by name via css classes instead. Also lays groundwork
for syncing contact colors.
// FREEBIE
Fix some visual bugs occuring at large font size:
* Contact names break onto the next line after their avatars in
message detail screen
* Settings menu font-size failed to scale
* Handle Content overflow in modals.
// FREEBIE
- Fixed text alignment in RTL messages.
- Added support for search box.
- Added support for conversation name.
- Added support for contact name.
- Added support for last message timestamp and last message preview.
//FREEBIE
Add a section under settings for performing a contact sync from your
mobile device. This just re-runs the same import operation that occurs
at install/link time.
// FREEBIE
The bar is effectively invisible, but having it present means that we
don't see a jarring change in width when the content expands into the
overflow zone and triggers the scrollbar to suddenly appear.
// FREEBIE
For messages that failed to send due to network errors, this change
allows retrying them directly from the main conversation view rather
than only from the message detail view.
// FREEBIE
Move the global header inside the left pane only, expand conversation
panels to full bleed, restyle conversation list items and selected state.
// FREEBIE
This flow broke a bit with transition to modal debug log.
Restructure such that the loading class can be applied to an appropriate
element inside the modal. Ensure that the input elements are hidden when
submit is clicked, the result elements are shown when the log upload is
completed.
// FREEBIE
The button for the conversation menu was rendering on top of the global
menu since the global menu was part of a position-fixed element and thus
except from the normal document flow.
// FREEBIE
Untangle these two views into their component parts, consolidating all
the key conflict logic in the key conflict view. Contact view now simply
renders basic contact info and miscellaneous errors but not conflicts or
message errors.
// FREEBIE
bug introduced in: 0569d4c
This z-index property was previously to ensure the avatar floated above message
bubbles, but the message bubbles always have enough left margin so this
property is not needed.
fixes#650
// FREEBIE
Some basic modifications to the Confirmation Dialog:
* Always attached to <body> regardless of view that called it.
* Always centered horizontally on screen.
* A black semi-transparent overlay is now displayed over everything, and under
the dialog.
* Various other style changes.
fixes#389
// FREEBIE
Chrome's UA stylesheet defaults font-family to monospace on textareas.
The only other textarea at the moment is the debug log, where monospace
is actually nice to have since it's more scannable.
// FREEBIE
Remove the 1px gray border around the window. This allows to the window to integrate seamlessly with custom window managers which use the background color for the titlebar.
While typing a number, the new contact element is faded out. When the
number becomes valid it is opaque. If the element is clicked while
invalid, it displays 'Invalid number' and waits for the input to change
again. A new conversation is only opened if the number is valid.
// FREEBIE
The file input area has a transparent border. When a file is dragged
above that area, the border turns blue. This helps the user understand
that this is the correct drop-off area.
Messages with images or media were causing the scroll position to jump
around when they loaded, because rendering them changed the height of their
elements from 0 to full-height sometime after they were inserted into
the DOM.
Now when rendering attachments, we wait for them to load so they can
render at full height immediately, then warn our parent message list
before and after a potential height change, so the scroll position can
be saved and reset.
// FREEBIE
Only load the most recent messages when initially rendering a
conversation. Scrolling to the top of a message list loads older
messages.
This required some slight refactoring of how we insert message elements
into the dom. If the message is added to the end of the collection,
append it at the end. Otherwise, assume it is an older message and
prepend it.
When adding elements to the top, reset the scrollPosition to its
previous distance from scrollHeight. This keeps the current set of
elements fixed in the viewport.
// FREEBIE
Bubbles are limited to 30em to facilitate comfortable reading length.
The width of the message list is limited to aid visual threading
of the conversation. The overall layout is restricted to 1300px and
centered if the window is much wider.
The header avatar resizes responsively to save room when the window
gets narrow
// FREEBIE
* Make everything bigger and bolder to account for inverse (light on
dark) text.
* Give links better hover/focus state for the sake of tab navigation.
// FREEBIE
* Refactor options.js into a view
* Break up install flow into a series of screens
* Remove bootstrap
* Make installer window static size, mostly to facilitate positioning
// FREEBIE
