Snapshot of incomplete DnD extension to tree.js.
It however is rather unintuitive how nodes can be put to the end. Dropping this direction in favor of https://github.com/fritz-c/react-sortable-tree
This commit is contained in:
Tomas Bures
parent
0bfb30817b
commit
6a7dab52eb
8 changed files with 999 additions and 135 deletions
Binary file not shown.
|
Before Width: | Height: | Size: 0 B After Width: | Height: | Size: 5.4 KiB |
BIN
client/public/fancytree/skin-bootstrap/icons.gif
Normal file
BIN
client/public/fancytree/skin-bootstrap/icons.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.4 KiB |
630
client/public/fancytree/skin-bootstrap/ui.fancytree.css
Normal file
630
client/public/fancytree/skin-bootstrap/ui.fancytree.css
Normal file
|
|
@ -0,0 +1,630 @@
|
||||||
|
/*!
|
||||||
|
* Fancytree "bootstrap" skin.
|
||||||
|
*
|
||||||
|
* DON'T EDIT THE CSS FILE DIRECTLY, since it is automatically generated from
|
||||||
|
* the LESS templates.
|
||||||
|
*/
|
||||||
|
/*******************************************************************************
|
||||||
|
* Common Styles for Fancytree Skins.
|
||||||
|
*
|
||||||
|
* This section is automatically generated from the `skin-common.less` template.
|
||||||
|
******************************************************************************/
|
||||||
|
/*------------------------------------------------------------------------------
|
||||||
|
* Helpers
|
||||||
|
*----------------------------------------------------------------------------*/
|
||||||
|
.ui-helper-hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
/*------------------------------------------------------------------------------
|
||||||
|
* Container and UL / LI
|
||||||
|
*----------------------------------------------------------------------------*/
|
||||||
|
ul.fancytree-container {
|
||||||
|
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||||
|
font-size: 14px;
|
||||||
|
white-space: nowrap;
|
||||||
|
padding: 3px;
|
||||||
|
margin: 0;
|
||||||
|
background-color: white;
|
||||||
|
border: 1px dotted gray;
|
||||||
|
min-height: 0%;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
ul.fancytree-container ul {
|
||||||
|
padding: 0 0 0 16px;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
ul.fancytree-container ul > li:before {
|
||||||
|
content: none;
|
||||||
|
}
|
||||||
|
ul.fancytree-container li {
|
||||||
|
list-style-image: none;
|
||||||
|
list-style-position: outside;
|
||||||
|
list-style-type: none;
|
||||||
|
-moz-background-clip: border;
|
||||||
|
-moz-background-inline-policy: continuous;
|
||||||
|
-moz-background-origin: padding;
|
||||||
|
background-attachment: scroll;
|
||||||
|
background-color: transparent;
|
||||||
|
background-position: 0em 0em;
|
||||||
|
background-repeat: repeat-y;
|
||||||
|
background-image: none;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
ul.fancytree-container li.fancytree-lastsib {
|
||||||
|
background-image: none;
|
||||||
|
}
|
||||||
|
.ui-fancytree-disabled ul.fancytree-container {
|
||||||
|
opacity: 0.5;
|
||||||
|
background-color: silver;
|
||||||
|
}
|
||||||
|
ul.fancytree-connectors.fancytree-container li {
|
||||||
|
background-image: url("data:image/gif;base64,R0lGODlhEAAQAPcAAAAAAIAAAACAAICAAAAAgIAAgACAgMDAwMDcwKbK8P///6Wlpf/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////78KCgpICAgP8AAAD/AP//AAAA//8A/wD//////yH5BAEAAP4ALAAAAAAQABAAAAgpAP0JFHhvoMGDCBMiLKiwocOBDB9KXDixosGIFidizPhwI8eGHj8KDAgAOw==");
|
||||||
|
background-position: 0 0;
|
||||||
|
}
|
||||||
|
ul.fancytree-container li.fancytree-lastsib,
|
||||||
|
ul.fancytree-no-connector > li {
|
||||||
|
background-image: none;
|
||||||
|
}
|
||||||
|
li.fancytree-animating {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
/*------------------------------------------------------------------------------
|
||||||
|
* Common icon definitions
|
||||||
|
*----------------------------------------------------------------------------*/
|
||||||
|
span.fancytree-empty,
|
||||||
|
span.fancytree-vline,
|
||||||
|
span.fancytree-expander,
|
||||||
|
span.fancytree-icon,
|
||||||
|
span.fancytree-checkbox,
|
||||||
|
span.fancytree-drag-helper-img,
|
||||||
|
#fancytree-drop-marker {
|
||||||
|
width: 1em;
|
||||||
|
height: 1em;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: top;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: left;
|
||||||
|
background-position: 0em 0em;
|
||||||
|
}
|
||||||
|
span.fancytree-icon,
|
||||||
|
span.fancytree-checkbox,
|
||||||
|
span.fancytree-expander,
|
||||||
|
span.fancytree-custom-icon {
|
||||||
|
margin-top: 2px;
|
||||||
|
}
|
||||||
|
/* Used by icon option: */
|
||||||
|
span.fancytree-custom-icon {
|
||||||
|
width: 1em;
|
||||||
|
height: 1em;
|
||||||
|
display: inline-block;
|
||||||
|
margin-left: 0.5em;
|
||||||
|
background-position: 0em 0em;
|
||||||
|
}
|
||||||
|
/* Used by 'icon' node option: */
|
||||||
|
img.fancytree-icon {
|
||||||
|
width: 1em;
|
||||||
|
height: 1em;
|
||||||
|
margin-left: 0.5em;
|
||||||
|
margin-top: 2px;
|
||||||
|
vertical-align: top;
|
||||||
|
border-style: none;
|
||||||
|
}
|
||||||
|
/*------------------------------------------------------------------------------
|
||||||
|
* Expander icon
|
||||||
|
*
|
||||||
|
* Note: IE6 doesn't correctly evaluate multiples class names,
|
||||||
|
* so we create combined class names that can be used in the CSS.
|
||||||
|
*
|
||||||
|
* Prefix: fancytree-exp-
|
||||||
|
* 1st character: 'e': expanded, 'c': collapsed, 'n': no children
|
||||||
|
* 2nd character (optional): 'd': lazy (Delayed)
|
||||||
|
* 3rd character (optional): 'l': Last sibling
|
||||||
|
*----------------------------------------------------------------------------*/
|
||||||
|
span.fancytree-expander {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.fancytree-exp-n span.fancytree-expander,
|
||||||
|
.fancytree-exp-nl span.fancytree-expander {
|
||||||
|
background-image: none;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
.fancytree-connectors .fancytree-exp-n span.fancytree-expander,
|
||||||
|
.fancytree-connectors .fancytree-exp-nl span.fancytree-expander {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
/* Fade out expanders, when container is not hovered or active */
|
||||||
|
.fancytree-fade-expander span.fancytree-expander {
|
||||||
|
transition: opacity 1.5s;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
.fancytree-fade-expander:hover span.fancytree-expander,
|
||||||
|
.fancytree-fade-expander.fancytree-treefocus span.fancytree-expander,
|
||||||
|
.fancytree-fade-expander .fancytree-treefocus span.fancytree-expander,
|
||||||
|
.fancytree-fade-expander [class*='fancytree-statusnode-'] span.fancytree-expander {
|
||||||
|
transition: opacity 0.6s;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
/*------------------------------------------------------------------------------
|
||||||
|
* Checkbox icon
|
||||||
|
*----------------------------------------------------------------------------*/
|
||||||
|
span.fancytree-checkbox {
|
||||||
|
margin-left: 0.5em;
|
||||||
|
}
|
||||||
|
.fancytree-unselectable span.fancytree-checkbox {
|
||||||
|
opacity: 0.4;
|
||||||
|
filter: alpha(opacity=40);
|
||||||
|
}
|
||||||
|
/*------------------------------------------------------------------------------
|
||||||
|
* Node type icon
|
||||||
|
* Note: IE6 doesn't correctly evaluate multiples class names,
|
||||||
|
* so we create combined class names that can be used in the CSS.
|
||||||
|
*
|
||||||
|
* Prefix: fancytree-ico-
|
||||||
|
* 1st character: 'e': expanded, 'c': collapsed
|
||||||
|
* 2nd character (optional): 'f': folder
|
||||||
|
*----------------------------------------------------------------------------*/
|
||||||
|
span.fancytree-icon {
|
||||||
|
margin-left: 0.5em;
|
||||||
|
}
|
||||||
|
/* Documents */
|
||||||
|
/* Folders */
|
||||||
|
.fancytree-loading span.fancytree-expander,
|
||||||
|
.fancytree-loading span.fancytree-expander:hover,
|
||||||
|
.fancytree-statusnode-loading span.fancytree-icon,
|
||||||
|
.fancytree-statusnode-loading span.fancytree-icon:hover {
|
||||||
|
background-image: none;
|
||||||
|
}
|
||||||
|
/* Status node icons */
|
||||||
|
/*------------------------------------------------------------------------------
|
||||||
|
* Node titles and highlighting
|
||||||
|
*----------------------------------------------------------------------------*/
|
||||||
|
span.fancytree-node {
|
||||||
|
/* See #117 */
|
||||||
|
display: inherit;
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 0px;
|
||||||
|
min-height: 1em;
|
||||||
|
}
|
||||||
|
span.fancytree-title {
|
||||||
|
color: #333333;
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: top;
|
||||||
|
min-height: 1em;
|
||||||
|
padding: 0 3px 0 3px;
|
||||||
|
margin: 0px 0 0 0.5em;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
-webkit-border-radius: 3px;
|
||||||
|
-moz-border-radius: 3px;
|
||||||
|
-ms-border-radius: 3px;
|
||||||
|
-o-border-radius: 3px;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
span.fancytree-node.fancytree-error span.fancytree-title {
|
||||||
|
color: #d9534f;
|
||||||
|
}
|
||||||
|
/*------------------------------------------------------------------------------
|
||||||
|
* Drag'n'drop support
|
||||||
|
*----------------------------------------------------------------------------*/
|
||||||
|
div.fancytree-drag-helper span.fancytree-childcounter,
|
||||||
|
div.fancytree-drag-helper span.fancytree-dnd-modifier {
|
||||||
|
display: inline-block;
|
||||||
|
color: #fff;
|
||||||
|
background: #337ab7;
|
||||||
|
border: 1px solid gray;
|
||||||
|
min-width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
line-height: 1;
|
||||||
|
vertical-align: baseline;
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 2px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 9px;
|
||||||
|
}
|
||||||
|
div.fancytree-drag-helper span.fancytree-childcounter {
|
||||||
|
position: absolute;
|
||||||
|
top: -6px;
|
||||||
|
right: -6px;
|
||||||
|
}
|
||||||
|
div.fancytree-drag-helper span.fancytree-dnd-modifier {
|
||||||
|
background: #5cb85c;
|
||||||
|
border: none;
|
||||||
|
font-weight: bolder;
|
||||||
|
}
|
||||||
|
/*** Drop marker icon *********************************************************/
|
||||||
|
#fancytree-drop-marker {
|
||||||
|
width: 2em;
|
||||||
|
position: absolute;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
#fancytree-drop-marker.fancytree-drop-after,
|
||||||
|
#fancytree-drop-marker.fancytree-drop-before {
|
||||||
|
width: 4em;
|
||||||
|
}
|
||||||
|
/*** Source node while dragging ***********************************************/
|
||||||
|
span.fancytree-drag-source.fancytree-drag-remove {
|
||||||
|
opacity: 0.15;
|
||||||
|
}
|
||||||
|
/*** Target node while dragging cursor is over it *****************************/
|
||||||
|
/*------------------------------------------------------------------------------
|
||||||
|
* 'rtl' option
|
||||||
|
*----------------------------------------------------------------------------*/
|
||||||
|
.fancytree-container.fancytree-rtl .fancytree-title {
|
||||||
|
/*unicode-bidi: bidi-override;*/
|
||||||
|
/* optional: reverse title letters */
|
||||||
|
}
|
||||||
|
.fancytree-container.fancytree-rtl span.fancytree-connector,
|
||||||
|
.fancytree-container.fancytree-rtl span.fancytree-expander,
|
||||||
|
.fancytree-container.fancytree-rtl span.fancytree-icon,
|
||||||
|
.fancytree-container.fancytree-rtl span.fancytree-drag-helper-img,
|
||||||
|
.fancytree-container.fancytree-rtl #fancytree-drop-marker {
|
||||||
|
background-image: url("icons-rtl.gif");
|
||||||
|
}
|
||||||
|
.fancytree-container.fancytree-rtl .fancytree-exp-n span.fancytree-expander,
|
||||||
|
.fancytree-container.fancytree-rtl .fancytree-exp-nl span.fancytree-expander {
|
||||||
|
background-image: none;
|
||||||
|
}
|
||||||
|
.fancytree-container.fancytree-rtl.fancytree-connectors .fancytree-exp-n span.fancytree-expander,
|
||||||
|
.fancytree-container.fancytree-rtl.fancytree-connectors .fancytree-exp-nl span.fancytree-expander {
|
||||||
|
background-image: url("icons-rtl.gif");
|
||||||
|
}
|
||||||
|
ul.fancytree-container.fancytree-rtl ul {
|
||||||
|
padding: 0 16px 0 0;
|
||||||
|
}
|
||||||
|
ul.fancytree-container.fancytree-rtl.fancytree-connectors li {
|
||||||
|
background-position: right 0;
|
||||||
|
background-image: url("vline-rtl.gif");
|
||||||
|
}
|
||||||
|
ul.fancytree-container.fancytree-rtl li.fancytree-lastsib,
|
||||||
|
ul.fancytree-container.fancytree-rtl.fancytree-no-connector > li {
|
||||||
|
background-image: none;
|
||||||
|
}
|
||||||
|
/*------------------------------------------------------------------------------
|
||||||
|
* 'table' extension
|
||||||
|
*----------------------------------------------------------------------------*/
|
||||||
|
table.fancytree-ext-table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
table.fancytree-ext-table span.fancytree-node {
|
||||||
|
display: inline-block;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
/*------------------------------------------------------------------------------
|
||||||
|
* 'columnview' extension
|
||||||
|
*----------------------------------------------------------------------------*/
|
||||||
|
table.fancytree-ext-columnview tbody tr td {
|
||||||
|
position: relative;
|
||||||
|
border: 1px solid gray;
|
||||||
|
vertical-align: top;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
table.fancytree-ext-columnview tbody tr td > ul {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
table.fancytree-ext-columnview tbody tr td > ul li {
|
||||||
|
list-style-image: none;
|
||||||
|
list-style-position: outside;
|
||||||
|
list-style-type: none;
|
||||||
|
-moz-background-clip: border;
|
||||||
|
-moz-background-inline-policy: continuous;
|
||||||
|
-moz-background-origin: padding;
|
||||||
|
background-attachment: scroll;
|
||||||
|
background-color: transparent;
|
||||||
|
background-position: 0em 0em;
|
||||||
|
background-repeat: repeat-y;
|
||||||
|
background-image: none;
|
||||||
|
/* no v-lines */
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
table.fancytree-ext-columnview span.fancytree-node {
|
||||||
|
position: relative;
|
||||||
|
/* allow positioning of embedded spans */
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
table.fancytree-ext-columnview span.fancytree-node.fancytree-expanded {
|
||||||
|
background-color: #CBE8F6;
|
||||||
|
}
|
||||||
|
table.fancytree-ext-columnview .fancytree-has-children span.fancytree-cv-right {
|
||||||
|
position: absolute;
|
||||||
|
right: 3px;
|
||||||
|
}
|
||||||
|
/*------------------------------------------------------------------------------
|
||||||
|
* 'filter' extension
|
||||||
|
*----------------------------------------------------------------------------*/
|
||||||
|
.fancytree-ext-filter-dimm span.fancytree-node span.fancytree-title {
|
||||||
|
color: #333333;
|
||||||
|
font-weight: lighter;
|
||||||
|
}
|
||||||
|
.fancytree-ext-filter-dimm tr.fancytree-submatch span.fancytree-title,
|
||||||
|
.fancytree-ext-filter-dimm span.fancytree-node.fancytree-submatch span.fancytree-title {
|
||||||
|
color: black;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
.fancytree-ext-filter-dimm tr.fancytree-match span.fancytree-title,
|
||||||
|
.fancytree-ext-filter-dimm span.fancytree-node.fancytree-match span.fancytree-title {
|
||||||
|
color: black;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.fancytree-ext-filter-hide tr.fancytree-hide,
|
||||||
|
.fancytree-ext-filter-hide span.fancytree-node.fancytree-hide {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.fancytree-ext-filter-hide tr.fancytree-submatch span.fancytree-title,
|
||||||
|
.fancytree-ext-filter-hide span.fancytree-node.fancytree-submatch span.fancytree-title {
|
||||||
|
color: #333333;
|
||||||
|
font-weight: lighter;
|
||||||
|
}
|
||||||
|
.fancytree-ext-filter-hide tr.fancytree-match span.fancytree-title,
|
||||||
|
.fancytree-ext-filter-hide span.fancytree-node.fancytree-match span.fancytree-title {
|
||||||
|
color: black;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
/* Hide expanders if all child nodes are hidden by filter */
|
||||||
|
.fancytree-ext-filter-hide-expanders tr.fancytree-match span.fancytree-expander,
|
||||||
|
.fancytree-ext-filter-hide-expanders span.fancytree-node.fancytree-match span.fancytree-expander {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
.fancytree-ext-filter-hide-expanders tr.fancytree-submatch span.fancytree-expander,
|
||||||
|
.fancytree-ext-filter-hide-expanders span.fancytree-node.fancytree-submatch span.fancytree-expander {
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
.fancytree-ext-childcounter span.fancytree-icon,
|
||||||
|
.fancytree-ext-filter span.fancytree-icon {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.fancytree-ext-childcounter span.fancytree-childcounter,
|
||||||
|
.fancytree-ext-filter span.fancytree-childcounter {
|
||||||
|
color: #fff;
|
||||||
|
background: #777;
|
||||||
|
border: 1px solid gray;
|
||||||
|
position: absolute;
|
||||||
|
top: -6px;
|
||||||
|
right: -6px;
|
||||||
|
min-width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
line-height: 1;
|
||||||
|
vertical-align: baseline;
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 2px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 9px;
|
||||||
|
}
|
||||||
|
/*------------------------------------------------------------------------------
|
||||||
|
* 'wide' extension
|
||||||
|
*----------------------------------------------------------------------------*/
|
||||||
|
ul.fancytree-ext-wide {
|
||||||
|
position: relative;
|
||||||
|
min-width: 100%;
|
||||||
|
z-index: 2;
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
ul.fancytree-ext-wide span.fancytree-node > span {
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
ul.fancytree-ext-wide span.fancytree-node span.fancytree-title {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1;
|
||||||
|
left: 0px;
|
||||||
|
min-width: 100%;
|
||||||
|
margin-left: 0;
|
||||||
|
margin-right: 0;
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
/*------------------------------------------------------------------------------
|
||||||
|
* 'fixed' extension
|
||||||
|
*----------------------------------------------------------------------------*/
|
||||||
|
.fancytree-ext-fixed-wrapper .fancytree-fixed-hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.fancytree-ext-fixed-wrapper div.scrollBorderBottom {
|
||||||
|
border-bottom: 3px solid rgba(0, 0, 0, 0.75);
|
||||||
|
}
|
||||||
|
.fancytree-ext-fixed-wrapper div.scrollBorderRight {
|
||||||
|
border-right: 3px solid rgba(0, 0, 0, 0.75);
|
||||||
|
}
|
||||||
|
.fancytree-ext-fixed-wrapper div.fancytree-fixed-wrapper-tl {
|
||||||
|
position: absolute;
|
||||||
|
overflow: hidden;
|
||||||
|
z-index: 3;
|
||||||
|
top: 0px;
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
.fancytree-ext-fixed-wrapper div.fancytree-fixed-wrapper-tr {
|
||||||
|
position: absolute;
|
||||||
|
overflow: hidden;
|
||||||
|
z-index: 2;
|
||||||
|
top: 0px;
|
||||||
|
}
|
||||||
|
.fancytree-ext-fixed-wrapper div.fancytree-fixed-wrapper-bl {
|
||||||
|
position: absolute;
|
||||||
|
overflow: hidden;
|
||||||
|
z-index: 2;
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
.fancytree-ext-fixed-wrapper div.fancytree-fixed-wrapper-br {
|
||||||
|
position: absolute;
|
||||||
|
overflow: scroll;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
/*******************************************************************************
|
||||||
|
* Styles specific to this skin.
|
||||||
|
*
|
||||||
|
* This section is automatically generated from the `ui-fancytree.less` template.
|
||||||
|
******************************************************************************/
|
||||||
|
/*******************************************************************************
|
||||||
|
* Plain tree
|
||||||
|
* Modifier classes on <ul> container:
|
||||||
|
* table-hover : Enable a light mouse hover effect
|
||||||
|
* fancytree-colorize-selected: Give selected (checked) rows a color
|
||||||
|
*/
|
||||||
|
ul.fancytree-container ul {
|
||||||
|
padding: 0 0 0 1.5em;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
/* Prevent focus frame */
|
||||||
|
.fancytree-container:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
.fancytree-container .fancytree-active span.fancytree-title input,
|
||||||
|
.fancytree-container.fancytree-colorize-selected .fancytree-selected span.fancytree-title input {
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
.fancytree-container span.fancytree-statusnode-error span.fancytree-expander {
|
||||||
|
color: #d9534f;
|
||||||
|
}
|
||||||
|
/* Helper to allow spinning loader icon with bootstrap */
|
||||||
|
.glyphicon-spin {
|
||||||
|
-webkit-animation: spin 1000ms infinite linear;
|
||||||
|
animation: spin 1000ms infinite linear;
|
||||||
|
}
|
||||||
|
@-webkit-keyframes spin {
|
||||||
|
0% {
|
||||||
|
-webkit-transform: rotate(0deg);
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
-webkit-transform: rotate(359deg);
|
||||||
|
transform: rotate(359deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes spin {
|
||||||
|
0% {
|
||||||
|
-webkit-transform: rotate(0deg);
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
-webkit-transform: rotate(359deg);
|
||||||
|
transform: rotate(359deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
div.fancytree-drag-helper.fancytree-drop-reject,
|
||||||
|
div.fancytree-drag-helper.fancytree-drop-reject span.fancytree-title {
|
||||||
|
color: #d9534f;
|
||||||
|
}
|
||||||
|
span.fancytree-node.fancytree-drag-source {
|
||||||
|
background-color: #5bc0de !important;
|
||||||
|
}
|
||||||
|
span.fancytree-node.fancytree-drop-target.fancytree-drop-reject span.fancytree.title {
|
||||||
|
background-color: #d9534f !important;
|
||||||
|
}
|
||||||
|
span.fancytree-expander {
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
.fancytree-expanded span.fancytree-expander {
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
span.fancytree-node span.fancytree-expander:hover {
|
||||||
|
color: cyan;
|
||||||
|
}
|
||||||
|
.fancytree-plain.fancytree-colorize-selected span.fancytree-node.fancytree-selected,
|
||||||
|
.fancytree-plain.fancytree-colorize-selected span.fancytree-node.fancytree-selected span.fancytree-title {
|
||||||
|
background-color: #80c780;
|
||||||
|
border-color: #80c780;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.fancytree-plain.fancytree-colorize-selected span.fancytree-node.fancytree-selected:hover span.fancytree-title {
|
||||||
|
background-color: #6ec06e;
|
||||||
|
}
|
||||||
|
.fancytree-plain.fancytree-colorize-selected span.fancytree-node.fancytree-active.fancytree-selected span.fancytree-title {
|
||||||
|
color: #80c780;
|
||||||
|
}
|
||||||
|
.fancytree-plain.fancytree-colorize-selected.fancytree-treefocus span.fancytree-title:hover {
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
}
|
||||||
|
.fancytree-plain.fancytree-colorize-selected.fancytree-treefocus span.fancytree-node.fancytree-selected span.fancytree-title {
|
||||||
|
background-color: #5cb85c;
|
||||||
|
}
|
||||||
|
.fancytree-plain.fancytree-colorize-selected.fancytree-treefocus span.fancytree-node.fancytree-selected:hover span.fancytree-title {
|
||||||
|
background-color: #4cae4c;
|
||||||
|
}
|
||||||
|
.fancytree-plain.fancytree-colorize-selected.fancytree-treefocus span.fancytree-node.fancytree-active.fancytree-selected span.fancytree-title {
|
||||||
|
color: #5cb85c;
|
||||||
|
}
|
||||||
|
.fancytree-plain.fancytree-container span.fancytree-node {
|
||||||
|
margin-top: 2px;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
}
|
||||||
|
.fancytree-plain.fancytree-container span.fancytree-title {
|
||||||
|
border: 1px solid transparent;
|
||||||
|
border-radius: 3px;
|
||||||
|
outline-radius: 3px;
|
||||||
|
}
|
||||||
|
.fancytree-plain.fancytree-container span.fancytree-title:hover {
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
}
|
||||||
|
.fancytree-plain.fancytree-container span.fancytree-node.fancytree-active span.fancytree-title {
|
||||||
|
background-color: #5094ce;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.fancytree-plain.fancytree-container span.fancytree-node.fancytree-active:hover span.fancytree-title {
|
||||||
|
background-color: #3c87c8;
|
||||||
|
}
|
||||||
|
.fancytree-plain.fancytree-container.fancytree-ext-wide span.fancytree-node.fancytree-active {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.fancytree-plain.fancytree-container.fancytree-treefocus span.fancytree-node.fancytree-focused span.fancytree-title {
|
||||||
|
border-color: #337ab7;
|
||||||
|
}
|
||||||
|
.fancytree-plain.fancytree-container.fancytree-treefocus span.fancytree-node.fancytree-active span.fancytree-title {
|
||||||
|
background-color: #337ab7;
|
||||||
|
border-color: #337ab7;
|
||||||
|
}
|
||||||
|
.fancytree-plain.fancytree-container.fancytree-treefocus span.fancytree-node.fancytree-active:hover span.fancytree-title {
|
||||||
|
background-color: #2e6da4;
|
||||||
|
}
|
||||||
|
/*******************************************************************************
|
||||||
|
* 'table' extension
|
||||||
|
* Modifier classes on <table>:
|
||||||
|
* table-hover : Enable a light mouse hover effect
|
||||||
|
* fancytree-colorize-selected: Give selected (checked) rows a color
|
||||||
|
*/
|
||||||
|
table.fancytree-ext-table > tbody > tr > td span.fancytree-title {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
table.fancytree-ext-table.fancytree-colorize-selected > tbody > tr.fancytree-selected > td {
|
||||||
|
background-color: #80c780;
|
||||||
|
}
|
||||||
|
table.fancytree-ext-table.fancytree-colorize-selected > tbody > tr.fancytree-selected > td,
|
||||||
|
table.fancytree-ext-table.fancytree-colorize-selected > tbody > tr.fancytree-selected > td span.fancytree-title {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
table.fancytree-ext-table.fancytree-colorize-selected.fancytree-treefocus > tbody > tr.fancytree-selected > td {
|
||||||
|
background-color: #5cb85c;
|
||||||
|
}
|
||||||
|
table.fancytree-ext-table.fancytree-colorize-selected.table-hover > tbody > tr.fancytree-selected:hover > td {
|
||||||
|
background-color: #6ec06e;
|
||||||
|
}
|
||||||
|
table.fancytree-ext-table.fancytree-colorize-selected.fancytree-treefocus.table-hover > tbody > tr.fancytree-selected:hover > td {
|
||||||
|
background-color: #4cae4c;
|
||||||
|
}
|
||||||
|
table.fancytree-ext-table.fancytree-colorize-selected.fancytree-treefocus.table-hover > tbody > tr.fancytree-selected.fancytree-active:hover > td,
|
||||||
|
table.fancytree-ext-table.fancytree-colorize-selected.table-hover > tbody > tr.fancytree-selected.fancytree-active:hover > td {
|
||||||
|
background-color: #2e6da4;
|
||||||
|
}
|
||||||
|
table.fancytree-ext-table.fancytree-colorize-selected > tbody > tr.fancytree-active.fancytree-selected {
|
||||||
|
outline-width: 2px;
|
||||||
|
outline-offset: -2px;
|
||||||
|
outline-style: solid;
|
||||||
|
outline-color: #80c780;
|
||||||
|
}
|
||||||
|
table.fancytree-ext-table.fancytree-container > tbody > tr.fancytree-active > td {
|
||||||
|
background-color: #5094ce;
|
||||||
|
}
|
||||||
|
table.fancytree-ext-table.fancytree-container > tbody > tr.fancytree-active > td,
|
||||||
|
table.fancytree-ext-table.fancytree-container > tbody > tr.fancytree-active > td span.fancytree-title {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
table.fancytree-ext-table.fancytree-treefocus.fancytree-container > tbody > tr.fancytree-focused span.fancytree-title {
|
||||||
|
outline: 1px dotted #000;
|
||||||
|
}
|
||||||
|
table.fancytree-ext-table.fancytree-treefocus.fancytree-container > tbody > tr.fancytree-active > td {
|
||||||
|
background-color: #337ab7;
|
||||||
|
}
|
||||||
|
table.fancytree-ext-table.fancytree-treefocus.fancytree-container.table-hover > tbody > tr.fancytree-active:hover > td {
|
||||||
|
background-color: #2e6da4;
|
||||||
|
}
|
||||||
|
|
@ -37,7 +37,7 @@ class Form extends Component {
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
stateOwner: PropTypes.object.isRequired,
|
stateOwner: PropTypes.object.isRequired,
|
||||||
onSubmitAsync: PropTypes.func,
|
onSubmitAsync: PropTypes.func,
|
||||||
inline: PropTypes.bool
|
format: PropTypes.string
|
||||||
}
|
}
|
||||||
|
|
||||||
static childContextTypes = {
|
static childContextTypes = {
|
||||||
|
|
@ -70,6 +70,13 @@ class Form extends Component {
|
||||||
const statusMessageText = owner.getFormStatusMessageText();
|
const statusMessageText = owner.getFormStatusMessageText();
|
||||||
const statusMessageSeverity = owner.getFormStatusMessageSeverity();
|
const statusMessageSeverity = owner.getFormStatusMessageSeverity();
|
||||||
|
|
||||||
|
let formClass = 'form-horizontal';
|
||||||
|
if (props.format === 'wide') {
|
||||||
|
formClass = '';
|
||||||
|
} else if (props.format === 'inline') {
|
||||||
|
formClass = 'form-inline';
|
||||||
|
}
|
||||||
|
|
||||||
if (!owner.isFormReady()) {
|
if (!owner.isFormReady()) {
|
||||||
if (owner.isFormWithLoadingNotice()) {
|
if (owner.isFormWithLoadingNotice()) {
|
||||||
return <p className={`alert alert-info mt-form-status`} role="alert">{t('Loading ...')}</p>
|
return <p className={`alert alert-info mt-form-status`} role="alert">{t('Loading ...')}</p>
|
||||||
|
|
@ -78,11 +85,15 @@ class Form extends Component {
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
return (
|
return (
|
||||||
<form className={props.inline ? 'form-inline' : 'form-horizontal'} onSubmit={::this.onSubmit}>
|
<form className={formClass} onSubmit={::this.onSubmit}>
|
||||||
<fieldset disabled={owner.isFormDisabled()}>
|
<fieldset disabled={owner.isFormDisabled()}>
|
||||||
{props.children}
|
{props.children}
|
||||||
</fieldset>
|
</fieldset>
|
||||||
{statusMessageText && <p className={`col-sm-10 col-sm-offset-2 alert alert-${statusMessageSeverity} mt-form-status`} role="alert">{statusMessageText}</p>}
|
{statusMessageText &&
|
||||||
|
<AlignedRow htmlId="form-status-message">
|
||||||
|
<p className={`alert alert-${statusMessageSeverity} mt-form-status`} role="alert">{statusMessageText}</p>
|
||||||
|
</AlignedRow>
|
||||||
|
}
|
||||||
</form>
|
</form>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
@ -106,27 +117,48 @@ class Fieldset extends Component {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function wrapInput(id, htmlId, owner, label, help, input, inline) {
|
function wrapInput(id, htmlId, owner, format, rightContainerClass, label, help, input) {
|
||||||
const className = id ? owner.addFormValidationClass('form-group', id) : 'form-group';
|
const className = id ? owner.addFormValidationClass('form-group', id) : 'form-group';
|
||||||
|
|
||||||
|
let colLeft = '';
|
||||||
|
let colRight = '';
|
||||||
|
let offsetRight = '';
|
||||||
|
|
||||||
|
switch (format) {
|
||||||
|
case 'wide':
|
||||||
|
colLeft = '';
|
||||||
|
colRight = '';
|
||||||
|
offsetRight = '';
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
colLeft = 'col-sm-2';
|
||||||
|
colRight = 'col-sm-10';
|
||||||
|
offsetRight = 'col-sm-offset-2';
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (format === 'inline') {
|
||||||
|
}
|
||||||
|
|
||||||
let helpBlock = null;
|
let helpBlock = null;
|
||||||
if (help) {
|
if (help) {
|
||||||
helpBlock = <div className={'help-block' + (!inline ? ' col-sm-offset-2 col-sm-10' : '')}
|
helpBlock = <div className={`help-block ${colRight} ${offsetRight}`} id={htmlId + '_help'}>{help}</div>;
|
||||||
id={htmlId + '_help'}>{help}</div>;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
let validationBlock = null;
|
let validationBlock = null;
|
||||||
if (id) {
|
if (id) {
|
||||||
const validationMsg = id && owner.getFormValidationMessage(id);
|
const validationMsg = id && owner.getFormValidationMessage(id);
|
||||||
if (validationMsg) {
|
if (validationMsg) {
|
||||||
validationBlock = <div className={'help-block' + (!inline ? ' col-sm-offset-2 col-sm-10' : '')}
|
validationBlock = <div className={`help-block ${colRight} ${offsetRight}`} id={htmlId + '_help_validation'}>{validationMsg}</div>;
|
||||||
id={htmlId + '_help_validation'}>{validationMsg}</div>;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const labelBlock = <label htmlFor={htmlId} className="control-label">{label}</label>;
|
let labelBlock = null;
|
||||||
|
if (label) {
|
||||||
|
labelBlock = <label htmlFor={htmlId} className="control-label">{label}</label>;
|
||||||
|
}
|
||||||
|
|
||||||
if (inline) {
|
if (format === 'inline') {
|
||||||
return (
|
return (
|
||||||
<div className={className} >
|
<div className={className} >
|
||||||
{labelBlock} {input}
|
{labelBlock} {input}
|
||||||
|
|
@ -137,10 +169,10 @@ function wrapInput(id, htmlId, owner, label, help, input, inline) {
|
||||||
} else {
|
} else {
|
||||||
return (
|
return (
|
||||||
<div className={className} >
|
<div className={className} >
|
||||||
<div className="col-sm-2">
|
<div className={colLeft}>
|
||||||
{labelBlock}
|
{labelBlock}
|
||||||
</div>
|
</div>
|
||||||
<div className="col-sm-10">
|
<div className={`${colRight} ${rightContainerClass}`}>
|
||||||
{input}
|
{input}
|
||||||
</div>
|
</div>
|
||||||
{helpBlock}
|
{helpBlock}
|
||||||
|
|
@ -150,30 +182,13 @@ function wrapInput(id, htmlId, owner, label, help, input, inline) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function wrapInputWithText(id, htmlId, owner, containerClass, label, text, help, input) {
|
|
||||||
const helpBlock = help ? <div className="help-block col-sm-offset-2 col-sm-10" id={htmlId + '_help'}>{help}</div> : '';
|
|
||||||
const validationMsg = id && owner.getFormValidationMessage(id);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={id ? owner.addFormValidationClass('form-group', id) : 'form-group'} >
|
|
||||||
<div className="col-sm-2">
|
|
||||||
<label className="control-label">{label}</label>
|
|
||||||
</div>
|
|
||||||
<div className={"col-sm-10 " + containerClass }>
|
|
||||||
<label>{input} {text}</label>
|
|
||||||
</div>
|
|
||||||
{helpBlock}
|
|
||||||
{id && validationMsg && <div className="help-block col-sm-offset-2 col-sm-10" id={htmlId + '_help_validation'}>{validationMsg}</div>}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
class StaticField extends Component {
|
class StaticField extends Component {
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
id: PropTypes.string.isRequired,
|
id: PropTypes.string.isRequired,
|
||||||
label: PropTypes.string.isRequired,
|
label: PropTypes.string.isRequired,
|
||||||
help: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
|
help: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
|
||||||
className: PropTypes.string
|
className: PropTypes.string,
|
||||||
|
format: PropTypes.string
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
|
@ -187,7 +202,7 @@ class StaticField extends Component {
|
||||||
className += ' ' + props.className;
|
className += ' ' + props.className;
|
||||||
}
|
}
|
||||||
|
|
||||||
return wrapInput(null, htmlId, owner, props.label, props.help,
|
return wrapInput(null, htmlId, owner, props.format, '', props.label, props.help,
|
||||||
<div id={htmlId} className={className} aria-describedby={htmlId + '_help'}>{props.children}</div>
|
<div id={htmlId} className={className} aria-describedby={htmlId + '_help'}>{props.children}</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
@ -199,7 +214,8 @@ class InputField extends Component {
|
||||||
label: PropTypes.string.isRequired,
|
label: PropTypes.string.isRequired,
|
||||||
placeholder: PropTypes.string,
|
placeholder: PropTypes.string,
|
||||||
type: PropTypes.string,
|
type: PropTypes.string,
|
||||||
help: PropTypes.oneOfType([PropTypes.string, PropTypes.object])
|
help: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
|
||||||
|
format: PropTypes.string
|
||||||
}
|
}
|
||||||
|
|
||||||
static defaultProps = {
|
static defaultProps = {
|
||||||
|
|
@ -221,7 +237,7 @@ class InputField extends Component {
|
||||||
type = 'password';
|
type = 'password';
|
||||||
}
|
}
|
||||||
|
|
||||||
return wrapInput(id, htmlId, owner, props.label, props.help,
|
return wrapInput(id, htmlId, owner, props.format, '', props.label, props.help,
|
||||||
<input type={type} value={owner.getFormValue(id)} placeholder={props.placeholder} id={htmlId} className="form-control" aria-describedby={htmlId + '_help'} onChange={evt => owner.updateFormValue(id, evt.target.value)}/>
|
<input type={type} value={owner.getFormValue(id)} placeholder={props.placeholder} id={htmlId} className="form-control" aria-describedby={htmlId + '_help'} onChange={evt => owner.updateFormValue(id, evt.target.value)}/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
@ -232,7 +248,8 @@ class CheckBox extends Component {
|
||||||
id: PropTypes.string.isRequired,
|
id: PropTypes.string.isRequired,
|
||||||
text: PropTypes.string.isRequired,
|
text: PropTypes.string.isRequired,
|
||||||
label: PropTypes.string,
|
label: PropTypes.string,
|
||||||
help: PropTypes.oneOfType([PropTypes.string, PropTypes.object])
|
help: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
|
||||||
|
format: PropTypes.string
|
||||||
}
|
}
|
||||||
|
|
||||||
static contextTypes = {
|
static contextTypes = {
|
||||||
|
|
@ -245,8 +262,11 @@ class CheckBox extends Component {
|
||||||
const id = this.props.id;
|
const id = this.props.id;
|
||||||
const htmlId = 'form_' + id;
|
const htmlId = 'form_' + id;
|
||||||
|
|
||||||
return wrapInputWithText(id, htmlId, owner, 'checkbox', props.label, props.text, props.help,
|
return wrapInput(id, htmlId, owner, props.format, 'checkbox', props.label, props.help,
|
||||||
<input type="checkbox" checked={owner.getFormValue(id)} id={htmlId} aria-describedby={htmlId + '_help'} onChange={evt => owner.updateFormValue(id, !owner.getFormValue(id))}/>
|
<label>
|
||||||
|
<input type="checkbox" checked={owner.getFormValue(id)} id={htmlId} aria-describedby={htmlId + '_help'} onChange={evt => owner.updateFormValue(id, !owner.getFormValue(id))}/>
|
||||||
|
{props.text}
|
||||||
|
</label>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -255,7 +275,8 @@ class TextArea extends Component {
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
id: PropTypes.string.isRequired,
|
id: PropTypes.string.isRequired,
|
||||||
label: PropTypes.string.isRequired,
|
label: PropTypes.string.isRequired,
|
||||||
help: PropTypes.oneOfType([PropTypes.string, PropTypes.object])
|
help: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
|
||||||
|
format: PropTypes.string
|
||||||
}
|
}
|
||||||
|
|
||||||
static contextTypes = {
|
static contextTypes = {
|
||||||
|
|
@ -268,7 +289,7 @@ class TextArea extends Component {
|
||||||
const id = this.props.id;
|
const id = this.props.id;
|
||||||
const htmlId = 'form_' + id;
|
const htmlId = 'form_' + id;
|
||||||
|
|
||||||
return wrapInput(id, htmlId, owner, props.label, props.help,
|
return wrapInput(id, htmlId, owner, props.format, '', props.label, props.help,
|
||||||
<textarea id={htmlId} value={owner.getFormValue(id)} className="form-control" aria-describedby={htmlId + '_help'} onChange={evt => owner.updateFormValue(id, evt.target.value)}></textarea>
|
<textarea id={htmlId} value={owner.getFormValue(id)} className="form-control" aria-describedby={htmlId + '_help'} onChange={evt => owner.updateFormValue(id, evt.target.value)}></textarea>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
@ -282,7 +303,7 @@ class Dropdown extends Component {
|
||||||
options: PropTypes.array,
|
options: PropTypes.array,
|
||||||
optGroups: PropTypes.array,
|
optGroups: PropTypes.array,
|
||||||
className: PropTypes.string,
|
className: PropTypes.string,
|
||||||
inline: PropTypes.bool
|
format: PropTypes.string
|
||||||
}
|
}
|
||||||
|
|
||||||
static contextTypes = {
|
static contextTypes = {
|
||||||
|
|
@ -312,11 +333,10 @@ class Dropdown extends Component {
|
||||||
className += ' ' + props.className;
|
className += ' ' + props.className;
|
||||||
}
|
}
|
||||||
|
|
||||||
return wrapInput(id, htmlId, owner, props.label, props.help,
|
return wrapInput(id, htmlId, owner, props.format, '', props.label, props.help,
|
||||||
<select id={htmlId} className={className} aria-describedby={htmlId + '_help'} value={owner.getFormValue(id)} onChange={evt => owner.updateFormValue(id, evt.target.value)}>
|
<select id={htmlId} className={className} aria-describedby={htmlId + '_help'} value={owner.getFormValue(id)} onChange={evt => owner.updateFormValue(id, evt.target.value)}>
|
||||||
{options}
|
{options}
|
||||||
</select>,
|
</select>
|
||||||
props.inline
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -326,7 +346,12 @@ class AlignedRow extends Component {
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
className: PropTypes.string,
|
className: PropTypes.string,
|
||||||
label: PropTypes.string,
|
label: PropTypes.string,
|
||||||
htmlId: PropTypes.string
|
htmlId: PropTypes.string,
|
||||||
|
format: PropTypes.string
|
||||||
|
}
|
||||||
|
|
||||||
|
static contextTypes = {
|
||||||
|
formStateOwner: PropTypes.object.isRequired
|
||||||
}
|
}
|
||||||
|
|
||||||
static defaultProps = {
|
static defaultProps = {
|
||||||
|
|
@ -334,33 +359,28 @@ class AlignedRow extends Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
if (this.props.label) {
|
const props = this.props;
|
||||||
return (
|
const owner = this.context.formStateOwner;
|
||||||
<div className="form-group">
|
|
||||||
<label htmlFor={this.props.htmlId} className="col-sm-2 control-label">{this.props.label}</label>
|
|
||||||
<div className={"col-sm-10 " + this.props.className} id={this.props.htmlId}>
|
|
||||||
{this.props.children}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
} else {
|
return wrapInput(null, props.htmlId, owner, props.format, props.className, props.label, null, this.props.children);
|
||||||
return (
|
|
||||||
<div className="form-group">
|
|
||||||
<div className={"col-sm-10 col-sm-offset-2 " + this.props.className} id={this.props.htmlId}>
|
|
||||||
{this.props.children}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
class ButtonRow extends Component {
|
class ButtonRow extends Component {
|
||||||
|
static propTypes = {
|
||||||
|
className: PropTypes.string,
|
||||||
|
format: PropTypes.string
|
||||||
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
let className = 'mt-button-row';
|
||||||
|
if (this.props.className) {
|
||||||
|
className += ' ' + this.props.className;
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<AlignedRow className="mt-button-row">{this.props.children}</AlignedRow>
|
<AlignedRow className={className} format={this.props.format}>{this.props.children}</AlignedRow>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -423,7 +443,8 @@ class TreeTableSelect extends Component {
|
||||||
label: PropTypes.string.isRequired,
|
label: PropTypes.string.isRequired,
|
||||||
dataUrl: PropTypes.string,
|
dataUrl: PropTypes.string,
|
||||||
data: PropTypes.array,
|
data: PropTypes.array,
|
||||||
help: PropTypes.oneOfType([PropTypes.string, PropTypes.object])
|
help: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
|
||||||
|
format: PropTypes.string
|
||||||
}
|
}
|
||||||
|
|
||||||
static contextTypes = {
|
static contextTypes = {
|
||||||
|
|
@ -441,7 +462,7 @@ class TreeTableSelect extends Component {
|
||||||
const id = this.props.id;
|
const id = this.props.id;
|
||||||
const htmlId = 'form_' + id;
|
const htmlId = 'form_' + id;
|
||||||
|
|
||||||
return wrapInput(id, htmlId, owner, props.label, props.help,
|
return wrapInput(id, htmlId, owner, props.format, '', props.label, props.help,
|
||||||
<TreeTable data={props.data} dataUrl={props.dataUrl} selectMode={TreeSelectMode.SINGLE} selection={owner.getFormValue(id)} onSelectionChangedAsync={::this.onSelectionChangedAsync}/>
|
<TreeTable data={props.data} dataUrl={props.dataUrl} selectMode={TreeSelectMode.SINGLE} selection={owner.getFormValue(id)} onSelectionChangedAsync={::this.onSelectionChangedAsync}/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
@ -471,7 +492,8 @@ class TableSelect extends Component {
|
||||||
|
|
||||||
id: PropTypes.string.isRequired,
|
id: PropTypes.string.isRequired,
|
||||||
label: PropTypes.string.isRequired,
|
label: PropTypes.string.isRequired,
|
||||||
help: PropTypes.oneOfType([PropTypes.string, PropTypes.object])
|
help: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
|
||||||
|
format: PropTypes.string
|
||||||
}
|
}
|
||||||
|
|
||||||
static defaultProps = {
|
static defaultProps = {
|
||||||
|
|
@ -530,7 +552,7 @@ class TableSelect extends Component {
|
||||||
const t = props.t;
|
const t = props.t;
|
||||||
|
|
||||||
if (props.dropdown) {
|
if (props.dropdown) {
|
||||||
return wrapInput(id, htmlId, owner, props.label, props.help,
|
return wrapInput(id, htmlId, owner, props.format, '', props.label, props.help,
|
||||||
<div>
|
<div>
|
||||||
<div className="input-group mt-tableselect-dropdown">
|
<div className="input-group mt-tableselect-dropdown">
|
||||||
<input type="text" className="form-control" value={this.state.selectedLabel} readOnly onClick={::this.toggleOpen}/>
|
<input type="text" className="form-control" value={this.state.selectedLabel} readOnly onClick={::this.toggleOpen}/>
|
||||||
|
|
@ -544,7 +566,7 @@ class TableSelect extends Component {
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
return wrapInput(id, htmlId, owner, props.label, props.help,
|
return wrapInput(id, htmlId, owner, props.format, '', props.label, props.help,
|
||||||
<div>
|
<div>
|
||||||
<div>
|
<div>
|
||||||
<Table ref={node => this.table = node} data={props.data} dataUrl={props.dataUrl} columns={props.columns} selectMode={props.selectMode} selectionAsArray={this.props.selectionAsArray} withHeader={props.withHeader} selection={owner.getFormValue(id)} onSelectionChangedAsync={::this.onSelectionChangedAsync}/>
|
<Table ref={node => this.table = node} data={props.data} dataUrl={props.dataUrl} columns={props.columns} selectMode={props.selectMode} selectionAsArray={this.props.selectionAsArray} withHeader={props.withHeader} selection={owner.getFormValue(id)} onSelectionChangedAsync={::this.onSelectionChangedAsync}/>
|
||||||
|
|
@ -570,7 +592,8 @@ class ACEEditor extends Component {
|
||||||
label: PropTypes.string,
|
label: PropTypes.string,
|
||||||
help: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
|
help: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
|
||||||
height: PropTypes.string,
|
height: PropTypes.string,
|
||||||
mode: PropTypes.string
|
mode: PropTypes.string,
|
||||||
|
format: PropTypes.string
|
||||||
}
|
}
|
||||||
|
|
||||||
static contextTypes = {
|
static contextTypes = {
|
||||||
|
|
@ -583,7 +606,7 @@ class ACEEditor extends Component {
|
||||||
const id = this.props.id;
|
const id = this.props.id;
|
||||||
const htmlId = 'form_' + id;
|
const htmlId = 'form_' + id;
|
||||||
|
|
||||||
return wrapInput(id, htmlId, owner, props.label, props.help,
|
return wrapInput(id, htmlId, owner, props.format, '', props.label, props.help,
|
||||||
<AceEditor
|
<AceEditor
|
||||||
id={htmlId}
|
id={htmlId}
|
||||||
mode={props.mode}
|
mode={props.mode}
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,50 @@
|
||||||
|
.mt-treetable-container .fancytree-container span.fancytree-node.mt-tree-end-drop {
|
||||||
|
height: 10px;
|
||||||
|
margin-top: 0px;
|
||||||
|
margin-bottom: -10px;
|
||||||
|
overflow: hidden;
|
||||||
|
min-height: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mt-treetable-container .fancytree-container span.fancytree-node.mt-tree-end-drop span.fancytree-title {
|
||||||
|
width: 15px;
|
||||||
|
margin-left: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mt-treetable-container .fancytree-container span.fancytree-node.mt-tree-end-drop.mt-tree-end-drop-wide span.fancytree-title {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mt-treetable-container .fancytree-container {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mt-treetable-container span.fancytree-expander {
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
.mt-treetable-container.mt-treetable-inactivable>table.fancytree-ext-table.fancytree-container>tbody>tr.fancytree-active>td,
|
.mt-treetable-container.mt-treetable-inactivable>table.fancytree-ext-table.fancytree-container>tbody>tr.fancytree-active>td,
|
||||||
.mt-treetable-container.mt-treetable-inactivable>table.fancytree-ext-table.fancytree-container>tbody>tr.fancytree-active:hover>td {
|
.mt-treetable-container.mt-treetable-inactivable>table.fancytree-ext-table.fancytree-container>tbody>tr.fancytree-active:hover>td,
|
||||||
|
.mt-treetable-container.mt-treetable-inactivable .fancytree-container span.fancytree-node.fancytree-active span.fancytree-title,
|
||||||
|
.mt-treetable-container.mt-treetable-inactivable .fancytree-container span.fancytree-node.fancytree-active span.fancytree-title:hover,
|
||||||
|
.mt-treetable-container.mt-treetable-inactivable .fancytree-container span.fancytree-node.fancytree-active:hover span.fancytree-title,
|
||||||
|
.mt-treetable-container.mt-treetable-inactivable .fancytree-container span.fancytree-node span.fancytree-title:hover {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mt-treetable-container.mt-treetable-inactivable>table.fancytree-ext-table.fancytree-container>tbody>tr.fancytree-active>td span.fancytree-title {
|
.mt-treetable-container.mt-treetable-inactivable .fancytree-container span.fancytree-node span.fancytree-title {
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mt-treetable-container.mt-treetable-inactivable .fancytree-container span.fancytree-node.fancytree-active span.fancytree-title,
|
||||||
|
.mt-treetable-container.mt-treetable-inactivable .fancytree-container span.fancytree-node.fancytree-active span.fancytree-title:hover {
|
||||||
|
border-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mt-treetable-container.mt-treetable-inactivable>table.fancytree-ext-table.fancytree-container>tbody>tr.fancytree-active>td span.fancytree-title,
|
||||||
|
.mt-treetable-container.mt-treetable-inactivable>table.fancytree-ext-table.fancytree-container>tbody>tr.fancytree-active>td span.fancytree-expander,
|
||||||
|
.mt-treetable-container.mt-treetable-inactivable .fancytree-container span.fancytree-node.fancytree-active span.fancytree-title {
|
||||||
|
outline: 0px none;
|
||||||
color: #333333;
|
color: #333333;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -28,6 +69,33 @@
|
||||||
min-width: 150px;
|
min-width: 150px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.mt-treetable-container span.fancytree-node.fancytree-drag-source {
|
||||||
|
background-color: transparent !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mt-treetable-container #fancytree-drop-marker {
|
||||||
|
background-image: url("../../public/fancytree/skin-bootstrap/icons.gif");
|
||||||
|
height: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mt-treetable-container #fancytree-drop-marker.fancytree-drop-over {
|
||||||
|
background-position: 0px -130px;
|
||||||
|
width: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mt-treetable-container #fancytree-drop-marker.fancytree-drop-after, .mt-treetable-container #fancytree-drop-marker.fancytree-drop-before {
|
||||||
|
background-position: 0px -145px;
|
||||||
|
width: 64px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mt-treetable-container span.fancytree-node.fancytree-drop-accept fancytree-expander {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.form-group .mt-treetable-container {
|
.form-group .mt-treetable-container {
|
||||||
border: 1px solid #cccccc;
|
border: 1px solid #cccccc;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
|
|
@ -49,3 +117,4 @@
|
||||||
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
|
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
|
||||||
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
|
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -69,7 +69,10 @@ class TreeTable extends Component {
|
||||||
onSelectionChangedAsync: PropTypes.func,
|
onSelectionChangedAsync: PropTypes.func,
|
||||||
actions: PropTypes.func,
|
actions: PropTypes.func,
|
||||||
withHeader: PropTypes.bool,
|
withHeader: PropTypes.bool,
|
||||||
withDescription: PropTypes.bool
|
withDescription: PropTypes.bool,
|
||||||
|
noTable: PropTypes.bool,
|
||||||
|
withDnd: PropTypes.bool,
|
||||||
|
withIcons: PropTypes.bool
|
||||||
}
|
}
|
||||||
|
|
||||||
componentWillReceiveProps(nextProps) {
|
componentWillReceiveProps(nextProps) {
|
||||||
|
|
@ -106,17 +109,6 @@ class TreeTable extends Component {
|
||||||
this.loadData(this.props.dataUrl);
|
this.loadData(this.props.dataUrl);
|
||||||
}
|
}
|
||||||
|
|
||||||
const glyphOpts = {
|
|
||||||
map: {
|
|
||||||
expanderClosed: 'glyphicon glyphicon-menu-right',
|
|
||||||
expanderLazy: 'glyphicon glyphicon-menu-right', // glyphicon-plus-sign
|
|
||||||
expanderOpen: 'glyphicon glyphicon-menu-down', // glyphicon-collapse-down
|
|
||||||
checkbox: 'glyphicon glyphicon-unchecked',
|
|
||||||
checkboxSelected: 'glyphicon glyphicon-check',
|
|
||||||
checkboxUnknown: 'glyphicon glyphicon-share',
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
let createNodeFn;
|
let createNodeFn;
|
||||||
createNodeFn = (event, data) => {
|
createNodeFn = (event, data) => {
|
||||||
const node = data.node;
|
const node = data.node;
|
||||||
|
|
@ -148,22 +140,70 @@ class TreeTable extends Component {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
this.tree = jQuery(this.domTable).fancytree({
|
const treeOpts = {
|
||||||
extensions: ['glyph', 'table'],
|
extensions: ['glyph'],
|
||||||
glyph: glyphOpts,
|
glyph: {
|
||||||
|
map: {
|
||||||
|
expanderClosed: 'glyphicon glyphicon-menu-right',
|
||||||
|
expanderLazy: 'glyphicon glyphicon-menu-right', // glyphicon-plus-sign
|
||||||
|
expanderOpen: 'glyphicon glyphicon-menu-down', // glyphicon-collapse-down
|
||||||
|
checkbox: 'glyphicon glyphicon-unchecked',
|
||||||
|
checkboxSelected: 'glyphicon glyphicon-check',
|
||||||
|
checkboxUnknown: 'glyphicon glyphicon-share',
|
||||||
|
|
||||||
|
folder: 'glyphicon glyphicon-folder-close',
|
||||||
|
folderOpen: 'glyphicon glyphicon-folder-open',
|
||||||
|
doc: 'glyphicon glyphicon-file',
|
||||||
|
docOpen: 'glyphicon glyphicon-file'
|
||||||
|
}
|
||||||
|
},
|
||||||
selectMode: (this.selectMode === TreeSelectMode.MULTI ? 2 : 1),
|
selectMode: (this.selectMode === TreeSelectMode.MULTI ? 2 : 1),
|
||||||
icon: false,
|
icon: !!this.props.withIcons,
|
||||||
autoScroll: true,
|
autoScroll: true,
|
||||||
scrollParent: jQuery(this.domTableContainer),
|
scrollParent: jQuery(this.domTableContainer),
|
||||||
source: this.sanitizeTreeData(this.state.treeData),
|
source: this.sanitizeTreeData(this.state.treeData),
|
||||||
table: {
|
toggleEffect: false,
|
||||||
nodeColumnIdx: 0
|
|
||||||
},
|
|
||||||
createNode: createNodeFn,
|
createNode: createNodeFn,
|
||||||
checkbox: this.selectMode === TreeSelectMode.MULTI,
|
checkbox: this.selectMode === TreeSelectMode.MULTI,
|
||||||
activate: (this.selectMode === TreeSelectMode.SINGLE ? ::this.onActivate : null),
|
activate: (this.selectMode === TreeSelectMode.SINGLE ? ::this.onActivate : null),
|
||||||
select: (this.selectMode === TreeSelectMode.MULTI ? ::this.onSelect : null)
|
select: (this.selectMode === TreeSelectMode.MULTI ? ::this.onSelect : null),
|
||||||
}).fancytree("getTree");
|
};
|
||||||
|
|
||||||
|
if (!this.props.noTable) {
|
||||||
|
treeOpts.extensions.push('table');
|
||||||
|
treeOpts.table = {
|
||||||
|
nodeColumnIdx: 0
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.props.withDnd) {
|
||||||
|
treeOpts.extensions.push('dnd');
|
||||||
|
treeOpts.dnd = {
|
||||||
|
autoExpandMS: 400,
|
||||||
|
focusOnClick: true,
|
||||||
|
preventVoidMoves: true,
|
||||||
|
preventRecursiveMoves: true,
|
||||||
|
dropMarkerOffsetX: -46, // -22
|
||||||
|
dropMarkerInsertOffsetX: 0,
|
||||||
|
dragStart: (node, data) => {
|
||||||
|
return node.key !== '__mt-tree-end-drop__';
|
||||||
|
},
|
||||||
|
dragEnter: (node, data) => {
|
||||||
|
if (node.folder) {
|
||||||
|
return ['before', 'over'];
|
||||||
|
} else {
|
||||||
|
return ['before'];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
dragDrop: (node, data) => {
|
||||||
|
console.log(node);
|
||||||
|
console.log(data);
|
||||||
|
data.otherNode.moveTo(node, data.hitMode);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
this.tree = jQuery(this.domTable).fancytree(treeOpts).fancytree("getTree");
|
||||||
|
|
||||||
this.updateSelection();
|
this.updateSelection();
|
||||||
}
|
}
|
||||||
|
|
@ -252,6 +292,10 @@ class TreeTable extends Component {
|
||||||
let containerClass = 'mt-treetable-container';
|
let containerClass = 'mt-treetable-container';
|
||||||
if (this.selectMode === TreeSelectMode.NONE) {
|
if (this.selectMode === TreeSelectMode.NONE) {
|
||||||
containerClass += ' mt-treetable-inactivable';
|
containerClass += ' mt-treetable-inactivable';
|
||||||
|
} else {
|
||||||
|
if (!props.noTable) {
|
||||||
|
containerClass += ' table-hover';
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!this.withHeader) {
|
if (!this.withHeader) {
|
||||||
|
|
@ -260,31 +304,44 @@ class TreeTable extends Component {
|
||||||
|
|
||||||
// FIXME: style={{ height: '100px', overflow: 'auto'}}
|
// FIXME: style={{ height: '100px', overflow: 'auto'}}
|
||||||
|
|
||||||
const container =
|
if (props.noTable) {
|
||||||
<div className={containerClass} ref={(domElem) => { this.domTableContainer = domElem; }} >
|
return (
|
||||||
<table ref={(domElem) => { this.domTable = domElem; }} className="table table-hover table-striped table-condensed">
|
<div className={containerClass} ref={(domElem) => { this.domTableContainer = domElem; }} >
|
||||||
{props.withHeader &&
|
<div ref={(domElem) => { this.domTable = domElem; }}>
|
||||||
<thead>
|
</div>
|
||||||
<tr>
|
</div>
|
||||||
<th className="mt-treetable-title">{t('Name')}</th>
|
);
|
||||||
{withDescription && <th>{t('Description')}</th>}
|
|
||||||
{actions && <th></th>}
|
} else {
|
||||||
</tr>
|
let tableClass = 'table table-striped table-condensed';
|
||||||
</thead>
|
if (this.selectMode !== TreeSelectMode.NONE) {
|
||||||
}
|
tableClass += ' table-hover';
|
||||||
<tbody>
|
}
|
||||||
<tr>
|
|
||||||
<td></td>
|
return (
|
||||||
{withDescription && <td></td>}
|
<div className={containerClass} ref={(domElem) => { this.domTableContainer = domElem; }} >
|
||||||
{actions && <td></td>}
|
<table ref={(domElem) => { this.domTable = domElem; }} className={tableClass}>
|
||||||
</tr>
|
{props.withHeader &&
|
||||||
</tbody>
|
<thead>
|
||||||
</table>
|
<tr>
|
||||||
</div>;
|
<th className="mt-treetable-title">{t('Name')}</th>
|
||||||
|
{withDescription && <th>{t('Description')}</th>}
|
||||||
|
{actions && <th></th>}
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
}
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
{withDescription && <td></td>}
|
||||||
|
{actions && <td></td>}
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
|
||||||
container
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -3,14 +3,14 @@
|
||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import { translate, Trans } from 'react-i18next';
|
import { translate, Trans } from 'react-i18next';
|
||||||
import {requiresAuthenticatedUser, withPageHelpers, Title, NavButton} from '../../lib/page';
|
import {requiresAuthenticatedUser, withPageHelpers, Title, NavButton, Toolbar} from '../../lib/page';
|
||||||
import {
|
import {
|
||||||
withForm, Form, FormSendMethod, InputField, ButtonRow, Button
|
withForm, Form, FormSendMethod, InputField, ButtonRow, Button, Fieldset
|
||||||
} from '../../lib/form';
|
} from '../../lib/form';
|
||||||
import { withErrorHandling, withAsyncErrorHandler } from '../../lib/error-handling';
|
import { withErrorHandling, withAsyncErrorHandler } from '../../lib/error-handling';
|
||||||
import {DeleteModalDialog} from "../../lib/delete";
|
import {DeleteModalDialog} from "../../lib/delete";
|
||||||
import interoperableErrors from '../../../../shared/interoperable-errors';
|
import interoperableErrors from '../../../../shared/interoperable-errors';
|
||||||
import {TreeTable} from "../../lib/tree";
|
import {TreeSelectMode, TreeTable} from "../../lib/tree";
|
||||||
|
|
||||||
@translate()
|
@translate()
|
||||||
@withForm
|
@withForm
|
||||||
|
|
@ -100,57 +100,131 @@ export default class CUD extends Component {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async onRuleSelectionChangedAsync(sel) {
|
||||||
|
this.setState({
|
||||||
|
selectedRule: sel
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const t = this.props.t;
|
const t = this.props.t;
|
||||||
const isEdit = !!this.props.entity;
|
const isEdit = !!this.props.entity;
|
||||||
|
|
||||||
|
const treeEnd = {
|
||||||
|
key: '__mt-tree-end-drop__',
|
||||||
|
icon: false,
|
||||||
|
unselectable: true,
|
||||||
|
extraClasses: 'mt-tree-end-drop',
|
||||||
|
beforeActivate: () => false
|
||||||
|
};
|
||||||
|
|
||||||
|
const treeEndWide = { // This one is used after a non-folder sibling that has no children
|
||||||
|
key: '__mt-tree-end-drop__',
|
||||||
|
icon: false,
|
||||||
|
unselectable: true,
|
||||||
|
extraClasses: 'mt-tree-end-drop mt-tree-end-drop-wide',
|
||||||
|
beforeActivate: () => false
|
||||||
|
}
|
||||||
|
|
||||||
const sampleTreeData = [
|
const sampleTreeData = [
|
||||||
{
|
{
|
||||||
key: 'a',
|
key: 'a',
|
||||||
title: 'A',
|
title: 'A',
|
||||||
expanded: true,
|
expanded: true,
|
||||||
|
folder: true,
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
key: 'aa',
|
key: 'aa',
|
||||||
title: 'AA',
|
title: 'AA',
|
||||||
expanded: true,
|
expanded: true,
|
||||||
|
folder: true,
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
key: 'aaa',
|
key: 'aaa',
|
||||||
title: 'AAA',
|
title: 'AAA',
|
||||||
expanded: true
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: 'aab',
|
key: 'aab',
|
||||||
title: 'AAB',
|
title: 'AAB',
|
||||||
expanded: true
|
},
|
||||||
}
|
{
|
||||||
|
key: 'aab',
|
||||||
|
title: 'AAB',
|
||||||
|
folder: true
|
||||||
|
},
|
||||||
|
treeEnd
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: 'ab',
|
key: 'ab',
|
||||||
title: 'AB',
|
title: 'AB',
|
||||||
expanded: true,
|
expanded: true,
|
||||||
|
folder: true,
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
key: 'aba',
|
key: 'aba',
|
||||||
title: 'ABA',
|
title: 'ABA'
|
||||||
expanded: true
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: 'abb',
|
key: 'abb',
|
||||||
title: 'ABB',
|
title: 'ABB'
|
||||||
expanded: true
|
},
|
||||||
}
|
treeEndWide
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
treeEnd
|
||||||
]
|
]
|
||||||
}
|
},
|
||||||
|
{
|
||||||
|
key: 'b',
|
||||||
|
title: 'B',
|
||||||
|
expanded: true,
|
||||||
|
folder: true,
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
key: 'ba',
|
||||||
|
title: 'BA',
|
||||||
|
expanded: true,
|
||||||
|
folder: true,
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
key: 'baa',
|
||||||
|
title: 'BAA'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'bab',
|
||||||
|
title: 'BAB'
|
||||||
|
},
|
||||||
|
treeEndWide
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'bb',
|
||||||
|
title: 'BB',
|
||||||
|
expanded: true,
|
||||||
|
folder: true,
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
key: 'bba',
|
||||||
|
title: 'BBA'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'bbb',
|
||||||
|
title: 'BBB'
|
||||||
|
},
|
||||||
|
treeEndWide
|
||||||
|
]
|
||||||
|
},
|
||||||
|
treeEnd
|
||||||
|
]
|
||||||
|
},
|
||||||
|
treeEnd
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
{isEdit &&
|
{isEdit &&
|
||||||
<DeleteModalDialog
|
<DeleteModalDialog
|
||||||
|
|
@ -165,17 +239,28 @@ export default class CUD extends Component {
|
||||||
|
|
||||||
<Title>{isEdit ? t('Edit Segment') : t('Create Segment')}</Title>
|
<Title>{isEdit ? t('Edit Segment') : t('Create Segment')}</Title>
|
||||||
|
|
||||||
<Form stateOwner={this} onSubmitAsync={::this.submitHandler}>
|
<Form stateOwner={this} onSubmitAsync={::this.submitHandler} format="wide">
|
||||||
<InputField id="name" label={t('Name')}/>
|
<ButtonRow format="wide" className="pull-right">
|
||||||
|
|
||||||
<ButtonRow>
|
|
||||||
<Button type="submit" className="btn-primary" icon="ok" label={t('Save')}/>
|
<Button type="submit" className="btn-primary" icon="ok" label={t('Save')}/>
|
||||||
{isEdit && <NavButton className="btn-danger" icon="remove" label={t('Delete')} linkTo={`/lists/fields/${this.props.list.id}/${this.props.entity.id}/delete`}/>}
|
{isEdit && <NavButton className="btn-danger" icon="remove" label={t('Delete')} linkTo={`/lists/fields/${this.props.list.id}/${this.props.entity.id}/delete`}/>}
|
||||||
</ButtonRow>
|
</ButtonRow>
|
||||||
|
|
||||||
|
<h3>{t('Segment Options')}</h3>
|
||||||
|
|
||||||
|
<InputField id="name" label={t('Name')} format="wide"/>
|
||||||
|
|
||||||
|
|
||||||
<hr />
|
<hr />
|
||||||
|
|
||||||
<TreeTable data={sampleTreeData} />
|
<div className="row">
|
||||||
|
<div className="col-sm-6">
|
||||||
|
<TreeTable data={sampleTreeData} noTable withIcons withDnd format="wide" selectMode={TreeSelectMode.SINGLE} selection={this.state.selectedRule} onSelectionChangedAsync={::this.onRuleSelectionChangedAsync} />
|
||||||
|
</div>
|
||||||
|
<div className="col-sm-6">
|
||||||
|
<h3>{t('Selected Rule Options')}</h3>
|
||||||
|
<InputField id="name" label={t('Name')} format="wide" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</Form>
|
</Form>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -110,7 +110,7 @@ export default class List extends Component {
|
||||||
|
|
||||||
<div className="well well-sm">
|
<div className="well well-sm">
|
||||||
<Form inline stateOwner={this}>
|
<Form inline stateOwner={this}>
|
||||||
<Dropdown inline className="input-sm" id="segment" label={t('Segment')} options={this.state.segmentOptions}/>
|
<Dropdown format="inline" className="input-sm" id="segment" label={t('Segment')} options={this.state.segmentOptions}/>
|
||||||
</Form>
|
</Form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue