StateTree facelift

src/mol-plugin-ui/skin/base/components/controls.scss

@@ -218,7 +218,7 @@
 .msp-accent-offset {
     padding-left: 1px;
     margin-left: $control-spacing - 2;
-    border-left: 2px solid $entity-color-Group;
+    border-left: 2px solid $color-accent-orange;
 }
 
 .msp-control-group-wrapper {

src/mol-plugin-ui/skin/base/components/misc.scss

@@ -156,7 +156,7 @@
     position: absolute;
     width: 6px;
     height: 6px;
-    background: $entity-color-Group;
+    background: $color-accent-orange;
     border-radius: 3px;
     right: 6px;
     bottom: 6px;
@@ -216,4 +216,319 @@
     top: $row-height - 2px;
     width: $control-label-width + $control-spacing;
     height: 2px;
-}
+}
+
+.msp-section-header {
+    height: $row-height;
+    line-height: $row-height;
+    margin-top: $control-spacing;
+    margin-bottom: $control-spacing;
+    text-align: right;
+    padding: 0 $control-spacing;
+    font-weight: bold;
+    background: $default-background;
+    overflow: hidden;
+    border-bottom: 1px solid $color-accent-orange; // TODO separate color
+    cursor: default;
+
+    > .msp-icon {
+        display: block;
+        float: left;
+    }
+
+    > small {
+        font-weight: normal;
+    }
+}
+
+.msp-current-header {
+    height: $row-height;
+    line-height: $row-height;
+    margin-bottom: $control-spacing;
+    text-align: center;
+    font-weight: bold;
+    background: $default-background;
+}
+
+.msp-flex-row {
+    margin-top: 1px;
+    background: $default-background;
+
+    display:flex;
+    flex-direction:row;
+    width: inherit;
+    height: $row-height;
+
+    > .msp-flex-item {
+        margin: 0;
+        flex: 1 1 auto;
+        margin-right: 1px;
+        overflow: hidden;
+    }
+
+    > .msp-flex-item:last-child {
+        margin-right: 0;
+    }
+
+    > select, > button {
+        margin: 0;
+        flex: 1 1 auto;
+        margin-right: 1px;
+        height: $row-height;
+
+        // text-align-last: center;
+        // padding: 0 $control-spacing;
+        overflow: hidden;
+    }
+
+    .msp-btn-icon, .msp-btn-icon-small {
+        flex: 0 0 32px;
+        max-width: 32px;
+    }
+
+    > select {
+        background: none;
+
+        > option[value = _] {
+            display: none;
+        }
+    }
+
+    > select:last-child, > button:last-child {
+        margin-right: 0;
+    }
+
+    > button.msp-control-button-label {
+        background: $default-background;
+    }
+}
+
+.msp-state-list {
+    list-style: none;
+    // margin-top: $control-spacing;
+
+    > li {
+        position: relative;
+        overflow: hidden;
+
+        > button:first-child {
+            text-align: left;
+            border-left: $control-spacing solid color-increase-contrast($default-background, 12%) !important;
+        }
+
+        > div {
+            position: absolute;
+            right: 0;
+            top: 0;
+        }
+    }
+}
+
+.msp-tree-row {
+    position: relative;
+    margin-top: 0;
+    margin-bottom: 1px;
+    background: transparent;
+
+    &-current {
+        .msp-btn-tree-label {
+            > span {
+                font-weight: bold;
+            }
+
+            border-radius: 0 !important;
+        }
+
+        .msp-btn-tree-label:hover {
+            color: $font-color;
+        }
+    }
+
+    .msp-btn-tree-label {
+        text-align: left;
+        border-radius: 0 0 0 8px;
+        border-left-width: 4px;
+        border-left-style: solid;
+    }
+
+    .msp-btn-tree-label > small {
+        color: color-lower-contrast($font-color, 20%);
+    }
+}
+
+.msp-tree-updates-wrapper {
+    .msp-control-group-header:last-child {
+        margin-bottom: 1px;
+    }
+}
+
+.msp-viewport-top-left-controls {
+    position: absolute;
+    left: $control-spacing;
+    top: $control-spacing;
+
+    .msp-traj-controls {
+        line-height: $row-height;
+        float: left;
+        margin-right: $control-spacing;
+        background-color: $msp-form-control-background;
+
+        > span {
+            color: $font-color;
+            margin-left: $control-spacing;
+            margin-right: $control-spacing;
+            font-size: 85%;
+            display: inline-block;
+        }
+    }
+
+    .msp-state-snapshot-viewport-controls {
+        line-height: $row-height;
+        float: left;
+        margin-right: $control-spacing;
+
+        > button {
+            background-color: $msp-form-control-background;
+        }
+
+        > select {
+            display: inline-block;
+            width: 200px;
+            margin-right: $control-spacing;
+        }
+    }
+
+    .msp-animation-viewport-controls {
+        line-height: $row-height;
+        float: left;
+        margin-right: $control-spacing;
+        position: relative;
+
+        > div:first-child {
+            position: relative;
+            display: inline-block;
+
+            > button {
+                position: relative;
+            }
+        }
+
+        .msp-animation-viewport-controls-select {
+            width: 290px;
+            position: absolute;
+            left: 0;
+            margin-top: $control-spacing;
+            background: $control-background;
+
+            .msp-control-row:first-child {
+                margin-top: 0;
+            }
+        }
+    }
+}
+
+.msp-param-object-list-item {
+    margin-top: 1px;
+    position: relative;
+    > button {
+        text-align: left;
+        > span {
+            font-weight: bold;
+        }
+    }
+    > div {
+        position: absolute;
+        right: 0;
+        top: 0
+    }
+}
+
+.msp-state-actions {
+    .msp-transform-wrapper:last-child {
+        margin-bottom: 10px;
+    }
+}
+
+.msp-button-row {
+    display:flex;
+    flex-direction:row;
+    height: $row-height;
+    width: inherit;
+
+    > button {
+        margin: 0;
+        flex: 1 1 auto;
+        margin-right: 1px;
+        height: $row-height;
+
+        text-align-last: center;
+        background: none;
+        padding: 0 $control-spacing;
+        overflow: hidden;
+    }
+}
+
+.msp-action-menu-options {
+    .msp-control-row, button, .msp-icon {
+        height: 24px;
+        line-height: 24px;
+    }
+
+    button {
+        text-align: left;
+    }
+
+
+    .msp-action-menu-button {
+        margin-top: 1px;
+        display: flex;
+        .msp-icon {
+            font-size: 80%;
+            margin-right: 6px;
+        }
+    }
+}
+
+.msp-representation-entry {
+    position: relative;
+    > .msp-control-group-header {
+        > .msp-btn {
+            font-weight: bold;
+        }
+        > .msp-icon, > .msp-btn-link {
+            line-height: 24px;
+            height: 24px;
+        }
+    }
+}
+
+@mixin type-class-border($name, $color) {    
+    .msp-type-class-#{$name} {
+        border-left-color: $color;
+    } 
+}
+
+// TypeClass = 'Root' | 'Group' | 'Data' | 'Object' | 'Representation3D' | 'Behavior'
+@include type-class-border('Root', $type-class-Root);
+@include type-class-border('Group', $type-class-Group);
+@include type-class-border('Data', $type-class-Data);
+@include type-class-border('Object', $type-class-Object);
+@include type-class-border('Representation3D', $type-class-Representation3D);
+@include type-class-border('Behavior', $type-class-Behavior);
+
+@mixin accent($name, $color) {    
+    .msp-accent-color-#{$name} {
+        color: $color;
+    } 
+    .msp-accent-bg-#{$name} {
+        background: $color;
+    } 
+}
+
+@include accent('cyan', $color-accent-cyan);
+@include accent('red', $color-accent-red);
+@include accent('gray', $color-accent-gray);
+@include accent('green', $color-accent-green);
+@include accent('purple', $color-accent-purple);
+@include accent('blue', $color-accent-blue);
+@include accent('orange', $color-accent-orange);

