Skip to content

Commit a3f820c

Browse files
anbinm-msftanbinm-msft
authored
Feature/improve styling (#99)
* Add simple express server for testing * Formatting changes * Notebook expanded state should show correct icon * Notebook: Render section groups after sections * Extract section group icon into its own component * Section Group: Render section groups after sections * Extract section icon into its own component * Add default colors to icons * Use svg icons for Shared Notebook * Remove unused images
1 parent db58ffc commit a3f820c

15 files changed

+248
-185
lines changed

Diff for: ‎package.json

+5-1
Original file line numberDiff line numberDiff line change
@@ -21,11 +21,13 @@
2121
"@types/webpack": "^2.2.15",
2222
"@types/webpack-env": "^1.13.0",
2323
"awesome-typescript-loader": "^3.1.3",
24+
"cors": "^2.8.4",
2425
"cross-env": "^5.0.1",
2526
"css-loader": "^0.28.4",
2627
"dts-bundle": "^0.7.2",
2728
"enzyme": "^2.8.2",
2829
"es6-promise": "^4.1.0",
30+
"express": "^4.16.2",
2931
"extract-text-webpack-plugin": "^2.1.2",
3032
"file-loader": "^0.11.2",
3133
"html-loader": "^0.4.5",
@@ -70,6 +72,8 @@
7072
"clean": "rimraf dist",
7173
"start": "webpack-dev-server --debug --output-pathinfo --history-api-fallback --hot --inline --progress --colors --port 3000 --open",
7274
"build": "rimraf dist && cross-env NODE_ENV=production webpack --progress --colors && cross-env NODE_ENV=minify webpack --progress --colors && rimraf dist/types",
73-
"analyze": "cross-env NODE_ENV=analyze webpack --progress --colors"
75+
"analyze": "cross-env NODE_ENV=analyze webpack --progress --colors",
76+
"static-content-serve": "node ./static-server.js",
77+
"static-content-build": "cross-env NODE_ENV=production webpack --progress --colors --watch"
7478
}
7579
}

Diff for: ‎src/components/icons/notebookClosedIcon.svg.tsx

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import * as React from 'react';
2+
3+
export class NotebookClosedIconSvg extends React.Component {
4+
render() {
5+
return (
6+
<svg className='notebook-closed-icon' viewBox='0 0 14 14' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlnsXlink='http://www.w3.org/1999/xlink'>
7+
<g className='icon-container' stroke='none' strokeWidth='1' fill='#444444' fillRule='evenodd'>
8+
<path d='M13.5,9 L12,9 L12,12 L13.5,12 C13.741,12 14,11.53 14,10.5 C14,9.47 13.741,9 13.5,9 Z'/>
9+
<path d='M12,5 L12,8 L13.5,8 C13.741,8 14,7.531 14,6.5 C14,5.469 13.741,5 13.5,5 L12,5 Z'/>
10+
<path d='M14,2.5 C14,1.469 13.741,1 13.5,1 L12,1 L12,4 L13.5,4 C13.741,4 14,3.531 14,2.5 Z'/>
11+
<path d='M9,0 C10.104,0 11,0.896 11,2 L11,12 C11,13.104 10.104,14 9,14 L0,14 L0,0 L9,0 Z M2,5 L9,5 L9,3 L2,3 L2,5 Z'/>
12+
</g>
13+
</svg>
14+
);
15+
}
16+
}

Diff for: ‎src/components/icons/notebookOpenedIcon.svg.tsx

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import * as React from 'react';
2+
3+
export class NotebookOpenedIconSvg extends React.Component {
4+
render() {
5+
return (
6+
<svg className='notebook-opened-icon' viewBox='0 0 16 14' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlnsXlink='http://www.w3.org/1999/xlink'>
7+
<g id='icon-container' stroke='none' strokeWidth='1' fill='#444444' fillRule='evenodd'>
8+
<path d='M14.5,1 C15.053,1 15.5,1.447 15.5,2 L15.5,13 C15.5,13.553 15.053,14 14.5,14 L1.5,14 C0.947,14 0.5,13.553 0.5,13 L0.5,2 C0.5,1.447 0.947,1 1.5,1 L1.5,0 C3.26,0 5.731,0.373 7.186,1 L8.814,1 C10.269,0.373 12.74,0 14.5,0 L14.5,1 Z M7.5,13 L7.5,2.5 C6.57,1.76 4.35,1.06 2.5,1 L2.5,11.5 C4.28,11.55 6.43,12.31 7.5,13 Z M13.5,11.5 L13.5,1 C11.33,1.06 9.59,1.76 8.5,2.5 L8.5,13 C9.76,12.31 11.41,11.55 13.5,11.5 Z' />
9+
</g>
10+
</svg>
11+
);
12+
}
13+
}

