Iterate PR

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
matrix-org · Oct 9, 2020 · ada6d1a · ada6d1a
1 parent b8080a7
commit ada6d1a
Show file tree

Hide file tree

Showing 24 changed files with 270 additions and 704 deletions.
diff --git a/res/css/_components.scss b/res/css/_components.scss
@@ -55,7 +55,6 @@
 @import "./views/context_menus/_MessageContextMenu.scss";
 @import "./views/context_menus/_StatusMessageContextMenu.scss";
 @import "./views/context_menus/_TagTileContextMenu.scss";
-@import "./views/context_menus/_WidgetContextMenu.scss";
 @import "./views/dialogs/_AddressPickerDialog.scss";
 @import "./views/dialogs/_Analytics.scss";
 @import "./views/dialogs/_BugReportDialog.scss";

diff --git a/res/css/views/context_menus/_WidgetContextMenu.scss b/res/css/views/context_menus/_WidgetContextMenu.scss
diff --git a/res/css/views/right_panel/_BaseCard.scss b/res/css/views/right_panel/_BaseCard.scss
@@ -130,7 +130,7 @@ limitations under the License.
             }
 
             &.mx_AccessibleButton_disabled {
-                padding: 10px 12px;
+                padding-right: 12px;
                 &::after {
                     content: unset;
                 }

diff --git a/res/css/views/right_panel/_RoomSummaryCard.scss b/res/css/views/right_panel/_RoomSummaryCard.scss
@@ -157,9 +157,7 @@ limitations under the License.
         }
 
         .mx_RoomSummaryCard_Button {
-            padding-left: 12px;
-            padding-top: 6px;
-            padding-bottom: 6px;
+            padding: 6px 24px 6px 12px;
             color: $tertiary-fg-color;
             flex: 1;
 

diff --git a/res/css/views/right_panel/_WidgetCard.scss b/res/css/views/right_panel/_WidgetCard.scss
@@ -24,34 +24,35 @@ limitations under the License.
         border: 0;
     }
 
-    &.mx_WidgetCard_noEdit {
-        .mx_AccessibleButton_kind_secondary {
-            margin: 0 12px;
+    .mx_BaseCard_header {
+        display: inline-flex;
 
-            &:first-child {
-                // expand the Pin to room primary action
-                flex-grow: 1;
-            }
+        & > h2 {
+            margin-right: 0;
+            flex-grow: 1;
         }
-    }
-
-    .mx_WidgetCard_optionsButton {
-        position: relative;
-        height: 18px;
-        width: 26px;
 
-        &::before {
-            content: "";
-            position: absolute;
-            width: 20px;
+        .mx_WidgetCard_optionsButton {
+            position: relative;
+            margin-right: 44px;
             height: 20px;
-            top: 6px;
-            left: 20px;
-            mask-repeat: no-repeat;
-            mask-position: center;
-            mask-size: contain;
-            mask-image: url('$(res)/img/element-icons/room/ellipsis.svg');
-            background-color: $secondary-fg-color;
+            width: 20px;
+            min-width: 20px; // prevent crushing by the flexbox
+            padding: 0;
+
+            &::before {
+                content: "";
+                position: absolute;
+                width: 20px;
+                height: 20px;
+                top: 0;
+                left: 4px;
+                mask-repeat: no-repeat;
+                mask-position: center;
+                mask-size: contain;
+                mask-image: url('$(res)/img/element-icons/room/ellipsis.svg');
+                background-color: $secondary-fg-color;
+            }
         }
     }
 }

diff --git a/res/css/views/rooms/_AppsDrawer.scss b/res/css/views/rooms/_AppsDrawer.scss
@@ -118,12 +118,6 @@ $MiniAppTileHeight: 200px;
     height: $MiniAppTileHeight;
 }
 
-.mx_AppTile.mx_AppTile_minimised,
-.mx_AppTileFullWidth.mx_AppTile_minimised,
-.mx_AppTile_mini.mx_AppTile_minimised {
-    height: 14px;
-}
-
 .mx_AppTile .mx_AppTile_persistedWrapper,
 .mx_AppTileFullWidth .mx_AppTile_persistedWrapper,
 .mx_AppTile_mini .mx_AppTile_persistedWrapper {
@@ -143,11 +137,7 @@ $MiniAppTileHeight: 200px;
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
-    cursor: pointer;
     width: 100%;
-}
-
-.mx_AppTileMenuBar_expanded {
     padding-bottom: 5px;
 }
 
@@ -179,31 +169,12 @@ $MiniAppTileHeight: 200px;
     margin: 0 3px;
 }
 
