Merge pull request #1376 from vector-im/matthew/fadable

make the UI fadable to help with decluttering
This commit is contained in:
Matthew Hodgson 2016-04-12 18:04:47 +01:00
commit 18bd1058d3
4 changed files with 14 additions and 5 deletions

View File

@ -89,7 +89,7 @@ var LeftPanel = React.createClass({
var BottomLeftMenu = sdk.getComponent('structures.BottomLeftMenu'); var BottomLeftMenu = sdk.getComponent('structures.BottomLeftMenu');
var collapseButton; var collapseButton;
var classes = "mx_LeftPanel"; var classes = "mx_LeftPanel mx_fadable";
if (this.props.collapsed) { if (this.props.collapsed) {
classes += " collapsed"; classes += " collapsed";
} }
@ -109,7 +109,7 @@ var LeftPanel = React.createClass({
} }
return ( return (
<aside className={classes}> <aside className={classes} style={{ opacity: this.props.opacity }}>
{ collapseButton } { collapseButton }
{ callPreview } { callPreview }
<RoomList <RoomList

View File

@ -158,13 +158,13 @@ module.exports = React.createClass({
} }
var classes = "mx_RightPanel"; var classes = "mx_RightPanel mx_fadable";
if (this.props.collapsed) { if (this.props.collapsed) {
classes += " collapsed"; classes += " collapsed";
} }
return ( return (
<aside className={classes}> <aside className={classes} style={{ opacity: this.props.opacity }}>
<div className="mx_RightPanel_header"> <div className="mx_RightPanel_header">
{ buttonGroup } { buttonGroup }
</div> </div>

View File

@ -58,6 +58,15 @@ input[type=text]:focus, textarea:focus {
box-shadow: none; 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. /* 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 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. flexbox to adapt to the new size and cause the view to keep growing.

View File

@ -89,7 +89,7 @@ limitations under the License.
margin: auto; margin: auto;
overflow: auto; overflow: auto;
border-bottom: 1px solid #eee; border-bottom: 1px solid #ccc;
-webkit-flex: 0 0 auto; -webkit-flex: 0 0 auto;
flex: 0 0 auto; flex: 0 0 auto;