Fix waste of space of collapsed left panel

Signed-off-by: Anton Zuenko <anton@zuenko.ru>
pull/21833/head
Anton Zuenko 2019-08-05 18:03:20 +02:00
parent ab05d8c7a4
commit a3eb45e0b9
5 changed files with 10 additions and 8 deletions

View File

@ -24,13 +24,13 @@ limitations under the License.
.mx_LeftPanel_container.collapsed { .mx_LeftPanel_container.collapsed {
min-width: unset; min-width: unset;
/* Collapsed LeftPanel 70px */ /* Collapsed LeftPanel 50px */
flex: 0 0 70px; flex: 0 0 50px;
} }
.mx_LeftPanel_container.collapsed.mx_LeftPanel_container_hasTagPanel { .mx_LeftPanel_container.collapsed.mx_LeftPanel_container_hasTagPanel {
/* TagPanel 70px + Collapsed LeftPanel 70px */ /* TagPanel 70px + Collapsed LeftPanel 50px */
flex: 0 0 140px; flex: 0 0 120px;
} }
.mx_LeftPanel_tagPanelContainer { .mx_LeftPanel_tagPanelContainer {

View File

@ -143,7 +143,7 @@ limitations under the License.
} }
.mx_RoomSubList_labelContainer { .mx_RoomSubList_labelContainer {
margin-right: 14px; margin-right: 8px;
margin-left: 2px; margin-left: 2px;
} }

View File

@ -22,7 +22,7 @@ limitations under the License.
display: flex; display: flex;
align-items: center; align-items: center;
min-width: 0; min-width: 0;
padding: 0 7px; padding: 0 4px;
overflow: hidden; overflow: hidden;
} }

View File

@ -117,7 +117,7 @@ limitations under the License.
.collapsed { .collapsed {
.mx_RoomTile { .mx_RoomTile {
margin: 0 2px; margin: 0 6px;
padding: 0 2px; padding: 0 2px;
position: relative; position: relative;
justify-content: center; justify-content: center;

View File

@ -98,10 +98,12 @@ export default class TopLeftMenuButton extends React.Component {
render() { render() {
const name = this._getDisplayName(); const name = this._getDisplayName();
let nameElement; let nameElement;
let chevronElement;
if (!this.props.collapsed) { if (!this.props.collapsed) {
nameElement = <div className="mx_TopLeftMenuButton_name"> nameElement = <div className="mx_TopLeftMenuButton_name">
{ name } { name }
</div>; </div>;
chevronElement = <span className="mx_TopLeftMenuButton_chevron" />;
} }
return ( return (
@ -121,7 +123,7 @@ export default class TopLeftMenuButton extends React.Component {
resizeMethod="crop" resizeMethod="crop"
/> />
{ nameElement } { nameElement }
<span className="mx_TopLeftMenuButton_chevron" /> { chevronElement }
</AccessibleButton> </AccessibleButton>
); );
} }