Commit Graph

489 Commits (8eaae6bdbc290f7329b68ab73c067a49ea82652e)

Author SHA1 Message Date
Šimon Brandner ae25ff8216 Switched to scale
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
2020-12-19 15:54:26 +01:00
Šimon Brandner 633221f012 Center image
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
2020-12-19 13:50:21 +01:00
Šimon Brandner b9f480a825 Remove flex property
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
2020-12-19 13:13:34 +01:00
Šimon Brandner 8aabe1f330 Reorganized elements
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
2020-12-19 09:26:09 +01:00
Michael Telatynski 1b1c482f9c Iterate tests 2020-11-25 10:22:16 +00:00
Michael Telatynski 758b47c64d Replace *ServerConfig and SignInToText with ServerPicker 2020-11-25 09:46:56 +00:00
Michael Telatynski 1d53a5cf23 Initial support for MSC2858 2020-11-24 11:18:11 +00:00
Michael Telatynski bf62960e1a
Merge pull request #5413 from matrix-org/t3chguy/fix/11415
Change how we expose Role in User Info and hide in DMs
2020-11-11 18:15:46 +00:00
Michael Telatynski 5fb86f74d7 Remove unused IconButton 2020-11-10 12:06:56 +00:00
Michael Telatynski 6aeea3e38e Extract MiniAvatarUploader into a reusable component 2020-11-05 15:42:45 +00:00
Michael Telatynski 24c4a3876c Increase Border Radius of Accessible Buttons to 8px
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2020-10-20 15:05:38 +01:00
Tulir Asokan 2bb7b6535f Merge remote-tracking branch 'upstream/develop' into compact-reply-rendering 2020-10-02 17:28:45 +03:00
Travis Ralston bfbbf44dfc Add a note to use the desktop builds when seshat isn't available
Fixes https://github.com/vector-im/element-web/issues/15184

