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
8a1c1bbec4
implement RoomAliasField component
...
adding a postfix to Field to show the domain name
2019-09-23 11:22:30 +02:00
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
6f62cdb22c
basic styling to make it look ok before applying new design
2019-09-11 15:45:51 +02:00
505846ce53
split up css, update class names
2019-08-22 13:33:20 +01:00
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
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
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
ca1e5bb3ae
Comment disabled rules
2019-07-11 09:30:01 +01:00
38d6953bf6
Manually fix remaining stylelint issues
2019-07-10 16:56:40 +01:00
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
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
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
2e3a6b3c0b
set 50% transparent accent color as editor focus border
2019-06-26 14:40:33 +02:00
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
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
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
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
bb4b5d7798
TooltipButton rename step 2 of 2
2019-06-19 11:32:03 +01:00
ab4c5f0152
TooltipButton rename step 1 of 2
2019-06-19 11:30:37 +01:00
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
872c1acdea
keep mx_Field stretching
2019-06-17 18:29:03 +02:00
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
14dc4b47fa
Merge branch 'develop' into travis/feature/wellknown2
2019-05-22 23:05:54 -06:00
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
30d374dff4
also changing margin when last event and buttons are not overlaying
2019-05-21 16:06:14 +02:00
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
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
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
3476be3327
Merge branch 'develop' into travis/feature/wellknown2
2019-05-20 19:50:02 -06:00
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
5d80c3a2a4
fallback to avatar bg color
2019-05-20 15:39:06 +02:00
01ef1dd20e
style room pills correctly
2019-05-20 15:38:59 +02:00
c1b2f3dce1
make user pill avatars work in editor
2019-05-20 14:21:25 +02:00
1368a5eb80
Merge pull request #2996 from matrix-org/bwindels/composerdesign
...
Message editing: apply design
2019-05-20 08:42:41 +00:00
a47e722fa1
same height as normal pill
2019-05-20 10:28:26 +02:00
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
d81ab2464b
better button alignment
...
also fix sticking out at the right side when not overlaying
2019-05-17 16:15:06 +01:00
8ce8ca18ff
theme-ify!
2019-05-17 16:10:21 +01:00
aef9323f21
explain negative margin
2019-05-17 16:10:11 +01:00
aeea4ee83a
a bit more horizontal padding for the editor
2019-05-17 16:00:58 +01:00
cf8189ed43
align buttons perfectly with editor edge
2019-05-17 16:00:39 +01:00
81245e9c05
cull editor height to 200px
2019-05-17 16:00:22 +01:00
2544decab2
fix chrome not right aligning buttons
2019-05-17 16:00:08 +01:00
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
43c9e6d942
Reactions / editing tooltip tweaks
2019-05-17 15:10:35 +01:00
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
0c7aa39273
Merge branch 'develop' into travis/feature/wellknown2
2019-05-16 12:59:50 -06:00
22533ba2d4
use theme var for bg color
2019-05-15 10:12:16 +01:00
d83e278f6b
PR feedback, cleanup
2019-05-15 09:46:08 +01:00
759a4a54ef
send the actual m.replace event from composer content
2019-05-14 15:38:16 +01:00
c98e716cbd
some pill styling
2019-05-14 15:38:16 +01:00
4ff37ca046
don't show model for now
2019-05-14 15:38:16 +01:00
fc87a27c5d
make editor nicer
2019-05-14 15:38:16 +01:00
317e88bef2
initial hacky hookup of Autocomplete menu in MessageEditor
2019-05-14 15:38:16 +01:00
ebdb9fcb9c
don't collapse whitespace in editor
2019-05-14 15:38:16 +01:00
76bb56a2bf
initial hookup editor code with react component
2019-05-14 15:38:16 +01:00
6599d605cd
wire up editor component (somewhat hacky)
2019-05-14 15:38:16 +01:00
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
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
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
67d7091dcd
Password score progress should be full width in tooltip
2019-04-25 14:29:10 +01:00
a7c37733b8
Rebalance margins in validation tooltip
2019-04-25 14:29:09 +01:00
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
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
c1ff5f2fba
implement style
2019-04-15 17:11:26 +02:00
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
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
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
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
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
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
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
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
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
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
a41df7ab68
Convert PowerSelector to use mxField instead
2019-02-28 19:00:57 -07:00
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
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
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
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
89792459ff
fix close button being half off screen
2019-02-14 16:51:45 +01:00
b0d08b9a25
Rename dharma theme to light theme
2019-02-13 10:47:04 +00:00
d7fb39fd08
First pass at dark theme colors
2019-02-13 10:47:04 +00:00
debac60980
Include input and select labels in disabled stlyes
2019-02-08 09:52:14 -07:00
cf1366635f
Merge branch 'develop' into travis/settings/disable-topic
2019-02-08 09:25:51 -07:00
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
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
b2c161c7c1
Merge branch 'develop' into travis/settings/delete-the-old
2019-02-06 11:02:21 -07:00
36bf06d87a
Tweak field padding to avoid overlapping with selected text
2019-02-05 15:50:56 +00:00
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
d3e2c33bfa
Push dropdown chevron to right side
2019-02-01 16:06:46 -06:00
f658288f2b
Merge pull request #2543 from matrix-org/matthew/cyrillic
...
Matthew/cyrillic
2019-01-31 13:11:14 +01:00
ac620c7a05
fix bg color on selects
2019-01-31 13:10:11 +01:00
2fc6f89953
remove italics CSS skew
2019-01-31 11:51:26 +01:00
6718ae8b7c
Set standard font size for fields
2019-01-30 17:52:18 -06:00
d6f55a508c
Use custom appearance and arrow for select fields
2019-01-30 16:40:53 -06:00
b093119d30
Move dropdown arrow to primary element
2019-01-30 16:39:08 -06:00
4d2a93eaaf
Merge pull request #2527 from jryans/auth-registration
...
Style registration flow
2019-01-30 11:27:45 +00:00
25a2c3fe4d
Tweak dropdown font
2019-01-29 17:38:28 -06:00
16b4f8fb6d
Use new arrow for all dropdowns
2019-01-29 17:38:28 -06:00
92394ba601
Change country dropdown to be smaller with arrow on right
2019-01-29 17:38:28 -06:00
a2f516c461
Implement the Security & Privacy tab of new room settings
2019-01-29 14:31:07 -07:00
855dbd7d2b
Merge branch 'experimental' into bwindels/roomdirectory-makeover
2019-01-29 18:33:03 +01:00
15a74cac15
Merge branch 'experimental' into bwindels/redesign-smallfixes
2019-01-29 18:30:08 +01:00
1b82ec6e36
make resize handle not overlap with left panel sublist scrollbars
2019-01-29 18:01:29 +01:00
9f1b4ac4cc
room directory makeover
2019-01-29 15:34:58 +01:00
243feb9b13
Early tab structure and profile changes (name/avatar/topic)
2019-01-28 13:54:56 -07:00
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
b4f02844a8
Merge remote-tracking branch 'origin/experimental' into dbkr/sas
2019-01-28 09:36:39 +00:00
aeac82209e
Improve disabled Field styling
2019-01-25 09:10:16 -07:00
9bbbab9d03
Add simple animations to toggle switches
2019-01-24 21:24:28 -07:00
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
0f89668446
Also the font size
2019-01-24 14:42:30 -07:00
87cea5ef09
Fix sizings and margins
2019-01-24 14:41:00 -07:00
524d2f1e11
Force font family upon Fields
2019-01-24 11:43:03 -07:00
736aa8297d
Minor CSS adjustments
2019-01-23 18:49:27 -07:00
3f897468a6
Add a ToggleSwitch and use it for SettingsFlag
...
Also bring in the compact timeline option.
Without minor CSS changes, the old user settings are completely unusable with this change. As such, minimal effort has been put in to have it be useful. Similarly, the changes drop the use of radio groups and the old theme selector was the only one that used it. See the comments for more details on how/why this was mitigated the way it was.
2019-01-23 15:50:41 -07:00
97666d39bc
Bring in theme and language options
2019-01-23 14:43:45 -07:00
6a90625d36
Merge remote-tracking branch 'origin/experimental' into dbkr/sas
2019-01-23 17:32:18 +00:00
aa7afe819f
Bring over email address management
2019-01-23 09:28:53 -07:00
94b1d739fb
Merge pull request #2476 from matrix-org/travis/modal-tab-settings
...
Basic structure for tabbed user settings
2019-01-23 07:52:44 -07:00
2b3c8c4450
Correctly form a select/input element
2019-01-22 20:03:59 -07:00
f0e8182ff3
Support selects on Field
...
Luckily, the styling is copy/paste capable.
2019-01-22 19:25:09 -07:00
15a56fa90b
Improve the profile section a bit and add a highlight to the temp tab
2019-01-21 17:27:43 -07:00
23b3e74c1c
Change to new field focused color
2019-01-21 13:47:16 -06:00
352107352e
Tweak field input padding to match label position
2019-01-21 13:47:16 -06:00
1906cfd700
Tweak field label to be vertically centered
2019-01-21 13:47:16 -06:00
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
970880737e
Merge remote-tracking branch 'origin/experimental' into dbkr/sas
2019-01-18 18:33:11 +00:00
ec2d51cbbb
SAS verification screen matching design
2019-01-18 16:56:49 +00:00
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
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
7a1008f1fe
Fix color for @room pills in HTML messages
2019-01-07 09:56:40 -06:00
bf87547f88
Remove unexpected underline from pills
...
Fixes vector-im/riot-web#8031 .
2019-01-07 09:56:40 -06:00
e4d2b6f2b7
fix resize handles being too thick on edge (hopefully)
2018-12-14 17:06:00 +01:00
24d9e8e168
use padding and negative margin for all resize handles
...
this way they only take 1px for layout but have a interaction
target of 11px wide
2018-10-31 16:52:36 +01:00
ba83166661
Merge branch 'develop' into experimental
2018-10-31 14:54:22 +01:00
d54bf13fab
Hide all the time travel.
...
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2018-10-27 11:06:52 +01:00
d1bab6cc35
tweak resize handle in room list
...
only show a 1 px line but with a 9px interaction target
apply darker color from design
2018-10-22 11:19:42 +02:00
bbd50e75ee
disable old style of showing focus for now
2018-10-19 12:10:37 +02:00
e5d1b3328c
make resize handles have correct color + bidirectional cursor
2018-10-11 15:35:17 +02:00
928b6d47c8
add resize handles between 3 main app columns
2018-09-24 16:07:42 +01:00
efdc5430d7
merge develop
2018-07-09 17:50:07 +01:00
7225f7372c
Revert " make click to insert nick work on join/parts, /me's etc"
2018-07-03 10:30:08 +01:00
2c537a8dff
update styling
...
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2018-06-29 15:28:36 +01:00
6021c3a634
Merge branch 'develop' of github.com:matrix-org/matrix-react-sdk into t3chguy/click_username_state_ev
2018-06-29 14:56:18 +01:00
32ab997230
properly style Group Pill
...
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2018-06-22 14:38:06 +01:00
c1e608f1a8
show permalinks to communities as Pills
...
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2018-06-19 11:53:17 +01:00
c91e6cb530
make click to insert nick work on join/parts, /me's etc
...
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2018-06-07 01:02:34 +01:00
b60ccad29b
Merge branch 'develop' into matthew/slate
2018-05-15 01:00:07 +01:00
c1000a7cd5
emojioneify the composer
...
and also fix up the selectedness CSS for pills and emoji
2018-05-14 03:02:12 +01:00
ee0e6c5913
Remove margins when in a ReplyThread to stop them taking so much space
...
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2018-05-09 11:53:37 +01:00
06408f843b
post BigMerge fixup - merge in stuff from riot-web PR
...
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2018-04-20 09:23:27 +01:00
79d3cca6e9
move components' CSS to be in the same repo as their JS
2018-04-12 00:23:58 +01:00
Michael Telatynski