Improve UX

This commit is contained in:
Will Hunt 2019-05-15 15:52:42 +01:00
parent 079bdd44a4
commit d752de0972
3 changed files with 47 additions and 10 deletions

View file

@ -76,6 +76,21 @@ limitations under the License.
display: none; display: none;
} }
.mx_NotificationSound_resetSound { .mx_NotificationSound_browse {
margin-left: 5px; 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;
} }

View file

@ -65,14 +65,19 @@ export default class NotificationsSettingsTab extends React.Component {
this.setState({ this.setState({
uploadedFile: file, uploadedFile: file,
}); });
}
async _onClickSaveSound(e) {
e.stopPropagation();
e.preventDefault();
try { try {
await this._saveSound(); await this._saveSound();
} catch (ex) { } catch (ex) {
console.error( console.error(
`Unable to save notification sound for ${this.props.roomId}`, `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) { if (!this.state.uploadedFile) {
return; return;
} }
let type = this.state.uploadedFile.type; let type = this.state.uploadedFile.type;
if (type === "video/ogg") { if (type === "video/ogg") {
// XXX: I've observed browsers allowing users to pick a audio/ogg files, // 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. // suck at detecting mimetypes.
type = "audio/ogg"; type = "audio/ogg";
} }
const url = await MatrixClientPeg.get().uploadContent( const url = await MatrixClientPeg.get().uploadContent(
this.state.uploadedFile, { this.state.uploadedFile, {
type, type,
@ -96,7 +103,6 @@ export default class NotificationsSettingsTab extends React.Component {
await SettingsStore.setValue( await SettingsStore.setValue(
"notificationSound", "notificationSound",
this.props.roomId, this.props.roomId,
SettingsStore.
SettingLevel.ROOM_ACCOUNT, SettingLevel.ROOM_ACCOUNT,
{ {
name: this.state.uploadedFile.name, name: this.state.uploadedFile.name,
@ -108,7 +114,6 @@ export default class NotificationsSettingsTab extends React.Component {
this.setState({ this.setState({
uploadedFile: null, uploadedFile: null,
uploadedFileUrl: null,
currentSound: this.state.uploadedFile.name, currentSound: this.state.uploadedFile.name,
}); });
} }
@ -129,13 +134,25 @@ export default class NotificationsSettingsTab extends React.Component {
} }
render() { render() {
let currentUploadedFile = null;
if (this.state.uploadedFile) {
currentUploadedFile = (
<div>
<span>{_t("Uploaded sound")}: <code>{this.state.uploadedFile.name}</code></span>
</div>
);
}
return ( return (
<div className="mx_SettingsTab"> <div className="mx_SettingsTab">
<div className="mx_SettingsTab_heading">{_t("Notifications")}</div> <div className="mx_SettingsTab_heading">{_t("Notifications")}</div>
<div className='mx_SettingsTab_section mx_SettingsTab_subsectionText'> <div className='mx_SettingsTab_section mx_SettingsTab_subsectionText'>
<span className='mx_SettingsTab_subheading'>{_t("Sounds")}</span> <span className='mx_SettingsTab_subheading'>{_t("Sounds")}</span>
<div> <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>
<div> <div>
<h3>{_t("Set a new custom sound")}</h3> <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/*" /> <input ref="soundUpload" className="mx_NotificationSound_soundUpload" type="file" onChange={this._onSoundUploadChanged.bind(this)} accept="audio/*" />
</form> </form>
<AccessibleButton onClick={this._triggerUploader.bind(this)} kind="primary"> {currentUploadedFile}
<AccessibleButton className="mx_NotificationSound_browse" onClick={this._triggerUploader.bind(this)} kind="primary">
{_t("Browse")} {_t("Browse")}
</AccessibleButton> </AccessibleButton>
<AccessibleButton className="mx_NotificationSound_resetSound" onClick={this._clearSound.bind(this)} kind="primary"> <AccessibleButton className="mx_NotificationSound_save" disabled={this.state.uploadedFile == null} onClick={this._onClickSaveSound.bind(this)} kind="primary">
{_t("Reset")} {_t("Save")}
</AccessibleButton> </AccessibleButton>
<br />
</div> </div>
</div> </div>
</div> </div>

View file

@ -617,10 +617,12 @@
"Room Addresses": "Room Addresses", "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?", "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", "URL Previews": "URL Previews",
"Uploaded sound": "Uploaded sound",
"Sounds": "Sounds", "Sounds": "Sounds",
"Notification sound": "Notification sound",
"Reset": "Reset",
"Set a new custom sound": "Set a new custom sound", "Set a new custom sound": "Set a new custom sound",
"Browse": "Browse", "Browse": "Browse",
"Reset": "Reset",
"Change room avatar": "Change room avatar", "Change room avatar": "Change room avatar",
"Change room name": "Change room name", "Change room name": "Change room name",
"Change main address for the room": "Change main address for the room", "Change main address for the room": "Change main address for the room",