This is currently temporary design for https://github.com/vector-im/element-web/issues/12896 but does not fix it.
2020-09-16 17:23:37 -06:00
Tulir Asokan 75a0178dad Merge remote-tracking branch 'upstream/develop' into compact-reply-rendering 2020-09-04 12:41:38 +03:00
Travis Ralston 7c1a9993e3 Add new create group dialog 2020-08-25 21:08:24 -06:00
Jorik Schellekens a61cbc1a11 Add more left padding to fix focus highlight 2020-08-04 15:07:13 +01:00
Jorik Schellekens 271eeeabee Merge branch 'develop' of github.com:matrix-org/matrix-react-sdk into joriks/style-fighting 2020-08-04 15:04:56 +01:00
Tulir Asokan db5121aeca Merge remote-tracking branch 'upstream/develop' into compact-reply-rendering 2020-08-03 16:49:43 +03:00
Jorik Schellekens fb953ade8e Accessibility focus checkboxes and radio boxes 2020-07-28 16:08:25 +01:00
Jorik Schellekens 4f55ef685d
Merge pull request #4989 from matrix-org/joriks/resize-handlebars-2.0
Fix handlebar interaction
2020-07-28 14:30:00 +01:00
Michael Telatynski c980b58c69 Fix field tooltips
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2020-07-18 11:36:23 +01:00
Michael Telatynski 38dc3c8bd1 Replace non-functional Interactive Tooltip
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2020-07-17 18:43:42 +01:00
Michael Telatynski 9ec2ca447c Update style of default tooltips to match the new style
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2020-07-17 16:19:10 +01:00
Jorik Schellekens 173ccbcec9 Fix handles 2020-07-16 16:21:38 +01:00
Michael Telatynski 5e6f8b20bc Visual WIP
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2020-07-16 16:16:41 +01:00
Michael Telatynski fb222c7eff
Merge pull request #5001 from swapnilraj/swapnilraj/country-code-width
Increase width for country code dropdown
2020-07-16 16:09:43 +01:00
Swapnil Raj 8253756276 Remove unnecessary import 2020-07-16 20:28:19 +05:30
Swapnil Raj 0ddfd9ee8c Use rem to guard against font scaling breakages 2020-07-16 20:15:28 +05:30
Michael Telatynski d5f2d43429 Improve Tooltip font/layout consistency
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2020-07-16 15:15:00 +01:00
Swapnil Raj 1195c09f5c Increase width for country code dropdown 2020-07-16 19:11:52 +05:30
Michael Telatynski 9f199758b9 restore old tooltip positioning (right) instead of (above) for timeline tooltips
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2020-07-14 13:00:25 +01:00
Michael Telatynski cd2f323002 re-add text-align center
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2020-07-13 23:18:33 +01:00
Michael Telatynski 646c5d4a64 Replace timeline tooltips to match breadcrumb tooltips
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2020-07-13 23:14:00 +01:00
Michael Telatynski 33422f1744 Switch out Labs spinner to be the Flow-generated from Design
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2020-07-13 17:39:57 +01:00
Michael Telatynski 5a542281ed Make Styled Radio Button outlines default-off
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2020-07-03 19:27:45 +01:00
Jorik Schellekens aab372c648 Add tooltips 2020-07-01 01:50:31 +01:00
David Baker 21c5c745c1
Merge pull request #4831 from matrix-org/dbkr/recovery_key_passphrase_2
Implement new design on security setup & login
2020-06-30 17:55:03 +01:00
Michael Telatynski cf3c914382 Merge branches 'develop' and 't3chguy/notifications0' of github.com:matrix-org/matrix-react-sdk into t3chguy/notifications0 2020-06-26 15:35:36 +01:00
Michael Telatynski 72035c8078 Make <ProgressBar /> relevant again
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2020-06-26 14:19:58 +01:00
David Baker f4460ca78f Merge remote-tracking branch 'origin/develop' into dbkr/recovery_key_passphrase_2 2020-06-26 13:12:06 +01:00
David Baker bf45cb0588 PR feedback: re-order CSS & add underscore 2020-06-26 11:24:07 +01:00
Andrew Morgan e790a31f09 Include newline at end of _InlineSpinner.scss 2020-06-26 09:44:47 +01:00
Andrew Morgan a2e33a2386 Prevent old InlineSpinner gif from spinning 2020-06-26 09:41:18 +01:00
Andrew Morgan 87f961df3f Put behind a labs flag 2020-06-26 01:22:46 +01:00
Andrew Morgan 6ea5dc7b7c Change the look of the spinner 2020-06-26 01:19:38 +01:00
Jorik Schellekens 41c59cc75e Fix deactivated checked checkbox styling 2020-06-25 14:21:08 +01:00
David Baker 6ce8584337 Implement first screen (recovery key / passphrase choice) 2020-06-23 15:04:39 +01:00
Michael Telatynski 26e763d135 Fix Styled Checkbox and Radio Button disabled state
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2020-06-17 14:26:22 +01:00
Jorik Schellekens 2617ce5dd5 fix checkbox regression 2020-06-11 12:40:49 +01:00
Jorik Schellekens b63d73e3b6
Merge pull request #4729 from matrix-org/joriks/appearance-tab
Move Settings flag to ts
2020-06-10 16:57:18 +01:00
Travis Ralston 60b5f2dbec
Merge pull request #4744 from matrix-org/joriks/radio-buttons-isolated
Add styled radio buttons
2020-06-10 07:27:17 -06:00
Jorik Schellekens ab47e0ed24
lint lines 2020-06-10 13:49:03 +01:00
Jorik Schellekens a2294a73a4 Make checkboxes a11y friendly 2020-06-10 13:41:34 +01:00
Jorik Schellekens 70fe7ce619 fix licensing info 2020-06-10 13:39:28 +01:00
Jorik Schellekens 8fc6289290 Use appearance instad of display for accessibility 2020-06-10 13:37:09 +01:00
Jorik Schellekens 3bea64e950 smaller margin 2020-06-10 13:06:17 +01:00
Jorik Schellekens 0fb6846c9d Radio buttons 2020-06-10 13:03:00 +01:00
Jorik Schellekens bd58f6ea7b Hide checkbox on dark backgrounds 2020-06-08 17:38:07 +01:00
Tulir Asokan 4521e9feb1 Merge remote-tracking branch 'upstream/develop' into compact-reply-rendering 2020-06-07 15:12:30 +03:00
Jorik Schellekens 5bc756cba1 Fix checkbox bleed 2020-06-03 16:48:05 +01:00
Jorik Schellekens 66c0d53f3e Create and use stylised checkboxes 2020-05-28 22:33:00 +01:00
Tulir Asokan dfe277b78d Remove unnecessary right margin in reply blockquote 2020-05-25 19:24:23 +03:00
Tulir Asokan 4e5680de85 Merge remote-tracking branch 'upstream/develop' into compact-reply-rendering 2020-05-25 19:21:19 +03:00
Jorik Schellekens 6d9d4ee547 Merge branch 'develop' of https://github.com/matrix-org/matrix-react-sdk into joriks/font-scaling-slider 2020-05-20 13:46:17 +01:00
Jorik Schellekens 3e30df17fb Slider is more responsive 2020-05-20 13:07:33 +01:00
Michael Telatynski 47ff67c6be
Merge pull request #4586 from matrix-org/revert-4448-t3chguy/imageview
Revert "ImageView make clicking off it easier"
2020-05-14 17:31:37 +01:00
Michael Telatynski d1c6f3099c move styling to QRCode scss
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2020-05-14 11:20:06 +01:00
Jorik Schellekens 328bb7bcaf Remove all animations 2020-05-13 15:24:08 +01:00
Michael Telatynski 52e3c97f8c
Revert "ImageView make clicking off it easier" 2020-05-13 06:36:14 +01:00
Michael Telatynski 3bb800bb81 Replace png flags with use of Twemoji
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2020-05-11 22:04:18 +01:00
Jorik Schellekens 33a5b5142d Merge branch 'develop' of https://github.com/matrix-org/matrix-react-sdk into joriks/font-scaling-slider 2020-05-07 18:01:20 +01:00
Jorik Schellekens bab7d5f461 Some lints 2020-05-06 17:25:54 +01:00
Jorik Schellekens a11812a402 Fix slider toggle regression. 2020-05-04 15:07:41 +01:00
Bruno Windels 8c28977c27
Merge pull request #4514 from JorikSchellekens/joriks/font-scaling-fixes
Fix pill vertical align
2020-04-29 10:07:44 +00:00
Jorik Schellekens 2e7ccf6e7a Fix pill vertical align 2020-04-29 10:57:35 +01:00
Jorik Schellekens 1b83faaa8d Merge branch 'develop' of https://github.com/matrix-org/matrix-react-sdk into joriks/font-scaling-slider 2020-04-28 15:38:46 +01:00
Jorik Schellekens cf05beb4b8
Merge pull request #4355 from JorikSchellekens/joriks/font-scaling-fixes
Fix scaling issues
2020-04-28 13:47:50 +01:00
Jorik Schellekens a772d959a7 Remove redundent padding property and use em 2020-04-27 11:51:56 +01:00
Jorik Schellekens 669562b90c Extra right padding in user pills 2020-04-27 11:51:56 +01:00
Jorik Schellekens a0b610c576 Skinnier pills are easier to swallow 2020-04-27 11:51:56 +01:00
Jorik Schellekens 5dc7703740 Undo superfluous delete 2020-04-27 11:51:56 +01:00
Jorik Schellekens c7c94933ee Use font-variable instead of rem 2020-04-27 11:51:55 +01:00
Jorik Schellekens 6338325d5c Use rem instead of em. 2020-04-27 11:51:55 +01:00
Jorik Schellekens 997fe62e5c FIx lanugage selection alignment at scale. 2020-04-27 11:51:55 +01:00
Jorik Schellekens 0fe0d728f1 lint 2020-04-27 11:51:55 +01:00
Jorik Schellekens 633c6f6b5e Fix settings when scaling up 2020-04-27 11:51:55 +01:00
Jorik Schellekens f59bd538b4 Resize toggle switches with font 2020-04-27 11:51:55 +01:00
Jorik Schellekens e2aef3a62b Fix pills.
This was a hard pill to swallow
2020-04-27 11:51:54 +01:00
Michael Telatynski 4fc8fc9d6c cap width of editable item list item to leave space for its X remove button
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2020-04-26 12:52:17 +01:00
Jorik Schellekens a16fe09d42 Use em to detach slider from root font-size 2020-04-23 10:58:00 +01:00
Jorik Schellekens 98799611cf Remove padding for alignment reasons 2020-04-23 10:45:48 +01:00
Jorik Schellekens 1486beeaf4 Make slider indpendent of settings styling 2020-04-23 10:45:48 +01:00
Jorik Schellekens 5f50facfba Make slider independant of label size 2020-04-23 10:45:48 +01:00
Jorik Schellekens 9a585fee0a Move slider themes 2020-04-23 10:45:48 +01:00
Jorik Schellekens e10a511997 Extra right padding in user pills 2020-04-23 10:45:47 +01:00
Jorik Schellekens fc04266b42 Skinnier pills are easier to swallow 2020-04-23 10:45:47 +01:00
Jorik Schellekens 18efbccceb Undo superfluous delete 2020-04-23 10:45:47 +01:00
Jorik Schellekens 07853f48bb Use font-variable instead of rem 2020-04-23 10:45:47 +01:00
Jorik Schellekens c921859067 Use rem instead of em. 2020-04-23 10:45:47 +01:00
Jorik Schellekens 121b53f99a FIx lanugage selection alignment at scale. 2020-04-23 10:45:47 +01:00
Jorik Schellekens 5caec2a289 lint 2020-04-23 10:45:47 +01:00
Jorik Schellekens 0182128189 Fix settings when scaling up 2020-04-23 10:45:47 +01:00
Jorik Schellekens cc601e1595 Resize toggle switches with font 2020-04-23 10:45:47 +01:00
Jorik Schellekens 1ff0f3445a Fix pills.
This was a hard pill to swallow
2020-04-23 10:45:46 +01:00
Michael Telatynski 80b8120bc3 Update login security copy and design to match Figma
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2020-04-22 22:32:02 +01:00
Michael Telatynski 4494c6cf2b ImageView make clicking off it easier
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2020-04-20 11:21:51 +01:00
Michael Telatynski 4d91dc5bba iterate pills in rich text styling
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2020-04-17 12:30:09 +01:00
Michael Telatynski c3ff75d18f Don't break spills over multiple lines, ellipsis them at max-1-line
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2020-04-17 11:04:52 +01:00
Michael Telatynski 81f501e844 disable language dropdown too
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2020-04-15 14:19:47 +01:00
Bruno Windels 368737cfd9 fix copyright 2020-04-14 17:41:06 +02:00
Bruno Windels db09cadb66 remove spinner, change copy, add button placeholder 2020-04-14 17:19:15 +02:00
Tulir Asokan e64ff0f099 Change score color to match sender name 2020-04-10 14:39:16 +03:00
Tulir Asokan 26a4a23a33 Merge remote-tracking branch 'upstream/develop' into compact-reply-rendering 2020-04-10 13:56:01 +03:00
Jorik Schellekens 3ed457ea7d
Merge pull request #4305 from JorikSchellekens/joriks/font-scaling
Make all 'font-size's and 'line-height's rem
2020-04-02 17:40:39 +01:00
Jorik Schellekens 6cf9166c4a Use variables for the rem values.
It's become obvious that these random floating points everywhere
are unwieldy. Now they're all in one place with some fairly logical
variable names which will help out in design->implementation phase.
2020-03-31 15:26:23 +01:00
Travis Ralston 8bc86deaaa Appease the style linter 2020-03-30 20:23:34 -06:00
Travis Ralston ffa75ef48c Wire up all the dialog parts for SSO, using device deletion as a POC 2020-03-30 20:03:46 -06:00
Jorik Schellekens da34e6241d Make all 'font-size's and 'line-height's rem
Font size of the whole app would ideally be controlled by a single
value. This value is currently hard coded using the :root CSS selector.
It is the intention to make this value configurable within riot. In the
interim all font-sizes have been converted to rem by the simple process
of regex. Replacing px values with their equivalent rem values assuming
a font size of 15px and then rounded to three decimal places, which was
the base at the time of this transformation.