-.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_minimise {
-    mask-image: url('$(res)/img/feather-customised/widget/minimise.svg');
-    background-color: $accent-color;
-}
-
-.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_maximise {
-    mask-image: url('$(res)/img/feather-customised/widget/maximise.svg');
-    background-color: $accent-color;
-}
-
-.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_popout {
+.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_popout { // TODO replace icon
     mask-image: url('$(res)/img/feather-customised/widget/external-link.svg');
 }
 
 .mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_menu {
-    mask-image: url('$(res)/img/icon_context.svg');
-}
-
-.mx_AppTileMenuBarWidgetDelete {
-    filter: none;
-}
-
-.mx_AppTileMenuBarWidget:hover {
-    border: 1px solid $primary-fg-color;
-    border-radius: 2px;
+    mask-image: url('$(res)/img/element-icons/room/ellipsis.svg');
 }
 
 .mx_AppTileBody {

diff --git a/res/css/views/rooms/_RoomHeader.scss b/res/css/views/rooms/_RoomHeader.scss
@@ -241,6 +241,13 @@ limitations under the License.
     width: 26px;
 }
 
+.mx_RoomHeader_appsButton::before {
+    mask-image: url('$(res)/img/element-icons/room/apps.svg');
+}
+.mx_RoomHeader_appsButton_highlight::before {
+    background-color: $accent-color;
+}
+
 .mx_RoomHeader_searchButton::before {
     mask-image: url('$(res)/img/element-icons/room/search-inset.svg');
 }

diff --git a/res/img/element-icons/room/apps.svg b/res/img/element-icons/room/apps.svg
diff --git a/res/img/element-icons/room/integrations.svg b/res/img/element-icons/room/integrations.svg
diff --git a/res/img/icon_context.svg b/res/img/icon_context.svg
diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx
@@ -71,6 +71,8 @@ import RoomHeader from "../views/rooms/RoomHeader";
 import TintableSvg from "../views/elements/TintableSvg";
 import {XOR} from "../../@types/common";
 import { IThreepidInvite } from "../../stores/ThreepidInviteStore";
+import WidgetStore from "../../stores/WidgetStore";
+import {UPDATE_EVENT} from "../../stores/AsyncStore";
 
 const DEBUG = false;
 let debuglog = function(msg: string) {};
@@ -180,6 +182,7 @@ export interface IState {
     e2eStatus?: E2EStatus;
     rejecting?: boolean;
     rejectError?: Error;
+    hasPinnedWidgets: boolean;
 }
 
 export default class RoomView extends React.Component<IProps, IState> {
@@ -231,6 +234,7 @@ export default class RoomView extends React.Component<IProps, IState> {
             canReply: false,
             useIRCLayout: SettingsStore.getValue("useIRCLayout"),
             matrixClientIsReady: this.context && this.context.isInitialSyncComplete(),
+            hasPinnedWidgets: false,
         };
 
         this.dispatcherRef = dis.register(this.onAction);
@@ -250,7 +254,9 @@ export default class RoomView extends React.Component<IProps, IState> {
         this.roomStoreToken = RoomViewStore.addListener(this.onRoomViewStoreUpdate);
         this.rightPanelStoreToken = RightPanelStore.getSharedInstance().addListener(this.onRightPanelStoreUpdate);
 
-        WidgetEchoStore.on('update', this.onWidgetEchoStoreUpdate);
+        WidgetEchoStore.on(UPDATE_EVENT, this.onWidgetEchoStoreUpdate);
+        WidgetStore.instance.on(UPDATE_EVENT, this.onWidgetStoreUpdate);
+
         this.showReadReceiptsWatchRef = SettingsStore.watchSetting("showReadReceipts", null,
             this.onReadReceiptsChange);
         this.layoutWatcherRef = SettingsStore.watchSetting("useIRCLayout", null, this.onLayoutChange);
@@ -262,6 +268,18 @@ export default class RoomView extends React.Component<IProps, IState> {
         this.onRoomViewStoreUpdate(true);
     }
 
+    private onWidgetStoreUpdate = () => {
+        if (this.state.room) {
+            this.checkWidgets(this.state.room);
+        }
+    }
+
+    private checkWidgets = (room) => {
+        this.setState({
+            hasPinnedWidgets: WidgetStore.instance.getApps(room, true).length > 0,
+        })
+    };
+
     private onReadReceiptsChange = () => {
         this.setState({
             showReadReceipts: SettingsStore.getValue("showReadReceipts", this.state.roomId),
@@ -584,7 +602,8 @@ export default class RoomView extends React.Component<IProps, IState> {
             this.rightPanelStoreToken.remove();
         }
 
-        WidgetEchoStore.removeListener('update', this.onWidgetEchoStoreUpdate);
+        WidgetEchoStore.removeListener(UPDATE_EVENT, this.onWidgetEchoStoreUpdate);
+        WidgetStore.instance.removeListener(UPDATE_EVENT, this.onWidgetStoreUpdate);
 
         if (this.showReadReceiptsWatchRef) {
             SettingsStore.unwatchSetting(this.showReadReceiptsWatchRef);
@@ -828,6 +847,7 @@ export default class RoomView extends React.Component<IProps, IState> {
         this.calculateRecommendedVersion(room);
         this.updateE2EStatus(room);
         this.updatePermissions(room);
+        this.checkWidgets(room);
     };
 
     private async calculateRecommendedVersion(room: Room) {
@@ -1357,6 +1377,13 @@ export default class RoomView extends React.Component<IProps, IState> {
         dis.fire(Action.FocusComposer);
     };
 
+    private onAppsClick = () => {
+        dis.dispatch({
+            action: "appsDrawer", // TODO should this go into the RVS?
+            show: !this.state.showApps,
+        });
+    };
+
     private onLeaveClick = () => {
         dis.dispatch({
             action: 'leave_room',
@@ -2060,6 +2087,8 @@ export default class RoomView extends React.Component<IProps, IState> {
                             onForgetClick={(myMembership === "leave") ? this.onForgetClick : null}
                             onLeaveClick={(myMembership === "join") ? this.onLeaveClick : null}
                             e2eStatus={this.state.e2eStatus}
+                            onAppsClick={this.state.hasPinnedWidgets ? this.onAppsClick : null}
+                            appsShown={this.state.showApps}
                         />
                         <MainSplit panel={rightPanel} resizeNotifier={this.props.resizeNotifier}>
                             <div className={fadableSectionClasses}>