Improve UX
This commit is contained in:
Will Hunt
parent
079bdd44a4
commit
d752de0972
3 changed files with 47 additions and 10 deletions
|
|
@ -76,6 +76,21 @@ limitations under the License.
|
|||
display: none;
|
||||
}
|
||||
|
||||
.mx_NotificationSound_resetSound {
|
||||
margin-left: 5px;
|
||||
.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;
|
||||
}
|
||||
|
|
@ -20,7 +20,7 @@ import {_t} from "../../../../../languageHandler";
|
|||
import MatrixClientPeg from "../../../../../MatrixClientPeg";
|
||||
import AccessibleButton from "../../../elements/AccessibleButton";
|
||||
import Notifier from "../../../../../Notifier";
|
||||
import SettingsStore from '../../../../../settings/SettingsStore';
|
||||
import SettingsStore from '../../../../../settings/SettingsStore';
|
||||
import { SettingLevel } from '../../../../../settings/SettingsStore';
|
||||
|
||||
export default class NotificationsSettingsTab extends React.Component {
|
||||
|
|
@ -65,14 +65,19 @@ export default class NotificationsSettingsTab extends React.Component {
|
|||
this.setState({
|
||||
uploadedFile: file,
|
||||
});
|
||||
}
|
||||
|
||||
async _onClickSaveSound(e) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
|
||||
try {
|
||||
await this._saveSound();
|
||||
} catch (ex) {
|
||||
console.error(
|
||||
`Unable to save notification sound for ${this.props.roomId}`,
|
||||
ex,
|
||||
);
|
||||
console.error(ex);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -80,6 +85,7 @@ export default class NotificationsSettingsTab extends React.Component {
|
|||
if (!this.state.uploadedFile) {
|
||||
return;
|
||||
}
|
||||
|
||||
let type = this.state.uploadedFile.type;
|
||||
if (type === "video/ogg") {
|
||||
// XXX: I've observed browsers allowing users to pick a audio/ogg files,
|
||||
|
|
@ -87,6 +93,7 @@ export default class NotificationsSettingsTab extends React.Component {
|
|||
// suck at detecting mimetypes.
|
||||
type = "audio/ogg";
|
||||
}
|
||||
|
||||
const url = await MatrixClientPeg.get().uploadContent(
|
||||
this.state.uploadedFile, {
|
||||
type,
|
||||
|
|
@ -96,7 +103,6 @@ export default class NotificationsSettingsTab extends React.Component {
|
|||
await SettingsStore.setValue(
|
||||
"notificationSound",
|
||||
this.props.roomId,
|
||||
SettingsStore.
|
||||
SettingLevel.ROOM_ACCOUNT,
|
||||
{
|
||||
name: this.state.uploadedFile.name,
|
||||
|
|
@ -108,7 +114,6 @@ export default class NotificationsSettingsTab extends React.Component {
|
|||
|
||||
this.setState({
|
||||
uploadedFile: null,
|
||||
uploadedFileUrl: null,
|
||||
currentSound: this.state.uploadedFile.name,
|
||||
});
|
||||
}
|
||||
|
|
@ -129,13 +134,25 @@ export default class NotificationsSettingsTab extends React.Component {
|
|||
}
|
||||
|
||||
render() {
|
||||
let currentUploadedFile = null;
|
||||
if (this.state.uploadedFile) {
|
||||
currentUploadedFile = (
|
||||
<div>
|
||||
<span>{_t("Uploaded sound")}: <code>{this.state.uploadedFile.name}</code></span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="mx_SettingsTab">
|
||||
<div className="mx_SettingsTab_heading">{_t("Notifications")}</div>
|
||||
<div className='mx_SettingsTab_section mx_SettingsTab_subsectionText'>
|
||||
<span className='mx_SettingsTab_subheading'>{_t("Sounds")}</span>
|
||||
<div>
|
||||
<span>{_t("Custom Notification Sounds")}: <code>{this.state.currentSound}</code></span>
|
||||
<span>{_t("Notification sound")}: <code>{this.state.currentSound}</code></span><br/>
|
||||
<AccessibleButton className="mx_NotificationSound_resetSound" disabled={this.state.currentSound == "default"} onClick={this._clearSound.bind(this)} kind="primary">
|
||||
{_t("Reset")}
|
||||
</AccessibleButton>
|
||||
</div>
|
||||
<div>
|
||||
<h3>{_t("Set a new custom sound")}</h3>
|
||||
|
|
@ -143,13 +160,16 @@ export default class NotificationsSettingsTab extends React.Component {
|
|||
<input ref="soundUpload" className="mx_NotificationSound_soundUpload" type="file" onChange={this._onSoundUploadChanged.bind(this)} accept="audio/*" />
|
||||
</form>
|
||||
|
||||
<AccessibleButton onClick={this._triggerUploader.bind(this)} kind="primary">
|
||||
{currentUploadedFile}
|
||||
|
||||
<AccessibleButton className="mx_NotificationSound_browse" onClick={this._triggerUploader.bind(this)} kind="primary">
|
||||
{_t("Browse")}
|
||||
</AccessibleButton>
|
||||
|
||||
<AccessibleButton className="mx_NotificationSound_resetSound" onClick={this._clearSound.bind(this)} kind="primary">
|
||||
{_t("Reset")}
|
||||
<AccessibleButton className="mx_NotificationSound_save" disabled={this.state.uploadedFile == null} onClick={this._onClickSaveSound.bind(this)} kind="primary">
|
||||
{_t("Save")}
|
||||
</AccessibleButton>
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -617,10 +617,12 @@
|
|||
"Room Addresses": "Room Addresses",
|
||||
"Publish this room to the public in %(domain)s's room directory?": "Publish this room to the public in %(domain)s's room directory?",
|
||||
"URL Previews": "URL Previews",
|
||||
"Uploaded sound": "Uploaded sound",
|
||||
"Sounds": "Sounds",
|
||||
"Notification sound": "Notification sound",
|
||||
"Reset": "Reset",
|
||||
"Set a new custom sound": "Set a new custom sound",
|
||||
"Browse": "Browse",
|
||||
"Reset": "Reset",
|
||||
"Change room avatar": "Change room avatar",
|
||||
"Change room name": "Change room name",
|
||||
"Change main address for the room": "Change main address for the room",
|
||||
|
|
|
|||
Loading…
Reference in a new issue