diff --git a/src/mol-plugin-ui/controls/parameters.tsx b/src/mol-plugin-ui/controls/parameters.tsx index 72ed88351410de24212a6b23eabb1cb2a791515d..f21c052649fc9ba68e5a00564261dca0ae114849 100644 --- a/src/mol-plugin-ui/controls/parameters.tsx +++ b/src/mol-plugin-ui/controls/parameters.tsx @@ -1,5 +1,5 @@ /** - * Copyright (c) 2018-2020 mol* contributors, licensed under MIT, See LICENSE file for more info. + * Copyright (c) 2018-2021 mol* contributors, licensed under MIT, See LICENSE file for more info. * * @author David Sehnal <david.sehnal@gmail.com> * @author Alexander Rose <alexander.rose@weirdbyte.de> @@ -7,7 +7,9 @@ import * as React from 'react'; import { Mat4, Vec2, Vec3 } from '../../mol-math/linear-algebra'; +import { Asset } from '../../mol-util/assets'; import { Color } from '../../mol-util/color'; +import { ColorListEntry } from '../../mol-util/color/color'; import { ColorListName, ColorListOptions, ColorListOptionsScale, ColorListOptionsSet, getColorListFromName } from '../../mol-util/color/lists'; import { Legend as LegendData } from '../../mol-util/legend'; import { memoize1, memoizeLatest } from '../../mol-util/memoize'; @@ -16,16 +18,14 @@ import { ParamDefinition as PD } from '../../mol-util/param-definition'; import { ParamMapping } from '../../mol-util/param-mapping'; import { camelCaseToWords } from '../../mol-util/string'; import { PluginUIComponent } from '../base'; +import { PluginUIContext } from '../context'; import { ActionMenu } from './action-menu'; import { ColorOptions, ColorValueOption, CombinedColorControl } from './color'; import { Button, ControlGroup, ControlRow, ExpandGroup, IconButton, TextInput, ToggleButton } from './common'; -import { Icon, HelpOutlineSvg, CheckSvg, ClearSvg, BookmarksOutlinedSvg, MoreHorizSvg, ArrowDropDownSvg, ArrowRightSvg, ArrowDownwardSvg, ArrowUpwardSvg, DeleteOutlinedSvg, TuneSvg } from './icons'; +import { ArrowDownwardSvg, ArrowDropDownSvg, ArrowRightSvg, ArrowUpwardSvg, BookmarksOutlinedSvg, CheckSvg, ClearSvg, DeleteOutlinedSvg, HelpOutlineSvg, Icon, MoreHorizSvg } from './icons'; import { legendFor } from './legend'; import { LineGraphComponent } from './line-graph/line-graph-component'; import { Slider, Slider2 } from './slider'; -import { Asset } from '../../mol-util/assets'; -import { ColorListEntry } from '../../mol-util/color/color'; -import { PluginUIContext } from '../context'; export type ParameterControlsCategoryFilter = string | null | (string | null)[] @@ -1100,14 +1100,14 @@ export class GroupControl extends React.PureComponent<ParamProps<PD.Group<any>> this.change(item?.value); } - presets() { + pivotedPresets() { if (!this.props.param.presets) return null; const label = this.props.param.label || camelCaseToWords(this.props.name); return <div className='msp-control-group-wrapper'> <div className='msp-control-group-header'> <button className='msp-btn msp-form-control msp-btn-block' onClick={this.toggleShowPresets}> - <Icon svg={TuneSvg} /> + <Icon svg={BookmarksOutlinedSvg} /> {label} Presets </button> </div> @@ -1115,6 +1115,22 @@ export class GroupControl extends React.PureComponent<ParamProps<PD.Group<any>> </div>; } + presets() { + if (!this.props.param.presets) return null; + + return <> + <div className='msp-control-group-presets-wrapper'> + <div className='msp-control-group-header'> + <button className='msp-btn msp-form-control msp-btn-block' onClick={this.toggleShowPresets}> + <Icon svg={BookmarksOutlinedSvg} /> + Presets + </button> + </div> + </div> + {this.state.showPresets && <ActionMenu items={this.presetItems(this.props.param)} onSelect={this.onSelectPreset} />} + </>; + } + pivoted() { const key = this.props.param.pivot as string; const params = this.props.param.params; @@ -1139,7 +1155,7 @@ export class GroupControl extends React.PureComponent<ParamProps<PD.Group<any>> {ctrl} <IconButton svg={MoreHorizSvg} onClick={this.toggleExpanded} toggleState={this.state.isExpanded} title={`More Options`} /> <div className='msp-control-offset'> - {this.presets()} + {this.pivotedPresets()} <ParameterControls params={filtered} onEnter={this.props.onEnter} values={this.props.value} onChange={this.onChangeParam} isDisabled={this.props.isDisabled} /> </div> </div>; @@ -1165,15 +1181,15 @@ export class GroupControl extends React.PureComponent<ParamProps<PD.Group<any>> return controls; } - return <div className='msp-control-group-wrapper'> + return <div className='msp-control-group-wrapper' style={{ position: 'relative' }}> <div className='msp-control-group-header'> <button className='msp-btn msp-form-control msp-btn-block' onClick={this.toggleExpanded}> <Icon svg={this.state.isExpanded ? ArrowDropDownSvg : ArrowRightSvg} /> {label} </button> </div> + {this.presets()} {this.state.isExpanded && <div className='msp-control-offset'> - {this.presets()} {controls} </div>} </div>; diff --git a/src/mol-plugin-ui/skin/base/components/misc.scss b/src/mol-plugin-ui/skin/base/components/misc.scss index 2887e0358715f3b2e6a6d0d8da04aef8cc4bdf9e..8f29d8ad18bd19ea1bbabddeabacf50956fabf8e 100644 --- a/src/mol-plugin-ui/skin/base/components/misc.scss +++ b/src/mol-plugin-ui/skin/base/components/misc.scss @@ -529,6 +529,18 @@ } } +.msp-control-group-presets-wrapper { + position: absolute; + right: 0; + top: 0; + .msp-control-group-header { + background: transparent; + } + button { + background: transparent !important; + } +} + .msp-parameter-matrix { input { flex: 1 1 auto;