cosmetic UI changes

src/mol-plugin-ui/base.tsx

@@ -89,7 +89,7 @@ export abstract class CollapsableControls<P = {}, S = {}, SS = {}> extends Plugi
 
         return <div className={wrapClass}>
             <div className='msp-transform-header'>
-                <button className='msp-btn msp-btn-block msp-btn-collapse msp-no-overflow' onClick={this.toggleCollapsed}>
+                <button className='msp-btn msp-form-control msp-btn-block msp-btn-collapse msp-no-overflow' onClick={this.toggleCollapsed}>
                     <Icon name={this.state.isCollapsed ? 'expand' : 'collapse'} />
                     {this.state.header}
                     <small style={{ margin: '0 6px' }}>{this.state.isCollapsed ? '' : this.state.description}</small>

src/mol-plugin-ui/controls/action-menu.tsx

@@ -16,13 +16,21 @@ export class ActionMenu extends React.PureComponent<ActionMenu.Props> {
         const cmd = this.props;
         return <div className='msp-action-menu-options' style={{ /* marginTop: cmd.header ? void 0 : '1px', */ maxHeight: '300px', overflow: 'hidden', overflowY: 'auto' }}>
             {cmd.header && <ControlGroup header={cmd.header} initialExpanded={true} hideExpander={true} hideOffset={false} onHeaderClick={this.hide} topRightIcon='off'></ControlGroup>}
-            <Section items={cmd.items} onSelect={cmd.onSelect} current={cmd.current} multiselect={this.props.multiselect} noOffset={this.props.noOffset} />
+            <Section items={cmd.items} onSelect={cmd.onSelect} current={cmd.current} multiselect={this.props.multiselect} noOffset={this.props.noOffset} noAccent={this.props.noAccent} />
         </div>
     }
 }
 
 export namespace ActionMenu {
-    export type Props = { items: Items, onSelect: OnSelect | OnSelectMany, header?: string, current?: Item, multiselect?: boolean, noOffset?: boolean }
+    export type Props = {
+        items: Items,
+        onSelect: OnSelect | OnSelectMany,
+        header?: string,
+        current?: Item,
+        multiselect?: boolean,
+        noOffset?: boolean,
+        noAccent?: boolean
+    }
 
     export type OnSelect = (item: Item | undefined) => void
     export type OnSelectMany = (itemOrItems: Item[] | undefined) => void
@@ -122,7 +130,14 @@ export namespace ActionMenu {
     }
 }
 
