Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Maintenance: Clean up some stuff around settings #2685

Merged
merged 7 commits into from
Feb 25, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 9 additions & 9 deletions res/css/_components.scss
Original file line number Diff line number Diff line change
Expand Up @@ -150,16 +150,16 @@
@import "./views/settings/_Notifications.scss";
@import "./views/settings/_PhoneNumbers.scss";
@import "./views/settings/_ProfileSettings.scss";
@import "./views/settings/tabs/_GeneralRoomSettingsTab.scss";
@import "./views/settings/tabs/_GeneralUserSettingsTab.scss";
@import "./views/settings/tabs/_HelpSettingsTab.scss";
@import "./views/settings/tabs/_NotificationSettingsTab.scss";
@import "./views/settings/tabs/_PreferencesSettingsTab.scss";
@import "./views/settings/tabs/_RolesRoomSettingsTab.scss";
@import "./views/settings/tabs/_SecurityRoomSettingsTab.scss";
@import "./views/settings/tabs/_SecuritySettingsTab.scss";
@import "./views/settings/tabs/_SettingsTab.scss";
@import "./views/settings/tabs/_VoiceSettingsTab.scss";
@import "./views/settings/tabs/room/_GeneralRoomSettingsTab.scss";
@import "./views/settings/tabs/room/_RolesRoomSettingsTab.scss";
Copy link
Contributor

@bwindels bwindels Feb 25, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: IMO settings/room/tabs and settings/user/tabs would make more sense.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That sounds like a good improvement to make if we ever get rid of room_settings being a thing elsewhere (which I also want to do, but not right now)

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Have opened element-hq/element-web#8934 to track this

@import "./views/settings/tabs/room/_SecurityRoomSettingsTab.scss";
@import "./views/settings/tabs/user/_GeneralUserSettingsTab.scss";
@import "./views/settings/tabs/user/_HelpUserSettingsTab.scss";
@import "./views/settings/tabs/user/_NotificationUserSettingsTab.scss";
@import "./views/settings/tabs/user/_PreferencesUserSettingsTab.scss";
@import "./views/settings/tabs/user/_SecurityUserSettingsTab.scss";
@import "./views/settings/tabs/user/_VoiceUserSettingsTab.scss";
@import "./views/verification/_VerificationShowSas.scss";
@import "./views/voip/_CallView.scss";
@import "./views/voip/_IncomingCallbox.scss";
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,11 @@ See the License for the specific language governing permissions and
limitations under the License.
*/

