Changed to SCSS
This commit is contained in:
parent
f21c0e0049
commit
934e917d73
@ -12,7 +12,7 @@
|
||||
|
||||
<!-- <link href="bbtreeview.css" rel="stylesheet" /> -->
|
||||
<!-- <link href="build/bbtreeview.min.css" rel="stylesheet" /> -->
|
||||
<link href="src/treeview.css" rel="stylesheet" />
|
||||
<!-- <link href="src/treeview.css" rel="stylesheet" /> -->
|
||||
|
||||
<script src="dist/treeview.dist.js"></script>
|
||||
|
||||
|
759
package-lock.json
generated
759
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -2,6 +2,10 @@
|
||||
"name": "LiteRyzJS/Treeview",
|
||||
"version": "0.2.0.248",
|
||||
"devDependencies": {
|
||||
"css-loader": "^7.1.2",
|
||||
"sass": "^1.77.8",
|
||||
"sass-loader": "^16.0.0",
|
||||
"style-loader": "^4.0.0",
|
||||
"webpack": "^5.93.0",
|
||||
"webpack-cli": "^5.1.4"
|
||||
},
|
||||
|
@ -1,93 +0,0 @@
|
||||
ul.bbtreeview {
|
||||
background-image: url("line.png");
|
||||
background-repeat: repeat-y;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 0 0 8px;
|
||||
}
|
||||
ul.bbtreeview ul {
|
||||
background-image: url("line.png");
|
||||
background-repeat: repeat-y;
|
||||
list-style: none;
|
||||
margin: 0 0 0 22px;
|
||||
padding: 0;
|
||||
}
|
||||
ul.bbtreeview li {
|
||||
background-repeat: no-repeat;
|
||||
cursor: default;
|
||||
display: block;
|
||||
}
|
||||
ul.bbtreeview li div.icon.expand {
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
ul.bbtreeview .c > ul {
|
||||
display: none;
|
||||
}
|
||||
ul.bbtreeview div.li {
|
||||
height: 1.2em;
|
||||
}
|
||||
ul.bbtreeview div.li.highlighted {
|
||||
background-color: rgb(169, 201, 249, 0.7);
|
||||
}
|
||||
|
||||
|
||||
ul.bbtreeview div.li > span {
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
display: inline-block;
|
||||
height: 1.2em;
|
||||
line-height: 1.2em;
|
||||
overflow: hidden;
|
||||
padding-left: 6px;
|
||||
text-overflow: ellipsis;
|
||||
vertical-align: top;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
ul.bbtreeview div.li > span.noicon {
|
||||
padding-left: 0px !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
ul.bbtreeview div.icon {
|
||||
background-position-x: 0px;
|
||||
background-repeat: no-repeat;
|
||||
display: inline-block;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
ul.bbtreeview .c > div > div.icon.expand {
|
||||
background-image: url("sprite.png");
|
||||
background-position-y: -64px;
|
||||
}
|
||||
|
||||
ul.bbtreeview .e > div > div.icon.expand {
|
||||
background-image: url("sprite.png");
|
||||
background-position-y: -48px;
|
||||
}
|
||||
|
||||
ul.bbtreeview .nc > div > div.icon.expand {
|
||||
/* background-image: none; */
|
||||
background-image: url("sprite.png");
|
||||
background-position-y: -80px;
|
||||
}
|
||||
|
||||
ul.bbtreeview .o > div > div.icon.checkbox {
|
||||
background-image: url("sprite.png");
|
||||
background-position-y: -16px;
|
||||
}
|
||||
|
||||
ul.bbtreeview .x > div > div.icon.checkbox {
|
||||
background-image: url("sprite.png");
|
||||
background-position-y: 0px;
|
||||
}
|
||||
|
||||
ul.bbtreeview div.icon.folder {
|
||||
background-image: url("sprite.png");
|
||||
background-position-y: -32px;
|
||||
}
|
106
src/treeview.scss
Normal file
106
src/treeview.scss
Normal file
@ -0,0 +1,106 @@
|
||||
$highlight-colour: rgb(169, 201, 249, 0.7);
|
||||
$icon-sprite: url("sprite.png");
|
||||
$line-image: url("line.png");
|
||||
$row-height: 1.2em;
|
||||
$icon-size: 16px;
|
||||
|
||||
|
||||
ul.bbtreeview {
|
||||
background-image: $line-image;
|
||||
background-repeat: repeat-y;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 0 0 8px;
|
||||
|
||||
|
||||
ul {
|
||||
background-image: $line-image;
|
||||
background-repeat: repeat-y;
|
||||
list-style: none;
|
||||
margin: 0 0 0 22px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
background-repeat: no-repeat;
|
||||
cursor: default;
|
||||
display: block;
|
||||
|
||||
div.icon.expand {
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
div.li {
|
||||
height: $row-height;
|
||||
|
||||
span {
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
display: inline-block;
|
||||
height: $row-height;
|
||||
line-height: $row-height;
|
||||
overflow: hidden;
|
||||
padding-left: 6px;
|
||||
text-overflow: ellipsis;
|
||||
vertical-align: top;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
span.noicon {
|
||||
padding-left: 0px !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
div.li.highlighted {
|
||||
background-color:$highlight-colour;
|
||||
}
|
||||
|
||||
div.icon {
|
||||
background-position-x: 0px;
|
||||
background-repeat: no-repeat;
|
||||
display: inline-block;
|
||||
height: $icon-size;
|
||||
width: $icon-size;
|
||||
}
|
||||
|
||||
div.icon.folder {
|
||||
background-image: $icon-sprite;
|
||||
background-position-y: calc(2 * $icon-size * -1);
|
||||
}
|
||||
|
||||
|
||||
.c > ul {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.c > div > div.icon.expand {
|
||||
background-image: $icon-sprite;
|
||||
background-position-y: calc(4 * $icon-size * -1);
|
||||
}
|
||||
|
||||
.e > div > div.icon.expand {
|
||||
background-image: $icon-sprite;
|
||||
background-position-y: calc(3 * $icon-size * -1);
|
||||
}
|
||||
|
||||
.nc > div > div.icon.expand {
|
||||
/* background-image: none; */
|
||||
background-image: $icon-sprite;
|
||||
background-position-y: calc(5 * $icon-size * -1);
|
||||
}
|
||||
|
||||
.o > div > div.icon.checkbox {
|
||||
background-image: $icon-sprite;
|
||||
background-position-y: calc(1 * $icon-size * -1);
|
||||
}
|
||||
|
||||
.x > div > div.icon.checkbox {
|
||||
background-image: $icon-sprite;
|
||||
background-position-y: calc(0 * $icon-size * -1);
|
||||
}
|
||||
|
||||
}
|
@ -1,5 +1,7 @@
|
||||
import TreeviewNode from './treeviewnode.js';
|
||||
|
||||
import '../treeview.scss';
|
||||
|
||||
|
||||
class Treeview {
|
||||
constructor(options) {
|
||||
|
@ -291,7 +291,7 @@ class TreeviewNode {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
|
||||
const myNode = a.Treeview.getNode(e.target);
|
||||
const myNode = a.Treeview.GetTreeNode(e.target);
|
||||
if (myNode == null) {
|
||||
return;
|
||||
}
|
||||
@ -304,7 +304,7 @@ class TreeviewNode {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
|
||||
const myNode = a.Treeview.getNode(e.target);
|
||||
const myNode = a.Treeview.GetTreeNode(e.target);
|
||||
if (myNode == null) {
|
||||
return;
|
||||
}
|
||||
|
@ -44,5 +44,17 @@ module.exports = {
|
||||
'process.env.VERSION': JSON.stringify(version)
|
||||
}),
|
||||
new PrependVersionPlugin()
|
||||
]
|
||||
],
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.scss$/,
|
||||
use: [
|
||||
'style-loader',
|
||||
'css-loader',
|
||||
'sass-loader'
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
Loading…
Reference in New Issue
Block a user