From 8c62dddb32e60df0ad726300acf5ef1fbd1006f5 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 24 Oct 2018 13:50:58 +0200 Subject: [PATCH] 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 | 101 ++++++++++++--------- 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, 140 insertions(+), 177 deletions(-) diff --git a/res/css/_common.scss b/res/css/_common.scss index ce3e9afdd76..ba6b9a07105 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 87dc0aa7561..aa56c23866a 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 a899808d57f..6fd1f1690dc 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 f567aa1a126..07fe4047497 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 1b73576246b..1283f051508 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 83fc70aefba..e620b498302 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; + color: $input-darker-fg-color; + background-color: $input-darker-bg-color; font-size: 14px; - margin-bottom: 8px; - width: 189px; + font-weight: 600; + border: none; } +.mx_MemberList_query::-webkit-input-placeholder, +.mx_GroupMemberList_query::-webkit-input-placeholder, +.mx_GroupRoomList_query::-webkit-input-placeholder, .mx_MemberList_query::-moz-placeholder, .mx_GroupMemberList_query::-moz-placeholder, .mx_GroupRoomList_query::-moz-placeholder { - color: $primary-fg-color; - opacity: 0.5; - font-size: 14px; -} - -.mx_MemberList_query::-webkit-input-placeholder, -.mx_GroupMemberList_query::-webkit-input-placeholder, -.mx_GroupRoomList_query::-webkit-input-placeholder { - color: $primary-fg-color; + 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 fa28db69ae0..b4a3d27d4f1 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 3c168e173e2..73500ebe063 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 f571f6b0c2f..41ec0f8fd61 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 aed8dfa60f0..1f198e4717b 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 9ece0363b3c..bee91572796 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 25da2b42913..ebc559b5fc7 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 67a6effc817..b5fe0cfbc12 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') }
+ ; + } + + let invitedHeader; + let invitedSection; + if (this._getChildCountInvited() > 0) { + invitedHeader =

{ _t("Invited") }

; + invitedSection = ; } - const inputBox = ( + 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 92dd524277d..8a98f2a8bc4 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 = - + ; }