Commit graph

964 commits

Author SHA1 Message Date
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
52b0f285c6 Add some clarifying comments 2019-05-20 21:07:12 -06:00
Travis Ralston
3476be3327 Merge branch 'develop' into travis/feature/wellknown2 2019-05-20 19:50:02 -06:00
Matthew Hodgson
d3f06763b3
Merge branch 'develop' into matthew/twemoji 2019-05-20 16:38:44 +01: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
Matthew Hodgson
7b2602f1c7 apply monospace to pre 2019-05-20 10:09:19 +01: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
Matthew Hodgson
dbc6815abf make EmojiProvider and stripped-emoji.json work 2019-05-19 20:48:18 +01:00
Matthew Hodgson
e48cc44cba apply monospace font correctly 2019-05-19 17:41:18 +01:00
Matthew Hodgson
069a5a9546 remove obsolete emojione css 2019-05-19 17:11:41 +01:00
Matthew Hodgson
24b03374ac moar lineheight needed for big twemoji 2019-05-19 16:48:29 +01:00
Matthew Hodgson
dc72641264 replace emojione with twemoji. completely untested & debugged & unoptimised 2019-05-19 15:23:43 +01:00
Travis Ralston
47add75278 Add class to hide focus highlight
We use tabIndex to make elements selectable and therefore focused by screen readers. Doing this draws a blue border (in chrome at least) around the element - in some cases, we don't want this.
2019-05-17 15:25:17 -06:00
J. Ryan Stinnett
3a405701a3 Debug: Show all events 2019-05-17 16:34:01 +01: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
f9462d1012 hide timestamp while editing 2019-05-17 16:01:52 +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
603e6b7055 Adjust edited tooltip to use shared styles 2019-05-17 12:19:02 +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
J. Ryan Stinnett
3da1f73ea4 Add a basic tooltip showing who reacted
This adds a first attempt at tooltip showing who reacted to a message. It
doesn't limit senders or position the tooltip nicely, but the info is there at
least.

Part of https://github.com/vector-im/riot-web/issues/9722
2019-05-17 12:11:01 +01:00
Bruno Windels
4a6725d4c2 Message editing: show (edited) marker on edited messages, with tooltip 2019-05-17 11:36:36 +01:00
Michael Telatynski
d7c6869188 Apply Flex voodoo
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2019-05-16 21:55:17 +01:00
Travis Ralston
0c7aa39273 Merge branch 'develop' into travis/feature/wellknown2 2019-05-16 12:59:50 -06:00
Travis Ralston
60a13652df
Merge pull request #2965 from matrix-org/travis/wk/tooltip
Render underlines and tooltips on custom server names in auth pages
2019-05-15 14:13:44 -06:00
Will Hunt
2994d99378
Merge branch 'develop' into hs/custom-notif-sounds 2019-05-15 16:09:55 +01:00
Bruno Windels
52c4d7b6b0 fixup edit icon 2019-05-15 15:53:02 +01:00
Will Hunt
d752de0972 Improve UX 2019-05-15 15:52:42 +01:00
Bruno Windels
edc100163f
Merge pull request #2952 from matrix-org/bwindels/message-edit-editor
Initial support for editing messages
2019-05-15 09:23:01 +00:00
Bruno Windels
22533ba2d4 use theme var for bg color 2019-05-15 10:12:16 +01:00
Bruno Windels
6b932d58e6 remove cruft from edit icon 2019-05-15 10:10:29 +01:00
Bruno Windels
d83e278f6b PR feedback, cleanup 2019-05-15 09:46:08 +01:00
J. Ryan Stinnett
1421e8e06b Tweak reply arrow and hover color 2019-05-15 09:12:53 +01:00
Michael Telatynski
9b40913838
Merge pull request #2957 from matrix-org/t3chguy/invite_perms
Check permission to invite before showing invite buttons/disable them
2019-05-14 23:15:59 +01:00
Michael Telatynski
fd07b5c476 use scss variable for grey
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2019-05-14 23:03:02 +01:00
Will Hunt
277c4ab809
Merge branch 'develop' into hs/custom-notif-sounds 2019-05-14 21:07:03 +01:00
Will Hunt
626cb46915 Cleanup interface buttons 2019-05-14 21:05:22 +01:00
Travis Ralston
4c1ac38dd4 Merge branch 'develop' into travis/feature/wellknown2 2019-05-14 10:53:01 -06:00
J. Ryan Stinnett
a2e0dc2f7e Tweak message action bar position
This moves the message action bar up slightly to avoid covering message text.
2019-05-14 16:52:02 +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
Travis Ralston
83737654ff Merge branch 'develop' into travis/feature/wellknown2 2019-05-13 09:20:10 -06:00
J. Ryan Stinnett
f5aa32bc96
Merge pull request #2954 from matrix-org/jryans/aggregations
Send and undo reaction events
2019-05-13 15:20:28 +01:00
Michael Telatynski
3cd9c152c2 Check permission to invite before showing invite buttons/disable them
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2019-05-11 19:45:24 +01:00
Travis Ralston
6a941aca91
Merge pull request #2941 from matrix-org/travis/guests/block-ui
Use validated server config for login, registration, and password reset
2019-05-10 11:21:21 -06:00
J. Ryan Stinnett
6a3708d51b Disable select for reaction buttons 2019-05-10 18:09:32 +01:00
Michael Telatynski
cd5a460b2b Iterate PR based on feedback
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2019-05-09 22:30:45 +01:00
Michael Telatynski
16c027dc61 Merge branches 'develop' and 'devtools_serverlist' of github.com:matrix-org/matrix-react-sdk into devtools_serverlist 2019-05-09 22:27:37 +01:00
J. Ryan Stinnett
576241236c Extract ReactionDimension out of MessageActionBar
The reactions bits were cluttering up `MessageActionBar` so they have now been
extracted to a separate component.
2019-05-08 13:53:41 +01:00
Travis Ralston
636cb8a5cc Have ServerConfig and co. do validation of the config in-house
This also causes the components to produce a ValidatedServerConfig for use by other components.
2019-05-03 11:32:59 -06:00
J. Ryan Stinnett
87f737b8a3 Increment an existing reaction
This allows you to increment an existing reaction below a message by clicking on
it.

