mirror of
https://github.com/SchildiChat/element-web.git
synced 2024-10-01 01:26:12 -04:00
droptarget and usersettings and roomsettings layout tweaks
This commit is contained in:
parent
41ae851df4
commit
1fcb4ba94f
@ -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>
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -15,7 +15,6 @@ limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_RoomSettings {
|
||||
padding-top: 12px;
|
||||
}
|
||||
|
||||
.mx_RoomSettings_settings {
|
||||
|
Loading…
Reference in New Issue
Block a user