I'm expecting another commit cleaning up rem values but I thought it
best to leave that to review.

This commit doesn't address any scaling issues. I thought it better to
land this unwieldy, mechanical, invisible change before the others
otherwise the pr would be impossible to review thoroughly.
2020-03-30 18:23:46 +01:00
Michael Telatynski ef79492f2c
Merge pull request #4209 from matrix-org/t3chguy/redesign/room_directory
Room Directory Explore Servers redesign
2020-03-18 11:51:42 +00:00
Bruno Windels db10fcd2b7 make editable list look like something closer to design 2020-03-16 17:29:35 +01:00
Michael Telatynski 86e53ea2c3 Initial attempt to redesign explore servers in room directory
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2020-03-13 00:02:50 +00:00
Tulir Asokan a8c5574bc8 Merge remote-tracking branch 'upstream/develop' into compact-reply-rendering 2020-03-05 13:19:15 +02:00
Michael Telatynski 4996139b1a word-break in pills and wrap the background correctly
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2020-02-29 01:56:02 +00:00
Bruno Windels 309633181d use FormButton in verification request tile too and dedupe styles 2019-11-22 16:32:50 +01:00
Bruno Windels 66cc68bae4 add new-styled button
might merge it later on with accessible button
2019-11-22 16:04:51 +01:00
Bruno Windels edd5d3c915 make custom power level not grow too wide 2019-11-15 16:14:18 +01:00
Bruno Windels b278531f2f add IconButton as in design 2019-11-15 16:14:18 +01:00
J. Ryan Stinnett 2a5dc9bfac Remove lint comments about no-descending-specificity
We have disabled the `no-descending-specificity` stylelint rule, so we no longer
need these block comments.
2019-11-08 16:35:42 +00:00
Tulir Asokan d282675bc6 Improve reply rendering
Signed-off-by: Tulir Asokan <tulir@maunium.net>
2019-10-13 15:08:50 +03:00
Michael Telatynski 6e33cc0650
Merge pull request #3433 from matrix-org/t3chguy/nvl/react16/EventListSummary
Summarise state events after room creation
2019-10-11 09:53:26 +01:00
Michael Telatynski 5643743167 Don't intercept TAB on the app outside of the composer, fix tabIndex > 0
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2019-10-10 14:13:29 +01:00
Michael Telatynski 34530843f4 Factor out generic EventListSummary from MELS
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2019-10-09 12:50:03 +02:00
J. Ryan Stinnett 0e8dc24c3f Add a basic error boundary for the entire app
This adds a basic error boundary around the entire app to catch errors during
rendering and present the user with the options on how to proceed. This is not
implemented as a modal so that it could be used selectively in portions of the
app as well, such as just the `RoomView`.

