From 538536eb88728ca2c528f85b631280058b7adff4 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson 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 6774387726..6efbaa7f22 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 53686ec94e..c456d53b75 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 5edc8504d7..b47039c340 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 bfc4302655..f384dd8fd3 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 f860b23ef9..c3e6824e7c 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 7ad001d660..a2fbdd6258 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 = ( -
+
End call
); @@ -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 = ; - // if (topic) topic_el =
- save_button = ( -
- Save + name = +
+
- ); + // if (topic) topic_el =
} else { - name = ; + name = +
+ +
if (topic) topic_el =
{ topic.getContent().topic }
; settings_button = (
@@ -96,15 +97,12 @@ module.exports = React.createClass({
-
- { name } -
+ { name } { topic_el }
{callButtons}
- { save_button } { settings_button }
diff --git a/skins/base/views/molecules/RoomSettings.js b/skins/base/views/molecules/RoomSettings.js index 36c1f4c29e..6e6100198a 100644 --- a/skins/base/views/molecules/RoomSettings.js +++ b/skins/base/views/molecules/RoomSettings.js @@ -128,12 +128,12 @@ module.exports = React.createClass({ return (
-