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)
valor-software · Jan 3, 2017 · 3435441 · 3435441
1 parent 6736f19
commit 3435441
Show file tree

Hide file tree

Showing 11 changed files with 165 additions and 149 deletions.
diff --git a/.gitignore b/.gitignore
@@ -6,6 +6,7 @@ npm-debug.log
 typings/
 .publish/
 yarn.lock
+.DS_Store
 
 **/*.js.map
 
@@ -15,7 +16,6 @@ demo/**/*.css
 
 src/**/*.js
 src/**/*.d.ts
-src/**/*.css
 
 *.js
 *.d.ts

diff --git a/demo/app.component.ts b/demo/app.component.ts
@@ -1,6 +1,8 @@
 import { Component } from '@angular/core';
 import { NodeEvent, TreeModel, RenamableNode } from '../index';
 
+require('../src/styles.css');
+
 declare const alertify: any;
 
 @Component({

diff --git a/demo/index.html b/demo/index.html
@@ -4,13 +4,8 @@
   <meta charset="UTF-8">
   <title><%= htmlWebpackPlugin.options.title %></title>
 
-  <link href="//cdn.jsdelivr.net/alertifyjs/1.7.1/css/alertify.min.css" rel="stylesheet"/>
-  <link href="//cdn.jsdelivr.net/alertifyjs/1.7.1/css/themes/default.min.css" rel="stylesheet"/>
-  <style>
-    body {
-      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-    }
-  </style>
+  <link href="https://cdn.jsdelivr.net/alertifyjs/1.7.1/css/alertify.min.css" rel="stylesheet"/>
+  <link href="https://cdn.jsdelivr.net/alertifyjs/1.7.1/css/themes/default.min.css" rel="stylesheet"/>
 </head>
 <body>
 <app>Loading...</app>

diff --git a/package.json b/package.json
@@ -33,7 +33,7 @@
     "flow.compile": "npm run flow.compile:common && npm run flow.compile:system",
     "flow.compile:common": "ngc -p tsconfig-aot.json",
     "flow.compile:system": "node .config/umd-bundler.js",
-    "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}'",
+    "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}'",
     "flow.deploy:gh-pages": "npm run flow.build && gulp deploy",
     "flow.tslint": "gulp tslint",
     "flow.lint": "npm run flow.tslint",
@@ -51,29 +51,31 @@
     "@angular/platform-browser": "2.4.1",
     "@angular/platform-browser-dynamic": "2.4.1",
     "@angular/platform-server": "2.4.1",
-    "core-js": "~2.4.1",
-    "reflect-metadata": "~0.1.3",
-    "rxjs": "~5.0.1",
-    "zone.js": "~0.7.2",
-    "typescript": "2.0.10",
     "@types/core-js": "0.9.34",
     "@types/lodash": "4.14.38",
     "@types/node": "6.0.45",
     "@types/webpack": "1.12.35",
-    "jasmine-core": "2.5.2",
     "alertifyjs": "1.7.1",
     "async": "2.1.2",
     "concurrently": "2.1.0",
+    "core-js": "~2.4.1",
+    "css-loader": "~0.26.1",
     "del": "2.2.2",
-    "gitignore-to-glob": "^0.3.0",
+    "gitignore-to-glob": "~0.3.0",
     "gulp": "3.9.1",
     "gulp-gh-pages": "0.5.4",
     "gulp-tslint": "6.1.2",
+    "jasmine-core": "2.5.2",
     "ng2-webpack-config": "0.0.5",
+    "reflect-metadata": "~0.1.3",
     "rimraf": "2.5.2",
+    "rxjs": "~5.0.1",
+    "style-loader": "~0.13.1",
     "systemjs-builder": "0.15.34",
     "tslint-config-valorsoft": "1.1.1",
+    "typescript": "2.0.10",
     "webpack": "1.13.3",
-    "webpack-dev-server": "1.16.2"
+    "webpack-dev-server": "1.16.2",
+    "zone.js": "~0.7.2"
   }
 }
diff --git a/src/menu/node-menu.component.ts b/src/menu/node-menu.component.ts
@@ -1,12 +1,10 @@
 import { Component, EventEmitter, Output, Renderer, Inject, OnDestroy, OnInit } from '@angular/core';
 import { NodeMenuService } from './node-menu.service';
 import { NodeMenuItemSelectedEvent, NodeMenuItemAction, NodeMenuEvent, NodeMenuAction } from './menu.types';
