Merge branch 'vector'
This commit is contained in:
David Baker
commit
92e346a842
180 changed files with 6631 additions and 476 deletions
1
examples/trivial/fonts
Symbolic link
1
examples/trivial/fonts
Symbolic link
|
|
@ -0,0 +1 @@
|
||||||
|
../../skins/base/fonts/
|
||||||
1
examples/trivial/img
Symbolic link
1
examples/trivial/img
Symbolic link
|
|
@ -0,0 +1 @@
|
||||||
|
../../skins/base/img
|
||||||
|
|
@ -2,9 +2,22 @@
|
||||||
<html lang="en" style="height: 100%; overflow: hidden">
|
<html lang="en" style="height: 100%; overflow: hidden">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>Matrix React SDK Example</title>
|
<title>vector</title>
|
||||||
|
<link href='fonts/Lato.css' rel='stylesheet' type='text/css'>
|
||||||
</head>
|
</head>
|
||||||
<body style="height: 100%;">
|
<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>
|
<section id="matrixchat" style="height: 100%;"></section>
|
||||||
<script src="bundle.js"></script>
|
<script src="bundle.js"></script>
|
||||||
<link rel="stylesheet" href="node_modules/matrix-react-sdk/bundle.css">
|
<link rel="stylesheet" href="node_modules/matrix-react-sdk/bundle.css">
|
||||||
|
|
|
||||||
|
|
@ -40,9 +40,17 @@ function routeUrl(location) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
window.matrixChat.showScreen('register', params);
|
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;
|
var loaded = false;
|
||||||
|
|
||||||
window.onload = function() {
|
window.onload = function() {
|
||||||
|
|
|
||||||
BIN
examples/trivial/media/busy.mp3
Normal file
BIN
examples/trivial/media/busy.mp3
Normal file
Binary file not shown.
BIN
examples/trivial/media/busy.ogg
Normal file
BIN
examples/trivial/media/busy.ogg
Normal file
Binary file not shown.
BIN
examples/trivial/media/callend.mp3
Normal file
BIN
examples/trivial/media/callend.mp3
Normal file
Binary file not shown.
BIN
examples/trivial/media/callend.ogg
Normal file
BIN
examples/trivial/media/callend.ogg
Normal file
Binary file not shown.
BIN
examples/trivial/media/message.mp3
Normal file
BIN
examples/trivial/media/message.mp3
Normal file
Binary file not shown.
BIN
examples/trivial/media/message.ogg
Normal file
BIN
examples/trivial/media/message.ogg
Normal file
Binary file not shown.
BIN
examples/trivial/media/ring.mp3
Normal file
BIN
examples/trivial/media/ring.mp3
Normal file
Binary file not shown.
BIN
examples/trivial/media/ring.ogg
Normal file
BIN
examples/trivial/media/ring.ogg
Normal file
Binary file not shown.
BIN
examples/trivial/media/ringback.mp3
Normal file
BIN
examples/trivial/media/ringback.mp3
Normal file
Binary file not shown.
BIN
examples/trivial/media/ringback.ogg
Normal file
BIN
examples/trivial/media/ringback.ogg
Normal file
Binary file not shown.
|
|
@ -15,6 +15,4 @@ limitations under the License.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
.mx_MessageTimestamp {
|
.mx_MessageTimestamp {
|
||||||
display: table-cell;
|
|
||||||
white-space: pre;
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -15,9 +15,94 @@ limitations under the License.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
body {
|
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 {
|
div.error {
|
||||||
color: red;
|
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;
|
||||||
|
}
|
||||||
|
|
@ -15,4 +15,5 @@ limitations under the License.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
.mx_MNoticeTile {
|
.mx_MNoticeTile {
|
||||||
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
28
skins/base/css/molecules/MatrixToolbar.css
Normal file
28
skins/base/css/molecules/MatrixToolbar.css
Normal 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;
|
||||||
|
}
|
||||||
73
skins/base/css/molecules/MemberInfo.css
Normal file
73
skins/base/css/molecules/MemberInfo.css
Normal 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;
|
||||||
|
}
|
||||||
99
skins/base/css/molecules/MemberTile.css
Normal file
99
skins/base/css/molecules/MemberTile.css
Normal 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;
|
||||||
|
}
|
||||||
|
|
@ -14,7 +14,71 @@ See the License for the specific language governing permissions and
|
||||||
limitations under the License.
|
limitations under the License.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
.mx_MessageComposer textarea {
|
.mx_MessageComposer_wrapper {
|
||||||
width: 100%;
|
max-width: 720px;
|
||||||
|
height: 50px;
|
||||||
|
vertical-align: middle;
|
||||||
margin: auto;
|
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;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -15,11 +15,52 @@ limitations under the License.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
.mx_MessageTile {
|
.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 {
|
.mx_MessageTile_content {
|
||||||
display: table-cell;
|
padding-right: 100px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mx_MessageTile_notice .mx_MessageTile_content {
|
||||||
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_MessageTile_sending {
|
.mx_MessageTile_sending {
|
||||||
|
|
@ -33,3 +74,7 @@ limitations under the License.
|
||||||
.mx_MessageTile_highlight {
|
.mx_MessageTile_highlight {
|
||||||
color: #00f;
|
color: #00f;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.mx_MessageTile_msgOption {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
|
||||||
27
skins/base/css/molecules/RoomDropTarget.css
Normal file
27
skins/base/css/molecules/RoomDropTarget.css
Normal 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;
|
||||||
|
}
|
||||||
|
|
@ -15,6 +15,125 @@ limitations under the License.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
.mx_RoomHeader {
|
.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;
|
||||||
}
|
}
|
||||||
34
skins/base/css/molecules/RoomSettings.css
Normal file
34
skins/base/css/molecules/RoomSettings.css
Normal 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;
|
||||||
|
}
|
||||||
|
|
@ -15,31 +15,84 @@ limitations under the License.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
.mx_RoomTile {
|
.mx_RoomTile {
|
||||||
padding: 5px;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
display: table-row;
|
||||||
|
color: #818794;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_RoomTile.selected {
|
.mx_RoomTile_avatar {
|
||||||
text-decoration: underline;
|
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_name {
|
||||||
}
|
display: table-cell;
|
||||||
|
vertical-align: middle;
|
||||||
.mx_RoomTile div {
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
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;
|
font-weight: bold;
|
||||||
|
color: #000;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_RoomTile.highlight {
|
.mx_RoomTile_selected {
|
||||||
background-color: lime;
|
background-color: #f3f8fa;
|
||||||
}
|
color: #80cef4;
|
||||||
|
|
||||||
.mx_RoomTile.invited {
|
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -15,6 +15,4 @@ limitations under the License.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
.mx_SenderProfile {
|
.mx_SenderProfile {
|
||||||
display: table-cell;
|
|
||||||
padding: 0px 1em 0em 1em;
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
31
skins/base/css/molecules/ServerConfig.css
Normal file
31
skins/base/css/molecules/ServerConfig.css
Normal 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;
|
||||||
|
}
|
||||||
15
skins/base/css/molecules/voip/CallView.css
Normal file
15
skins/base/css/molecules/voip/CallView.css
Normal 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.
|
||||||
|
*/
|
||||||
68
skins/base/css/molecules/voip/IncomingCallbox.css
Normal file
68
skins/base/css/molecules/voip/IncomingCallbox.css
Normal 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;
|
||||||
|
}
|
||||||
40
skins/base/css/molecules/voip/VideoView.css
Normal file
40
skins/base/css/molecules/voip/VideoView.css
Normal 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;
|
||||||
|
}
|
||||||
70
skins/base/css/organisms/LeftPanel.css
Normal file
70
skins/base/css/organisms/LeftPanel.css
Normal 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%;
|
||||||
|
}
|
||||||
47
skins/base/css/organisms/MemberList.css
Normal file
47
skins/base/css/organisms/MemberList.css
Normal 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;
|
||||||
|
}
|
||||||
66
skins/base/css/organisms/RightPanel.css
Normal file
66
skins/base/css/organisms/RightPanel.css
Normal 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;
|
||||||
|
}
|
||||||
41
skins/base/css/organisms/RoomDirectory.css
Normal file
41
skins/base/css/organisms/RoomDirectory.css
Normal 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;
|
||||||
|
}
|
||||||
|
|
@ -16,3 +16,15 @@ limitations under the License.
|
||||||
|
|
||||||
.mx_RoomList {
|
.mx_RoomList {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.mx_RoomList_recents {
|
||||||
|
margin-top: -12px;
|
||||||
|
display: table;
|
||||||
|
table-layout: fixed;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mx_RoomList h2 {
|
||||||
|
padding-left: 16px;
|
||||||
|
padding-right: 16px;
|
||||||
|
}
|
||||||
|
|
@ -17,66 +17,132 @@ limitations under the License.
|
||||||
.mx_RoomView {
|
.mx_RoomView {
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
|
||||||
|
|
||||||
.mx_RoomView .mx_RoomHeader {
|
|
||||||
height: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mx_RoomView_roomWrapper {
|
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
display: -moz-box;
|
display: -moz-box;
|
||||||
display: -ms-flexbox;
|
display: -ms-flexbox;
|
||||||
display: -webkit-flex;
|
display: -webkit-flex;
|
||||||
display: flex;
|
display: flex;
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
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;
|
-webkit-box-ordinal-group: 1;
|
||||||
-moz-box-ordinal-group: 1;
|
-moz-box-ordinal-group: 1;
|
||||||
-ms-flex-order: 1;
|
-ms-flex-order: 1;
|
||||||
-webkit-order: 1;
|
-webkit-order: 1;
|
||||||
order: 1;
|
order: 1;
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
-webkit-flex: 0 0 88px;
|
||||||
/* background-color: #ff0; */
|
flex: 0 0 88px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_RoomView_messageListWrapper {
|
.mx_RoomView_auxPanel {
|
||||||
height: 100%;
|
|
||||||
overflow-y: scroll;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mx_RoomView_MessageList {
|
|
||||||
display: table;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mx_RoomView_invitePrompt {
|
|
||||||
}
|
|
||||||
|
|
||||||
.mx_RoomView .mx_MemberList {
|
|
||||||
-webkit-box-ordinal-group: 2;
|
-webkit-box-ordinal-group: 2;
|
||||||
-moz-box-ordinal-group: 2;
|
-moz-box-ordinal-group: 2;
|
||||||
-ms-flex-order: 2;
|
-ms-flex-order: 2;
|
||||||
-webkit-order: 2;
|
-webkit-order: 2;
|
||||||
order: 2;
|
order: 2;
|
||||||
|
|
||||||
/* background-color: #0f0; */
|
max-width: 720px;
|
||||||
width: 250px;
|
width: 100%;
|
||||||
overflow-y: scroll;
|
margin: auto;
|
||||||
height: 100%;
|
|
||||||
|
overflow: scroll;
|
||||||
|
-webkit-flex: 0 0 auto;
|
||||||
|
flex: 0 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_RoomView .mx_MemberList ul {
|
.mx_RoomView_messagePanel {
|
||||||
margin: 0px;
|
-webkit-box-ordinal-group: 3;
|
||||||
padding: 0px;
|
-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 {
|
.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%;
|
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;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
21
skins/base/css/organisms/UserSettings.css
Normal file
21
skins/base/css/organisms/UserSettings.css
Normal 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;
|
||||||
|
}
|
||||||
|
|
@ -14,76 +14,101 @@ See the License for the specific language governing permissions and
|
||||||
limitations under the License.
|
limitations under the License.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
.mx_MatrixChat {
|
.mx_MatrixChat_wrapper {
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mx_MatrixChat_chatWrapper {
|
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
display: -moz-box;
|
display: -moz-box;
|
||||||
display: -ms-flexbox;
|
display: -ms-flexbox;
|
||||||
display: -webkit-flex;
|
display: -webkit-flex;
|
||||||
display: flex;
|
display: flex;
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
top: 0px;
|
|
||||||
bottom: 42px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
flex-direction: column;
|
||||||
-webkit-flex-direction: column;
|
-webkit-flex-direction: column;
|
||||||
|
|
||||||
/* background-color: #f00; */
|
width: 100%;
|
||||||
width: 250px;
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_MatrixChat_leftPanel .mx_MatrixToolbar {
|
.mx_MatrixToolbar {
|
||||||
-webkit-box-ordinal-group: 1;
|
-webkit-box-ordinal-group: 1;
|
||||||
-moz-box-ordinal-group: 1;
|
-moz-box-ordinal-group: 1;
|
||||||
-ms-flex-order: 1;
|
-ms-flex-order: 1;
|
||||||
-webkit-order: 1;
|
-webkit-order: 1;
|
||||||
order: 1;
|
order: 1;
|
||||||
|
|
||||||
width: 100%;
|
height: 21px;
|
||||||
height: 40px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_MatrixChat_leftPanel .mx_RoomList {
|
.mx_MatrixChat_toolbarShowing {
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mx_MatrixChat {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -moz-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: -webkit-flex;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
-webkit-box-ordinal-group: 2;
|
-webkit-box-ordinal-group: 2;
|
||||||
-moz-box-ordinal-group: 2;
|
-moz-box-ordinal-group: 2;
|
||||||
-ms-flex-order: 2;
|
-ms-flex-order: 2;
|
||||||
-webkit-order: 2;
|
-webkit-order: 2;
|
||||||
order: 2;
|
order: 2;
|
||||||
|
|
||||||
/* background-color: #0ff; */
|
-webkit-flex: 1;
|
||||||
width: 100%;
|
flex: 1;
|
||||||
height: 100%;
|
|
||||||
overflow-y: scroll;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_MatrixChat .mx_RoomView {
|
.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;
|
-webkit-box-ordinal-group: 2;
|
||||||
-moz-box-ordinal-group: 2;
|
-moz-box-ordinal-group: 2;
|
||||||
-ms-flex-order: 2;
|
-ms-flex-order: 2;
|
||||||
-webkit-order: 2;
|
-webkit-order: 2;
|
||||||
order: 2;
|
order: 2;
|
||||||
|
|
||||||
/* background-color: #00f; */
|
padding-left: 12px;
|
||||||
|
padding-right: 12px;
|
||||||
|
background-color: #f3f8fa;
|
||||||
width: 100%;
|
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%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -15,8 +15,81 @@ limitations under the License.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
.mx_Login {
|
.mx_Login {
|
||||||
width: 600px;
|
width: 100%;
|
||||||
height: 350px;
|
height: 100%;
|
||||||
position: relative;
|
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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
48
skins/base/fonts/Lato.css
Normal file
48
skins/base/fonts/Lato.css
Normal 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;
|
||||||
|
}
|
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
BIN
skins/base/img/attach.png
Normal file
BIN
skins/base/img/attach.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 369 B |
BIN
skins/base/img/chevron-left.png
Normal file
BIN
skins/base/img/chevron-left.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 179 B |
BIN
skins/base/img/chevron-right.png
Normal file
BIN
skins/base/img/chevron-right.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 181 B |
BIN
skins/base/img/chevron.png
Normal file
BIN
skins/base/img/chevron.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 237 B |
BIN
skins/base/img/create-big.png
Normal file
BIN
skins/base/img/create-big.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 999 B |
BIN
skins/base/img/create.png
Normal file
BIN
skins/base/img/create.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 807 B |
BIN
skins/base/img/directory-big.png
Normal file
BIN
skins/base/img/directory-big.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 331 B |
BIN
skins/base/img/file.png
Normal file
BIN
skins/base/img/file.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 482 B |
BIN
skins/base/img/filegrid.png
Normal file
BIN
skins/base/img/filegrid.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 226 B |
BIN
skins/base/img/filelist.png
Normal file
BIN
skins/base/img/filelist.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 223 B |
BIN
skins/base/img/hide.png
Normal file
BIN
skins/base/img/hide.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 415 B |
BIN
skins/base/img/info.png
Normal file
BIN
skins/base/img/info.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 660 B |
BIN
skins/base/img/logo.png
Normal file
BIN
skins/base/img/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
skins/base/img/members.png
Normal file
BIN
skins/base/img/members.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 977 B |
BIN
skins/base/img/menu.png
Normal file
BIN
skins/base/img/menu.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 200 B |
BIN
skins/base/img/p/p0.png
Normal file
BIN
skins/base/img/p/p0.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 88 B |
BIN
skins/base/img/p/p1.png
Normal file
BIN
skins/base/img/p/p1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 166 B |
BIN
skins/base/img/p/p10.png
Normal file
BIN
skins/base/img/p/p10.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 558 B |
BIN
skins/base/img/p/p11.png
Normal file
BIN
skins/base/img/p/p11.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 628 B |
BIN
skins/base/img/p/p12.png
Normal file
BIN
skins/base/img/p/p12.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 674 B |
BIN
skins/base/img/p/p13.png
Normal file
BIN
skins/base/img/p/p13.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 713 B |
BIN
skins/base/img/p/p14.png
Normal file
BIN
skins/base/img/p/p14.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 782 B |
BIN
skins/base/img/p/p15.png
Normal file
BIN
skins/base/img/p/p15.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 774 B |
BIN
skins/base/img/p/p16.png
Normal file
BIN
skins/base/img/p/p16.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 835 B |
BIN
skins/base/img/p/p17.png
Normal file
BIN
skins/base/img/p/p17.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 872 B |
BIN
skins/base/img/p/p18.png
Normal file
BIN
skins/base/img/p/p18.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 931 B |
BIN
skins/base/img/p/p19.png
Normal file
BIN
skins/base/img/p/p19.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 960 B |
BIN
skins/base/img/p/p2.png
Normal file
BIN
skins/base/img/p/p2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 232 B |
BIN
skins/base/img/p/p20.png
Normal file
BIN
skins/base/img/p/p20.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 911 B |
BIN
skins/base/img/p/p3.png
Normal file
BIN
skins/base/img/p/p3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 304 B |
BIN
skins/base/img/p/p4.png
Normal file
BIN
skins/base/img/p/p4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 357 B |
BIN
skins/base/img/p/p5.png
Normal file
BIN
skins/base/img/p/p5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 389 B |
BIN
skins/base/img/p/p6.png
Normal file
BIN
skins/base/img/p/p6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 429 B |
BIN
skins/base/img/p/p7.png
Normal file
BIN
skins/base/img/p/p7.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 476 B |
BIN
skins/base/img/p/p8.png
Normal file
BIN
skins/base/img/p/p8.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 538 B |
BIN
skins/base/img/p/p9.png
Normal file
BIN
skins/base/img/p/p9.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 573 B |
19
skins/base/img/p/piechart.pde
Normal file
19
skins/base/img/p/piechart.pde
Normal 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();
|
||||||
|
}
|
||||||
BIN
skins/base/img/placeholder.png
Normal file
BIN
skins/base/img/placeholder.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 394 B |
BIN
skins/base/img/search.png
Normal file
BIN
skins/base/img/search.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 854 B |
BIN
skins/base/img/settings-big.png
Normal file
BIN
skins/base/img/settings-big.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
skins/base/img/settings.png
Normal file
BIN
skins/base/img/settings.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1,003 B |
BIN
skins/base/img/typing.png
Normal file
BIN
skins/base/img/typing.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 236 B |
BIN
skins/base/img/upload.png
Normal file
BIN
skins/base/img/upload.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 704 B |
BIN
skins/base/img/video.png
Normal file
BIN
skins/base/img/video.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 514 B |
BIN
skins/base/img/voip.png
Normal file
BIN
skins/base/img/voip.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 709 B |
|
|
@ -33,6 +33,7 @@ module.exports = React.createClass({
|
||||||
},
|
},
|
||||||
|
|
||||||
onClickDiv: function() {
|
onClickDiv: function() {
|
||||||
|
console.log("onClickDiv triggered");
|
||||||
this.setState({
|
this.setState({
|
||||||
phase: this.Phases.Edit,
|
phase: this.Phases.Edit,
|
||||||
})
|
})
|
||||||
|
|
@ -43,18 +44,26 @@ module.exports = React.createClass({
|
||||||
},
|
},
|
||||||
|
|
||||||
onFinish: function(ev) {
|
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() {
|
render: function() {
|
||||||
var editable_el;
|
var editable_el;
|
||||||
|
|
||||||
if (this.state.phase == this.Phases.Display) {
|
if (this.state.phase == this.Phases.Display) {
|
||||||
|
if (this.state.value) {
|
||||||
editable_el = <div ref="display_div" onClick={this.onClickDiv}>{this.state.value}</div>;
|
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) {
|
} else if (this.state.phase == this.Phases.Edit) {
|
||||||
editable_el = (
|
editable_el = (
|
||||||
<div>
|
<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>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -25,14 +25,15 @@ module.exports = React.createClass({
|
||||||
mixins: [PresetsController],
|
mixins: [PresetsController],
|
||||||
|
|
||||||
onValueChanged: function(ev) {
|
onValueChanged: function(ev) {
|
||||||
this.setState({preset: ev.target.value})
|
this.props.onChange(ev.target.value)
|
||||||
},
|
},
|
||||||
|
|
||||||
render: function() {
|
render: function() {
|
||||||
return (
|
return (
|
||||||
<select className="mx_Presets" onChange={this.onValueChanged} defaultValue={this.state.preset}>
|
<select className="mx_Presets" onChange={this.onValueChanged} value={this.props.preset}>
|
||||||
<option value="private_chat">Private Chat</option>
|
<option value={this.Presets.PrivateChat}>Private Chat</option>
|
||||||
<option value="public_chat">Public Chat</option>
|
<option value={this.Presets.PublicChat}>Public Chat</option>
|
||||||
|
<option value={this.Presets.Custom}>Custom</option>
|
||||||
</select>
|
</select>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
79
skins/base/views/atoms/create_room/RoomAlias.js
Normal file
79
skins/base/views/atoms/create_room/RoomAlias.js
Normal 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}/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
@ -18,19 +18,17 @@ limitations under the License.
|
||||||
|
|
||||||
var React = require('react');
|
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({
|
module.exports = React.createClass({
|
||||||
displayName: 'RoomNameTextbox',
|
displayName: 'VideoFeed',
|
||||||
mixins: [RoomNameTextboxController],
|
mixins: [VideoFeedController],
|
||||||
|
|
||||||
onValueChanged: function(ev) {
|
|
||||||
this.setState({room_name: ev.target.value})
|
|
||||||
},
|
|
||||||
|
|
||||||
render: function() {
|
render: function() {
|
||||||
return (
|
return (
|
||||||
<input type="text" className="mx_RoomNameTextbox" placeholder="ex. MyNewRoom" onChange={this.onValueChanged}/>
|
<video>
|
||||||
|
</video>
|
||||||
);
|
);
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
67
skins/base/views/molecules/BottomLeftMenu.js
Normal file
67
skins/base/views/molecules/BottomLeftMenu.js
Normal 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
65
skins/base/views/molecules/ChangeAvatar.js
Normal file
65
skins/base/views/molecules/ChangeAvatar.js
Normal 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 />
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
85
skins/base/views/molecules/ChangePassword.js
Normal file
85
skins/base/views/molecules/ChangePassword.js
Normal 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>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
56
skins/base/views/molecules/DateSeparator.js
Normal file
56
skins/base/views/molecules/DateSeparator.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 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
Loading…
Reference in a new issue