PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

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

Browse source 
Finish off RoomSettings (part 2)
This commit is contained in:
Matthew Hodgson 2016-01-18 13:39:55 +00:00
commit 0ef03c5ca4
12 changed files with 243 additions and 72 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/structures/BottomLeftMenu.js
View file

@ -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>

2
src/skins/vector/css/common.css
View file

@ -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;

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

@ -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;

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

@ -18,7 +18,38 @@ limitations under the License.
width: 960px;
margin-left: auto;
margin-right: auto;
overflow-y: 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;
}
.mx_UserSettings_spinner {
@ -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;
margin-bottom: 24px;
margin-left: 63px;
float: right;
margin-right: 32px;
margin-left: 32px;
}
.mx_UserSettings_avatarPicker {
width: 320px;
margin-left: 32px;
margin-right: 32px;
float: right;
}
.mx_UserSettings_avatarPicker_edit {
position: relative;
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 .mx_RoomAvatar {
border-radius: 40px;
}
.mx_UserSettings_avatarPicker_img > img {
display: block;
margin: 0 auto;
.mx_UserSettings_avatarPicker_edit {
text-align: center;
margin-top: 10px;
}
.mx_UserSettings_avatarPicker_edit > input {
display: none;
}

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

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

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

@ -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;
@ -69,7 +77,20 @@ limitations under the License.
*/
padding-left: 12px;
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;
@ -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_nameEditing {
padding-left: 8px;
padding-right: 16px;
margin-top: -5px;
.mx_RoomHeader_placeholder {
color: #a2a2a2 ! important;
}
.mx_RoomHeader_name input, .mx_RoomHeader_nameInput {
border-radius: 3px;
width: 260px;
border: 1px solid #c7c7c7;
font-weight: 300;
font-size: 13px;
padding: 9px;
.mx_RoomHeader_editable {
border-bottom: 1px solid #c7c7c7 ! important;
min-width: 70px;
cursor: text;
}
.mx_RoomHeader_nameInput {
margin-top: 6px;
.mx_RoomHeader_editable:focus {
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;
padding-right: 16px;
margin-left: 19px;
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;

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

@ -15,23 +15,27 @@ limitations under the License.
*/
.mx_RoomSettings {
max-height: 250px;
padding-top: 12px;
margin-left: 65px;
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;

12
src/skins/vector/img/camera.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 2.4 KiB

13
src/skins/vector/img/cancel-small.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 873 B

13
src/skins/vector/img/plus.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 912 B

1
src/vector/index.js
View file

@ -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);
}
}

14
vector/index.html
View file

@ -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>