Fixes https://github.com/vector-im/riot-web/issues/11009
2019-10-02 17:31:22 +01:00
Michael Telatynski 192dcbb31f delint
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2019-09-27 09:14:29 +01:00
Michael Telatynski 8d1d3090f3 Improve keyboard accessibility using :focus-visible CSS polyfill
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2019-09-27 09:00:54 +01:00
Bruno Windels 8a1c1bbec4 implement RoomAliasField component
adding a postfix to Field to show the domain name
2019-09-23 11:22:30 +02:00
Bruno Windels cc67742fa9 undo whitespace setting, accessible button is used in too many places to make this a safe assumption 2019-09-12 12:24:05 +02:00
Bruno Windels 6f62cdb22c basic styling to make it look ok before applying new design 2019-09-11 15:45:51 +02:00
Bruno Windels 505846ce53 split up css, update class names 2019-08-22 13:33:20 +01:00
David Baker c76514fceb Add UI in settings to change ID Server
Just changes the current ID server being used

To come in subsequent PRs:
 * Store this in account data
 * Check for terms or support the proper UI for accepting terms when setting
 * Support disconnecting

Part 1 of https://github.com/vector-im/riot-web/issues/10094
Requires https://github.com/matrix-org/matrix-js-sdk/pull/1013
2019-08-09 18:07:58 +01:00
J. Ryan Stinnett 5ab958cc9f Fix field styling regression
The extra comma in the selectors caused this rule set to be ignored.

