From 35df55cb4f3e13ebd85b23604c636658444295a5 Mon Sep 17 00:00:00 2001
From: David Sehnal <david.sehnal@gmail.com>
Date: Tue, 31 Mar 2020 17:19:03 +0200
Subject: [PATCH] CSS & structure type auto-apply tweaks
---
src/mol-plugin-state/helpers/root-structure.ts | 5 +++--
src/mol-plugin-state/transforms/model.ts | 4 ++--
src/mol-plugin-ui/controls.tsx | 2 +-
src/mol-plugin-ui/controls/common.tsx | 6 +++++-
src/mol-plugin-ui/controls/icons.tsx | 5 +++--
src/mol-plugin-ui/skin/base/components/controls-base.scss | 4 ++++
6 files changed, 18 insertions(+), 8 deletions(-)
diff --git a/src/mol-plugin-state/helpers/root-structure.ts b/src/mol-plugin-state/helpers/root-structure.ts
index c91325ec4..8b3c7c49f 100644
--- a/src/mol-plugin-state/helpers/root-structure.ts
+++ b/src/mol-plugin-state/helpers/root-structure.ts
@@ -94,8 +94,9 @@ export namespace RootStructureDefinition {
export type Params = PD.Values<ReturnType<typeof getParams>>['type']
- export function isSymmetryType(params: Params) {
- return params.name.indexOf('symmetry') >= 0;
+ export function canAutoUpdate(oldParams: Params, newParams: Params) {
+ if (newParams.name === 'symmetry-assembly' || (newParams.name === 'symmetry' && oldParams.name === 'symmetry')) return false;
+ return true;
}
async function buildAssembly(plugin: PluginContext, ctx: RuntimeContext, model: Model, id?: string) {
diff --git a/src/mol-plugin-state/transforms/model.ts b/src/mol-plugin-state/transforms/model.ts
index 36e7d89f5..5272c204e 100644
--- a/src/mol-plugin-state/transforms/model.ts
+++ b/src/mol-plugin-state/transforms/model.ts
@@ -279,8 +279,8 @@ const StructureFromModel = PluginStateTransform.BuiltIn({
to: SO.Molecule.Structure,
params(a) { return RootStructureDefinition.getParams(a && a.data); }
})({
- canAutoUpdate({ newParams }) {
- return !RootStructureDefinition.isSymmetryType(newParams.type);
+ canAutoUpdate({ oldParams, newParams }) {
+ return RootStructureDefinition.canAutoUpdate(oldParams.type, newParams.type);
},
apply({ a, params }, plugin: PluginContext) {
return Task.create('Build Structure', async ctx => {
diff --git a/src/mol-plugin-ui/controls.tsx b/src/mol-plugin-ui/controls.tsx
index 3a4d088f6..7c1cd2c0b 100644
--- a/src/mol-plugin-ui/controls.tsx
+++ b/src/mol-plugin-ui/controls.tsx
@@ -235,7 +235,7 @@ export class AnimationViewportControls extends PluginUIComponent<{}, { isEmpty:
return <div className='msp-animation-viewport-controls'>
<div>
<div className='msp-semi-transparent-background' />
- <IconButton icon={isAnimating || isPlaying ? 'stop' : 'tape'} title={isAnimating ? 'Stop' : 'Select Animation'}
+ <IconButton icon={isAnimating || isPlaying ? 'stop' : 'tape'} transparent title={isAnimating ? 'Stop' : 'Select Animation'}
onClick={isAnimating || isPlaying ? this.stop : this.toggleExpanded}
disabled={isAnimating|| isPlaying ? false : this.state.isBusy || this.state.isPlaying || this.state.isEmpty} />
</div>
diff --git a/src/mol-plugin-ui/controls/common.tsx b/src/mol-plugin-ui/controls/common.tsx
index 5979862c4..3b75b0f8b 100644
--- a/src/mol-plugin-ui/controls/common.tsx
+++ b/src/mol-plugin-ui/controls/common.tsx
@@ -313,12 +313,16 @@ export function IconButton(props: {
style?: React.CSSProperties,
'data-id'?: string,
extraContent?: JSX.Element,
- flex?: boolean | string | number
+ flex?: boolean | string | number,
+ transparent?: boolean
}) {
let className = `msp-btn msp-btn-icon${props.small ? '-small' : ''}${props.className ? ' ' + props.className : ''}`;
if (typeof props.toggleState !== 'undefined') {
className += ` msp-btn-link-toggle-${props.toggleState ? 'on' : 'off'}`
}
+ if (props.transparent) {
+ className+= ' msp-transparent-bg'
+ }
const iconStyle = props.small ? { fontSize: '80%' } : void 0;
let style: React.CSSProperties | undefined = void 0;
diff --git a/src/mol-plugin-ui/controls/icons.tsx b/src/mol-plugin-ui/controls/icons.tsx
index d17145663..9b5ea99e2 100644
--- a/src/mol-plugin-ui/controls/icons.tsx
+++ b/src/mol-plugin-ui/controls/icons.tsx
@@ -80,8 +80,8 @@ function getSvg(name: SvgIconName) {
}
}
-const circleLeft = <circle r="6px" id="circle-left" cy="16px" cx="12px" strokeWidth="1"/>
-const circleRight = <circle r="6px" id="circle-right" cy="16px" cx="20px" strokeWidth="1"/>
+const circleLeft = <circle r="6px" id="circle-left" cy="16px" cx="12px" strokeWidth="0.5"/>
+const circleRight = <circle r="6px" id="circle-right" cy="16px" cx="20px" strokeWidth="0.5"/>
function Union() {
return <svg width="32px" height="32px" viewBox="0 0 32 32">
@@ -92,6 +92,7 @@ function Union() {
<g>
<use href="#circle-left" className="msp-shape-filled"/>
<use href="#circle-right" className="msp-shape-filled"/>
+ <use href="#circle-left" className="msp-shape-empty"/>
</g>
</svg>;
}
diff --git a/src/mol-plugin-ui/skin/base/components/controls-base.scss b/src/mol-plugin-ui/skin/base/components/controls-base.scss
index 5778b5780..51e2a0400 100644
--- a/src/mol-plugin-ui/skin/base/components/controls-base.scss
+++ b/src/mol-plugin-ui/skin/base/components/controls-base.scss
@@ -287,6 +287,10 @@ select.msp-form-control:-moz-focusring {
background: $default-background;
}
+.msp-transparent-bg {
+ background: transparent;
+}
+
.msp-no-hover-outline {
&:hover {
color: $hover-font-color;
--
GitLab