Merge branch 'vector'

This commit is contained in:
David Baker 2015-07-21 22:37:14 -07:00
commit 92e346a842
180 changed files with 6631 additions and 476 deletions

1
examples/trivial/fonts Symbolic link
View File

@ -0,0 +1 @@
../../skins/base/fonts/

1
examples/trivial/img Symbolic link
View File

@ -0,0 +1 @@
../../skins/base/img

View File

@ -2,9 +2,22 @@
<html lang="en" style="height: 100%; overflow: hidden">
<head>
<meta charset="utf-8">
<title>Matrix React SDK Example</title>
<title>vector</title>
<link href='fonts/Lato.css' rel='stylesheet' type='text/css'>
</head>
<body style="height: 100%;">
<audio id="ringbackAudio" loop>
<source src="media/ringback.ogg" type="audio/ogg" />
<source src="media/ringback.mp3" type="audio/mpeg" />
</audio>
<audio id="callendAudio">
<source src="media/callend.ogg" type="audio/ogg" />
<source src="media/callend.mp3" type="audio/mpeg" />
</audio>
<audio id="busyAudio">
<source src="media/busy.ogg" type="audio/ogg" />
<source src="media/busy.mp3" type="audio/mpeg" />
</audio>
<section id="matrixchat" style="height: 100%;"></section>
<script src="bundle.js"></script>
<link rel="stylesheet" href="node_modules/matrix-react-sdk/bundle.css">

View File

@ -40,9 +40,17 @@ function routeUrl(location) {
}
}
window.matrixChat.showScreen('register', params);
} else {
window.matrixChat.showScreen(location.hash.substring(2));
}
}
function onHashChange(ev) {
routeUrl(window.location);
}
window.addEventListener('hashchange', onHashChange);
var loaded = false;
window.onload = function() {

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

@ -15,6 +15,4 @@ limitations under the License.
*/
.mx_MessageTimestamp {
display: table-cell;
white-space: pre;
}

View File

@ -15,9 +15,94 @@ limitations under the License.
*/
body {
font-family: Helvetica, Arial, Sans-Serif;
font-family: 'Lato', Helvetica, Arial, Sans-Serif;
font-size: 16px;
color: #454545;
border: 0px;
margin: 0px;
}
div.error {
color: red;
}
h2 {
color: #80cef4;
font-weight: 400;
font-size: 20px;
margin-top: 16px;
margin-bottom: 16px;
}
/* FIXME: show them on hoverover, and fix for firefox */
::-webkit-scrollbar {
display: none;
}
html {
overflow: -moz-scrollbars-none;
}
.mx_Dialog_Background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0.2;
z-index: 2000;
}
.mx_Dialog_Wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.mx_Dialog {
background-color: #fff;
color: #747474;
text-align: center;
margin: auto;
max-width: 500px;
z-index: 2010;
font-weight: 300;
font-size: 16px;
position: relative;
border-radius: 8px;
top: 200px;
}
.mx_Dialog_content {
margin: 35px;
}
.mx_Dialog_buttons {
padding-bottom: 35px;
}
.mx_Dialog button {
border: 0px;
height: 36px;
border-radius: 36px;
font-weight: 400;
font-size: 16px;
color: #fff;
background-color: #80cef4;
margin-left: 8px;
margin-right: 8px;
padding-left: 1em;
padding-right: 1em;
}
.mx_ErrorDialogTitle {
min-height: 16px;
padding: 12px;
border-bottom: 1px solid #a9dbf4;
font-weight: bold;
font-size: 20px;
line-height: 1.4;
}

View File

@ -15,4 +15,5 @@ limitations under the License.
*/
.mx_MNoticeTile {
opacity: 0.5;
}

View File

@ -0,0 +1,28 @@
/*
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.
*/
.mx_MatrixToolbar {
width: 100%;
text-align: center;
background-color: #ff0064;
color: #fff;
font-weight: bold;
padding: 6px;
}
.mx_MatrixToolbar button {
margin-left: 12px;
}

View File

@ -0,0 +1,73 @@
/*
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.
*/
.mx_MemberInfo {
text-align: center;
border: 1px solid #a9dbf4;
border-radius: 8px;
background-color: #fff;
position: absolute;
width: 200px;
margin-left: -295px;
margin-top: 0px;
z-index: 1000;
padding: 6px;
}
.mx_MemberInfo_chevron {
padding: 12px;
position: absolute;
right: -21px;
top: 0px;
}
/*
* a hacky shim to extend the hitmask of the overlay to overlap
* better with the main menu itself
*/
.mx_MemberInfo_shim {
position: absolute;
left: 212px;
width: 40px;
height: 100%;
}
.mx_MemberInfo_avatar {
padding: 6px;
}
.mx_MemberInfo_avatarImg {
border-radius: 128px;
}
.mx_MemberInfo_field {
padding: 6px;
overflow: hidden;
text-overflow: ellipsis;
}
.mx_MemberInfo_button {
vertical-align: middle;
max-width: 100px;
height: 36px;
background-color: #50e3c2;
line-height: 36px;
border-radius: 36px;
color: #fff;
margin: auto;
margin-top: 6px;
margin-bottom: 6px;
}

View File