Diff for: ‎src/components/icons/sectionGroupIcon.svg.tsx

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import * as React from 'react';
2+
3+
export class SectionGroupIconSvg extends React.Component {
4+
render() {
5+
return (
6+
<svg className='section-icon' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlnsXlink='http://www.w3.org/1999/xlink' viewBox='0 0 20 20'>
7+
<path d='M13,3H7v14h6v2h1V1h-1V3z' className='primary-section-outline' fill='#444444'/>
8+
<polygon points='11,1 5,1 5,15 6,15 6,2 11,2' className='secondary-section-outline' fill='#444545'/>
9+
</svg>
10+
);
11+
}
12+
}

Diff for: ‎src/components/icons/sectionIcon.svg.tsx

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import * as React from 'react';
2+
3+
export class SectionIconSvg extends React.Component {
4+
render() {
5+
return (
6+
<svg className='section-icon' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlnsXlink='http://www.w3.org/1999/xlink' viewBox='0 0 20 20' fill='#444444'>
7+
<path d='M12,3H6v14h6v2h1V1h-1V3z'/>
8+
</svg>
9+
);
10+
}
11+
}

Diff for: ‎src/components/icons/spinnerIcon.svg.tsx

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import * as React from 'react';
2+
3+
export class SpinnerIconSvg extends React.Component {
4+
render() {
5+
return (
6+
<svg className='spinner' viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg' xmlnsXlink='http://www.w3.org/1999/xlink'>
7+
<g stroke='none' strokeWidth='1' fill='none' fillRule='evenodd'>
8+
<circle className='spinner-circle' stroke='#C7E0F4' strokeWidth='5' cx='32' cy='32' r='29'/>
9+
<path className='spinner-progress' stroke='#0078D7' strokeWidth='5' d='M52.6861723,11.5097602 C47.418631,6.25144806 40.1470894,3 32.1161315,3 C24.0850974,3 16.8134942,6.25150964 11.545941,11.5099096'/>
10+
</g>
11+
</svg>
12+
);
13+
}
14+
}

Diff for: ‎src/components/notebookRenderStrategy.tsx

+22-20
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
import * as React from 'react';
2-
3-
import {SectionRenderStrategy} from './sectionRenderStrategy';
4-
import {SectionGroupRenderStrategy} from './sectionGroupRenderStrategy';
5-
import {ExpandableNodeRenderStrategy} from './treeView/expandableNodeRenderStrategy';
6-
import {ExpandableNode} from './treeView/expandableNode';
7-
import {LeafNode} from './treeView/leafNode';
8-
import {Constants} from '../constants';
9-
import {Notebook} from '../oneNoteDataStructures/notebook';
10-
import {OneNoteItemUtils} from '../oneNoteDataStructures/oneNoteItemUtils';
11-
import {InnerGlobals} from '../props/globalProps';
2+
import { SectionRenderStrategy } from './sectionRenderStrategy';
3+
import { SectionGroupRenderStrategy } from './sectionGroupRenderStrategy';
4+
import { ExpandableNodeRenderStrategy } from './treeView/expandableNodeRenderStrategy';
5+
import { ExpandableNode } from './treeView/expandableNode';
6+
import { LeafNode } from './treeView/leafNode';
7+
import { Constants } from '../constants';
8+
import { Notebook } from '../oneNoteDataStructures/notebook';
9+
import { OneNoteItemUtils } from '../oneNoteDataStructures/oneNoteItemUtils';
10+
import { InnerGlobals } from '../props/globalProps';
11+
import { NotebookOpenedIconSvg } from './icons/notebookOpenedIcon.svg';
12+
import { NotebookClosedIconSvg } from './icons/notebookClosedIcon.svg';
1213