src/mol-plugin-ui/skin/base/components/temp.scss

@@ -1,346 +0,0 @@
-.msp-section-header {
-    height: $row-height;
-    line-height: $row-height;
-    margin-top: $control-spacing;
-    margin-bottom: $control-spacing;
-    text-align: right;
-    padding: 0 $control-spacing;
-    font-weight: bold;
-    background: $default-background;
-    overflow: hidden;
-    // border-right: $control-spacing solid $entity-color-Group; // TODO separate color
-    border-bottom: 1px solid $entity-color-Group; // TODO separate color
-    // border-bottom: 1px solid $entity-color-Group; // TODO separate color
-    cursor: default;
-
-    > .msp-icon {
-        display: block;
-        float: left;
-    }
-
-    > small {
-        font-weight: normal;
-    }
-}
-
-.msp-current-header {
-    height: $row-height;
-    line-height: $row-height;
-    margin-bottom: $control-spacing;
-    text-align: center;
-    font-weight: bold;
-    background: $default-background;
-}
-
-.msp-flex-row {
-    margin-top: 1px;
-    background: $default-background;
-
-    display:flex;
-    flex-direction:row;
-    width: inherit;
-    height: $row-height;
-
-    > .msp-flex-item {
-        margin: 0;
-        flex: 1 1 auto;
-        margin-right: 1px;
-        overflow: hidden;
-    }
-
-    > .msp-flex-item:last-child {
-        margin-right: 0;
-    }
-
-    > select, > button {
-        margin: 0;
-        flex: 1 1 auto;
-        margin-right: 1px;
-        height: $row-height;
-
-        // text-align-last: center;
-        // padding: 0 $control-spacing;
-        overflow: hidden;
-    }
-
-    .msp-btn-icon, .msp-btn-icon-small {
-        flex: 0 0 32px;
-        max-width: 32px;
-    }
-
-    > select {
-        background: none;
-
-        > option[value = _] {
-            display: none;
-        }
-    }
-
-    > select:last-child, > button:last-child {
-        margin-right: 0;
-    }
-
-    > button.msp-control-button-label {
-        background: $default-background;
-    }
-}
-
-.msp-state-list {
-    list-style: none;
-    // margin-top: $control-spacing;
-
-    > li {
-        position: relative;
-        overflow: hidden;
-
-        > button:first-child {
-            text-align: left;
-            border-left: $control-spacing solid color-increase-contrast($default-background, 12%) !important;
-        }
-
-        > div {
-            position: absolute;
-            right: 0;
-            top: 0;
-        }
-    }
-
-    // button {
-    //     margin-bottom: 1px;
-    //     text-align: left;
-    // }
-}
-
-.msp-tree-row {
-    position: relative;
-    height: $row-height;
-    line-height: $row-height;
-    background: color-lower-contrast($control-background, 4%);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    margin-bottom: 1px;
-    padding-left: $row-height;
-    padding-right: 2 * $row-height + $control-spacing;
-    border-left: 1px solid $entity-color-Group; // TODO custom color
-    // border-bottom-left-radius: $control-spacing;
-
-    &-current {
-        // background: $control-background;
-
-        .msp-btn-tree-label {
-            > span {
-                font-weight: bold;
-            }
-        }
-
-        .msp-btn-tree-label:hover {
-            color: $font-color;
-        }
-    }
-
-    .msp-btn-tree-label {
-        display: block;
-        overflow: hidden;
-        border: none;
-        padding: 0;
-        width: 100%;
-        text-align: left;
-    }
-
-    .msp-btn-tree-label > small {
-        color: $font-color;
-    }
-}
-
-.msp-tree-remove-button {
-    position: absolute;
-    right: $row-height;
-    top: 0;
-    width: $row-height;
-    font-size: 80%;
-    color: color-lower-contrast($font-color, 24%);
-}
-
-.msp-tree-toggle-exp-button {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: $row-height;
-    padding: 0;
-    color: color-lower-contrast($font-color, 24%);
-}
-
-.msp-tree-visibility {
-    position: absolute;
-    right: 0;
-    top: 0;
-    width: $row-height;
-    font-size: 80%;
-
-    &-hidden {
-        color: color-lower-contrast($font-color, 36%);
-    }
-}
-
-.msp-tree-children {
-    margin-left: $control-spacing;
-}
-
-.msp-tree-updates-wrapper {
-    .msp-control-group-header:last-child {
-        margin-bottom: 1px;
-    }
-}
-
-.msp-log-list {
-    list-style: none;
-
-    > li {
-        background: $msp-form-control-background;
-        margin-bottom: 1px;
-        padding: 3px 6px;
-    }
-}
-
-.msp-viewport-top-left-controls {
-    position: absolute;
-    left: $control-spacing;
-    top: $control-spacing;
-
-    .msp-traj-controls {
-        line-height: $row-height;
-        float: left;
-        margin-right: $control-spacing;
-        background-color: $msp-form-control-background;
-
-        > span {
-            color: $font-color;
-            margin-left: $control-spacing;
-            margin-right: $control-spacing;
-            font-size: 85%;
-            display: inline-block;
-        }
-    }
-
-    .msp-state-snapshot-viewport-controls {
-        line-height: $row-height;
-        float: left;
-        margin-right: $control-spacing;
-
-        > button {
-            background-color: $msp-form-control-background;
-        }
-
-        > select {
-            display: inline-block;
-            width: 200px;
-            margin-right: $control-spacing;
-        }
-    }
-
-    .msp-animation-viewport-controls {
-        line-height: $row-height;
-        float: left;
-        margin-right: $control-spacing;
-        position: relative;
-        // background: $default-background;
-
-        > div:first-child {
-            position: relative;
-            display: inline-block;
-
-            > button {
-                position: relative;
-            }
-        }
-
-        .msp-animation-viewport-controls-select {
-            width: 290px;
-            position: absolute;
-            left: 0;
-            margin-top: $control-spacing;
-            background: $control-background;
-
-            .msp-control-row:first-child {
-                margin-top: 0;
-            }
-        }
-    }
-}
-
-.msp-param-object-list-item {
-    margin-top: 1px;
-    position: relative;
-    > button {
-        text-align: left;
-        > span {
-            font-weight: bold;
-        }
-    }
-    > div {
-        position: absolute;
-        right: 0;
-        top: 0
-    }
-}
-
-.msp-state-actions {
-    .msp-transform-wrapper:last-child {
-        margin-bottom: 10px;
-    }
-}
-
-.msp-button-row {
-    display:flex;
-    flex-direction:row;
-    height: $row-height;
-    width: inherit;
-
-    > button {
-        margin: 0;
-        flex: 1 1 auto;
-        margin-right: 1px;
-        height: $row-height;
-
-        text-align-last: center;
-        background: none;
-        padding: 0 $control-spacing;
-        overflow: hidden;
-    }
-}
-
-.msp-action-menu-options {
-    .msp-control-row, button, .msp-icon {
-        height: 24px;
-        line-height: 24px;
-    }
-
-    button {
-        text-align: left;
-    }
-
-
-    .msp-action-menu-button {
-        margin-top: 1px;
-        display: flex;
-        .msp-icon {
-            font-size: 80%;
-            margin-right: 6px;
-        }
-    }
-}
-
-.msp-representation-entry {
-    position: relative;
-    > .msp-control-group-header {
-        > .msp-btn {
-            // border-left: 1px solid $entity-color-Group;
-            font-weight: bold;
-        }
-        > .msp-icon, > .msp-btn-link {
-            line-height: 24px;
-            height: 24px;
-        }
-    }
-}

