Skip to content
GitLab
Projects
Groups
Snippets
Help
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Open sidebar
ensembl-web
ensembl-client
Commits
7e93819e
Unverified
Commit
7e93819e
authored
Sep 17, 2021
by
Imran Salam
Committed by
GitHub
Sep 17, 2021
Browse files
Update zmenu layout in genome browser (#583)
parent
4853a9ec
Pipeline
#194530
passed with stages
in 6 minutes and 46 seconds
Changes
7
Pipelines
2
Hide whitespace changes
Inline
Side-by-side
Showing
7 changed files
with
27 additions
and
70 deletions
+27
-70
src/ensembl/src/content/app/browser/zmenu/Zmenu.scss
src/ensembl/src/content/app/browser/zmenu/Zmenu.scss
+1
-14
src/ensembl/src/content/app/browser/zmenu/ZmenuAppLinks.tsx
src/ensembl/src/content/app/browser/zmenu/ZmenuAppLinks.tsx
+13
-26
src/ensembl/src/shared/components/toolbox/toolbox-expandable-content/ToolboxExpandableContent.scss
.../toolbox-expandable-content/ToolboxExpandableContent.scss
+0
-8
src/ensembl/src/shared/components/toolbox/toolbox-expandable-content/ToolboxExpandableContent.test.tsx
...lbox-expandable-content/ToolboxExpandableContent.test.tsx
+2
-2
src/ensembl/src/shared/components/toolbox/toolbox-expandable-content/ToolboxExpandableContent.tsx
...x/toolbox-expandable-content/ToolboxExpandableContent.tsx
+10
-13
src/ensembl/stories/shared-components/toolbox/Toolbox.stories.scss
...bl/stories/shared-components/toolbox/Toolbox.stories.scss
+0
-4
src/ensembl/stories/shared-components/toolbox/Toolbox.stories.tsx
...mbl/stories/shared-components/toolbox/Toolbox.stories.tsx
+1
-3
No files found.
src/ensembl/src/content/app/browser/zmenu/Zmenu.scss
View file @
7e93819e
...
...
@@ -40,20 +40,7 @@
.zmenuAppLinks
{
display
:
flex
;
align-items
:
center
;
}
.zmenuAppButton
{
flex
:
0
0
auto
;
height
:
20px
;
width
:
20px
;
margin-left
:
16px
;
svg
{
width
:
20px
;
height
:
20px
;
fill
:
$white
;
background-color
:
$blue
;
}
justify-content
:
space-between
;
}
.zmenuToggleFooter
{
...
...
src/ensembl/src/content/app/browser/zmenu/ZmenuAppLinks.tsx
View file @
7e93819e
...
...
@@ -21,11 +21,7 @@ import * as urlFor from 'src/shared/helpers/urlHelper';
import
{
parseFeatureId
}
from
'
src/content/app/browser/browserHelper
'
;
import
{
buildFocusIdForUrl
}
from
'
src/shared/state/ens-object/ensObjectHelpers
'
;
import
{
getBrowserActiveGenomeId
,
getBrowserActiveEnsObjectId
,
isFocusObjectPositionDefault
}
from
'
../browserSelectors
'
;
import
{
getBrowserActiveGenomeId
}
from
'
../browserSelectors
'
;
import
{
ToggleButton
as
ToolboxToggleButton
}
from
'
src/shared/components/toolbox
'
;
import
ViewInApp
,
{
UrlObj
}
from
'
src/shared/components/view-in-app/ViewInApp
'
;
...
...
@@ -38,8 +34,6 @@ type Props = {
const
ZmenuAppLinks
=
(
props
:
Props
)
=>
{
const
genomeId
=
useSelector
(
getBrowserActiveGenomeId
);
const
activeFeatureId
=
useSelector
(
getBrowserActiveEnsObjectId
);
const
isInDefaultPosition
=
useSelector
(
isFocusObjectPositionDefault
);
const
parsedFeatureId
=
parseFeatureId
(
props
.
featureId
);
...
...
@@ -52,33 +46,26 @@ const ZmenuAppLinks = (props: Props) => {
const
getBrowserLink
=
()
=>
urlFor
.
browser
({
genomeId
,
focus
:
featureIdForUrl
});
const
getEntityViewerLink
=
()
=>
urlFor
.
entityViewer
({
genomeId
,
entityId
:
featureIdForUrl
});
const
shouldShowBrowserButton
=
props
.
featureId
!==
activeFeatureId
||
!
isInDefaultPosition
;
const
links
:
UrlObj
=
{};
if
(
shouldShowBrowserButton
)
{
links
[
'
genomeBrowser
'
]
=
{
const
links
:
UrlObj
=
{
genomeBrowser
:
{
url
:
getBrowserLink
(),
replaceState
:
true
};
}
links
[
'
entityViewer
'
]
=
{
url
:
getEntityViewerLink
()
};
},
entityViewer
:
{
url
:
urlFor
.
entityViewer
({
genomeId
,
entityId
:
featureIdForUrl
})
}
};
return
(
<
div
className
=
{
styles
.
zmenuAppLinks
}
>
<
ViewInApp
links
=
{
links
}
/>
<
ToolboxToggleButton
className
=
{
styles
.
zmenuToggleFooter
}
openElement
=
{
<
span
>
Download
</
span
>
}
label
=
"Download"
/>
<
ViewInApp
links
=
{
links
}
/>
</
div
>
);
};
...
...
src/ensembl/src/shared/components/toolbox/toolbox-expandable-content/ToolboxExpandableContent.scss
View file @
7e93819e
@import
'src/styles/common'
;
$toggleButtonHeight
:
14px
;
.main
{
position
:
relative
;
}
.toggleButton
{
display
:
inline-block
;
user-select
:
none
;
cursor
:
pointer
;
}
src/ensembl/src/shared/components/toolbox/toolbox-expandable-content/ToolboxExpandableContent.test.tsx
View file @
7e93819e
...
...
@@ -25,7 +25,7 @@ import ToolboxExpandableContent, {
const
MainContent
=
()
=>
(
<
div
data
-
test
-
id
=
"main content"
>
<
span
>
This is main content
</
span
>
<
ToggleButton
openElement
=
{
<
span
>
Click me!
</
span
>
}
/>
<
ToggleButton
label
=
"
Click me!
"
/>
</
div
>
);
const
FooterContent
=
()
=>
(
...
...
@@ -51,7 +51,7 @@ describe('<ToolboxExpandableContent />', () => {
render
(<
ToolboxExpandableContent
{
...
minimalProps
}
/>);
const
toggleButton
=
screen
.
getByText
(
'
Click me!
'
);
userEvent
.
click
(
toggleButton
);
userEvent
.
click
(
toggleButton
as
HTMLElement
);
const
footerContent
=
screen
.
queryByTestId
(
'
footer content
'
);
expect
(
footerContent
).
toBeTruthy
();
...
...
src/ensembl/src/shared/components/toolbox/toolbox-expandable-content/ToolboxExpandableContent.tsx
View file @
7e93819e
...
...
@@ -15,10 +15,9 @@
*/
import
React
,
{
useState
,
useContext
,
ReactNode
}
from
'
react
'
;
import
classNames
from
'
classnames
'
;
import
noop
from
'
lodash/noop
'
;
import
CloseButton
from
'
src/shared/components/
close-button/CloseButton
'
;
import
ShowHide
from
'
src/shared/components/
show-hide/ShowHide
'
;
import
styles
from
'
./ToolboxExpandableContent.scss
'
;
...
...
@@ -34,12 +33,11 @@ type ToolboxExpandableContentProps = {
type
ToggleButtonProps
=
{
className
?:
string
;
openElement
:
ReactNode
;
label
:
string
;
};
const
ToolboxExpandableContentContext
=
React
.
createContext
<
ToolboxContext
|
null
>
(
null
);
const
ToolboxExpandableContentContext
=
React
.
createContext
<
ToolboxContext
|
null
>
(
null
);
const
ToolboxExpandableContent
=
(
props
:
ToolboxExpandableContentProps
)
=>
{
const
[
isExpanded
,
setIsExpanded
]
=
useState
(
false
);
...
...
@@ -69,13 +67,12 @@ export const ToggleButton = (props: ToggleButtonProps) => {
toggleExpanded
();
};
const
buttonClasses
=
classNames
(
styles
.
toggleButton
,
props
.
className
);
return
isExpanded
?
(
<
CloseButton
className
=
{
buttonClasses
}
onClick
=
{
handleClick
}
/>
)
:
(
<
span
className
=
{
buttonClasses
}
onClick
=
{
handleClick
}
>
{
props
.
openElement
}
</
span
>
return
(
<
ShowHide
label
=
{
props
.
label
}
onClick
=
{
handleClick
}
isExpanded
=
{
isExpanded
}
/>
);
};
...
...
src/ensembl/stories/shared-components/toolbox/Toolbox.stories.scss
View file @
7e93819e
...
...
@@ -18,10 +18,6 @@
margin-left
:
1em
;
float
:
right
;
}
.download
{
color
:
$blue
;
font-size
:
12px
;
}
}
.mainToolboxContent
,
...
...
src/ensembl/stories/shared-components/toolbox/Toolbox.stories.tsx
View file @
7e93819e
...
...
@@ -32,15 +32,13 @@ export const DefaultStory = () => {
setIsShowing
(
!
isShowing
);
};
const
downloadElement
=
<
span
className
=
{
styles
.
download
}
>
Download
</
span
>;
const
mainToolboxContent
=
(
<
div
className
=
{
styles
.
mainToolboxContent
}
>
<
p
>
This is main toolbox content
</
p
>
<
p
>
This is the second paragraph
<
span
className
=
{
styles
.
toggleButton
}
>
<
ToolboxToggleButton
openElement
=
{
downloadElement
}
/>
<
ToolboxToggleButton
label
=
"Download"
/>
</
span
>
</
p
>
</
div
>
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment