Foundry376/Mailspring
1
1
Fork 0
mirror of https://github.com/Foundry376/Mailspring.git synced 2024-09-21 07:46:06 +08:00
Code Issues Packages Projects Releases Wiki Activity

Include bottom line of toolbar when animating it in, preload icon font

Browse source
This commit is contained in:
Ben Gotow 2018-04-04 01:30:23 -07:00
parent 6340629d6d
commit aa674989a0
3 changed files with 29 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
app/internal_packages/composer/lib/main.jsx
View file

@ -92,6 +92,14 @@ export function activate() {
location: WorkspaceStore.Location.Center,
});
}
setTimeout(() => {
// preload the font awesome icons used in the composer after a short delay.
// unfortunately, the icon set takes enough time to load that it introduces jank
const i = document.createElement('i');
i.className = 'fa fa-list';
document.body.appendChild(i);
}, 1000);
}
export function deactivate() {

16
app/internal_packages/composer/styles/composer.less
View file

@ -76,18 +76,22 @@
user-select: none;
position: relative;
.inner {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
background: @background-primary;
.floating-container {
border-bottom: 1px solid @border-color-divider;
z-index: 2;
width: 100%;
min-height: 29px;
}
.inner {
background: @background-primary;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
width: 100%;
}
.divider {
width: 1px;
height: 22px;

20
app/src/components/composer-editor/composer-editor-toolbar.jsx
View file

@ -24,14 +24,14 @@ export default class ComposerEditorToolbar extends React.Component {
this._topClip = 0;
}
this._el.style.height = `${this._innerEl.clientHeight}px`;
this._el.style.height = `${this._floatingEl.clientHeight}px`;
});
}, 400);
}
componentDidUpdate() {
if (this._el) {
this._el.style.height = `${this._innerEl.clientHeight}px`;
this._el.style.height = `${this._floatingEl.clientHeight}px`;
this._onScroll();
}
}
@ -48,11 +48,11 @@ export default class ComposerEditorToolbar extends React.Component {
const max = this._el.parentElement.clientHeight - height;
if (top < this._topClip) {
this._innerEl.style.position = 'absolute';
this._innerEl.style.top = `${Math.min(max, this._topClip - top)}px`;
this._floatingEl.style.position = 'absolute';
this._floatingEl.style.top = `${Math.min(max, this._topClip - top)}px`;
} else {
this._innerEl.style.position = 'relative';
this._innerEl.style.top = '0px';
this._floatingEl.style.position = 'relative';
this._floatingEl.style.top = '0px';
}
};
@ -63,7 +63,9 @@ export default class ComposerEditorToolbar extends React.Component {
if (!this.state.visible) {
return (
<div className="RichEditor-toolbar">
<div className="inner display-deferrable deferred" />
<div className="floating-container">
<div className="inner display-deferrable deferred" />
</div>
</div>
);
}
@ -92,8 +94,8 @@ export default class ComposerEditorToolbar extends React.Component {
return (
<div ref={el => (this._el = el)} className="RichEditor-toolbar">
<div ref={el => (this._innerEl = el)} className="inner display-deferrable">
{sectionItems}
<div ref={el => (this._floatingEl = el)} className="floating-container">
<div className="inner display-deferrable">{sectionItems}</div>
</div>
</div>
);