@ -0,0 +1,99 @@
/*
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.
*/
.mx_MemberTile {
cursor: pointer;
display: table-row;
height: 49px;
}
.mx_MemberTile_avatar {
display: table-cell;
padding-right: 12px;
padding-top: 3px;
padding-bottom: 3px;
vertical-align: middle;
width: 40px;
height: 40px;
position: relative;
}
.mx_MemberTile_avatarImg {
z-index: 20;
border-radius: 20px;
background-color: #dbdbdb;
}
.mx_MemberTile_inviteEditing {
display: initial ! important;
}
.mx_MemberTile_inviteEditing .mx_MemberTile_avatar {
display: none;
}
.mx_MemberTile_inviteEditing .mx_MemberTile_name {
width: 200px;
}
.mx_MemberTile_inviteEditing .mx_MemberTile_name input {
border-radius: 3px;
border: 1px solid #c7c7c7;
font-weight: 300;
font-size: 14px;
padding: 9px;
margin-top: 6px;
}
.mx_MemberTile_power {
z-index: 10;
position: absolute;
width: 48px;
height: 48px;
left: -4px;
top: -1px;
}
.mx_MemberTile_name {
display: table-cell;
vertical-align: middle;
overflow: hidden;
text-overflow: ellipsis;
}
.mx_MemberTile_nameWrapper {
display: table-cell;
vertical-align: middle;
overflow: hidden;
text-overflow: ellipsis;
}
.mx_MemberTile_nameSpan {
}
.mx_MemberTile_unavailable .mx_MemberTile_avatar,
.mx_MemberTile_unavailable .mx_MemberTile_name,
.mx_MemberTile_unavailable .mx_MemberTile_nameSpan
{
opacity: 0.75;
}
.mx_MemberTile_offline .mx_MemberTile_avatar,
.mx_MemberTile_offline .mx_MemberTile_name,
.mx_MemberTile_offline .mx_MemberTile_nameSpan
{
opacity: 0.5;
}

View File