1314
export class NotebookRenderStrategy implements ExpandableNodeRenderStrategy {
1415
onClickBinded = this.onClick.bind(this);
@@ -17,12 +18,12 @@ export class NotebookRenderStrategy implements ExpandableNodeRenderStrategy {
1718

1819
element(): JSX.Element {
1920
return (
20-
<div className={this.isSelected() ? 'picker-selectedItem' : ''} title={this.notebook.name}>
21-
<div className='picker-icon-left'>
22-
<i className='ms-Icon ms-Icon--OneNoteLogo' aria-hidden='true'></i>
21+
<div className={this.isSelected() ? 'picker-selectedItem notebook' : 'notebook'} title={this.notebook.name}>
22+
<div className='picker-icon'>
23+
{this.isExpanded() ? <NotebookOpenedIconSvg/> : <NotebookClosedIconSvg />}
2324
</div>
24-
<div>
25-
<label className='ms-fontSize-sPlus'>{this.notebook.name}</label>
25+
<div className='picker-label'>
26+
<label>{this.notebook.name}</label>
2627
</div>
2728
</div>);
2829
}
@@ -42,21 +43,21 @@ export class NotebookRenderStrategy implements ExpandableNodeRenderStrategy {
4243
<ExpandableNode
4344
expanded={renderStrategy.isExpanded()} node={renderStrategy} globals={this.globals}
4445
treeViewId={Constants.TreeView.id} key={renderStrategy.getId()}
45-
id={renderStrategy.getId()} level={childrenLevel} ariaSelected={renderStrategy.isAriaSelected()}></ExpandableNode> :
46+
id={renderStrategy.getId()} level={childrenLevel} ariaSelected={renderStrategy.isAriaSelected()}/> :
4647
<LeafNode node={renderStrategy} treeViewId={Constants.TreeView.id} key={renderStrategy.getId()} globals={this.globals}
47-
id={renderStrategy.getId()} level={childrenLevel} ariaSelected={renderStrategy.isAriaSelected()}></LeafNode>);
48+
id={renderStrategy.getId()} level={childrenLevel} ariaSelected={renderStrategy.isAriaSelected()} />);
4849

4950
let sectionRenderStrategies = this.notebook.sections.map(section => new SectionRenderStrategy(section, this.globals));
5051
let sections = sectionRenderStrategies.map(renderStrategy =>
5152
!!this.globals.callbacks.onPageSelected ?
5253
<ExpandableNode
5354
expanded={renderStrategy.isExpanded()} node={renderStrategy} globals={this.globals}
5455
treeViewId={Constants.TreeView.id} key={renderStrategy.getId()}
55-
id={renderStrategy.getId()} level={childrenLevel} ariaSelected={renderStrategy.isAriaSelected()}></ExpandableNode> :
56+
id={renderStrategy.getId()} level={childrenLevel} ariaSelected={renderStrategy.isAriaSelected()} /> :
5657
<LeafNode node={renderStrategy} treeViewId={Constants.TreeView.id} key={renderStrategy.getId()} globals={this.globals}
57-
id={renderStrategy.getId()} level={childrenLevel} ariaSelected={renderStrategy.isAriaSelected()}></LeafNode>);
58+
id={renderStrategy.getId()} level={childrenLevel} ariaSelected={renderStrategy.isAriaSelected()} />);
5859

59-
return sectionGroups.concat(sections);
60+
return sections.concat(sectionGroups);
6061
}
6162

6263
isExpanded(): boolean {
@@ -76,5 +77,6 @@ export class NotebookRenderStrategy implements ExpandableNodeRenderStrategy {
7677
if (!!onNotebookSelected) {
7778
onNotebookSelected(this.notebook, OneNoteItemUtils.getAncestry(this.notebook));
7879
}
80+
this.notebook.expanded = !this.notebook.expanded;
7981
}
8082
}

Diff for: ‎src/components/sectionGroupRenderStrategy.tsx

+18-29
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import * as React from 'react';
22