src/mol-plugin-ui/skin/base/ui.scss

@@ -38,5 +38,4 @@
 @import 'components/transformer';
 @import 'components/toast';
 @import 'components/help';
-@import 'components/temp';
-@import 'components/line-graph.scss';
+@import 'components/line-graph';

src/mol-plugin-ui/skin/base/variables.scss

@@ -23,22 +23,23 @@ $expanded-portrait-top-height:    3 * $row-height + 1;
 $standard-bottom-height: 8 * ($row-height + 1) + 3 * $control-spacing + 1;
 $standard-top-height:    3 * $row-height + 1;
 
-//////////////////////////////////////////////////
-// ENTITY COLORS
-
-
-// entity colors are "somewhat orthogonal" on the RGB cube
-// TypeClass = 'Root' | 'Group' | 'Data' | 'Object' | 'Visual' | 'Selection' | 'Action' | 'Behaviour'
 
-// DO NOT CHANGE THESE!!
-$entity-color-Root:      $default-background;
-$entity-color-Data:      color-lower-contrast(#95a5a6, 15%);
-$entity-color-Selection: color-lower-contrast(#e74c3c, 15%);
-$entity-color-Action:    color-lower-contrast(#34495e, 10%);
-$entity-color-Object:    color-lower-contrast(#2ecc71, 10%);
-$entity-color-Behaviour: color-lower-contrast(#9b59b6, 10%);
-$entity-color-Visual:    color-lower-contrast(#3498db, 5%);
-$entity-color-Group:     color-lower-contrast(#e67e22, 5%);
+$color-accent-cyan:      color-lower-contrast(#95a5a6, 15%);
+$color-accent-red:       color-lower-contrast(#e74c3c, 15%);
+$color-accent-gray:      color-lower-contrast(#34495e, 10%);
+$color-accent-green:     color-lower-contrast(#2ecc71, 10%);
+$color-accent-purple:    color-lower-contrast(#9b59b6, 10%);
+$color-accent-blue:      color-lower-contrast(#3498db, 5%);
+$color-accent-orange:    color-lower-contrast(#e67e22, 5%);
+
+// TypeClass = 'Root' | 'Group' | 'Data' | 'Object' | 'Representation3D' | 'Behavior'
+
+$type-class-Root:             $default-background;
+$type-class-Data:             color-lower-contrast(#95a5a6, 15%);
+$type-class-Object:           color-lower-contrast(#2ecc71, 10%);
+$type-class-Behavior:         color-lower-contrast(#9b59b6, 10%);
+$type-class-Representation3D: color-lower-contrast(#3498db, 5%);
+$type-class-Group:            color-lower-contrast(#e67e22, 5%);
 
 //////////////////////////////////////////////////
 // COLORS and COMPUTED COLORS

src/mol-plugin-ui/state/tree.tsx

@@ -12,7 +12,7 @@ import { PluginUIComponent, _Props, _State } from '../base';
 import { Icon } from '../controls/icons';
 import { ActionMenu } from '../controls/action-menu';
 import { ApplyActionControl } from './apply-action';
-import { ControlGroup } from '../controls/common';
+import { ControlGroup, IconButton, Button } from '../controls/common';
 import { UpdateTransformControl } from './update-transform';
 import { StateTreeSpine } from '../../mol-state/tree/spine';
 
@@ -266,43 +266,38 @@ class StateTreeNodeLabel extends PluginUIComponent<{ cell: StateObjectCell, dept
 
         const isCurrent = this.is(cell.parent.behaviors.currentObject.value);
 
-        let label: any;
-        if (cell.status === 'pending' || cell.status === 'processing') {
-            const name = n.transformer.definition.display.name;
-            label = <><b>[{cell.status}]</b> <span title={name}>{name}</span></>;
-        } else if (cell.status !== 'ok' || !cell.obj) {
-            const name = n.transformer.definition.display.name;
-            const title = `${cell.errorText}`;
+        const disabled = cell.status !== 'error' && cell.status !== 'ok';
 
-            // {this.state.isCurrent ? this.setCurrentRoot : this.setCurrent
-            label = <><button className='msp-btn-link msp-btn-tree-label' title={title} onClick={this.state.isCurrent ? this.setCurrentRoot : this.setCurrent}><b>[{cell.status}]</b> {name}: <i><span>{cell.errorText}</span></i> </button></>;
+        let label: React.ReactNode;
+        if (cell.status === 'error' || !cell.obj) {
+            const name = cell.status === 'error' ? cell.errorText : n.transformer.definition.display.name;
+            label = <Button className='msp-btn-tree-label msp-no-hover-outline' noOverflow title={name} onClick={this.state.isCurrent ? this.setCurrentRoot : this.setCurrent} disabled={disabled}>
+                {cell.status === 'error' && <b>[{cell.status}]</b>} <span>{name}</span>
+            </Button>;
         } else {
             const obj = cell.obj as PluginStateObject.Any;
             const title = `${obj.label} ${obj.description ? obj.description : ''}`;
-            label = <><button className='msp-btn-link msp-btn-tree-label' title={title} onClick={this.state.isCurrent ? this.setCurrentRoot : this.setCurrent}><span>{obj.label}</span> {obj.description ? <small>{obj.description}</small> : void 0}</button></>;
+            label = <Button className={`msp-btn-tree-label msp-no-hover-outline msp-type-class-${obj.type.typeClass}`} noOverflow disabled={disabled} title={title} onClick={this.state.isCurrent ? this.setCurrentRoot : this.setCurrent}>
+                <span>{obj.label}</span> {obj.description ? <small>{obj.description}</small> : void 0}
+            </Button>;
         }
 
         const children = cell.parent.tree.children.get(this.ref);
         const cellState = cell.state;
 
-        const visibility = <button onClick={this.toggleVisible} className={`msp-btn msp-btn-link msp-btn-icon msp-tree-visibility${cellState.isHidden ? ' msp-tree-visibility-hidden' : ''}`}>
-            <Icon name='visual-visibility' />
-        </button>;
+        const expand = <IconButton icon={cellState.isCollapsed ? 'expand' : 'collapse'} flex='20px' disabled={disabled} onClick={this.toggleExpanded} transparent className='msp-no-hover-outline' style={{ visibility: children.size > 0 ? 'visible' : 'hidden' }} />
+        const remove = !cell.state.isLocked ? <IconButton icon='remove' onClick={this.remove} disabled={disabled} small toggleState={false} /> : void 0;
+        const visibility = <IconButton icon='visual-visibility' toggleState={!cellState.isHidden} disabled={disabled} small onClick={this.toggleVisible} />;
 
         const marginStyle: React.CSSProperties = {
-            marginLeft: /* this.state.isCurrent ? void 0 :*/ `${this.props.depth * 8}px`,
-            // paddingLeft: !this.state.isCurrent ? void 0 : `${this.props.depth * 10}px`,
-            borderLeft: /* isCurrent || */ this.props.depth === 0 ? 'none' : void 0
+            marginLeft: `${this.props.depth * 8}px`
         }
 
-        const row = <div className={`msp-tree-row${isCurrent ? ' msp-tree-row-current' : ''}`} onMouseEnter={this.highlight} onMouseLeave={this.clearHighlight} style={marginStyle}>
+        const row = <div className={`msp-flex-row msp-tree-row${isCurrent ? ' msp-tree-row-current' : ''}`} onMouseEnter={this.highlight} onMouseLeave={this.clearHighlight} style={marginStyle}>
+            {expand}
             {label}
-            {children.size > 0 &&  <button onClick={this.toggleExpanded} className='msp-btn msp-btn-link msp-tree-toggle-exp-button'>
-                <Icon name={cellState.isCollapsed ? 'expand' : 'collapse'} />
-            </button>}
-            {!cell.state.isLocked && <button onClick={this.remove} className='msp-btn msp-btn-link msp-btn-icon msp-tree-remove-button'>
-                <Icon name='remove' />
-            </button>}{visibility}
+            {remove}
+            {visibility}
         </div>;
 
         if (!isCurrent) return row;
@@ -310,7 +305,7 @@ class StateTreeNodeLabel extends PluginUIComponent<{ cell: StateObjectCell, dept
         if (this.state.action === 'apply' && this.state.currentAction) {
             return <div style={{ marginBottom: '1px' }}>
                 {row}
-                <ControlGroup header={`Apply ${this.state.currentAction.definition.display.name}`} initialExpanded={true} hideExpander={true} hideOffset={false} onHeaderClick={this.hideApply} topRightIcon='off' headerLeftMargin={marginStyle.marginLeft as string}>
+                <ControlGroup header={`Apply ${this.state.currentAction.definition.display.name}`} initialExpanded={true} hideExpander={true} hideOffset={false} onHeaderClick={this.hideApply} topRightIcon='off' headerLeftMargin={`${this.props.depth * 8 + 21}px`}>
                     <ApplyActionControl onApply={this.hideApply} state={this.props.cell.parent} action={this.state.currentAction} nodeRef={this.props.cell.transform.ref} hideHeader noMargin />
                 </ControlGroup>
             </div>
@@ -318,11 +313,11 @@ class StateTreeNodeLabel extends PluginUIComponent<{ cell: StateObjectCell, dept
 
         if (this.state.action === 'options') {
             const actions = this.actions;
-            const updates = this.updates(marginStyle.marginLeft as string);
+            const updates = this.updates(`${this.props.depth * 8 + 21}px`);
             return <div style={{ marginBottom: '1px' }}>
                 {row}
                 {updates}
-                {actions && <div style={{ marginLeft: marginStyle.marginLeft, marginTop: '-1px' }}>
+                {actions && <div style={{ marginLeft: `${this.props.depth * 8 + 21}px`, marginTop: '-1px' }}>
                     <ActionMenu items={actions} onSelect={this.selectAction} />
                 </div>}
             </div>