Commit Graph

268 Commits (f0e8182ff362c6f4352b6baabd081fb66126a550)

Author SHA1 Message Date
Travis Ralston f0e8182ff3 Support selects on Field
Luckily, the styling is copy/paste capable.
2019-01-22 19:25:09 -07:00
Christopher Medlin be94e1aebc Fix integrations error popup
Signed-off-by: Christopher Medlin <christopherjmedlin@protonmail.com>
2019-01-22 11:44:55 -08:00
Bruno Windels 5dd5f4f1dc add JumpToBottomButtom component 2019-01-22 14:49:04 +01:00
J. Ryan Stinnett 1d01ac398c Rename `mx_Login_box` to `mx_AuthPage_modal` and fold into `AuthPage` 2019-01-21 19:11:43 -06:00
J. Ryan Stinnett 3bd765f63f Rename LoginPage, Header, Footer views to Auth* 2019-01-21 19:11:43 -06:00
J. Ryan Stinnett c7354f483b Rename LoginBox to AuthButtons
This component displays login and register buttons. It's currently used in the
composer when viewing a room as a guest.

The name is confusing because the login flow uses are very similarly named
`mx_Login_box` as a wrapping around forms, which is totally different than these
buttons.

Additionally, the components is moved to `views/auth` since it is very simple
and auth related.
2019-01-21 19:11:43 -06:00
J. Ryan Stinnett 29be3ee4b5 Rename login directory to auth 2019-01-21 17:45:55 -06:00
J. Ryan Stinnett 23b3e74c1c Change to new field focused color 2019-01-21 13:47:16 -06:00
J. Ryan Stinnett 352107352e Tweak field input padding to match label position 2019-01-21 13:47:16 -06:00
J. Ryan Stinnett 1906cfd700 Tweak field label to be vertically centered 2019-01-21 13:47:16 -06:00
J. Ryan Stinnett efd5405267 Add a form field component for the redesign
The label moves into the border on focus and after being filled. A valid color
is applied to the label and input border. Other states like invalid can be added
later as needed.

Adapted from @ara4n's experiment into a React component with a CSS only
approach.
2019-01-19 22:13:53 -06:00
J. Ryan Stinnett 20e296b20e Convert image URLs in React to `require` calls
This allows Webpack to insert the proper image URL after builds steps like
adding a hash and so on. The path you supply to `require` is relative to the JS
source file, just like any other would be.
2019-01-17 22:06:49 -06:00
J. Ryan Stinnett b2387f4cff Define SCSS variable for resource dir
Adds a `$res` SCSS variable set to the path from the root SCSS file to the `res`
directory.

This is a different base path than previously used in CSS URLs (it goes up 3
directories instead of 2), because Webpack will now be resolving images relative
to the root SCSS file, so the path corresponds to a source tree location,
instead of a path in the build output tree.

Defining this variable has two main goals:

* URLs are a bit easier to read
* The path can be overridden, which is needed for external (riot-web) themes
2019-01-17 22:06:49 -06:00
J. Ryan Stinnett 9a7a8da6c0 Use font-family from theme in all components 2019-01-17 21:50:45 -06:00
Bruno Windels 23e7811f33
Merge pull request #2454 from matrix-org/bwindels/topleftcursor
Fix: show hand cursor in topleft menu so its clear you can click it
2019-01-17 16:58:12 +00:00
Bruno Windels 2bec088591 show hand cursor in topleft menu so its clear you can click it 2019-01-17 14:07:33 +01:00
Bruno Windels 921906897f css url paths are relative to location of compiled file, not project structure 2019-01-17 13:49:52 +01:00
Bruno Windels 89b576936b
Merge pull request #2448 from matrix-org/bwindels/searchmakeover
Redesign: search makeover
2019-01-17 12:12:26 +00:00
Bruno Windels 8c30d05eb8 Revert "Merge pull request #2348 from matrix-org/bwindels/roomgridview-experimental"
This reverts commit ece5cb1fcc, reversing
changes made to 64a3d2521c.
2019-01-17 10:29:37 +01:00
J. Ryan Stinnett 859f2a8646 Show spinner while waiting on status message to commit
It can take some time to actually set the status message and see it play back as
a committed event.  This adds a spinner for immediate feedback so it's clear
that something is happening.

Fixes https://github.com/vector-im/riot-web/issues/8135.
2019-01-16 09:33:39 -06:00
Matthew Hodgson 1082f548d3 hack nunito italics for now with CSS skew
fixes https://github.com/google/fonts/issues/1726
2019-01-16 12:53:46 +00:00
Bruno Windels 899ee265e3 Merge branch 'experimental' into bwindels/searchmakeover 2019-01-16 11:17:38 +01:00
Bruno Windels b14d436e98 make cancel button icon slightly larger 2019-01-16 11:14:19 +01:00
J. Ryan Stinnett 807d3aba6e Use integer padding / border for avatar
It seems fractional spacing results in different behavior across browsers,
including unbalanced spacing, making the avatar appear uncentered.

Here we avoid this by using integers that seem to closely match the comps.

Fixes https://github.com/vector-im/riot-web/issues/8134.
2019-01-15 16:37:16 -06:00
J. Ryan Stinnett 4b13774585 Revert to avatar only when custom status disabled
This returns to the previous behavior of avatar only without a button when the
custom status feature is disabled so that you don't get pointer cursor for
something that does nothing when clicked.

