Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -7,3 +7,6 @@
/nuget
/demo/filebrowser/data/root
/npm.txt
/*.iml
/*.ipr
/.idea/
29 changes: 17 additions & 12 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,25 +1,25 @@
jsTree Bootstrap Theme
=====================
Since there aren't many jsTree themes out there, we thought we'd make this one freely available.
jsTree Bootstrap Theme is created as a part of [Proton UI Responsive Admin Panel Theme](http://proton.orangehilldev.com/) that we at [Orange Hill Development](http://www.orangehilldev.com) use to build custom admin panels. The theme is compatible with jsTree 3.
Since there aren't many `jsTree` themes out there, we thought we'd make this one freely available.
`jsTree` Bootstrap Theme is created as a part of [Proton UI Responsive Admin Panel Theme](http://proton.orangehilldev.com/) that we at [Orange Hill Development](http://www.orangehilldev.com) use to build custom admin panels. The theme is compatible with `jsTree` 3.

A legacy version compatible with jsTree pre 1.0 fix2 is still available on a [separate branch](https://github.com/orangehill/jstree-bootstrap-theme/tree/Legacy_jsTree_Bootstrap_Theme_(for_version_pre_1.0_fix2)) (no longer maintained).
A legacy version compatible with `jsTree` pre 1.0 fix2 is still available on a [separate branch](https://github.com/orangehill/jstree-bootstrap-theme/tree/Legacy_jsTree_Bootstrap_Theme_(for_version_pre_1.0_fix2)) (no longer maintained).

## What is jsTree?
jsTree is a tree view for jQuery (depends on 1.9.1 or later).
It is absolutely free (MIT licence) at [http://www.jstree.com/](http://www.jstree.com/) or at [https://github.com/vakata/jstree](https://github.com/vakata/jstree) and supports all modern browsers and IE from version 8 up.
jsTree can display trees by parsing HTML or JSON and supports AJAX, it is themeable and easy to configure and customize. Events are fired when the user interacts with the tree. Other notable features are inline editing, drag'n'drop support, fuzzy searching (with optional server side calls), tri-state checkbox support, configurable node types, AMD compatibility, easily extendable via plugins.
`jsTree` is a tree view for `jQuery` (depends on 1.9.1 or later).
It is absolutely free (MIT license) at [http://www.jstree.com/](http://www.jstree.com/) or at [https://github.com/vakata/jstree](https://github.com/vakata/jstree) and supports all modern browsers and IE from version 8 up.
`jsTree` can display trees by parsing `HTML` or `JSON` and supports `AJAX`, it is themeable and easy to configure and customize. Events are fired when the user interacts with the tree. Other notable features are inline editing, drag'n'drop support, fuzzy searching (with optional server side calls), tri-state checkbox support, configurable node types, AMD compatibility, easily extendable via plugins.

## Theme Demo
Theme demo is available at [jsTree Bootstrap Theme Demo Page](http://orangehilldev.com/jstree-bootstrap-theme/demo/) .
Theme demo is available at [`jsTree` Bootstrap Theme Demo Page](http://orangehilldev.com/jstree-bootstrap-theme/demo/) .

## Responsiveness
jsTree Bootstrap Theme is [responsive](http://en.wikipedia.org/wiki/Responsive_web_design). To see the effect [open the demo](http://orangehilldev.com/jstree-bootstrap-theme/demo/) and scale a browser window down until the window width is less then 768 pixels.
`jsTree` Bootstrap Theme is [responsive](http://en.wikipedia.org/wiki/Responsive_web_design). To see the effect [open the demo](http://orangehilldev.com/jstree-bootstrap-theme/demo/) and scale a browser window down until the window width is less then 768 pixels.

Mobile friendly design should make it easier to tap nodes with more precision.

## Getting Started
Download or checkout the latest copy and include jQuery and jsTree scripts as well as proton theme style file in your web page. Then create an instance (in this case using the inline HTML) with theme name set to proton and responsive (optional) set to true.
Download or checkout the latest copy and include jQuery and `jsTree` scripts as well as proton theme style file in your web page. Then create an instance (in this case using the inline HTML) with theme name set to proton and responsive (optional) set to true.

```html
<link rel="stylesheet" href="dist/themes/proton/style.min.css" />
Expand Down Expand Up @@ -49,8 +49,13 @@ $(function() {
```

## LESS support
If you wish to further customize the theme you might find it convenient to use included [LESS](http://lesscss.org/) files. The theme also includes a [grunt](https://github.com/gruntjs/grunt) script which you can use to build CSS files.
If you wish to further customize the theme you might find it convenient to use included [LESS](http://lesscss.org/) files. The theme also includes a [grunt](https://github.com/gruntjs/grunt) script which you can use to build `CSS` files.

To develop using grunt files just run `grunt` (no options required). This will build theme images and CSS.
To develop using grunt files:
- first you need to install the grunt dependencies with ```grunt install```
- than the bower dependencies with ```bower install```
- after that just run `grunt` (no options required). This will build theme images and CSS.

Do not edit files in the `dist` subdirectory as they are generated via grunt. You'll find theme source code in the `src/themes/proton` subdirectory.
**Note:** Do not edit files in the `dist` subdirectory as they are generated via grunt task.

You'll find theme source code in the `src/themes/proton` subdirectory.
35 changes: 16 additions & 19 deletions README.txt
Original file line number Diff line number Diff line change
@@ -1,30 +1,24 @@
jsTree Bootstrap Theme
=====================
Since there aren't many jsTree themes out there, we thought we'd make this one freely available.
jsTree Bootstrap Theme is created as a part of [Proton UI Responsive Admin Panel Theme](http://themeforest.net/item/proton-ui-responsive-admin-panel-theme/6240793). The theme is compatible with jsTree 3.
Since there aren't many jsTree themes out there, we thought we'd make this one freely available.
jsTree Bootstrap Theme is created as a part of [Proton UI Responsive Admin Panel Theme](http://proton.orangehilldev.com/) that we at [Orange Hill Development](http://www.orangehilldev.com) use to build custom admin panels. The theme is compatible with jsTree 3.

A legacy version compatible with jsTree pre 1.0 fix2 is still available on a [separate branch](https://github.com/orangehill/jstree-bootstrap-theme/tree/Legacy_jsTree_Bootstrap_Theme_(for_version_pre_1.0_fix2)) (no longer maintained).

##What is jsTree?

jsTree is a tree view for jQuery (depends on 1.9.1 or later).
It is absolutely free (MIT licence) and supports all modern browsers and IE from version 8 up.
## What is jsTree?
jsTree is a tree view for jQuery (depends on 1.9.1 or later).
It is absolutely free (MIT license) at [http://www.jstree.com/](http://www.jstree.com/) or at [https://github.com/vakata/jstree](https://github.com/vakata/jstree) and supports all modern browsers and IE from version 8 up.
jsTree can display trees by parsing HTML or JSON and supports AJAX, it is themeable and easy to configure and customize. Events are fired when the user interacts with the tree. Other notable features are inline editing, drag'n'drop support, fuzzy searching (with optional server side calls), tri-state checkbox support, configurable node types, AMD compatibility, easily extendable via plugins.

It is available absolutely free at [http://www.jstree.com/](http://www.jstree.com/) or at [https://github.com/vakata/jstree](https://github.com/vakata/jstree).

For your convenience entire `jsTree 3.0.4` version is included with this theme.

##Theme Demo
## Theme Demo
Theme demo is available at [jsTree Bootstrap Theme Demo Page](http://orangehilldev.com/jstree-bootstrap-theme/demo/) .

##Responsiveness
jsTree Bootstrap Theme is [Responsive](http://en.wikipedia.org/wiki/Responsive_web_design). To see the effect [open the demo](http://orangehilldev.com/jstree-bootstrap-theme/demo/) and scale a browser window down until the window width is less then 768 pixels.
## Responsiveness
jsTree Bootstrap Theme is [responsive](http://en.wikipedia.org/wiki/Responsive_web_design). To see the effect [open the demo](http://orangehilldev.com/jstree-bootstrap-theme/demo/) and scale a browser window down until the window width is less then 768 pixels.

Mobile friendly design should make it easier to tap nodes with more precision.

## Getting Started

Download or checkout the latest copy and include jQuery and jsTree scripts as well as proton theme style file in your web page. Then create an instance (in this case using the inline HTML) with theme name set to proton and responsive (optional) set to true.

```html
Expand Down Expand Up @@ -54,11 +48,14 @@ $(function() {
</script>
```

## LESS support
If you wish to further customize the theme you might find it convenient to use included [LESS](http://lesscss.org/) files. The theme also includes a [grunt](https://github.com/gruntjs/grunt) script which you can use to build `CSS` files.

##LESS support

If you wish to further customize the theme you might find it convenient to use included [LESS](http://lesscss.org/) files. The theme also includes a modified jsTree 3 [grunt ](https://github.com/gruntjs/grunt) script which you can use to build CSS files.
To develop using grunt files:
- first you need to install the grunt dependencies with ```grunt install```
- than the bower dependencies with ```bower install```
- after that just run `grunt` (no options required). This will build theme images and CSS.

To develop using grunt files just run `grunt` after your LESS changes (no options required). This will build new theme CSS and minified CSS in `dist/themes/proton` directory.
**Note:** Do not edit files in the `dist` subdirectory as they are generated via grunt task.

Do not edit files in the `dist` directory as they are generated via grunt. You'll find the theme source code in `src/themes/proton`.
You'll find theme source code in the `src/themes/proton` subdirectory.
8 changes: 5 additions & 3 deletions bower.json
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
{
"name": "jstree-bootstrap-theme",
"version": "1.0.1",
"version": "1.0.2",
"homepage": "https://github.com/orangehill/jstree-bootstrap-theme",
"description": "Reponsive jsTree Twitter Bootstrap 3 Compatible Theme",
"description": "Responsive jsTree Twitter Bootstrap 3 Compatible Theme",
"main": "./dist/themes/proton/style.css",
"authors": [
"Vedran Opacic <[email protected]>",
Expand All @@ -18,12 +18,14 @@
"**/.*",
"node_modules",
"bower_components",
"demo",
"libs",
"test",
"tests"
],
"dependencies": {
"jquery": ">= 1.11.1",
"bootstrap": "~3.0",
"bootstrap": "~3.3.7",
"jstree": "~3.3.4"
}
}
2 changes: 1 addition & 1 deletion dist/themes/default/style.min.css