@ -14,7 +14,71 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_MessageComposer textarea {
width: 100%;
.mx_MessageComposer_wrapper {
max-width: 720px;
height: 50px;
vertical-align: middle;
margin: auto;
background-color: #fff;
border-radius: 25px;
border: 1px solid #a9dbf4;
}
.mx_MessageComposer_row {
display: table-row;
width: 100%;
height: 50px;
}
.mx_MessageComposer .mx_MessageComposer_avatar {
display: table-cell;
padding-left: 5px;
padding-right: 10px;
height: 50px;
}
.mx_MessageComposer .mx_MessageComposer_avatar img {
margin-top: 5px;
border-radius: 20px;
background-color: #dbdbdb;
}
.mx_MessageComposer_input {
display: table-cell;
width: 100%;
vertical-align: middle;
height: 50px;
}
.mx_MessageComposer_input textarea {
font-size: 15px;
width: 100%;
height: 1.2em;
padding-top: 0.7em;
padding-bottom: 0.7em;
border: 0px;
resize: none;
outline: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
/* needed for FF */
font-family: 'Lato', Helvetica, Arial, Sans-Serif;
}
/* hack for FF as vertical alignment of custom placeholder text is broken */
.mx_MessageComposer_input textarea::-moz-placeholder {
line-height: 100%;
}
.mx_MessageComposer_upload {
display: table-cell;
vertical-align: middle;
padding-right: 15px;
cursor: pointer;
}
.mx_MessageComposer_upload img {
margin-top: 5px;
}

View File

@ -15,11 +15,52 @@ limitations under the License.
*/
.mx_MessageTile {
display: table-row;
max-width: 100%;
clear: both;
margin-top: 32px;
margin-left: 56px;
}
.mx_MessageTile_avatar {
padding-left: 12px;
padding-right: 12px;
margin-left: -64px;
margin-top: -7px;
float: left;
}
.mx_MessageTile_avatar img {
background-color: #dbdbdb;
border-radius: 20px;
border: 0px;
}
.mx_MessageTile_continuation {
margin-top: 8px ! important;
}
.mx_MessageTile .mx_SenderProfile {
color: #454545;
opacity: 0.5;
font-size: 14px;
margin-bottom: 4px;
display: block;
}
.mx_MessageTile .mx_MessageTimestamp {
color: #454545;
opacity: 0.5;
font-size: 14px;
float: right;
}
.mx_MessageTile_content {
display: table-cell;
padding-right: 100px;
display: block;
}
.mx_MessageTile_notice .mx_MessageTile_content {
opacity: 0.5;
}
.mx_MessageTile_sending {
@ -33,3 +74,7 @@ limitations under the License.
.mx_MessageTile_highlight {
color: #00f;
}
.mx_MessageTile_msgOption {
float: right;
}

View File

@ -0,0 +1,27 @@
/*
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.
*/
.mx_RoomDropTarget {
font-size: 14px;
text-align: center;
margin-left: 8px;
margin-right: 8px;
padding-top: 16px;
padding-bottom: 16px;
background-color: #fbfbfb;
border: 1px dashed #d7d7d7;
border-radius: 8px;
}

View File

@ -15,6 +15,125 @@ limitations under the License.
*/
.mx_RoomHeader {
height: 1em;
padding: 0px;
}
.mx_RoomHeader_wrapper {
max-width: 720px;
margin: auto;
height: 88px;
border-bottom: 1px solid #a8dbf3;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.mx_RoomHeader_leftRow {
height: 48px;
margin-top: 18px;
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
width: 100%;
}
.mx_RoomHeader_hangupButton {
height: 48px;
margin-top: 18px;
background-color: #80cef4;
border-radius: 48px;
margin-right: 8px;
color: #fff;
line-height: 48px;
text-align: center;
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2;
-webkit-flex: 0 0 90px;
flex: 0 0 90px;
}
.mx_RoomHeader_rightRow {
height: 48px;
margin-top: 18px;
background-color: #fff;
border-radius: 48px;
border: 1px solid #a9dbf4;
-webkit-box-ordinal-group: 3;
-moz-box-ordinal-group: 3;
-ms-flex-order: 3;
-webkit-order: 3;
order: 3;
-webkit-flex: 0 0 200px;
flex: 0 0 200px;
}
.mx_RoomHeader_info {
display: table-cell;
height: 48px;
vertical-align: middle;
}
.mx_RoomHeader_simpleHeader {
line-height: 88px;
color: #80cef4;
font-weight: 400;
font-size: 20px;
overflow: scroll;
text-overflow: ellipsis;
}
.mx_RoomHeader_name {
vertical-align: middle;
height: 28px;
color: #80cef4;
font-weight: 400;
font-size: 20px;
padding-left: 16px;
padding-right: 16px;
overflow: scroll;
text-overflow: ellipsis;
}
.mx_RoomHeader_topic {
vertical-align: bottom;
float: left;
max-height: 38px;
color: #70b5d7;
font-weight: 300;
padding-left: 16px;
padding-right: 16px;
overflow: scroll;
text-overflow: ellipsis;
}
.mx_RoomHeader_avatar {
display: table-cell;
width: 48px;
height: 50px;
vertical-align: middle;
}
.mx_RoomHeader_avatar img {
border-radius: 24px;
}
.mx_RoomHeader_button {
height: 48px;
display: table-cell;
vertical-align: middle;
padding-left: 8px;
padding-right: 8px;
}

View File

@ -0,0 +1,34 @@
/*
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.
*/
.mx_RoomSettings {
max-height: 250px;
}
.mx_RoomSettings_settings {
display: table;
margin: 5px 0;
}
.mx_RoomSettings_settings > div {
display: table-row;
}
.mx_RoomSettings_settings > div > * {
display: table-cell;
margin: 0 10px;
}

View File

@ -15,31 +15,84 @@ limitations under the License.
*/
.mx_RoomTile {
padding: 5px;
cursor: pointer;
display: table-row;
color: #818794;
}
.mx_RoomTile.selected {
text-decoration: underline;
.mx_RoomTile_avatar {
display: table-cell;
padding-right: 12px;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 16px;
vertical-align: middle;
width: 40px;
height: 40px;
position: relative;
}
.mx_RoomTile_avatar img {
border-radius: 20px;
background-color: #dbdbdb;
}
.mx_RoomTile_name {
}
.mx_RoomTile div {
display: table-cell;
vertical-align: middle;
overflow: hidden;
text-overflow: ellipsis;
padding-right: 16px;
}
.mx_RoomTile.unread {
/*
.mx_RoomTile_nameBadge {
display: table;
width: 100%;
height: 50px;
}
.mx_RoomTile_badgeCell {
display: table-cell;
vertical-align: middle;
width: 26px;
}
.mx_RoomTile_badge {
background-color: #80cef4;
color: #fff;
border-radius: 26px;
font-weight: 400;
font-size: 14px;
line-height: 28px;
width: 26px;
height: 26px;
text-align: center;
}
*/
.mx_RoomTile_badge {
background-color: #ff0064;
border: 3px solid #fff;
border-radius: 16px;
width: 9px;
height: 9px;
position: absolute;
right: 9px;
bottom: 3px;
}
.mx_RoomTile_unread,
.mx_RoomTile_highlight,
.mx_RoomTile_invited
{
font-weight: bold;
color: #000;
}
.mx_RoomTile.highlight {
background-color: lime;
}
.mx_RoomTile.invited {
.mx_RoomTile_selected {
background-color: #f3f8fa;
color: #80cef4;
font-weight: bold;
}

View File

@ -15,6 +15,4 @@ limitations under the License.
*/
.mx_SenderProfile {
display: table-cell;
padding: 0px 1em 0em 1em;
}

View File

@ -0,0 +1,31 @@
/*
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.
*/
.mx_ServerConfig {
margin-top: 7px;
}
.mx_ServerConfig .mx_Login_field {
margin-top: 4px;
margin-bottom: 5px;
}
.mx_ServerConfig_help:link {
opacity: 0.8;
font-size: 14px;
font-weight: 300;
color: #4a4a4a;
}

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.
*/

View File

@ -0,0 +1,68 @@
/*
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.
*/
.mx_IncomingCallBox {
text-align: center;
border: 1px solid #a9dbf4;
border-radius: 8px;
background-color: #fff;
position: absolute;
z-index: 1000;
left: 235px;
top: 155px;
padding: 6px;
}
.mx_IncomingCallBox_chevron {
padding: 12px;
position: absolute;
left: -21px;
top: 0px;
}
.mx_IncomingCallBox_title {
padding: 6px;
font-weight: bold;
}
.mx_IncomingCallBox_buttons {
display: table-row;
}
.mx_IncomingCallBox_buttons_cell {
vertical-align: middle;
display: table-cell;
padding: 6px;
width: 50%;
}
.mx_IncomingCallBox_buttons_decline,
.mx_IncomingCallBox_buttons_accept {
vertical-align: middle;
width: 80px;
height: 36px;
line-height: 36px;
border-radius: 36px;
color: #fff;
}
.mx_IncomingCallBox_buttons_decline {
background-color: #f48080;
}
.mx_IncomingCallBox_buttons_accept {
background-color: #80f480;
}

View File

@ -0,0 +1,40 @@
/*
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.
*/
.mx_VideoView {
width: 100%;
position: relative;
z-index: 30;
margin-top: 12px;
}
.mx_VideoView video {
width: 100%;
}
.mx_VideoView_remoteVideoFeed {
width: 100%;
background-color: #000;
z-index: 50;
}
.mx_VideoView_localVideoFeed {
width: 20%;
position: absolute;
left: 16px;
bottom: 28px;
z-index: 100;
}

View File

@ -0,0 +1,70 @@
/*
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.
*/
.mx_LeftPanel {
position: relative;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: column;
-webkit-flex-direction: column;
}
.mx_LeftPanel_hideButton {
position: absolute;
top: 10px;
right: 10px;
}
.mx_LeftPanel .mx_RoomList {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
height: 100%;
overflow-y: scroll;
}
.mx_LeftPanel .mx_BottomLeftMenu {
-webkit-box-ordinal-group: 3;
-moz-box-ordinal-group: 3;
-ms-flex-order: 3;
-webkit-order: 3;
order: 3;
-webkit-flex: 0 0 170px;
flex: 0 0 170px;
border-top: 1px solid #f3f8fa;
}
.mx_LeftPanel .mx_BottomLeftMenu .mx_RoomTile {
color: #378bb4;
}
.mx_LeftPanel .mx_BottomLeftMenu .mx_RoomTile_avatar {
padding-left: 14px;
}
.mx_LeftPanel .mx_BottomLeftMenu .mx_BottomLeftMenu_options {
margin-top: 12px;
width: 100%;
}

View File

@ -0,0 +1,47 @@
/*
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.
*/
.mx_MemberList {
height: 100%;
margin-bottom: 100px;
padding: 8px;
}
.mx_MemberList_chevron {
position: absolute;
right: 35px;
margin-top: -15px;
}
.mx_MemberList_border {
border: 1px solid #a9dbf4;
overflow-y: scroll;
height: auto;
max-height: 75%;
border-radius: 8px;
padding: 20px 14px 14px 24px;
background-color: #fff;
}
.mx_MemberList_wrapper {
display: table;
table-layout: fixed;
width: 100%;
}
.mx_MemberList h2 {
margin-top: 0px;
}

View File

@ -0,0 +1,66 @@
/*
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.
*/
.mx_RightPanel {
position: relative;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: column;
-webkit-flex-direction: column;
}
.mx_RightPanel_header {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
-webkit-flex: 0 0 66px;
flex: 0 0 66px;
}
/** Fixme - factor this out with the main header **/
.mx_RightPanel_headerButtonGroup {
margin-top: 18px;
height: 48px;
float: right;
background-color: #fff;
border-radius: 48px;
border: 1px solid #a9dbf4;
margin-right: 22px;
}
.mx_RightPanel_headerButton {
height: 48px;
display: table-cell;
vertical-align: middle;
padding-left: 8px;
padding-right: 8px;
}
.mx_RightPanel .mx_MemberList {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2;
}

View File

@ -0,0 +1,41 @@
/*
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.
*/
.mx_RoomDirectory {
width: 720px;
margin-left: auto;
margin-right: auto;
}
.mx_RoomDirectory_input {
margin: auto;
border-radius: 3px;
border: 1px solid #c7c7c7;
font-weight: 300;
font-size: 14px;
padding: 9px;
margin-top: 12px;
margin-bottom: 12px;
}
.mx_RoomDirectory_table {
width: 100%;
}
.mx_RoomDirectory_table td,
.mx_RoomDirectory_table th, {
padding: 6px;
}

View File

@ -16,3 +16,15 @@ limitations under the License.
.mx_RoomList {
}
.mx_RoomList_recents {
margin-top: -12px;
display: table;
table-layout: fixed;
width: 100%;
}
.mx_RoomList h2 {
padding-left: 16px;
padding-right: 16px;
}

View File

@ -17,66 +17,132 @@ limitations under the License.
.mx_RoomView {
word-wrap: break-word;
position: relative;
}
.mx_RoomView .mx_RoomHeader {
height: 30px;
}
.mx_RoomView_roomWrapper {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
position: absolute;
display: flex;
width: 100%;
top: 32px;
bottom: 0px;
flex-direction: column;
-webkit-flex-direction: column;
}
.mx_RoomView_messagePanel {
.mx_RoomView .mx_RoomHeader {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
width: 100%;
height: 100%;
/* background-color: #ff0; */
-webkit-flex: 0 0 88px;
flex: 0 0 88px;
}
.mx_RoomView_messageListWrapper {
height: 100%;
overflow-y: scroll;
}
.mx_RoomView_MessageList {
display: table;
}
.mx_RoomView_invitePrompt {
}
.mx_RoomView .mx_MemberList {
.mx_RoomView_auxPanel {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2;
/* background-color: #0f0; */
width: 250px;
overflow-y: scroll;
height: 100%;
max-width: 720px;
width: 100%;
margin: auto;
overflow: scroll;
-webkit-flex: 0 0 auto;
flex: 0 0 auto;
}
.mx_RoomView .mx_MemberList ul {
margin: 0px;
padding: 0px;
.mx_RoomView_messagePanel {
-webkit-box-ordinal-group: 3;
-moz-box-ordinal-group: 3;
-ms-flex-order: 3;
-webkit-order: 3;
order: 3;
width: 100%;
flex: 1 1 0;
margin-top: 18px;
margin-bottom: 18px;
overflow-y: scroll;
}
.mx_RoomView_messageListWrapper {
max-width: 720px;
margin: auto;
}
.mx_RoomView_MessageList {
width: 100%;
}
.mx_RoomView_MessageList h2 {
clear: both;
margin-top: 32px;
margin-bottom: 8px;
padding-bottom: 6px;
border-bottom: 1px solid #a8dbf3;
}
.mx_RoomView_invitePrompt {
}
.mx_RoomView_statusArea {
-webkit-box-ordinal-group: 4;
-moz-box-ordinal-group: 4;
-ms-flex-order: 4;
-webkit-order: 4;
order: 4;
width: 100%;
-webkit-flex: 0 0 58px;
flex: 0 0 58px;
}
.mx_RoomView_statusAreaBox {
max-width: 720px;
margin: auto;
border-top: 1px solid #a8dbf3;
}
.mx_RoomView_typingBar {
margin-top: 17px;
margin-left: 56px;
color: #818794;
}
.mx_RoomView_typingBar img {
padding-left: 12px;
padding-right: 12px;
margin-left: -64px;
margin-top: -7px;
float: left;
}
.mx_RoomView .mx_MessageComposer {
-webkit-box-ordinal-group: 5;
-moz-box-ordinal-group: 5;
-ms-flex-order: 5;
-webkit-order: 5;
order: 5;
width: 100%;
bottom: 0px;
-webkit-flex: 0 0 63px;
flex: 0 0 63px;
margin-right: 2px;
}
.mx_RoomView_uploadProgressOuter {
width: 100%;
background-color: black;
height: 5px;
}
.mx_RoomView_uploadProgressInner {
background-color: blue;
height: 5px;
}

View File

@ -0,0 +1,21 @@
/*
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.
*/
.mx_UserSettings {
width: 720px;
margin-left: auto;
margin-right: auto;
}

View File

@ -14,76 +14,101 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_MatrixChat {
position: relative;
width: 100%;
height: 100%;
}
.mx_MatrixChat_chatWrapper {
.mx_MatrixChat_wrapper {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
position: absolute;
width: 100%;
top: 0px;
bottom: 42px;
}
display: flex;
.mx_MatrixChat_leftPanel {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: column;
-webkit-flex-direction: column;
/* background-color: #f00; */
width: 250px;
width: 100%;
height: 100%;
}
.mx_MatrixChat_leftPanel .mx_MatrixToolbar {
.mx_MatrixToolbar {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
width: 100%;
height: 40px;
height: 21px;
}
.mx_MatrixChat_leftPanel .mx_RoomList {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2;
.mx_MatrixChat_toolbarShowing {
height: auto;
}
/* background-color: #0ff; */
.mx_MatrixChat {
width: 100%;
height: 100%;
overflow-y: scroll;
}
.mx_MatrixChat .mx_RoomView {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2;
/* background-color: #00f; */
width: 100%;
height: 100%;
-webkit-flex: 1;
flex: 1;
}
.mx_MatrixChat .mx_LeftPanel {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
-webkit-flex: 0 0 230px;
flex: 0 0 230px;
}
.mx_MatrixChat .mx_MatrixChat_middlePanel {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2;
padding-left: 12px;
padding-right: 12px;
background-color: #f3f8fa;
width: 100%;
/* XXX: Hack: apparently if you try to nest a flex-box
* within a non-flex-box within a flex-box, the height
* of the innermost element gets miscalculated if the
* parents are both auto.
* Ideally we'd launch straight into the RoomView at this
* point, but instead we fudge it and make the middlePanel
* flex itself.
*/
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.mx_MatrixChat .mx_RightPanel {
-webkit-box-ordinal-group: 3;
-moz-box-ordinal-group: 3;
-ms-flex-order: 3;
-webkit-order: 3;
order: 3;
background-color: #f3f8fa;
-webkit-flex: 0 0 230px;
flex: 0 0 230px;
height: 100%;
}

View File

@ -15,8 +15,81 @@ limitations under the License.
*/
.mx_Login {
width: 600px;
height: 350px;
position: relative;
width: 100%;
height: 100%;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
.mx_Login h2 {
color: #4a4a4a;
font-weight: 300;
margin-top: 32px;
margin-bottom: 20px;
}
.mx_Login_box {
width: 300px;
}
.mx_Login_logo {
text-align: center;
}
.mx_Login_field {
width: 100%;
border-radius: 3px;
border: 1px solid #c7c7c7;
font-weight: 300;
font-size: 14px;
padding: 9px;
margin-bottom: 14px;
}
.mx_Login_submit {
margin-top: 35px;
margin-bottom: 24px;
width: 100%;
border-radius: 40px;
height: 40px;
border: 0px;
background-color: #76cfa6;
font-size: 16px;
color: #fff;
}
.mx_Login_label {
font-size: 14px;
opacity: 0.8;
}
.mx_Login_checkbox {
margin-right: 10px;
}
.mx_Login_create {
display: block;
text-align: center;
width: 100%;
font-size: 14px;
opacity: 0.8;
}
.mx_Login_error {
color: #ff2020;
font-weight: bold;
text-align: center;
margin-bottom: 24px;
}
.mx_Login_create:link {
color: #4a4a4a;
}

48
skins/base/fonts/Lato.css Normal file
View File

@ -0,0 +1,48 @@
/* latin-ext */
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 300;
src: local('Lato Light'), local('Lato-Light'), url(IY9HZVvI1cMoAHxvl0w9LVKPGs1ZzpMvnHX-7fPOuAc.woff2) format('woff2');
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 300;
src: local('Lato Light'), local('Lato-Light'), url(22JRxvfANxSmnAhzbFH8PgLUuEpTyoUstqEm5AMlJo4.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
/* latin-ext */
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: local('Lato Regular'), local('Lato-Regular'), url(8qcEw_nrk_5HEcCpYdJu8BTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: local('Lato Regular'), local('Lato-Regular'), url(MDadn8DQ_3oT6kvnUq_2r_esZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
/* latin-ext */
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 700;
src: local('Lato Bold'), local('Lato-Bold'), url(rZPI2gHXi8zxUjnybc2ZQFKPGs1ZzpMvnHX-7fPOuAc.woff2) format('woff2');
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 700;
src: local('Lato Bold'), local('Lato-Bold'), url(MgNNr5y1C_tIEuLEmicLmwLUuEpTyoUstqEm5AMlJo4.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

BIN
skins/base/img/attach.png Normal file

Binary file not shown.

After

(image error) Size: 369 B

Binary file not shown.

After

(image error) Size: 179 B

Binary file not shown.

After

(image error) Size: 181 B

BIN
skins/base/img/chevron.png Normal file

Binary file not shown.

After

(image error) Size: 237 B

Binary file not shown.

After

(image error) Size: 999 B

BIN
skins/base/img/create.png Normal file

Binary file not shown.

After

(image error) Size: 807 B

Binary file not shown.

After

(image error) Size: 331 B

BIN
skins/base/img/file.png Normal file

Binary file not shown.

After

(image error) Size: 482 B

BIN
skins/base/img/filegrid.png Normal file

Binary file not shown.

After

(image error) Size: 226 B

BIN
skins/base/img/filelist.png Normal file

Binary file not shown.

After

(image error) Size: 223 B

BIN
skins/base/img/hide.png Normal file

Binary file not shown.

After

(image error) Size: 415 B

BIN
skins/base/img/info.png Normal file

Binary file not shown.

After

(image error) Size: 660 B

BIN
skins/base/img/logo.png Normal file

Binary file not shown.

After

(image error) Size: 14 KiB

BIN
skins/base/img/members.png Normal file

Binary file not shown.

After

(image error) Size: 977 B

BIN
skins/base/img/menu.png Normal file

Binary file not shown.

After

(image error) Size: 200 B

BIN
skins/base/img/p/p0.png Normal file

Binary file not shown.

After

(image error) Size: 88 B

BIN
skins/base/img/p/p1.png Normal file

Binary file not shown.

After

(image error) Size: 166 B

BIN
skins/base/img/p/p10.png Normal file

Binary file not shown.

After

(image error) Size: 558 B

BIN
skins/base/img/p/p11.png Normal file

Binary file not shown.

After

(image error) Size: 628 B

BIN
skins/base/img/p/p12.png Normal file

Binary file not shown.

After

(image error) Size: 674 B

BIN
skins/base/img/p/p13.png Normal file

Binary file not shown.

After

(image error) Size: 713 B

BIN
skins/base/img/p/p14.png Normal file

Binary file not shown.

After

(image error) Size: 782 B

BIN
skins/base/img/p/p15.png Normal file

Binary file not shown.

After

(image error) Size: 774 B

BIN
skins/base/img/p/p16.png Normal file

Binary file not shown.

After

(image error) Size: 835 B

BIN
skins/base/img/p/p17.png Normal file

Binary file not shown.

After

(image error) Size: 872 B

BIN
skins/base/img/p/p18.png Normal file

Binary file not shown.

After

(image error) Size: 931 B

BIN
skins/base/img/p/p19.png Normal file

Binary file not shown.

After

(image error) Size: 960 B

BIN
skins/base/img/p/p2.png Normal file

Binary file not shown.

After

(image error) Size: 232 B

BIN
skins/base/img/p/p20.png Normal file

Binary file not shown.

After

(image error) Size: 911 B

BIN
skins/base/img/p/p3.png Normal file

Binary file not shown.

After

(image error) Size: 304 B

BIN
skins/base/img/p/p4.png Normal file

Binary file not shown.

After

(image error) Size: 357 B

BIN
skins/base/img/p/p5.png Normal file

Binary file not shown.

After

(image error) Size: 389 B

BIN
skins/base/img/p/p6.png Normal file

Binary file not shown.

After

(image error) Size: 429 B

BIN
skins/base/img/p/p7.png Normal file

Binary file not shown.

After

(image error) Size: 476 B

BIN
skins/base/img/p/p8.png Normal file

Binary file not shown.

After

(image error) Size: 538 B

BIN
skins/base/img/p/p9.png Normal file

Binary file not shown.

After

(image error) Size: 573 B

View File

@ -0,0 +1,19 @@
// a trivial processing.org snippet to generate these
// using java2d (ugh). Peity and JS might have been
// a better idea. Or SVG.
size(48, 48);
g = createGraphics(48, 48, JAVA2D);
for (int i = 0; i <= 20; i++) {
g.beginDraw();
g.background(0.0, 0.0);
g.smooth();
g.strokeCap(SQUARE);
g.strokeWeight(3);
g.stroke(0x80, 0xcf, 0xf4, 255.0);
g.fill(0.0, 0.0);
g.arc(24, 24, 43, 43, -PI/2, -PI/2 + (i*2*PI/20.0));
g.save("p" + i + ".png");
g.endDraw();
}

Binary file not shown.

After

(image error) Size: 394 B

BIN
skins/base/img/search.png Normal file

Binary file not shown.

After

(image error) Size: 854 B

Binary file not shown.

After

(image error) Size: 1.2 KiB

BIN
skins/base/img/settings.png Normal file

Binary file not shown.

After

(image error) Size: 1003 B

BIN
skins/base/img/typing.png Normal file

Binary file not shown.

After

(image error) Size: 236 B

BIN
skins/base/img/upload.png Normal file

Binary file not shown.

After

(image error) Size: 704 B

BIN
skins/base/img/video.png Normal file

Binary file not shown.

After

(image error) Size: 514 B

BIN
skins/base/img/voip.png Normal file

Binary file not shown.

After

(image error) Size: 709 B

View File

@ -33,6 +33,7 @@ module.exports = React.createClass({
},
onClickDiv: function() {
console.log("onClickDiv triggered");
this.setState({
phase: this.Phases.Edit,
})
@ -43,18 +44,26 @@ module.exports = React.createClass({
},
onFinish: function(ev) {
this.setValue(ev.target.value);
if (ev.target.value) {
this.setValue(ev.target.value, ev.key === "Enter");
} else {
this.cancelEdit();
}
},
render: function() {
var editable_el;
if (this.state.phase == this.Phases.Display) {
editable_el = <div ref="display_div" onClick={this.onClickDiv}>{this.state.value}</div>;
if (this.state.value) {
editable_el = <div ref="display_div" onClick={this.onClickDiv}>{this.state.value}</div>;
} else {
editable_el = <div ref="display_div" onClick={this.onClickDiv}>{this.props.label}</div>;
}
} else if (this.state.phase == this.Phases.Edit) {
editable_el = (
<div>
<input type="text" defaultValue={this.state.value} onKeyUp={this.onKeyUp} onFocus={this.onFocus} onBlur={this.onFinish} autoFocus/>
<input type="text" defaultValue={this.state.value} onKeyUp={this.onKeyUp} onFocus={this.onFocus} onBlur={this.onFinish} placeholder={this.props.placeHolder} autoFocus/>
</div>
);
}

View File

@ -25,14 +25,15 @@ module.exports = React.createClass({
mixins: [PresetsController],
onValueChanged: function(ev) {
this.setState({preset: ev.target.value})
this.props.onChange(ev.target.value)
},
render: function() {
return (
<select className="mx_Presets" onChange={this.onValueChanged} defaultValue={this.state.preset}>
<option value="private_chat">Private Chat</option>
<option value="public_chat">Public Chat</option>
<select className="mx_Presets" onChange={this.onValueChanged} value={this.props.preset}>
<option value={this.Presets.PrivateChat}>Private Chat</option>
<option value={this.Presets.PublicChat}>Public Chat</option>
<option value={this.Presets.Custom}>Custom</option>
</select>
);
}

View File

@ -0,0 +1,79 @@
/*
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 RoomAliasController = require("../../../../../src/controllers/atoms/create_room/RoomAlias");
module.exports = React.createClass({
displayName: 'RoomAlias',
mixins: [RoomAliasController],
onValueChanged: function(ev) {
this.props.onChange(ev.target.value);
},
onFocus: function(ev) {
var target = ev.target;
var curr_val = ev.target.value;
if (this.props.homeserver) {
if (curr_val == "") {
setTimeout(function() {
target.value = "#:" + this.props.homeserver;
target.setSelectionRange(1, 1);
}, 0);
} else {
var suffix = ":" + this.props.homeserver;
setTimeout(function() {
target.setSelectionRange(
curr_val.startsWith("#") ? 1 : 0,
curr_val.endsWith(suffix) ? (target.value.length - suffix.length) : target.value.length
);
}, 0);
}
}
},
onBlur: function(ev) {
var curr_val = ev.target.value;
if (this.props.homeserver) {
if (curr_val == "#:" + this.props.homeserver) {
ev.target.value = "";
return;
}
if (curr_val != "") {
var new_val = ev.target.value;
var suffix = ":" + this.props.homeserver;
if (!curr_val.startsWith("#")) new_val = "#" + new_val;
if (!curr_val.endsWith(suffix)) new_val = new_val + suffix;
ev.target.value = new_val;
}
}
},
render: function() {
return (
<input type="text" className="mx_RoomAlias" placeholder="Alias (optional)"
onChange={this.onValueChanged} onFocus={this.onFocus} onBlur={this.onBlur}
value={this.props.alias}/>
);
}
});

View File

@ -18,19 +18,17 @@ limitations under the License.
var React = require('react');
var RoomNameTextboxController = require("../../../../../src/controllers/atoms/create_room/RoomNameTextbox");
var VideoFeedController = require("../../../../../src/controllers/atoms/voip/VideoFeed");
module.exports = React.createClass({
displayName: 'RoomNameTextbox',
mixins: [RoomNameTextboxController],
onValueChanged: function(ev) {
this.setState({room_name: ev.target.value})
},
displayName: 'VideoFeed',
mixins: [VideoFeedController],
render: function() {
return (
<input type="text" className="mx_RoomNameTextbox" placeholder="ex. MyNewRoom" onChange={this.onValueChanged}/>
<video>
</video>
);
}
},
});

View File

@ -0,0 +1,67 @@
/*
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 classNames = require('classnames');
var dis = require("../../../../src/dispatcher");
var MatrixClientPeg = require("../../../../src/MatrixClientPeg");
module.exports = React.createClass({
displayName: 'BottomLeftMenu',
onSettingsClick: function() {
dis.dispatch({action: 'view_user_settings'});
},
onRoomDirectoryClick: function() {
dis.dispatch({action: 'view_room_directory'});
},
onCreateRoomClick: function() {
dis.dispatch({action: 'view_create_room'});
},
render: function() {
return (
<div className="mx_BottomLeftMenu">
<div className="mx_BottomLeftMenu_options">
<div className="mx_RoomTile" onClick={this.onCreateRoomClick}>
<div className="mx_RoomTile_avatar">
<img src="img/create-big.png" width="42" height="42"/>
</div>
<div className="mx_RoomTile_name">Create new room</div>
</div>
<div className="mx_RoomTile" onClick={this.onRoomDirectoryClick}>
<div className="mx_RoomTile_avatar">
<img src="img/directory-big.png" width="42" height="42"/>
</div>
<div className="mx_RoomTile_name">Directory</div>
</div>
<div className="mx_RoomTile" onClick={this.onSettingsClick}>
<div className="mx_RoomTile_avatar">
<img src="img/settings-big.png" width="42" height="42"/>
</div>
<div className="mx_RoomTile_name">Settings</div>
</div>
</div>
</div>
);
}
});

View File

@ -0,0 +1,65 @@
/*
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 ChangeAvatarController = require("../../../../src/controllers/molecules/ChangeAvatar");
var Loader = require("react-loader");
module.exports = React.createClass({
displayName: 'ChangeAvatar',
mixins: [ChangeAvatarController],
onFileSelected: function(ev) {
this.setAvatarFromFile(ev.target.files[0]);
},
onError: function(error) {
this.setState({
errorText: "Failed to upload profile picture!"
});
},
render: function() {
switch (this.state.phase) {
case this.Phases.Display:
case this.Phases.Error:
return (
<div>
<div className="mx_Dialog_content">
<img src={this.state.avatarUrl}/>
</div>
<div className="mx_Dialog_content">
Upload new:
<input type="file" onChange={this.onFileSelected}/>
{this.state.errorText}
</div>
<div className="mx_Dialog_buttons">
<button onClick={this.props.onFinished}>Cancel</button>
</div>
</div>
);
case this.Phases.Uploading:
return (
<Loader />
);
}
}
});

View File

@ -0,0 +1,85 @@
/*
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 ChangePasswordController = require("../../../../src/controllers/molecules/ChangePassword");
var Loader = require("react-loader");
module.exports = React.createClass({
displayName: 'ChangePassword',
mixins: [ChangePasswordController],
onClickChange: function() {
var old_password = this.refs.old_input.getDOMNode().value;
var new_password = this.refs.new_input.getDOMNode().value;
var confirm_password = this.refs.confirm_input.getDOMNode().value;
if (new_password != confirm_password) {
this.setState({
state: this.Phases.Error,
errorString: "Passwords don't match"
});
} else if (new_password == '' || old_password == '') {
this.setState({
state: this.Phases.Error,
errorString: "Passwords can't be empty"
});
} else {
this.changePassword(old_password, new_password);
}
},
render: function() {
switch (this.state.phase) {
case this.Phases.Edit:
case this.Phases.Error:
return (
<div>
<div className="mx_Dialog_content">
<div>{this.state.errorString}</div>
<div><label>Old password <input type="password" ref="old_input"/></label></div>
<div><label>New password <input type="password" ref="new_input"/></label></div>
<div><label>Confirm password <input type="password" ref="confirm_input"/></label></div>
</div>
<div className="mx_Dialog_buttons">
<button onClick={this.onClickChange}>Change Password</button>
<button onClick={this.props.onFinished}>Cancel</button>
</div>
</div>
);
case this.Phases.Uploading:
return (
<div className="mx_Dialog_content">
<Loader />
</div>
);
case this.Phases.Success:
return (
<div>
<div className="mx_Dialog_content">
Success!
</div>
<div className="mx_Dialog_buttons">
<button onClick={this.props.onFinished}>Ok</button>
</div>
</div>
)
}
}
});

View 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 days = [
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday"
];
module.exports = React.createClass({
displayName: 'DateSeparator',
render: function() {
var date = new Date(this.props.ts);
var today = new Date();
var yesterday = new Date();
yesterday.setDate(today.getDate() - 1);
var label;
if (date.toDateString() === today.toDateString()) {
label = "Today";
}
else if (date.toDateString() === yesterday.toDateString()) {
label = "Yesterday";
}
else if (today.getTime() - date.getTime() < 6 * 24 * 60 * 60 * 1000) {
label = days[date.getDay()];
}
else {
label = date.toDateString();
}
return (
<h2>{ label }</h2>
);
}
});

Some files were not shown because too many files have changed in this diff Show More