one big commit, sorry

changing looks of input & buttons
changing background color of right panels
moving invite button around
change margins and paddings in memberlist
pull/21833/head
Bruno Windels 2018-10-24 13:50:58 +02:00
parent 8a5c46ead0
commit 8c62dddb32
14 changed files with 141 additions and 178 deletions

View File

@ -60,7 +60,6 @@ input[type=text].error, input[type=password].error {
}
input[type=text]:focus, input[type=password]:focus, textarea:focus {
border: 1px solid $accent-color;
outline: none;
box-shadow: none;
}

View File

@ -16,11 +16,8 @@ limitations under the License.
.mx_FilePanel {
order: 2;
flex: 1 1 0;
width: 100%;
background-color: $secondary-accent-color;
overflow-y: auto;
}

View File

@ -16,11 +16,8 @@ limitations under the License.
.mx_NotificationPanel {
order: 2;
flex: 1 1 0;
width: 100%;
background-color: $secondary-accent-color;
overflow-y: auto;
}
@ -97,4 +94,4 @@ limitations under the License.
.mx_NotificationPanel .mx_EventTile_content {
margin-right: 0px;
}
}

View File

@ -27,7 +27,6 @@ limitations under the License.
order: 1;
border-bottom: 1px solid $primary-hairline-color;
margin-right: 20px;
flex: 0 0 52px;
}
@ -35,9 +34,8 @@ limitations under the License.
/** Fixme - factor this out with the main header **/
.mx_RightPanel_headerButtonGroup {
margin-top: 6px;
height: 100%;
display: flex;
width: 100%;
background-color: $primary-bg-color;
padding: 0 9px;
align-items: center;
@ -77,7 +75,8 @@ limitations under the License.
.mx_RightPanel_collapsebutton {
flex: 1;
text-align: right;
margin-top: 20px;
height: 16px;
border: none;
}
.mx_RightPanel .mx_MemberList,
@ -92,46 +91,3 @@ limitations under the License.
order: 2;
margin: auto;
}
.mx_RightPanel_footer {
order: 3;
border-top: 1px solid $primary-hairline-color;
margin-right: 20px;
flex: 0 0 60px;
}
.mx_RightPanel_footer .mx_RightPanel_invite {
font-size: 14px;
color: $primary-fg-color;
padding-top: 13px;
padding-left: 5px;
cursor: pointer;
display: flex;
align-items: center;
}
.collapsed .mx_RightPanel_footer .mx_RightPanel_invite {
display: none;
}
.mx_RightPanel_invite .mx_RightPanel_icon object {
pointer-events: none;
}
.mx_RightPanel_invite .mx_RightPanel_message {
padding-left: 10px;
line-height: 18px;
}
.mx_MatrixChat_useCompactLayout {
.mx_RightPanel_footer {
flex: 0 0 50px;
}
.mx_RightPanel_footer .mx_RightPanel_invite {
line-height: 25px;
padding-top: 8px;
}
}

View File

