Merge pull request #4753 from matrix-org/travis/room-list/minimized
Add a minimized view to the new room list
This commit is contained in:
Travis Ralston
GitHub
commit
ec48c76a4f
10 changed files with 245 additions and 50 deletions
|
|
@ -138,4 +138,38 @@ $roomListMinimizedWidth: 50px;
|
|||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
// These styles override the defaults for the minimized (66px) layout
|
||||
&.mx_LeftPanel2_minimized {
|
||||
min-width: unset;
|
||||
|
||||
// We have to forcefully set the width to override the resizer's style attribute.
|
||||
width: calc(68px + $tagPanelWidth) !important;
|
||||
|
||||
.mx_LeftPanel2_roomListContainer {
|
||||
width: 68px;
|
||||
|
||||
.mx_LeftPanel2_userHeader {
|
||||
.mx_LeftPanel2_headerRow {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.mx_LeftPanel2_userAvatarContainer {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_LeftPanel2_filterContainer {
|
||||
// Organize the flexbox into a centered column layout
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
.mx_LeftPanel2_exploreButton {
|
||||
margin-left: 0;
|
||||
margin-top: 8px;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -67,4 +67,15 @@ limitations under the License.
|
|||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
&.mx_RoomSearch_minimized {
|
||||
border-radius: 32px;
|
||||
height: auto;
|
||||
width: auto;
|
||||
padding: 8px;
|
||||
|
||||
.mx_RoomSearch_icon {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -51,6 +51,7 @@ limitations under the License.
|
|||
margin: 0;
|
||||
visibility: hidden;
|
||||
position: relative;
|
||||
border-radius: 32px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
|
|
@ -172,7 +173,7 @@ limitations under the License.
|
|||
border: 2px solid $primary-fg-color;
|
||||
}
|
||||
|
||||
.mx_RoomSublist2_headerContainer {
|
||||
&:not(.mx_RoomSublist2_minimized) > .mx_RoomSublist2_headerContainer {
|
||||
// If the header doesn't have an aux button we still need to hide the badge for
|
||||
// the menu button.
|
||||
.mx_RoomSublist2_badgeContainer {
|
||||
|
|
@ -195,18 +196,91 @@ limitations under the License.
|
|||
.mx_RoomSublist2_menuButton {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 32px;
|
||||
margin-left: 16px;
|
||||
background-color: #fff; // TODO: Variable and theme
|
||||
visibility: visible;
|
||||
background-color: #fff; // TODO: Variable and theme
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.mx_RoomSublist2_minimized {
|
||||
.mx_RoomSublist2_headerContainer {
|
||||
height: auto;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
|
||||
.mx_RoomSublist2_badgeContainer {
|
||||
order: 1;
|
||||
align-self: flex-end;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.mx_RoomSublist2_headerText {
|
||||
order: 2;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.mx_RoomSublist2_auxButton {
|
||||
order: 4;
|
||||
visibility: visible;
|
||||
width: 32px !important; // !important to override hover styles
|
||||
height: 32px !important; // !important to override hover styles
|
||||
margin-left: 0 !important; // !important to override hover styles
|
||||
background-color: #fff; // TODO: Variable and theme
|
||||
margin-top: 8px;
|
||||
|
||||
&::before {
|
||||
top: 8px;
|
||||
left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomSublist2_resizeBox {
|
||||
align-items: center;
|
||||
|
||||
.mx_RoomSublist2_showMoreButton {
|
||||
flex-direction: column;
|
||||
|
||||
.mx_RoomSublist2_showMoreButtonChevron {
|
||||
margin-right: 12px; // to center
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover, &.mx_RoomSublist2_hasMenuOpen {
|
||||
.mx_RoomSublist2_menuButton {
|
||||
visibility: visible;
|
||||
position: absolute;
|
||||
bottom: 48px; // align to middle of name, 40px for aux button (with padding) and 8px for alignment
|
||||
right: 0;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 0;
|
||||
z-index: 1; // occlude the list name
|
||||
|
||||
// This is the same color as the left panel background because it needs
|
||||
// to occlude the sublist title
|
||||
background-color: $header-panel-bg-color;
|
||||
|
||||
&::before {
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomSublist2_headerContainer:not(.mx_RoomSublist2_headerContainer_withAux) {
|
||||
.mx_RoomSublist2_menuButton {
|
||||
bottom: 8px; // align to the middle of name, 40px less than the `bottom` above.
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// We have a hover style on the room list with no specific list hovered, so account for that
|
||||
.mx_RoomList2:hover .mx_RoomSublist2,
|
||||
.mx_RoomSublist2_hasMenuOpen {
|
||||
.mx_RoomList2:hover .mx_RoomSublist2:not(.mx_RoomSublist2_minimized),
|
||||
.mx_RoomSublist2_hasMenuOpen:not(.mx_RoomSublist2_minimized) {
|
||||
.mx_RoomSublist2_headerContainer_withAux {
|
||||
.mx_RoomSublist2_badgeContainer {
|
||||
// Completely hide the badge
|
||||
|
|
|
|||
|
|
@ -115,18 +115,37 @@ limitations under the License.
|
|||
mask-image: url('$(res)/img/feather-customised/more-horizontal.svg');
|
||||
}
|
||||
|
||||
&:hover, &.mx_RoomTile2_hasMenuOpen {
|
||||
// Hide the badge container on hover because it'll be a menu button
|
||||
.mx_RoomTile2_badgeContainer {
|
||||
width: 0;
|
||||
height: 0;
|
||||
visibility: hidden;
|
||||
&:not(.mx_RoomTile2_minimized) {
|
||||
&:hover, &.mx_RoomTile2_hasMenuOpen {
|
||||
// Hide the badge container on hover because it'll be a menu button
|
||||
.mx_RoomTile2_badgeContainer {
|
||||
width: 0;
|
||||
height: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.mx_RoomTile2_menuButton {
|
||||
width: 18px;
|
||||
height: 32px;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.mx_RoomTile2_minimized {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
.mx_RoomTile2_avatarContainer {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.mx_RoomTile2_menuButton {
|
||||
width: 18px;
|
||||
height: 32px;
|
||||
visibility: visible;
|
||||
.mx_RoomTile2_badgeContainer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ import { UPDATE_EVENT } from "../../stores/AsyncStore";
|
|||
*******************************************************************/
|
||||
|
||||
interface IProps {
|
||||
// TODO: Support collapsed state
|
||||
isMinimized: boolean;
|
||||
}
|
||||
|
||||
interface IState {
|
||||
|
|
@ -106,11 +106,22 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
|
|||
if (this.state.showBreadcrumbs) {
|
||||
breadcrumbs = (
|
||||
<div className="mx_LeftPanel2_headerRow mx_LeftPanel2_breadcrumbsContainer">
|
||||
<RoomBreadcrumbs2 />
|
||||
{this.props.isMinimized ? null : <RoomBreadcrumbs2 />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
let name = <span className="mx_LeftPanel2_userName">{displayName}</span>;
|
||||
let buttons = (
|
||||
<span className="mx_LeftPanel2_headerButtons">
|
||||
<UserMenuButton />
|
||||
</span>
|
||||
);
|
||||
if (this.props.isMinimized) {
|
||||
name = null;
|
||||
buttons = null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="mx_LeftPanel2_userHeader">
|
||||
<div className="mx_LeftPanel2_headerRow">
|
||||
|
|
@ -125,10 +136,8 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
|
|||
className="mx_LeftPanel2_userAvatar"
|
||||
/>
|
||||
</span>
|
||||
<span className="mx_LeftPanel2_userName">{displayName}</span>
|
||||
<span className="mx_LeftPanel2_headerButtons">
|
||||
<UserMenuButton />
|
||||
</span>
|
||||
{name}
|
||||
{buttons}
|
||||
</div>
|
||||
{breadcrumbs}
|
||||
</div>
|
||||
|
|
@ -140,7 +149,7 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
|
|||
|
||||
return (
|
||||
<div className="mx_LeftPanel2_filterContainer">
|
||||
<RoomSearch onQueryUpdate={this.onSearch} />
|
||||
<RoomSearch onQueryUpdate={this.onSearch} isMinimized={this.props.isMinimized} />
|
||||
<AccessibleButton
|
||||
tabIndex={-1}
|
||||
className='mx_LeftPanel2_exploreButton'
|
||||
|
|
@ -166,12 +175,14 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
|
|||
searchFilter={this.state.searchFilter}
|
||||
onFocus={() => {/*TODO*/}}
|
||||
onBlur={() => {/*TODO*/}}
|
||||
isMinimized={this.props.isMinimized}
|
||||
/>;
|
||||
|
||||
// TODO: Conference handling / calls
|
||||
|
||||
const containerClasses = classNames({
|
||||
"mx_LeftPanel2": true,
|
||||
"mx_LeftPanel2_minimized": this.props.isMinimized,
|
||||
});
|
||||
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -677,7 +677,7 @@ class LoggedInView extends React.PureComponent<IProps, IState> {
|
|||
if (SettingsStore.isFeatureEnabled("feature_new_room_list")) {
|
||||
// TODO: Supply props like collapsed and disabled to LeftPanel2
|
||||
leftPanel = (
|
||||
<LeftPanel2 />
|
||||
<LeftPanel2 isMinimized={this.props.collapseLhs || false} />
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -35,6 +35,7 @@ import { Action } from "../../dispatcher/actions";
|
|||
|
||||
interface IProps {
|
||||
onQueryUpdate: (newQuery: string) => void;
|
||||
isMinimized: boolean;
|
||||
}
|
||||
|
||||
interface IState {
|
||||
|
|
@ -75,6 +76,10 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
|
|||
this.onChange();
|
||||
};
|
||||
|
||||
private openSearch = () => {
|
||||
defaultDispatcher.dispatch({action: "show_left_panel"});
|
||||
};
|
||||
|
||||
private onChange = () => {
|
||||
if (!this.inputRef.current) return;
|
||||
this.setState({query: this.inputRef.current.value});
|
||||
|
|
@ -111,6 +116,7 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
|
|||
const classes = classNames({
|
||||
'mx_RoomSearch': true,
|
||||
'mx_RoomSearch_expanded': this.state.query || this.state.focused,
|
||||
'mx_RoomSearch_minimized': this.props.isMinimized,
|
||||
});
|
||||
|
||||
const inputClasses = classNames({
|
||||
|
|
@ -118,26 +124,48 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
|
|||
'mx_RoomSearch_inputExpanded': this.state.query || this.state.focused,
|
||||
});
|
||||
|
||||
return (
|
||||
<div className={classes}>
|
||||
<div className='mx_RoomSearch_icon'/>
|
||||
<input
|
||||
type="text"
|
||||
ref={this.inputRef}
|
||||
className={inputClasses}
|
||||
value={this.state.query}
|
||||
onFocus={this.onFocus}
|
||||
onBlur={this.onBlur}
|
||||
onChange={this.onChange}
|
||||
onKeyDown={this.onKeyDown}
|
||||
placeholder={_t("Search")}
|
||||
autoComplete="off"
|
||||
/>
|
||||
let icon = (
|
||||
<div className='mx_RoomSearch_icon'/>
|
||||
);
|
||||
let input = (
|
||||
<input
|
||||
type="text"
|
||||
ref={this.inputRef}
|
||||
className={inputClasses}
|
||||
value={this.state.query}
|
||||
onFocus={this.onFocus}
|
||||
onBlur={this.onBlur}
|
||||
onChange={this.onChange}
|
||||
onKeyDown={this.onKeyDown}
|
||||
placeholder={_t("Search")}
|
||||
autoComplete="off"
|
||||
/>
|
||||
);
|
||||
let clearButton = (
|
||||
<AccessibleButton
|
||||
tabIndex={-1}
|
||||
className='mx_RoomSearch_clearButton'
|
||||
onClick={this.clearInput}
|
||||
/>
|
||||
);
|
||||
|
||||
if (this.props.isMinimized) {
|
||||
icon = (
|
||||
<AccessibleButton
|
||||
tabIndex={-1}
|
||||
className='mx_RoomSearch_clearButton'
|
||||
onClick={this.clearInput}
|
||||
className='mx_RoomSearch_icon'
|
||||
onClick={this.openSearch}
|
||||
/>
|
||||
);
|
||||
input = null;
|
||||
clearButton = null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={classes}>
|
||||
{icon}
|
||||
{input}
|
||||
{clearButton}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -45,6 +45,7 @@ interface IProps {
|
|||
resizeNotifier: ResizeNotifier;
|
||||
collapsed: boolean;
|
||||
searchFilter: string;
|
||||
isMinimized: boolean;
|
||||
}
|
||||
|
||||
interface IState {
|
||||
|
|
@ -200,6 +201,7 @@ export default class RoomList2 extends React.Component<IProps, IState> {
|
|||
addRoomLabel={aesthetics.addRoomLabel}
|
||||
isInvite={aesthetics.isInvite}
|
||||
layout={this.state.layouts.get(orderedTagId)}
|
||||
isMinimized={this.props.isMinimized}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -47,6 +47,7 @@ interface IProps {
|
|||
addRoomLabel: string;
|
||||
isInvite: boolean;
|
||||
layout: ListLayout;
|
||||
isMinimized: boolean;
|
||||
|
||||
// TODO: Collapsed state
|
||||
// TODO: Group invites
|
||||
|
|
@ -135,6 +136,7 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
|
|||
room={room}
|
||||
key={`room-${room.roomId}`}
|
||||
showMessagePreview={this.props.layout.showPreviews}
|
||||
isMinimized={this.props.isMinimized}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
@ -264,6 +266,7 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
|
|||
'mx_RoomSublist2': true,
|
||||
'mx_RoomSublist2_collapsed': false, // len && isCollapsed
|
||||
'mx_RoomSublist2_hasMenuOpen': this.state.menuDisplayed,
|
||||
'mx_RoomSublist2_minimized': this.props.isMinimized,
|
||||
});
|
||||
|
||||
let content = null;
|
||||
|
|
@ -282,14 +285,18 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
|
|||
if (tiles.length > nVisible) {
|
||||
// we have a cutoff condition - add the button to show all
|
||||
const numMissing = tiles.length - visibleTiles.length;
|
||||
let showMoreText = (
|
||||
<span className='mx_RoomSublist2_showMoreButtonText'>
|
||||
{_t("Show %(count)s more", {count: numMissing})}
|
||||
</span>
|
||||
);
|
||||
if (this.props.isMinimized) showMoreText = null;
|
||||
showMoreButton = (
|
||||
<div onClick={this.onShowAllClick} className='mx_RoomSublist2_showMoreButton'>
|
||||
<span className='mx_RoomSublist2_showMoreButtonChevron'>
|
||||
{/* set by CSS masking */}
|
||||
</span>
|
||||
<span className='mx_RoomSublist2_showMoreButtonText'>
|
||||
{_t("Show %(count)s more", {count: numMissing})}
|
||||
</span>
|
||||
{showMoreText}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -43,6 +43,7 @@ import { MessagePreviewStore } from "../../../stores/MessagePreviewStore";
|
|||
interface IProps {
|
||||
room: Room;
|
||||
showMessagePreview: boolean;
|
||||
isMinimized: boolean;
|
||||
|
||||
// TODO: Allow falsifying counts (for invites and stuff)
|
||||
// TODO: Transparency? Was this ever used?
|
||||
|
|
@ -158,6 +159,8 @@ export default class RoomTile2 extends React.Component<IProps, IState> {
|
|||
};
|
||||
|
||||
private renderGeneralMenu(): React.ReactElement {
|
||||
if (this.props.isMinimized) return null; // no menu when minimized
|
||||
|
||||
let contextMenu = null;
|
||||
if (this.state.generalMenuDisplayed) {
|
||||
// The context menu appears within the list, so use the room tile as a reference point
|
||||
|
|
@ -240,6 +243,7 @@ export default class RoomTile2 extends React.Component<IProps, IState> {
|
|||
'mx_RoomTile2': true,
|
||||
'mx_RoomTile2_selected': this.state.selected,
|
||||
'mx_RoomTile2_hasMenuOpen': this.state.generalMenuDisplayed,
|
||||
'mx_RoomTile2_minimized': this.props.isMinimized,
|
||||
});
|
||||
|
||||
const badge = <NotificationBadge notification={this.state.notificationState} allowNoCount={true} />;
|
||||
|
|
@ -253,7 +257,7 @@ export default class RoomTile2 extends React.Component<IProps, IState> {
|
|||
// TODO: Tooltip?
|
||||
|
||||
let messagePreview = null;
|
||||
if (this.props.showMessagePreview) {
|
||||
if (this.props.showMessagePreview && !this.props.isMinimized) {
|
||||
// The preview store heavily caches this info, so should be safe to hammer.
|
||||
const text = MessagePreviewStore.instance.getPreviewForRoom(this.props.room);
|
||||
|
||||
|
|
@ -273,6 +277,16 @@ export default class RoomTile2 extends React.Component<IProps, IState> {
|
|||
"mx_RoomTile2_nameHasUnreadEvents": this.state.notificationState.color >= NotificationColor.Bold,
|
||||
});
|
||||
|
||||
let nameContainer = (
|
||||
<div className="mx_RoomTile2_nameContainer">
|
||||
<div title={name} className={nameClasses} tabIndex={-1} dir="auto">
|
||||
{name}
|
||||
</div>
|
||||
{messagePreview}
|
||||
</div>
|
||||
);
|
||||
if (this.props.isMinimized) nameContainer = null;
|
||||
|
||||
const avatarSize = 32;
|
||||
return (
|
||||
<React.Fragment>
|
||||
|
|
@ -291,12 +305,7 @@ export default class RoomTile2 extends React.Component<IProps, IState> {
|
|||
<div className="mx_RoomTile2_avatarContainer">
|
||||
<RoomAvatar room={this.props.room} width={avatarSize} height={avatarSize}/>
|
||||
</div>
|
||||
<div className="mx_RoomTile2_nameContainer">
|
||||
<div title={name} className={nameClasses} tabIndex={-1} dir="auto">
|
||||
{name}
|
||||
</div>
|
||||
{messagePreview}
|
||||
</div>
|
||||
{nameContainer}
|
||||
<div className="mx_RoomTile2_badgeContainer">
|
||||
{badge}
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue