param control tweaks

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

@@ -54,6 +54,21 @@
     }
 }
 
+.msp-control-label-short {
+    > span {
+        width: $control-label-short-width + $control-spacing;
+    }
+
+    > div:nth-child(2) {
+        left: $control-label-short-width + $control-spacing;
+    }
+}
+
+.msp-control-col-2 {
+    float: left;
+    width: 50%;
+}
+
 .msp-control-group {
     position: relative;
 }

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

@@ -2,6 +2,7 @@
 // measures
 
 $control-label-width:   110px;
+$control-label-short-width:   70px;
 $row-height:            32px;
 $control-spacing:       10px;
 $entity-subtree-offset: 8px;

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

@@ -86,9 +86,16 @@ export abstract class SimpleParam<P extends PD.Any> extends React.PureComponent<
 
     abstract renderControl(): JSX.Element;
 
+    private get className() {
+        const className = ['msp-control-row'];
+        if (this.props.param.shortLabel) className.push('msp-control-label-short')
+        if (this.props.param.twoColumns) className.push('msp-control-col-2')
+        return className.join(' ')
+    }
+
     render() {
         const label = this.props.param.label || camelCaseToWords(this.props.name);
-        return <div className='msp-control-row'>
+        return <div className={this.className}>
             <span title={this.props.param.description}>{label}</span>
             <div>
                 {this.renderControl()}

src/mol-util/param-definition.ts

@@ -16,6 +16,8 @@ export namespace ParamDefinition {
         description?: string,
         fieldLabels?: { [name: string]: string },
         isHidden?: boolean,
+        shortLabel?: boolean,
+        twoColumns?: boolean,
     }
 
     function setInfo<T extends Info>(param: T, info?: Info): T {
@@ -24,6 +26,8 @@ export namespace ParamDefinition {
         if (info.description) param.description = info.description;
         if (info.fieldLabels) param.fieldLabels = info.fieldLabels;
         if (info.isHidden) param.isHidden = info.isHidden;
+        if (info.shortLabel) param.shortLabel = info.shortLabel;
+        if (info.twoColumns) param.twoColumns = info.twoColumns;
         return param;
     }