public/mailtrain
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Snapshot of incomplete DnD extension to tree.js.

Browse source 
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 2017-08-16 12:10:00 +02:00
parent 0bfb30817b
commit 6a7dab52eb
8 changed files with 999 additions and 135 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
client/public/fancytree/skin-bootstrap/icons-rtl.gif
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 0 B

After

Width:  |  Height:  |  Size: 5.4 KiB

Before After
Before After

BIN
client/public/fancytree/skin-bootstrap/icons.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 5.4 KiB

630
client/public/fancytree/skin-bootstrap/ui.fancytree.css Normal file
View 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;
}

161
client/src/lib/form.js
View file

@ -37,7 +37,7 @@ class Form extends Component {
static propTypes = {
stateOwner: PropTypes.object.isRequired,
onSubmitAsync: PropTypes.func,
inline: PropTypes.bool
format: PropTypes.string
}
static childContextTypes = {
@ -70,6 +70,13 @@ class Form extends Component {
const statusMessageText = owner.getFormStatusMessageText();
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.isFormWithLoadingNotice()) {
return <p className={`alert alert-info mt-form-status`} role="alert">{t('Loading ...')}</p>
@ -78,11 +85,15 @@ class Form extends Component {
}
} else {
return (
<form className={props.inline ? 'form-inline' : 'form-horizontal'} onSubmit={::this.onSubmit}>
<form className={formClass} onSubmit={::this.onSubmit}>
<fieldset disabled={owner.isFormDisabled()}>
{props.children}
</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>
);
}
@ -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';
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;
if (help) {
helpBlock = <div className={'help-block' + (!inline ? ' col-sm-offset-2 col-sm-10' : '')}
id={htmlId + '_help'}>{help}</div>;
helpBlock = <div className={`help-block ${colRight} ${offsetRight}`} id={htmlId + '_help'}>{help}</div>;
}
let validationBlock = null;
if (id) {
const validationMsg = id && owner.getFormValidationMessage(id);
if (validationMsg) {
validationBlock = <div className={'help-block' + (!inline ? ' col-sm-offset-2 col-sm-10' : '')}
id={htmlId + '_help_validation'}>{validationMsg}</div>;
validationBlock = <div className={`help-block ${colRight} ${offsetRight}`} 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 (
<div className={className} >
{labelBlock} &nbsp; {input}
@ -137,10 +169,10 @@ function wrapInput(id, htmlId, owner, label, help, input, inline) {
} else {
return (
<div className={className} >
<div className="col-sm-2">
<div className={colLeft}>
{labelBlock}
</div>
<div className="col-sm-10">
<div className={`${colRight} ${rightContainerClass}`}>
{input}
</div>
{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 {
static propTypes = {
id: PropTypes.string.isRequired,
label: PropTypes.string.isRequired,
help: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
className: PropTypes.string
className: PropTypes.string,
format: PropTypes.string
}
render() {
@ -187,7 +202,7 @@ class StaticField extends Component {
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>
);
}
@ -199,7 +214,8 @@ class InputField extends Component {
label: PropTypes.string.isRequired,
placeholder: PropTypes.string,
type: PropTypes.string,
help: PropTypes.oneOfType([PropTypes.string, PropTypes.object])
help: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
format: PropTypes.string
}
static defaultProps = {
@ -221,7 +237,7 @@ class InputField extends Component {
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)}/>
);
}
@ -232,7 +248,8 @@ class CheckBox extends Component {
id: PropTypes.string.isRequired,
text: PropTypes.string.isRequired,
label: PropTypes.string,
help: PropTypes.oneOfType([PropTypes.string, PropTypes.object])
help: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
format: PropTypes.string
}
static contextTypes = {
@ -245,8 +262,11 @@ class CheckBox extends Component {
const id = this.props.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,
<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 = {
id: 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 = {
@ -268,7 +289,7 @@ class TextArea extends Component {
const id = this.props.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>
);
}
@ -282,7 +303,7 @@ class Dropdown extends Component {
options: PropTypes.array,
optGroups: PropTypes.array,
className: PropTypes.string,
inline: PropTypes.bool
format: PropTypes.string
}
static contextTypes = {
@ -312,11 +333,10 @@ class Dropdown extends Component {
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)}>
{options}
</select>,
props.inline
</select>
);
}
}
@ -326,7 +346,12 @@ class AlignedRow extends Component {
static propTypes = {
className: PropTypes.string,
label: PropTypes.string,
htmlId: PropTypes.string
htmlId: PropTypes.string,
format: PropTypes.string
}
static contextTypes = {
formStateOwner: PropTypes.object.isRequired
}
static defaultProps = {
@ -334,33 +359,28 @@ class AlignedRow extends Component {
}
render() {
if (this.props.label) {
return (
<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>
);
const props = this.props;
const owner = this.context.formStateOwner;
} else {
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>
);
}
return wrapInput(null, props.htmlId, owner, props.format, props.className, props.label, null, this.props.children);
}
}
class ButtonRow extends Component {
static propTypes = {
className: PropTypes.string,
format: PropTypes.string
}
render() {
let className = 'mt-button-row';
if (this.props.className) {
className += ' ' + this.props.className;
}
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,
dataUrl: PropTypes.string,
data: PropTypes.array,
help: PropTypes.oneOfType([PropTypes.string, PropTypes.object])
help: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
format: PropTypes.string
}
static contextTypes = {
@ -441,7 +462,7 @@ class TreeTableSelect extends Component {
const id = this.props.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}/>
);
}
@ -471,7 +492,8 @@ class TableSelect extends Component {
id: 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 = {
@ -530,7 +552,7 @@ class TableSelect extends Component {
const t = props.t;
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 className="input-group mt-tableselect-dropdown">
<input type="text" className="form-control" value={this.state.selectedLabel} readOnly onClick={::this.toggleOpen}/>
@ -544,7 +566,7 @@ class TableSelect extends Component {
</div>
);
} else {
return wrapInput(id, htmlId, owner, props.label, props.help,
return wrapInput(id, htmlId, owner, props.format, '', props.label, props.help,
<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}/>
@ -570,7 +592,8 @@ class ACEEditor extends Component {
label: PropTypes.string,
help: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
height: PropTypes.string,
mode: PropTypes.string
mode: PropTypes.string,
format: PropTypes.string
}
static contextTypes = {
@ -583,7 +606,7 @@ class ACEEditor extends Component {
const id = this.props.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
id={htmlId}
mode={props.mode}

73
client/src/lib/tree.css
View file

@ -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: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;
}
.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;
}
@ -28,6 +69,33 @@
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 {
border: 1px solid #cccccc;
border-radius: 4px;
@ -49,3 +117,4 @@
-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);
}

111
client/src/lib/tree.js
View file

@ -69,7 +69,10 @@ class TreeTable extends Component {
onSelectionChangedAsync: PropTypes.func,
actions: PropTypes.func,
withHeader: PropTypes.bool,
withDescription: PropTypes.bool
withDescription: PropTypes.bool,
noTable: PropTypes.bool,
withDnd: PropTypes.bool,
withIcons: PropTypes.bool
}
componentWillReceiveProps(nextProps) {
@ -106,17 +109,6 @@ class TreeTable extends Component {
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;
createNodeFn = (event, data) => {
const node = data.node;
@ -148,22 +140,70 @@ class TreeTable extends Component {
}
};
this.tree = jQuery(this.domTable).fancytree({
extensions: ['glyph', 'table'],
glyph: glyphOpts,
const treeOpts = {
extensions: ['glyph'],
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),
icon: false,
icon: !!this.props.withIcons,
autoScroll: true,
scrollParent: jQuery(this.domTableContainer),
source: this.sanitizeTreeData(this.state.treeData),
table: {
nodeColumnIdx: 0
},
toggleEffect: false,
createNode: createNodeFn,
checkbox: this.selectMode === TreeSelectMode.MULTI,
activate: (this.selectMode === TreeSelectMode.SINGLE ? ::this.onActivate : null),
select: (this.selectMode === TreeSelectMode.MULTI ? ::this.onSelect : null)
}).fancytree("getTree");
select: (this.selectMode === TreeSelectMode.MULTI ? ::this.onSelect : null),
};
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();
}
@ -252,6 +292,10 @@ class TreeTable extends Component {
let containerClass = 'mt-treetable-container';
if (this.selectMode === TreeSelectMode.NONE) {
containerClass += ' mt-treetable-inactivable';
} else {
if (!props.noTable) {
containerClass += ' table-hover';
}
}
if (!this.withHeader) {
@ -260,9 +304,23 @@ class TreeTable extends Component {
// FIXME: style={{ height: '100px', overflow: 'auto'}}
const container =
if (props.noTable) {
return (
<div className={containerClass} ref={(domElem) => { this.domTableContainer = domElem; }} >
<table ref={(domElem) => { this.domTable = domElem; }} className="table table-hover table-striped table-condensed">
<div ref={(domElem) => { this.domTable = domElem; }}>
</div>
</div>
);
} else {
let tableClass = 'table table-striped table-condensed';
if (this.selectMode !== TreeSelectMode.NONE) {
tableClass += ' table-hover';
}
return (
<div className={containerClass} ref={(domElem) => { this.domTableContainer = domElem; }} >
<table ref={(domElem) => { this.domTable = domElem; }} className={tableClass}>
{props.withHeader &&
<thead>
<tr>
@ -280,12 +338,11 @@ class TreeTable extends Component {
</tr>
</tbody>
</table>
</div>;
return (
container
</div>
);
}
}
}
export {

119
client/src/lists/segments/CUD.js
View file

@ -3,14 +3,14 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { translate, Trans } from 'react-i18next';
import {requiresAuthenticatedUser, withPageHelpers, Title, NavButton} from '../../lib/page';
import {requiresAuthenticatedUser, withPageHelpers, Title, NavButton, Toolbar} from '../../lib/page';
import {
withForm, Form, FormSendMethod, InputField, ButtonRow, Button
withForm, Form, FormSendMethod, InputField, ButtonRow, Button, Fieldset
} from '../../lib/form';
import { withErrorHandling, withAsyncErrorHandler } from '../../lib/error-handling';
import {DeleteModalDialog} from "../../lib/delete";
import interoperableErrors from '../../../../shared/interoperable-errors';
import {TreeTable} from "../../lib/tree";
import {TreeSelectMode, TreeTable} from "../../lib/tree";
@translate()
@withForm
@ -100,57 +100,131 @@ export default class CUD extends Component {
}
}
async onRuleSelectionChangedAsync(sel) {
this.setState({
selectedRule: sel
});
}
render() {
const t = this.props.t;
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 = [
{
key: 'a',
title: 'A',
expanded: true,
folder: true,
children: [
{
key: 'aa',
title: 'AA',
expanded: true,
folder: true,
children: [
{
key: 'aaa',
title: 'AAA',
expanded: true
},
{
key: 'aab',
title: 'AAB',
expanded: true
}
},
{
key: 'aab',
title: 'AAB',
folder: true
},
treeEnd
]
},
{
key: 'ab',
title: 'AB',
expanded: true,
folder: true,
children: [
{
key: 'aba',
title: 'ABA',
expanded: true
title: 'ABA'
},
{
key: 'abb',
title: 'ABB',
expanded: true
}
title: 'ABB'
},
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 (
<div>
{isEdit &&
<DeleteModalDialog
@ -165,17 +239,28 @@ export default class CUD extends Component {
<Title>{isEdit ? t('Edit Segment') : t('Create Segment')}</Title>
<Form stateOwner={this} onSubmitAsync={::this.submitHandler}>
<InputField id="name" label={t('Name')}/>
<ButtonRow>
<Form stateOwner={this} onSubmitAsync={::this.submitHandler} format="wide">
<ButtonRow format="wide" className="pull-right">
<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`}/>}
</ButtonRow>
<h3>{t('Segment Options')}</h3>
<InputField id="name" label={t('Name')} format="wide"/>
<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>
</div>
);

2
client/src/lists/subscriptions/List.js
View file

@ -110,7 +110,7 @@ export default class List extends Component {
<div className="well well-sm">
<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>
</div>