3-
import {SectionRenderStrategy} from './sectionRenderStrategy';
4-
import {ExpandableNodeRenderStrategy} from './treeView/expandableNodeRenderStrategy';
5-
import {ExpandableNode} from './treeView/expandableNode';
6-
import {LeafNode} from './treeView/leafNode';
7-
import {Constants} from '../constants';
8-
import {SectionGroup} from '../oneNoteDataStructures/sectionGroup';
9-
import {InnerGlobals} from '../props/globalProps';
3+
import { SectionRenderStrategy } from './sectionRenderStrategy';
4+
import { ExpandableNodeRenderStrategy } from './treeView/expandableNodeRenderStrategy';
5+
import { ExpandableNode } from './treeView/expandableNode';
6+
import { LeafNode } from './treeView/leafNode';
7+
import { Constants } from '../constants';
8+
import { SectionGroup } from '../oneNoteDataStructures/sectionGroup';
9+
import { InnerGlobals } from '../props/globalProps';
10+
import { SectionGroupIconSvg } from './icons/sectionGroupIcon.svg';
1011

1112
export class SectionGroupRenderStrategy implements ExpandableNodeRenderStrategy {
1213
onClickBinded = this.onClick.bind(this);
@@ -15,24 +16,12 @@ export class SectionGroupRenderStrategy implements ExpandableNodeRenderStrategy
1516

1617
element(): JSX.Element {
1718
return (
18-
<div title={this.sectionGroup.name}>
19-
<div className='picker-icon-left'>
20-
<svg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlnsXlink='http://www.w3.org/1999/xlink' x='0px' y='0px'
21-
viewBox='0 0 20 20' style={{enableBackground: 'new 0 0 20 20'}} xmlSpace='preserve'>
22-
<style type='text/css'>
23-
{'.st0 { fill:none;}'}
24-
</style>
25-
<g>
26-
<g>
27-
<rect y='0' className='st0' width='20' height='20'/>
28-
<path d='M13,3H7v14h6v2h1V1h-1V3z'/>
29-
</g>
30-
<polygon points='11,1 5,1 5,15 6,15 6,2 11,2 '/>
31-
</g>
32-
</svg>
19+
<div className='section-group' title={this.sectionGroup.name}>
20+
<div className='picker-icon'>
21+
<SectionGroupIconSvg />
3322
</div>
34-
<div>
35-
<label className='ms-fontSize-sPlus'>{this.sectionGroup.name}</label>
23+
<div className='picker-label'>
24+
<label>{this.sectionGroup.name}</label>
3625
</div>
3726
</div>);
3827
}
@@ -52,20 +41,20 @@ export class SectionGroupRenderStrategy implements ExpandableNodeRenderStrategy
5241
<ExpandableNode
5342
expanded={renderStrategy.isExpanded()} node={renderStrategy} globals={this.globals}
5443
treeViewId={Constants.TreeView.id} key={renderStrategy.getId()}
55-
id={renderStrategy.getId()} level={childrenLevel} ariaSelected={renderStrategy.isAriaSelected()}></ExpandableNode> :
44+
id={renderStrategy.getId()} level={childrenLevel} ariaSelected={renderStrategy.isAriaSelected()} /> :
5645
<LeafNode node={renderStrategy} treeViewId={Constants.TreeView.id} key={renderStrategy.getId()} globals={this.globals}
57-
id={renderStrategy.getId()} level={childrenLevel} ariaSelected={renderStrategy.isAriaSelected()}></LeafNode>);
46+
id={renderStrategy.getId()} level={childrenLevel} ariaSelected={renderStrategy.isAriaSelected()} />);
5847

