PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Add a minimized view to the new room list

Browse source 
This covers everything except breadcrumbs, as those are somewhat undecided from a design perspective.
This commit is contained in:
Travis Ralston 2020-06-11 14:39:28 -06:00
parent 2e04414331
commit 2c04a56784
10 changed files with 243 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
res/css/structures/_LeftPanel2.scss
View file

@ -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;
}
}
}
}
}

11
res/css/structures/_RoomSearch.scss
View file

@ -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;
}
}
}

82
res/css/views/rooms/_RoomSublist2.scss
View file

@ -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,89 @@ 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 {
.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

19
res/css/views/rooms/_RoomTile2.scss
View file

@ -115,6 +115,7 @@ limitations under the License.
mask-image: url('$(res)/img/feather-customised/more-horizontal.svg');
}
&:not(.mx_RoomTile2_minimized) {
&:hover, &.mx_RoomTile2_hasMenuOpen {
// Hide the badge container on hover because it'll be a menu button
.mx_RoomTile2_badgeContainer {
@ -129,6 +130,24 @@ limitations under the License.
visibility: visible;
}
}
}
&.mx_RoomTile2_minimized {
flex-direction: column;
align-items: center;
position: relative;
.mx_RoomTile2_avatarContainer {
margin-right: 0;
}
.mx_RoomTile2_badgeContainer {
position: absolute;
top: 0;
right: 0;
height: 18px;
}
}
}
.mx_RoomTile2_contextMenu {

25
src/components/structures/LeftPanel2.tsx
View file

@ -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 (

2
src/components/structures/LoggedInView.tsx
View file

@ -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} />
);
}

32
src/components/structures/RoomSearch.tsx
View file

@ -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,9 +124,10 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
'mx_RoomSearch_inputExpanded': this.state.query || this.state.focused,
});
return (
<div className={classes}>
let icon = (
<div className='mx_RoomSearch_icon'/>
);
let input = (
<input
type="text"
ref={this.inputRef}
@ -133,11 +140,32 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
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_icon'
onClick={this.openSearch}
/>
);
input = null;
clearButton = null;
}
return (
<div className={classes}>
{icon}
{input}
{clearButton}
</div>
);
}

2
src/components/views/rooms/RoomList2.tsx
View file

@ -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}
/>
);
}

13
src/components/views/rooms/RoomSublist2.tsx
View file

@ -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>
);
}

23
src/components/views/rooms/RoomTile2.tsx
View file

@ -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>