From 56ed38ad1317f0cf220a87284f2da8651b21cfe6 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Tue, 23 Oct 2018 21:38:04 +0200 Subject: [PATCH 1/2] WIP --- res/css/structures/_RightPanel.scss | 24 +++++++++++++----------- src/components/structures/RightPanel.js | 10 ++++++---- 2 files changed, 19 insertions(+), 15 deletions(-) diff --git a/res/css/structures/_RightPanel.scss b/res/css/structures/_RightPanel.scss index e0fb95e99c..f567aa1a12 100644 --- a/res/css/structures/_RightPanel.scss +++ b/res/css/structures/_RightPanel.scss @@ -29,7 +29,7 @@ limitations under the License. border-bottom: 1px solid $primary-hairline-color; margin-right: 20px; - flex: 0 0 70px; + flex: 0 0 52px; } /** Fixme - factor this out with the main header **/ @@ -39,7 +39,8 @@ limitations under the License. display: flex; width: 100%; background-color: $primary-bg-color; - margin-left: 0px; + padding: 0 9px; + align-items: center; } .mx_RightPanel_headerButton { @@ -50,26 +51,27 @@ limitations under the License. padding-right: 5px; text-align: center; position: relative; + border-bottom: 2px solid transparent; } .mx_RightPanel_headerButton object { pointer-events: none; - padding-bottom: 3px; } .mx_RightPanel_headerButton_highlight { - width: 25px; - height: 5px; - border-radius: 5px; - background-color: $accent-color; - opacity: 0.2; + border-color: $accent-color; } .mx_RightPanel_headerButton_badge { - font-size: 11px; - color: $accent-color; + font-size: 8px; + border-radius: 8px; + color: $accent-fg-color; + background-color: $accent-color; font-weight: bold; - padding-bottom: 2px; + position: absolute; + top: -4px; + left: 20px; + padding: 2px 4px; } .mx_RightPanel_collapsebutton { diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js index 9017447a34..25da2b4291 100644 --- a/src/components/structures/RightPanel.js +++ b/src/components/structures/RightPanel.js @@ -49,19 +49,21 @@ class HeaderButton extends React.Component { const TintableSvg = sdk.getComponent("elements.TintableSvg"); const AccessibleButton = sdk.getComponent("elements.AccessibleButton"); + const classes = classNames({ + mx_RightPanel_headerButton: true, + mx_RightPanel_headerButton_highlight: this.props.isHighlighted, + }) + return -
{ this.props.badge ? this.props.badge :   }
- { this.props.isHighlighted ?
:
} - ; } } From 8c62dddb32e60df0ad726300acf5ef1fbd1006f5 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 24 Oct 2018 13:50:58 +0200 Subject: [PATCH 2/2] 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 --- res/css/_common.scss | 1 - res/css/structures/_FilePanel.scss | 5 +- res/css/structures/_NotificationPanel.scss | 7 +- res/css/structures/_RightPanel.scss | 50 +--------- res/css/structures/_RoomView.scss | 3 - res/css/views/rooms/_MemberList.scss | 103 ++++++++++++--------- res/css/views/rooms/_RoomHeader.scss | 4 + res/img/icon-invite-people.svg | 6 +- res/themes/dark/css/_dark.scss | 4 + res/themes/dharma/css/_dharma.scss | 13 ++- res/themes/light/css/_base.scss | 4 + src/components/structures/RightPanel.js | 48 +--------- src/components/views/rooms/MemberList.js | 69 +++++++++----- src/components/views/rooms/RoomHeader.js | 2 +- 14 files changed, 141 insertions(+), 178 deletions(-) diff --git a/res/css/_common.scss b/res/css/_common.scss index ce3e9afdd7..ba6b9a0710 100644 --- a/res/css/_common.scss +++ b/res/css/_common.scss @@ -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; } diff --git a/res/css/structures/_FilePanel.scss b/res/css/structures/_FilePanel.scss index 87dc0aa756..aa56c23866 100644 --- a/res/css/structures/_FilePanel.scss +++ b/res/css/structures/_FilePanel.scss @@ -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; } diff --git a/res/css/structures/_NotificationPanel.scss b/res/css/structures/_NotificationPanel.scss index a899808d57..6fd1f1690d 100644 --- a/res/css/structures/_NotificationPanel.scss +++ b/res/css/structures/_NotificationPanel.scss @@ -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; -} \ No newline at end of file +} diff --git a/res/css/structures/_RightPanel.scss b/res/css/structures/_RightPanel.scss index f567aa1a12..07fe404749 100644 --- a/res/css/structures/_RightPanel.scss +++ b/res/css/structures/_RightPanel.scss @@ -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; - } -} diff --git a/res/css/structures/_RoomView.scss b/res/css/structures/_RoomView.scss index 1b73576246..1283f05150 100644 --- a/res/css/structures/_RoomView.scss +++ b/res/css/structures/_RoomView.scss @@ -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; diff --git a/res/css/views/rooms/_MemberList.scss b/res/css/views/rooms/_MemberList.scss index 83fc70aefb..e620b49830 100644 --- a/res/css/views/rooms/_MemberList.scss +++ b/res/css/views/rooms/_MemberList.scss @@ -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; +} + diff --git a/res/css/views/rooms/_RoomHeader.scss b/res/css/views/rooms/_RoomHeader.scss index fa28db69ae..b4a3d27d4f 100644 --- a/res/css/views/rooms/_RoomHeader.scss +++ b/res/css/views/rooms/_RoomHeader.scss @@ -208,6 +208,10 @@ limitations under the License. pointer-events: none; } +.mx_RoomHeader_showPanel { + height: 16px; +} + .mx_RoomHeader_voipButton { display: table-cell; } diff --git a/res/img/icon-invite-people.svg b/res/img/icon-invite-people.svg index 3c168e173e..73500ebe06 100644 --- a/res/img/icon-invite-people.svg +++ b/res/img/icon-invite-people.svg @@ -1,5 +1,5 @@ - - - + + + diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index f571f6b0c2..41ec0f8fd6 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -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; diff --git a/res/themes/dharma/css/_dharma.scss b/res/themes/dharma/css/_dharma.scss index aed8dfa60f..1f198e4717 100644 --- a/res/themes/dharma/css/_dharma.scss +++ b/res/themes/dharma/css/_dharma.scss @@ -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 { diff --git a/res/themes/light/css/_base.scss b/res/themes/light/css/_base.scss index 9ece0363b3..bee9157279 100644 --- a/res/themes/light/css/_base.scss +++ b/res/themes/light/css/_base.scss @@ -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; diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js index 25da2b4291..ebc559b5fc 100644 --- a/src/components/structures/RightPanel.js +++ b/src/components/structures/RightPanel.js @@ -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 ... + /*
+ { this.props.badge ? this.props.badge :   } +
*/ return -
- { this.props.badge ? this.props.badge :   } -
- + ; } } @@ -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 =
{ formatCount(numMembers) }
; - isUserInRoom = room.hasMembershipState(this.context.matrixClient.credentials.userId, 'join'); - } - - if (isUserInRoom) { - inviteGroup = - -
- -
-
{ _t('Invite to this room') }
- ; - } - } const isPhaseGroup = [ this.Phase.GroupMemberInfo, @@ -418,9 +383,6 @@ module.exports = React.createClass({
{ panel } -
- { inviteGroup } -
); }, diff --git a/src/components/views/rooms/MemberList.js b/src/components/views/rooms/MemberList.js index 67a6effc81..b5fe0cfbc1 100644 --- a/src/components/views/rooms/MemberList.js +++ b/src/components/views/rooms/MemberList.js @@ -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 = ( -
-

{ _t("Invited") }

-
- + 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 = + +
+
-
- ); +
{ _t('Invite to this room') }
+ ; } - const inputBox = ( + let invitedHeader; + let invitedSection; + if (this._getChildCountInvited() > 0) { + invitedHeader =

{ _t("Invited") }

; + invitedSection = ; + } + + const filterAndButtons = (
- + { inviteButton }
); return (
- { inputBox } - - +
+ - { invitedSection } + getChildCount={this._getChildCountJoined} /> + { invitedHeader } + { invitedSection } +
); }, + + onInviteButtonClick: function() { + if (MatrixClientPeg.get().isGuest()) { + dis.dispatch({action: 'require_registration'}); + return; + } + + // call AddressPickerDialog + dis.dispatch({ + action: 'view_invite', + roomId: this.props.roomId, + }); + }, }); diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js index 92dd524277..8a98f2a8bc 100644 --- a/src/components/views/rooms/RoomHeader.js +++ b/src/components/views/rooms/RoomHeader.js @@ -396,7 +396,7 @@ module.exports = React.createClass({ let rightPanelButtons; if (this.props.collapsedRhs) { rightPanelButtons = - + ; }