Commit Graph

45 Commits (f2e2f1699bdc10dcb520b26b348851ae93024199)

Author SHA1 Message Date
David Baker e5b03488d8 Fix widget resizing
There was a line of CSS that set pointer-events: none on widget
iframes whilst they were being resized to stop iframes swallowing
the mousemove/up events while dragging the resize handle, but a)
all widgets are now in a persisted element wrapper and therefore
not in the right place in the DOM to get that CSS and b) that only
got set when resizing the whole aps drawer vertically, not dragging
the handle between apps to change the width distribution.

Add a pointer events prop to AppTile to allow the pointer-events
style to be set by the parent, and set it when dragging either
resize handle.

Fixes https://github.com/vector-im/element-web/issues/16473
2021-03-05 17:52:51 +00:00
Travis Ralston c7c055dd98 Give a bigger target area to AppsDrawer vertical resizer
The existing target was too hard to hit, which annoyed users. This change makes it the same sort of surface area as the horizontal resizers, as requested by design to fix the problem in the short term.
2021-01-20 15:05:18 -07:00
Michael Telatynski 5a9bac68c6 iterate PR based on feedback
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2020-10-21 09:48:02 +01:00
Michael Telatynski 334ab12c47 Tidy up widget colouring
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2020-10-20 16:06:35 +01:00
Michael Telatynski 06009df05b Update Widget paddings and background colours
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2020-10-19 18:47:15 +01:00
Michael Telatynski f198b95579 Iterate PR; tidy and improve widget context menu
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2020-10-15 15:24:42 +01:00
Michael Telatynski 447ea9eb23 Relax flexboxes in resizer on window resize
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2020-10-13 16:11:58 +01:00
Michael Telatynski ba21c6ed36 Iterate on Widget icons and resizing handles
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2020-10-13 15:56:53 +01:00
Michael Telatynski 7be5ff0fe6 First cut of app drawer tiled resizing
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2020-10-13 12:29:12 +01:00
Michael Telatynski f72b1e0c7d Remove stale things
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2020-10-13 12:27:50 +01:00
Michael Telatynski c1fef5a941 Improve the styling
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2020-10-12 13:36:09 +01:00
Michael Telatynski ada6d1aa46 Iterate PR
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2020-10-09 08:42:21 +01:00
Michael Telatynski ab9b5b0d7b
Merge pull request #5265 from matrix-org/t3chguy/feat/widget-max-width
Remove width limit on widgets
2020-10-06 10:23:19 +01:00
Michael Telatynski 123dada465 Remove width limit on widgets
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2020-09-29 14:49:02 +01:00
Travis Ralston 849a5e4a39 Round the jitsi pip corners 2020-09-17 14:58:48 -06:00
Travis Ralston 8129333dcc Make the PIP Jitsi look and feel like the 1:1 PIP
* Similar sizing
* Fix pointers so the jitsi widget doesn't feel clickable when it's not
  * We might want to introduce click-to-visit-room for the Jitsi widget (like the 1:1 call), however the Jitsi widget has many more controls to worry about
* Remove the menu bar from the widget to avoid accidents
2020-09-16 22:38:12 -06:00
Michael Telatynski bf3c49b8df Remove redundant CSS rules 2020-08-27 10:46:29 +01:00
Michael Telatynski dc08fee635 Fix the resize handle being unreachable when you don't have permission to add widgets 2020-08-24 14:38:58 +01:00
Michael Telatynski 35cc1fb06d small tweaks 2020-08-21 16:38:28 +01:00
Michael Telatynski cca5ccd79d Switch widget resizing to re-resizable and add persistence 2020-08-21 16:29:07 +01:00
Michael Telatynski ae65ed5c2e Merge branch 'develop' of https://github.com/matrix-org/matrix-react-sdk into resizable-appsdrawer
 Conflicts:
	res/css/views/rooms/_AppsDrawer.scss
