From 9c86a655ca9c9a76b73f6eddb15e619b51400ea0 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Wed, 27 Sep 2017 17:46:53 +0100
Subject: [PATCH 1/2] Add button to get to MyGroups

---
 src/components/structures/BottomLeftMenu.js   |   2 +
 .../structures/_MyGroups.scss                 |  10 ++
 src/skins/vector/img/icons-groups.svg         | 127 ++++++++++++++++++
 3 files changed, 139 insertions(+)
 create mode 100644 src/skins/vector/img/icons-groups.svg

diff --git a/src/components/structures/BottomLeftMenu.js b/src/components/structures/BottomLeftMenu.js
index eacc500a..89a5f454 100644
--- a/src/components/structures/BottomLeftMenu.js
+++ b/src/components/structures/BottomLeftMenu.js
@@ -167,6 +167,7 @@ module.exports = React.createClass({
         const StartChatButton = sdk.getComponent('elements.StartChatButton');
         const RoomDirectoryButton = sdk.getComponent('elements.RoomDirectoryButton');
         const CreateRoomButton = sdk.getComponent('elements.CreateRoomButton');
+        const GroupsButton = sdk.getComponent('elements.GroupsButton');
         const SettingsButton = sdk.getComponent('elements.SettingsButton');
 
         return (
@@ -182,6 +183,7 @@ module.exports = React.createClass({
                     <div ref={this._collectCreateRoomButton}>
                         <CreateRoomButton tooltip={true} />
                     </div>
+                    <GroupsButton tooltip={true} />
                     <span className="mx_BottomLeftMenu_settings">
                         <SettingsButton tooltip={true} />
                     </span>
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_MyGroups.scss b/src/skins/vector/css/matrix-react-sdk/structures/_MyGroups.scss
index 8de7b20f..25ab3ddc 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/_MyGroups.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_MyGroups.scss
@@ -14,6 +14,16 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+.mx_MyGroups {
+    max-width: 960px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.mx_MyGroups .mx_RoomHeader_simpleHeader {
+    margin-left: 0px;
+}
+
 .mx_MyGroups_joinCreateBox {
     display: table;
     margin-bottom: 30px;
diff --git a/src/skins/vector/img/icons-groups.svg b/src/skins/vector/img/icons-groups.svg
new file mode 100644
index 00000000..35ced645
--- /dev/null
+++ b/src/skins/vector/img/icons-groups.svg
@@ -0,0 +1,127 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="25px"
+   height="25px"
+   viewBox="0 0 25 25"
+   version="1.1"
+   id="svg4196"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="icons-room.svg">
+  <metadata
+     id="metadata4216">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title>81230A28-D944-4572-B5DB-C03CAA2B1FCA</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1199"
+     inkscape:window-height="897"
+     id="namedview4214"
+     showgrid="false"
+     inkscape:zoom="18.441345"
+     inkscape:cx="12.5"
+     inkscape:cy="12.5"
+     inkscape:window-x="486"
+     inkscape:window-y="77"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="g4240" />
+  <!-- Generator: sketchtool 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
+  <title
+     id="title4198">81230A28-D944-4572-B5DB-C03CAA2B1FCA</title>
+  <desc
+     id="desc4200">Created with sketchtool.</desc>
+  <defs
+     id="defs4202" />
+  <g
+     id="Symbols"
+     stroke="none"
+     stroke-width="1"
+     fill="none"
+     fill-rule="evenodd">
+    <g
+       id="Left-nav-default"
+       transform="translate(-50.000000, -725.000000)">
+      <g
+         id="Left-panel">
+        <g
+           id="g4207">
+          <g
+             id="icons_people"
+             transform="translate(50.000000, 725.000000)">
+            <path
+               d="M12.5,25 C19.4035594,25 25,19.4035594 25,12.5 C25,5.59644063 19.4035594,0 12.5,0 C5.59644063,0 0,5.59644063 0,12.5 C0,19.4035594 5.59644063,25 12.5,25 Z"
+               id="Oval-1-Copy-7"
+               fill="#76CFA6" />
+            <g
+               id="icons_people_svg"
+               transform="translate(2.1738878,5.8373221)"
+               style="stroke:#ffffff">
+              <path
+                 d="m 10.5,12 c 0,-2.7614237 0,-5 -5,-5 -5.0000002,0 -5,2.2385763 -5,5 3.4756747,0 5.5712891,0 10,0 z"
+                 id="Oval-40"
+                 inkscape:connector-curvature="0"
+                 style="stroke-linecap:round;stroke-linejoin:round" />
+              <circle
+                 id="Oval"
+                 cx="5.5"
+                 cy="2.75"
+                 r="2.75" />
+            </g>
+            <g
+               style="stroke:#ffffff"
+               transform="translate(12.151468,5.8373221)"
+               id="g4246">
+              <path
+                 style="stroke-linecap:round;stroke-linejoin:round"
+                 inkscape:connector-curvature="0"
+                 id="path4248"
+                 d="m 10.5,12 c 0,-2.7614237 0,-5 -5,-5 -5.0000002,0 -5,2.2385763 -5,5 3.4756747,0 5.5712891,0 10,0 z" />
+              <circle
+                 r="2.75"
+                 cy="2.75"
+                 cx="5.5"
+                 id="circle4250" />
+            </g>
+            <g
+               transform="translate(6.945774,9.0366549)"
+               id="g4240"
+               style="stroke:#ffffff">
+              <path
+                 id="path4242"
+                 d="m 10.5,12 c 0,-2.7614237 0,-5 -5,-5 -5.0000002,0 -5,2.2385763 -5,5 3.4756747,0 5.5712891,0 10,0 z"
+                 inkscape:connector-curvature="0"
+                 style="stroke-linecap:round;stroke-linejoin:round;fill:#76cfa6;fill-opacity:1" />
+              <circle
+                 r="2.75"
+                 cy="2.75"
+                 cx="5.5"
+                 id="circle4244"
+                 style="fill:#76cfa6;fill-opacity:1" />
+            </g>
+          </g>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>

From 47919bc291a9ec46b1b1314758a1c86dead02966 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Fri, 29 Sep 2017 10:39:49 +0100
Subject: [PATCH 2/2] Honour the Groups feature flag

---
 src/components/structures/BottomLeftMenu.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/structures/BottomLeftMenu.js b/src/components/structures/BottomLeftMenu.js
index 89a5f454..4014261c 100644
--- a/src/components/structures/BottomLeftMenu.js
+++ b/src/components/structures/BottomLeftMenu.js
@@ -19,9 +19,9 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import sdk from 'matrix-react-sdk';
 import dis from 'matrix-react-sdk/lib/dispatcher';
-import AccessibleButton from 'matrix-react-sdk/lib/components/views/elements/AccessibleButton';
 import Velocity from 'velocity-vector';
 import 'velocity-vector/velocity.ui';
+import UserSettingsStore from 'matrix-react-sdk/lib/UserSettingsStore';
 
 const CALLOUT_ANIM_DURATION = 1000;
 
@@ -170,6 +170,9 @@ module.exports = React.createClass({
         const GroupsButton = sdk.getComponent('elements.GroupsButton');
         const SettingsButton = sdk.getComponent('elements.SettingsButton');
 
+        const groupsButton =  UserSettingsStore.isFeatureEnabled('feature_groups') ?
+            <GroupsButton tooltip={true} /> : null;
+
         return (
             <div className="mx_BottomLeftMenu">
                 <div className="mx_BottomLeftMenu_options">
@@ -183,7 +186,7 @@ module.exports = React.createClass({
                     <div ref={this._collectCreateRoomButton}>
                         <CreateRoomButton tooltip={true} />
                     </div>
-                    <GroupsButton tooltip={true} />
+                    { groupsButton }
                     <span className="mx_BottomLeftMenu_settings">
                         <SettingsButton tooltip={true} />
                     </span>