self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2025-03-26 21:12:59 +02:00
Code Issues Releases Activity

Desktop: Improved: UI updates to sidebar and header, changing icon sizes and animations (#1463)

Browse Source 
Added animation to icon in synchronize button

Moved sync report above button, which prevents the sync button from moving from its place when the report has text.

Added animation to icon in Toggle Sidebar button, using the css transition property.

Reduced font size for text and icons in header and sidebar

Changed theme color2 from white to a very light grey. It is barely
noticeable, but reduces contrast a bit, improving readability.
This commit is contained in:
Luis Orozco 2019-04-28 09:20:18 -04:00 committed by Laurent Cozic
parent f3344ce05d
commit 6335cbedb8
4 changed files with 23 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
ElectronClient/app/gui/Header.jsx
View File

@ -102,11 +102,14 @@ class HeaderComponent extends React.Component {
let icon = null;
if (options.iconName) {
const iconStyle = {
fontSize: Math.round(style.fontSize * 1.4),
fontSize: Math.round(style.fontSize * 1.1),
color: style.color,
};
if (options.title) iconStyle.marginRight = 5;
if (options.iconRotation) iconStyle.transform = 'rotate(' + options.iconRotation + 'deg)';
if("undefined" != typeof(options.iconRotation)) {
iconStyle.transition = "transform 0.15s ease-in-out";
iconStyle.transform = 'rotate(' + options.iconRotation + 'deg)';
}
icon = <i style={iconStyle} className={"fa " + options.iconName}></i>
}

16
ElectronClient/app/gui/SideBar.jsx
View File

@ -152,7 +152,7 @@ class SideBarComponent extends React.Component {
header: {
height: itemHeight * 1.8,
fontFamily: theme.fontFamily,
fontSize: theme.fontSize * 1.3,
fontSize: theme.fontSize * 1.16,
textDecoration: "none",
boxSizing: "border-box",
color: theme.color2,
@ -509,7 +509,7 @@ class SideBarComponent extends React.Component {
makeHeader(key, label, iconName, extraProps = {}) {
const style = this.style().header;
const icon = <i style={{ fontSize: style.fontSize * 1.2, marginRight: 5 }} className={"fa " + iconName} />;
const icon = <i style={{ fontSize: style.fontSize, marginRight: 5 }} className={"fa " + iconName} />;
if (extraProps.toggleblock || extraProps.onClick) {
style.cursor = "pointer";
@ -642,9 +642,15 @@ class SideBarComponent extends React.Component {
synchronizeButton(type) {
const style = Object.assign({}, this.style().button, { marginBottom: 5 });
const iconName = type === "sync" ? "fa-refresh" : "fa-times";
const iconName = "fa-refresh";
const label = type === "sync" ? _("Synchronise") : _("Cancel");
const icon = <i style={{ fontSize: style.fontSize, marginRight: 5 }} className={"fa " + iconName} />;
let iconStyle = { fontSize: style.fontSize, marginRight: 5 };
if(type !== 'sync'){
iconStyle.animation = 'icon-infinite-rotation 1s linear infinite';
}
const icon = <i style={iconStyle} className={"fa " + iconName} />;
return (
<a
className="synchronize-button"
@ -738,8 +744,8 @@ class SideBarComponent extends React.Component {
{items}
</div>
<div style={{flex:0}}>
{syncReportComp}
{syncButton}
{syncReportComp}
</div>
</div>
);

6
ElectronClient/app/style.css
View File

@ -100,6 +100,12 @@ table td, table th {
border-radius: 5px;
}
@keyframes icon-infinite-rotation{
to {
transform: rotate(360deg);
}
}
.smalltalk {
font-family: sans-serif;
}

2
ElectronClient/app/theme.js
View File

@ -77,7 +77,7 @@ const lightStyle = {
urlColor: '#155BDA',
backgroundColor2: "#162B3D",
color2: "#ffffff",
color2: "#f5f5f5",
selectedColor2: "#0269C2",
colorError2: "#ff6c6c",