Add decoration to space hierarchy for tiles which have already been j… (

#6969)
matrix-org · Oct 25, 2021 · ead2a51 · ead2a51
1 parent fabbf6c
commit ead2a51
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 2 deletions.
diff --git a/res/css/structures/_SpaceHierarchy.scss b/res/css/structures/_SpaceHierarchy.scss
@@ -203,7 +203,8 @@ limitations under the License.
             grid-row: 1;
             grid-column: 2;
 
-            .mx_InfoTooltip {
+            .mx_InfoTooltip,
+            .mx_SpaceHierarchy_roomTile_joined {
                 display: inline;
                 margin-left: 12px;
                 color: $tertiary-content;
@@ -222,6 +223,25 @@ limitations under the License.
                     }
                 }
             }
+
+            .mx_SpaceHierarchy_roomTile_joined {
+                position: relative;
+                padding-left: 16px;
+
+                &::before {
+                    content: '';
+                    width: 20px;
+                    height: 20px;
+                    top: -2px;
+                    left: -4px;
+                    position: absolute;
+                    mask-position: center;
+                    mask-size: contain;
+                    mask-repeat: no-repeat;
+                    background-color: $accent-color;
+                    mask-image: url('$(res)/img/element-icons/roomlist/checkmark.svg');
+                }
+            }
         }
 
         .mx_SpaceHierarchy_roomTile_info {

diff --git a/src/components/structures/SpaceHierarchy.tsx b/src/components/structures/SpaceHierarchy.tsx
@@ -172,8 +172,15 @@ const Tile: React.FC<ITileProps> = ({
         description += " · " + topic;
     }
 
+    let joinedSection;
+    if (joinedRoom) {
+        joinedSection = <div className="mx_SpaceHierarchy_roomTile_joined">
+            { _t("Joined") }
+        </div>;
+    }
+
     let suggestedSection;
-    if (suggested) {
+    if (suggested && (!joinedRoom || hasPermissions)) {
         suggestedSection = <InfoTooltip tooltip={_t("This room is suggested as a good one to join")}>
             { _t("Suggested") }
         </InfoTooltip>;
@@ -183,6 +190,7 @@ const Tile: React.FC<ITileProps> = ({
         { avatar }
         <div className="mx_SpaceHierarchy_roomTile_name">
             { name }
+            { joinedSection }
             { suggestedSection }
         </div>
 

diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
@@ -2927,6 +2927,7 @@
     "You have %(count)s unread notifications in a prior version of this room.|other": "You have %(count)s unread notifications in a prior version of this room.",
     "You have %(count)s unread notifications in a prior version of this room.|one": "You have %(count)s unread notification in a prior version of this room.",
     "You don't have permission": "You don't have permission",
+    "Joined": "Joined",
     "This room is suggested as a good one to join": "This room is suggested as a good one to join",
     "Suggested": "Suggested",
     "Select a room below first": "Select a room below first",