5948
let sectionRenderStrategies = this.sectionGroup.sections.map(section => new SectionRenderStrategy(section, this.globals));
6049
let sections = sectionRenderStrategies.map(renderStrategy =>
6150
!!this.globals.callbacks.onPageSelected ?
6251
<ExpandableNode expanded={renderStrategy.isExpanded()} node={renderStrategy} globals={this.globals}
6352
treeViewId={Constants.TreeView.id} key={renderStrategy.getId()}
64-
id={renderStrategy.getId()} level={childrenLevel} ariaSelected={renderStrategy.isAriaSelected()}></ExpandableNode> :
53+
id={renderStrategy.getId()} level={childrenLevel} ariaSelected={renderStrategy.isAriaSelected()} /> :
6554
<LeafNode node={renderStrategy} treeViewId={Constants.TreeView.id} key={renderStrategy.getId()} globals={this.globals}
66-
id={renderStrategy.getId()} level={childrenLevel} ariaSelected={renderStrategy.isAriaSelected()}></LeafNode>);
55+
id={renderStrategy.getId()} level={childrenLevel} ariaSelected={renderStrategy.isAriaSelected()} />);
6756

68-
return sectionGroups.concat(sections);
57+
return sections.concat(sectionGroups);
6958
}
7059

7160
isExpanded(): boolean {

Diff for: ‎src/components/sectionRenderStrategy.tsx

+16-24
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import * as React from 'react';
2-
3-
import {PageRenderStrategy} from './pageRenderStrategy';
4-
import {ExpandableNodeRenderStrategy} from './treeView/expandableNodeRenderStrategy';
5-
import {LeafNode} from './treeView/leafNode';
6-
import {Constants} from '../constants';
7-
import {Section} from '../oneNoteDataStructures/section';
8-
import {OneNoteItemUtils} from '../oneNoteDataStructures/oneNoteItemUtils';
9-
import {InnerGlobals} from '../props/globalProps';
2+
import { PageRenderStrategy } from './pageRenderStrategy';
3+
import { ExpandableNodeRenderStrategy } from './treeView/expandableNodeRenderStrategy';
4+
import { LeafNode } from './treeView/leafNode';
5+
import { Constants } from '../constants';
6+
import { Section } from '../oneNoteDataStructures/section';
7+
import { OneNoteItemUtils } from '../oneNoteDataStructures/oneNoteItemUtils';
8+
import { InnerGlobals } from '../props/globalProps';
9+
import { SectionIconSvg } from './icons/sectionIcon.svg';
1010

1111
export class SectionRenderStrategy implements ExpandableNodeRenderStrategy {
1212
onClickBinded = this.onClick.bind(this);
@@ -15,23 +15,15 @@ export class SectionRenderStrategy implements ExpandableNodeRenderStrategy {
1515

1616
element(): JSX.Element {
1717
return (
18-
<div className={this.isSelected() ? 'picker-selectedItem' : ''} title={this.section.name}>
19-
<div className='picker-icon-left'>
20-
<svg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlnsXlink='http://www.w3.org/1999/xlink' x='0px' y='0px'
21-
viewBox='0 0 20 20' style={{enableBackground: 'new 0 0 20 20'}} xmlSpace='preserve'>
22-
<style type='text/css'>
23-
{'.st0 { fill:none;}'}
24-
</style>
25-
<g>
26-
<rect y='0' className='st0' width='20' height='20' />
27-
<path d='M12,3H6v14h6v2h1V1h-1V3z'/>
28-
</g>
29-
</svg>
18+
<div className={this.isSelected() ? 'picker-selectedItem section' : 'section'} title={this.section.name}>
19+
<div className='picker-icon'>
20+
<SectionIconSvg/>
3021
</div>
31-
<div>
32-
<label className='ms-fontSize-sPlus'>{this.section.name}</label>
22+
<div className='picker-label'>
23+
<label>{this.section.name}</label>
3324
</div>
34-
</div>);
25+
</div>
26+
);
3527
}
3628

3729
getName(): string {
@@ -48,7 +40,7 @@ export class SectionRenderStrategy implements ExpandableNodeRenderStrategy {
4840
let pages = pageRenderStrategies && pageRenderStrategies.map(renderStrategy =>
4941
<LeafNode treeViewId={Constants.TreeView.id} node={renderStrategy} globals={this.globals}
5042
id={renderStrategy.getId()} level={childrenLevel}
51-
ariaSelected={renderStrategy.isAriaSelected()}></LeafNode>);
43+
ariaSelected={renderStrategy.isAriaSelected()} />);
5244

5345
return pages || [] as JSX.Element[];
5446
}

0 commit comments

Comments
 (0)