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

Notification settings UI refresh #6352

Merged
merged 17 commits into from
Jul 17, 2021
Merged
Show file tree
Hide file tree
Changes from 11 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
3 changes: 2 additions & 1 deletion res/css/_components.scss
Original file line number Diff line number Diff line change
Expand Up @@ -148,6 +148,7 @@
@import "./views/elements/_StyledCheckbox.scss";
@import "./views/elements/_StyledRadioButton.scss";
@import "./views/elements/_SyntaxHighlight.scss";
@import "./views/elements/_TagComposer.scss";
@import "./views/elements/_TextWithTooltip.scss";
@import "./views/elements/_ToggleSwitch.scss";
@import "./views/elements/_Tooltip.scss";
Expand Down Expand Up @@ -260,9 +261,9 @@
@import "./views/toasts/_NonUrgentEchoFailureToast.scss";
@import "./views/verification/_VerificationShowSas.scss";
@import "./views/voip/_CallContainer.scss";
@import "./views/voip/_CallPreview.scss";
@import "./views/voip/_CallView.scss";
@import "./views/voip/_CallViewForRoom.scss";
@import "./views/voip/_CallPreview.scss";
@import "./views/voip/_DialPad.scss";
@import "./views/voip/_DialPadContextMenu.scss";
@import "./views/voip/_DialPadModal.scss";
Expand Down
77 changes: 77 additions & 0 deletions res/css/views/elements/_TagComposer.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
/*
Copyright 2021 The Matrix.org Foundation C.I.C.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

.mx_TagComposer {
.mx_TagComposer_input {
display: flex;

.mx_Field {
flex: 1;
margin: 0; // override from field styles
}

.mx_AccessibleButton {
min-width: 70px;
padding: 0; // override from button styles
margin-left: 16px; // distance from <Field>
}

.mx_Field, .mx_Field input, .mx_AccessibleButton {
// So they look related to each other by feeling the same
border-radius: 8px;
}
}

.mx_TagComposer_tags {
display: flex;
flex-wrap: wrap;
margin-top: 12px; // this plus 12px from the tags makes 24px from the input

.mx_TagComposer_tag {
padding: 6px 8px 8px 12px;
position: relative;
margin-right: 12px;
margin-top: 12px;

// Cheaty way to get an opacified variable colour background
&::before {
content: '';
border-radius: 20px;
background-color: $tertiary-fg-color;
opacity: 0.15;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;

// Pass through the pointer otherwise we have effectively put a whole div
// on top of the component, which makes it hard to interact with buttons.
pointer-events: none;
}
}

.mx_AccessibleButton {
background-image: url('$(res)/img/subtract.svg');
width: 16px;
height: 16px;
margin-left: 8px;
display: inline-block;
vertical-align: middle;
cursor: pointer;
}
}
}
155 changes: 76 additions & 79 deletions res/css/views/settings/_Notifications.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/*
Copyright 2015, 2016 OpenMarket Ltd
Copyright 2015 - 2021 The Matrix.org Foundation C.I.C.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
Expand All @@ -14,82 +14,79 @@ See the License for the specific language governing permissions and
limitations under the License.
*/

.mx_UserNotifSettings_tableRow {
display: table-row;
}

.mx_UserNotifSettings_inputCell {
display: table-cell;
padding-bottom: 8px;
padding-right: 8px;
width: 16px;
}

.mx_UserNotifSettings_labelCell {
padding-bottom: 8px;
width: 400px;
display: table-cell;
}

.mx_UserNotifSettings_pushRulesTableWrapper {
padding-bottom: 8px;
}

.mx_UserNotifSettings_pushRulesTable {
width: 100%;
table-layout: fixed;
}

.mx_UserNotifSettings_pushRulesTable thead {
font-weight: bold;
}

.mx_UserNotifSettings_pushRulesTable tbody th {
font-weight: 400;
}

.mx_UserNotifSettings_pushRulesTable tbody th:first-child {
text-align: left;
}

.mx_UserNotifSettings_keywords {
cursor: pointer;
color: $accent-color;
}

.mx_UserNotifSettings_devicesTable td {
padding-left: 20px;
padding-right: 20px;
}

.mx_UserNotifSettings_notifTable {
display: table;
position: relative;
}

.mx_UserNotifSettings_notifTable .mx_Spinner {
position: absolute;
}

.mx_NotificationSound_soundUpload {
display: none;
}

.mx_NotificationSound_browse {
color: $accent-color;
border: 1px solid $accent-color;
background-color: transparent;
}

.mx_NotificationSound_save {
margin-left: 5px;
color: white;
background-color: $accent-color;
}

.mx_NotificationSound_resetSound {
margin-top: 5px;
color: white;
border: $warning-color;
background-color: $warning-color;
.mx_UserNotifSettings {
color: $primary-fg-color; // override from default settings page styles

.mx_UserNotifSettings_pushRulesTable {
width: calc(100% + 12px); // +12px to line up center of 'Noisy' column with toggle switches
table-layout: fixed;
border-collapse: collapse;
border-spacing: 0;
margin-top: 40px;

tr > th {
font-weight: 600; // semi bold
turt2live marked this conversation as resolved.
Show resolved Hide resolved
}

tr > th:first-child {
text-align: left;
font-size: $font-18px;
}

tr > th:nth-child(n + 2) {
color: $secondary-fg-color;
font-size: $font-12px;
vertical-align: middle;
width: 66px;
}

tr > td:nth-child(n + 2) {
text-align: center;
}

tr > td {
padding-top: 8px;
}

// Override StyledRadioButton default styles
.mx_RadioButton {
justify-content: center;

.mx_RadioButton_content {
display: none;
}

.mx_RadioButton_spacer {
display: none;
}
}
}

.mx_UserNotifSettings_floatingSection {
margin-top: 40px;

& > div:first-child { // section header
font-size: $font-18px;
font-weight: 600; // semi bold
turt2live marked this conversation as resolved.
Show resolved Hide resolved
}

> table {
border-collapse: collapse;
border-spacing: 0;
margin-top: 8px;

tr > td:first-child {
// Just for a bit of spacing
padding-right: 8px;
}
}
}

.mx_UserNotifSettings_clearNotifsButton {
margin-top: 8px;
}

.mx_TagComposer {
margin-top: 35px; // lots of distance from the last line of the table
}
}
3 changes: 3 additions & 0 deletions res/img/subtract.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
39 changes: 0 additions & 39 deletions src/components/views/elements/Spinner.js

This file was deleted.

45 changes: 45 additions & 0 deletions src/components/views/elements/Spinner.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
/*
Copyright 2015-2021 The Matrix.org Foundation C.I.C.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

import React from "react";
import { _t } from "../../../languageHandler";

interface IProps {
w?: number;
h?: number;
message?: string;
}

export default class Spinner extends React.PureComponent<IProps> {
public static defaultProps: Partial<IProps> = {
w: 32,
h: 32,
};

public render() {
const { w, h, message } = this.props;
return (
<div className="mx_Spinner">
{ message && <React.Fragment><div className="mx_Spinner_Msg">{ message }</div>&nbsp;</React.Fragment> }
<div
className="mx_Spinner_icon"
style={{ width: w, height: h }}
aria-label={_t("Loading...")}
/>
</div>
);
}
}
Loading