encore du lipstick

2015-07-18 00:48:22 +01:00 · 2015-07-18 00:48:22 +01:00 · 4ded74765a
commit 4ded74765a
parent b685e784f1
19 changed files with 76 additions and 50 deletions
--- a/examples/trivial/index.html
+++ b/examples/trivial/index.html
@ -3,7 +3,7 @@
  <head>
    <meta charset="utf-8">
    <title>Matrix React SDK Example</title>
-    <link href='https://fonts.googleapis.com/css?family=Muli:300,400' rel='stylesheet' type='text/css'>
+    <link href='https://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
  </head>
  <body style="height: 100%;">
    <audio id="ringbackAudio" loop>
--- a/skins/base/css/common.css
+++ b/skins/base/css/common.css
@ -15,10 +15,9 @@ limitations under the License.
 */

 body {
-    font-family: 'Muli', Helvetica, Arial, Sans-Serif;
-    font-weight: 300;
-    font-size: 15px;
-    color: #747474;
+    font-family: 'Lato', Helvetica, Arial, Sans-Serif;
+    font-size: 16px;
+    color: #454545;
    border: 0px;
    margin: 0px;
 }
--- a/skins/base/css/molecules/MNoticeTile.css
+++ b/skins/base/css/molecules/MNoticeTile.css
@ -14,5 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-.mx_MNoticeTile {
+.mx_MNoticeTile .mx_MessageTile_content {
+    opacity: 0.5;
 }
--- a/skins/base/css/molecules/MessageComposer.css
+++ b/skins/base/css/molecules/MessageComposer.css
@ -64,7 +64,7 @@ limitations under the License.
    box-shadow: none;    

    /* needed for FF */
-    font-family: 'Muli', Helvetica, Arial, Sans-Serif;
+    font-family: 'Lato', Helvetica, Arial, Sans-Serif;
    font-weight: 300;
    font-size: 15px;    
 }
--- a/skins/base/css/molecules/MessageTile.css
+++ b/skins/base/css/molecules/MessageTile.css
@ -39,22 +39,18 @@ limitations under the License.
    margin-top: 8px ! important;
 }

-.mx_MessageTile_continuation .mx_MessageTile_avatar,
-.mx_MessageTile_continuation .mx_SenderProfile
-{
-    display: none ! important;
-}
-
 .mx_MessageTile .mx_SenderProfile {
-    color: #acacac;
-    font-size: 13px;
+    color: #454545;
+    opacity: 0.5;
+    font-size: 14px;
    margin-bottom: 4px;
    display: block;
 }

 .mx_MessageTile .mx_MessageTimestamp {
-    color: #acacac;
-    font-size: 13px;
+    color: #454545;
+    opacity: 0.5;
+    font-size: 14px;
    float: right;
 }

@ -63,6 +59,10 @@ limitations under the License.
    display: block;
 }

+.mx_MessageTile_notice {
+    opacity: 0.5;
+}
+
 .mx_MessageTile_sending {
    color: #ddd;
 }
--- a/skins/base/css/molecules/RoomDropTarget.css
+++ b/skins/base/css/molecules/RoomDropTarget.css
@ -17,8 +17,8 @@ limitations under the License.
 .mx_RoomDropTarget {
    font-size: 14px;
    text-align: center;
-    margin-left: -8px;
-    margin-right: -8px;
+    margin-left: 8px;
+    margin-right: 8px;
    padding-top: 16px;
    padding-bottom: 16px;
    background-color: #fbfbfb;
--- a/skins/base/css/molecules/RoomHeader.css
+++ b/skins/base/css/molecules/RoomHeader.css
@ -71,7 +71,7 @@ limitations under the License.
    height: 28px;
    color: #80cef4;
    font-weight: 400;
-    font-size: 18px;
+    font-size: 20px;
    padding-left: 16px;
    padding-right: 16px;
    overflow: scroll;
@ -82,7 +82,8 @@ limitations under the License.
    vertical-align: bottom;
    float: left;
    max-height: 38px;
-    color: #80cef4;    
+    color: #70b5d7;  
+    font-weight: 300;  
    padding-left: 16px;
    padding-right: 16px;
    overflow: scroll;
--- a/skins/base/css/molecules/RoomTile.css
+++ b/skins/base/css/molecules/RoomTile.css
@ -17,10 +17,7 @@ limitations under the License.
 .mx_RoomTile {
    cursor: pointer;
    display: table-row;
-}
-
-.mx_RoomTile_selected {
-    text-decoration: underline;
+    color: #818794;
 }

 .mx_RoomTile_avatar {
@ -28,6 +25,7 @@ limitations under the License.
    padding-right: 12px;
    padding-top: 3px;
    padding-bottom: 3px;
+    padding-left: 16px;
    vertical-align: middle;
    width: 40px;
    height: 40px;
@ -38,17 +36,19 @@ limitations under the License.
    background-color: #dbdbdb;
 }

-.mx_RoomTile_nameBadge {
-    display: table;
-    width: 100%;
-    height: 50px;
-}
-
 .mx_RoomTile_name {
    display: table-cell;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
+    padding-right: 16px;    
+}
+
+/*
+.mx_RoomTile_nameBadge {
+    display: table;
+    width: 100%;
+    height: 50px;
 }

 .mx_RoomTile_badgeCell {
@ -68,8 +68,10 @@ limitations under the License.
    height: 26px;
    text-align: center;
 }
+*/

 .mx_RoomTile_unread {
+    font-weight: bold;
 }

 .mx_RoomTile_highlight {
@ -79,5 +81,11 @@ limitations under the License.
    font-weight: bold;
 }

+.mx_RoomTile_selected {
+    background-color: #f3f8fa;
+    color: #80cef4;
+    font-weight: bold;
+}
+
 .mx_RoomTile:hover {
 }
--- a/skins/base/css/organisms/LeftPanel.css
+++ b/skins/base/css/organisms/LeftPanel.css
@ -39,9 +39,6 @@ limitations under the License.
    -webkit-order: 1;
    order: 1;

-    padding-left: 16px;
-    padding-right: 16px;
-
    height: 100%;
    overflow-y: scroll;
 }