Regressed by https://github.com/matrix-org/matrix-react-sdk/pull/3200
Fixes https://github.com/vector-im/riot-web/issues/10311
2019-07-11 13:14:20 +01:00
J. Ryan Stinnett 9b3848d083
Merge pull request #3200 from matrix-org/jryans/stylelint-all-files
Run stylelint on all SCSS files
2019-07-11 09:38:18 +01:00
J. Ryan Stinnett ca1e5bb3ae Comment disabled rules 2019-07-11 09:30:01 +01:00
J. Ryan Stinnett 38d6953bf6 Manually fix remaining stylelint issues 2019-07-10 16:56:40 +01:00
J. Ryan Stinnett dd2079bffc Auto-fix stylelint issues
These `stylelint` issues were autofixed by the tool itself and look sane to me.
2019-07-10 16:56:40 +01:00
Travis Ralston 93872e6fa5 Ask for the user's password to rehydrate their soft logged out session
Fixes https://github.com/vector-im/riot-web/issues/10236

The changes to the MatrixClientPeg (assign/start) are to permit the SoftLogout page to access the MatrixClientPeg reliably. This is why assign() is called by Lifecycle as an alternative to start().

Minimal design work has been done here. The majority is deferred to https://github.com/vector-im/riot-web/issues/10262
2019-07-04 16:51:16 -06:00
J. Ryan Stinnett dd94bf799d Improve interactive tooltip hover behaviour
This gives the interactive tooltip a more natural hover behaviour by removing
the full screen div behind it. This allows the target button to keep its hover
state, for example.

This also removes the click to close behaviour, which was too easy to trigger
accidentally.

Fixes https://github.com/vector-im/riot-web/issues/10179
Fixes https://github.com/vector-im/riot-web/issues/10222
Fixes https://github.com/vector-im/riot-web/issues/10225
2019-07-01 18:00:59 +01:00
Bruno Windels 2e3a6b3c0b set 50% transparent accent color as editor focus border 2019-06-26 14:40:33 +02:00
J. Ryan Stinnett 80d73d8430 Add optional rounded chevron for tooltip
We'd like to have a rounded point on the chevron for an extra level of polish.
This implements that look for browsers that support `clip-path`.

Part of https://github.com/vector-im/riot-web/issues/9716
2019-06-21 15:10:17 +01:00
J. Ryan Stinnett 3bd247ebaa Tweak interactive tooltip to match design
This tweaks the tooltip to match the color, spacing, etc. seen in the designs.

Part of https://github.com/vector-im/riot-web/issues/9753
Part of https://github.com/vector-im/riot-web/issues/9716
2019-06-21 15:10:08 +01:00
J. Ryan Stinnett 32bf4588dd Center tooltip along top or bottom of target
This adjusts the positioning to work more the way we want:

* Tooltip is position on the top or bottom edge of the target depending on where
  space is available
* Tooltip and chevron are centered

In addition, more bits borrowed from `ContextualMenu` are not needed, so they
have been removed for simplicity.

Part of https://github.com/vector-im/riot-web/issues/9753
Part of https://github.com/vector-im/riot-web/issues/9716
2019-06-21 15:04:19 +01:00
J. Ryan Stinnett 6dcdad028e Clone ContextualMenu to InteractiveTooltip
As part of reactions and editing work, we're adding a new style of tooltip that
allows interacting with the content of the tooltip.  `ContextualMenu` is closest
out of the things we have today, but it doesn't position in quite the way we
want and it's already quite complex.

To get started, let's first clone that to a new `InteractiveTooltip`.

Part of https://github.com/vector-im/riot-web/issues/9753
Part of https://github.com/vector-im/riot-web/issues/9716
2019-06-21 15:04:19 +01:00
J. Ryan Stinnett bb4b5d7798 TooltipButton rename step 2 of 2 2019-06-19 11:32:03 +01:00
J. Ryan Stinnett ab4c5f0152 TooltipButton rename step 1 of 2 2019-06-19 11:30:37 +01:00
J. Ryan Stinnett 4ec7a8ddff Fix casing of TooltipButton
My brain can't deal with two different ways to write "Tooltip", so this
converges the naming to match the rest of the code base. Separate commits will
fix up the file names for case-insensitive file systems.
2019-06-19 11:26:13 +01:00
Bruno Windels 872c1acdea keep mx_Field stretching 2019-06-17 18:29:03 +02:00
Michael Telatynski 1090b7d912 Use flex: 1 for mx_Field to replace all the calc(100% - 20px) and more
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2019-06-13 23:48:47 +01:00
Travis Ralston 14dc4b47fa Merge branch 'develop' into travis/feature/wellknown2 2019-05-22 23:05:54 -06:00
Bruno Windels ef4fe52d6b
Merge pull request #3002 from matrix-org/bwindels/pill-avatar-fixup
Fixup: also change editor margin when last event and buttons are not overlaying
2019-05-21 14:33:39 +00:00
Bruno Windels 30d374dff4 also changing margin when last event and buttons are not overlaying 2019-05-21 16:06:14 +02:00
Bruno Windels 2d4d608ed6
Merge pull request #2997 from matrix-org/bwindels/pill-avatars
Message editing: render avatars for pills in the editor
2019-05-21 12:11:06 +00:00
Bruno Windels 5d184b3f77 reuse mx_Pill styles for editor pills to avoid style duplication
the avatar style code is still different though,
as it's implemented differently