.mx_HelpSettingsTab_debugButton {
.mx_HelpUserSettingsTab_debugButton {
margin-bottom: 5px;
margin-top: 5px;
}

.mx_HelpSettingsTab span.mx_AccessibleButton {
.mx_HelpUserSettingsTab span.mx_AccessibleButton {
word-break: break-word;
}
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,6 @@ See the License for the specific language governing permissions and
limitations under the License.
*/

.mx_NotificationSettingsTab .mx_SettingsTab_heading {
.mx_NotificationUserSettingsTab .mx_SettingsTab_heading {
margin-bottom: 10px; // Give some spacing between the title and the first elements
}
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,11 @@ See the License for the specific language governing permissions and
limitations under the License.
*/

.mx_PreferencesSettingsTab .mx_Field {
.mx_PreferencesUserSettingsTab .mx_Field {
margin-right: 100px; // Align with the rest of the controls
}

.mx_PreferencesSettingsTab .mx_Field input {
.mx_PreferencesUserSettingsTab .mx_Field input {
display: block;

// Subtract 10px padding on left and right
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,40 +14,40 @@ See the License for the specific language governing permissions and
limitations under the License.
*/

.mx_SecuritySettingsTab .mx_DevicesPanel {
.mx_SecurityUserSettingsTab .mx_DevicesPanel {
// Normally the panel is 880px, however this can easily overflow the container.
// TODO: Fix the table to not be squishy
width: auto;
max-width: 880px;
}

.mx_SecuritySettingsTab_deviceInfo {
.mx_SecurityUserSettingsTab_deviceInfo {
display: table;
padding-left: 0;
}

.mx_SecuritySettingsTab_deviceInfo > li {
.mx_SecurityUserSettingsTab_deviceInfo > li {
display: table-row;
}

.mx_SecuritySettingsTab_deviceInfo > li > label,
.mx_SecuritySettingsTab_deviceInfo > li > span {
.mx_SecurityUserSettingsTab_deviceInfo > li > label,
.mx_SecurityUserSettingsTab_deviceInfo > li > span {
display: table-cell;
padding-right: 1em;
}

.mx_SecuritySettingsTab_importExportButtons .mx_AccessibleButton {
.mx_SecurityUserSettingsTab_importExportButtons .mx_AccessibleButton {
margin-right: 10px;
}

.mx_SecuritySettingsTab_importExportButtons {
.mx_SecurityUserSettingsTab_importExportButtons {
margin-bottom: 15px;
}

.mx_SecuritySettingsTab_ignoredUser {
.mx_SecurityUserSettingsTab_ignoredUser {
margin-bottom: 5px;
}

.mx_SecuritySettingsTab_ignoredUser .mx_AccessibleButton {
.mx_SecurityUserSettingsTab_ignoredUser .mx_AccessibleButton {
margin-right: 10px;
}
Original file line number Diff line number Diff line change
Expand Up @@ -14,15 +14,15 @@ See the License for the specific language governing permissions and
limitations under the License.
*/

.mx_VoiceSettingsTab .mx_Field select {
.mx_VoiceUserSettingsTab .mx_Field select {
width: 100%;
max-width: 100%;
}

.mx_VoiceSettingsTab .mx_Field {
.mx_VoiceUserSettingsTab .mx_Field {
margin-right: 100px; // align with the rest of the fields
}

.mx_VoiceSettingsTab_missingMediaPermissions {
.mx_VoiceUserSettingsTab_missingMediaPermissions {
margin-bottom: 15px;
}
8 changes: 4 additions & 4 deletions src/components/views/dialogs/RoomSettingsDialog.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,10 @@ import React from 'react';
import PropTypes from 'prop-types';
import {Tab, TabbedView} from "../../structures/TabbedView";
import {_t, _td} from "../../../languageHandler";
import AdvancedRoomSettingsTab from "../settings/tabs/AdvancedRoomSettingsTab";
import RolesRoomSettingsTab from "../settings/tabs/RolesRoomSettingsTab";
import GeneralRoomSettingsTab from "../settings/tabs/GeneralRoomSettingsTab";
import SecurityRoomSettingsTab from "../settings/tabs/SecurityRoomSettingsTab";
import AdvancedRoomSettingsTab from "../settings/tabs/room/AdvancedRoomSettingsTab";
import RolesRoomSettingsTab from "../settings/tabs/room/RolesRoomSettingsTab";
import GeneralRoomSettingsTab from "../settings/tabs/room/GeneralRoomSettingsTab";
import SecurityRoomSettingsTab from "../settings/tabs/room/SecurityRoomSettingsTab";
import sdk from "../../../index";

export default class RoomSettingsDialog extends React.Component {
Expand Down
30 changes: 15 additions & 15 deletions src/components/views/dialogs/UserSettingsDialog.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,15 +18,15 @@ import React from 'react';
import PropTypes from 'prop-types';
import {Tab, TabbedView} from "../../structures/TabbedView";
import {_t, _td} from "../../../languageHandler";
import GeneralUserSettingsTab from "../settings/tabs/GeneralUserSettingsTab";
import GeneralUserSettingsTab from "../settings/tabs/user/GeneralUserSettingsTab";
import SettingsStore from "../../../settings/SettingsStore";
import LabsSettingsTab from "../settings/tabs/LabsSettingsTab";
import SecuritySettingsTab from "../settings/tabs/SecuritySettingsTab";
import NotificationSettingsTab from "../settings/tabs/NotificationSettingsTab";
import PreferencesSettingsTab from "../settings/tabs/PreferencesSettingsTab";
import VoiceSettingsTab from "../settings/tabs/VoiceSettingsTab";
import HelpSettingsTab from "../settings/tabs/HelpSettingsTab";
import FlairSettingsTab from "../settings/tabs/FlairSettingsTab";
import LabsUserSettingsTab from "../settings/tabs/user/LabsUserSettingsTab";
import SecurityUserSettingsTab from "../settings/tabs/user/SecurityUserSettingsTab";
import NotificationUserSettingsTab from "../settings/tabs/user/NotificationUserSettingsTab";
import PreferencesUserSettingsTab from "../settings/tabs/user/PreferencesUserSettingsTab";
import VoiceUserSettingsTab from "../settings/tabs/user/VoiceUserSettingsTab";
import HelpUserSettingsTab from "../settings/tabs/user/HelpUserSettingsTab";
import FlairUserSettingsTab from "../settings/tabs/user/FlairUserSettingsTab";
import sdk from "../../../index";

export default class UserSettingsDialog extends React.Component {
Expand All @@ -45,39 +45,39 @@ export default class UserSettingsDialog extends React.Component {
tabs.push(new Tab(
_td("Flair"),
"mx_UserSettingsDialog_flairIcon",
<FlairSettingsTab />,
<FlairUserSettingsTab />,
));
tabs.push(new Tab(
_td("Notifications"),
"mx_UserSettingsDialog_bellIcon",
<NotificationSettingsTab />,
<NotificationUserSettingsTab />,
));
tabs.push(new Tab(
_td("Preferences"),
"mx_UserSettingsDialog_preferencesIcon",
<PreferencesSettingsTab />,
<PreferencesUserSettingsTab />,
));
tabs.push(new Tab(
_td("Voice & Video"),
"mx_UserSettingsDialog_voiceIcon",
<VoiceSettingsTab />,
<VoiceUserSettingsTab />,
));
tabs.push(new Tab(
_td("Security & Privacy"),
"mx_UserSettingsDialog_securityIcon",
<SecuritySettingsTab />,
<SecurityUserSettingsTab />,
));
if (SettingsStore.getLabsFeatures().length > 0) {
tabs.push(new Tab(
_td("Labs"),
"mx_UserSettingsDialog_labsIcon",
<LabsSettingsTab />,
<LabsUserSettingsTab />,
));
}
tabs.push(new Tab(
_td("Help & About"),
"mx_UserSettingsDialog_helpIcon",
<HelpSettingsTab closeSettingsFn={this.props.onFinished} />,
<HelpUserSettingsTab closeSettingsFn={this.props.onFinished} />,
));

return tabs;
Expand Down
4 changes: 3 additions & 1 deletion src/components/views/groups/GroupPublicityToggle.js
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,9 @@ export default React.createClass({
render() {
const GroupTile = sdk.getComponent('groups.GroupTile');
return <div className="mx_GroupPublicity_toggle">
<GroupTile groupId={this.props.groupId} showDescription={false} avatarHeight={40} />
<GroupTile groupId={this.props.groupId} showDescription={false}
avatarHeight={40} draggable={false}
/>
<ToggleSwitch checked={this.state.isGroupPublicised}
disabled={!this.state.ready || this.state.busy}
onChange={this._onPublicityToggle} />
Expand Down
92 changes: 47 additions & 45 deletions src/components/views/groups/GroupTile.js
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ const GroupTile = React.createClass({
showDescription: PropTypes.bool,
// Height of the group avatar in pixels
avatarHeight: PropTypes.number,
draggable: PropTypes.bool,
},

contextTypes: {
Expand All @@ -49,6 +50,7 @@ const GroupTile = React.createClass({
return {
showDescription: true,
avatarHeight: 50,
draggable: true,
};
},

Expand Down Expand Up @@ -78,54 +80,54 @@ const GroupTile = React.createClass({
<div className="mx_GroupTile_desc">{ profile.shortDescription }</div> :
<div />;
const httpUrl = profile.avatarUrl ? this.context.matrixClient.mxcUrlToHttp(
profile.avatarUrl, avatarHeight, avatarHeight, "crop",
) : null;
profile.avatarUrl, avatarHeight, avatarHeight, "crop") : null;

let avatarElement = (
<div className="mx_GroupTile_avatar">
<BaseAvatar
name={name}
idName={this.props.groupId}
url={httpUrl}
width={avatarHeight}
height={avatarHeight} />
</div>
);
if (this.props.draggable) {
const avatarClone = avatarElement;
avatarElement = (
<Droppable droppableId="my-groups-droppable" type="draggable-TagTile">
{ (droppableProvided, droppableSnapshot) => (
<div ref={droppableProvided.innerRef}>
<Draggable
key={"GroupTile " + this.props.groupId}
draggableId={"GroupTile " + this.props.groupId}
index={this.props.groupId}
type="draggable-TagTile"
>
{ (provided, snapshot) => (
<div>
<div
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
>
{avatarClone}
</div>
{ /* Instead of a blank placeholder, use a copy of the avatar itself. */ }
{ provided.placeholder ? avatarClone : <div /> }
</div>
) }
</Draggable>
</div>
) }
</Droppable>
);
}

// XXX: Use onMouseDown as a workaround for https://github.com/atlassian/react-beautiful-dnd/issues/273
// instead of onClick. Otherwise we experience https://github.com/vector-im/riot-web/issues/6156
return <AccessibleButton className="mx_GroupTile" onMouseDown={this.onMouseDown} onClick={nop}>
<Droppable droppableId="my-groups-droppable" type="draggable-TagTile">
{ (droppableProvided, droppableSnapshot) => (
<div ref={droppableProvided.innerRef}>
<Draggable
key={"GroupTile " + this.props.groupId}
draggableId={"GroupTile " + this.props.groupId}
index={this.props.groupId}
type="draggable-TagTile"
>
{ (provided, snapshot) => (
<div>
<div
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
>
<div className="mx_GroupTile_avatar">
<BaseAvatar
name={name}
idName={this.props.groupId}
url={httpUrl}
width={avatarHeight}
height={avatarHeight} />
</div>
</div>
{ /* Instead of a blank placeholder, use a copy of the avatar itself. */ }
{ provided.placeholder ?
<div className="mx_GroupTile_avatar">
<BaseAvatar
name={name}
idName={this.props.groupId}
url={httpUrl}
width={avatarHeight}
height={avatarHeight} />
</div> :
<div />
}
</div>
) }
</Draggable>
</div>
) }
</Droppable>
{ avatarElement }
<div className="mx_GroupTile_profile">
<div className="mx_GroupTile_name">{ name }</div>
{ descElement }
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,11 @@ limitations under the License.

import React from 'react';
import PropTypes from 'prop-types';
import {_t} from "../../../../languageHandler";
import MatrixClientPeg from "../../../../MatrixClientPeg";
import sdk from "../../../../index";
import AccessibleButton from "../../elements/AccessibleButton";
import Modal from "../../../../Modal";
import {_t} from "../../../../../languageHandler";
import MatrixClientPeg from "../../../../../MatrixClientPeg";
import sdk from "../../../../..";
import AccessibleButton from "../../../elements/AccessibleButton";
import Modal from "../../../../../Modal";

export default class AdvancedRoomSettingsTab extends React.Component {
static propTypes = {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,14 +16,14 @@ limitations under the License.

import React from 'react';
import PropTypes from 'prop-types';
import {_t} from "../../../../languageHandler";
import RoomProfileSettings from "../../room_settings/RoomProfileSettings";
import MatrixClientPeg from "../../../../MatrixClientPeg";
import sdk from "../../../../index";
import AccessibleButton from "../../elements/AccessibleButton";
import {_t} from "../../../../../languageHandler";
import RoomProfileSettings from "../../../room_settings/RoomProfileSettings";
import MatrixClientPeg from "../../../../../MatrixClientPeg";
import sdk from "../../../../..";
import AccessibleButton from "../../../elements/AccessibleButton";
import {MatrixClient} from "matrix-js-sdk";
import dis from "../../../../dispatcher";
import LabelledToggleSwitch from "../../elements/LabelledToggleSwitch";
import dis from "../../../../../dispatcher";
import LabelledToggleSwitch from "../../../elements/LabelledToggleSwitch";

export default class GeneralRoomSettingsTab extends React.Component {
static childContextTypes = {
Expand Down
Loading