colored icons for structure tools

src/mol-plugin-ui/base.tsx

@@ -70,7 +70,13 @@ export type _State<C extends React.Component> = C extends React.Component<any, i
 //
 
 export type CollapsableProps = { initiallyCollapsed?: boolean, header?: string }
-export type CollapsableState = { isCollapsed: boolean, header: string, description?: string, isHidden?: boolean }
+export type CollapsableState = {
+    isCollapsed: boolean,
+    header: string,
+    description?: string,
+    isHidden?: boolean,
+    brand?: { name: string, accent: 'cyan' | 'red' | 'gray' | 'green' | 'purple' | 'blue' | 'orange' }
+}
 
 export abstract class CollapsableControls<P = {}, S = {}, SS = {}> extends PluginUIComponent<P & CollapsableProps, S & CollapsableState, SS> {
     toggleCollapsed = () => {
@@ -89,7 +95,9 @@ export abstract class CollapsableControls<P = {}, S = {}, SS = {}> extends Plugi
 
         return <div className={wrapClass}>
             <div className='msp-transform-header'>
-                <Button icon={this.state.isCollapsed ? 'expand' : 'collapse'} noOverflow onClick={this.toggleCollapsed}>
+                <Button icon={this.state.brand ? void 0 : this.state.isCollapsed ? 'expand' : 'collapse'} noOverflow onClick={this.toggleCollapsed}
+                    className={this.state.brand ? `msp-transform-header-brand msp-transform-header-brand-${this.state.brand.accent}` : void 0}>
+                    {this.state.brand && <div className={`msp-accent-bg-${this.state.brand.accent}`}>{this.state.brand.name}</div>}
                     {this.state.header}
                     <small style={{ margin: '0 6px' }}>{this.state.isCollapsed ? '' : this.state.description}</small>
                 </Button>

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

@@ -338,10 +338,6 @@
 
             border-radius: 0 !important;
         }
-
-        .msp-btn-tree-label:hover {
-            color: $font-color;
-        }
     }
 
     .msp-btn-tree-label {
@@ -522,7 +518,13 @@
     } 
     .msp-accent-bg-#{$name} {
         background: $color;
-    } 
+    }
+    .msp-transform-header-brand-#{$name} {
+        border-bottom: 1px solid $color;
+        &:active, &:focus {
+            border-bottom: 1px solid $color;
+        }
+    }
 }
 
 @include accent('cyan', $color-accent-cyan);

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

@@ -98,6 +98,22 @@
     }
 }
 
+.msp-transform-header-brand {
+    padding-left: 42px;
+    margin-bottom: -1px;
+    > div {
+        position: absolute;
+        height: 32px;
+        line-height: 32px;
+        width: 32px;
+        top: 0;
+        left: 0;
+        text-align: center;
+        color: #eceff3;
+        font-size: 85%;
+    }
+}
+
 .msp-transform-default-params {
     background: $default-background;
     position: absolute;

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

@@ -277,7 +277,7 @@ class StateTreeNodeLabel extends PluginUIComponent<{ cell: StateObjectCell, dept
         } else {
             const obj = cell.obj as PluginStateObject.Any;
             const title = `${obj.label} ${obj.description ? obj.description : ''}`;
-            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}>
+            label = <Button className={`msp-btn-tree-label 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>;
         }

src/mol-plugin-ui/structure/components.tsx

@@ -26,7 +26,7 @@ interface StructureComponentControlState extends CollapsableState {
 
 export class StructureComponentControls extends CollapsableControls<{}, StructureComponentControlState> {
     protected defaultState(): StructureComponentControlState {
-        return { header: 'Representation', isCollapsed: false, isDisabled: false };
+        return { header: 'Representation', isCollapsed: false, isDisabled: false, brand: { name: 'Rpr', accent: 'blue' } };
     }
 
     componentDidMount() {

src/mol-plugin-ui/structure/measurements.tsx

@@ -27,6 +27,7 @@ export class StructureMeasurementsControls extends CollapsableControls {
         return {
             isCollapsed: false,
             header: 'Measurements',
+            brand: { name: 'Msr', accent: 'gray' as const }
         }
     }
 

src/mol-plugin-ui/structure/selection.tsx

@@ -155,7 +155,9 @@ export class StructureSelectionControls<P, S extends StructureSelectionControlsS
             action: void 0,
 
             isEmpty: true,
-            isBusy: false
+            isBusy: false,
+
+            brand: { name: 'Sel', accent: 'red' }
         } as S
     }
 

src/mol-plugin-ui/structure/source.tsx

@@ -25,7 +25,8 @@ export class StructureSourceControls extends CollapsableControls<{}, StructureSo
         return {
             header: 'Structure',
             isCollapsed: false,
-            isBusy: false
+            isBusy: false,
+            brand: { name: 'Str', accent: 'purple' }
         };
     }
 

src/mol-plugin-ui/structure/volume.tsx

@@ -24,7 +24,8 @@ export class VolumeStreamingControls extends CollapsableControls<{}, VolumeStrea
             header: 'Volume Streaming',
             isCollapsed: false,
             isBusy: false,
-            isHidden: true
+            isHidden: true,
+            brand: { name: 'Vol', accent: 'cyan' }
         };
     }
 

src/mol-plugin/behavior/dynamic/custom-props/rcsb/ui/assembly-symmetry.tsx

@@ -23,7 +23,8 @@ export class AssemblySymmetryControls extends CollapsableControls<{}, AssemblySy
             header: 'Assembly Symmetry',
             isCollapsed: false,
             isBusy: false,
-            isHidden: true
+            isHidden: true,
+            brand: { name: 'Sym', accent: 'cyan' }
         };
     }