2020-08-20 10:26:35 +01:00
Michael Telatynski 828cfb7138 Add min-width to floating Jitsi
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2020-07-20 15:15:21 +01:00
Michael Telatynski 5e5620a6c2 Make widgets match the new 8px border-radius standard
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2020-07-13 21:59:46 +01:00
Travis Ralston 613b994f9d
Revert "Prevent PersistedElements overflowing scrolled areas" 2020-06-02 00:21:31 -06:00
Pauli Virtanen 735826015d Make AppsDrawer resize handle easier to grab 2020-04-30 20:35:36 +03:00
Pauli Virtanen e897e97fd6 Make AppsDrawer resizable by dragging its bottom border
Signed-off-by: Pauli Virtanen <pav@iki.fi>
2020-04-30 20:14:49 +03:00
Pauli Virtanen 2e7bd2e3f0 Use flexboxes in AppTile/AppDrawer CSS for automatic resizing
Using flexboxes removes the need for pixel constants, and the app
content now resizes to fill the tiles.

Signed-off-by: Pauli Virtanen <pav@iki.fi>
2020-04-30 20:14:48 +03:00
Pauli Virtanen d690d4bed2 Prevent PersistedElements overflowing scrolled areas
As the DOM element is not in reality contained inside "the parent",
it may overflow the area if the parent gets partially hidden by
scrolling etc.

To make the effect visually less annoying, emulate this by clipping to
the element wrapper. This is not a full general-purpose fix, but
improves the current situation.

Signed-off-by: Pauli Virtanen <pav@iki.fi>
2020-04-25 16:09:46 +03: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
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
Travis Ralston fd12eb28e7 Move many widget options to a context menu
Part of https://github.com/vector-im/riot-web/issues/11262
2019-11-20 19:17:42 -07:00
Travis Ralston 6b726a8e13 Implement the bulk of the new widget permission prompt design
Part 1 of https://github.com/vector-im/riot-web/issues/11262

This is all the visual changes - the actual wiring of the UI to the right places is for another PR (though this PR still works independently).

The help icon is known to be weird here - it's a bug in the svg we have. The tooltip also goes right instead of up because making the tooltip go up is not easy work for this PR - maybe a future one if we *really* want it to go up.
2019-11-15 14:26:16 -07:00
J. Ryan Stinnett 2d4264c39d Keep widget URL in permission screen to one line
This keeps the widget URL to one line max, so that the allow button will always
be visible. The full URL can be viewed by hovering.

Fixes https://github.com/vector-im/riot-web/issues/10402
2019-07-23 18:06:37 +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
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
Bruno Windels 92668628ec fix sticker layout 2019-02-12 16:55:37 +01:00
Bruno Windels 7ccc694eea minimal theming on app permission in widget 2019-02-01 23:24:56 +01:00
Bruno Windels e2ce12f5c1 wip 2019-02-01 23:15:14 +01:00
David Baker 4f8ece53b2 Fix CSS naming 2018-07-23 15:58:07 +01:00
David Baker 5adcd673ab Fix persisent apps being the wrong size 2018-07-23 15:08:17 +01:00
David Baker f868cd6699 Fix border around persisted widgets
The PersistedElement had zero height so the border ended up in the
wrong place. Add a wrapper to fix the height back.

Fixes https://github.com/vector-im/riot-web/issues/7030
Fixes https://github.com/vector-im/riot-web/issues/7029
2018-07-18 11:52:57 +01:00
David Baker e56feea9ec Put always-on-screen widgets in top left
always-on-screen widgets now appear in the top-left where the
call preview normally is if you're not in the room that they're in.

Fixes https://github.com/vector-im/riot-web/issues/7007
Based off https://github.com/matrix-org/matrix-react-sdk/pull/2053
2018-07-12 18:43:49 +01:00
Luke Barnard 770e2d400e Improve appearance of short-lived app loading spinner
by hiding it for 500ms - thereby only showing it if the loading is
taking a long time.
2018-05-09 17:28:41 +01:00
Matthew Hodgson 79d3cca6e9 move components' CSS to be in the same repo as their JS 2018-04-12 00:23:58 +01:00