oxen-io/session-desktop
1
0
Fork 0
mirror of https://github.com/oxen-io/session-desktop.git synced 2023-12-14 02:12:57 +01:00
Code Issues Projects Releases Wiki Activity

Fix vertical sizing of left pane when switching inbox<->archive

Browse source
This commit is contained in:
Scott Nonnenberg 2019-03-14 14:41:14 -07:00
parent 6d8ab33e93
commit 230c6dc284
3 changed files with 25 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
stylesheets/_modules.scss
View file

@ -3028,18 +3028,21 @@
font-weight: 300px;
}
.module-left-pane__list {
flex-grow: 1;
flex-shrink: 1;
}
.module-left-pane__archive-helper-text {
flex-grow: 0;
flex-shrink: 0;
padding: 1em;
font-size: 12px;
color: $color-gray-60;
background-color: $color-gray-05;
}
.module-left-pane__list {
flex-grow: 1;
flex-shrink: 1;
}
.module-left-pane__virtual-list {
outline: none;
}

46
ts/components/LeftPane.tsx
View file

@ -43,26 +43,6 @@ type RowRendererParamsType = {
};
export class LeftPane extends React.Component<Props> {
public listRef: React.RefObject<any> = React.createRef();
public scrollToTop() {
if (this.listRef && this.listRef.current) {
const { current } = this.listRef;
current.scrollToRow(0);
}
}
public componentDidUpdate(prevProps: Props) {
const { showArchived, searchResults } = this.props;
const isNotShowingSearchResults = !searchResults;
const hasArchiveViewChanged = showArchived !== prevProps.showArchived;
if (isNotShowingSearchResults && hasArchiveViewChanged) {
this.scrollToTop();
}
}
public renderRow = ({
index,
key,
@ -135,7 +115,7 @@ export class LeftPane extends React.Component<Props> {
);
}
public renderList(): JSX.Element {
public renderList(): JSX.Element | Array<JSX.Element | null> {
const {
archivedConversations,
i18n,
@ -168,21 +148,27 @@ export class LeftPane extends React.Component<Props> {
? archivedConversations.length
: conversations.length + (archivedConversations.length ? 1 : 0);
const archived = showArchived ? (
<div className="module-left-pane__archive-helper-text" key={0}>
{i18n('archiveHelperText')}
</div>
) : null;
// We ensure that the listKey differs between inbox and archive views, which ensures
// that AutoSizer properly detects the new size of its slot in the flexbox. The
// archive explainer text at the top of the archive view causes problems otherwise.
// It also ensures that we scroll to the top when switching views.
const listKey = showArchived ? 1 : 0;
// Note: conversations is not a known prop for List, but it is required to ensure that
// it re-renders when our conversation data changes. Otherwise it would just render
// on startup and scroll.
return (
<div className="module-left-pane__list">
{showArchived ? (
<div className="module-left-pane__archive-helper-text">
{i18n('archiveHelperText')}
</div>
) : null}
const list = (
<div className="module-left-pane__list" key={listKey}>
<AutoSizer>
{({ height, width }) => (
<List
className="module-left-pane__virtual-list"
ref={this.listRef}
conversations={conversations}
height={height}
rowCount={length}
@ -194,6 +180,8 @@ export class LeftPane extends React.Component<Props> {
</AutoSizer>
</div>
);
return [archived, list];
}
public renderArchivedHeader(): JSX.Element {

18
ts/util/lint/exceptions.json
View file

@ -5440,24 +5440,6 @@
"updated": "2019-03-09T00:08:44.242Z",
"reasonDetail": "Used only to set focus"
},
{
"rule": "React-createRef",
"path": "ts/components/LeftPane.js",
"line": " this.listRef = react_1.default.createRef();",
"lineNumber": 13,
"reasonCategory": "usageTrusted",
"updated": "2019-03-12T23:33:50.889Z",
"reasonDetail": "Used only to scroll to top on archive/inbox switch"
},
{
"rule": "React-createRef",
"path": "ts/components/LeftPane.tsx",
"line": " public listRef: React.RefObject<any> = React.createRef();",
"lineNumber": 46,
"reasonCategory": "usageTrusted",
"updated": "2019-03-12T23:33:50.889Z",
"reasonDetail": "Used only to scroll to top on archive/inbox switch"
},
{
"rule": "React-createRef",
"path": "ts/components/Lightbox.js",