This also prevents updating the css variables when not needed,
which caused the avatar to flicker when updating the editor.
2019-05-21 12:19:35 +02:00
Bruno Windels b00a38a1e5 apply mx_EventTile_content to editor, so it gets the same right margin
this way we don't have to include it in the magic number
2019-05-21 12:18:20 +02:00
Travis Ralston 3476be3327 Merge branch 'develop' into travis/feature/wellknown2 2019-05-20 19:50:02 -06:00
Bruno Windels 2bacabc002 apply 34px margin the mx_EventTile_content also has
so width of editor stay the same as content
(unrelated to pills, really)
2019-05-20 16:01:31 +02:00
Bruno Windels 5d80c3a2a4 fallback to avatar bg color 2019-05-20 15:39:06 +02:00
Bruno Windels 01ef1dd20e style room pills correctly 2019-05-20 15:38:59 +02:00
Bruno Windels c1b2f3dce1 make user pill avatars work in editor 2019-05-20 14:21:25 +02:00
Bruno Windels 1368a5eb80
Merge pull request #2996 from matrix-org/bwindels/composerdesign
Message editing: apply design
2019-05-20 08:42:41 +00:00
Bruno Windels a47e722fa1 same height as normal pill 2019-05-20 10:28:26 +02:00
Bruno Windels 3b598a1782 set pill avatar through css variables to set on psuedo-element
this way it won't interfere with editor selection/caret
2019-05-20 10:28:26 +02:00
Bruno Windels d81ab2464b better button alignment
also fix sticking out at the right side when not overlaying
2019-05-17 16:15:06 +01:00
Bruno Windels 8ce8ca18ff theme-ify! 2019-05-17 16:10:21 +01:00
Bruno Windels aef9323f21 explain negative margin 2019-05-17 16:10:11 +01:00
Bruno Windels aeea4ee83a a bit more horizontal padding for the editor 2019-05-17 16:00:58 +01:00
Bruno Windels cf8189ed43 align buttons perfectly with editor edge 2019-05-17 16:00:39 +01:00
Bruno Windels 81245e9c05 cull editor height to 200px 2019-05-17 16:00:22 +01:00
Bruno Windels 2544decab2 fix chrome not right aligning buttons 2019-05-17 16:00:08 +01:00
Bruno Windels ddefeae136 update design of editor to look as close to original tile (and design)
the buttons below the composer are overlayed onto the previous event.
In case of the last event, for now we make them not overflow, but make the
tile grow. The design says it should overlay on the main composer for the last
event tile, postponing that for a bit though as not sure what is the best way
to do that.
2019-05-17 15:33:11 +01:00
J. Ryan Stinnett 43c9e6d942 Reactions / editing tooltip tweaks 2019-05-17 15:10:35 +01:00
J. Ryan Stinnett 059988ff5c Extract tooltip styling to a shared class
We want to use the same styling with edited tooltip as well, so this extracts
the shared bits.
2019-05-17 12:11:01 +01:00
Travis Ralston 0c7aa39273 Merge branch 'develop' into travis/feature/wellknown2 2019-05-16 12:59:50 -06:00
Bruno Windels 22533ba2d4 use theme var for bg color 2019-05-15 10:12:16 +01:00
Bruno Windels d83e278f6b PR feedback, cleanup 2019-05-15 09:46:08 +01:00
Bruno Windels 759a4a54ef send the actual m.replace event from composer content 2019-05-14 15:38:16 +01:00
Bruno Windels c98e716cbd some pill styling 2019-05-14 15:38:16 +01:00
Bruno Windels 4ff37ca046 don't show model for now 2019-05-14 15:38:16 +01:00
Bruno Windels fc87a27c5d make editor nicer 2019-05-14 15:38:16 +01:00
Bruno Windels 317e88bef2 initial hacky hookup of Autocomplete menu in MessageEditor 2019-05-14 15:38:16 +01:00
Bruno Windels ebdb9fcb9c don't collapse whitespace in editor 2019-05-14 15:38:16 +01:00
Bruno Windels 76bb56a2bf initial hookup editor code with react component 2019-05-14 15:38:16 +01:00
Bruno Windels 6599d605cd wire up editor component (somewhat hacky) 2019-05-14 15:38:16 +01:00
Travis Ralston e4576dac28 Render underlines and tooltips on custom server names in auth pages
See https://github.com/vector-im/riot-web/issues/9290
2019-05-13 17:16:40 -06:00
J. Ryan Stinnett 26f732723e Animate tooltips when hiding as well as showing
This uses the same animation style as on show, but twice as fast.
2019-04-25 14:29:10 +01:00
J. Ryan Stinnett 0b42ded007 Style complexity progress bars more heavily
This disables the native progress appearance and uses the green color from our
themes.
2019-04-25 14:29:10 +01:00
J. Ryan Stinnett 67d7091dcd Password score progress should be full width in tooltip 2019-04-25 14:29:10 +01:00
J. Ryan Stinnett a7c37733b8 Rebalance margins in validation tooltip 2019-04-25 14:29:09 +01:00
J. Ryan Stinnett 37e09b5569 Add check and x icons for validation feedback
Adds icons from the Feather set with the same color as text. Tweaks validation
item spacing to match the design.
2019-04-25 14:29:09 +01:00
J. Ryan Stinnett 338d83ab55 Add validation feedback helper
This adds a general validation feedback mechanism for checking input values. An
initial example is wired up for the username input on registration.
2019-04-25 14:29:09 +01:00
Bruno Windels c1ff5f2fba implement style 2019-04-15 17:11:26 +02:00
YaoiFangirl420 9bd1ba60f5 Add option to rotate images
cf. https://github.com/vector-im/riot-web/issues/9257

