OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

More fixing up of vector skin

pull/190/head
David Baker 2015-09-22 18:49:04 +01:00
parent 40594fc5fa
commit 7e72ee891a
29 changed files with 216 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
package.json
View File

@ -10,9 +10,9 @@
"license": "Apache-2.0",
"style": "bundle.css",
"scripts": {
"reskindex": "reskindex base -h src/skins/base/header",
"build": "NODE_ENV=production browserify --ignore olm -t reactify src/index.js | uglifyjs -c -m -o vector/bundle.js",
"start": "parallelshell 'watchify --ignore olm -v -d -t reactify src/index.js -o vector/bundle.js' 'npm run start:skins:css' 'http-server vector'",
"reskindex": "reskindex vector -h src/skins/vector/header",
"build": "NODE_ENV=production browserify --ignore olm -t reactify vector/index.js | uglifyjs -c -m -o vector/bundle.js",
"start": "parallelshell 'watchify --ignore olm -v -d -t reactify vector/index.js -o vector/bundle.js' 'npm run start:skins:css' 'http-server vector'",
"build:skins:js": "babel src/skins -d lib/skins --source-maps",
"build:skins:css": "catw 'src/skins/base/css/**/*.css' -o vector/bundle.css -c uglifycss --no-watch",
"start:skins:css": "catw 'src/skins/base/css/**/*.css' -o vector/bundle.css",

15
src/skins/vector/header Normal file
View File

@ -0,0 +1,15 @@
/*
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.
*/

92
src/skins/vector/skindex.js Normal file
View File

@ -0,0 +1,92 @@
/*
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.
*/
/*
* THIS FILE IS AUTO-GENERATED
* You can edit it you like, but your changes will be overwritten,
* so you'd just be trying to swim upstream like a salmon.
* You are not a salmon.
*/
var skin = {
atoms: {},
molecules: {},
organisms: {},
templates: {},
pages: {}
};
skin.atoms.EditableText = require('./views/atoms/EditableText');
skin.atoms.EnableNotificationsButton = require('./views/atoms/EnableNotificationsButton');
skin.atoms.ImageView = require('./views/atoms/ImageView');
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 = {};
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 = {};
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.ChangePassword = require('./views/molecules/ChangePassword');
skin.molecules.ContextualMenu = require('./views/molecules/ContextualMenu');
skin.molecules.DateSeparator = require('./views/molecules/DateSeparator');
skin.molecules.EventAsTextTile = require('./views/molecules/EventAsTextTile');
skin.molecules.MEmoteTile = require('./views/molecules/MEmoteTile');
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');
skin.molecules.RoomHeader = require('./views/molecules/RoomHeader');
skin.molecules.RoomSettings = require('./views/molecules/RoomSettings');
skin.molecules.RoomTile = require('./views/molecules/RoomTile');
skin.molecules.SenderProfile = require('./views/molecules/SenderProfile');
skin.molecules.ServerConfig = require('./views/molecules/ServerConfig');
skin.molecules.UnknownMessageTile = require('./views/molecules/UnknownMessageTile');
skin.molecules.UserSelector = require('./views/molecules/UserSelector');
skin.molecules.voip = {};
skin.molecules.voip.CallView = require('./views/molecules/voip/CallView');
skin.molecules.voip.IncomingCallBox = require('./views/molecules/voip/IncomingCallBox');
skin.molecules.voip.VideoView = require('./views/molecules/voip/VideoView');
skin.organisms.CreateRoom = require('./views/organisms/CreateRoom');
skin.organisms.ErrorDialog = require('./views/organisms/ErrorDialog');
skin.organisms.LeftPanel = require('./views/organisms/LeftPanel');
skin.organisms.LogoutPrompt = require('./views/organisms/LogoutPrompt');
skin.organisms.MemberList = require('./views/organisms/MemberList');
skin.organisms.Notifier = require('./views/organisms/Notifier');
skin.organisms.QuestionDialog = require('./views/organisms/QuestionDialog');
skin.organisms.RightPanel = require('./views/organisms/RightPanel');
skin.organisms.RoomDirectory = require('./views/organisms/RoomDirectory');
skin.organisms.RoomList = require('./views/organisms/RoomList');
skin.organisms.RoomView = require('./views/organisms/RoomView');
skin.organisms.UserSettings = require('./views/organisms/UserSettings');
skin.pages.MatrixChat = require('./views/pages/MatrixChat');
skin.templates.Login = require('./views/templates/Login');
skin.templates.Register = require('./views/templates/Register');
module.exports = skin;

3
src/skins/vector/skinfo.json Normal file
View File

@ -0,0 +1,3 @@
{
"baseSkin": ""
}

5
src/skins/vector/views/molecules/EventAsTextTile.js
View File

@ -20,7 +20,7 @@ var React = require('react');
var MatrixClientPeg = require("../../../../src/MatrixClientPeg");
var EventAsTextTileController = require('matrix-react-sdk/lib/controllers/molecules/EventAsTextTile')
var ComponentBroker = require('../../../../src/ComponentBroker');
var sdk = require('matrix-react-sdk')
var MessageTimestamp = ComponentBroker.get('atoms/MessageTimestamp');
var MemberAvatar = ComponentBroker.get('atoms/MemberAvatar');
var TextForEvent = require("../../../../src/TextForEvent");
@ -30,6 +30,9 @@ module.exports = React.createClass({
mixins: [EventAsTextTileController],
render: function() {
var MessageTimestamp = sdk.getComponent('atoms.MessageTimestamp');
var MemberAvatar = sdk.getComponent('atoms.MemberAvatar');
var text = TextForEvent.textForEvent(this.props.mxEvent);
if (text == null || text.length == 0) return null;

5
src/skins/vector/views/molecules/MImageTile.js
View File

@ -23,9 +23,7 @@ var MImageTileController = require('matrix-react-sdk/lib/controllers/molecules/M
var MatrixClientPeg = require('../../../../src/MatrixClientPeg');
var Modal = require('../../../../src/Modal');
var ComponentBroker = require('../../../../src/ComponentBroker');
var ImageView = ComponentBroker.get("atoms/ImageView");
var sdk = require('matrix-react-sdk')
module.exports = React.createClass({
displayName: 'MImageTile',
@ -59,6 +57,7 @@ module.exports = React.createClass({
ev.preventDefault();
var content = this.props.mxEvent.getContent();
var httpUrl = MatrixClientPeg.get().mxcUrlToHttp(content.url);
var ImageView = sdk.getComponent("atoms.ImageView");
Modal.createDialog(ImageView, {
src: httpUrl,
width: content.info.w,

6
src/skins/vector/views/molecules/MRoomMemberTile.js
View File

@ -21,10 +21,8 @@ var React = require('react');
var MRoomMemberTileController = require('matrix-react-sdk/lib/controllers/molecules/MRoomMemberTile')
var MatrixClientPeg = require("../../../../src/MatrixClientPeg");
var ComponentBroker = require('../../../../src/ComponentBroker');
var sdk = require('matrix-react-sdk')
var TextForEvent = require('../../../../src/TextForEvent');
var MessageTimestamp = ComponentBroker.get('atoms/MessageTimestamp');
var MemberAvatar = ComponentBroker.get('atoms/MemberAvatar');
module.exports = React.createClass({
displayName: 'MRoomMemberTile',
@ -39,6 +37,8 @@ module.exports = React.createClass({
var timestamp = this.props.last ? <MessageTimestamp ts={this.props.mxEvent.getTs()} /> : null;
var text = this.getMemberEventText();
if (!text) return <div/>;
var MessageTimestamp = sdk.getComponent('atoms.MessageTimestamp');
var MemberAvatar = sdk.getComponent('atoms.MemberAvatar');
return (
<div className="mx_MessageTile mx_MessageTile_notice">
<div className="mx_MessageTile_avatar">

8
src/skins/vector/views/molecules/MatrixToolbar.js
View File

@ -18,23 +18,21 @@ limitations under the License.
var React = require('react');
var ComponentBroker = require('../../../../src/ComponentBroker');
var LogoutButton = ComponentBroker.get("atoms/LogoutButton");
var EnableNotificationsButton = ComponentBroker.get("atoms/EnableNotificationsButton");
var sdk = require('matrix-react-sdk')
var MatrixToolbarController = require('matrix-react-sdk/lib/controllers/molecules/MatrixToolbar')
var Notifier = ComponentBroker.get('organisms/Notifier');
module.exports = React.createClass({
displayName: 'MatrixToolbar',
mixins: [MatrixToolbarController],
hideToolbar: function() {
var Notifier = sdk.getComponent('organisms.Notifier');
Notifier.setToolbarHidden(true);
},
render: function() {
var EnableNotificationsButton = sdk.getComponent("atoms.EnableNotificationsButton");
return (
<div className="mx_MatrixToolbar">
You are not receiving desktop notifications. <EnableNotificationsButton />

2
src/skins/vector/views/molecules/MemberInfo.js
View File

@ -20,8 +20,6 @@ var React = require('react');
var MatrixClientPeg = require("../../../../src/MatrixClientPeg");
var MemberInfoController = require('matrix-react-sdk/lib/controllers/molecules/MemberInfo')
var ComponentBroker = require('../../../../src/ComponentBroker');
var MemberAvatar = ComponentBroker.get('atoms/MemberAvatar');
module.exports = React.createClass({
displayName: 'MemberInfo',

7
src/skins/vector/views/molecules/MemberTile.js
View File

@ -19,13 +19,10 @@ limitations under the License.
var React = require('react');
var MatrixClientPeg = require("../../../../src/MatrixClientPeg");
var ComponentBroker = require('../../../../src/ComponentBroker');
var sdk = require('matrix-react-sdk')
var Modal = require("../../../../src/Modal");
var ContextualMenu = require("../../../../src/ContextualMenu");
var MemberTileController = require('matrix-react-sdk/lib/controllers/molecules/MemberTile')
var MemberInfo = ComponentBroker.get('molecules/MemberInfo');
var ErrorDialog = ComponentBroker.get("organisms/ErrorDialog");
var MemberAvatar = ComponentBroker.get('atoms/MemberAvatar');
// The Lato WOFF doesn't include sensible combining diacritics, so Chrome chokes on rendering them.
// Revert to Arial when this happens, which on OSX works at least.
@ -46,6 +43,7 @@ module.exports = React.createClass({
onClick: function(e) {
var self = this;
self.setState({ 'menu': true });
var MemberInfo = sdk.getComponent('molecules.MemberInfo');
ContextualMenu.createMenu(MemberInfo, {
member: self.props.member,
right: window.innerWidth - e.pageX,
@ -153,6 +151,7 @@ module.exports = React.createClass({
</div>
}
var MemberAvatar = sdk.getComponent('atoms.MemberAvatar');
return (
<div className={mainClassName} title={ this.getPowerLabel() } onClick={ this.onClick } onMouseEnter={ this.mouseEnter } onMouseLeave={ this.mouseLeave }>
<div className="mx_MemberTile_avatar">

4
src/skins/vector/views/molecules/MessageComposer.js
View File

@ -22,8 +22,7 @@ var MatrixClientPeg = require("../../../../src/MatrixClientPeg");
var MessageComposerController = require('matrix-react-sdk/lib/controllers/molecules/MessageComposer')
var ContentMessages = require("../../../../src/ContentMessages");
var ComponentBroker = require('../../../../src/ComponentBroker');
var MemberAvatar = ComponentBroker.get('atoms/MemberAvatar');
var sdk = require('matrix-react-sdk')
module.exports = React.createClass({
displayName: 'MessageComposer',
@ -45,6 +44,7 @@ module.exports = React.createClass({
render: function() {
var me = this.props.room.getMember(MatrixClientPeg.get().credentials.userId);
var uploadInputStyle = {display: 'none'};
var MemberAvatar = sdk.getComponent('atoms.MemberAvatar');
return (
<div className="mx_MessageComposer">
<div className="mx_MessageComposer_wrapper">

30
src/skins/vector/views/molecules/MessageTile.js
View File

@ -21,21 +21,7 @@ var React = require('react');
var classNames = require("classnames");
var MatrixClientPeg = require("../../../../src/MatrixClientPeg");
var ComponentBroker = require('../../../../src/ComponentBroker');
var MessageTimestamp = ComponentBroker.get('atoms/MessageTimestamp');
var SenderProfile = ComponentBroker.get('molecules/SenderProfile');
var MemberAvatar = ComponentBroker.get('atoms/MemberAvatar');
var UnknownMessageTile = ComponentBroker.get('molecules/UnknownMessageTile');
var tileTypes = {
'm.text': ComponentBroker.get('molecules/MTextTile'),
'm.notice': ComponentBroker.get('molecules/MNoticeTile'),
'm.emote': ComponentBroker.get('molecules/MEmoteTile'),
'm.image': ComponentBroker.get('molecules/MImageTile'),
'm.file': ComponentBroker.get('molecules/MFileTile')
};
var sdk = require('matrix-react-sdk')
var MessageTileController = require('matrix-react-sdk/lib/controllers/molecules/MessageTile')
@ -44,6 +30,20 @@ module.exports = React.createClass({
mixins: [MessageTileController],
render: function() {
var MessageTimestamp = sdk.getComponent('atoms.MessageTimestamp');
var SenderProfile = sdk.getComponent('molecules.SenderProfile');
var MemberAvatar = sdk.getComponent('atoms.MemberAvatar');
var UnknownMessageTile = sdk.getComponent('molecules.UnknownMessageTile');
var tileTypes = {
'm.text': sdk.getComponent('molecules.MTextTile'),
'm.notice': sdk.getComponent('molecules.MNoticeTile'),
'm.emote': sdk.getComponent('molecules.MEmoteTile'),
'm.image': sdk.getComponent('molecules.MImageTile'),
'm.file': sdk.getComponent('molecules.MFileTile')
};
var content = this.props.mxEvent.getContent();
var msgtype = content.msgtype;
var TileType = UnknownMessageTile;

6
src/skins/vector/views/molecules/RoomHeader.js
View File

@ -17,12 +17,10 @@ limitations under the License.
'use strict';
var React = require('react');
var ComponentBroker = require('../../../../src/ComponentBroker');
var sdk = require('matrix-react-sdk')
var MatrixClientPeg = require("../../../../src/MatrixClientPeg");
var RoomHeaderController = require('matrix-react-sdk/lib/controllers/molecules/RoomHeader')
var EditableText = ComponentBroker.get("atoms/EditableText");
var RoomAvatar = ComponentBroker.get('atoms/RoomAvatar');
module.exports = React.createClass({
displayName: 'RoomHeader',
@ -39,6 +37,8 @@ module.exports = React.createClass({
},
render: function() {
var EditableText = sdk.getComponent("atoms.EditableText");
var RoomAvatar = sdk.getComponent('atoms.RoomAvatar');
var header;
if (this.props.simpleHeader) {

4
src/skins/vector/views/molecules/RoomTile.js
View File

@ -23,8 +23,7 @@ var RoomTileController = require('matrix-react-sdk/lib/controllers/molecules/Roo
var MatrixClientPeg = require("../../../../src/MatrixClientPeg");
var ComponentBroker = require('../../../../src/ComponentBroker');
var RoomAvatar = ComponentBroker.get('atoms/RoomAvatar');
var sdk = require('matrix-react-sdk')
module.exports = React.createClass({
displayName: 'RoomTile',
@ -58,6 +57,7 @@ module.exports = React.createClass({
nameCell = <div className="mx_RoomTile_name">{name}</div>;
}
*/
var RoomAvatar = sdk.getComponent('atoms.RoomAvatar');
return (
<div className={classes} onClick={this.onClick}>
<div className="mx_RoomTile_avatar">

5
src/skins/vector/views/molecules/ServerConfig.js
View File

@ -18,9 +18,7 @@ limitations under the License.
var React = require('react');
var Modal = require('../../../../src/Modal');
var ComponentBroker = require('../../../../src/ComponentBroker');
var ErrorDialog = ComponentBroker.get('organisms/ErrorDialog');
var sdk = require('matrix-react-sdk')
var ServerConfigController = require('matrix-react-sdk/lib/controllers/molecules/ServerConfig')
@ -29,6 +27,7 @@ module.exports = React.createClass({
mixins: [ServerConfigController],
showHelpPopup: function() {
var ErrorDialog = sdk.getComponent('organisms.ErrorDialog');
Modal.createDialog(ErrorDialog, {
title: 'Custom Server Options',
description: "You can use the custom server options to log into other Matrix servers by specifying a different Home server URL. This allows you to use Vector with an existing Matrix account on a different Home server. You can also set a cutom Identity server but this will affect people ability to find you if you use a server in a group other than tha main Matrix.org group.",

6
src/skins/vector/views/molecules/voip/CallView.js
View File

@ -19,11 +19,10 @@ limitations under the License.
var React = require('react');
var MatrixClientPeg = require("../../../../../src/MatrixClientPeg");
var ComponentBroker = require('../../../../../src/ComponentBroker');
var sdk = require('matrix-react-sdk')
var CallViewController = require(
"../../../../../src/controllers/molecules/voip/CallView"
"matrix-react-sdk/lib/controllers/molecules/voip/CallView"
);
var VideoView = ComponentBroker.get('molecules/voip/VideoView');
module.exports = React.createClass({
displayName: 'CallView',
@ -34,6 +33,7 @@ module.exports = React.createClass({
},
render: function(){
var VideoView = sdk.getComponent('molecules.voip.VideoView');
return (
<VideoView ref="video"/>
);

4
src/skins/vector/views/molecules/voip/VideoView.js
View File

@ -19,9 +19,8 @@ limitations under the License.
var React = require('react');
var MatrixClientPeg = require("../../../../../src/MatrixClientPeg");
var ComponentBroker = require('../../../../../src/ComponentBroker');
var sdk = require('matrix-react-sdk')
var VideoViewController = require('matrix-react-sdk/lib/controllers/molecules/voip/VideoView')
var VideoFeed = ComponentBroker.get('atoms/voip/VideoFeed');
module.exports = React.createClass({
displayName: 'VideoView',
@ -36,6 +35,7 @@ module.exports = React.createClass({
},
render: function() {
var VideoFeed = sdk.getComponent('atoms.voip.VideoFeed');
return (
<div className="mx_VideoView">
<div className="mx_VideoView_remoteVideoFeed">

15
src/skins/vector/views/organisms/CreateRoom.js
View File

@ -20,16 +20,10 @@ var React = require('react');
var CreateRoomController = require('matrix-react-sdk/lib/controllers/organisms/CreateRoom')
var ComponentBroker = require('../../../../src/ComponentBroker');
var sdk = require('matrix-react-sdk')
var PresetValues = require('../../../../src/controllers/atoms/create_room/Presets').Presets;
var CreateRoomButton = ComponentBroker.get("atoms/create_room/CreateRoomButton");
var RoomAlias = ComponentBroker.get("atoms/create_room/RoomAlias");
var Presets = ComponentBroker.get("atoms/create_room/Presets");
var UserSelector = ComponentBroker.get("molecules/UserSelector");
var RoomHeader = ComponentBroker.get("molecules/RoomHeader");
var Loader = require("react-loader");
@ -140,6 +134,13 @@ module.exports = React.createClass({
</div>
);
}
var CreateRoomButton = sdk.getComponent("atoms.create_room.CreateRoomButton");
var RoomAlias = sdk.getComponent("atoms.create_room.RoomAlias");
var Presets = sdk.getComponent("atoms.create_room.Presets");
var UserSelector = sdk.getComponent("molecules.UserSelector");
var RoomHeader = sdk.getComponent("molecules.RoomHeader");
return (
<div className="mx_CreateRoom">
<RoomHeader simpleHeader="Create room" />

12
src/skins/vector/views/organisms/LeftPanel.js
View File

@ -17,17 +17,17 @@ limitations under the License.
'use strict';
var React = require('react');
var ComponentBroker = require('../../../../src/ComponentBroker');
var RoomList = ComponentBroker.get('organisms/RoomList');
var BottomLeftMenu = ComponentBroker.get('molecules/BottomLeftMenu');
var IncomingCallBox = ComponentBroker.get('molecules/voip/IncomingCallBox');
var RoomCreate = ComponentBroker.get('molecules/RoomCreate');
var sdk = require('matrix-react-sdk')
module.exports = React.createClass({
displayName: 'LeftPanel',
render: function() {
var RoomList = sdk.getComponent('organisms.RoomList');
var BottomLeftMenu = sdk.getComponent('molecules.BottomLeftMenu');
var IncomingCallBox = sdk.getComponent('molecules.voip.IncomingCallBox');
var RoomCreate = sdk.getComponent('molecules.RoomCreate');
return (
<aside className="mx_LeftPanel">
<img className="mx_LeftPanel_hideButton" src="img/hide.png" width="32" height="32" alt="<"/>

8
src/skins/vector/views/organisms/MemberList.js
View File

@ -21,10 +21,7 @@ var classNames = require('classnames');
var MemberListController = require('matrix-react-sdk/lib/controllers/organisms/MemberList')
var ComponentBroker = require('../../../../src/ComponentBroker');
var MemberTile = ComponentBroker.get("molecules/MemberTile");
var EditableText = ComponentBroker.get("atoms/EditableText");
var sdk = require('matrix-react-sdk')
module.exports = React.createClass({
@ -48,6 +45,8 @@ module.exports = React.createClass({
},
makeMemberTiles: function() {
var MemberTile = sdk.getComponent("molecules.MemberTile");
var self = this;
return Object.keys(self.state.memberDict).map(function(userId) {
var m = self.state.memberDict[userId];
@ -81,6 +80,7 @@ module.exports = React.createClass({
mx_MemberTile_inviteEditing: this.state.editing,
});
var EditableText = sdk.getComponent("atoms.EditableText");
return (
<div className={ classes } onClick={ this.onClickInvite } >
<div className="mx_MemberTile_avatar"><img src="img/create-big.png" width="40" height="40" alt=""/></div>

5
src/skins/vector/views/organisms/RightPanel.js
View File

@ -17,9 +17,7 @@ limitations under the License.
'use strict';
var React = require('react');
var ComponentBroker = require('../../../../src/ComponentBroker');
var MemberList = ComponentBroker.get('organisms/MemberList');
var sdk = require('matrix-react-sdk')
module.exports = React.createClass({
displayName: 'RightPanel',
@ -47,6 +45,7 @@ module.exports = React.createClass({
},
render: function() {
var MemberList = sdk.getComponent('organisms.MemberList');
var buttonGroup;
var panel;
if (this.props.roomId) {

6
src/skins/vector/views/organisms/RoomDirectory.js
View File

@ -20,9 +20,7 @@ var React = require('react');
var MatrixClientPeg = require("../../../../src/MatrixClientPeg");
var Modal = require("../../../../src/Modal");
var ComponentBroker = require('../../../../src/ComponentBroker');
var ErrorDialog = ComponentBroker.get("organisms/ErrorDialog");
var RoomHeader = ComponentBroker.get('molecules/RoomHeader');
var sdk = require('matrix-react-sdk')
var dis = require("../../../../src/dispatcher");
var Loader = require("react-loader");
@ -44,6 +42,7 @@ module.exports = React.createClass({
if (err) {
self.setState({ loading: false });
console.error("Failed to get publicRooms: %s", JSON.stringify(err));
var ErrorDialog = sdk.getComponent("organisms.ErrorDialog");
Modal.createDialog(ErrorDialog, {
title: "Failed to get public room list",
description: err.message
@ -128,6 +127,7 @@ module.exports = React.createClass({
);
}
var RoomHeader = sdk.getComponent('molecules.RoomHeader');
return (
<div className="mx_RoomDirectory">
<RoomHeader simpleHeader="Public Rooms" />

7
src/skins/vector/views/organisms/RoomList.js
View File

@ -17,9 +17,7 @@ limitations under the License.
'use strict';
var React = require('react');
var ComponentBroker = require('../../../../src/ComponentBroker');
var CallView = ComponentBroker.get('molecules/voip/CallView');
var RoomDropTarget = ComponentBroker.get('molecules/RoomDropTarget');
var sdk = require('matrix-react-sdk')
var RoomListController = require('matrix-react-sdk/lib/controllers/organisms/RoomList')
@ -28,6 +26,9 @@ module.exports = React.createClass({
mixins: [RoomListController],
render: function() {
var CallView = sdk.getComponent('molecules.voip.CallView');
var RoomDropTarget = sdk.getComponent('molecules.RoomDropTarget');
var callElement;
if (this.state.show_call_element) {
callElement = <CallView className="mx_MatrixChat_callView"/>

12
src/skins/vector/views/organisms/RoomView.js
View File

@ -20,16 +20,11 @@ var React = require('react');
var MatrixClientPeg = require("../../../../src/MatrixClientPeg");
var ComponentBroker = require('../../../../src/ComponentBroker');
var sdk = require('matrix-react-sdk')
var classNames = require("classnames");
var filesize = require('filesize');
var q = require('q');
var MessageTile = ComponentBroker.get('molecules/MessageTile');
var RoomHeader = ComponentBroker.get('molecules/RoomHeader');
var MessageComposer = ComponentBroker.get('molecules/MessageComposer');
var CallView = ComponentBroker.get("molecules/voip/CallView");
var RoomSettings = ComponentBroker.get("molecules/RoomSettings");
var RoomViewController = require('matrix-react-sdk/lib/controllers/organisms/RoomView')
var Loader = require("react-loader");
@ -82,6 +77,11 @@ module.exports = React.createClass({
},
render: function() {
var RoomHeader = sdk.getComponent('molecules.RoomHeader');
var MessageComposer = sdk.getComponent('molecules.MessageComposer');
var CallView = sdk.getComponent("molecules.voip.CallView");
var RoomSettings = sdk.getComponent("molecules.RoomSettings");
if (!this.state.room) {
if (this.props.roomId) {
return (

12
src/skins/vector/views/organisms/UserSettings.js
View File

@ -14,16 +14,11 @@ limitations under the License.
'use strict';
var React = require('react');
var ComponentBroker = require('../../../../src/ComponentBroker');
var sdk = require('matrix-react-sdk')
var MatrixClientPeg = require("../../../../src/MatrixClientPeg");
var UserSettingsController = require('matrix-react-sdk/lib/controllers/organisms/UserSettings')
var EditableText = ComponentBroker.get('atoms/EditableText');
var EnableNotificationsButton = ComponentBroker.get('atoms/EnableNotificationsButton');
var ChangeAvatar = ComponentBroker.get('molecules/ChangeAvatar');
var ChangePassword = ComponentBroker.get('molecules/ChangePassword');
var LogoutPrompt = ComponentBroker.get('organisms/LogoutPrompt');
var Loader = require("react-loader");
var Modal = require("../../../../src/Modal");
@ -34,6 +29,7 @@ module.exports = React.createClass({
editAvatar: function() {
var url = MatrixClientPeg.get().mxcUrlToHttp(this.state.avatarUrl);
var ChangeAvatar = sdk.getComponent('molecules.ChangeAvatar');
Modal.createDialog(ChangeAvatar, {initialAvatarUrl: url});
},
@ -50,6 +46,7 @@ module.exports = React.createClass({
},
onLogoutClicked: function(ev) {
var LogoutPrompt = sdk.getComponent('organisms.LogoutPrompt');
this.logoutModal = Modal.createDialog(LogoutPrompt, {onCancel: this.onLogoutPromptCancel});
},
@ -62,6 +59,9 @@ module.exports = React.createClass({
case this.Phases.Loading:
return <Loader />
case this.Phases.Display:
var EditableText = sdk.getComponent('atoms/EditableText');
var EnableNotificationsButton = sdk.getComponent('atoms/EnableNotificationsButton');
var ChangePassword = sdk.getComponent('molecules/ChangePassword');
return (
<div className="mx_UserSettings">
<div className="mx_UserSettings_User">

23
src/skins/vector/views/pages/MatrixChat.js
View File

@ -17,18 +17,7 @@ limitations under the License.
'use strict';
var React = require('react');
var ComponentBroker = require('../../../../src/ComponentBroker');
var LeftPanel = ComponentBroker.get('organisms/LeftPanel');
var RoomView = ComponentBroker.get('organisms/RoomView');
var RightPanel = ComponentBroker.get('organisms/RightPanel');
var Login = ComponentBroker.get('templates/Login');
var UserSettings = ComponentBroker.get('organisms/UserSettings');
var Register = ComponentBroker.get('templates/Register');
var CreateRoom = ComponentBroker.get('organisms/CreateRoom');
var RoomDirectory = ComponentBroker.get('organisms/RoomDirectory');
var MatrixToolbar = ComponentBroker.get('molecules/MatrixToolbar');
var Notifier = ComponentBroker.get('organisms/Notifier');
var sdk = require('matrix-react-sdk')
var MatrixChatController = require('matrix-react-sdk/lib/controllers/pages/MatrixChat')
@ -52,6 +41,16 @@ module.exports = React.createClass({
render: function() {
if (this.state.logged_in && this.state.ready) {
var LeftPanel = sdk.getComponent('organisms.LeftPanel');
var RoomView = sdk.getComponent('organisms.RoomView');
var RightPanel = sdk.getComponent('organisms.RightPanel');
var Login = sdk.getComponent('templates.Login');
var UserSettings = sdk.getComponent('organisms.UserSettings');
var Register = sdk.getComponent('templates.Register');
var CreateRoom = sdk.getComponent('organisms.CreateRoom');
var RoomDirectory = sdk.getComponent('organisms.RoomDirectory');
var MatrixToolbar = sdk.getComponent('molecules.MatrixToolbar');
var Notifier = sdk.getComponent('organisms.Notifier');
var page_element;
var right_panel = "";

7
src/skins/vector/views/templates/Login.js
View File

@ -18,16 +18,13 @@ limitations under the License.
var React = require('react');
var ComponentBroker = require("../../../../src/ComponentBroker");
var sdk = require('matrix-react-sdk')
var MatrixClientPeg = require("../../../../src/MatrixClientPeg");
var ProgressBar = ComponentBroker.get("molecules/ProgressBar");
var Loader = require("react-loader");
var LoginController = require('matrix-react-sdk/lib/controllers/templates/Login')
var ServerConfig = ComponentBroker.get("molecules/ServerConfig");
module.exports = React.createClass({
DEFAULT_HS_URL: 'https://matrix.org',
DEFAULT_IS_URL: 'https://vector.im',
@ -119,6 +116,8 @@ module.exports = React.createClass({
case 'fetch_stages':
var serverConfigStyle = {};
serverConfigStyle.display = this.state.serverConfigVisible ? 'block' : 'none';
var ServerConfig = sdk.getComponent("molecules.ServerConfig");
return (
<div>
<input className="mx_Login_checkbox" id="advanced" type="checkbox" checked={this.state.serverConfigVisible} onChange={this.onServerConfigVisibleChange} />

5
src/skins/vector/views/templates/Register.js
View File

@ -18,14 +18,12 @@ limitations under the License.
var React = require('react');
var ComponentBroker = require("../../../../src/ComponentBroker");
var sdk = require('matrix-react-sdk')
var Loader = require("react-loader");
var RegisterController = require('matrix-react-sdk/lib/controllers/templates/Register')
var ServerConfig = ComponentBroker.get("molecules/ServerConfig");
module.exports = React.createClass({
DEFAULT_HS_URL: 'https://matrix.org',
DEFAULT_IS_URL: 'https://vector.im',
@ -98,6 +96,7 @@ module.exports = React.createClass({
case 'initial':
var serverConfigStyle = {};
serverConfigStyle.display = this.state.serverConfigVisible ? 'block' : 'none';
var ServerConfig = sdk.getComponent("molecules.ServerConfig");
return (
<div>
<form onSubmit={this.onInitialStageSubmit}>

11
vector/index.js
View File

@ -17,12 +17,8 @@ limitations under the License.
'use strict';
var React = require("react");
// In normal usage of the module:
//var MatrixReactSdk = require("matrix-react-sdk");
// Or to import the source directly from the file system:
// (This is useful for debugging the SDK as it seems source
// maps cannot pass through two stages).
var MatrixReactSdk = require("../../src/index");
var sdk = require("matrix-react-sdk");
sdk.loadSkin(require('../src/skins/vector/skindex'));
var lastLocationHashSet = null;
@ -78,8 +74,9 @@ var makeRegistrationUrl = function() {
'#/register';
}
var MatrixChat = sdk.getComponent('pages.MatrixChat');
window.matrixChat = React.render(
<MatrixReactSdk.MatrixChat onNewScreen={onNewScreen} registrationUrl={makeRegistrationUrl()} />,
<MatrixChat onNewScreen={onNewScreen} registrationUrl={makeRegistrationUrl()} />,
document.getElementById('matrixchat')
);