Large diffs are not rendered by default.

8 changes: 4 additions & 4 deletions dist/themes/proton/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -304,13 +304,13 @@
}
.jstree-proton .jstree-hovered {
background: #76b6ec;
color: #ffffff;
color: #fff;
border-radius: 3px;
box-shadow: inset 0 0 1px #76b6ec;
}
.jstree-proton .jstree-clicked {
background: #3392e3;
color: #ffffff;
color: #fff;
border-radius: 3px;
box-shadow: inset 0 0 1px #3392e3;
}
Expand Down Expand Up @@ -352,15 +352,15 @@ filter: gray;
}
.jstree-proton.jstree-checkbox-no-clicked .jstree-clicked.jstree-hovered {
background: #76b6ec;
color: #ffffff;
color: #fff;
}
.jstree-proton.jstree-checkbox-no-clicked > .jstree-wholerow-ul .jstree-wholerow-clicked {
background: transparent;
color: inherit;
}
.jstree-proton.jstree-checkbox-no-clicked > .jstree-wholerow-ul .jstree-wholerow-clicked.jstree-wholerow-hovered {
background: #76b6ec;
color: #ffffff;
color: #fff;
}
.jstree-proton > .jstree-striped {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAMAAAB/qqA+AAAABlBMVEUAAAAAAAClZ7nPAAAAAnRSTlMNAMM9s3UAAAAXSURBVHjajcEBAQAAAIKg/H/aCQZ70AUBjAATb6YPDgAAAABJRU5ErkJggg==") left top repeat;
Expand Down
2 changes: 1 addition & 1 deletion dist/themes/proton/style.min.css

Large diffs are not rendered by default.

15 changes: 10 additions & 5 deletions gruntfile.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,11 @@
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
copy: {

// Project configuration.
grunt.initConfig({
clean: {
folder: ['dist/*']
},
copy: {
libs: {
files: [
{ expand: true, cwd: 'libs/', src: ['**/*.*'], dest: 'dist/libs/' }
Expand Down Expand Up @@ -35,8 +39,9 @@ module.exports = function(grunt) {
}
});

grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-less');

// Default task, generate theme sprite images and CSS
grunt.registerTask('default', ['copy:libs', 'copy:fonts', 'less']);
Expand Down
Loading