Merge pull request #4846 from matrix-org/t3chguy/notifications0
Fix Room Custom Sounds regression and make ProgressBar relevant again
This commit is contained in:
commit
446f3e35e9
7 changed files with 75 additions and 70 deletions
|
@ -700,3 +700,24 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@define-mixin ProgressBarColour $colour {
|
||||||
|
color: $colour;
|
||||||
|
&::-moz-progress-bar {
|
||||||
|
background-color: $colour;
|
||||||
|
}
|
||||||
|
&::-webkit-progress-value {
|
||||||
|
background-color: $colour;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@define-mixin ProgressBarBorderRadius $radius {
|
||||||
|
border-radius: $radius;
|
||||||
|
&::-moz-progress-bar {
|
||||||
|
border-radius: $radius;
|
||||||
|
}
|
||||||
|
&::-webkit-progress-bar,
|
||||||
|
&::-webkit-progress-value {
|
||||||
|
border-radius: $radius;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -18,16 +18,6 @@ $PassphraseStrengthHigh: $accent-color;
|
||||||
$PassphraseStrengthMedium: $username-variant5-color;
|
$PassphraseStrengthMedium: $username-variant5-color;
|
||||||
$PassphraseStrengthLow: $notice-primary-color;
|
$PassphraseStrengthLow: $notice-primary-color;
|
||||||
|
|
||||||
@define-mixin ProgressBarColour $colour {
|
|
||||||
color: $colour;
|
|
||||||
&::-moz-progress-bar {
|
|
||||||
background-color: $colour;
|
|
||||||
}
|
|
||||||
&::-webkit-progress-value {
|
|
||||||
background-color: $colour;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
progress.mx_PassphraseField_progress {
|
progress.mx_PassphraseField_progress {
|
||||||
appearance: none;
|
appearance: none;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
@ -36,15 +26,7 @@ progress.mx_PassphraseField_progress {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -12px;
|
top: -12px;
|
||||||
|
|
||||||
border-radius: 2px;
|
@mixin ProgressBarBorderRadius "2px";
|
||||||
&::-moz-progress-bar {
|
|
||||||
border-radius: 2px;
|
|
||||||
}
|
|
||||||
&::-webkit-progress-bar,
|
|
||||||
&::-webkit-progress-value {
|
|
||||||
border-radius: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin ProgressBarColour $PassphraseStrengthLow;
|
@mixin ProgressBarColour $PassphraseStrengthLow;
|
||||||
&[value="2"], &[value="3"] {
|
&[value="2"], &[value="3"] {
|
||||||
@mixin ProgressBarColour $PassphraseStrengthMedium;
|
@mixin ProgressBarColour $PassphraseStrengthMedium;
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
/*
|
/*
|
||||||
Copyright 2015, 2016 OpenMarket Ltd
|
Copyright 2020 The Matrix.org Foundation C.I.C.
|
||||||
|
|
||||||
Licensed under the Apache License, Version 2.0 (the "License");
|
Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
you may not use this file except in compliance with the License.
|
you may not use this file except in compliance with the License.
|
||||||
|
@ -14,12 +14,26 @@ See the License for the specific language governing permissions and
|
||||||
limitations under the License.
|
limitations under the License.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
.mx_ProgressBar {
|
progress.mx_ProgressBar {
|
||||||
height: 5px;
|
height: 4px;
|
||||||
border: 1px solid $progressbar-color;
|
width: 60px;
|
||||||
}
|
border-radius: 10px;
|
||||||
|
overflow: hidden;
|
||||||
|
appearance: none;
|
||||||
|
border: 0;
|
||||||
|
|
||||||
.mx_ProgressBar_fill {
|
@mixin ProgressBarBorderRadius "10px";
|
||||||
height: 100%;
|
@mixin ProgressBarColour $accent-color;
|
||||||
background-color: $progressbar-color;
|
::-webkit-progress-value {
|
||||||
|
transition: width 1s;
|
||||||
|
}
|
||||||
|
::-moz-progress-bar {
|
||||||
|
transition: padding-bottom 1s;
|
||||||
|
padding-bottom: var(--value);
|
||||||
|
transform-origin: 0 0;
|
||||||
|
transform: rotate(-90deg) translateX(-15px);
|
||||||
|
padding-left: 15px;
|
||||||
|
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,39 +0,0 @@
|
||||||
/*
|
|
||||||
Copyright 2015, 2016 OpenMarket Ltd
|
|
||||||
Copyright 2019 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 PropTypes from 'prop-types';
|
|
||||||
import createReactClass from 'create-react-class';
|
|
||||||
|
|
||||||
export default createReactClass({
|
|
||||||
displayName: 'ProgressBar',
|
|
||||||
propTypes: {
|
|
||||||
value: PropTypes.number,
|
|
||||||
max: PropTypes.number,
|
|
||||||
},
|
|
||||||
|
|
||||||
render: function() {
|
|
||||||
// Would use an HTML5 progress tag but if that doesn't animate if you
|
|
||||||
// use the HTML attributes rather than styles
|
|
||||||
const progressStyle = {
|
|
||||||
width: ((this.props.value / this.props.max) * 100)+"%",
|
|
||||||
};
|
|
||||||
return (
|
|
||||||
<div className="mx_ProgressBar"><div className="mx_ProgressBar_fill" style={progressStyle}></div></div>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
});
|
|
28
src/components/views/elements/ProgressBar.tsx
Normal file
28
src/components/views/elements/ProgressBar.tsx
Normal file
|
@ -0,0 +1,28 @@
|
||||||
|
/*
|
||||||
|
Copyright 2020 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";
|
||||||
|
|
||||||
|
interface IProps {
|
||||||
|
value: number;
|
||||||
|
max: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ProgressBar: React.FC<IProps> = ({value, max}) => {
|
||||||
|
return <progress className="mx_ProgressBar" max={max} value={value} />;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ProgressBar;
|
|
@ -41,9 +41,8 @@ function StyledRadioGroup<T extends string>({name, definitions, value, className
|
||||||
};
|
};
|
||||||
|
|
||||||
return <React.Fragment>
|
return <React.Fragment>
|
||||||
{definitions.map(d => <React.Fragment>
|
{definitions.map(d => <React.Fragment key={d.value}>
|
||||||
<StyledRadioButton
|
<StyledRadioButton
|
||||||
key={d.value}
|
|
||||||
className={classNames(className, d.className)}
|
className={classNames(className, d.className)}
|
||||||
onChange={_onChange}
|
onChange={_onChange}
|
||||||
checked={d.value === value}
|
checked={d.value === value}
|
||||||
|
|
|
@ -28,6 +28,8 @@ export default class NotificationsSettingsTab extends React.Component {
|
||||||
roomId: PropTypes.string.isRequired,
|
roomId: PropTypes.string.isRequired,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
_soundUpload = createRef();
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
super();
|
super();
|
||||||
|
|
||||||
|
@ -44,8 +46,6 @@ export default class NotificationsSettingsTab extends React.Component {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
this.setState({currentSound: soundData.name || soundData.url});
|
this.setState({currentSound: soundData.name || soundData.url});
|
||||||
|
|
||||||
this._soundUpload = createRef();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
async _triggerUploader(e) {
|
async _triggerUploader(e) {
|
||||||
|
|
Loading…
Reference in a new issue