Merge pull request #653 from vector-im/matthew/roomsettings2

Finish off RoomSettings (part 2)

src/components/structures/BottomLeftMenu.js

@@ -50,7 +50,7 @@ module.exports = React.createClass({
         return (
             <div className="mx_BottomLeftMenu">
                 <div className="mx_BottomLeftMenu_options">
-                    <BottomLeftMenuTile collapsed={ this.props.collapsed } img="img/create-big.svg" label="Create new room" onClick={ this.onCreateRoomClick }/>
+                    <BottomLeftMenuTile collapsed={ this.props.collapsed } img="img/create-big.svg" label="Start chat" onClick={ this.onCreateRoomClick }/>
                     <BottomLeftMenuTile collapsed={ this.props.collapsed } img="img/directory-big.svg" label="Directory" onClick={ this.onRoomDirectoryClick }/>
                     <BottomLeftMenuTile collapsed={ this.props.collapsed } img="img/settings-big.svg" label="Settings" onClick={ this.onSettingsClick }/>
                 </div>

src/skins/vector/css/common.css

@@ -52,7 +52,7 @@ a:visited {
     color: #76cfa6;
 }
 
-input[type=text]:focus, textarea:focus, .mx_RoomSettings textarea:focus {
+input[type=text]:focus, textarea:focus {
     border: 1px solid #76CFA6;
     outline: none;
     box-shadow: none;

src/skins/vector/css/matrix-react-sdk/structures/RoomView.css

@@ -44,7 +44,7 @@ limitations under the License.
     min-width: 0px;
     max-width: 960px;
     width: 100%;
-    font-size: 20px;
+    font-size: 18px;
     text-align: center;
 
     pointer-events: none;

src/skins/vector/css/matrix-react-sdk/structures/UserSettings.css

@@ -18,6 +18,37 @@ limitations under the License.
     width: 960px;
     margin-left: auto;
     margin-right: auto;
+
+    display: -webkit-box;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+    flex-direction: column;
+    -webkit-flex-direction: column;    
+}
+
+.mx_UserSettings .mx_RoomHeader {
+    -webkit-box-ordinal-group: 1;
+    -moz-box-ordinal-group: 1;
+    -ms-flex-order: 1;
+    -webkit-order: 1;
+    order: 1;
+
+    -webkit-flex: 0 0 83px;
+    flex: 0 0 83px;
+}
+
+.mx_UserSettings_body {
+    -webkit-box-ordinal-group: 2;
+    -moz-box-ordinal-group: 2;
+    -ms-flex-order: 2;
+    -webkit-order: 2;
+    order: 2;
+
+    -webkit-flex: 1 1 0;
+    flex: 1 1 0;
+
     overflow-y: auto;    
 }
 
@@ -33,7 +64,6 @@ limitations under the License.
     display: inline;
     vertical-align: middle;
     border: 0px;
-    height: 36px;
     border-radius: 36px;
     font-weight: 400;
     font-size: 16px;
@@ -97,6 +127,7 @@ limitations under the License.
 .mx_UserSettings_profileInputCell input,
 .mx_UserSettings_profileInputCell .mx_EditableText
 {
+    display: inline-block;
     border: 0px;
     border-bottom: 1px solid rgba(151, 151, 151, 0.5);
     padding: 0px;
@@ -106,6 +137,10 @@ limitations under the License.
     font-size: 16px;
 }
 
+.mx_UserSettings_profileInputCell .mx_EditableText_placeholder {
+    color: rgba(74, 74, 74, 0.5);    
+}
+
 .mx_UserSettings_notifInputCell {
     display: table-cell;
     padding-bottom: 21px;
@@ -121,37 +156,27 @@ limitations under the License.
 }
 
 .mx_UserSettings_logout {
-    margin-right: 24px;
+    float: right;
-    margin-bottom: 24px;
+    margin-right: 32px;
-    margin-left: 63px;
+    margin-left: 32px;
 }
 
 .mx_UserSettings_avatarPicker {
-    width: 320px;
+    margin-left: 32px;
+    margin-right: 32px;
     float: right;
+    cursor: pointer;
+}
+
+.mx_UserSettings_avatarPicker .mx_RoomAvatar {
+    border-radius: 40px;
 }
 
 .mx_UserSettings_avatarPicker_edit {
-    position: relative;
+    text-align: center;
-    left: 50%;
-    display: inline-block;
     margin-top: 10px;
 }
 
 .mx_UserSettings_avatarPicker_edit > input {
     display: none;
 }
-
-.mx_UserSettings_avatarPicker_edit > label {
-    cursor: pointer;
-}
-
-.mx_UserSettings_avatarPicker_img {
-    margin: 0 auto;
-    width: 75%;
-}
-
-.mx_UserSettings_avatarPicker_img > img {
-    display: block;
-    margin: 0 auto;
-}

src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css

@@ -89,7 +89,7 @@ limitations under the License.
 }
 
 .mx_EventTile_content .markdown-body .hljs {
-    display: inherit ! important;
+    display: inline ! important;
 }
 
 /* end of overrides */

src/skins/vector/css/matrix-react-sdk/views/rooms/RoomHeader.css

@@ -14,7 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_RoomHeader {
+/* add 20px to the height of the header when editing */
+.mx_RoomHeader_editing {
+    -webit-flex: 0 0 103px ! important;
+    flex: 0 0 103px ! important;
 }
 
 .mx_RoomHeader_wrapper {
@@ -33,6 +36,10 @@ limitations under the License.
     display: flex;
 }
 
+.mx_RoomHeader_editing .mx_RoomHeader_wrapper {
+    border-bottom: 1px solid transparent;
+}
+
 .mx_RoomHeader_leftRow {
     margin-left: -2px;
 
@@ -47,12 +54,13 @@ limitations under the License.
 }
 
 .mx_RoomHeader_textButton {
-    height: 48px;
+    height: 36px;
     background-color: #76cfa6;
-    border-radius: 48px;
+    border-radius: 36px;
     margin-right: 8px;
     color: #fff;
-    line-height: 48px;
+    line-height: 34px;
+    margin-top: -2px;
     text-align: center;
 
     -webkit-box-ordinal-group: 2;
@@ -71,6 +79,19 @@ limitations under the License.
     padding-right: 12px;
 }
 
+.mx_RoomHeader_cancelButton {
+    -webkit-box-ordinal-group: 2;
+    -moz-box-ordinal-group: 2;
+    -ms-flex-order: 2;
+    -webkit-order: 2;
+    order: 2;
+
+    cursor: pointer;
+
+    padding-left: 12px;
+    padding-right: 12px;
+}
+
 .mx_RoomHeader_rightRow {
     margin-top: 4px;
     background-color: #fff;
@@ -84,7 +105,7 @@ limitations under the License.
 
 .mx_RoomHeader_info {
     display: table-cell;
-    /* height: 48px; */
+    width: 100%;
     vertical-align: middle;
 }
 
@@ -107,9 +128,9 @@ limitations under the License.
 }
 
 .mx_RoomHeader_name {
-    cursor: pointer;
     vertical-align: middle;
-    height: 30px;
+    width: 100%;
+    height: 31px;
     overflow: hidden;
     color: #454545;
     font-weight: bold;
@@ -118,6 +139,7 @@ limitations under the License.
     padding-right: 16px;
     /* why isn't text-overflow working? */
     text-overflow: ellipsis;
+    border-bottom: 1px solid transparent;
 }
 
 .mx_RoomHeader_nametext {
@@ -142,11 +164,18 @@ limitations under the License.
     pointer-events: none;
 }
 
-.mx_RoomHeader_leftRow:hover .mx_RoomHeader_name {
+.mx_RoomHeader_name,
+.mx_RoomHeader_avatar,
+.mx_RoomHeader_avatarPicker,
+.mx_RoomHeader_avatarPicker_edit {
+    cursor: pointer;
+}
+
+.mx_RoomHeader_name:hover div:not(.mx_RoomHeader_editable) {
     color: #76cfa6;
 }
 
-.mx_RoomHeader_leftRow:hover .mx_RoomHeader_settingsButton {
+.mx_RoomHeader_name:hover .mx_RoomHeader_settingsButton {
     visibility: visible;
 }
 
@@ -159,24 +188,20 @@ limitations under the License.
     visibility: visible;
 }
 
-
+.mx_RoomHeader_placeholder {
-.mx_RoomHeader_nameEditing {
+    color: #a2a2a2 ! important;
-    padding-left: 8px;
-    padding-right: 16px;
-    margin-top: -5px;
 }
 
-.mx_RoomHeader_name input, .mx_RoomHeader_nameInput {
+.mx_RoomHeader_editable {
-    border-radius: 3px;
+    border-bottom: 1px solid #c7c7c7 ! important;
-    width: 260px;
+    min-width: 70px;
-    border: 1px solid #c7c7c7;
+    cursor: text;
-    font-weight: 300;
-    font-size: 13px;
-    padding: 9px;
 }
 
-.mx_RoomHeader_nameInput {
+.mx_RoomHeader_editable:focus {
-    margin-top: 6px;
+    border-bottom: 1px solid #76CFA6 ! important;
+    outline: none;
+    box-shadow: none;
 }
 
 .mx_RoomHeader_topic {
@@ -185,10 +210,11 @@ limitations under the License.
     max-height: 42px;
     color: #454545;
     font-weight: 300;  
-    padding-left: 19px;
+    margin-left: 19px;
-    padding-right: 16px;
+    margin-right: 16px;
     overflow: hidden;
     text-overflow: ellipsis;
+    border-bottom: 1px solid transparent;    
 }
 
 .mx_RoomHeader_avatar {
@@ -198,10 +224,24 @@ limitations under the License.
     vertical-align: middle;
 }
 
-.mx_RoomHeader_avatar img {
+.mx_RoomHeader_avatar .mx_RoomAvatar {
 	border-radius: 24px;
 }
 
+.mx_RoomHeader_avatarPicker_edit {
+    position: absolute;
+    margin-left: 16px;
+    margin-top: 4px;
+}
+
+.mx_RoomHeader_avatarPicker_edit > label {
+    cursor: pointer;
+}
+
+.mx_RoomHeader_avatarPicker_edit > input {
+    display: none;
+}
+
 .mx_RoomHeader_button {
     display: table-cell;
     vertical-align: top;

src/skins/vector/css/matrix-react-sdk/views/rooms/RoomSettings.css

@@ -15,23 +15,27 @@ limitations under the License.
 */
 
 .mx_RoomSettings {
-    max-height: 250px;
+    margin-left: 65px;
-    padding-top: 12px;
+    margin-bottom: 20px;
 }
 
-.mx_RoomSettings_settings {
+.mx_RoomSettings_powerLevels {
     display: table;
-    margin: 5px 0;
 }
 
-.mx_RoomSettings_settings > div {
+.mx_RoomSettings_powerLevel {
     display: table-row;
 }
 
-.mx_RoomSettings_settings > div > * {
+.mx_RoomSettings_powerLevelKey,
+.mx_RoomSettings_powerLevel .mx_PowerSelector {
     display: table-cell;
+    padding-bottom: 5px;
+}
 
-    margin: 0 10px;
+.mx_RoomSettings_powerLevelKey {
+    text-align: right;
+    padding-right: 0.3em;
 }
 
 .mx_RoomSettings h3 {
@@ -43,6 +47,7 @@ limitations under the License.
     margin-bottom: 10px;
 }
 
+/*
 .mx_RoomSettings input,
 .mx_RoomSettings textarea  {
     border-radius: 3px;
@@ -52,6 +57,11 @@ limitations under the License.
     padding: 9px;
     margin-top: 6px;
 }
+*/
+
+.mx_RoomSettings .mx_RoomSettings_tags input[type="checkbox"] {
+    margin-left: 1em;
+}
 
 .mx_RoomSettings .mx_RoomSettings_roomColor {
     display: inline-block;
@@ -75,18 +85,61 @@ limitations under the License.
     width: 100%;
 }
 
+.mx_RoomSettings .mx_RoomSettings_aliasesTable {
+    margin-top: 12px;
+    margin-bottom: 12px;
+    margin-left: 56px;
+    display: table;
+}
+
+.mx_RoomSettings .mx_RoomSettings_aliasesRow {
+    display: table-row;
+}
+
+.mx_RoomSettings .mx_RoomSettings_alias {
+    display: table-cell;
+    margin-bottom: 20px;
+}
+
+.mx_RoomSettings .mx_RoomSettings_addAlias,
+.mx_RoomSettings .mx_RoomSettings_deleteAlias {
+    display: table-cell;
+    padding-left: 0.5em;
+    cursor: pointer;
+}
+
+.mx_RoomSettings_editable {
+    border: 0px;
+    border-bottom: 1px solid #c7c7c7;
+    padding: 0px;
+    min-width: 240px;
+}
+
+.mx_RoomSettings_editable:focus {
+    border-bottom: 1px solid #76CFA6;
+    outline: none;
+    box-shadow: none;
+}
+
+.mx_RoomSettings_deleteAlias,
+.mx_RoomSettings_addAlias {
+    display: table-cell;
+    visibility: visible;
+}
+
+.mx_RoomSettings_deleteAlias:hover,
+.mx_RoomSettings_addAlias:hover {
+    visibility: visible;
+}
+
+.mx_RoomSettings_aliasPlaceholder {
+    color: #a2a2a2;
+}
+
 .mx_RoomSettings .mx_RoomAvatar {
     border-radius: 120px;
 }
 
-.mx_RoomSettings input[type="file"] {
-    border: none;
-}
-
-.mx_RoomSettings_description {
-    width: 330px;
-}
-
 .mx_RoomSettings_buttons {
     text-align: right;
     margin-bottom: 16px;

src/skins/vector/img/camera.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="17px" height="15px" viewBox="-1 -1 16 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.4.4 (17249) - http://www.bohemiancoding.com/sketch -->
+    <title>icon_camera</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="06a-Room-settings" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="06_4-Room-settings-admin" sketch:type="MSArtboardGroup" transform="translate(-248.000000, -71.000000)" fill="#454545">
+            <path d="M255.5,76.25 C256.119795,76.25 256.649737,76.4700499 257.089844,76.9101562 C257.52995,77.3502626 257.75,77.8802052 257.75,78.5 C257.75,79.1197948 257.52995,79.6497374 257.089844,80.0898438 C256.649737,80.5299501 256.119795,80.75 255.5,80.75 C254.880205,80.75 254.350263,80.5299501 253.910156,80.0898438 C253.47005,79.6497374 253.25,79.1197948 253.25,78.5 C253.25,77.8802052 253.47005,77.3502626 253.910156,76.9101562 C254.350263,76.4700499 254.880205,76.25 255.5,76.25 L255.5,76.25 Z M261,73 C261.552086,73 262.023436,73.1953105 262.414062,73.5859375 C262.804689,73.9765645 263,74.4479139 263,75 L263,82 C263,82.5520861 262.804689,83.0234355 262.414062,83.4140625 C262.023436,83.8046895 261.552086,84 261,84 L250,84 C249.447914,84 248.976564,83.8046895 248.585938,83.4140625 C248.195311,83.0234355 248,82.5520861 248,82 L248,75 C248,74.4479139 248.195311,73.9765645 248.585938,73.5859375 C248.976564,73.1953105 249.447914,73 250,73 L251.75,73 L252.148438,71.9375 C252.247396,71.6822904 252.428384,71.4622405 252.691406,71.2773438 C252.954428,71.092447 253.223957,71 253.5,71 L257.5,71 C257.776043,71 258.045572,71.092447 258.308594,71.2773438 C258.571616,71.4622405 258.752604,71.6822904 258.851562,71.9375 L259.25,73 L261,73 Z M255.5,82 C256.463546,82 257.287757,81.6575555 257.972656,80.9726562 C258.657556,80.287757 259,79.4635465 259,78.5 C259,77.5364535 258.657556,76.712243 257.972656,76.0273438 C257.287757,75.3424445 256.463546,75 255.5,75 C254.536454,75 253.712243,75.3424445 253.027344,76.0273438 C252.342444,76.712243 252,77.5364535 252,78.5 C252,79.4635465 252.342444,80.287757 253.027344,80.9726562 C253.712243,81.6575555 254.536454,82 255.5,82 L255.5,82 Z" id="icon_camera" sketch:type="MSShapeGroup"></path>
+        </g>
+    </g>
+</svg>

src/skins/vector/img/cancel-small.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="14px" height="14px" viewBox="-1 -1 13 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.4.4 (17249) - http://www.bohemiancoding.com/sketch -->
+    <title>Line + Line</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="Line-+-Line" sketch:type="MSLayerGroup" transform="translate(2.000000, 2.000000)" stroke="#4A4A4A" stroke-width="2.82" stroke-linecap="square">
+            <path d="M8,0 L0,8" id="Line" sketch:type="MSShapeGroup"></path>
+            <path d="M0,0 L8,8" id="Line" sketch:type="MSShapeGroup"></path>
+        </g>
+    </g>
+</svg>

src/skins/vector/img/plus.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="14px" height="14px" viewBox="-1 -1 13 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.4.4 (17249) - http://www.bohemiancoding.com/sketch -->
+    <title>Line + Line</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="Line-+-Line" sketch:type="MSLayerGroup" transform="translate(2.000000, 2.000000)" stroke="#4A4A4A" stroke-width="2.82" stroke-linecap="square">
+            <path d="M4,0.228763834 L4,7.77123617" id="Line" sketch:type="MSShapeGroup"></path>
+            <path d="M0.228763834,4 L7.77123617,4" id="Line" sketch:type="MSShapeGroup"></path>
+        </g>
+    </g>
+</svg>

src/vector/index.js

@@ -117,6 +117,7 @@ var onNewScreen = function(screen) {
         var hash = '#/' + screen;
         lastLocationHashSet = hash;
         window.location.hash = hash;
+        if (ga) ga('send', 'pageview', window.location.pathname + window.location.search + window.location.hash);
     }
 }
 

vector/index.html

@@ -48,5 +48,19 @@
         <source src="media/busy.ogg" type="audio/ogg" />
         <source src="media/busy.mp3" type="audio/mpeg" />
     </audio>
+    <script>
+        if (window.location.host === 'www.vector.im' || window.location.host === 'vector.im') {
+            (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+            })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+            ga('create', 'UA-54779209-2', 'auto');
+            ga('send', 'pageview', window.location.pathname + window.location.search + window.location.hash);
+        }
+        else {
+            var ga = null;
+        }
+    </script>
   </body>
 </html>