Unverified Commit 88fbbedf authored by Andrey Azov's avatar Andrey Azov Committed by GitHub

Update QuestionButton and BrowserTrackConfig (#348)

- New question icon
- Updated styles for QuestionButton
- Use the `useHover` hook in QuestionButton
- Update QuestionButton
- Replace the `dl` and `dd`-based markup for BrowserTrackConfig
  with a div-based one
- Remove default 40px width from SlideToggle 
parent 39b2110f
Pipeline #98996 passed with stages
in 8 minutes and 5 seconds
@import 'src/styles/common';
.trackConfig {
box-sizing: border-box;
display: grid;
grid-template-columns: 146px 343px 1fr;
background: #f1f2f4;
box-shadow: 1px 1px 10px #6f8190;
display: inline-block;
font: 13px Lato, helvetica, Arial, sans-serif;
position: absolute;
left: -614px;
top: -12px;
height: 45px;
width: 614px;
img {
height: 100%;
width: 100%;
}
dl {
display: inline-block;
.section {
display: flex;
align-items: center;
margin: 8px 0px;
padding: 0px 12px;
}
padding: 0px 18px;
dl:nth-child(2) {
border-left: 1px solid #b7c0c8;
border-right: 1px solid #b7c0c8;
}
&:not(:last-child) {
border-right: 1px solid $grey;
}
dl:last-child {
padding-right: 0;
&:first-child {
justify-content: center;
}
&:last-child {
justify-content: space-between;
padding-right: 34px;
}
}
dd {
display: inline-block;
.toggleWrapper {
margin: 0 6px;
vertical-align: middle;
}
dd.disabled {
opacity: 0.45;
svg {
margin: 0 10px;
}
}
label {
position: relative;
vertical-align: middle;
font-size: 12px;
}
.wrapper {
display: inline-flex;
align-items: center;
height: 28px;
}
/* individual track config item (button container) styling */
.allTracks {
position: relative;
display: flex;
width: 110px;
justify-content: center;
top: 3px;
}
.heightSwitcher {
margin-left: 20px;
}
/* button styling */
.slideToggle {
......@@ -77,6 +53,7 @@
}
.trackHeightIcon {
margin-left: auto;
height: 12px;
width: 50px;
}
......
......@@ -130,79 +130,64 @@ export const BrowserTrackConfig = (props: BrowserTrackConfigProps) => {
});
}, [applyToAll, updateApplyToAll]);
const checkboxStyles = {
checkboxHolder: styles.allTracks
};
return (
<section className={styles.trackConfig} ref={ref}>
<dl>
<dd>
<Checkbox
classNames={checkboxStyles}
label="All tracks"
checked={applyToAll}
onChange={applyToAllToggle}
/>
</dd>
</dl>
<dl>
<dd>
<div className={styles.trackConfig} ref={ref}>
<div className={styles.section}>
<Checkbox
label="All tracks"
checked={applyToAll}
onChange={applyToAllToggle}
/>
</div>
<div className={styles.section}>
<div className={styles.toggleWrapper}>
<label>Track name</label>
<SlideToggle
isOn={shouldShowTrackName}
onChange={toggleName}
className={styles.slideToggle}
/>
</dd>
<dd>
</div>
<div className={styles.toggleWrapper}>
<label>Feature labels</label>
<SlideToggle
isOn={shouldShowTrackLabels}
onChange={toggleLabel}
className={styles.slideToggle}
/>
</dd>
<dd className={styles.heightSwitcher}>
<div className={styles.trackHeightIcon}>
<ImageButton
status={Status.DISABLED}
image={browserTrackConfig.trackHeightIcon.icon}
description={browserTrackConfig.trackHeightIcon.description}
/>
</div>
</dd>
</dl>
<dl>
<dd className={styles.trackLock}>
<div className={styles.trackLockIcon}>
<ImageButton
status={Status.DISABLED}
image={browserTrackConfig.trackLockIcon.icon}
description={browserTrackConfig.trackLockIcon.description}
/>
</div>
</dd>
<dd>
<div className={styles.trackHighlightIcon}>
<ImageButton
status={Status.DISABLED}
image={browserTrackConfig.trackHighlightIcon.icon}
description={browserTrackConfig.trackHighlightIcon.description}
/>
</div>
</dd>
<dd>
<div className={styles.trackMoveIcon}>
<ImageButton
status={Status.DISABLED}
image={browserTrackConfig.trackMoveIcon.icon}
description={browserTrackConfig.trackMoveIcon.description}
/>
</div>
</dd>
</dl>
</section>
</div>
<div className={styles.trackHeightIcon}>
<ImageButton
status={Status.DISABLED}
image={browserTrackConfig.trackHeightIcon.icon}
description={browserTrackConfig.trackHeightIcon.description}
/>
</div>
</div>
<div className={styles.section}>
<div className={styles.trackLockIcon}>
<ImageButton
status={Status.DISABLED}
image={browserTrackConfig.trackLockIcon.icon}
description={browserTrackConfig.trackLockIcon.description}
/>
</div>
<div className={styles.trackHighlightIcon}>
<ImageButton
status={Status.DISABLED}
image={browserTrackConfig.trackHighlightIcon.icon}
description={browserTrackConfig.trackHighlightIcon.description}
/>
</div>
<div className={styles.trackMoveIcon}>
<ImageButton
status={Status.DISABLED}
image={browserTrackConfig.trackMoveIcon.icon}
description={browserTrackConfig.trackMoveIcon.description}
/>
</div>
</div>
</div>
);
};
......
......@@ -15,5 +15,10 @@
.defaultTranscriptLabel {
display: flex;
justify-content: flex-end;
align-items: baseline;
align-items: center;
line-height: 1;
> span {
margin-right: 10px;
}
}
......@@ -27,9 +27,7 @@ import { toggleTranscriptInfo } from 'src/content/app/entity-viewer/state/gene-v
import { Gene } from 'src/content/app/entity-viewer/types/gene';
import { Transcript } from 'src/content/app/entity-viewer/types/transcript';
import { TicksAndScale } from 'src/content/app/entity-viewer/gene-view/components/base-pairs-ruler/BasePairsRuler';
import QuestionButton, {
QuestionButtonOption
} from 'src/shared/components/question-button/QuestionButton';
import QuestionButton from 'src/shared/components/question-button/QuestionButton';
import transcriptsListStyles from '../DefaultTranscriptsList.scss';
import styles from './DefaultTranscriptListItem.scss';
......@@ -82,10 +80,9 @@ export const DefaultTranscriptListItem = (
<div className={transcriptsListStyles.row}>
{props.isDefault && (
<div className={styles.defaultTranscriptLabel}>
{defaultTranscriptLabelMap[canonicalType]?.label}
<span>{defaultTranscriptLabelMap[canonicalType]?.label}</span>
<QuestionButton
helpText={defaultTranscriptLabelMap[canonicalType]?.helpText}
styleOption={QuestionButtonOption.INLINE}
/>
</div>
)}
......
@import 'src/styles/common';
.default {
.quesionButton {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 18px;
height: 18px;
border: 2px solid $blue;
border-radius: 50%;
display: inline-block;
padding: 2px;
> svg {
width: 70%;
height: 70%;
width: 100%;
height: 100%;
fill: $blue;
}
*[class*='tooltip'] {
max-width: 300px;
}
}
.in-input-field {
......@@ -28,7 +19,6 @@
}
.inline {
width: 17px;
height: 17px;
margin-left:17px;
width: 16px;
height: 16px;
}
......@@ -14,11 +14,13 @@
* limitations under the License.
*/
import React, { useState, useRef } from 'react';
import React, { useState, useEffect } from 'react';
import classNames from 'classnames';
import useHover from 'src/shared/hooks/useHover';
import Tooltip from 'src/shared/components/tooltip/Tooltip';
import { ReactComponent as QuestionIcon } from './icon_question.svg';
import { ReactComponent as QuestionIcon } from './question_circle.svg';
import defaultStyles from './QuestionButton.scss';
......@@ -30,24 +32,26 @@ export enum QuestionButtonOption {
type Props = {
helpText: React.ReactNode;
styleOption?: QuestionButtonOption;
styleOption: QuestionButtonOption;
className?: { [key in QuestionButtonOption]?: string };
};
const QuestionButton = (props: Props) => {
const [isHovering, setIsHovering] = useState(false);
const elementRef = useRef<HTMLDivElement>(null);
const [hoverRef, isHovered] = useHover<HTMLDivElement>();
const [shouldShowTooltip, setShouldShowTooltip] = useState(isHovered);
const handleMouseEnter = () => {
setIsHovering(true);
};
useEffect(() => {
setShouldShowTooltip(isHovered);
}, [isHovered]);
const handleMouseLeave = () => {
setIsHovering(false);
const hideTooltip = () => {
// tooltip will detect when user starts scrolling
// and will send a signal to the parent component so that it can be removed
setShouldShowTooltip(false);
};
const className = classNames(
defaultStyles.default,
defaultStyles.quesionButton,
{
[defaultStyles[props.styleOption as string]]: props.styleOption
},
......@@ -55,18 +59,13 @@ const QuestionButton = (props: Props) => {
);
return (
<div
ref={elementRef}
className={className}
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
>
<div ref={hoverRef} className={className}>
<QuestionIcon />
{isHovering && (
{shouldShowTooltip && (
<Tooltip
anchor={elementRef.current}
anchor={hoverRef.current}
autoAdjust={true}
onClose={handleMouseLeave}
onClose={hideTooltip}
>
{props.helpText}
</Tooltip>
......@@ -75,4 +74,8 @@ const QuestionButton = (props: Props) => {
);
};
QuestionButton.defaultProps = {
styleOption: QuestionButtonOption.INLINE
};
export default QuestionButton;
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 204.12 298"><title>icon_question</title><path d="M363.24,200.8c0,67.05-72.42,68.08-72.42,92.86V300a12,12,0,0,1-12,12H233.18a12,12,0,0,1-12-12v-8.66c0-35.74,27.1-50,47.58-61.51,17.56-9.85,28.32-16.55,28.32-29.58,0-17.25-22-28.7-39.78-28.7-23.19,0-33.9,11-49,30a12,12,0,0,1-16.66,2.13l-27.83-21.1a12,12,0,0,1-2.64-16.37C184.85,131.49,214.94,112,261.79,112,310.86,112,363.24,150.3,363.24,200.8Z" transform="translate(-159.12 -112)"/><circle cx="96.88" cy="256" r="42"/></svg>
\ No newline at end of file
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="0 0 32 32" xml:space="preserve">
<path d="M18.3,22.9c0,1.5-1.2,2.6-2.6,2.6s-2.6-1.2-2.6-2.6s1.2-2.6,2.6-2.6S18.3,21.4,18.3,22.9z M22.3,12c0,4.2-4.5,4.2-4.5,5.8
v0.4c0,0.4-0.3,0.8-0.8,0.8h-2.9c-0.4,0-0.8-0.3-0.8-0.8v-0.5c0-2.2,1.7-3.1,3-3.8c1.1-0.6,1.8-1,1.8-1.8c0-1.1-1.4-1.8-2.5-1.8
c-1.5,0-2.1,0.7-3,1.8c-0.3,0.3-0.7,0.4-1,0.1L10,10.9c-0.3-0.3-0.4-0.7-0.2-1c1.5-2.2,3.4-3.4,6.3-3.4C19.1,6.5,22.3,8.9,22.3,12z"
/>
<path d="M16,31C7.7,31,1,24.3,1,16C1,7.7,7.7,1,16,1c8.3,0,15,6.7,15,15C31,24.3,24.3,31,16,31z M16,3.7C9.2,3.7,3.7,9.2,3.7,16
c0,6.8,5.5,12.3,12.3,12.3c6.8,0,12.3-5.5,12.3-12.3C28.3,9.2,22.8,3.7,16,3.7z"/>
</svg>
......@@ -2,8 +2,8 @@ $transitionTime: 0.15s;
.slideToggle {
cursor: pointer;
width: 40px;
user-select: none;
height: 12px;
.slideToggleTrack {
transition: fill $transitionTime ease-in-out,
......
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
<!-- Generator: Adobe Illustrator 23.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="download" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 36 36" style="enable-background:new 0 0 36 36;" xml:space="preserve">
<path d="M25.6,9h-7.4c-0.8,0-1.3,0.7-1.3,1.3v6.2h-2.7l3.8,6.7l3.8-6.7H19v-5.2h5.8v13.6H11.1V9.1h-0.8C9.6,9.1,9,9.8,9,10.4v15.2
c0,0.9,0.7,1.4,1.3,1.4h15.3c0.8,0,1.3-0.7,1.3-1.3V10.3C27,9.6,26.5,9,25.6,9z"/>
<style type="text/css">
.st0{fill:#FFFFFF;}
</style>
<g>
<path id="_x3C_Path_bar_x3E_" class="st0" d="M25.5,27H10.5C9.7,27,9,26.3,9,25.5s0.7-1.5,1.5-1.5h15c0.8,0,1.5,0.7,1.5,1.5
S26.3,27,25.5,27z"/>
<path id="_x3C_Path_arrow_x3E_" class="st0" d="M25.7,9.2c0,0.1,0.1,0.1,0.1,0.2s0,0.1-0.1,0.2l-7.3,10.6c-0.1,0.2-0.3,0.2-0.6,0.1
c-0.1,0-0.1-0.1-0.1-0.1L10.4,9.7c-0.1-0.2-0.1-0.4,0.1-0.6C10.6,9,10.6,9,10.7,9h14.7C25.5,9,25.7,9.1,25.7,9.2z"/>
</g>
</svg>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
<!-- Generator: Adobe Illustrator 23.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="question" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 36 36" style="enable-background:new 0 0 36 36;" xml:space="preserve">
<style type="text/css">
.st0{fill-rule:evenodd;clip-rule:evenodd;}
</style>
<g>
<path class="st0" d="M17.9,27.5c-0.5,0-0.9-0.2-1.3-0.5S16,26.2,16,25.6c0-0.5,0.2-0.9,0.5-1.3c0.4-0.4,0.8-0.5,1.3-0.5
s1,0.2,1.3,0.5c0.4,0.4,0.5,0.8,0.5,1.3c0,0.6-0.2,1-0.6,1.4C18.8,27.3,18.3,27.5,17.9,27.5z"/>
<path class="st0" d="M11.9,13.6c0-0.8,0.3-1.6,0.8-2.4c0.5-0.8,1.2-1.5,2.2-2s2.1-0.8,3.4-0.8c1.2,0,2.2,0.2,3.2,0.7
c0.9,0.4,1.6,1,2.1,1.8s0.7,1.6,0.7,2.5c0,0.7-0.1,1.3-0.4,1.8s-0.6,1-1,1.4s-1.1,1-2.1,1.9c-0.3,0.3-0.5,0.5-0.7,0.7
s-0.3,0.4-0.4,0.5c-0.1,0.2-0.1,0.3-0.2,0.5c0,0.2-0.1,0.4-0.2,0.8c-0.2,0.9-0.6,1.3-1.5,1.3c-0.4,0-0.8-0.1-1.1-0.4
c-0.3-0.3-0.4-0.7-0.4-1.2c0-0.7,0.1-1.3,0.3-1.8c0.2-0.5,0.5-0.9,0.8-1.3c0.4-0.4,0.8-0.8,1.4-1.4c0.5-0.5,0.9-0.8,1.1-1
s0.4-0.5,0.6-0.8s0.2-0.6,0.2-0.9c0-0.7-0.2-1.2-0.7-1.7c-0.5-0.4-1.1-0.7-1.9-0.7c-0.9,0-1.6,0.2-2,0.7s-0.8,1.1-1.1,2
s-0.8,1.4-1.6,1.4c-0.5,0-0.8-0.2-1.2-0.5C12,14.4,11.9,14,11.9,13.6z"/>
</g>
<path d="M20.6,26c0,1.7-1.4,3-3,3s-3-1.4-3-3c0-1.6,1.4-3,3-3S20.6,24.3,20.6,26z M25.3,13.4c0,4.8-5.2,4.9-5.2,6.7v0.4
c0,0.4-0.4,0.9-0.9,0.9h-3.3c-0.4,0-0.9-0.4-0.9-0.9v-0.6c0-2.6,2-3.6,3.4-4.4c1.2-0.7,2.1-1.2,2.1-2.1c0-1.2-1.6-2.1-2.9-2.1
c-1.7,0-2.4,0.8-3.5,2.1c-0.3,0.4-0.8,0.4-1.2,0.1l-2-1.5c-0.4-0.3-0.5-0.8-0.2-1.2C12.5,8.4,14.7,7,18.1,7
C21.6,7,25.3,9.8,25.3,13.4z"/>
</svg>
.inlineWrapper {
display: flex;
align-items: center;
}
.text {
margin-right: 0.6rem;
}
......@@ -20,15 +20,20 @@ import QuestionButton, {
QuestionButtonOption
} from 'src/shared/components/question-button/QuestionButton';
import styles from './QuestionButton.stories.scss';
export default {
title: 'Components/Shared Components/Question button'
};
export const DefaultQuestionButton = () => (
<QuestionButton helpText="This is a hint" />
export const InlineQuestionButton = () => (
<div className={styles.inlineWrapper}>
<span className={styles.text}>Some text requiring an explanation</span>
<QuestionButton helpText="This is a hint" />
</div>
);
DefaultQuestionButton.storyName = 'default';
InlineQuestionButton.storyName = 'inline';
export const InputQuestionButton = () => (
<QuestionButton
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment