WIP of new CSS
5
.gitignore
vendored
@ -1,3 +1,8 @@
|
||||
node_modules
|
||||
vector/bundle.*
|
||||
lib
|
||||
bundle.css
|
||||
.DS_Store
|
||||
key.pem
|
||||
cert.pem
|
||||
build
|
||||
|
@ -22,7 +22,7 @@ html {
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Lato', Helvetica, Arial, Sans-Serif;
|
||||
font-family: 'Myriad Pro', Helvetica, Arial, Sans-Serif;
|
||||
font-size: 16px;
|
||||
color: #454545;
|
||||
border: 0px;
|
||||
@ -34,7 +34,7 @@ div.error {
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #80cef4;
|
||||
color: #454545;
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
margin-top: 16px;
|
||||
@ -44,7 +44,7 @@ h2 {
|
||||
a:hover,
|
||||
a:link,
|
||||
a:visited {
|
||||
color: #80CEF4;
|
||||
color: #76cfa6;
|
||||
}
|
||||
|
||||
.mx_ContextualMenu_background {
|
||||
@ -149,7 +149,7 @@ a:visited {
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
background-color: #80cef4;
|
||||
background-color: #76cfa6;
|
||||
margin-left: 8px;
|
||||
margin-right: 8px;
|
||||
padding-left: 1em;
|
||||
|
@ -1,6 +1,6 @@
|
||||
.mx_RoomDropTarget,
|
||||
.mx_RoomList_favourites_label,
|
||||
.mx_RoomList_archive_label,
|
||||
.mx_RoomList_favouritesLabel,
|
||||
.mx_RoomList_archiveLabel,
|
||||
.mx_RoomHeader_search,
|
||||
.mx_RoomSettings_encrypt,
|
||||
.mx_CreateRoom_encrypt,
|
||||
|
@ -22,10 +22,10 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_EventTile_avatar {
|
||||
padding-left: 12px;
|
||||
padding-left: 18px;
|
||||
padding-right: 12px;
|
||||
margin-left: -64px;
|
||||
margin-top: -7px;
|
||||
margin-top: -4px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
@ -48,9 +48,8 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_EventTile .mx_MessageTimestamp {
|
||||
color: #454545;
|
||||
opacity: 0.5;
|
||||
font-size: 14px;
|
||||
color: #acacac;
|
||||
font-size: 12px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
|
@ -23,12 +23,12 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_MImageTile_download {
|
||||
color: #80cef4;
|
||||
color: #76cfa6;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mx_MImageTile_download a {
|
||||
color: #80cef4;
|
||||
color: #76cfa6;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
@ -27,8 +27,8 @@ limitations under the License.
|
||||
padding-top: 3px;
|
||||
padding-bottom: 3px;
|
||||
vertical-align: middle;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@ -60,8 +60,8 @@ limitations under the License.
|
||||
|
||||
.mx_MemberTile_power {
|
||||
position: absolute;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
left: 10px;
|
||||
top: -1px;
|
||||
}
|
||||
|
@ -15,30 +15,29 @@ limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_MessageComposer_wrapper {
|
||||
max-width: 720px;
|
||||
height: 50px;
|
||||
max-width: 960px;
|
||||
height: 70px;
|
||||
vertical-align: middle;
|
||||
margin: auto;
|
||||
background-color: #fff;
|
||||
border-radius: 25px;
|
||||
border: 1px solid #a9dbf4;
|
||||
border-top: 2px solid #e1dddd;
|
||||
}
|
||||
|
||||
.mx_MessageComposer_row {
|
||||
display: table-row;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
.mx_MessageComposer .mx_MessageComposer_avatar {
|
||||
display: table-cell;
|
||||
padding-left: 5px;
|
||||
padding-right: 10px;
|
||||
height: 50px;
|
||||
padding-left: 10px;
|
||||
padding-right: 20px;
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
.mx_MessageComposer .mx_MessageComposer_avatar img {
|
||||
margin-top: 5px;
|
||||
margin-top: 18px;
|
||||
border-radius: 20px;
|
||||
background-color: #dbdbdb;
|
||||
}
|
||||
@ -47,7 +46,7 @@ limitations under the License.
|
||||
display: table-cell;
|
||||
width: 100%;
|
||||
vertical-align: middle;
|
||||
height: 50px;
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
.mx_MessageComposer_input textarea {
|
||||
@ -64,12 +63,16 @@ limitations under the License.
|
||||
box-shadow: none;
|
||||
|
||||
/* needed for FF */
|
||||
font-family: 'Lato', Helvetica, Arial, Sans-Serif;
|
||||
font-family: 'Myriad Pro', 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%;
|
||||
color: #76cfa6;
|
||||
}
|
||||
.mx_MessageComposer_input textarea::-webkit-input-placeholder {
|
||||
color: #76cfa6;
|
||||
}
|
||||
|
||||
.mx_MessageComposer_upload {
|
||||
|
@ -18,10 +18,10 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_RoomHeader_wrapper {
|
||||
max-width: 720px;
|
||||
max-width: 960px;
|
||||
margin: auto;
|
||||
height: 88px;
|
||||
border-bottom: 1px solid #a8dbf3;
|
||||
border-bottom: 1px solid #eeeeee;
|
||||
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
@ -47,7 +47,7 @@ limitations under the License.
|
||||
.mx_RoomHeader_textButton {
|
||||
height: 48px;
|
||||
margin-top: 18px;
|
||||
background-color: #80cef4;
|
||||
background-color: #76cfa6;
|
||||
border-radius: 48px;
|
||||
margin-right: 8px;
|
||||
color: #fff;
|
||||
@ -92,7 +92,7 @@ limitations under the License.
|
||||
|
||||
.mx_RoomHeader_simpleHeader {
|
||||
line-height: 88px;
|
||||
color: #80cef4;
|
||||
color: #76cfa6;
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
overflow: hidden;
|
||||
@ -102,8 +102,8 @@ limitations under the License.
|
||||
.mx_RoomHeader_name {
|
||||
vertical-align: middle;
|
||||
height: 28px;
|
||||
color: #80cef4;
|
||||
font-weight: 400;
|
||||
color: #454545;
|
||||
font-weight: 800;
|
||||
font-size: 20px;
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
@ -133,7 +133,7 @@ limitations under the License.
|
||||
vertical-align: bottom;
|
||||
float: left;
|
||||
max-height: 38px;
|
||||
color: #70b5d7;
|
||||
color: #454545;
|
||||
font-weight: 300;
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
|
@ -61,7 +61,7 @@ limitations under the License.
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
background-color: #80cef4;
|
||||
background-color: #76cfa6;
|
||||
width: auto;
|
||||
margin: auto;
|
||||
padding: 6px;
|
||||
|
@ -17,18 +17,19 @@ limitations under the License.
|
||||
.mx_RoomTile {
|
||||
cursor: pointer;
|
||||
display: table-row;
|
||||
color: #818794;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.mx_RoomTile_avatar {
|
||||
display: table-cell;
|
||||
padding-right: 10px;
|
||||
background: #eaf5f0;
|
||||
padding-right: 8px;
|
||||
padding-top: 3px;
|
||||
padding-bottom: 3px;
|
||||
padding-left: 10px;
|
||||
padding-left: 18px;
|
||||
vertical-align: middle;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@ -43,6 +44,8 @@ limitations under the License.
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
padding-right: 16px;
|
||||
color: #454545;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.collapsed .mx_RoomTile_name {
|
||||
@ -63,7 +66,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_RoomTile_badge {
|
||||
background-color: #80cef4;
|
||||
background-color: #76cfa6;
|
||||
color: #fff;
|
||||
border-radius: 26px;
|
||||
font-weight: 400;
|
||||
@ -75,6 +78,7 @@ limitations under the License.
|
||||
}
|
||||
*/
|
||||
|
||||
/*
|
||||
.mx_RoomTile_badge {
|
||||
background-color: #ff0064;
|
||||
border: 3px solid #fff;
|
||||
@ -85,20 +89,37 @@ limitations under the License.
|
||||
right: 9px;
|
||||
bottom: 3px;
|
||||
}
|
||||
*/
|
||||
|
||||
.mx_RoomTile_highlight .mx_RoomTile_sidebadge,
|
||||
.mx_RoomTile_unread .mx_RoomTile_sidebadge {
|
||||
background-color: #76cfa6;
|
||||
width: 4px;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
.mx_RoomTile_unread,
|
||||
.mx_RoomTile_highlight,
|
||||
.mx_RoomTile_invited
|
||||
{
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.mx_RoomTile_selected {
|
||||
background-color: #f3f8fa;
|
||||
color: #80cef4;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.mx_RoomTile.mx_RoomTile_selected {
|
||||
background: url('img/selected.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: right center;
|
||||
}
|
||||
|
||||
.mx_RoomTile_arrow {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
.mx_RoomTile:hover {
|
||||
}
|
||||
|
@ -15,7 +15,7 @@ limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_CreateRoom {
|
||||
width: 720px;
|
||||
width: 960px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
color: #4a4a4a;
|
||||
|
@ -53,17 +53,20 @@ limitations under the License.
|
||||
-webkit-order: 3;
|
||||
order: 3;
|
||||
|
||||
-webkit-flex: 0 0 170px;
|
||||
flex: 0 0 170px;
|
||||
|
||||
border-top: 1px solid #f3f8fa;
|
||||
-webkit-flex: 0 0 126px;
|
||||
flex: 0 0 126px;
|
||||
}
|
||||
|
||||
.mx_LeftPanel .mx_BottomLeftMenu .mx_RoomTile {
|
||||
color: #378bb4;
|
||||
color: #454545;
|
||||
}
|
||||
|
||||
.mx_LeftPanel .mx_BottomLeftMenu .mx_BottomLeftMenu_options {
|
||||
margin-top: 12px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mx_LeftPanel .mx_BottomLeftMenu img {
|
||||
border-radius: 0px;
|
||||
background-color: transparent;
|
||||
}
|
@ -16,8 +16,6 @@ limitations under the License.
|
||||
|
||||
.mx_MemberList {
|
||||
height: 100%;
|
||||
margin-bottom: 100px;
|
||||
padding: 8px;
|
||||
|
||||
-webkit-flex: 1;
|
||||
flex: 1;
|
||||
@ -39,10 +37,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_MemberList_border {
|
||||
border: 1px solid #a9dbf4;
|
||||
overflow-y: auto;
|
||||
border-radius: 8px;
|
||||
background-color: #fff;
|
||||
|
||||
order: 1;
|
||||
-webkit-flex: 1 1 0;
|
||||
|
@ -15,7 +15,7 @@ limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_RoomDirectory {
|
||||
width: 720px;
|
||||
width: 960px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 12px;
|
||||
|
@ -15,6 +15,7 @@ limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_RoomList {
|
||||
padding-top: 24px;
|
||||
}
|
||||
|
||||
.mx_RoomList_recents {
|
||||
@ -24,8 +25,15 @@ limitations under the License.
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mx_RoomList_recentsLabel img {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.mx_RoomList h2 {
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
text-transform: uppercase;
|
||||
color: #3d3b39;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
@ -42,7 +42,7 @@ limitations under the License.
|
||||
|
||||
.mx_RoomView_fileDropTarget {
|
||||
min-width: 0px;
|
||||
max-width: 720px;
|
||||
max-width: 960px;
|
||||
width: 100%;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
@ -61,7 +61,7 @@ limitations under the License.
|
||||
border-top-right-radius: 10px;
|
||||
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
border: 2px dashed #80cef4;
|
||||
border: 2px dashed #76cfa6;
|
||||
border-bottom: none;
|
||||
position: absolute;
|
||||
top: 88px;
|
||||
@ -84,12 +84,12 @@ limitations under the License.
|
||||
order: 2;
|
||||
|
||||
min-width: 0px;
|
||||
max-width: 720px;
|
||||
max-width: 960px;
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
|
||||
overflow: auto;
|
||||
border-bottom: 1px solid #a8dbf3;
|
||||
border-bottom: 1px solid #eee;
|
||||
|
||||
-webkit-flex: 0 0 auto;
|
||||
flex: 0 0 auto;
|
||||
@ -111,7 +111,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_RoomView_messageListWrapper {
|
||||
max-width: 720px;
|
||||
max-width: 960px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
@ -129,8 +129,9 @@ limitations under the License.
|
||||
clear: both;
|
||||
margin-top: 32px;
|
||||
margin-bottom: 8px;
|
||||
margin-left: 54px;
|
||||
padding-bottom: 6px;
|
||||
border-bottom: 1px solid #a8dbf3;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.mx_RoomView_invitePrompt {
|
||||
@ -141,7 +142,7 @@ limitations under the License.
|
||||
order: 2;
|
||||
|
||||
min-width: 0px;
|
||||
max-width: 720px;
|
||||
max-width: 960px;
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
|
||||
@ -157,14 +158,19 @@ limitations under the License.
|
||||
order: 4;
|
||||
|
||||
width: 100%;
|
||||
-webkit-flex: 0 0 58px;
|
||||
flex: 0 0 58px;
|
||||
-webkit-flex: 0 0 36px;
|
||||
flex: 0 0 36px;
|
||||
}
|
||||
|
||||
.mx_RoomView_statusAreaBox {
|
||||
max-width: 720px;
|
||||
max-width: 960px;
|
||||
margin: auto;
|
||||
border-top: 1px solid #a8dbf3;
|
||||
}
|
||||
|
||||
.mx_RoomView_statusAreaBox_line {
|
||||
border-top: 1px solid #eee;
|
||||
margin-left: 54px;
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
.mx_RoomView_unreadMessagesBar {
|
||||
@ -205,8 +211,8 @@ limitations under the License.
|
||||
order: 5;
|
||||
|
||||
width: 100%;
|
||||
-webkit-flex: 0 0 63px;
|
||||
flex: 0 0 63px;
|
||||
-webkit-flex: 0 0 70px;
|
||||
flex: 0 0 70px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
@ -217,7 +223,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.mx_RoomView_uploadProgressInner {
|
||||
background-color: #80cef4;
|
||||
background-color: #76cfa6;
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
|
@ -15,7 +15,7 @@ limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_UserSettings {
|
||||
width: 720px;
|
||||
width: 960px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
@ -69,6 +69,8 @@ limitations under the License.
|
||||
-webkit-order: 1;
|
||||
order: 1;
|
||||
|
||||
background-color: #eaf5f0;
|
||||
|
||||
-webkit-flex: 0 0 230px;
|
||||
flex: 0 0 230px;
|
||||
}
|
||||
@ -87,7 +89,7 @@ limitations under the License.
|
||||
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
background-color: #f3f8fa;
|
||||
background-color: #fff;
|
||||
|
||||
-webkit-flex: 1;
|
||||
flex: 1;
|
||||
@ -114,7 +116,6 @@ limitations under the License.
|
||||
-webkit-order: 3;
|
||||
order: 3;
|
||||
|
||||
background-color: #f3f8fa;
|
||||
-webkit-flex: 0 0 230px;
|
||||
flex: 0 0 230px;
|
||||
}
|
||||
|
BIN
src/skins/vector/fonts/MyriadPro-Bold.woff
Normal file
BIN
src/skins/vector/fonts/MyriadPro-BoldIt.woff
Normal file
BIN
src/skins/vector/fonts/MyriadPro-It.woff
Normal file
BIN
src/skins/vector/fonts/MyriadPro-Regular.woff
Normal file
BIN
src/skins/vector/fonts/MyriadPro-SemiBold.woff
Normal file
20
src/skins/vector/fonts/MyriadPro.css
Normal file
@ -0,0 +1,20 @@
|
||||
@font-face {
|
||||
font-family: 'Myriad Pro';
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
src: local('Myriad Pro'), local('MyriadPro'), url(MyriadPro-Regular.woff) format('woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Myriad Pro';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
src: local('Myriad Pro SemiBold'), local('MyriadPro-SemiBold'), url(MyriadPro-SemiBold.woff) format('woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Myriad Pro';
|
||||
font-style: normal;
|
||||
font-weight: bold;
|
||||
src: local('Myriad Pro Bold'), local('MyriadPro-Bold'), url(MyriadPro-Bold.woff) format('woff');
|
||||
}
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 581 B |
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 325 B |
BIN
src/skins/vector/img/selected.png
Normal file
After Width: | Height: | Size: 995 B |
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 810 B |
@ -34,7 +34,7 @@ module.exports = React.createClass({
|
||||
},
|
||||
|
||||
getFallbackAvatar: function() {
|
||||
var images = [ '80cef4', '50e2c2', 'f4c371' ];
|
||||
var images = [ '76cfa6', '50e2c2', 'f4c371' ];
|
||||
var total = 0;
|
||||
for (var i = 0; i < this.props.room.roomId.length; ++i) {
|
||||
total += this.props.room.roomId.charCodeAt(i);
|
||||
|
@ -48,7 +48,7 @@ module.exports = React.createClass({
|
||||
return (
|
||||
<div className="mx_RoomTile" onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} onClick={this.props.onClick}>
|
||||
<div className="mx_RoomTile_avatar">
|
||||
<img src={ this.props.img } width="36" height="36"/>
|
||||
<img src={ this.props.img } width="24" height="24"/>
|
||||
</div>
|
||||
{ label }
|
||||
</div>
|
||||
|
@ -110,7 +110,7 @@ module.exports = React.createClass({
|
||||
if (this.props.mxEvent.sender) {
|
||||
avatar = (
|
||||
<div className="mx_EventTile_avatar">
|
||||
<MemberAvatar member={this.props.mxEvent.sender} />
|
||||
<MemberAvatar member={this.props.mxEvent.sender} width="24" height="24" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -121,7 +121,7 @@ module.exports = React.createClass({
|
||||
var power;
|
||||
if (this.props.member && this.props.member.powerLevelNorm > 0) {
|
||||
var img = "img/p/p" + Math.floor(20 * this.props.member.powerLevelNorm / 100) + ".png";
|
||||
power = <img src={ img } className="mx_MemberTile_power" width="48" height="48" alt=""/>;
|
||||
power = <img src={ img } className="mx_MemberTile_power" width="44" height="44" alt=""/>;
|
||||
}
|
||||
var presenceClass = "mx_MemberTile_offline";
|
||||
var mainClassName = "mx_MemberTile ";
|
||||
@ -177,7 +177,7 @@ module.exports = React.createClass({
|
||||
return (
|
||||
<div className={mainClassName} title={ this.getPowerLabel() } onClick={ this.onClick } onMouseEnter={ this.mouseEnter } onMouseLeave={ this.mouseLeave }>
|
||||
<div className="mx_MemberTile_avatar">
|
||||
<MemberAvatar member={this.props.member} />
|
||||
<MemberAvatar member={this.props.member} width="36" height="36" />
|
||||
{ power }
|
||||
</div>
|
||||
{ nameEl }
|
||||
|
@ -49,10 +49,10 @@ module.exports = React.createClass({
|
||||
<div className="mx_MessageComposer_wrapper">
|
||||
<div className="mx_MessageComposer_row">
|
||||
<div className="mx_MessageComposer_avatar">
|
||||
<MemberAvatar member={me} />
|
||||
<MemberAvatar member={me} width="24" height="24" />
|
||||
</div>
|
||||
<div className="mx_MessageComposer_input">
|
||||
<textarea ref="textarea" onKeyDown={this.onKeyDown} placeholder="Type a message" />
|
||||
<textarea ref="textarea" onKeyDown={this.onKeyDown} placeholder="Type a message..." />
|
||||
</div>
|
||||
<div className="mx_MessageComposer_upload" onClick={this.onUploadClick}>
|
||||
<img src="img/upload.png" width="32" height="32"/>
|
||||
|
@ -84,7 +84,7 @@ module.exports = React.createClass({
|
||||
return (
|
||||
<div className={classes} onClick={this.onClick} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
|
||||
<div className="mx_RoomTile_avatar">
|
||||
<RoomAvatar room={this.props.room} />
|
||||
<RoomAvatar room={this.props.room} width="24" height="24" />
|
||||
{ badge }
|
||||
</div>
|
||||
{ label }
|
||||
|
@ -40,7 +40,7 @@ module.exports = React.createClass({
|
||||
classes += " collapsed";
|
||||
}
|
||||
else {
|
||||
collapseButton = <img className="mx_LeftPanel_hideButton" onClick={ this.onHideClick } src="img/hide.png" width="12" height="20" alt="<"/>
|
||||
//collapseButton = <img className="mx_LeftPanel_hideButton" onClick={ this.onHideClick } src="img/hide.png" width="12" height="20" alt="<"/>
|
||||
}
|
||||
|
||||
return (
|
||||
|
@ -103,7 +103,7 @@ module.exports = React.createClass({
|
||||
} else {
|
||||
return (
|
||||
<div className={ classes } onClick={ this.onClickInvite } >
|
||||
<div className="mx_MemberTile_avatar"><img src="img/create-big.png" width="40" height="40" alt=""/></div>
|
||||
<div className="mx_MemberTile_avatar"><img src="img/create-big.png" width="36" height="36" alt=""/></div>
|
||||
<div className="mx_MemberTile_name">
|
||||
<EditableText ref="invite" label="Invite" placeHolder="@user:domain.com" initialValue="" onValueChanged={this.onPopulateInvite}/>
|
||||
</div>
|
||||
@ -127,12 +127,8 @@ module.exports = React.createClass({
|
||||
}
|
||||
return (
|
||||
<div className="mx_MemberList">
|
||||
<div className="mx_MemberList_chevron">
|
||||
<img src="img/chevron.png" width="24" height="13"/>
|
||||
</div>
|
||||
<div className="mx_MemberList_border">
|
||||
<div>
|
||||
<h2>Members</h2>
|
||||
<div className="mx_MemberList_wrapper">
|
||||
{this.makeMemberTiles('join')}
|
||||
</div>
|
||||
|
@ -42,21 +42,21 @@ module.exports = React.createClass({
|
||||
}
|
||||
|
||||
var recentsLabel = this.props.collapsed ?
|
||||
<img style={{cursor: 'pointer'}} onClick={ this.onShowClick } src="img/menu.png" width="27" height="20" alt=">"/> :
|
||||
"Recents";
|
||||
<img style={{cursor: 'pointer'}} onClick={ this.onShowClick } src="img/menu.png" width="20" alt=">"/> :
|
||||
"Recent";
|
||||
|
||||
return (
|
||||
<div className="mx_RoomList" onScroll={this._repositionTooltip}>
|
||||
{callElement}
|
||||
<h2 className="mx_RoomList_favourites_label">Favourites</h2>
|
||||
<h2 className="mx_RoomList_favouritesLabel">Favourites</h2>
|
||||
<RoomDropTarget text="Drop here to favourite"/>
|
||||
|
||||
<h2 className="mx_RoomList_recents_label">{ recentsLabel }</h2>
|
||||
<h2 className="mx_RoomList_recentsLabel">{ recentsLabel }</h2>
|
||||
<div className="mx_RoomList_recents">
|
||||
{this.makeRoomTiles()}
|
||||
</div>
|
||||
|
||||
<h2 className="mx_RoomList_archive_label">Archive</h2>
|
||||
<h2 className="mx_RoomList_archiveLabel">Archive</h2>
|
||||
<RoomDropTarget text="Drop here to archive"/>
|
||||
</div>
|
||||
);
|
||||
|
@ -238,6 +238,7 @@ module.exports = React.createClass({
|
||||
</div>
|
||||
<div className="mx_RoomView_statusArea">
|
||||
<div className="mx_RoomView_statusAreaBox">
|
||||
<div className="mx_RoomView_statusAreaBox_line"></div>
|
||||
{statusBar}
|
||||
</div>
|
||||
</div>
|
||||
|
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Vector</title>
|
||||
<link href='fonts/Lato.css' rel='stylesheet' type='text/css'>
|
||||
<link href='fonts/MyriadPro.css' rel='stylesheet' type='text/css'>
|
||||
<link rel="apple-touch-icon" sizes="57x57" href="/icons/apple-touch-icon-57x57.png">
|
||||
<link rel="apple-touch-icon" sizes="60x60" href="/icons/apple-touch-icon-60x60.png">
|
||||
<link rel="apple-touch-icon" sizes="72x72" href="/icons/apple-touch-icon-72x72.png">
|
||||
|