At the moment, this is not linked to the action bar, so they each are using
local state. We'll likely want to add some mechanism so that we can local echo
to both of these UI areas at the same time, but that can be done separately.

Fixes https://github.com/vector-im/riot-web/issues/9486
2019-05-02 12:05:17 +01:00
J. Ryan Stinnett
15c5893278 Display existing reactions below the message
This displays the existing reactions a message has from all users below the
message.

Since we don't currently have an API to actually get these events yet,
adds a temporary hook that looks for a specific message to inject some sample
data. This helps build out the UI for now and can be removed once it exists.

Fixes https://github.com/vector-im/riot-web/issues/9573
2019-05-02 12:05:17 +01:00
J. Ryan Stinnett
784599d9e9 Add primary reactions to action bar
This adds the primary reactions to the action bar. They act as toggles where you
can only select one from each group at a time.

Note that currently we aren't actually sending the reaction at all. That's left
for a separate task.

Fixes https://github.com/vector-im/riot-web/issues/9576
2019-04-30 18:09:10 +01:00
J. Ryan Stinnett
4b50d2a2bf Update action bar colors for dark theme
In addition, this also adjusts the event hover colors to match the palette.

Fixes https://github.com/vector-im/riot-web/issues/9591
2019-04-30 17:42:17 +01:00
J. Ryan Stinnett
739c8c0314 Promote reply button up to message action bar
This moves the reply action out of the existing options menu and up to the
message action bar for easier access.
2019-04-29 15:53:03 +01:00
J. Ryan Stinnett
8ef9fe951d Update styling of message action bar for multiple buttons
This applies the new design for multiple buttons in the message action bar,
paving the way for more things to appear here.

In addition, this changes the existing options button to use the three vertical
dots icon. Some theme colors are also tweaked to align with what they were meant
to be from the unified palette.
2019-04-29 15:20:51 +01:00
J. Ryan Stinnett
ed8bbc7082 Extract message options button to action bar
This adds a new action bar component to hold multiple per-message actions. This
existing options button has moved to this new component, and is currently the
only action.
2019-04-29 15:20:50 +01:00
J. Ryan Stinnett
530c92e03d Rename event edit button to options button
This naming is clearer as it doesn't really edit at all (it shows a context
menu). This should also be less confusing with actual editing when it arrives.
2019-04-29 15:20:50 +01: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
Luca Weiss
12f92c49a6
Mark a few CSS classes as not selectable
Should be enough to make copy-pasting not a nightmare.

For vector-im/riot-web#7460

Also remove an instance where the vendor prefixes were used, but a build
step adds those automatically

Signed-off-by: Luca Weiss <luca@z3ntu.xyz>
2019-04-23 19:52:48 +02:00
Bruno Windels
faecceb3b4 remove manual order so component order follows markup order 2019-04-18 09:20:26 +02:00
Bruno Windels
22874f62ab Merge branch 'develop' into bwindels/stylepreviewbar 2019-04-17 11:06:21 +02:00
Bruno Windels
1100320351 make non-member inviter name also bold 2019-04-17 11:02:58 +02:00
Bruno Windels
86620839ae make username clickable 2019-04-17 10:57:45 +02:00
Bruno Windels
8a371080d7 colored inviter name and layout 2019-04-17 10:22:35 +02:00
Bruno Windels
eeaa7143ac move name coloring out of sender profile
so we can reuse it in room preview bar
2019-04-17 10:21:30 +02:00
Bruno Windels
e40757a801 make sure long subtitles dont overflow 2019-04-16 16:19:50 +02:00
Bruno Windels
c1ff5f2fba implement style 2019-04-15 17:11:26 +02:00
J. Ryan Stinnett
32f28a7184
Merge pull request #2918 from jryans/bold-for-all
Ensure `<b>` tags appear bold for all browsers
2019-04-15 09:55:09 +01:00
Travis Ralston
e8d141fc3c
Merge pull request #2908 from matrix-org/travis/upgrades/linkback
Add a link in room settings to get at the tombstoned room if it exists
2019-04-12 10:21:39 -06:00
J. Ryan Stinnett
11bd82ee4c Ensure <b> tags appear bold for all browsers
In Firefox, the default <b> style is such that it doesn't appear bold with our
current selection of specific font weights. This specifically sets a working
font weight.
2019-04-12 15:09:32 +01:00
Bruno Windels
01e9de9a3a differentiate style based on preview or not 2019-04-12 12:54:13 +02:00
Travis Ralston
aadc1a8d75 Add a generic error page element for startup errors
Used by Riot to communicate configuration problems.
2019-04-11 15:52:37 -06:00
Bruno Windels
0553a6f1d6 some style changes 2019-04-11 13:07:54 +02:00
Travis Ralston
15e8ce7a7f Add a link in room settings to get at the tombstoned room if it exists
Fixes https://github.com/vector-im/riot-web/issues/8542
2019-04-10 15:00:02 -06:00
J. Ryan Stinnett
12f7d1715b Remove BottomLeftMenu and supporting bits
The `BottomLeftMenu` component is not used in the new design. This removes the
component and also any images and sub-components that were only used by it.
2019-04-09 17:38:32 +01:00