Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Add maximise widget functionality #7098

Merged
merged 39 commits into from
Nov 16, 2021
Merged

Add maximise widget functionality #7098

Show file tree
Hide file tree
Changes from 36 commits
Commits
Show all changes
39 commits
Select commit Hold shift + click to select a range
0a6c20c
add maximise widget functionality
toger5 Nov 8, 2021
a9a2c41
fix linter issues
toger5 Nov 8, 2021
cb4ae5f
fix style lint issues
toger5 Nov 8, 2021
e68c8f1
Update src/components/structures/RoomView.tsx
toger5 Nov 9, 2021
8608c59
fix typo
toger5 Nov 9, 2021
bb543a2
typo
toger5 Nov 9, 2021
4cc316d
Remove caps "AND "
toger5 Nov 10, 2021
4a3b48d
fix spelling
toger5 Nov 10, 2021
5d14783
improove readibility for continue in for
toger5 Nov 10, 2021
74f9b93
review fixes
toger5 Nov 10, 2021
cfbdf40
reuse already added icons
toger5 Nov 10, 2021
ffb0af8
more container comment fixes
toger5 Nov 10, 2021
1155ae9
fix app options button
toger5 Nov 10, 2021
cd9d193
remove error message
toger5 Nov 10, 2021
a76e7ec
fix issue not beeing able to maximise
toger5 Nov 10, 2021
04e0b42
remove maxmimisedDrawer
toger5 Nov 10, 2021
21b9549
fix centering and overflow of appDrawer
toger5 Nov 10, 2021
38f8cfe
fix hover label "Minimise widget"->"Close"
toger5 Nov 11, 2021
0831b60
review fixes
toger5 Nov 11, 2021
fdf7b9f
add jest test for WidgetLayoutStore
toger5 Nov 12, 2021
afef1d0
Merge branch 'develop' into toger5/maximised_widgets
toger5 Nov 12, 2021
b06490e
change accent-color
toger5 Nov 12, 2021
b3c6526
another try
toger5 Nov 12, 2021
03ec030
Merge branch 'develop' into toger5/maximised_widgets
toger5 Nov 12, 2021
a23931b
I think I have it now...(accent related commit)
toger5 Nov 12, 2021
0bcb881
fix room state always overriding user settings
toger5 Nov 15, 2021
b1ef33b
fix container border width
toger5 Nov 15, 2021
ba4d09c
change icons, change border width
toger5 Nov 15, 2021
26d5cd1
Merge branch 'toger5/widget_container_border_width' into toger5/maxim…
toger5 Nov 15, 2021
2a8bba6
use $container-border-width where needed
toger5 Nov 15, 2021
6f3a1c0
fix style lint
toger5 Nov 15, 2021
fa35b44
add !important for widget card AppTileFullWidth
toger5 Nov 15, 2021
7f0c5d6
fix bug where a widget can be open twice
toger5 Nov 15, 2021
a8d2e5e
review fixes
toger5 Nov 15, 2021
3743b74
fix awkward ternary stack
toger5 Nov 15, 2021
c6e9c82
Merge branch 'develop' into toger5/maximised_widgets
toger5 Nov 15, 2021
704ddc8
remove the now deprecated collapse button url after merge
toger5 Nov 15, 2021
a2aa0dc
fix icons
toger5 Nov 16, 2021
fb02d81
fix icons 2
toger5 Nov 16, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions res/css/_common.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,8 @@ $MessageTimestamp_width_hover: calc($MessageTimestamp_width - 2 * $selected-mess
$slider-dot-size: 1em;
$slider-selection-dot-size: 2.4em;

$container-border-width: 8px;

:root {
font-size: 10px;

Expand Down
2 changes: 1 addition & 1 deletion res/css/structures/_LeftPanelWidget.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,7 +134,7 @@ limitations under the License.
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
mask-image: url('$(res)/img/feather-customised/maximise.svg');
mask-image: url("$(res)/img/element-icons/maximise-expand.svg");
background: $muted-fg-color;
}
}
Expand Down
5 changes: 2 additions & 3 deletions res/css/structures/_MainSplit.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,8 @@ limitations under the License.
}