@ -96,7 +96,6 @@ limitations under the License.
.mx_RoomView_body .mx_RoomView_messagePanelSpinner {
order: 2;
margin: auto;
}
.mx_RoomView_body .mx_RoomView_statusArea {
@ -113,8 +112,6 @@ limitations under the License.
}
.mx_RoomView_messageListWrapper {
margin: auto;
min-height: 100%;
display: flex;

View File

@ -17,15 +17,9 @@ limitations under the License.
.mx_MemberList,
.mx_GroupMemberList,
.mx_GroupRoomList {
height: 100%;
margin-top: 12px;
margin-right: 20px;
background-color: $secondary-accent-color;
flex: 1;
display: flex;
flex-direction: column;
}
@ -46,54 +40,47 @@ limitations under the License.
flex: 1 1 0px;
}
.mx_MemberList form,
.mx_GroupMemberList form,
.mx_GroupRoomList form {
margin: 8px;
display: flex;
justify-content: flex-end;
}
.mx_MemberList form > *:not(:first-child),
.mx_GroupMemberList form > *:not(:first-child),
.mx_GroupRoomList form > *:not(:first-child) {
margin-left: 5px;
}
.mx_MemberList_query,
.mx_GroupMemberList_query,
.mx_GroupRoomList_query {
flex: 1 1 0;
box-sizing: border-box;
font-family: $font-family;
border-radius: 3px;
border: 1px solid $input-border-color;
border-radius: 4px;
padding: 9px;
color: $primary-fg-color;
background-color: $primary-bg-color;
margin-left: 3px;
font-size: 14px;
margin-bottom: 8px;
width: 189px;
}
.mx_MemberList_query::-moz-placeholder,
.mx_GroupMemberList_query::-moz-placeholder,
.mx_GroupRoomList_query::-moz-placeholder {
color: $primary-fg-color;
opacity: 0.5;
color: $input-darker-fg-color;
background-color: $input-darker-bg-color;
font-size: 14px;
font-weight: 600;
border: none;
}
.mx_MemberList_query::-webkit-input-placeholder,
.mx_GroupMemberList_query::-webkit-input-placeholder,
.mx_GroupRoomList_query::-webkit-input-placeholder {
color: $primary-fg-color;
.mx_GroupRoomList_query::-webkit-input-placeholder,
.mx_MemberList_query::-moz-placeholder,
.mx_GroupMemberList_query::-moz-placeholder,
.mx_GroupRoomList_query::-moz-placeholder {
color: $input-darker-fg-color;
opacity: 0.5;
font-size: 14px;
}
.mx_MemberList_joined {
order: 2;
flex: 1 0 0;
overflow-y: auto;
}
/*
.mx_MemberList_invited {
order: 3;
flex: 0 0 100px;
overflow-y: auto;
}
*/
.mx_GroupMemberList_invited h2,
.mx_MemberList_invited h2 {
.mx_MemberList h2, .mx_GroupMemberList h2 {
text-transform: uppercase;
color: $h3-color;
font-weight: 600;
@ -104,13 +91,37 @@ limitations under the License.
margin-bottom: 4px;
}
/* we have to have display: table in order for the horizontal wrapping to work */
.mx_MemberList_wrapper {
display: table;
table-layout: fixed;
width: 100%;
padding: 10px;
}
.mx_MemberList_outerWrapper {
height: 0px;
}
.mx_MemberList_inviteIcon object {
pointer-events: none;
}
.mx_MemberList_inviteIcon {
position: absolute;
top: 10px;
left: 10px;
}
.mx_MemberList_invite {
flex: 0 0 auto;
position: relative;
background-color: $button-bg-color;
color: $button-fg-color;
border-radius: 4px;
padding: 8px;
font-weight: 600;
}
/* move text to left */
.mx_MemberList_invite > :last-child {
margin-left: 25px;
}

View File

@ -208,6 +208,10 @@ limitations under the License.
pointer-events: none;
}
.mx_RoomHeader_showPanel {
height: 16px;
}
.mx_RoomHeader_voipButton {
display: table-cell;
}

View File

@ -1,5 +1,5 @@
<svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.9999 3.30001C2.9999 5.02501 4.3499 6.37501 6.0749 6.37501C7.7999 6.45001 9.1499 5.02501 9.1499 3.30001C9.1499 1.57501 7.7999 0.225006 6.0749 0.225006C4.3499 0.225006 2.9999 1.57501 2.9999 3.30001ZM4.1249 3.30001C4.1249 2.25001 5.0249 1.35001 6.0749 1.35001C7.1999 1.35001 8.0249 2.25001 8.0249 3.30001C8.0249 4.35001 7.1249 5.25001 6.0749 5.25001C5.0249 5.25001 4.1249 4.35001 4.1249 3.30001Z" fill="black"/>
<path d="M6.0749 6.97501C9.2249 6.97501 11.7749 9.52501 11.7749 12.675C11.7749 12.975 11.5499 13.275 11.1749 13.275C10.8749 13.275 10.5749 13.05 10.5749 12.675C10.4999 10.2 8.3249 8.25001 5.8499 8.32501C3.4499 8.40001 1.5749 10.35 1.4999 12.675C1.4999 12.975 1.2749 13.275 0.899902 13.275C0.524902 13.275 0.299902 13.05 0.299902 12.675C0.449902 9.52501 2.9249 6.97501 6.0749 6.97501Z" fill="black"/>
<path d="M11.025 6.375C10.725 6.375 10.425 6.15 10.425 5.85C10.425 5.55 10.65 5.25 11.025 5.25H12V4.35C12 4.05 12.225 3.75 12.6 3.75C12.9 3.75 13.2 3.975 13.2 4.35V5.25H14.025C14.325 5.25 14.625 5.475 14.625 5.85C14.625 6.225 14.4 6.375 14.025 6.375H13.125V7.275C13.125 7.575 12.9 7.875 12.525 7.875C12.15 7.875 11.925 7.65 11.925 7.275V6.375H11.025Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.9999 3.30001C2.9999 5.02501 4.3499 6.37501 6.0749 6.37501C7.7999 6.45001 9.1499 5.02501 9.1499 3.30001C9.1499 1.57501 7.7999 0.225006 6.0749 0.225006C4.3499 0.225006 2.9999 1.57501 2.9999 3.30001ZM4.1249 3.30001C4.1249 2.25001 5.0249 1.35001 6.0749 1.35001C7.1999 1.35001 8.0249 2.25001 8.0249 3.30001C8.0249 4.35001 7.1249 5.25001 6.0749 5.25001C5.0249 5.25001 4.1249 4.35001 4.1249 3.30001Z" fill="white"/>
<path d="M6.0749 6.97501C9.2249 6.97501 11.7749 9.52501 11.7749 12.675C11.7749 12.975 11.5499 13.275 11.1749 13.275C10.8749 13.275 10.5749 13.05 10.5749 12.675C10.4999 10.2 8.3249 8.25001 5.8499 8.32501C3.4499 8.40001 1.5749 10.35 1.4999 12.675C1.4999 12.975 1.2749 13.275 0.899902 13.275C0.524902 13.275 0.299902 13.05 0.299902 12.675C0.449902 9.52501 2.9249 6.97501 6.0749 6.97501Z" fill="white"/>
<path d="M11.025 6.375C10.725 6.375 10.425 6.15 10.425 5.85C10.425 5.55 10.65 5.25 11.025 5.25H12V4.35C12 4.05 12.225 3.75 12.6 3.75C12.9 3.75 13.2 3.975 13.2 4.35V5.25H14.025C14.325 5.25 14.625 5.475 14.625 5.85C14.625 6.225 14.4 6.375 14.025 6.375H13.125V7.275C13.125 7.575 12.9 7.875 12.525 7.875C12.15 7.875 11.925 7.65 11.925 7.275V6.375H11.025Z" fill="white"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@ -62,6 +62,10 @@ $primary-hairline-color: #474747;
// used for the border of input text fields
$input-border-color: #3a3a3a;
$input-darker-bg-color: #c1c9d6;
$input-darker-fg-color: #9fa9ba;
$button-bg-color: #7ac9a1;
$button-fg-color: white;
// apart from login forms, which have stronger border
$strong-input-border-color: #656565;

View File

@ -67,6 +67,11 @@ $primary-hairline-color: #e5e5e5;
// used for the border of input text fields
$input-border-color: #f0f0f0;
$input-darker-bg-color: rgba(193, 201, 214, 0.29);
$input-darker-fg-color: #9fa9ba;
$button-bg-color: #7ac9a1;
$button-fg-color: white;
// apart from login forms, which have stronger border
$strong-input-border-color: #c7c7c7;
@ -179,11 +184,11 @@ $progressbar-color: #000;
/* align images in buttons (eg spinners) */
vertical-align: middle;
border: 0px;
border-radius: 36px;
border-radius: 4px;
font-family: $font-family;
font-size: 14px;
color: $accent-fg-color;
background-color: $accent-color;
color: $button-fg-color;
background-color: $button-bg-color;
width: auto;
padding: 7px;
padding-left: 1.5em;
@ -197,7 +202,7 @@ $progressbar-color: #000;
}
@define-mixin mx_DialogButton_danger {
background-color: $warning-color;
background-color: $accent-color;
}
@define-mixin mx_DialogButton_small {

View File

@ -67,6 +67,10 @@ $primary-hairline-color: #e5e5e5;
// used for the border of input text fields
$input-border-color: #f0f0f0;
$input-darker-bg-color: #c1c9d6;
$input-darker-fg-color: #9fa9ba;
$button-bg-color: #7ac9a1;
$button-fg-color: white;
// apart from login forms, which have stronger border
$strong-input-border-color: #c7c7c7;

View File

@ -53,6 +53,10 @@ class HeaderButton extends React.Component {
mx_RightPanel_headerButton: true,
mx_RightPanel_headerButton_highlight: this.props.isHighlighted,
})
// will probably use this later on for notifications, etc ...
/* <div className="mx_RightPanel_headerButton_badge">
{ this.props.badge ? this.props.badge : <span>&nbsp;</span> }
</div> */
return <AccessibleButton
aria-label={this.props.title}
@ -60,10 +64,7 @@ class HeaderButton extends React.Component {
title={this.props.title}
className={classes}
onClick={this.onClick} >
<div className="mx_RightPanel_headerButton_badge">
{ this.props.badge ? this.props.badge : <span>&nbsp;</span> }
</div>
<TintableSvg src={this.props.iconSrc} width="25" height="25" />
<TintableSvg src={this.props.iconSrc} width="20" height="20" />
</AccessibleButton>;
}
}
@ -161,19 +162,6 @@ module.exports = React.createClass({
});
},
onInviteButtonClick: function() {
if (this.context.matrixClient.isGuest()) {
dis.dispatch({action: 'require_registration'});
return;
}
// call AddressPickerDialog
dis.dispatch({
action: 'view_invite',
roomId: this.props.roomId,
});
},
onInviteToGroupButtonClick: function() {
showGroupInviteDialog(this.props.groupId).then(() => {
this.setState({
@ -279,29 +267,6 @@ module.exports = React.createClass({
let membersBadge;
let membersTitle = _t('Members');
if ((this.state.phase === this.Phase.RoomMemberList || this.state.phase === this.Phase.RoomMemberInfo)
&& this.props.roomId
) {
const cli = this.context.matrixClient;
const room = cli.getRoom(this.props.roomId);
let isUserInRoom;
if (room) {
const numMembers = room.getJoinedMemberCount();
membersTitle = _t('%(count)s Members', { count: numMembers });
membersBadge = <div title={membersTitle}>{ formatCount(numMembers) }</div>;
isUserInRoom = room.hasMembershipState(this.context.matrixClient.credentials.userId, 'join');
}
if (isUserInRoom) {
inviteGroup =
<AccessibleButton className="mx_RightPanel_invite" onClick={this.onInviteButtonClick}>
<div className="mx_RightPanel_icon" >
<TintableSvg src="img/icon-invite-people.svg" width="35" height="35" />
</div>
<div className="mx_RightPanel_message">{ _t('Invite to this room') }</div>
</AccessibleButton>;
}
}
const isPhaseGroup = [
this.Phase.GroupMemberInfo,
@ -418,9 +383,6 @@ module.exports = React.createClass({
</div>
</div>
{ panel }
<div className="mx_RightPanel_footer">
{ inviteGroup }
</div>
</aside>
);
},

View File

@ -19,6 +19,7 @@ limitations under the License.
import React from 'react';
import { _t } from '../../../languageHandler';
import SdkConfig from '../../../SdkConfig';
import dis from '../../../dispatcher';
const MatrixClientPeg = require("../../../MatrixClientPeg");
const sdk = require('../../../index');
const rate_limited_func = require('../../../ratelimitedfunc');
@ -420,42 +421,68 @@ module.exports = React.createClass({
const TruncatedList = sdk.getComponent("elements.TruncatedList");
const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
let invitedSection = null;
if (this._getChildCountInvited() > 0) {
invitedSection = (
<div className="mx_MemberList_invited">
<h2>{ _t("Invited") }</h2>
<div className="mx_MemberList_wrapper">
<TruncatedList className="mx_MemberList_wrapper" truncateAt={this.state.truncateAtInvited}
createOverflowElement={this._createOverflowTileInvited}
getChildren={this._getChildrenInvited}
getChildCount={this._getChildCountInvited}
/>
const cli = MatrixClientPeg.get();
const room = cli.getRoom(this.props.roomId);
let inviteButton;
if (room.getMyMembership() === 'join') {
const TintableSvg = sdk.getComponent("elements.TintableSvg");
const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
inviteButton =
<AccessibleButton className="mx_MemberList_invite" onClick={this.onInviteButtonClick}>
<div className="mx_MemberList_inviteIcon" >
<TintableSvg src="img/icon-invite-people.svg" width="16" height="16" />
</div>
</div>
);
<div>{ _t('Invite to this room') }</div>
</AccessibleButton>;
}
const inputBox = (
let invitedHeader;
let invitedSection;
if (this._getChildCountInvited() > 0) {
invitedHeader = <h2>{ _t("Invited") }</h2>;
invitedSection = <TruncatedList className="mx_MemberList_section mx_MemberList_invited" truncateAt={this.state.truncateAtInvited}
createOverflowElement={this._createOverflowTileInvited}
getChildren={this._getChildrenInvited}
getChildCount={this._getChildCountInvited}
/>;
}
const filterAndButtons = (
<form autoComplete="off">
<input className="mx_MemberList_query" id="mx_MemberList_query" type="text"
<input className="mx_MemberList_query" id="mx_MemberList_query" type="search"
onChange={this.onSearchQueryChanged} value={this.state.searchQuery}
placeholder={_t('Filter room members')} />
{ inviteButton }
</form>
);
return (
<div className="mx_MemberList">
{ inputBox }
<GeminiScrollbarWrapper autoshow={true} className="mx_MemberList_joined mx_MemberList_outerWrapper">
<TruncatedList className="mx_MemberList_wrapper" truncateAt={this.state.truncateAtJoined}
{ filterAndButtons }
<GeminiScrollbarWrapper autoshow={true} className="mx_MemberList_outerWrapper">
<div className="mx_MemberList_wrapper">
<TruncatedList className="mx_MemberList_section mx_MemberList_joined" truncateAt={this.state.truncateAtJoined}
createOverflowElement={this._createOverflowTileJoined}
getChildren={this._getChildrenJoined}
getChildCount={this._getChildCountJoined}
/>
{ invitedSection }
getChildCount={this._getChildCountJoined} />
{ invitedHeader }
{ invitedSection }
</div>
</GeminiScrollbarWrapper>
</div>
);
},
onInviteButtonClick: function() {
if (MatrixClientPeg.get().isGuest()) {
dis.dispatch({action: 'require_registration'});
return;
}
// call AddressPickerDialog
dis.dispatch({
action: 'view_invite',
roomId: this.props.roomId,
});
},
});

View File

@ -396,7 +396,7 @@ module.exports = React.createClass({
let rightPanelButtons;
if (this.props.collapsedRhs) {
rightPanelButtons =
<AccessibleButton className="mx_RoomHeader_button" onClick={this.onShowRhsClick} title={_t('Show panel')}>
<AccessibleButton className="mx_RoomHeader_button mx_RoomHeader_showPanel" onClick={this.onShowRhsClick} title={_t('Show panel')}>
<TintableSvg src="img/maximise.svg" width="10" height="16" />
</AccessibleButton>;
}