mirror of
https://github.com/vector-im/element-web.git
synced 2024-11-16 13:14:58 +08:00
Add ChangeDisplayName component and use it
This commit is contained in:
parent
fca65a8cdb
commit
c22442f6d1
@ -23,6 +23,9 @@ limitations under the License.
|
||||
|
||||
var skin = {};
|
||||
|
||||
skin['atoms.create_room.CreateRoomButton'] = require('./views/atoms/create_room/CreateRoomButton');
|
||||
skin['atoms.create_room.Presets'] = require('./views/atoms/create_room/Presets');
|
||||
skin['atoms.create_room.RoomAlias'] = require('./views/atoms/create_room/RoomAlias');
|
||||
skin['atoms.EditableText'] = require('./views/atoms/EditableText');
|
||||
skin['atoms.EnableNotificationsButton'] = require('./views/atoms/EnableNotificationsButton');
|
||||
skin['atoms.ImageView'] = require('./views/atoms/ImageView');
|
||||
@ -30,26 +33,24 @@ skin['atoms.LogoutButton'] = require('./views/atoms/LogoutButton');
|
||||
skin['atoms.MemberAvatar'] = require('./views/atoms/MemberAvatar');
|
||||
skin['atoms.MessageTimestamp'] = require('./views/atoms/MessageTimestamp');
|
||||
skin['atoms.RoomAvatar'] = require('./views/atoms/RoomAvatar');
|
||||
skin['atoms.create_room.CreateRoomButton'] = require('./views/atoms/create_room/CreateRoomButton');
|
||||
skin['atoms.create_room.Presets'] = require('./views/atoms/create_room/Presets');
|
||||
skin['atoms.create_room.RoomAlias'] = require('./views/atoms/create_room/RoomAlias');
|
||||
skin['atoms.voip.VideoFeed'] = require('./views/atoms/voip/VideoFeed');
|
||||
skin['molecules.BottomLeftMenu'] = require('./views/molecules/BottomLeftMenu');
|
||||
skin['molecules.ChangeAvatar'] = require('./views/molecules/ChangeAvatar');
|
||||
skin['molecules.ChangeDisplayName'] = require('./views/molecules/ChangeDisplayName');
|
||||
skin['molecules.ChangePassword'] = require('./views/molecules/ChangePassword');
|
||||
skin['molecules.DateSeparator'] = require('./views/molecules/DateSeparator');
|
||||
skin['molecules.EventAsTextTile'] = require('./views/molecules/EventAsTextTile');
|
||||
skin['molecules.MatrixToolbar'] = require('./views/molecules/MatrixToolbar');
|
||||
skin['molecules.MemberInfo'] = require('./views/molecules/MemberInfo');
|
||||
skin['molecules.MemberTile'] = require('./views/molecules/MemberTile');
|
||||
skin['molecules.MEmoteTile'] = require('./views/molecules/MEmoteTile');
|
||||
skin['molecules.MessageComposer'] = require('./views/molecules/MessageComposer');
|
||||
skin['molecules.MessageTile'] = require('./views/molecules/MessageTile');
|
||||
skin['molecules.MFileTile'] = require('./views/molecules/MFileTile');
|
||||
skin['molecules.MImageTile'] = require('./views/molecules/MImageTile');
|
||||
skin['molecules.MNoticeTile'] = require('./views/molecules/MNoticeTile');
|
||||
skin['molecules.MRoomMemberTile'] = require('./views/molecules/MRoomMemberTile');
|
||||
skin['molecules.MTextTile'] = require('./views/molecules/MTextTile');
|
||||
skin['molecules.MatrixToolbar'] = require('./views/molecules/MatrixToolbar');
|
||||
skin['molecules.MemberInfo'] = require('./views/molecules/MemberInfo');
|
||||
skin['molecules.MemberTile'] = require('./views/molecules/MemberTile');
|
||||
skin['molecules.MessageComposer'] = require('./views/molecules/MessageComposer');
|
||||
skin['molecules.MessageTile'] = require('./views/molecules/MessageTile');
|
||||
skin['molecules.ProgressBar'] = require('./views/molecules/ProgressBar');
|
||||
skin['molecules.RoomCreate'] = require('./views/molecules/RoomCreate');
|
||||
skin['molecules.RoomDropTarget'] = require('./views/molecules/RoomDropTarget');
|
||||
|
56
src/skins/vector/views/molecules/ChangeDisplayName.js
Normal file
56
src/skins/vector/views/molecules/ChangeDisplayName.js
Normal file
@ -0,0 +1,56 @@
|
||||
/*
|
||||
Copyright 2015 OpenMarket Ltd
|
||||
|
||||
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.
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
var React = require('react');
|
||||
var sdk = require('matrix-react-sdk');
|
||||
|
||||
var ChangeDisplayNameController = require("matrix-react-sdk/lib/controllers/molecules/ChangeDisplayName");
|
||||
var Loader = require("react-loader");
|
||||
|
||||
|
||||
module.exports = React.createClass({
|
||||
displayName: 'ChangeDisplayName',
|
||||
mixins: [ChangeDisplayNameController],
|
||||
|
||||
edit: function() {
|
||||
this.refs.displayname_edit.edit()
|
||||
},
|
||||
|
||||
onValueChanged: function(new_value, shouldSubmit) {
|
||||
if (shouldSubmit) {
|
||||
this.changeDisplayname(new_value);
|
||||
}
|
||||
},
|
||||
|
||||
render: function() {
|
||||
if (this.state.busy) {
|
||||
return (
|
||||
<Loader />
|
||||
);
|
||||
} else if (this.state.errorString) {
|
||||
return (
|
||||
<div className="error">{this.state.errorString}</div>
|
||||
);
|
||||
} else {
|
||||
var EditableText = sdk.getComponent('atoms.EditableText');
|
||||
return (
|
||||
<EditableText ref="displayname_edit" initialValue={this.state.displayName} label="Click to set display name." onValueChanged={this.onValueChanged}/>
|
||||
);
|
||||
}
|
||||
}
|
||||
});
|
@ -60,7 +60,7 @@ module.exports = React.createClass({
|
||||
case this.Phases.Loading:
|
||||
return <Loader />
|
||||
case this.Phases.Display:
|
||||
var EditableText = sdk.getComponent('atoms.EditableText');
|
||||
var ChangeDisplayName = sdk.getComponent('molecules.ChangeDisplayName');
|
||||
var EnableNotificationsButton = sdk.getComponent('atoms.EnableNotificationsButton');
|
||||
return (
|
||||
<div className="mx_UserSettings">
|
||||
@ -74,7 +74,7 @@ module.exports = React.createClass({
|
||||
</div>
|
||||
|
||||
<div className="mx_UserSettings_DisplayName">
|
||||
<EditableText ref="displayname" initialValue={this.state.displayName} label="Click to set display name." onValueChanged={this.changeDisplayname}/>
|
||||
<ChangeDisplayName ref="displayname" />
|
||||
<div className="mx_UserSettings_DisplayName_Edit" onClick={this.editDisplayName}>Edit</div>
|
||||
</div>
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user