.mx_MainSplit > .mx_RightPanel_ResizeWrapper {
padding: 5px;
// margin left to not allow the handle to not encroach on the space for the scrollbar
margin-left: 8px;
// no padding on the left. The spacing is taken care of by the main split content.
padding: 5px 5px 5px 0px;
height: calc(100vh - 51px); // height of .mx_RoomHeader.light-panel

&:hover .mx_RightPanel_ResizeHandle {
Expand Down
2 changes: 1 addition & 1 deletion res/css/structures/_RightPanel.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ limitations under the License.
display: flex;
flex-direction: column;
border-radius: 8px;
padding: 8px 0;
padding: $container-border-width 0;
box-sizing: border-box;
height: 100%;
contain: strict;
Expand Down
4 changes: 2 additions & 2 deletions res/css/views/dialogs/_HostSignupDialog.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ limitations under the License.
}

.mx_HostSignup_maximize_button {
mask: url('$(res)/img/feather-customised/maximise.svg');
mask: url("$(res)/img/element-icons/maximise-expand.svg");
mask-repeat: no-repeat;
mask-position: center;
mask-size: cover;
Expand All @@ -92,7 +92,7 @@ limitations under the License.
}

.mx_HostSignup_minimize_button {
mask: url('$(res)/img/feather-customised/minimise.svg');
mask: url("$(res)/img/element-icons/minimise-collapse.svg");
mask-repeat: no-repeat;
mask-position: center;
mask-size: cover;
Expand Down
5 changes: 0 additions & 5 deletions res/css/views/elements/_ResizeHandle.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,11 +32,6 @@ limitations under the License.
cursor: row-resize;
}

.mx_MatrixChat > .mx_ResizeHandle.mx_ResizeHandle_horizontal {
margin: 0 -10px 0 0;
padding: 0 8px 0 0;
}

.mx_ResizeHandle.mx_ResizeHandle_horizontal > div {
width: 1px;
height: 100%;
Expand Down
6 changes: 4 additions & 2 deletions res/css/views/messages/_ViewSourceEvent.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,13 +35,15 @@ limitations under the License.
mask-size: auto 12px;
visibility: hidden;
background-color: $accent;
mask-image: url('$(res)/img/feather-customised/maximise.svg');
mask-image: url("$(res)/img/element-icons/maximise-expand.svg");
}

&.mx_ViewSourceEvent_expanded .mx_ViewSourceEvent_toggle {
mask-position: 0 bottom;
margin-bottom: 7px;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For the updated icon, I believe this should be changed to 5px to ensure the centre of the icon is always under the cursor when toggling states.

Suggested change
margin-bottom: 7px;
margin-bottom: 5px;

mask-image: url('$(res)/img/feather-customised/minimise.svg');
width: 10px;
height: 10px;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These don't seem correct to me... The height is forcing the icon to appear at the top of the expanded event instead of the bottom, and the width seems too small. I believe they can just be removed, but please test yourself as well.

To test this feature, enable "Show hidden events in timeline" in labs and look for a hidden event like a reaction. It will have an expand / collapse icon. When toggling between expand and collapse, the icon should always be under your cursor (bottom right of the event when expanded).

mask-image: url("$(res)/img/element-icons/minimise-collapse.svg");
}
}

Expand Down
20 changes: 20 additions & 0 deletions res/css/views/right_panel/_RoomSummaryCard.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,6 +133,8 @@ limitations under the License.
}

.mx_RoomSummaryCard_app_pinToggle,
.mx_RoomSummaryCard_app_maximise,
.mx_RoomSummaryCard_app_minimise,
.mx_RoomSummaryCard_app_options {
position: absolute;
top: 0;
Expand Down Expand Up @@ -174,6 +176,21 @@ limitations under the License.
mask-image: url('$(res)/img/element-icons/room/pin-upright.svg');
}
}
.mx_RoomSummaryCard_app_maximise {
right: 48px;
&::before {
mask-size: 14px;
mask-image: url("$(res)/img/element-icons/maximise-expand.svg");
}
}
.mx_RoomSummaryCard_app_minimise {
right: 48px;
&::before {
mask-size: 14px;
mask-image: url("$(res)/img/element-icons/minimise-collapse.svg");
background-color: $accent;
}
}

.mx_RoomSummaryCard_app_options {
right: 48px;
Expand All @@ -182,6 +199,9 @@ limitations under the License.
&::before {
mask-image: url('$(res)/img/element-icons/room/ellipsis.svg');
}
&.mx_RoomSummaryCard_maximised_widget {
right: 72px;
}
}

