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>