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-form-control msp-btn-block msp-btn-collapse msp-no-overflow' onClick={this.toggleCollapsed}>
+                <button className='msp-btn msp-form-control msp-btn-block 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/sequence/chain.ts

@@ -22,6 +22,9 @@ export class ChainSequenceWrapper extends SequenceWrapper<StructureUnit> {
     residueColor(seqIdx: number) {
         return ColorNames.black
     }
+    residueClass(seqIdx: number) {
+        return 'msp-sequence-present'
+    }
 
     mark(loci: Loci, action: MarkerAction) {
         let changed = false

src/mol-plugin-ui/sequence/element.ts

@@ -20,6 +20,9 @@ export class ElementSequenceWrapper extends SequenceWrapper<StructureUnit> {
     residueColor(seqIdx: number) {
         return ColorNames.black
     }
+    residueClass(seqIdx: number) {
+        return 'msp-sequence-present'
+    }
 
     mark(loci: Loci, action: MarkerAction) {
         let changed = false

src/mol-plugin-ui/sequence/hetero.ts

@@ -24,6 +24,9 @@ export class HeteroSequenceWrapper extends SequenceWrapper<StructureUnit> {
     residueColor(seqIdx: number) {
         return ColorNames.black
     }
+    residueClass(seqIdx: number) {
+        return 'msp-sequence-present'
+    }
 
     mark(loci: Loci, action: MarkerAction) {
         let changed = false

src/mol-plugin-ui/sequence/polymer.ts

@@ -35,6 +35,11 @@ export class PolymerSequenceWrapper extends SequenceWrapper<StructureUnit> {
             ? ColorNames.grey
             : ColorNames.black
     }
+    residueClass(seqIdx: number) {
+        return this.missing.has(this.modelNum, this.asymId, this.seqId(seqIdx))
+            ? 'msp-sequence-missing'
+            : 'msp-sequence-present'
+    }
 
     mark(loci: Loci, action: MarkerAction): boolean {
         let changed = false

src/mol-plugin-ui/sequence/sequence.tsx

@@ -159,12 +159,12 @@ export class Sequence<P extends SequenceProps> extends PluginUIComponent<P> {
 
     private getResidueClass(seqIdx: number, label: string) {
         return label.length > 1
-            ? (seqIdx === 0 ? 'msp-sequence-residue-long-begin' : 'msp-sequence-residue-long')
-            : void 0
+            ? this.props.sequenceWrapper.residueClass(seqIdx) + (seqIdx === 0 ? ' msp-sequence-residue-long-begin' : ' msp-sequence-residue-long')
+            : this.props.sequenceWrapper.residueClass(seqIdx);
     }
 
-    private residue(seqIdx: number, label: string, marker: number, color: Color) {
-        return <span key={seqIdx} data-seqid={seqIdx} style={{ color: Color.toStyle(color), backgroundColor: this.getBackgroundColor(marker) }} className={this.getResidueClass(seqIdx, label)}>{label}</span>;
+    private residue(seqIdx: number, label: string, marker: number) {
+        return <span key={seqIdx} data-seqid={seqIdx} style={{ backgroundColor: this.getBackgroundColor(marker) }} className={this.getResidueClass(seqIdx, label)}>{label}</span>;
     }
 
     private getSequenceNumberClass(seqIdx: number, seqNum: string, label: string) {
@@ -285,7 +285,7 @@ export class Sequence<P extends SequenceProps> extends PluginUIComponent<P> {
             if (hasNumbers && i % period === 0 && i < il) {
                 elems[elems.length] = this.getSequenceNumberSpan(i, label)
             }
-            elems[elems.length] = this.residue(i, label, sw.markerArray[i], sw.residueColor(i));
+            elems[elems.length] = this.residue(i, label, sw.markerArray[i]);
         }
 
         // calling .updateMarker here is neccesary to ensure existing

src/mol-plugin-ui/sequence/wrapper.ts

@@ -17,6 +17,7 @@ export { SequenceWrapper }
 abstract class SequenceWrapper<D> {
     abstract residueLabel(seqIdx: number): string
     abstract residueColor(seqIdx: number): Color
+    abstract residueClass(seqIdx: number): string
 
     abstract getLoci(seqIdx: number): StructureElement.Loci
 

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

@@ -118,7 +118,7 @@ output {
   padding: $padding-base-vertical $padding-base-horizontal;
   font-size: $font-size-base;
   line-height: $line-height-base;
-  color: $input-color;
+  // color: $input-color;
   background-color: $input-bg;
   background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
   border: 1px solid $input-border;

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

@@ -11,10 +11,6 @@
     }
 }
 
-.msp-btn-collapse {
-    padding: 0 $control-spacing / 2;
-}
-
 .msp-btn, .msp-btn:active, .msp-btn-link:focus, .msp-btn:hover {
     outline: none !important;
 }
@@ -110,7 +106,7 @@
 .msp-form-control {
     width: 100%;
     background: $msp-form-control-background;
-    color: $font-color;
+    // color: $font-color;
     border: none; // !important;
     padding: 0 $control-spacing;
     line-height: $row-height - 2px;

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

@@ -97,4 +97,12 @@ $sequence-select-height: 24px;
     .msp-sequence-number-negative {
         left: 2.5em;
     }
+
+    .msp-sequence-present {
+        color: $font-color;
+    }
+
+    .msp-sequence-missing {
+        color: color-lower-contrast($font-color, 33%);
+    }
 }

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

@@ -66,8 +66,9 @@
 
 .msp-transform-wrapper > .msp-transform-header > button {
     text-align: left;
-    background: color-lower-contrast($default-background, 4%);
+    background: $default-background; // color-lower-contrast($default-background, 4%);
     font-weight: bold;
+    padding-right: 5px;
 }
 
 .msp-transform-header {
@@ -85,6 +86,12 @@
         font-weight: normal;
         float: right;
     }
+    
+    > button {
+        > span:first-child {
+            margin-right: 8px;
+        }
+    }
 
     > button:hover {
         color: color-lower-contrast($font-color, 15%);

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

@@ -190,12 +190,12 @@ abstract class TransformControlBase<P, S extends TransformControlBase.ComponentS
         return this.props.autoHideApply && !canApply
             ? null
             : <div className='msp-transform-apply-wrap'>
-                <button className='msp-btn msp-btn-block msp-transform-default-params' onClick={this.setDefault} disabled={this.state.busy} title='Set default params'><Icon name='cw' /></button>
-                {showBack && <button className='msp-btn msp-btn-block msp-transform-refresh msp-form-control' title='Refresh params' onClick={this.refresh} disabled={this.state.busy || this.state.isInitial}>
+                <button className='msp-btn msp-btn-block msp-form-control msp-transform-default-params' onClick={this.setDefault} disabled={this.state.busy} title='Set default params'><Icon name='cw' /></button>
+                {showBack && <button className='msp-btn msp-btn-block msp-form-control msp-transform-refresh msp-form-control' title='Refresh params' onClick={this.refresh} disabled={this.state.busy || this.state.isInitial}>
                     <Icon name='back' /> Back
                 </button>}
                 <div className={`msp-transform-apply${!showBack ? ' msp-transform-apply-wider' : ''}`}>
-                    <button className={`msp-btn msp-btn-block msp-btn-commit msp-btn-commit-${canApply ? 'on' : 'off'}`} onClick={this.apply} disabled={!canApply}>
+                    <button className={`msp-btn msp-btn-block msp-form-control msp-btn-commit msp-btn-commit-${canApply ? 'on' : 'off'}`} onClick={this.apply} disabled={!canApply}>
                         {canApply && <Icon name='ok' />}
                         {this.props.applyLabel || this.applyText()}
                     </button>
@@ -223,7 +223,7 @@ abstract class TransformControlBase<P, S extends TransformControlBase.ComponentS
 
         const ctrl = <div className={wrapClass} style={{ marginBottom: this.props.noMargin ? 0 : void 0 }}>
             {display !== 'none' && !this.props.wrapInExpander && <div className='msp-transform-header'>
-                <button className={`msp-btn msp-btn-block${isEmpty ? '' : ' msp-btn-collapse'}`} onClick={this.toggleExpanded} title={display.description}>
+                <button className={`msp-btn msp-btn-block msp-form-control`} onClick={this.toggleExpanded} title={display.description}>
                     {!isEmpty && <Icon name={this.state.isCollapsed ? 'expand' : 'collapse'} />}
                     {display.name}
                 </button>

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

@@ -36,8 +36,9 @@ export class StructureFocusControls extends CollapsableControls<{}, StructureCom
         this.subscribe(this.plugin.managers.structure.hierarchy.behaviors.selection, c => {
             this.setState({
                 description: StructureHierarchyManager.getSelectedStructuresDescription(this.plugin)
-            })
-            this.forceUpdate();
+            });
+            // if setState is called on non-pure component, forceUpdate is reduntant
+            // this.forceUpdate();
         });
     }