&.mx_RoomSummaryCard_Button_pinned {
Expand Down
2 changes: 2 additions & 0 deletions res/css/views/right_panel/_WidgetCard.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@ limitations under the License.

.mx_AppTileFullWidth {
max-width: unset;
width: auto !important;
margin: 0px $container-border-width 0px $container-border-width;
height: 100%;
border: 0;
}
Expand Down
38 changes: 26 additions & 12 deletions res/css/views/rooms/_AppsDrawer.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,12 @@ limitations under the License.
$MiniAppTileHeight: 200px;

.mx_AppsDrawer {
margin: 5px 5px 5px 18px;
margin: 5px;
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
flex-grow: 1;

.mx_AppsContainer_resizerHandleContainer {
width: 100%;
Expand Down Expand Up @@ -100,11 +101,11 @@ $MiniAppTileHeight: 200px;
min-height: 0;

.mx_AppTile:first-of-type {
border-left-width: 8px;
border-left-width: $container-border-width;
border-radius: 10px 0 0 10px;
}
.mx_AppTile:last-of-type {
border-right-width: 8px;
border-right-width: $container-border-width;
border-radius: 0 10px 10px 0;
}

Expand Down Expand Up @@ -142,7 +143,7 @@ $MinWidth: 240px;
.mx_AppTile {
width: 50%;
min-width: $MinWidth;
border: 8px solid $widget-menu-bar-bg-color;
border: $container-border-width solid $widget-menu-bar-bg-color;
border-left-width: 5px;
border-right-width: 5px;
display: flex;
Expand All @@ -155,7 +156,7 @@ $MinWidth: 240px;
width: 100% !important; // to override the inline style set by the resizer
margin: 0;
padding: 0;
border: 5px solid $widget-menu-bar-bg-color;
border: $container-border-width solid $widget-menu-bar-bg-color;
border-radius: 8px;
display: flex;
flex-direction: column;
Expand Down Expand Up @@ -224,15 +225,28 @@ $MinWidth: 240px;
mask-position: 0 center;
mask-size: auto 12px;
background-color: $topleftmenu-color;
margin: 0 3px;
}
margin: 0 5px;

.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_popout {
mask-image: url('$(res)/img/feather-customised/widget/external-link.svg');
}
&.mx_AppTileMenuBar_iconButton_minWidget {
width: 10px;
height: 12px;
mask-size: auto 10px;
mask-image: url("$(res)/img/element-icons/minimise-collapse.svg");
}

&.mx_AppTileMenuBar_iconButton_maxWidget {
width: 11px;
height: 11px;
mask-image: url("$(res)/img/element-icons/maximise-expand.svg");
}

&.mx_AppTileMenuBar_iconButton_popout {
mask-image: url('$(res)/img/feather-customised/widget/external-link.svg');
}

.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_menu {
mask-image: url('$(res)/img/element-icons/room/ellipsis.svg');
&.mx_AppTileMenuBar_iconButton_menu {
mask-image: url('$(res)/img/element-icons/room/ellipsis.svg');
}
}

.mx_AppTileBody {
Expand Down
4 changes: 2 additions & 2 deletions res/css/views/rooms/_EventTile.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -546,13 +546,13 @@ $left-gutter: 64px;
mask-size: 75%;
mask-position: center;
mask-repeat: no-repeat;
mask-image: url($collapse-button-url);
mask-image: url("$(res)/img/element-icons/minimise-collapse.svg");
}
.mx_EventTile_expandButton {
mask-size: 75%;
mask-position: center;
mask-repeat: no-repeat;
mask-image: url($expand-button-url);
mask-image: url("$(res)/img/element-icons/maximise-expand.svg");
}

.mx_EventTile_body .mx_EventTile_pre_container:focus-within .mx_EventTile_copyButton,
Expand Down
3 changes: 3 additions & 0 deletions res/img/element-icons/maximise-expand.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions res/img/element-icons/minimise-collapse.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
63 changes: 0 additions & 63 deletions res/img/feather-customised/maximise.svg
View file
Open in desktop

This file was deleted.

65 changes: 0 additions & 65 deletions res/img/feather-customised/minimise.svg
View file
Open in desktop

This file was deleted.

2 changes: 0 additions & 2 deletions res/themes/legacy-light/css/_legacy-light.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -213,8 +213,6 @@ $event-highlight-bg-color: $yellow-background;
$event-timestamp-color: #acacac;

$copy-button-url: "$(res)/img/feather-customised/clipboard.svg";
$collapse-button-url: "$(res)/img/feather-customised/minimise.svg";
$expand-button-url: "$(res)/img/feather-customised/maximise.svg";

// e2e
$e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent
Expand Down
Loading