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

Commit ada6d1a

Browse files
t3chguyt3chguy
committed
Iterate PR
Signed-off-by: Michael Telatynski <[email protected]>
1 parent b8080a7 commit ada6d1a

24 files changed

+270
-704
lines changed

‎res/css/_components.scss

-1
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,6 @@
5555
@import "./views/context_menus/_MessageContextMenu.scss";
5656
@import "./views/context_menus/_StatusMessageContextMenu.scss";
5757
@import "./views/context_menus/_TagTileContextMenu.scss";
58-
@import "./views/context_menus/_WidgetContextMenu.scss";
5958
@import "./views/dialogs/_AddressPickerDialog.scss";
6059
@import "./views/dialogs/_Analytics.scss";
6160
@import "./views/dialogs/_BugReportDialog.scss";

‎res/css/views/context_menus/_WidgetContextMenu.scss

-36
This file was deleted.

‎res/css/views/right_panel/_BaseCard.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -130,7 +130,7 @@ limitations under the License.
130130
}
131131

132132
&.mx_AccessibleButton_disabled {
133-
padding: 10px 12px;
133+
padding-right: 12px;
134134
&::after {
135135
content: unset;
136136
}

‎res/css/views/right_panel/_RoomSummaryCard.scss

+1-3
Original file line numberDiff line numberDiff line change
@@ -157,9 +157,7 @@ limitations under the License.
157157
}
158158

159159
.mx_RoomSummaryCard_Button {
160-
padding-left: 12px;
161-
padding-top: 6px;
162-
padding-bottom: 6px;
160+
padding: 6px 24px 6px 12px;
163161
color: $tertiary-fg-color;
164162
flex: 1;
165163

‎res/css/views/right_panel/_WidgetCard.scss

+25-24
Original file line numberDiff line numberDiff line change
@@ -24,34 +24,35 @@ limitations under the License.
2424
border: 0;
2525
}
2626

27-
&.mx_WidgetCard_noEdit {
28-
.mx_AccessibleButton_kind_secondary {
29-
margin: 0 12px;
27+
.mx_BaseCard_header {
28+
display: inline-flex;
3029

31-
&:first-child {
32-
// expand the Pin to room primary action
33-
flex-grow: 1;
34-
}
30+
& > h2 {
31+
margin-right: 0;
32+
flex-grow: 1;
3533
}
36-
}
37-
38-
.mx_WidgetCard_optionsButton {
39-
position: relative;
40-
height: 18px;
41-
width: 26px;
4234

43-
&::before {
44-
content: "";
45-
position: absolute;
46-
width: 20px;
35+
.mx_WidgetCard_optionsButton {
36+
position: relative;
37+
margin-right: 44px;
4738
height: 20px;
48-
top: 6px;
49-
left: 20px;
50-
mask-repeat: no-repeat;
51-
mask-position: center;
52-
mask-size: contain;
53-
mask-image: url('$(res)/img/element-icons/room/ellipsis.svg');
54-
background-color: $secondary-fg-color;
39+
width: 20px;
40+
min-width: 20px; // prevent crushing by the flexbox
41+
padding: 0;
42+
43+
&::before {
44+
content: "";
45+
position: absolute;
46+
width: 20px;
47+
height: 20px;
48+
top: 0;
49+
left: 4px;
50+
mask-repeat: no-repeat;
51+
mask-position: center;
52+
mask-size: contain;
53+
mask-image: url('$(res)/img/element-icons/room/ellipsis.svg');
54+
background-color: $secondary-fg-color;
55+
}
5556
}
5657
}
5758
}

‎res/css/views/rooms/_AppsDrawer.scss

+2-31
Original file line numberDiff line numberDiff line change
@@ -118,12 +118,6 @@ $MiniAppTileHeight: 200px;
118118
height: $MiniAppTileHeight;
119119
}
120120

121-
.mx_AppTile.mx_AppTile_minimised,
122-
.mx_AppTileFullWidth.mx_AppTile_minimised,
123-
.mx_AppTile_mini.mx_AppTile_minimised {
124-
height: 14px;
125-
}
126-
127121
.mx_AppTile .mx_AppTile_persistedWrapper,
128122
.mx_AppTileFullWidth .mx_AppTile_persistedWrapper,
129123
.mx_AppTile_mini .mx_AppTile_persistedWrapper {
@@ -143,11 +137,7 @@ $MiniAppTileHeight: 200px;
143137
flex-direction: row;
144138
align-items: center;
145139
justify-content: space-between;
146-
cursor: pointer;
147140
width: 100%;
148-
}
149-
150-
.mx_AppTileMenuBar_expanded {
151141
padding-bottom: 5px;
152142
}
153143

@@ -179,31 +169,12 @@ $MiniAppTileHeight: 200px;
179169
margin: 0 3px;
180170
}
181171