-type SectionProps = { items: ActionMenu.Items, onSelect: ActionMenu.OnSelect | ActionMenu.OnSelectMany, current: ActionMenu.Item | undefined, multiselect: boolean | undefined, noOffset?: boolean }
+type SectionProps = {
+    items: ActionMenu.Items,
+    onSelect: ActionMenu.OnSelect | ActionMenu.OnSelectMany,
+    current: ActionMenu.Item | undefined,
+    multiselect: boolean | undefined,
+    noOffset?: boolean,
+    noAccent?: boolean
+}
 type SectionState = { items: ActionMenu.Items, current: ActionMenu.Item | undefined, isExpanded: boolean, hasCurrent: boolean, header?: ActionMenu.Header }
 
 class Section extends React.PureComponent<SectionProps, SectionState> {
@@ -205,11 +220,11 @@ class Section extends React.PureComponent<SectionProps, SectionState> {
         const { header } = this.state;
         return <>
             {header && (this.props.multiselect && this.state.isExpanded ? this.multiselectHeader : this.basicHeader)}
-            <div className={this.props.noOffset ? void 0 : 'msp-control-offset'}>
+            <div className={this.props.noOffset ? void 0 : this.props.noAccent ? 'msp-control-offset' : 'msp-accent-offset'}>
                 {(!header || this.state.isExpanded) && items.map((x, i) => {
                     if (isHeader(x)) return null;
                     if (isItem(x)) return <Action key={i} item={x} onSelect={onSelect} current={current} multiselect={this.props.multiselect} />
-                    return <Section key={i} items={x} onSelect={onSelect} current={current} multiselect={this.props.multiselect} />
+                    return <Section key={i} items={x} onSelect={onSelect} current={current} multiselect={this.props.multiselect} noAccent />
                 })}
             </div>
         </>;

src/mol-plugin-ui/controls/common.tsx

@@ -16,7 +16,8 @@ export class ControlGroup extends React.Component<{
     hideOffset?: boolean,
     topRightIcon?: IconName,
     headerLeftMargin?: string,
-    onHeaderClick?: () => void
+    onHeaderClick?: () => void,
+    noTopMargin?: boolean
 }, { isExpanded: boolean }> {
     state = { isExpanded: !!this.props.initialExpanded }
 
@@ -30,9 +31,9 @@ export class ControlGroup extends React.Component<{
 
     render() {
         // TODO: customize header style (bg color, togle button etc)
-        return <div className='msp-control-group-wrapper' style={{ position: 'relative' }}>
+        return <div className='msp-control-group-wrapper' style={{ position: 'relative', marginTop: this.props.noTopMargin ? 0 : void 0 }}>
             <div className='msp-control-group-header' style={{ marginLeft: this.props.headerLeftMargin }}>
-                <button className='msp-btn msp-btn-block' onClick={this.headerClicked}>
+                <button className='msp-btn msp-form-control msp-btn-block' onClick={this.headerClicked}>
                     {!this.props.hideExpander && <Icon name={this.state.isExpanded ? 'collapse' : 'expand'} />}
                     {this.props.topRightIcon && <Icon name={this.props.topRightIcon} style={{ position: 'absolute', right: '2px', top: 0 }} />}
                     <b>{this.props.header}</b>
@@ -341,7 +342,7 @@ export class ExpandGroup extends React.PureComponent<{ header: string, headerSty
     render() {
         return <>
             <div className='msp-control-group-header' style={{ marginTop: this.props.marginTop !== void 0 ? this.props.marginTop : '1px', marginLeft: this.props.headerLeftMargin }}>
-                <button className='msp-btn msp-btn-block' onClick={this.toggleExpanded} style={this.props.headerStyle}>
+                <button className='msp-btn msp-form-control msp-btn-block' onClick={this.toggleExpanded} style={this.props.headerStyle}>
                     <Icon name={this.state.isExpanded ? 'collapse' : 'expand'} />
                     {this.props.header}
                 </button>

src/mol-plugin-ui/controls/parameters.tsx

@@ -895,7 +895,7 @@ export class GroupControl extends React.PureComponent<ParamProps<PD.Group<any>>
 
         return <div className='msp-control-group-wrapper'>
             <div className='msp-control-group-header'>
-                <button className='msp-btn msp-btn-block' onClick={this.toggleExpanded}>
+                <button className='msp-btn msp-form-control msp-btn-block' onClick={this.toggleExpanded}>
                     <Icon name={this.state.isExpanded ? 'collapse' : 'expand'} />
                     {label}
                 </button>

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

@@ -232,24 +232,33 @@
     padding-left: $control-spacing;
 }
 
+.msp-accent-offset {
+    // border-left-width: $control-spacing / 2;
+    // border-left-style: solid;
+    // border-left-color: color-increase-contrast($default-background, 10%);
+    // padding-left: 1px;
+    margin-left: $control-spacing - 2;
+    border-left: 2px solid $entity-color-Group;
+}
+
 .msp-control-group-wrapper {
     //border-left-width: $control-spacing / 2;
     //border-left-style: solid;
     //border-left-color: color-increase-contrast($default-background, 10%);
 
     margin-bottom: 0px;
-    padding-top: 1px;
+    margin-top: 1px;
 }
 
 // TODO : get rid of the important
 .msp-control-group-header {
     background: $default-background;
     > button {
-        padding-left: $control-spacing / 2 !important;
+        padding-left: 4px; // $control-spacing / 2 !important;
         text-align: left;
         height: 24px !important; // 2 * $row-height / 3 !important;
         line-height: 24px !important; // 2 * $row-height / 3 !important;
-        font-size: 70% !important;
+        font-size: 85% !important;
         background: $default-background !important;
         color: color-lower-contrast($font-color, 15%);
     }

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

@@ -347,7 +347,7 @@
     position: relative;
     > .msp-control-group-header {
         > .msp-btn {
-            border-left: 1px solid $entity-color-Group;
+            // border-left: 1px solid $entity-color-Group;
             font-weight: bold;
         }
         > .msp-icon, > .msp-btn-link {

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

@@ -317,11 +317,13 @@ class StateTreeNodeLabel extends PluginUIComponent<{ cell: StateObjectCell, dept
         }
 
         if (this.state.action === 'options') {
-            let actions = this.actions;
+            const actions = this.actions;
+            const updates = this.updates(marginStyle.marginLeft as string);
+            // TODO: fix 1px extra margin when updates are empty
             return <div style={{ marginBottom: '1px' }}>
                 {row}
-                {this.updates(marginStyle.marginLeft as string)}
-                {actions && <div style={marginStyle}>
+                {updates}
+                {actions && <div style={{ marginLeft: marginStyle.marginLeft }}>
                     <ActionMenu items={actions} onSelect={this.selectAction} />
                 </div>}
             </div>

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

@@ -343,13 +343,17 @@ class StructureComponentGroup extends PurePluginUIComponent<{ group: StructureCo
                 <IconButton onClick={this.toggleRemove} icon='remove' title='Remove' small toggleState={this.state.action === 'remove'} customClass='msp-form-control' style={{ flex: '0 0 32px' }} />
                 <IconButton onClick={this.toggleAction} icon='dot-3' title='Actions' toggleState={this.state.action === 'action'} customClass='msp-form-control' style={{ flex: '0 0 32px', padding: '0px' }} />
             </div>
-            {this.state.action === 'remove' && <ActionMenu items={this.removeActions} onSelect={this.selectRemoveAction} />}
-            {this.state.action === 'action' && <>
-                <ActionMenu items={this.actions} onSelect={this.selectAction} />
-                <div className='msp-control-offset' style={{ margin: '6px 0' }}>
+            {this.state.action === 'remove' && <div style={{ marginBottom: '6px' }}>
+                <ActionMenu items={this.removeActions} onSelect={this.selectRemoveAction} />
+            </div>}
+            {this.state.action === 'action' && <div className='msp-accent-offset'>
+                <div style={{ marginBottom: '6px' }}>
+                    <ActionMenu items={this.actions} onSelect={this.selectAction} noOffset />
+                </div>
+                <div style={{ marginBottom: '6px' }}>
                     {component.representations.map(r => <StructureRepresentationEntry group={this.props.group} key={r.cell.transform.ref} representation={r} />)}
                 </div>
-            </>}
+            </div>}
         </>;
     }
 }