Skip to content
This repository was archived by the owner on Aug 7, 2020. It is now read-only.

Commit 63ff6a8

Browse files
AxelPeterAxelPeter
authored
feature: update to new oui-sidebar style (#41)
* style: update to new sidebar style * chore: update dependencies * chore: code review * chore: add webpack-cli * fix: fix webpack config files
1 parent 1d495dd commit 63ff6a8

10 files changed

+938
-574
lines changed

‎.babelrc

+5-1
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@
66
}
77
}]
88
],
9-
"plugins": ["lodash", "transform-runtime"],
9+
"plugins": [
10+
["angularjs-annotate", { "explicitOnly" : true }],
11+
"lodash",
12+
"transform-runtime"
13+
],
1014
"comments": false
1115
}

‎build/webpack.base.config.js

+67-63
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,71 @@
1-
import LodashModuleReplacementPlugin from 'lodash-webpack-plugin'
2-
import formatter from 'eslint-friendly-formatter'
3-
import path from 'path'
4-
import webpack from 'webpack'
1+
const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
2+
const formatter = require('eslint-friendly-formatter');
3+
const path = require('path');
4+
const webpack = require('webpack');
55

66
const exclude = [/node_modules/, /dist/]
77

8-
export default {
9-
entry: {
10-
component: ['./src/app/index.js']
11-
},
12-
output: {
13-
path: path.resolve('.', 'dist'),
14-
filename: '[name].js',
15-
libraryTarget: 'umd'
16-
},
17-
resolve: {
18-
alias: {
19-
src: path.resolve('.', 'src'),
20-
build: path.resolve(__dirname)
8+
module.exports = {
9+
entry: {
10+
component: ['./src/app/index.js']
11+
},
12+
output: {
13+
path: path.resolve('.', 'dist'),
14+
filename: '[name].js',
15+
libraryTarget: 'umd'
16+
},
17+
resolve: {
18+
alias: {
19+
src: path.resolve('.', 'src'),
20+
build: path.resolve(__dirname)
21+
}
22+
},
23+
plugins: [
24+
new webpack.DefinePlugin({
25+
'process.env': process.env.NODE_ENV
26+
}),
27+
new webpack.NoEmitOnErrorsPlugin,
28+
new LodashModuleReplacementPlugin({
29+
shorthands: true,
30+
collections: true,
31+
paths: true
32+
})
33+
],
34+
module: {
35+
rules: [
36+
{
37+
test: /\.js$/,
38+
enforce: 'pre',
39+
exclude,
40+
use: [
41+
{
42+
loader: 'eslint-loader',
43+
options: {
44+
formatter
45+
}
46+
}
47+
]
48+
},
49+
{
50+
test: /\.js$/,
51+
exclude,
52+
use: [
53+
'babel-loader'
54+
]
55+
},
56+
{
57+
test: /\.(html|svg)$/,
58+
exclude,
59+
use: [
60+
{
61+
loader: 'html-loader',
62+
options: {
63+
interpolate: true,
64+
minimize: true
65+
}
66+
}
67+
]
68+
}
69+
]
2170
}
22-
},
23-
plugins: [
24-
new webpack.DefinePlugin({
25-
'process.env': process.env.NODE_ENV
26-
}),
27-
new webpack.NoEmitOnErrorsPlugin,
28-
new LodashModuleReplacementPlugin({
29-
shorthands: true,
30-
collections: true,
31-
paths: true
32-
}),
33-
new webpack.optimize.UglifyJsPlugin({
34-
compress: {
35-
warnings: false
36-
}
37-
})
38-
],
39-
module: {
40-
rules: [
41-
{ test: /\.js$/,
42-
enforce: 'pre',
43-
exclude,
44-
use: [
45-
{ loader: 'eslint-loader',
46-
options: {
47-
formatter
48-
} }
49-
] },
50-
{ test: /\.js$/,
51-
exclude,
52-
use: [
53-
'ng-annotate-loader',
54-
'babel-loader'
55-
] },
56-
{ test: /\.(html|svg)$/,
57-
exclude,
58-
use: [
59-
{ loader: 'html-loader',
60-
options: {
61-
interpolate: true,
62-
minimize: true
63-
} }
64-
] }
65-
]
66-
}
67-
}
71+
};

‎build/webpack.config.babel.js

-14
This file was deleted.

‎build/webpack.dist.config.js

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
const webpack = require('webpack');
2+
const merge = require('webpack-merge');
3+
const baseConfig = require('./webpack.base.config');
4+
5+
module.exports = merge(baseConfig, {
6+
mode: "production",
7+
output: {
8+
filename: 'ovh-documentation-toolkit.js'
9+
},
10+
plugins: [
11+
new webpack.DefinePlugin({
12+
'process.env': process.env.NODE_ENV
13+
})
14+
]
15+
});

‎dist/ovh-documentation-toolkit.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+29-28
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@
1212
"version": "npm-scripts-config version",
1313
"postversion": "git push && git push --tags",
1414
"preview-changelog": "npm-scripts-config preview-changelog",
15-
"build": "rimraf dist && webpack --progress --colors --hide-modules --config ./build/webpack.config.babel.js",
16-
"build:watch": "rimraf dist && webpack --progress --colors --hide-modules --config ./build/webpack.config.babel.js --watch",
15+
"build": "rimraf dist && webpack --progress --colors --hide-modules --config ./build/webpack.dist.config.js",
16+
"build:watch": "rimraf dist && webpack --progress --colors --hide-modules --config ./build/webpack.dist.config.js --watch",
1717
"test": "echo \"no tests for this project\""
1818
},
1919
"config": {
@@ -25,40 +25,41 @@
2525
"ovh-ui-angular": "^2.0.0"
2626
},
2727
"devDependencies": {
28-
"babel-cli": "^6.24.1",
29-
"babel-core": "^6.24.1",
30-
"babel-eslint": "^8.2.1",
31-
"babel-loader": "^7.0.0",
32-
"babel-plugin-lodash": "^3.2.11",
33-
"babel-plugin-transform-runtime": "~6.23.0",
34-
"babel-preset-env": "^1.6.1",
35-
"babel-register": "~6.24.1",
36-
"eslint": "^4.17.0",
28+
"babel-cli": "^6.26.0",
29+
"babel-core": "^6.26.3",
30+
"babel-eslint": "^8.2.6",
31+
"babel-loader": "^7.1.5",
32+
"babel-plugin-angularjs-annotate": "^0.9.0",
33+
"babel-plugin-lodash": "^3.3.4",
34+
"babel-plugin-transform-runtime": "^6.23.0",
35+
"babel-preset-env": "^1.7.0",
36+
"babel-register": "^6.26.0",
37+
"eslint": "^4.3.0",
3738
"eslint-config-ovh": "^0.1.1",
38-
"eslint-friendly-formatter": "~3.0.0",
39-
"eslint-loader": "^1.7.1",
39+
"eslint-friendly-formatter": "^4.0.1",
40+
"eslint-loader": "^2.1.1",
4041
"file-loader": "^1.1.6",
41-
"html-loader": "~0.5.5",
42-
"less": "^3.0.0",
43-
"less-loader": "~4.0.4",
44-
"lodash-webpack-plugin": "^0.11.4",
45-
"ng-annotate": "~1.2.1",
46-
"ng-annotate-loader": "~0.6.1",
42+
"html-loader": "^0.5.5",
43+
"less": "^3.8.1",
44+
"less-loader": "^4.1.0",
45+
"lodash-webpack-plugin": "^0.11.5",
46+
"ng-annotate-loader": "^0.6.1",
4747
"npm-scripts-config": "^0.0.2",
4848
"npm-scripts-conventional-changelog": "^0.1.0",
4949
"postcss-loader": "^2.0.5",
5050
"rimraf": "~2.6.1",
5151
"style-loader": "^0.20.1",
52-
"url-loader": "^0.6.2",
53-
"webpack": "^3.11.0",
54-
"webpack-dev-middleware": "^2.0.5",
55-
"webpack-hot-middleware": "^2.21.0",
56-
"webpack-merge": "~4.1.0",
57-
"webpack-shell-plugin": "~0.5.0"
52+
"url-loader": "^1.1.1",
53+
"webpack": "^4.19.1",
54+
"webpack-cli": "^3.1.0",
55+
"webpack-dev-middleware": "^3.3.0",
56+
"webpack-hot-middleware": "^2.24.0",
57+
"webpack-merge": "^4.1.4",
58+
"webpack-shell-plugin": "^0.5.0"
5859
},
5960
"dependencies": {
60-
"@uirouter/angularjs": "^1.0.16",
61-
"angular": "~1.6.1",
62-
"lodash": "~4.17.4"
61+
"@uirouter/angularjs": "^1.0.20",
62+
"angular": "^1.7.4",
63+
"lodash": "^4.17.11"
6364
}
6465
}

