Merge pull request #5295 from vector-im/luke/groups-room-directory-esque

CSS for Modifying GroupView UI matrix-org/matrix-react-sdk#1475

src/components/structures/RightPanel.js

@@ -330,7 +330,7 @@ module.exports = React.createClass({
                     <div className="mx_RightPanel_icon" >
                         <TintableSvg src="img/icons-room-add.svg" width="35" height="35" />
                     </div>
-                    <div className="mx_RightPanel_message">{ _t('Add room to this group') }</div>
+                    <div className="mx_RightPanel_message">{ _t('Add rooms to this group') }</div>
                 </AccessibleButton>
             );
         }

src/i18n/strings/de_DE.json

@@ -216,6 +216,5 @@
     "State Key": "Status-Schlüssel",
     "Invite to this group": "In diese Gruppe einladen",
     "Filter results": "Ergebnisse filtern",
-    "You must specify an event type!": "Du musst einen Event-Typ spezifizieren!",
+    "You must specify an event type!": "Du musst einen Event-Typ spezifizieren!"
-    "Add room to this group": "Raum zu dieser Gruppe hinzufügen"
 }

src/i18n/strings/en_EN.json

@@ -213,5 +213,5 @@
   "Set Password": "Set Password",
   "Couldn't load home page": "Couldn't load home page",
   "Invite to this group": "Invite to this group",
-  "Add room to this group": "Add room to this group"
+  "Add rooms to this group": "Add rooms to this group"
 }

src/i18n/strings/gl.json

@@ -219,7 +219,6 @@
     "Set Password": "Establecer contrasinal",
     "Couldn't load home page": "Non se cargou a páxina de inicio",
     "Invite to this group": "Convidar a este grupo",
-    "Add room to this group": "Engadir sala a este grupo",
     "You might have configured them in a client other than Riot. You cannot tune them in Riot but they still apply": "Pode que os configurase nun cliente diferente de Riot. Non pode establecelos desde Riot pero aínda así aplicaranse",
     "Riot/Android & matrix-android-sdk chat": "Chat para Riot/Android & matrix-android-sdk"
 }

src/i18n/strings/hu.json

@@ -207,6 +207,5 @@
     "State Key": "Állapot kulcs",
     "Invite to this group": "Meghívás ebbe a csoportba",
     "Filter results": "Találatok szűrése",
-    "You must specify an event type!": "Meg kell határoznod az esemény típusát!",
+    "You must specify an event type!": "Meg kell határoznod az esemény típusát!"
-    "Add room to this group": "Szoba hozzáadása ehhez a csoporthoz"
 }

src/i18n/strings/it.json

@@ -206,6 +206,5 @@
     "Event Type": "Tipo di Evento",
     "Event Content": "Contenuto dell'Evento",
     "State Key": "Chiave dello Stato",
-    "Invite to this group": "Invita in questo gruppo",
+    "Invite to this group": "Invita in questo gruppo"
-    "Add room to this group": "Aggiungi stanza a questo gruppo"
 }

src/i18n/strings/nl.json

@@ -207,6 +207,5 @@
     "Event sent!": "Event verstuurd!",
     "Event Type": "Event-type",
     "Event Content": "Event-inhoud",
-    "State Key": "Toestandssleutel",
+    "State Key": "Toestandssleutel"
-    "Add room to this group": "Voeg een ruimte aan deze groep toe"
 }

src/i18n/strings/pt.json

@@ -209,6 +209,5 @@
     "Couldn't load home page": "Não foi possível carregar a página inicial",
     "Invite to this group": "Convidar para este grupo",
     "Filter results": "Filtrar resultados",
-    "You must specify an event type!": "Tem que especificar um tipo de evento!",
+    "You must specify an event type!": "Tem que especificar um tipo de evento!"
-    "Add room to this group": "Adicionar sala a este grupo"
 }

src/i18n/strings/pt_BR.json

@@ -210,6 +210,5 @@
     "Event Type": "Tipo do Evento",
     "Event Content": "Conteúdo do Evento",
     "State Key": "Chave do Estado",
-    "Invite to this group": "Convide para este grupo",
+    "Invite to this group": "Convide para este grupo"
-    "Add room to this group": "Adicione sala para este grupo"
 }

src/i18n/strings/ru.json

@@ -214,6 +214,5 @@
     "State Key": "Ключ состояния",
     "Invite to this group": "Пригласить в эту группу",
     "Filter results": "Фильтрация результатов",
-    "You must specify an event type!": "Необходимо указать тип мероприятия!",
+    "You must specify an event type!": "Необходимо указать тип мероприятия!"
-    "Add room to this group": "Добавить комнату в эту группу"
 }

src/i18n/strings/uk.json

@@ -207,6 +207,5 @@
     "Event Type": "Тип західу",
     "Event Content": "Зміст заходу",
     "State Key": "Ключ стану",
-    "Invite to this group": "Запросити в цю групу",
+    "Invite to this group": "Запросити в цю групу"
-    "Add room to this group": "Додати кімнату в цю группу"
 }

src/i18n/strings/zh_Hant.json

@@ -207,6 +207,5 @@
     "State Key": "狀態金鑰",
     "Invite to this group": "邀請進入此群組",
     "Filter results": "過濾結果",
-    "You must specify an event type!": "您必須指定事件類型！",
+    "You must specify an event type!": "您必須指定事件類型！"
-    "Add room to this group": "新增聊天室到此群組"
 }

src/skins/vector/css/matrix-react-sdk/structures/_GroupView.scss

@@ -19,6 +19,9 @@ limitations under the License.
     width: 100%;
     margin-left: auto;
     margin-right: auto;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
 }
 
 .mx_GroupView_error {
@@ -27,15 +30,13 @@ limitations under the License.
 
 .mx_GroupView_header {
     max-width: 960px;
-    margin: auto;
     height: 70px;
     align-items: center;
     display: flex;
-    margin-bottom: 20px;
 }
 
 .mx_GroupView_header_view {
-    border-bottom: 1px solid #e5e5e5;
+    border-bottom: 1px solid $primary-hairline-color;
 }
 
 .mx_GroupView_header_avatar, .mx_GroupView_header_info {
@@ -133,9 +134,53 @@ limitations under the License.
     top: 5px;
 }
 
+.mx_GroupView_body {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+}
+
+.mx_GroupView_rooms {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 200px;
+    user-select: none;
+}
+
+.mx_GroupView_rooms_header h3 {
+    margin-bottom: 10px
+}
+
+.mx_GroupView_rooms_header .mx_AccessibleButton {
+    padding-left: 14px;
+    margin-bottom: 14px;
+    height: 24px;
+}
+
+.mx_GroupView_rooms_header_addButton {
+    display: inline-block;
+}
+
+.mx_GroupView_rooms_header_addButton_label {
+    display: inline-block;
+    vertical-align: top;
+    line-height: 24px;
+    padding-left: 28px;
+    color: $accent-color;
+}
+
+.mx_GroupView_rooms .mx_RoomDetailList {
+    flex-grow: 1;
+    border-top: 1px solid $primary-hairline-color;
+    padding-top: 10px;
+}
+
+.mx_GroupView .mx_RoomView_messageListWrapper {
+    justify-content: flex-start;
+}
+
 .mx_GroupView_membershipSection {
-    margin-left: auto;
-    margin-right: auto;
     margin-bottom: 11px;
     color: $greyed-fg-color;
 }