From c80c6308108b4375f5ec5dc26fce08b3c1d0d711 Mon Sep 17 00:00:00 2001
From: Alexander Rose <alex.rose@rcsb.org>
Date: Wed, 14 Aug 2019 17:21:40 -0700
Subject: [PATCH] param control tweaks
---
src/mol-plugin/skin/base/components/controls.scss | 15 +++++++++++++++
src/mol-plugin/skin/base/variables.scss | 1 +
src/mol-plugin/ui/controls/parameters.tsx | 9 ++++++++-
src/mol-util/param-definition.ts | 4 ++++
4 files changed, 28 insertions(+), 1 deletion(-)
diff --git a/src/mol-plugin/skin/base/components/controls.scss b/src/mol-plugin/skin/base/components/controls.scss
index 2475e7b56..5d40894a6 100644
--- a/src/mol-plugin/skin/base/components/controls.scss
+++ b/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;
}
diff --git a/src/mol-plugin/skin/base/variables.scss b/src/mol-plugin/skin/base/variables.scss
index 734ea9850..bf88c3345 100644
--- a/src/mol-plugin/skin/base/variables.scss
+++ b/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;
diff --git a/src/mol-plugin/ui/controls/parameters.tsx b/src/mol-plugin/ui/controls/parameters.tsx
index 63ae15d19..dbb5854d7 100644
--- a/src/mol-plugin/ui/controls/parameters.tsx
+++ b/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()}
diff --git a/src/mol-util/param-definition.ts b/src/mol-util/param-definition.ts
index 5a8663d22..1b4fe25f3 100644
--- a/src/mol-util/param-definition.ts
+++ b/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;
}
--
GitLab