droptarget and usersettings and roomsettings layout tweaks

This commit is contained in:
Matthew Hodgson 2016-01-15 15:26:00 +00:00
parent 41ae851df4
commit 1fcb4ba94f
5 changed files with 68 additions and 33 deletions

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>

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;

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 {
@ -96,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;
@ -105,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;

View File

@ -14,7 +14,10 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_RoomHeader {
/* add 12px to the height of the header when editing */
.mx_RoomHeader_editing {
-webit-flex: 0 0 95px ! important;
flex: 0 0 95px ! 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;
@ -98,7 +105,7 @@ limitations under the License.
.mx_RoomHeader_info {
display: table-cell;
/* height: 48px; */
width: 100%;
vertical-align: middle;
}
@ -122,6 +129,7 @@ limitations under the License.
.mx_RoomHeader_name {
vertical-align: middle;
width: 100%;
height: 31px;
overflow: hidden;
color: #454545;
@ -131,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 {
@ -155,15 +164,16 @@ limitations under the License.
pointer-events: none;
}
.mx_RoomHeader_leftRow:hover {
.mx_RoomHeader_name,
.mx_RoomHeader_avatar {
cursor: pointer;
}
.mx_RoomHeader_leftRow:hover .mx_RoomHeader_name div:not(.mx_RoomHeader_editable) {
.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;
}
@ -181,38 +191,17 @@ limitations under the License.
}
.mx_RoomHeader_editable {
border-bottom: 1px solid #c7c7c7;
border-bottom: 1px solid #c7c7c7 ! important;
min-width: 70px;
cursor: text;
}
.mx_RoomHeader_editable:focus {
border-bottom: 1px solid #76CFA6;
border-bottom: 1px solid #76CFA6 ! important;
outline: none;
box-shadow: none;
}
/*
.mx_RoomHeader_nameEditing {
padding-left: 8px;
padding-right: 16px;
margin-top: -5px;
}
.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_nameInput {
margin-top: 6px;
}
*/
.mx_RoomHeader_topic {
vertical-align: bottom;
float: left;
@ -223,6 +212,7 @@ limitations under the License.
margin-right: 16px;
overflow: hidden;
text-overflow: ellipsis;
border-bottom: 1px solid transparent;
}
.mx_RoomHeader_avatar {
@ -232,10 +222,20 @@ 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 > input {
display: none;
}
.mx_RoomHeader_button {
display: table-cell;
vertical-align: top;

View File

@ -15,7 +15,6 @@ limitations under the License.
*/
.mx_RoomSettings {
padding-top: 12px;
}
.mx_RoomSettings_settings {