Skip to content

Commit 3435441

Browse files
rychkogrychkog
committed
feat(styles): make it possible to override styles (refs #16)
Now styles for ng2-tree should be included explicitly from node_modules/ng2-tree/src/styles.css They will be applied globally. Examples can be seen in demo app (either distributed with the module or ng2-tree-demo repo)
1 parent 6736f19 commit 3435441

11 files changed

Lines changed: 165 additions & 149 deletions

‎.gitignore‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ npm-debug.log
66
typings/
77
.publish/
88
yarn.lock
9+
.DS_Store
910

1011
**/*.js.map
1112

@@ -15,7 +16,6 @@ demo/**/*.css
1516

1617
src/**/*.js
1718
src/**/*.d.ts
18-
src/**/*.css
1919

2020
*.js
2121
*.d.ts

‎demo/app.component.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import { Component } from '@angular/core';
22
import { NodeEvent, TreeModel, RenamableNode } from '../index';
33

4+
require('../src/styles.css');
5+
46
declare const alertify: any;
57

68
@Component({

‎demo/index.html‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,8 @@
44
<meta charset="UTF-8">
55
<title><%= htmlWebpackPlugin.options.title %></title>
66

7-
<link href="//cdn.jsdelivr.net/alertifyjs/1.7.1/css/alertify.min.css" rel="stylesheet"/>
8-
<link href="//cdn.jsdelivr.net/alertifyjs/1.7.1/css/themes/default.min.css" rel="stylesheet"/>
9-
<style>
10-
body {
11-
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
12-
}
13-
</style>
7+
<link href="https://cdn.jsdelivr.net/alertifyjs/1.7.1/css/alertify.min.css" rel="stylesheet"/>
8+
<link href="https://cdn.jsdelivr.net/alertifyjs/1.7.1/css/themes/default.min.css" rel="stylesheet"/>
149
</head>
1510
<body>
1611
<app>Loading...</app>

‎package.json‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
"flow.compile": "npm run flow.compile:common && npm run flow.compile:system",
3434
"flow.compile:common": "ngc -p tsconfig-aot.json",
3535
"flow.compile:system": "node .config/umd-bundler.js",
36-
"flow.clean": "rimraf build demo-build bundles factories '{src,demo}/**/*.{d.ts,js.map,js,css,ngfactory.ts,shim.ts,metadata.json}' 'index.{js,js.map,d.ts}'",
36+
"flow.clean": "rimraf build demo-build bundles factories '{src,demo}/**/*.{d.ts,js.map,js,ngfactory.ts,shim.ts,metadata.json}' 'index.{js,js.map,d.ts}'",
3737
"flow.deploy:gh-pages": "npm run flow.build && gulp deploy",
3838
"flow.tslint": "gulp tslint",
3939
"flow.lint": "npm run flow.tslint",
@@ -51,29 +51,31 @@
5151
"@angular/platform-browser": "2.4.1",
5252
"@angular/platform-browser-dynamic": "2.4.1",
5353
"@angular/platform-server": "2.4.1",
54-
"core-js": "~2.4.1",
55-
"reflect-metadata": "~0.1.3",
56-
"rxjs": "~5.0.1",
57-
"zone.js": "~0.7.2",
58-
"typescript": "2.0.10",
5954
"@types/core-js": "0.9.34",
6055
"@types/lodash": "4.14.38",
6156
"@types/node": "6.0.45",
6257
"@types/webpack": "1.12.35",
63-
"jasmine-core": "2.5.2",
6458
"alertifyjs": "1.7.1",
6559
"async": "2.1.2",
6660
"concurrently": "2.1.0",
61+
"core-js": "~2.4.1",
62+
"css-loader": "~0.26.1",
6763
"del": "2.2.2",
68-
"gitignore-to-glob": "^0.3.0",
64+
"gitignore-to-glob": "~0.3.0",
6965
"gulp": "3.9.1",
7066
"gulp-gh-pages": "0.5.4",
7167
"gulp-tslint": "6.1.2",
68+
"jasmine-core": "2.5.2",
7269
"ng2-webpack-config": "0.0.5",
70+
"reflect-metadata": "~0.1.3",
7371
"rimraf": "2.5.2",
72+
"rxjs": "~5.0.1",
73+
"style-loader": "~0.13.1",
7474
"systemjs-builder": "0.15.34",
7575
"tslint-config-valorsoft": "1.1.1",
76+
"typescript": "2.0.10",
7677
"webpack": "1.13.3",
77-
"webpack-dev-server": "1.16.2"
78+
"webpack-dev-server": "1.16.2",
79+
"zone.js": "~0.7.2"
7880
}
7981
}

‎src/menu/node-menu.component.ts‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
11
import { Component, EventEmitter, Output, Renderer, Inject, OnDestroy, OnInit } from '@angular/core';
22
import { NodeMenuService } from './node-menu.service';
33
import { NodeMenuItemSelectedEvent, NodeMenuItemAction, NodeMenuEvent, NodeMenuAction } from './menu.types';
4-
import { isLeftButtonClicked, isEscapePressed } from '../common/utils/event.utils';
5-
import { styles } from './node-menu.styles';
4+
import { isLeftButtonClicked, isEscapePressed } from '../utils/event.utils';
65

76
@Component({
87
selector: 'node-menu',
9-
styles: styles,
108
template: `
119
<div class="node-menu">
1210
<ul class="node-menu-content">

‎src/menu/node-menu.styles.ts‎

Lines changed: 0 additions & 47 deletions
This file was deleted.

‎src/styles.css‎

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
.node-menu {
2+
position: relative;
3+
width: 150px;
4+
}
5+
6+
.node-menu .node-menu-content {
7+
width: 100%;
8+
padding: 5px;
9+
position: absolute;
10+
border: 1px solid #bdbdbd;
11+
border-radius: 5%;
12+
box-shadow: 0 0 5px #bdbdbd;
13+
background-color: #eee;
14+
color: #212121;
15+
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
16+
}
17+
18+
.node-menu .node-menu-content li.node-menu-item {
19+
list-style: none;
20+
padding: 3px;
21+
}
22+
23+
.node-menu .node-menu-content .node-menu-item:hover {
24+
border-radius: 5%;
25+
opacity: unset;
26+
cursor: pointer;
27+
background-color: #bdbdbd;
28+
transition: background-color 0.2s ease-out;
29+
}
30+
31+
.node-menu .node-menu-content .node-menu-item .node-menu-item-icon {
32+
display: inline-block;
33+
width: 16px;
34+
}
35+
36+
.node-menu .node-menu-content .node-menu-item .node-menu-item-icon.new-tag:before {
37+
content: '\25CF';
38+
}
39+
.node-menu .node-menu-content .node-menu-item .node-menu-item-icon.new-folder:before {
40+
content: '\25B6';
41+
}
42+
43+
.node-menu .node-menu-content .node-menu-item .node-menu-item-icon.rename:before {
44+
content: '\270E';
45+
}
46+
47+
.node-menu .node-menu-content .node-menu-item .node-menu-item-icon.remove:before {
48+
content: '\2716';
49+
}
50+
51+
.node-menu .node-menu-content .node-menu-item .node-menu-item-value {
52+
margin-left: 5px;
53+
}
54+
55+
tree-internal ul {
56+
padding: 3px 0 3px 25px;
57+
}
58+
59+
tree-internal li {
60+
padding: 0;
61+
margin: 0;
62+
list-style: none;
63+
}
64+
65+
tree-internal .over-drop-target {
66+
border: 4px solid #757575;
67+
transition: padding 0.2s ease-out;
68+
padding: 5px;
69+
border-radius: 5%;
70+
}
71+
72+
tree-internal .tree {
73+
box-sizing: border-box;
74+
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
75+
}
76+
77+
tree-internal .tree li {
78+
list-style: none;
79+
cursor: default;
80+
}
81+
82+
tree-internal .tree li div {
83+
display: inline-block;
84+
box-sizing: border-box;
85+
}
86+
87+
tree-internal .tree .node-value {
88+
display: inline-block;
89+
color: #212121;
90+
}
91+
92+
tree-internal .tree .node-value:after {
93+
display: block;
94+
padding-top: -3px;
95+
width: 0;
96+
height: 2px;
97+
background-color: #212121;
98+
content: '';
99+
transition: width 0.3s;
100+
}
101+
102+
tree-internal .tree .node-value:hover:after {
103+
width: 100%;
104+
}
105+
106+
tree-internal .tree .node-selected:after {
107+
width: 100%;
108+
}
109+
110+
tree-internal .tree .folding {
111+
width: 25px;
112+
display: inline-block;
113+
line-height: 1px;
114+
padding: 0 5px;
115+
font-weight: bold;
116+
}
117+
118+
tree-internal .tree .folding.node-collapsed {
119+
cursor: pointer;
120+
}
121+
122+
tree-internal .tree .folding.node-collapsed:before {
123+
content: '\25B6';
124+
color: #757575;
125+
}
126+
127+
tree-internal .tree .folding.node-expanded {
128+
cursor: pointer;
129+
}
130+
131+
tree-internal .tree .folding.node-expanded:before {
132+
content: '\25BC';
133+
color: #757575;
134+
}
135+
136+
tree-internal .tree .folding.node-leaf {
137+
color: #212121;
138+
text-align: center;
139+
font-size: 0.89em;
140+
}
141+
142+
tree-internal .tree .folding.node-leaf:before {
143+
content: '\25CF';
144+
color: #757575;
145+
}

‎src/tree.component.ts‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,12 @@ import { NodeDraggableEventAction, NodeDraggableEvent } from './draggable/dragga
66
import { NodeMenuEvent, NodeMenuAction, NodeMenuItemSelectedEvent, NodeMenuItemAction } from './menu/menu.types';
77
import { NodeEditableEvent, NodeEditableEventAction } from './editable/editable.type';
88
import { TreeService } from './tree.service';
9-
import { isLeftButtonClicked, isRightButtonClicked } from './common/utils/event.utils';
9+
import { isLeftButtonClicked, isRightButtonClicked } from './utils/event.utils';
1010
import * as _ from 'lodash';
11-
import { applyNewValueToRenamable, isRenamable, isValueEmpty } from './common/utils/type.utils';
12-
import { styles } from './tree.styles';
11+
import { applyNewValueToRenamable, isRenamable, isValueEmpty } from './utils/type.utils';
1312

1413
@Component({
1514
selector: 'tree-internal',
16-
styles: styles,
1715
template: `
1816
<ul class="tree" *ngIf="tree">
1917
<li>

‎src/tree.styles.ts‎

Lines changed: 0 additions & 77 deletions
This file was deleted.

src/common/utils/event.utils.ts renamed to src/utils/event.utils.ts

File renamed without changes.

0 commit comments

Comments
 (0)
⚡