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 67743877..6efbaa7f 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 53686ec9..c456d53b 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 5edc8504..b47039c3 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 bfc43026..f384dd8f 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 f860b23e..c3e6824e 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 7ad001d6..a2fbdd62 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 36c1f4c2..6e610019 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 25841b91..557943b4 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 1258b78a..8e9f4389 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 f384dd8f..5a466256 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 {