From bcebef7e5631e98e6ad7df5b2f1e5c082dbd3bbb Mon Sep 17 00:00:00 2001
From: Travis Ralston <travpc@gmail.com>
Date: Tue, 16 Jun 2020 12:13:12 -0600
Subject: [PATCH] Add a globe icon to public rooms

For https://github.com/vector-im/riot-web/issues/14039
---
 res/css/views/rooms/_RoomTile2.scss         | 25 +++++++++++++++++++++
 res/img/globe.svg                           |  6 +++++
 src/components/views/rooms/RoomSublist2.tsx |  1 +
 src/components/views/rooms/RoomTile2.tsx    | 13 +++++++++++
 4 files changed, 45 insertions(+)
 create mode 100644 res/img/globe.svg

diff --git a/res/css/views/rooms/_RoomTile2.scss b/res/css/views/rooms/_RoomTile2.scss
index f74d0ff5a4..2e9fe4a31e 100644
--- a/res/css/views/rooms/_RoomTile2.scss
+++ b/res/css/views/rooms/_RoomTile2.scss
@@ -32,6 +32,31 @@ limitations under the License.
 
     .mx_RoomTile2_avatarContainer {
         margin-right: 8px;
+        position: relative;
+
+        .mx_RoomTile2_publicRoom {
+            width: 12px;
+            height: 12px;
+            border-radius: 12px;
+            background-color: $roomlist2-bg-color; // to match the room list itself
+            position: absolute;
+            bottom: 0;
+            right: 0;
+
+            &::before {
+                content: '';
+                width: 8px;
+                height: 8px;
+                top: 2px;
+                left: 2px;
+                position: absolute;
+                mask-position: center;
+                mask-size: contain;
+                mask-repeat: no-repeat;
+                background: $primary-fg-color;
+                mask-image: url('$(res)/img/globe.svg');
+            }
+        }
     }
 
     .mx_RoomTile2_nameContainer {
diff --git a/res/img/globe.svg b/res/img/globe.svg
new file mode 100644
index 0000000000..cc22bc6e66
--- /dev/null
+++ b/res/img/globe.svg
@@ -0,0 +1,6 @@
+<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="icon">
+<path id="sea" fill-rule="evenodd" clip-rule="evenodd" d="M4 8C6.20914 8 8 6.20914 8 4C8 1.79086 6.20914 0 4 0C1.79086 0 0 1.79086 0 4C0 6.20914 1.79086 8 4 8ZM4.6693 2.43613C4.8306 2.64728 4.94732 2.80007 4.45289 2.80007C4.14732 2.80007 3.84175 2.74171 3.58076 2.69186C3.15847 2.61121 2.85289 2.55285 2.85289 2.80007C2.85289 3.00007 3.65289 3.40007 4.45289 3.80007C5.25289 4.20007 6.05289 4.60007 6.05289 4.80007C6.05289 5.20007 6.05289 7.60007 5.25289 7.20007C4.45289 6.80007 2.45289 5.20007 2.45289 4.80007C2.45289 4.65277 2.18168 4.39698 1.85897 4.09263C1.30535 3.57051 0.600192 2.90547 0.852893 2.40007C1.25289 1.60007 2.85289 6.51479e-05 5.25289 0.800065C4.98623 1.06673 4.45289 1.68007 4.45289 2.00007C4.45289 2.15285 4.56961 2.30564 4.6693 2.43613Z" fill="#2E2F32"/>
+<path id="earth" d="M4.45294 2.80007C5.25294 2.80007 4.45294 2.40007 4.45294 2.00007C4.45294 1.68007 4.98627 1.06673 5.25294 0.800065C2.85294 6.51479e-05 1.25294 1.60007 0.852941 2.40007C0.452941 3.20007 2.45294 4.40007 2.45294 4.80007C2.45294 5.20007 4.45294 6.80007 5.25294 7.20007C6.05294 7.60007 6.05294 5.20007 6.05294 4.80007C6.05294 4.40007 2.85294 3.20007 2.85294 2.80007C2.85294 2.40007 3.65294 2.80007 4.45294 2.80007Z" />
+</g>
+</svg>
diff --git a/src/components/views/rooms/RoomSublist2.tsx b/src/components/views/rooms/RoomSublist2.tsx
index 9f8b8579c3..f03cb3ecbd 100644
--- a/src/components/views/rooms/RoomSublist2.tsx
+++ b/src/components/views/rooms/RoomSublist2.tsx
@@ -145,6 +145,7 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
                         key={`room-${room.roomId}`}
                         showMessagePreview={this.props.layout.showPreviews}
                         isMinimized={this.props.isMinimized}
+                        tag={this.props.layout.tagId}
                     />
                 );
             }
diff --git a/src/components/views/rooms/RoomTile2.tsx b/src/components/views/rooms/RoomTile2.tsx
index 10845d3840..f0d99eed99 100644
--- a/src/components/views/rooms/RoomTile2.tsx
+++ b/src/components/views/rooms/RoomTile2.tsx
@@ -44,6 +44,7 @@ interface IProps {
     room: Room;
     showMessagePreview: boolean;
     isMinimized: boolean;
+    tag: TagID;
 
     // TODO: Allow falsifying counts (for invites and stuff)
     // TODO: Transparency? Was this ever used?
@@ -85,6 +86,12 @@ export default class RoomTile2 extends React.Component<IProps, IState> {
         ActiveRoomObserver.addListener(this.props.room.roomId, this.onActiveRoomUpdate);
     }
 
+    private get isPublicRoom(): boolean {
+        const joinRules = this.props.room.currentState.getStateEvents("m.room.join_rules", "");
+        const joinRule = joinRules && joinRules.getContent().join_rule;
+        return joinRule === 'public';
+    }
+
     public componentWillUnmount() {
         if (this.props.room) {
             ActiveRoomObserver.removeListener(this.props.room.roomId, this.onActiveRoomUpdate);
@@ -287,6 +294,11 @@ export default class RoomTile2 extends React.Component<IProps, IState> {
         );
         if (this.props.isMinimized) nameContainer = null;
 
+        let globe = null;
+        if (this.isPublicRoom && this.props.tag !== DefaultTagID.DM) {
+            globe = <span className='mx_RoomTile2_publicRoom' />; // sizing and such set by CSS
+        }
+
         const avatarSize = 32;
         return (
             <React.Fragment>
@@ -304,6 +316,7 @@ export default class RoomTile2 extends React.Component<IProps, IState> {
                         >
                             <div className="mx_RoomTile2_avatarContainer">
                                 <RoomAvatar room={this.props.room} width={avatarSize} height={avatarSize}/>
+                                {globe}
                             </div>
                             {nameContainer}
                             <div className="mx_RoomTile2_badgeContainer">