From 3ec2c6ded45cb504105fe3ac1373c83c6ff848d3 Mon Sep 17 00:00:00 2001
From: Alexander Rose <alex.rose@rcsb.org>
Date: Wed, 23 Oct 2019 17:18:16 -0700
Subject: [PATCH] ui layout tweaks
---
src/mol-plugin/skin/base/components/controls-base.scss | 4 ++++
src/mol-plugin/ui/base.tsx | 2 +-
src/mol-plugin/ui/state/common.tsx | 2 +-
src/mol-plugin/ui/structure/selection.tsx | 2 +-
4 files changed, 7 insertions(+), 3 deletions(-)
diff --git a/src/mol-plugin/skin/base/components/controls-base.scss b/src/mol-plugin/skin/base/components/controls-base.scss
index d92508ead..a5d5dcfd0 100644
--- a/src/mol-plugin/skin/base/components/controls-base.scss
+++ b/src/mol-plugin/skin/base/components/controls-base.scss
@@ -12,6 +12,10 @@
}
}
+.msp-btn-collapse {
+ padding: 0 $control-spacing / 2;
+}
+
.msp-btn, .msp-btn:active, .msp-btn-link:focus, .msp-btn:hover {
outline: none !important;
}
diff --git a/src/mol-plugin/ui/base.tsx b/src/mol-plugin/ui/base.tsx
index c6e97a210..e0993e563 100644
--- a/src/mol-plugin/ui/base.tsx
+++ b/src/mol-plugin/ui/base.tsx
@@ -84,7 +84,7 @@ export abstract class CollapsableControls<P extends CollapsableProps = Collapsab
return <div className={wrapClass}>
<div className='msp-transform-header'>
- <button className='msp-btn msp-btn-block' onClick={this.toggleCollapsed}>
+ <button className='msp-btn msp-btn-block msp-btn-collapse' onClick={this.toggleCollapsed}>
<span className={`msp-icon msp-icon-${this.state.isCollapsed ? 'expand' : 'collapse'}`} />
{this.state.header}
</button>
diff --git a/src/mol-plugin/ui/state/common.tsx b/src/mol-plugin/ui/state/common.tsx
index d2f1ef203..ed816b3e0 100644
--- a/src/mol-plugin/ui/state/common.tsx
+++ b/src/mol-plugin/ui/state/common.tsx
@@ -186,7 +186,7 @@ abstract class TransformControlBase<P, S extends TransformControlBase.ComponentS
const { a, b } = this.getSourceAndTarget();
return <div className={wrapClass}>
<div className='msp-transform-header'>
- <button className='msp-btn msp-btn-block' onClick={this.toggleExpanded} title={display.description}>
+ <button className='msp-btn msp-btn-block msp-btn-collapse' onClick={this.toggleExpanded} title={display.description}>
<span className={`msp-icon msp-icon-${this.state.isCollapsed ? 'expand' : 'collapse'}`} />
{display.name}
</button>
diff --git a/src/mol-plugin/ui/structure/selection.tsx b/src/mol-plugin/ui/structure/selection.tsx
index e2ee4b98c..6e503ff51 100644
--- a/src/mol-plugin/ui/structure/selection.tsx
+++ b/src/mol-plugin/ui/structure/selection.tsx
@@ -91,7 +91,7 @@ export class StructureSelectionControls<P, S extends StructureSelectionControlsS
return <div>
<div className='msp-control-row msp-row-text'>
<button className='msp-btn msp-btn-block' onClick={this.focus}>
- <span className={`msp-icon msp-icon-focus-on-visual`} style={{ position: 'absolute', left: '10px' }} />
+ <span className={`msp-icon msp-icon-focus-on-visual`} style={{ position: 'absolute', left: '5px' }} />
{this.stats}
</button>
</div>
--
GitLab