-import { isLeftButtonClicked, isEscapePressed } from '../common/utils/event.utils';
-import { styles } from './node-menu.styles';
+import { isLeftButtonClicked, isEscapePressed } from '../utils/event.utils';
 
 @Component({
   selector: 'node-menu',
-  styles: styles,
   template: `
     <div class="node-menu">
       <ul class="node-menu-content">

diff --git a/src/menu/node-menu.styles.ts b/src/menu/node-menu.styles.ts
diff --git a/src/styles.css b/src/styles.css
@@ -0,0 +1,145 @@
+.node-menu {
+  position: relative;
+  width: 150px;
+}
+
+.node-menu .node-menu-content {
+  width: 100%;
+  padding: 5px;
+  position: absolute;
+  border: 1px solid #bdbdbd;
+  border-radius: 5%;
+  box-shadow: 0 0 5px #bdbdbd;
+  background-color: #eee;
+  color: #212121;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+
+.node-menu .node-menu-content li.node-menu-item {
+  list-style: none;
+  padding: 3px;
+}
+
+.node-menu .node-menu-content .node-menu-item:hover {
+  border-radius: 5%;
+  opacity: unset;
+  cursor: pointer;
+  background-color: #bdbdbd;
+  transition: background-color 0.2s ease-out;
+}
+
+.node-menu .node-menu-content .node-menu-item .node-menu-item-icon {
+  display: inline-block;
+  width: 16px;
+}
+
+.node-menu .node-menu-content .node-menu-item .node-menu-item-icon.new-tag:before {
+  content: '\25CF';
+}
+.node-menu .node-menu-content .node-menu-item .node-menu-item-icon.new-folder:before {
+  content: '\25B6';
+}
+
+.node-menu .node-menu-content .node-menu-item .node-menu-item-icon.rename:before {
+  content: '\270E';
+}
+
+.node-menu .node-menu-content .node-menu-item .node-menu-item-icon.remove:before {
+  content: '\2716';
+}
+
+.node-menu .node-menu-content .node-menu-item .node-menu-item-value {
+  margin-left: 5px;
+}
+
+tree-internal ul {
+  padding: 3px 0 3px 25px;
+}
+
+tree-internal li {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+tree-internal .over-drop-target {
+  border: 4px solid #757575;
+  transition: padding 0.2s ease-out;
+  padding: 5px;
+  border-radius: 5%;
+}
+
+tree-internal .tree {
+  box-sizing: border-box;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+
+tree-internal .tree li {
+  list-style: none;
+  cursor: default;
+}
+
+tree-internal .tree li div {
+  display: inline-block;
+  box-sizing: border-box;
+}
+
+tree-internal .tree .node-value {
+  display: inline-block;
+  color: #212121;
+}
+
+tree-internal .tree .node-value:after {
+  display: block;
+  padding-top: -3px;
+  width: 0;
+  height: 2px;
+  background-color: #212121;
+  content: '';
+  transition: width 0.3s;
+}
+
+tree-internal .tree .node-value:hover:after {
+  width: 100%;
+}
+
+tree-internal .tree .node-selected:after {
+  width: 100%;
+}
+
+tree-internal .tree .folding {
+  width: 25px;
+  display: inline-block;
+  line-height: 1px;
+  padding: 0 5px;
+  font-weight: bold;
+}
+
+tree-internal .tree .folding.node-collapsed {
+  cursor: pointer;
+}
+
+tree-internal .tree .folding.node-collapsed:before {
+  content: '\25B6';
+  color: #757575;
+}
+
+tree-internal .tree .folding.node-expanded {
+  cursor: pointer;
+}
+
+tree-internal .tree .folding.node-expanded:before {
+  content: '\25BC';
+  color: #757575;
+}
+
+tree-internal .tree .folding.node-leaf {
+  color: #212121;
+  text-align: center;
+  font-size: 0.89em;
+}
+
+tree-internal .tree .folding.node-leaf:before {
+  content: '\25CF';
+  color: #757575;
+}
diff --git a/src/tree.component.ts b/src/tree.component.ts
@@ -6,14 +6,12 @@ import { NodeDraggableEventAction, NodeDraggableEvent } from './draggable/dragga
 import { NodeMenuEvent, NodeMenuAction, NodeMenuItemSelectedEvent, NodeMenuItemAction } from './menu/menu.types';
 import { NodeEditableEvent, NodeEditableEventAction } from './editable/editable.type';
 import { TreeService } from './tree.service';
-import { isLeftButtonClicked, isRightButtonClicked } from './common/utils/event.utils';
+import { isLeftButtonClicked, isRightButtonClicked } from './utils/event.utils';
 import * as _ from 'lodash';
-import { applyNewValueToRenamable, isRenamable, isValueEmpty } from './common/utils/type.utils';
-import { styles } from './tree.styles';
+import { applyNewValueToRenamable, isRenamable, isValueEmpty } from './utils/type.utils';
 
 @Component({
   selector: 'tree-internal',
-  styles: styles,
   template: `
   <ul class="tree" *ngIf="tree">
     <li>

diff --git a/src/tree.styles.ts b/src/tree.styles.ts
diff --git a/src/common/utils/event.utils.ts → src/utils/event.utils.ts b/src/common/utils/event.utils.ts → src/utils/event.utils.ts