From 538536eb88728ca2c528f85b631280058b7adff4 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Tue, 21 Jul 2015 23:19:24 -0700
Subject: [PATCH 1/3] vaguely make room editing prettier

---
 skins/base/css/molecules/RoomHeader.css     | 23 +++++++++++----
 skins/base/css/molecules/RoomSettings.css   | 31 +++++++++++++++++++++
 skins/base/css/molecules/voip/VideoView.css |  1 -
 skins/base/css/organisms/LeftPanel.css      |  2 +-
 skins/base/css/organisms/RoomView.css       |  3 ++
 skins/base/views/molecules/RoomHeader.js    | 22 +++++++--------
 skins/base/views/molecules/RoomSettings.js  | 16 +++++++----
 skins/base/views/organisms/RoomView.js      |  4 +--
 8 files changed, 76 insertions(+), 26 deletions(-)

diff --git a/skins/base/css/molecules/RoomHeader.css b/skins/base/css/molecules/RoomHeader.css
index 677438772..6efbaa7f2 100644
--- a/skins/base/css/molecules/RoomHeader.css
+++ b/skins/base/css/molecules/RoomHeader.css
@@ -40,10 +40,10 @@ limitations under the License.
     -webkit-order: 1;
     order: 1;
 
-    width: 100%;
+    flex: 1;
 }
 