182-
.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_minimise {
183-
mask-image: url('$(res)/img/feather-customised/widget/minimise.svg');
184-
background-color: $accent-color;
185-
}
186-
187-
.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_maximise {
188-
mask-image: url('$(res)/img/feather-customised/widget/maximise.svg');
189-
background-color: $accent-color;
190-
}
191-
192-
.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_popout {
172+
.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_popout { // TODO replace icon
193173
mask-image: url('$(res)/img/feather-customised/widget/external-link.svg');
194174
}
195175

196176
.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_menu {
197-
mask-image: url('$(res)/img/icon_context.svg');
198-
}
199-
200-
.mx_AppTileMenuBarWidgetDelete {
201-
filter: none;
202-
}
203-
204-
.mx_AppTileMenuBarWidget:hover {
205-
border: 1px solid $primary-fg-color;
206-
border-radius: 2px;
177+
mask-image: url('$(res)/img/element-icons/room/ellipsis.svg');
207178
}
208179

209180
.mx_AppTileBody {

‎res/css/views/rooms/_RoomHeader.scss

+7
Original file line numberDiff line numberDiff line change
@@ -241,6 +241,13 @@ limitations under the License.
241241
width: 26px;
242242
}
243243

244+
.mx_RoomHeader_appsButton::before {
245+
mask-image: url('$(res)/img/element-icons/room/apps.svg');
246+
}
247+
.mx_RoomHeader_appsButton_highlight::before {
248+
background-color: $accent-color;
249+
}
250+
244251
.mx_RoomHeader_searchButton::before {
245252
mask-image: url('$(res)/img/element-icons/room/search-inset.svg');
246253
}

‎res/img/element-icons/room/apps.svg

+6
Loading

‎res/img/element-icons/room/integrations.svg

-3
This file was deleted.

‎res/img/icon_context.svg

-5
This file was deleted.

‎src/components/structures/RoomView.tsx

+31-2
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,8 @@ import RoomHeader from "../views/rooms/RoomHeader";
7171
import TintableSvg from "../views/elements/TintableSvg";
7272
import {XOR} from "../../@types/common";
7373
import { IThreepidInvite } from "../../stores/ThreepidInviteStore";
74+
import WidgetStore from "../../stores/WidgetStore";
75+
import {UPDATE_EVENT} from "../../stores/AsyncStore";
7476

7577
const DEBUG = false;
7678
let debuglog = function(msg: string) {};
@@ -180,6 +182,7 @@ export interface IState {
180182
e2eStatus?: E2EStatus;
181183
rejecting?: boolean;
182184
rejectError?: Error;
185+
hasPinnedWidgets: boolean;
183186
}
184187

185188
export default class RoomView extends React.Component<IProps, IState> {
@@ -231,6 +234,7 @@ export default class RoomView extends React.Component<IProps, IState> {
231234
canReply: false,
232235
useIRCLayout: SettingsStore.getValue("useIRCLayout"),
233236
matrixClientIsReady: this.context && this.context.isInitialSyncComplete(),
237+
hasPinnedWidgets: false,
234238
};
235239

236240
this.dispatcherRef = dis.register(this.onAction);
@@ -250,7 +254,9 @@ export default class RoomView extends React.Component<IProps, IState> {
250254
this.roomStoreToken = RoomViewStore.addListener(this.onRoomViewStoreUpdate);
251255
this.rightPanelStoreToken = RightPanelStore.getSharedInstance().addListener(this.onRightPanelStoreUpdate);
252256

253-
WidgetEchoStore.on('update', this.onWidgetEchoStoreUpdate);
257+
WidgetEchoStore.on(UPDATE_EVENT, this.onWidgetEchoStoreUpdate);
258+
WidgetStore.instance.on(UPDATE_EVENT, this.onWidgetStoreUpdate);
259+
254260
this.showReadReceiptsWatchRef = SettingsStore.watchSetting("showReadReceipts", null,
255261
this.onReadReceiptsChange);
256262
this.layoutWatcherRef = SettingsStore.watchSetting("useIRCLayout", null, this.onLayoutChange);
@@ -262,6 +268,18 @@ export default class RoomView extends React.Component<IProps, IState> {
262268
this.onRoomViewStoreUpdate(true);
263269
}
264270

271+
private onWidgetStoreUpdate = () => {
272+
if (this.state.room) {
273+
this.checkWidgets(this.state.room);
274+
}
275+
}
276+
277+
private checkWidgets = (room) => {
278+
this.setState({
279+
hasPinnedWidgets: WidgetStore.instance.getApps(room, true).length > 0,
280+
})
281+
};
282+
265283
private onReadReceiptsChange = () => {
266284
this.setState({
267285
showReadReceipts: SettingsStore.getValue("showReadReceipts", this.state.roomId),
@@ -584,7 +602,8 @@ export default class RoomView extends React.Component<IProps, IState> {
584602
this.rightPanelStoreToken.remove();
585603
}
586604

587-
WidgetEchoStore.removeListener('update', this.onWidgetEchoStoreUpdate);
605+
WidgetEchoStore.removeListener(UPDATE_EVENT, this.onWidgetEchoStoreUpdate);
606+
WidgetStore.instance.removeListener(UPDATE_EVENT, this.onWidgetStoreUpdate);
588607

589608
if (this.showReadReceiptsWatchRef) {
590609
SettingsStore.unwatchSetting(this.showReadReceiptsWatchRef);
@@ -828,6 +847,7 @@ export default class RoomView extends React.Component<IProps, IState> {
828847
this.calculateRecommendedVersion(room);
829848
this.updateE2EStatus(room);
830849
this.updatePermissions(room);
850+
this.checkWidgets(room);
831851
};
832852

833853
private async calculateRecommendedVersion(room: Room) {
@@ -1357,6 +1377,13 @@ export default class RoomView extends React.Component<IProps, IState> {
13571377
dis.fire(Action.FocusComposer);
13581378
};
13591379

1380+
private onAppsClick = () => {
1381+
dis.dispatch({
1382+
action: "appsDrawer", // TODO should this go into the RVS?
1383+
show: !this.state.showApps,
1384+
});
1385+
};
1386+
13601387
private onLeaveClick = () => {
13611388
dis.dispatch({
13621389
action: 'leave_room',
@@ -2060,6 +2087,8 @@ export default class RoomView extends React.Component<IProps, IState> {
20602087
onForgetClick={(myMembership === "leave") ? this.onForgetClick : null}
20612088
onLeaveClick={(myMembership === "join") ? this.onLeaveClick : null}
20622089
e2eStatus={this.state.e2eStatus}
2090+
onAppsClick={this.state.hasPinnedWidgets ? this.onAppsClick : null}
2091+
appsShown={this.state.showApps}
20632092
/>
20642093
<MainSplit panel={rightPanel} resizeNotifier={this.props.resizeNotifier}>
20652094
<div className={fadableSectionClasses}>

0 commit comments

Comments
 (0)