mirror of
https://github.com/SchildiChat/element-web.git
synced 2024-10-01 01:26:12 -04:00
make the UI fadable to help with decluttering
This commit is contained in:
parent
34bdd40953
commit
05e963d1e2
@ -89,7 +89,7 @@ var LeftPanel = React.createClass({
|
||||
var BottomLeftMenu = sdk.getComponent('structures.BottomLeftMenu');
|
||||
|
||||
var collapseButton;
|
||||
var classes = "mx_LeftPanel";
|
||||
var classes = "mx_LeftPanel mx_fadable";
|
||||
if (this.props.collapsed) {
|
||||
classes += " collapsed";
|
||||
}
|
||||
@ -109,7 +109,7 @@ var LeftPanel = React.createClass({
|
||||
}
|
||||
|
||||
return (
|
||||
<aside className={classes}>
|
||||
<aside className={classes} style={{ opacity: this.props.opacity }}>
|
||||
{ collapseButton }
|
||||
{ callPreview }
|
||||
<RoomList
|
||||
|
@ -158,13 +158,13 @@ module.exports = React.createClass({
|
||||
|
||||
}
|
||||
|
||||
var classes = "mx_RightPanel";
|
||||
var classes = "mx_RightPanel mx_fadable";
|
||||
if (this.props.collapsed) {
|
||||
classes += " collapsed";
|
||||
}
|
||||
|
||||
return (
|
||||
<aside className={classes}>
|
||||
<aside className={classes} style={{ opacity: this.props.opacity }}>
|
||||
<div className="mx_RightPanel_header">
|
||||
{ buttonGroup }
|
||||
</div>
|
||||
|
@ -58,6 +58,15 @@ input[type=text]:focus, textarea:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* applied to side-panels and messagepanel when in RoomSettings */
|
||||
.mx_fadable {
|
||||
opacity: 1;
|
||||
-webkit-transition: opacity 0.2s ease-in-out;
|
||||
-moz-transition: opacity 0.2s ease-in-out;
|
||||
-ms-transition: opacity 0.2s ease-in-out;
|
||||
-o-transition: opacity 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
/* XXX: critical hack to GeminiScrollbar to allow them to work in FF 42 and Chrome 48.
|
||||
Stop the scrollbar view from pushing out the container's overall sizing, which causes
|
||||
flexbox to adapt to the new size and cause the view to keep growing.
|
||||
|
@ -89,7 +89,7 @@ limitations under the License.
|
||||
margin: auto;
|
||||
|
||||
overflow: auto;
|
||||
border-bottom: 1px solid #eee;
|
||||
border-bottom: 1px solid #ccc;
|
||||
|
||||
-webkit-flex: 0 0 auto;
|
||||
flex: 0 0 auto;
|
||||
|
Loading…
Reference in New Issue
Block a user