Add rotate clockwise/counterclockwise buttons to <ImageView>

Signed-off-by: YaoiFangirl420 <48789208+YaoiFangirl420@users.noreply.github.com>
2019-04-04 01:48:41 -07:00
Tee Mak 50ffdc2f12
Fixed drop shadow for tooltip.
The box-shadow color value is from $menu-box-shadow-color. The shadow now looks consistent on light or dark theme.
2019-03-22 14:50:13 -04:00
J. Ryan Stinnett b8925d857d Reorganize field validity styles
* The field border style was previously moved up to the field
* Validity colors should be shown regardless of focus state
2019-03-12 14:02:54 +00:00
Matthew Hodgson 40f16fa310 adds validation for fields.
* renames RoomTooltip to be a generic Tooltip (which it is)
 * hooks it into Field to show validation results
 * adds onValidate to Field to let Field instances call an arbitrary validation function

Rebased from @ara4n's https://github.com/matrix-org/matrix-react-sdk/pull/2550
by @jryans. Subsequent commits revise and adapt this work.
2019-03-12 14:02:54 +00:00
J. Ryan Stinnett 1cefa44319 Redesign country dropdown to fit redesign
This tweaks colors of the country dropdown to blend in better with the rest of
the design.

Fixes https://github.com/vector-im/riot-web/issues/9048
2019-03-08 10:03:50 +00:00
J. Ryan Stinnett 5b1d361577 Convert registration phone number to Field component
Now that we have prefix support in the Field component, we can also convert the
phone number with country dropdown on registration.
2019-03-05 17:58:42 +00:00
J. Ryan Stinnett 26b2aa174b Add prefix support to Fields
This allows Fields to have an optional prefix component which is placed inside
the border of the Field and to the left of the input. Since this label animation
would be complex to get right for this case, it is instead fixed to the top left
if there is a prefix component.

This canonical example of this today would be a phone number field which
includes a country dropdown.
2019-03-05 15:25:43 +00:00
J. Ryan Stinnett ae5c32d28b Lift border up to the Field root
By placing the Field's border on the Field component root instead of the input,
it's easier to wrap it around additional elements that we'll soon stuff inside
the field.
2019-03-05 15:25:43 +00:00
J. Ryan Stinnett 1336508a4e Add comment, fix bad math
This adds a comment to explain the `max-width` and also fixes it actually use
the right value. (I had grabbed the wrong part of `margin` the first time.)
2019-03-05 11:13:39 +00:00
J. Ryan Stinnett c1688d2be3 Limit Field label to size of input
This avoids awkward wrapping if the label is longer than the input. This will
show an ellipsis to suggest there's more text in the label than can be shown.
2019-03-04 18:02:36 +00:00
Travis Ralston a41df7ab68 Convert PowerSelector to use mxField instead 2019-02-28 19:00:57 -07:00
J. Ryan Stinnett bd577e8f9b
Merge pull request #2714 from jryans/field-click-label
Send Field label pointer events to input
2019-02-27 17:07:08 +00:00
J. Ryan Stinnett e9490b3032 Send Field label pointer events to input
When the `label` element is displayed on top of the input (`label` is set and
there is no `placeholder`), it would block clicks from reaching the input. This
allows them to get through, but then also restores `label`'s events once it
moves out of the way.

