mol-plugin: viewport controls tweaks

src/mol-plugin/skin/base/components/viewport.scss

@@ -47,8 +47,15 @@
 .msp-viewport-controls-buttons {
     text-align: right;
     position: relative;
+    opacity: 0.5;
+    &:hover { opacity: 1.0; }
+
+    > div {
+        position: relative;
+        margin-bottom: 4px;
+    }
 
-    > button {
+    button {
         padding: 0;
         text-align: center;
         width: $row-height;
@@ -79,7 +86,7 @@
     max-height: 400px;
     width: 290px;
     top: 0;
-    right: $row-height + 1px;
+    right: $row-height + 4px;
     position: absolute;
     background: $control-background;
 

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

@@ -49,7 +49,7 @@
 	content: "\e820";
 }
 
-.msp-icon-cross:before {
+.msp-icon-block:before {
 	content: "\e868";
 }
 

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

@@ -13,6 +13,7 @@ export class ControlGroup extends React.Component<{
     initialExpanded?: boolean,
     hideExpander?: boolean,
     hideOffset?: boolean,
+    topRightIcon?: string,
     onHeaderClick?: () => void
 }, { isExpanded: boolean }> {
     state = { isExpanded: !!this.props.initialExpanded }
@@ -30,7 +31,8 @@ export class ControlGroup extends React.Component<{
         return <div className='msp-control-group-wrapper'>
             <div className='msp-control-group-header'>
                 <button className='msp-btn msp-btn-block' onClick={this.headerClicked}>
-                    {!this.props.hideExpander && <span className={`msp-icon msp-icon-${this.state.isExpanded ? 'collapse' : 'expand'}`} />}
+                    {!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 }} />}
                     {this.props.header}
                 </button>
             </div>
@@ -221,9 +223,10 @@ export class NumericInput extends React.PureComponent<{
 }
 
 export function Icon(props: {
-    name: string
+    name: string,
+    style?: React.CSSProperties
 }) {
-    return <span className={`msp-icon msp-icon-${props.name}`} />;
+    return <span className={`msp-icon msp-icon-${props.name}`} style={props.style} />;
 }
 
 export function IconButton(props: {

src/mol-plugin/ui/viewport.tsx

@@ -84,21 +84,32 @@ export class ViewportControls extends PluginUIComponent<ViewportControlsProps, V
     render() {
         return <div className={'msp-viewport-controls'} onMouseMove={this.onMouseMove}>
             <div className='msp-viewport-controls-buttons'>
-                <div className='msp-semi-transparent-background' />
-                {this.icon('reset-scene', this.resetCamera, 'Reset Camera')}
-                {this.icon('screenshot', this.screenshot, 'Download Screenshot')}
-                {this.icon('tools', this.toggleControls, 'Toggle Controls', this.plugin.layout.state.showControls)}
-                {this.icon('expand-layout', this.toggleExpanded, 'Toggle Expanded', this.plugin.layout.state.isExpanded)}
-                {this.icon('help-circle', this.toggleHelpExpanded, 'Help', this.state.isHelpExpanded)}
-                {this.icon('settings', this.toggleSettingsExpanded, 'Settings', this.state.isSettingsExpanded)}
+                <div>
+                    <div className='msp-semi-transparent-background' />
+                    {this.icon('reset-scene', this.resetCamera, 'Reset Camera')}
+                </div>
+                <div>
+                    <div className='msp-semi-transparent-background' />
+                    {this.icon('screenshot', this.screenshot, 'Download Screenshot')}
+                </div>
+                <div>
+                    <div className='msp-semi-transparent-background' />
+                    {this.icon('tools', this.toggleControls, 'Toggle Controls', this.plugin.layout.state.showControls)}
+                    {this.icon('expand-layout', this.toggleExpanded, 'Toggle Expanded', this.plugin.layout.state.isExpanded)}
+                    {this.icon('settings', this.toggleSettingsExpanded, 'Settings', this.state.isSettingsExpanded)}
+                </div>
+                <div>
+                    <div className='msp-semi-transparent-background' />
+                    {this.icon('help-circle', this.toggleHelpExpanded, 'Help', this.state.isHelpExpanded)}
+                </div>
             </div>
             {this.state.isHelpExpanded && <div className='msp-viewport-controls-panel'>
-                <ControlGroup header='Help' initialExpanded={true} hideExpander={true} hideOffset={true} onHeaderClick={this.toggleHelpExpanded}>
+                <ControlGroup header='Help' initialExpanded={true} hideExpander={true} hideOffset={true} onHeaderClick={this.toggleHelpExpanded} topRightIcon='off'>
                     <HelpContent />
                 </ControlGroup>
             </div>}
             {this.state.isSettingsExpanded && <div className='msp-viewport-controls-panel'>
-                <ControlGroup header='Basic Settings' initialExpanded={true} hideExpander={true} hideOffset={true} onHeaderClick={this.toggleSettingsExpanded}>
+                <ControlGroup header='Basic Settings' initialExpanded={true} hideExpander={true} hideOffset={true} onHeaderClick={this.toggleSettingsExpanded} topRightIcon='off'>
                     <SimpleSettingsControl />
                 </ControlGroup>
                 {/* <ControlGroup header='Layout' initialExpanded={true}>