Merge pull request #5145 from matrix-org/travis/communities/proto/switcher

Communities v2 prototype: Tag panel selection changes

res/css/structures/_TagPanel.scss

@@ -76,12 +76,56 @@ limitations under the License.
     // opacity: 0.5;
     position: relative;
 }
+
+.mx_TagPanel .mx_TagTile.mx_TagTile_prototype {
+    padding: 3px;
+}
+
 .mx_TagPanel .mx_TagTile:focus,
 .mx_TagPanel .mx_TagTile:hover,
 .mx_TagPanel .mx_TagTile.mx_TagTile_selected {
     // opacity: 1;
 }
 
+.mx_TagPanel .mx_TagTile.mx_TagTile_selected_prototype {
+    background-color: $primary-bg-color;
+    border-radius: 6px;
+}
+
+.mx_TagTile_selected_prototype {
+    .mx_TagTile_homeIcon::before {
+        background-color: $primary-fg-color; // dark-on-light
+    }
+}
+
+.mx_TagTile:not(.mx_TagTile_selected_prototype) .mx_TagTile_homeIcon {
+    background-color: $icon-button-color; // XXX: Variable abuse
+    border-radius: 48px;
+
+    &::before {
+        background-color: $primary-bg-color; // light-on-grey
+    }
+}
+
+.mx_TagTile_homeIcon {
+    width: 32px;
+    height: 32px;
+    position: relative;
+
+    &::before {
+        mask-image: url('$(res)/img/element-icons/home.svg');
+        mask-position: center;
+        mask-repeat: no-repeat;
+        width: 21px;
+        height: 21px;
+        content: '';
+        display: inline-block;
+        position: absolute;
+        top: calc(50% - 10.5px);
+        left: calc(50% - 10.5px);
+    }
+}
+
 .mx_TagPanel .mx_TagTile_plus {
     margin-bottom: 12px;
     height: 32px;
@@ -116,10 +160,6 @@ limitations under the License.
     border-radius: 0 3px 3px 0;
 }
 
-.mx_TagPanel .mx_TagTile.mx_TagTile_large.mx_TagTile_selected::before {
-    left: -10px;
-}
-
 .mx_TagPanel .mx_TagTile.mx_AccessibleButton:focus {
     filter: none;
 }

res/img/element-icons/home.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.33301 14.9494V7.28325C2.33301 6.8921 2.50477 6.52067 2.80281 6.26733L8.0282 1.82575C8.58834 1.34963 9.411 1.34963 9.97115 1.82575L15.1965 6.26734C15.4946 6.52067 15.6663 6.89065 15.6663 7.28181V14.9756C15.6663 16.0899 14.7592 16.9891 13.6449 16.9792C11.3214 16.9585 7.43567 16.9341 4.38152 16.9659C3.25744 16.9776 2.33301 16.0735 2.33301 14.9494Z" fill="white"/>
+</svg>