‎src/app/index.less

+5-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
// oui-showcase
2+
ui-view,
3+
showcase-ui { display: block; }
4+
25
.oui-showcase__navbar {
36
user-select: none;
47

@@ -47,14 +50,14 @@
4750
top: rem-calc(44);
4851
bottom: 0;
4952
left: 0;
50-
width: rem-calc(280);
53+
width: rem-calc(300);
5154
overflow: hidden;
5255
overflow-y: auto;
5356
}
5457

5558
.oui-showcase__section {
5659
padding: rem-calc(32);
57-
margin-left: rem-calc(280);
60+
margin-left: rem-calc(300);
5861
background: #fff;
5962
}
6063

‎src/components/showcase/showcase.controller.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import _ from "lodash";
22

33
export default class ShowcaseController {
4-
constructor ($rootScope, $state, $transitions, StateHelpers) {
4+
constructor ($state, $transitions, StateHelpers) {
55
"ngInject";
66

77
this.$state = $state;
@@ -10,6 +10,7 @@ export default class ShowcaseController {
1010

1111
this.rootChildren = this.getOrderedChildrenState(this.rootState);
1212
this.secondLevelsChildren = this.getSecondLevelsChildren();
13+
this.currentItemExpanded = 0;
1314
this.currentSecondLevelStateName = this.getCurrentSecondLevelStateName();
1415

1516
this.mainLinks = [];

‎src/components/showcase/showcase.html

+46-43
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,55 @@
1-
<section>
2-
<header>
3-
<oui-navbar fixed
4-
active-link="{{$ctrl.currentSecondLevelStateName}}"
5-
brand="{
6-
title: 'OVH UIKit',
7-
url: '#',
8-
iconClass: 'oui-icon oui-icon-ovh'
9-
}"
10-
main-links="$ctrl.mainLinks">
11-
</oui-navbar>
12-
</header>
13-
<content class="oui-showcase__main">
14-
<div class="oui-showcase__content">
15-
<nav class="oui-list oui-list_nav oui-showcase__sidenav" role="complementary">
16-
<ul class="oui-list__items">
17-
<li class="oui-list__group"
18-
ng-repeat="groupKey in $ctrl.secondLevelsChildren[$ctrl.currentSecondLevelStateName].groupsOrder track by $index">
19-
<span class="oui-list__header"
1+
<header>
2+
<oui-navbar fixed
3+
active-link="{{$ctrl.currentSecondLevelStateName}}"
4+
brand="{
5+
title: 'OVH UIKit',
6+
url: '#',
7+
iconClass: 'oui-icon oui-icon-ovh'
8+
}"
9+
main-links="$ctrl.mainLinks">
10+
</oui-navbar>
11+
</header>
12+
<div class="oui-showcase__main">
13+
<div class="oui-showcase__content">
14+
<nav class="oui-sidebar oui-showcase__sidenav" role="complementary">
15+
<div class="oui-sidebar-menu">
16+
<ul class="oui-sidebar-list">
17+
<li class="oui-sidebar-list__item"
18+
ng-repeat="groupKey in $ctrl.secondLevelsChildren[$ctrl.currentSecondLevelStateName].groupsOrder track by $index"
19+
ui-sref-active="oui-sidebar-list__item_active">
20+
<span class="oui-sidebar-link"
2021
ng-if="groupKey === 'undefined'"
2122
ng-bind="$ctrl.secondLevelsChildren[$ctrl.currentSecondLevelStateName].name">
2223
</span>
23-
<span class="oui-list__header"
24+
<span class="oui-sidebar-link"
2425
ng-if="groupKey !== 'undefined'"
2526
ng-bind="$ctrl.secondLevelsChildren[$ctrl.currentSecondLevelStateName].groups[groupKey].name || groupKey">
2627
</span>
27-
<ul class="oui-list__sub-items">
28-
<li class="oui-list__sub-item"
29-
ng-repeat="child in $ctrl.secondLevelsChildren[$ctrl.currentSecondLevelStateName].children[groupKey] track by child.state"
30-
ui-sref-active="oui-list__item_current">
31-
<a class="oui-list__link"
32-
ng-bind="child.name"
33-
ui-sref="{{child.state}}">
34-
</a>
35-
</li>
36-
<li class="oui-list__item"
37-
ng-if="!$ctrl.secondLevelsChildren[$ctrl.currentSecondLevelStateName].groupsOrder.length">
38-
No children state found under the state {{ $ctrl.currentSecondLevelStateName }}.
39-
</li>
40-
</ul>
28+
<div class="oui-sidebar-menu">
29+
<ul class="oui-sidebar-list">
30+
<li class="oui-sidebar-list__item"
31+
ng-repeat="child in $ctrl.secondLevelsChildren[$ctrl.currentSecondLevelStateName].children[groupKey] track by child.state">
32+
<a class="oui-sidebar-link"
33+
ng-bind="child.name"
34+
ui-sref="{{child.state}}"
35+
ui-sref-active="oui-sidebar-link_active">
36+
</a>
37+
</li>
38+
<li class="oui-sidebar-list__item"
39+
ng-if="!$ctrl.secondLevelsChildren[$ctrl.currentSecondLevelStateName].groupsOrder.length">
40+
No children state found under the state {{ $ctrl.currentSecondLevelStateName }}.
41+
</li>
42+
</ul>
43+
</div>
4144
</li>
4245
</ul>
43-
</nav>
44-
<div class="oui-showcase__section">
45-
<ui-view class="oui-showcase__section-content"
46-
ng-class="$ctrl.theme"
47-
autoscroll="true">
48-
</ui-view>
4946
</div>
50-
</div>
51-
</content>
52-
</section>
47+
</nav>
48+
<main class="oui-showcase__section">
49+
<ui-view class="oui-showcase__section-content"
50+
ng-class="$ctrl.theme"
51+
autoscroll="true">
52+
</ui-view>
53+
</main>
54+
</div>
55+
</div>

0 commit comments

Comments
 (0)