-.mx_RoomHeader_hangupButton {
+.mx_RoomHeader_textButton {
     height: 48px;
     margin-top: 18px;
     background-color: #80cef4;
@@ -75,9 +75,6 @@ limitations under the License.
     -ms-flex-order: 3;
     -webkit-order: 3;
     order: 3;
-
-    -webkit-flex: 0 0 200px;
-    flex: 0 0 200px;    
 }
 
 .mx_RoomHeader_info {
@@ -107,6 +104,22 @@ limitations under the License.
     text-overflow: ellipsis;
 }
 
+.mx_RoomHeader_nameEditing {
+    padding-left: 16px;
+    padding-right: 16px;
+    margin-top: -5px;
+}
+
+.mx_RoomHeader_nameInput {
+    border-radius: 3px;
+    width: 260px;
+    border: 1px solid #c7c7c7;
+    font-weight: 300;
+    font-size: 14px;
+    padding: 9px;
+    margin-top: 6px;
+}
+
 .mx_RoomHeader_topic {
     vertical-align: bottom;
     float: left;
diff --git a/skins/base/css/molecules/RoomSettings.css b/skins/base/css/molecules/RoomSettings.css
index 53686ec94..c456d53b7 100644
--- a/skins/base/css/molecules/RoomSettings.css
+++ b/skins/base/css/molecules/RoomSettings.css
@@ -16,6 +16,7 @@ limitations under the License.
 
 .mx_RoomSettings {
     max-height: 250px;
+    padding-top: 12px;
 }
 
 .mx_RoomSettings_settings {
@@ -32,3 +33,33 @@ limitations under the License.
 
     margin: 0 10px;
 }
+
+.mx_RoomSettings input,
+.mx_RoomSettings textarea  {
+    border-radius: 3px;
+    border: 1px solid #c7c7c7;
+    font-weight: 300;
+    font-size: 14px;
+    padding: 9px;
+    margin-top: 6px;
+}
+
+.mx_RoomSettings_buttons {
+    text-align: right;
+}
+
+.mx_RoomSettings_button {
+    display: inline;
+    border: 0px;
+    height: 36px;
+    border-radius: 36px;
+    font-weight: 400;
+    font-size: 16px;
+    color: #fff;
+    background-color: #80cef4;
+    width: auto;
+    margin: auto;
+    padding: 6px;
+    padding-left: 1em;
+    padding-right: 1em;
+}
\ No newline at end of file
diff --git a/skins/base/css/molecules/voip/VideoView.css b/skins/base/css/molecules/voip/VideoView.css
index 5edc8504d..b47039c34 100644
--- a/skins/base/css/molecules/voip/VideoView.css
+++ b/skins/base/css/molecules/voip/VideoView.css
@@ -18,7 +18,6 @@ limitations under the License.
     width: 100%;
     position: relative;
     z-index: 30;
-    margin-top: 12px;
 }
 
 .mx_VideoView video {
diff --git a/skins/base/css/organisms/LeftPanel.css b/skins/base/css/organisms/LeftPanel.css
index bfc430265..f384dd8fd 100644
--- a/skins/base/css/organisms/LeftPanel.css
+++ b/skins/base/css/organisms/LeftPanel.css
@@ -39,8 +39,8 @@ limitations under the License.
     -webkit-order: 1;
     order: 1;
 
-    height: 100%;
     overflow-y: scroll;
+    flex: 1;
 }
 
 .mx_LeftPanel .mx_BottomLeftMenu {
diff --git a/skins/base/css/organisms/RoomView.css b/skins/base/css/organisms/RoomView.css
index f860b23ef..c3e6824e7 100644
--- a/skins/base/css/organisms/RoomView.css
+++ b/skins/base/css/organisms/RoomView.css
@@ -47,10 +47,13 @@ limitations under the License.
     -webkit-order: 2;
     order: 2;
 
+    min-width: 0px;
     max-width: 720px;
     width: 100%;
     margin: auto;
 
+    border-bottom: 1px solid #a8dbf3;
+
     overflow: scroll;
     -webkit-flex: 0 0 auto;
     flex: 0 0 auto;
diff --git a/skins/base/views/molecules/RoomHeader.js b/skins/base/views/molecules/RoomHeader.js
index 7ad001d66..a2fbdd625 100644
--- a/skins/base/views/molecules/RoomHeader.js
+++ b/skins/base/views/molecules/RoomHeader.js
@@ -57,7 +57,7 @@ module.exports = React.createClass({
                     case "ringback":
                     case "connected":
                         callButtons = (
-                            <div className="mx_RoomHeader_hangupButton" onClick={this.onHangupClick}>
+                            <div className="mx_RoomHeader_textButton" onClick={this.onHangupClick}>
                                 End call
                             </div>
                         );
@@ -72,15 +72,16 @@ module.exports = React.createClass({
             var actual_name = this.props.room.currentState.getStateEvents('m.room.name', '');
             if (actual_name) actual_name = actual_name.getContent().name;
             if (this.props.editing) {
-                name = <input type="text" defaultValue={actual_name} placeholder="Name" ref="name_edit"/>;
-                // if (topic) topic_el = <div className="mx_RoomHeader_topic"><textarea>{ topic.getContent().topic }</textarea></div>
-                save_button = (
-                    <div className="mx_RoomHeader_button"onClick={this.props.onSaveClick}>
-                        Save
+                name = 
+                    <div className="mx_RoomHeader_nameEditing">
+                        <input className="mx_RoomHeader_nameInput" type="text" defaultValue={actual_name} placeholder="Name" ref="name_edit"/>
                     </div>
-                );
+                // if (topic) topic_el = <div className="mx_RoomHeader_topic"><textarea>{ topic.getContent().topic }</textarea></div>
             } else {
-                name = <EditableText label={this.props.room.name} initialValue={actual_name} placeHolder="Name" onValueChanged={this.onNameChange} />;
+                name =
+                    <div className="mx_RoomHeader_name">
+                        <EditableText label={this.props.room.name} initialValue={actual_name} placeHolder="Name" onValueChanged={this.onNameChange} />
+                    </div>
                 if (topic) topic_el = <div className="mx_RoomHeader_topic">{ topic.getContent().topic }</div>;
                 settings_button = (
                     <div className="mx_RoomHeader_button" onClick={this.props.onSettingsClick}>
@@ -96,15 +97,12 @@ module.exports = React.createClass({
                             <img src={ MatrixClientPeg.get().getAvatarUrlForRoom(this.props.room, 48, 48, "crop") } width="48" height="48" alt=""/>
                         </div>
                         <div className="mx_RoomHeader_info">
-                            <div className="mx_RoomHeader_name">
-                                { name }
-                            </div>
+                            { name }
                             { topic_el }
                         </div>
                     </div>
                     {callButtons}
                     <div className="mx_RoomHeader_rightRow">
-                        { save_button }
                         { settings_button }
                         <div className="mx_RoomHeader_button">
                             <img src="img/search.png" width="32" height="32"/>
diff --git a/skins/base/views/molecules/RoomSettings.js b/skins/base/views/molecules/RoomSettings.js
index 36c1f4c29..6e6100198 100644
--- a/skins/base/views/molecules/RoomSettings.js
+++ b/skins/base/views/molecules/RoomSettings.js
@@ -128,12 +128,12 @@ module.exports = React.createClass({
 
         return (
             <div className="mx_RoomSettings">
-                <textarea placeholder="Description" defaultValue={topic} ref="topic"/> <br/>
+                <textarea className="mx_RoomSettings_description" placeholder="Topic" defaultValue={topic} ref="topic"/> <br/>
                 <label><input type="checkbox" ref="is_private" defaultChecked={join_rule != "public"}/> Make this room private</label> <br/>
                 <label><input type="checkbox" ref="share_history" defaultChecked={history_visibility == "shared"}/> Share message history with new users</label> <br/>
                 <label><input type="checkbox" /> Encrypt room</label> <br/>
 
-                Power levels:
+                <h3>Power levels</h3>
                 <div className="mx_RoomSettings_power_levels mx_RoomSettings_settings">
                     <div>
                         <label htmlFor="mx_RoomSettings_ban_level">Ban level</label>
@@ -173,7 +173,7 @@ module.exports = React.createClass({
                     </div>
                 </div>
 
-                User levels:
+                <h3>User levels</h3>
                 <div className="mx_RoomSettings_user_levels mx_RoomSettings_settings">
                     {Object.keys(user_levels).map(function(user, i) {
                         return (
@@ -185,7 +185,7 @@ module.exports = React.createClass({
                     })}
                 </div>
 
-                Event levels:
+                <h3>Event levels</h3>
                 <div className="mx_RoomSettings_event_lvels mx_RoomSettings_settings">
                     {Object.keys(events_levels).map(function(event_type, i) {
                         return (
@@ -197,7 +197,7 @@ module.exports = React.createClass({
                     })}
                 </div>
 
-                Banned users:
+                <h3>Banned users</h3>
                 <div className="mx_RoomSettings_banned">
                     {banned.map(function(member, i) {
                         return (
@@ -207,6 +207,12 @@ module.exports = React.createClass({
                         );
                     })}
                 </div>
+
+                <div className="mx_RoomSettings_buttons">
+                    <div className="mx_RoomSettings_button" onClick={this.props.onSaveClick}>
+                        Save this room
+                    </div>
+                </div>
             </div>
         );
     }
diff --git a/skins/base/views/organisms/RoomView.js b/skins/base/views/organisms/RoomView.js
index 25841b917..557943b4f 100644
--- a/skins/base/views/organisms/RoomView.js
+++ b/skins/base/views/organisms/RoomView.js
@@ -133,7 +133,7 @@ module.exports = React.createClass({
             var roomEdit = null;
 
             if (this.state.editingRoomSettings) {
-                roomEdit = <RoomSettings ref="room_settings" room={this.state.room} />;
+                roomEdit = <RoomSettings ref="room_settings" onSaveClick={this.onSaveClick} room={this.state.room} />;
             }
 
             if (this.state.uploadingRoomSettings) {
@@ -143,7 +143,7 @@ module.exports = React.createClass({
             return (
                 <div className="mx_RoomView">
                     <RoomHeader ref="header" room={this.state.room} editing={this.state.editingRoomSettings}
-                        onSettingsClick={this.onSettingsClick} onSaveClick={this.onSaveClick}/>
+                        onSettingsClick={this.onSettingsClick}/>
                     <div className="mx_RoomView_auxPanel">
                         <CallView room={this.state.room}/>
                         { roomEdit }

From f6be51bd98776d2acac72f92f008cf24a072e532 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Wed, 22 Jul 2015 00:17:15 -0700
Subject: [PATCH 2/3] make login page scrollable

---
 examples/trivial/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/trivial/index.html b/examples/trivial/index.html
index 1258b78af..8e9f43890 100644
--- a/examples/trivial/index.html
+++ b/examples/trivial/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" style="height: 100%; overflow: hidden">
+<html lang="en" style="height: 100%;">
   <head>
     <meta charset="utf-8">
     <title>vector</title>

From 663646f8453247af7ee70a6898b4b4b10d965467 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Wed, 22 Jul 2015 00:17:20 -0700
Subject: [PATCH 3/3] fix firefox layout

---
 skins/base/css/organisms/LeftPanel.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/skins/base/css/organisms/LeftPanel.css b/skins/base/css/organisms/LeftPanel.css
index f384dd8fd..5a466256c 100644
--- a/skins/base/css/organisms/LeftPanel.css
+++ b/skins/base/css/organisms/LeftPanel.css
@@ -40,7 +40,7 @@ limitations under the License.
     order: 1;
 
     overflow-y: scroll;
-    flex: 1;
+    flex: 1 1 0;
 }
 
 .mx_LeftPanel .mx_BottomLeftMenu {