Joplin
/
joplin
mirror of https://github.com/laurent22/joplin.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Styling

pull/41/head
Laurent Cozic 2017-11-08 22:23:26 +00:00
parent a2219bedd7
commit 26deb2ceb4
11 changed files with 2303 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
ElectronClient/app/css/ionicons.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

BIN
ElectronClient/app/fonts/ionicons.eot Normal file
View File

Binary file not shown.

11
ElectronClient/app/fonts/ionicons.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

2230
ElectronClient/app/fonts/ionicons.svg Normal file
View File

File diff suppressed because it is too large Load Diff
Side by Side

After

Width:  |  Height:  |  Size: 326 KiB

BIN
ElectronClient/app/fonts/ionicons.ttf Normal file
View File

Binary file not shown.

BIN
ElectronClient/app/fonts/ionicons.woff Normal file
View File

Binary file not shown.

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

@ -10,8 +10,13 @@ class HeaderComponent extends React.Component {
this.props.dispatch({ type: 'NAV_BACK' });
}
makeButton(key, options) {
return <a key={key} href="#" onClick={() => {options.onClick()}}>{options.title}</a>
makeButton(key, style, options) {
let icon = null;
if (options.iconName) {
icon = <i style={{fontSize: style.fontSize * 1.4, marginRight: 5}} className={"icon " + options.iconName}></i>
}
console.info(style);
return <a className="button" style={style} key={key} href="#" onClick={() => {options.onClick()}}>{icon}{options.title}</a>
}
render() {
@ -19,20 +24,35 @@ class HeaderComponent extends React.Component {
const theme = themeStyle(this.props.theme);
const showBackButton = this.props.showBackButton === undefined || this.props.showBackButton === true;
style.height = theme.headerHeight;
style.display = 'flex';
style.flexDirection = 'row';
const buttons = [];
if (showBackButton) {
buttons.push(this.makeButton('back', { title: _('Back'), onClick: () => this.back_click() }));
buttons.push(this.makeButton('back', {}, { title: _('Back'), onClick: () => this.back_click() }));
}
const buttonStyle = {
height: theme.headerHeight,
display: 'flex',
alignItems: 'center',
paddingLeft: theme.headerButtonHPadding,
paddingRight: theme.headerButtonHPadding,
color: theme.color,
textDecoration: 'none',
fontFamily: theme.fontFamily,
fontSize: theme.fontSize,
boxSizing: 'border-box',
};
if (this.props.buttons) {
for (let i = 0; i < this.props.buttons.length; i++) {
buttons.push(this.makeButton('btn_' + i, this.props.buttons[i]));
buttons.push(this.makeButton('btn_' + i, buttonStyle, this.props.buttons[i]));
}
}
return (
<div style={style}>
<div className="header" style={style}>
{ buttons }
</div>
);

2
ElectronClient/app/gui/MainScreen.jsx
View File

@ -62,11 +62,13 @@ class MainScreenComponent extends React.Component {
onClick: () => {
this.setState({ newNotePromptVisible: true });
},
iconName: 'ion-document',
}, {
title: _('New notebook'),
onClick: () => {
this.setState({ newFolderPromptVisible: true });
},
iconName: 'ion-android-folder-open',
},
];

1
ElectronClient/app/index.html
View File

@ -4,6 +4,7 @@
<meta charset="UTF-8">
<title>Joplin</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="css/ionicons.min.css">
</head>
<body>
<div id="react-root"></div>

9
ElectronClient/app/style.css
View File

@ -29,4 +29,13 @@ body, textarea {
.side-bar .selected {
font-weight: bold;
}
.header .button:hover {
background-color: rgba(0,160,255,0.1);
border: 1px solid rgba(0,160,255,0.5);
}
.header .button {
border: 1px solid rgba(0,160,255,0);
}

25
ElectronClient/app/theme.js
View File

@ -1,13 +1,14 @@
const { Setting } = require('lib/models/setting.js');
const globalStyle = {
fontSize: 16,
fontSize: 13,
fontFamily: 'sans-serif',
margin: 15, // No text and no interactive component should be within this margin
itemMarginTop: 10,
itemMarginBottom: 10,
backgroundColor: "#ffffff",
oddBackgroundColor: "#dddddd",
color: "#555555", // For regular text
color: "#222222", // For regular text
colorError: "red",
colorWarn: "#9A5B00",
colorFaded: "#777777", // For less important text
@ -15,24 +16,26 @@ const globalStyle = {
dividerColor: "#dddddd",
selectedColor: '#e5e5e5',
disabledOpacity: 0.3,
headerHeight: 20,
buttonMinWidth: 50,
buttonMinHeight: 30,
textAreaLineHeight: 17,
headerHeight: 35,
headerButtonHPadding: 6,
raisedBackgroundColor: "#0080EF",
raisedColor: "#003363",
raisedHighlightedColor: "#ffffff",
// For WebView - must correspond to the properties above
htmlFontSize: '16px',
htmlColor: 'black', // Note: CSS in WebView component only supports named colors or rgb() notation
htmlBackgroundColor: 'white',
htmlDividerColor: 'Gainsboro',
htmlLinkColor: 'blue',
htmlLineHeight: '20px',
};
// For WebView - must correspond to the properties above
globalStyle.htmlFontSize =globalStyle.fontSize + 'px';
globalStyle.htmlColor ='black'; // Note: CSS in WebView component only supports named colors or rgb() notation
globalStyle.htmlBackgroundColor ='white';
globalStyle.htmlDividerColor ='Gainsboro';
globalStyle.htmlLinkColor ='blue';
globalStyle.htmlLineHeight ='20px';
globalStyle.marginRight = globalStyle.margin;
globalStyle.marginLeft = globalStyle.margin;
globalStyle.marginTop = globalStyle.margin;