mirror of
https://github.com/SchildiChat/element-web.git
synced 2024-10-01 01:26:12 -04: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 = {};
|
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.EditableText'] = require('./views/atoms/EditableText');
|
||||||
skin['atoms.EnableNotificationsButton'] = require('./views/atoms/EnableNotificationsButton');
|
skin['atoms.EnableNotificationsButton'] = require('./views/atoms/EnableNotificationsButton');
|
||||||
skin['atoms.ImageView'] = require('./views/atoms/ImageView');
|
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.MemberAvatar'] = require('./views/atoms/MemberAvatar');
|
||||||
skin['atoms.MessageTimestamp'] = require('./views/atoms/MessageTimestamp');
|
skin['atoms.MessageTimestamp'] = require('./views/atoms/MessageTimestamp');
|
||||||
skin['atoms.RoomAvatar'] = require('./views/atoms/RoomAvatar');
|
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['atoms.voip.VideoFeed'] = require('./views/atoms/voip/VideoFeed');
|
||||||
skin['molecules.BottomLeftMenu'] = require('./views/molecules/BottomLeftMenu');
|
skin['molecules.BottomLeftMenu'] = require('./views/molecules/BottomLeftMenu');
|
||||||
skin['molecules.ChangeAvatar'] = require('./views/molecules/ChangeAvatar');
|
skin['molecules.ChangeAvatar'] = require('./views/molecules/ChangeAvatar');
|
||||||
|
skin['molecules.ChangeDisplayName'] = require('./views/molecules/ChangeDisplayName');
|
||||||
skin['molecules.ChangePassword'] = require('./views/molecules/ChangePassword');
|
skin['molecules.ChangePassword'] = require('./views/molecules/ChangePassword');
|
||||||
skin['molecules.DateSeparator'] = require('./views/molecules/DateSeparator');
|
skin['molecules.DateSeparator'] = require('./views/molecules/DateSeparator');
|
||||||
skin['molecules.EventAsTextTile'] = require('./views/molecules/EventAsTextTile');
|
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.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.MFileTile'] = require('./views/molecules/MFileTile');
|
||||||
skin['molecules.MImageTile'] = require('./views/molecules/MImageTile');
|
skin['molecules.MImageTile'] = require('./views/molecules/MImageTile');
|
||||||
skin['molecules.MNoticeTile'] = require('./views/molecules/MNoticeTile');
|
skin['molecules.MNoticeTile'] = require('./views/molecules/MNoticeTile');
|
||||||
skin['molecules.MRoomMemberTile'] = require('./views/molecules/MRoomMemberTile');
|
skin['molecules.MRoomMemberTile'] = require('./views/molecules/MRoomMemberTile');
|
||||||
skin['molecules.MTextTile'] = require('./views/molecules/MTextTile');
|
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.ProgressBar'] = require('./views/molecules/ProgressBar');
|
||||||
skin['molecules.RoomCreate'] = require('./views/molecules/RoomCreate');
|
skin['molecules.RoomCreate'] = require('./views/molecules/RoomCreate');
|
||||||
skin['molecules.RoomDropTarget'] = require('./views/molecules/RoomDropTarget');
|
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:
|
case this.Phases.Loading:
|
||||||
return <Loader />
|
return <Loader />
|
||||||
case this.Phases.Display:
|
case this.Phases.Display:
|
||||||
var EditableText = sdk.getComponent('atoms.EditableText');
|
var ChangeDisplayName = sdk.getComponent('molecules.ChangeDisplayName');
|
||||||
var EnableNotificationsButton = sdk.getComponent('atoms.EnableNotificationsButton');
|
var EnableNotificationsButton = sdk.getComponent('atoms.EnableNotificationsButton');
|
||||||
return (
|
return (
|
||||||
<div className="mx_UserSettings">
|
<div className="mx_UserSettings">
|
||||||
@ -74,7 +74,7 @@ module.exports = React.createClass({
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="mx_UserSettings_DisplayName">
|
<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 className="mx_UserSettings_DisplayName_Edit" onClick={this.editDisplayName}>Edit</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user