@ -56,12 +53,13 @@ limitations under the License.
    -webkit-flex: 0 0 170px;
    flex: 0 0 170px;

-    padding-left: 16px;
-    padding-right: 16px;
-
    border-top: 1px solid #f3f8fa;
 }

+.mx_LeftPanel .mx_DirectoryMenu .mx_RoomTile {
+    color: #378bb4;
+}
+
 .mx_LeftPanel .mx_DirectoryMenu .mx_DirectoryMenu_options {
    margin-top: 12px;
    width: 100%;
--- a/skins/base/css/organisms/MemberList.css
+++ b/skins/base/css/organisms/MemberList.css
@ -23,7 +23,7 @@ limitations under the License.
 .mx_MemberList_chevron {
    position: absolute;
    right: 35px;
-    margin-top: -13px;
+    margin-top: -15px;
 }

 .mx_MemberList_border {
--- a/skins/base/css/organisms/RoomList.css
+++ b/skins/base/css/organisms/RoomList.css
@ -22,4 +22,9 @@ limitations under the License.
    display: table;
    table-layout: fixed;
    width: 100%;
+}
+
+.mx_RoomList h2 {
+    padding-left: 16px;
+    padding-right: 16px;
 }
--- a/skins/base/views/molecules/DirectoryMenu.js
+++ b/skins/base/views/molecules/DirectoryMenu.js
@ -45,7 +45,7 @@ module.exports = React.createClass({
                        <div className="mx_RoomTile_avatar">
                            <img src="img/create-big.png" width="42" height="42"/>
                        </div>
-                        <div className="mx_RoomTile_name">Create Room</div>
+                        <div className="mx_RoomTile_name">Create new room</div>
                    </div>
                    <div className="mx_RoomTile">
                        <div className="mx_RoomTile_avatar">
--- a/skins/base/views/molecules/EventAsTextTile.js
+++ b/skins/base/views/molecules/EventAsTextTile.js
@ -20,7 +20,8 @@ var React = require('react');

 var MatrixClientPeg = require("../../../../src/MatrixClientPeg");
 var EventAsTextTileController = require("../../../../src/controllers/molecules/EventAsTextTile");
-
+var ComponentBroker = require('../../../../src/ComponentBroker');
+var MessageTimestamp = ComponentBroker.get('atoms/MessageTimestamp');
 var TextForEvent = require("../../../../src/TextForEvent");

 module.exports = React.createClass({
@ -31,7 +32,7 @@ module.exports = React.createClass({
        var text = TextForEvent.textForEvent(this.props.mxEvent);
        var timestamp = this.props.last ? <MessageTimestamp ts={this.props.mxEvent.getTs()} /> : null;
        return (
-            <div className="mx_MessageTile">
+            <div className="mx_MessageTile mx_MessageTile_notice">
                <div className="mx_MessageTile_avatar">
                    <img src={ this.props.mxEvent.sender ? MatrixClientPeg.get().getAvatarUrlForMember(this.props.mxEvent.sender, 40, 40, "crop") : null } width="40" height="40" alt=""/>
                </div>            
--- a/skins/base/views/molecules/MRoomMemberTile.js
+++ b/skins/base/views/molecules/MRoomMemberTile.js
@ -38,7 +38,7 @@ module.exports = React.createClass({
        var timestamp = this.props.last ? <MessageTimestamp ts={this.props.mxEvent.getTs()} /> : null;

        return (
-            <div className="mx_MessageTile">
+            <div className="mx_MessageTile mx_MessageTile_notice">
                <div className="mx_MessageTile_avatar">
                    <img src={ this.props.mxEvent.target ? MatrixClientPeg.get().getAvatarUrlForMember(this.props.mxEvent.target, 40, 40, "crop") : null } width="40" height="40" alt=""/>
                </div>            
--- a/skins/base/views/molecules/MessageTile.js
+++ b/skins/base/views/molecules/MessageTile.js
@ -57,13 +57,21 @@ module.exports = React.createClass({
            mx_MessageTile_continuation: this.props.continuation,
        });
        var timestamp = this.props.last ? <MessageTimestamp ts={this.props.mxEvent.getTs()} /> : null;
-        return (
-            <div className={classes}>
+        var avatar;
+        var sender;
+        if (!this.props.continuation) {
+            avatar = (
                <div className="mx_MessageTile_avatar">
                    <img src={ this.props.mxEvent.sender ? MatrixClientPeg.get().getAvatarUrlForMember(this.props.mxEvent.sender, 40, 40, "crop") : null } width="40" height="40" alt=""/>
                </div>
+            );
+            sender = <SenderProfile mxEvent={this.props.mxEvent} />;
+        }
+        return (
+            <div className={classes}>
+                { avatar }
                { timestamp }
-                <SenderProfile mxEvent={this.props.mxEvent} />
+                { sender }
                <TileType mxEvent={this.props.mxEvent} />
            </div>
        );
--- a/skins/base/views/molecules/RoomTile.js
+++ b/skins/base/views/molecules/RoomTile.js
@ -37,6 +37,10 @@ module.exports = React.createClass({
        });
        var name = this.props.room.name.replace(":", ":\u200b");
        var badge;
+        if (this.props.highlight) {
+            badge = <img src="/img/badge.png" width="15" height="15" alt=""/>;
+        }
+        /*
        if (this.props.highlight) {
            badge = <div className="mx_RoomTile_badge">!</div>;
        }
@ -50,10 +54,11 @@ module.exports = React.createClass({
        else {
            nameCell = <div className="mx_RoomTile_name">{name}</div>;
        }
+        */
        return (
            <div className={classes} onClick={this.onClick}>
-                <div className="mx_RoomTile_avatar"><img src={ MatrixClientPeg.get().getAvatarUrlForRoom(this.props.room, 40, 40, "crop") } width="40" height="40" alt=""/></div>
-                { nameCell }
+                <div className="mx_RoomTile_avatar"><img src={ MatrixClientPeg.get().getAvatarUrlForRoom(this.props.room, 40, 40, "crop") } width="40" height="40" alt=""/>{ badge }</div>
+                <div className="mx_RoomTile_name">{name}</div>
            </div>
        );
    }
--- a/skins/base/views/molecules/voip/MCallAnswerTile.js
+++ b/skins/base/views/molecules/voip/MCallAnswerTile.js
@ -34,7 +34,7 @@ module.exports = React.createClass({
    render: function() {
        // XXX: for now, just cheekily borrow the css from message tile...
        return (
-            <div className="mx_MessageTile">
+            <div className="mx_MessageTile mx_MessageTile_notice">
                <div className="mx_MessageTile_avatar">
                    <img src={ this.props.mxEvent.sender ? MatrixClientPeg.get().getAvatarUrlForMember(this.props.mxEvent.sender, 40, 40, "crop") : null } width="40" height="40" alt=""/>
                </div>            
--- a/skins/base/views/molecules/voip/MCallHangupTile.js
+++ b/skins/base/views/molecules/voip/MCallHangupTile.js
@ -34,7 +34,7 @@ module.exports = React.createClass({
    render: function() {
        // XXX: for now, just cheekily borrow the css from message tile...
        return (
-            <div className="mx_MessageTile">
+            <div className="mx_MessageTile mx_MessageTile_notice">
                <div className="mx_MessageTile_avatar">
                    <img src={ this.props.mxEvent.sender ? MatrixClientPeg.get().getAvatarUrlForMember(this.props.mxEvent.sender, 40, 40, "crop") : null } width="40" height="40" alt=""/>
                </div>            
--- a/skins/base/views/molecules/voip/MCallInviteTile.js
+++ b/skins/base/views/molecules/voip/MCallInviteTile.js
@ -40,7 +40,7 @@ module.exports = React.createClass({
    render: function() {
        // XXX: for now, just cheekily borrow the css from message tile...
        return (
-            <div className="mx_MessageTile">
+            <div className="mx_MessageTile mx_MessageTile_notice">
                <div className="mx_MessageTile_avatar">
                    <img src={ this.props.mxEvent.sender ? MatrixClientPeg.get().getAvatarUrlForMember(this.props.mxEvent.sender, 40, 40, "crop") : null } width="40" height="40" alt=""/>
                </div>