The avatar ring spacing is kept consistent with and without the feature enabled
by using a different class in CSS.
2019-01-15 10:54:29 -06:00
J. Ryan Stinnett 5b88b64950 Rework custom status context menu
This updates the custom status context menu to match the latest comps.  A single
button is used for setting / clearing, depending on what is appropriate.

The state logic is also changed to depend on events and storage from js-sdk for
the committed status message.  This makes it easy to distinguish the value being
edited from what's currently committed.
2019-01-15 10:54:29 -06:00
J. Ryan Stinnett eae1e4c9aa Tweak custom status avatar ring
Adjusts the appearance of the avatar ring to match the latest comps.

In addition, we now always render the surrounding button element, which
simplifies styling since the same size is now occupied both with and without the
feature.

This improves alignment between text in the composer and text in the message
history (https://github.com/vector-im/riot-web/issues/8111).
2019-01-15 10:54:29 -06:00
J. Ryan Stinnett 7d6b996952 Tweak composer button padding so it won't affect status 2019-01-15 10:54:29 -06:00
Bruno Windels 77a62b9174 style search bar 2019-01-15 16:20:04 +01:00
J. Ryan Stinnett 35af3fc6f7 Add separate dialog for recovery method removed
The "New Recovery Method" dialog would show if either the recovery method had
been changed or removed, but the dialog text didn't make much sense for the
removed case.

This adds a separate dialog customized for the removed case.

Fixes https://github.com/vector-im/riot-web/issues/8046.
2019-01-10 15:18:57 -06:00
Erik Johnston cbf9ff6aee Merge branch 'experimental' of github.com:matrix-org/matrix-react-sdk into erikj/state_counters 2019-01-10 16:56:47 +00:00
Bruno Windels ece5cb1fcc
Merge pull request #2348 from matrix-org/bwindels/roomgridview-experimental
Tiled room UI
2019-01-09 17:25:08 +00:00
J. Ryan Stinnett 79df843a6e Fix path to New Recovery Method icon 2019-01-09 06:25:35 -06:00
David Baker e5f74957cb
Merge pull request #2408 from matrix-org/dbkr/fix_gif_icon_on_stickers
Fix black-on-black GIF icon for stickers
2019-01-08 09:35:06 +00:00
J. Ryan Stinnett 2ff532621c Remove unbalanced padding in create key backup dialog
This padding only one side made it impossible to center things in the dialog.
Since the dialog also has nice spacing without the padding, this change removes
it.

Fixes https://github.com/vector-im/riot-web/issues/7862.
2019-01-07 17:48:10 -06:00
J. Ryan Stinnett f60a865727 Restore room name ellipsis on overflow
Fixes vector-im/riot-web#8037.
2019-01-07 14:12:32 -06:00
J. Ryan Stinnett 7a1008f1fe Fix color for @room pills in HTML messages 2019-01-07 09:56:40 -06:00
J. Ryan Stinnett bf87547f88 Remove unexpected underline from pills
Fixes vector-im/riot-web#8031.
2019-01-07 09:56:40 -06:00
Erik Johnston 9a5f17d0b1 Change CSS to match experimental 2019-01-07 15:21:00 +00:00
Erik Johnston 8a6e7382ae Missing newline 2019-01-07 13:52:13 +00:00
Erik Johnston 712241d710 Add simple state counters to room heading 2019-01-07 13:52:13 +00:00
David Baker 54898a6c35 Fix black-on-black GIF icon for stickers
Text colour ended up being the link colour on images because the
whole image is in an `a`, but stickers are not so it got the default
font colour, which might be black. Define an explicit colour.

Also set pointer-events: none so you can hover over the gif icon
too (I managed to make the message panel small which made the icon
cover most the image, so this prevented the gif from animating
at all).

Fixes https://github.com/vector-im/riot-web/issues/8004
2019-01-07 13:49:01 +00:00
Bruno Windels 290dc9d8fb Merge branch 'experimental' into bwindels/roomgridview-experimental 2019-01-07 14:17:57 +01:00
J. Ryan Stinnett a7c9d4ea1f Use same link style in HTML messages
Links in HTML messages were missing the usual underline style, making them
look different from links in text messages (which already do this).

Fixes vector-im/riot-web#4655.
2019-01-04 18:32:43 -06:00
J. Ryan Stinnett 2769e68169 Give the create key backup title more space 2019-01-04 17:14:10 -06:00
J. Ryan Stinnett 97747640bb Record keys button styling tweak 2019-01-04 17:14:10 -06:00
Travis Ralston 93ea9d3617 Condense .mx_RoomTile_avatar properties
Looks like the develop->experimental merge duplicated the definition. We'll take the best of both and make it work.
2019-01-03 18:07:34 -07:00
Travis Ralston 852d6df580 Fix composer avatar being an oval when a custom status is set
Fixes this: https://t2l.io/_matrix/media/v1/download/t2l.io/0d5c7fa9a4b5bf226a020def8480a887
2019-01-03 18:06:37 -07:00
Travis Ralston 51dc1fe9bf Fix badges on room tiles not being right aligned
Thanks to Ryan for fixing this!

Problem: https://t2l.io/_matrix/media/v1/download/t2l.io/da6fccb60969da1c455630faae990881
2019-01-03 18:05:59 -07:00
J. Ryan Stinnett 920911c0a1 Room list fixes for custom status 2019-01-03 18:49:15 -06:00