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

This commit is contained in:
Luke Barnard 2017-10-16 11:44:38 +01:00
parent bbcf46bb69
commit 2cefa58d5d
3 changed files with 52 additions and 6 deletions

View File

@ -330,7 +330,7 @@ module.exports = React.createClass({
<div className="mx_RightPanel_icon" > <div className="mx_RightPanel_icon" >
<TintableSvg src="img/icons-room-add.svg" width="35" height="35" /> <TintableSvg src="img/icons-room-add.svg" width="35" height="35" />
</div> </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> </AccessibleButton>
); );
} }

View File

@ -56,6 +56,7 @@
@import "./matrix-react-sdk/views/rooms/_MemberList.scss"; @import "./matrix-react-sdk/views/rooms/_MemberList.scss";
@import "./matrix-react-sdk/views/rooms/_MessageComposer.scss"; @import "./matrix-react-sdk/views/rooms/_MessageComposer.scss";
@import "./matrix-react-sdk/views/rooms/_PresenceLabel.scss"; @import "./matrix-react-sdk/views/rooms/_PresenceLabel.scss";
@import "./matrix-react-sdk/views/rooms/_RoomDetailList.scss";
@import "./matrix-react-sdk/views/rooms/_RoomHeader.scss"; @import "./matrix-react-sdk/views/rooms/_RoomHeader.scss";
@import "./matrix-react-sdk/views/rooms/_RoomList.scss"; @import "./matrix-react-sdk/views/rooms/_RoomList.scss";
@import "./matrix-react-sdk/views/rooms/_RoomPreviewBar.scss"; @import "./matrix-react-sdk/views/rooms/_RoomPreviewBar.scss";

View File

@ -19,6 +19,9 @@ limitations under the License.
width: 100%; width: 100%;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
display: flex;
flex-direction: column;
overflow: hidden;
} }
.mx_GroupView_error { .mx_GroupView_error {
@ -27,15 +30,13 @@ limitations under the License.
.mx_GroupView_header { .mx_GroupView_header {
max-width: 960px; max-width: 960px;
margin: auto;
height: 70px; height: 70px;
align-items: center; align-items: center;
display: flex; display: flex;
margin-bottom: 20px;
} }
.mx_GroupView_header_view { .mx_GroupView_header_view {
border-bottom: 1px solid #e5e5e5; border-bottom: 1px solid $primary-hairline-color;
} }
.mx_GroupView_header_avatar, .mx_GroupView_header_info { .mx_GroupView_header_avatar, .mx_GroupView_header_info {
@ -133,9 +134,53 @@ limitations under the License.
top: 5px; 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 { .mx_GroupView_membershipSection {
margin-left: auto;
margin-right: auto;
margin-bottom: 11px; margin-bottom: 11px;
color: $greyed-fg-color; color: $greyed-fg-color;
} }