Fixes https://github.com/vector-im/riot-web/issues/8469
2019-02-27 13:23:48 +00:00
J. Ryan Stinnett 4b340450b9 Rename Feather icon directory to `feather-customised`
These icons are based on Feather as the original source, but they have various
tweaks applied, such as stroke width, color, etc. Hopefully the tweaked name
makes this more obvious in the future.
2019-02-27 10:42:10 +00:00
Travis Ralston 2903a0e712 Rework EditableItemList to support mxField
Also improves upon the general UX to be a bit friendlier for direct manipulation things.
2019-02-21 15:22:08 -07:00
Bruno Windels 89792459ff fix close button being half off screen 2019-02-14 16:51:45 +01:00
J. Ryan Stinnett b0d08b9a25 Rename dharma theme to light theme 2019-02-13 10:47:04 +00:00
J. Ryan Stinnett d7fb39fd08 First pass at dark theme colors 2019-02-13 10:47:04 +00:00
Travis Ralston debac60980 Include input and select labels in disabled stlyes 2019-02-08 09:52:14 -07:00
Travis Ralston cf1366635f Merge branch 'develop' into travis/settings/disable-topic 2019-02-08 09:25:51 -07:00
Travis Ralston e5934c12b4 Render disabled mxField textareas as disabled
Fixes https://github.com/vector-im/riot-web/issues/8440
2019-02-07 11:58:15 -07:00
David Baker 3a924d05b5 Remove click-to-verify from SAS
The click-each-pair to verify was hard to discover, so remove it
2019-02-07 17:01:55 +00:00
Travis Ralston b2c161c7c1 Merge branch 'develop' into travis/settings/delete-the-old 2019-02-06 11:02:21 -07:00
J. Ryan Stinnett 36bf06d87a Tweak field padding to avoid overlapping with selected text 2019-02-05 15:50:56 +00:00
Travis Ralston eac50aa800 Remove old user and room settings
This takes out the old user and room settings, replacing the paths with the new dialog editions. The labs setting has been removed in order to support this change.

In addition to removing the old components outright, some older components which were only used by the settings pages have been removed. The exception is the ColorSettings component as it has a high chance of sticking around in the future.

Styles that were shared by the settings components have been broken out to dedicated sections, making it easier to remove the old styles entirely.

Some stability testing of the app has been performed to ensure the app still works, however given the scope of this change there is a possibility of some broken functionality.
2019-02-04 13:40:21 -07:00
J. Ryan Stinnett d3e2c33bfa Push dropdown chevron to right side 2019-02-01 16:06:46 -06:00
Matthew Hodgson f658288f2b
Merge pull request #2543 from matrix-org/matthew/cyrillic
Matthew/cyrillic
2019-01-31 13:11:14 +01:00
Matthew Hodgson ac620c7a05 fix bg color on selects 2019-01-31 13:10:11 +01:00
Matthew Hodgson 2fc6f89953 remove italics CSS skew 2019-01-31 11:51:26 +01:00
J. Ryan Stinnett 6718ae8b7c Set standard font size for fields 2019-01-30 17:52:18 -06:00
J. Ryan Stinnett d6f55a508c Use custom appearance and arrow for select fields 2019-01-30 16:40:53 -06:00
J. Ryan Stinnett b093119d30 Move dropdown arrow to primary element 2019-01-30 16:39:08 -06:00
Bruno Windels 4d2a93eaaf
Merge pull request #2527 from jryans/auth-registration
Style registration flow
2019-01-30 11:27:45 +00:00
J. Ryan Stinnett 25a2c3fe4d Tweak dropdown font 2019-01-29 17:38:28 -06:00
J. Ryan Stinnett 16b4f8fb6d Use new arrow for all dropdowns 2019-01-29 17:38:28 -06:00
J. Ryan Stinnett 92394ba601 Change country dropdown to be smaller with arrow on right 2019-01-29 17:38:28 -06:00
Travis Ralston a2f516c461 Implement the Security & Privacy tab of new room settings 2019-01-29 14:31:07 -07:00
Bruno Windels 855dbd7d2b Merge branch 'experimental' into bwindels/roomdirectory-makeover 2019-01-29 18:33:03 +01:00
Bruno Windels 15a74cac15 Merge branch 'experimental' into bwindels/redesign-smallfixes 2019-01-29 18:30:08 +01:00
Bruno Windels 1b82ec6e36 make resize handle not overlap with left panel sublist scrollbars 2019-01-29 18:01:29 +01:00
Bruno Windels 9f1b4ac4cc room directory makeover 2019-01-29 15:34:58 +01:00
Travis Ralston 243feb9b13 Early tab structure and profile changes (name/avatar/topic) 2019-01-28 13:54:56 -07:00
Travis Ralston c204cd7be3
Merge pull request #2502 from matrix-org/travis/settings/disabled-selects
Override UA/OS styles for disabled Field selects
2019-01-28 10:32:37 -07:00
David Baker b4f02844a8 Merge remote-tracking branch 'origin/experimental' into dbkr/sas 2019-01-28 09:36:39 +00:00
Travis Ralston aeac82209e Improve disabled Field styling 2019-01-25 09:10:16 -07:00
Travis Ralston 9bbbab9d03 Add simple animations to toggle switches 2019-01-24 21:24:28 -07:00
Travis Ralston 284be2653e Override UA/OS styles for disabled Field selects
Fixes https://github.com/vector-im/riot-web/issues/8249
2019-01-24 19:27:20 -07:00
Travis Ralston 0f89668446 Also the font size 2019-01-24 14:42:30 -07:00
Travis Ralston 87cea5ef09 Fix sizings and margins 2019-01-24 14:41:00 -07:00
Travis Ralston 524d2f1e11 Force font family upon Fields 2019-01-24 11:43:03 -07:00