Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
ensembl-web
ensembl-client
Commits
7ea2128c
Unverified
Commit
7ea2128c
authored
Jul 28, 2021
by
Manoj Pandian Sakthivel
Committed by
GitHub
Jul 28, 2021
Browse files
Contact us overlay (#536)
parent
f21c940e
Pipeline
#179568
passed with stages
in 4 minutes and 32 seconds
Changes
23
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
Showing
20 changed files
with
278 additions
and
44 deletions
+278
-44
src/ensembl/src/content/app/browser/Browser.scss
src/ensembl/src/content/app/browser/Browser.scss
+0
-6
src/ensembl/src/content/app/browser/Browser.tsx
src/ensembl/src/content/app/browser/Browser.tsx
+1
-1
src/ensembl/src/content/app/help/Help.scss
src/ensembl/src/content/app/help/Help.scss
+13
-3
src/ensembl/src/content/app/help/Help.tsx
src/ensembl/src/content/app/help/Help.tsx
+9
-1
src/ensembl/src/content/app/species-selector/components/species-selector-app-bar/SpeciesSelectorAppBar.test.tsx
...s/species-selector-app-bar/SpeciesSelectorAppBar.test.tsx
+5
-0
src/ensembl/src/content/home/Home.scss
src/ensembl/src/content/home/Home.scss
+14
-8
src/ensembl/src/content/home/Home.tsx
src/ensembl/src/content/home/Home.tsx
+6
-1
src/ensembl/src/global/globalActions.ts
src/ensembl/src/global/globalActions.ts
+14
-18
src/ensembl/src/root/rootReducer.ts
src/ensembl/src/root/rootReducer.ts
+2
-0
src/ensembl/src/shared/components/app-bar/AppBar.scss
src/ensembl/src/shared/components/app-bar/AppBar.scss
+8
-0
src/ensembl/src/shared/components/app-bar/AppBar.tsx
src/ensembl/src/shared/components/app-bar/AppBar.tsx
+7
-1
src/ensembl/src/shared/components/communication-framework/CommunicationPanel.scss
...omponents/communication-framework/CommunicationPanel.scss
+74
-0
src/ensembl/src/shared/components/communication-framework/CommunicationPanel.tsx
...components/communication-framework/CommunicationPanel.tsx
+60
-0
src/ensembl/src/shared/components/communication-framework/ConversationIcon.scss
.../components/communication-framework/ConversationIcon.scss
+3
-0
src/ensembl/src/shared/components/communication-framework/ConversationIcon.tsx
...d/components/communication-framework/ConversationIcon.tsx
+49
-0
src/ensembl/src/shared/components/help-popup/HelpPopupButton.scss
...mbl/src/shared/components/help-popup/HelpPopupButton.scss
+1
-1
src/ensembl/src/shared/components/overlay/Overlay.scss
src/ensembl/src/shared/components/overlay/Overlay.scss
+1
-1
src/ensembl/src/shared/components/overlay/Overlay.tsx
src/ensembl/src/shared/components/overlay/Overlay.tsx
+2
-1
src/ensembl/src/shared/components/panel/Panel.test.tsx
src/ensembl/src/shared/components/panel/Panel.test.tsx
+7
-0
src/ensembl/src/shared/components/panel/Panel.tsx
src/ensembl/src/shared/components/panel/Panel.tsx
+2
-2
No files found.
src/ensembl/src/content/app/browser/Browser.scss
View file @
7ea2128c
@import
'src/styles/common'
;
.browserInnerWrapper
{
display
:
grid
;
align-items
:
start
;
grid-template-rows
:
80px
1fr
;
}
.exampleLinks
{
margin-top
:
50px
;
padding-left
:
80px
;
...
...
src/ensembl/src/content/app/browser/Browser.tsx
View file @
7ea2128c
...
...
@@ -117,7 +117,7 @@ export const Browser = (props: BrowserProps) => {
return
(
<
ApolloProvider
client
=
{
client
}
>
<
div
className
=
{
styles
.
browserInnerWrapper
}
>
<
div
>
<
BrowserAppBar
onSpeciesSelect
=
{
changeGenomeId
}
/>
{
props
.
activeGenomeId
&&
props
.
browserQueryParams
.
focus
?
(
<
StandardAppLayout
...
...
src/ensembl/src/content/app/help/Help.scss
View file @
7ea2128c
...
...
@@ -5,10 +5,20 @@
}
.appBar
{
display
:
flex
;
display
:
grid
;
align-items
:
center
;
height
:
80px
;
padding
:
0
44px
;
height
:
86px
;
padding-left
:
44px
;
grid-template-columns
:
100px
auto
;
.conversationIcon
{
justify-self
:
end
;
width
:
40px
;
height
:
24px
;
margin-right
:
20px
;
margin-top
:
29px
;
}
}
.main
{
...
...
src/ensembl/src/content/app/help/Help.tsx
View file @
7ea2128c
...
...
@@ -19,6 +19,7 @@ import { useLocation } from 'react-router';
import
useApiService
from
'
src/shared/hooks/useApiService
'
;
import
ConversationIcon
from
'
ensemblRoot/src/shared/components/communication-framework/ConversationIcon
'
;
import
HelpMenu
from
'
./components/help-menu/HelpMenu
'
;
import
HelpLanding
from
'
./components/help-landing/HelpLanding
'
;
import
{
...
...
@@ -66,7 +67,14 @@ const Help = () => {
};
const
AppBar
=
()
=>
{
return
<
div
className
=
{
styles
.
appBar
}
>
Help
</
div
>;
return
(
<
div
className
=
{
styles
.
appBar
}
>
Help
<
div
className
=
{
styles
.
conversationIcon
}
>
<
ConversationIcon
/>
</
div
>
</
div
>
);
};
const
MainContent
=
(
props
:
{
article
:
ArticleData
})
=>
{
...
...
src/ensembl/src/content/app/species-selector/components/species-selector-app-bar/SpeciesSelectorAppBar.test.tsx
View file @
7ea2128c
...
...
@@ -37,6 +37,11 @@ jest.mock('connected-react-router', () => ({
push
:
jest
.
fn
(()
=>
({
type
:
'
push
'
}))
}));
jest
.
mock
(
'
ensemblRoot/src/shared/components/communication-framework/ConversationIcon
'
,
()
=>
()
=>
<
div
>
ConversationIcon
</
div
>
);
const
defaultProps
=
{
selectedSpecies
:
times
(
5
,
()
=>
createSelectedSpecies
()),
push
...
...
src/ensembl/src/content/home/Home.scss
View file @
7ea2128c
...
...
@@ -84,30 +84,36 @@
.homeTopRight
{
position
:
absolute
;
top
:
0
;
right
:
3
0px
;
top
:
7px
;
right
:
2
0px
;
color
:
$blue
;
font-weight
:
$bold
;
display
:
grid
;
grid-template-columns
:
auto
auto
;
height
:
40px
;
cursor
:
pointer
;
height
:
28px
;
.
wrapper
{
.
howToUse
{
display
:
grid
;
grid-template-columns
:
130px
auto
;
}
.text
{
margin-top
:
10px
;
align-self
:
center
;
}
.helpIcon
{
width
:
32px
;
height
:
32px
;
width
:
25px
;
height
:
22px
;
border-radius
:
5px
;
fill
:
$white
;
background-color
:
$blue
;
}
.conversationIcon
{
width
:
40px
;
margin-left
:
15px
;
height
:
25px
;
}
}
.speciesContainer
{
...
...
src/ensembl/src/content/home/Home.tsx
View file @
7ea2128c
...
...
@@ -17,6 +17,8 @@
import
React
from
'
react
'
;
import
{
Link
}
from
'
react-router-dom
'
;
import
ConversationIcon
from
'
ensemblRoot/src/shared/components/communication-framework/ConversationIcon
'
;
import
{
ReactComponent
as
Logotype
}
from
'
static/img/brand/logotype.svg
'
;
import
{
ReactComponent
as
SpeciesSelectorIcon
}
from
'
static/img/launchbar/species-selector.svg
'
;
import
{
ReactComponent
as
BrowserIcon
}
from
'
static/img/launchbar/browser.svg
'
;
...
...
@@ -33,7 +35,7 @@ import styles from './Home.scss';
const
Home
=
()
=>
{
const
helpButton
=
(
<
div
className
=
{
styles
.
wrapper
}
>
<
div
className
=
{
styles
.
howToUse
}
>
<
div
className
=
{
styles
.
text
}
>
How to use Ensembl
</
div
>
<
HelpIcon
className
=
{
styles
.
helpIcon
}
/>
</
div
>
...
...
@@ -93,6 +95,9 @@ const Home = () => {
<
div
className
=
{
styles
.
homeTopRight
}
>
<
Link
to
=
"/help"
>
{
helpButton
}
</
Link
>
<
div
className
=
{
styles
.
conversationIcon
}
>
<
ConversationIcon
/>
</
div
>
</
div
>
</
div
>
...
...
src/ensembl/src/global/globalActions.ts
View file @
7ea2128c
...
...
@@ -27,23 +27,19 @@ export const setBreakpointWidth = createAction(
'
browser/update-breakpoint-width
'
)
<
BreakpointWidth
>
();
export
const
saveScrollPosition
=
createAction
(
'
update-scroll-position
'
)
<
S
croll
P
osition
>
();
export
const
saveScrollPosition
=
createAction
(
'
update-s
croll
-p
osition
'
)
<
ScrollPosition
>
();
export
const
updateBreakpointWidth
:
ActionCreator
<
ThunkAction
<
void
,
any
,
null
,
Action
<
string
>
>>
=
(
viewportWidth
:
BreakpointWidth
)
=>
async
(
dispatch
,
getState
:
()
=>
RootState
)
=>
{
const
state
=
getState
();
const
currentBreakpointWidth
=
getBreakpointWidth
(
state
);
export
const
updateBreakpointWidth
:
ActionCreator
<
ThunkAction
<
void
,
any
,
null
,
Action
<
string
>>
>
=
(
viewportWidth
:
BreakpointWidth
)
=>
async
(
dispatch
,
getState
:
()
=>
RootState
)
=>
{
const
state
=
getState
();
const
currentBreakpointWidth
=
getBreakpointWidth
(
state
);
if
(
viewportWidth
!==
currentBreakpointWidth
)
{
dispatch
(
setBreakpointWidth
(
viewportWidth
));
}
};
if
(
viewportWidth
!==
currentBreakpointWidth
)
{
dispatch
(
setBreakpointWidth
(
viewportWidth
));
}
};
src/ensembl/src/root/rootReducer.ts
View file @
7ea2128c
...
...
@@ -25,6 +25,7 @@ import global from '../global/globalReducer';
import
header
from
'
../header/headerReducer
'
;
import
ensObjects
from
'
../shared/state/ens-object/ensObjectReducer
'
;
import
inAppSearch
from
'
../shared/state/in-app-search/inAppSearchSlice
'
;
import
communication
from
'
../shared/state/communication/communicationSlice
'
;
import
speciesSelector
from
'
../content/app/species-selector/state/speciesSelectorReducer
'
;
import
entityViewer
from
'
src/content/app/entity-viewer/state/entityViewerReducer
'
;
import
speciesPage
from
'
src/content/app/species/state/index
'
;
...
...
@@ -34,6 +35,7 @@ const createRootReducer = (history: any) =>
browser
,
drawer
,
customDownload
,
communication
,
ensObjects
,
inAppSearch
,
genome
,
...
...
src/ensembl/src/shared/components/app-bar/AppBar.scss
View file @
7ea2128c
...
...
@@ -3,6 +3,7 @@
.appBar
{
display
:
grid
;
grid-template-columns
:
minmax
(
0
,
1fr
)
minmax
(
250px
,
auto
);
grid-template-rows
:
auto
40px
;
align-content
:
start
;
grid-template-areas
:
'top top'
...
...
@@ -31,12 +32,19 @@
grid-area
:
main
;
margin-left
:
2em
;
max-width
:
100%
;
align-self
:
start
;
}
.appBarAside
{
grid-area
:
right
;
display
:
flex
;
justify-content
:
flex-end
;
.conversationIcon
{
width
:
40px
;
margin-left
:
15px
;
height
:
25px
;
}
}
.helpLink
{
...
...
src/ensembl/src/shared/components/app-bar/AppBar.tsx
View file @
7ea2128c
...
...
@@ -16,6 +16,7 @@
import
React
from
'
react
'
;
import
ConversationIcon
from
'
ensemblRoot/src/shared/components/communication-framework/ConversationIcon
'
;
import
Chevron
from
'
src/shared/components/chevron/Chevron
'
;
import
styles
from
'
./AppBar.scss
'
;
...
...
@@ -30,7 +31,12 @@ export const AppBar = (props: AppBarProps) => (
<
section
className
=
{
styles
.
appBar
}
>
<
div
className
=
{
styles
.
appBarTop
}
>
{
props
.
appName
}
</
div
>
<
div
className
=
{
styles
.
appBarMain
}
>
{
props
.
mainContent
}
</
div
>
<
div
className
=
{
styles
.
appBarAside
}
>
{
props
.
aside
}
</
div
>
<
div
className
=
{
styles
.
appBarAside
}
>
{
props
.
aside
}
<
div
className
=
{
styles
.
conversationIcon
}
>
<
ConversationIcon
/>
</
div
>
</
div
>
</
section
>
);
...
...
src/ensembl/src/shared/components/communication-framework/CommunicationPanel.scss
0 → 100644
View file @
7ea2128c
@import
'src/styles/common'
;
.wrapper
{
position
:
fixed
;
width
:
100%
;
height
:
100%
;
top
:
1px
;
z-index
:
11
;
/* Need to go above the top bar */
}
.panelWrapper
{
position
:
fixed
;
right
:
0
;
top
:
110px
;
z-index
:
11
;
/* Need to go above the top bar */
height
:
calc
(
100%
-
150px
);
max-height
:
750px
;
animation
:
.3s
ease-out
0s
1
slideInFromRight
;
}
.panel
{
position
:
relative
;
min-height
:
100px
;
border-top-left-radius
:
5px
;
border-bottom-left-radius
:
5px
;
max-width
:
100%
;
background
:
$white
;
box-shadow
:
1px
1px
4px
$shadow-color
;
height
:
100%
;
z-index
:
2
;
width
:
750px
;
}
.panelBody
{
position
:
relative
;
border-bottom-right-radius
:
5px
;
border-bottom-left-radius
:
5px
;
overflow
:
auto
;
height
:
100%
;
}
.panelCloseButton
{
position
:
absolute
;
right
:
25px
;
top
:
20px
;
z-index
:
1
;
}
.panelContent
{
display
:
grid
;
grid-template-columns
:
95px
auto
;
height
:
100%
;
.conversationIcon
{
width
:
40px
;
margin
:
17px
0
0
27px
;
}
}
.overlay
{
background-color
:
rgba
(
0
,
0
,
0
,
0
.1
);
position
:
fixed
;
}
@keyframes
slideInFromRight
{
0
%
{
transform
:
translateX
(
100%
);
opacity
:
0
;
}
100
%
{
transform
:
translateX
(
0
);
opacity
:
1
;
}
}
src/ensembl/src/shared/components/communication-framework/CommunicationPanel.tsx
0 → 100644
View file @
7ea2128c
/**
* See the NOTICE file distributed with this work for additional information
* regarding copyright ownership.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import
React
from
'
react
'
;
import
{
useDispatch
,
useSelector
}
from
'
react-redux
'
;
import
Overlay
from
'
src/shared/components/overlay/Overlay
'
;
import
CloseButton
from
'
src/shared/components/close-button/CloseButton
'
;
import
{
toggleCommunicationPanel
}
from
'
src/shared/state/communication/communicationSlice
'
;
import
{
isCommunicationPanelOpen
}
from
'
src/shared/state/communication/communicationSelector
'
;
import
{
ReactComponent
as
ConversationIcon
}
from
'
static/img/shared/icon_conversation.svg
'
;
import
styles
from
'
./CommunicationPanel.scss
'
;
const
CommunicationPanel
=
()
=>
{
const
showCommunicationPanel
=
useSelector
(
isCommunicationPanelOpen
);
const
dispatch
=
useDispatch
();
if
(
!
showCommunicationPanel
)
{
return
null
;
}
const
onClose
=
()
=>
{
dispatch
(
toggleCommunicationPanel
());
};
return
(
<
div
className
=
{
styles
.
wrapper
}
>
<
Overlay
className
=
{
styles
.
overlay
}
/>
<
div
className
=
{
styles
.
panelWrapper
}
>
<
div
className
=
{
styles
.
panel
}
>
<
CloseButton
className
=
{
styles
.
panelCloseButton
}
onClick
=
{
onClose
}
/>
<
div
className
=
{
styles
.
panelBody
}
>
<
div
className
=
{
styles
.
panelContent
}
>
<
div
className
=
{
styles
.
conversationIcon
}
>
<
ConversationIcon
/>
</
div
>
</
div
>
</
div
>
</
div
>
</
div
>
</
div
>
);
};
export
default
CommunicationPanel
;
src/ensembl/src/shared/components/communication-framework/ConversationIcon.scss
0 → 100644
View file @
7ea2128c
.conversationIcon
{
cursor
:
pointer
;
}
src/ensembl/src/shared/components/communication-framework/ConversationIcon.tsx
0 → 100644
View file @
7ea2128c
/**
* See the NOTICE file distributed with this work for additional information
* regarding copyright ownership.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import
React
from
'
react
'
;
import
{
useDispatch
}
from
'
react-redux
'
;
import
{
toggleCommunicationPanel
}
from
'
src/shared/state/communication/communicationSlice
'
;
import
{
ReactComponent
as
ConversationImageIcon
}
from
'
static/img/shared/icon_conversation.svg
'
;
import
CommunicationPanel
from
'
ensemblRoot/src/shared/components/communication-framework/CommunicationPanel
'
;
import
{
Environment
,
isEnvironment
}
from
'
src/shared/helpers/environment
'
;
import
styles
from
'
./ConversationIcon.scss
'
;
const
ConversationIcon
=
()
=>
{
const
dispatch
=
useDispatch
();
if
(
isEnvironment
([
Environment
.
PRODUCTION
]))
{
return
null
;
}
const
onClick
=
()
=>
{
dispatch
(
toggleCommunicationPanel
());
};
return
(
<>
<
CommunicationPanel
/>
<
ConversationImageIcon
onClick
=
{
onClick
}
className
=
{
styles
.
conversationIcon
}
/>
</>
);
};
export
default
ConversationIcon
;
src/ensembl/src/shared/components/help-popup/HelpPopupButton.scss
View file @
7ea2128c
...
...
@@ -14,7 +14,7 @@
display
:
inline-flex
;
align-items
:
center
;
padding
:
0
3px
;
height
:
18
px
;
height
:
22
px
;
background
:
$blue
;
font-size
:
0
;
border-radius
:
5px
;
...
...
src/ensembl/src/shared/components/overlay/Overlay.scss
View file @
7ea2128c
...
...
@@ -7,5 +7,5 @@
left
:
0
;
right
:
0
;
background-color
:
rgba
(
255
,
255
,
255
,
0
.7
);
z-index
:
1
;
z-index
:
1
1
;
/* Need to go above the top bar */
}
src/ensembl/src/shared/components/overlay/Overlay.tsx
View file @
7ea2128c
...
...
@@ -20,11 +20,12 @@ import styles from './Overlay.scss';
type
OverlayProps
=
{
className
?:
string
;
onClick
?:
()
=>
void
;
};
const
Overlay
=
(
props
:
OverlayProps
)
=>
{
const
overlayClassNames
=
classNames
(
styles
.
overlayDefault
,
props
.
className
);
return
<
div
className
=
{
overlayClassNames
}
></
div
>;
return
<
div
className
=
{
overlayClassNames
}
onClick
=
{
props
.
onClick
}
></
div
>;
};
export
default
Overlay
;
src/ensembl/src/shared/components/panel/Panel.test.tsx
View file @
7ea2128c
...
...
@@ -105,4 +105,11 @@ describe('<Tabs />', () => {
true
);
});
it
(
'
hides the header when there is no header
'
,
()
=>
{
const
{
container
}
=
renderPanel
({
header
:
undefined
});
const
header
=
container
.
querySelector
(
'
.header
'
)
as
HTMLElement
;
expect
(
header
).
toBeFalsy
();
});
});
src/ensembl/src/shared/components/panel/Panel.tsx
View file @
7ea2128c
...
...
@@ -22,7 +22,7 @@ import CloseButton from 'src/shared/components/close-button/CloseButton';
import
styles
from
'
./Panel.scss
'
;
export
type
PanelProps
=
{
header
:
ReactNode
;
header
?
:
ReactNode
;
children
:
ReactNode
;
classNames
?:
{
panel
?:
string
;
...
...
@@ -55,7 +55,7 @@ const Panel = (props: PanelProps) => {
{
onClose
&&
(
<
CloseButton
className
=
{
closeButtonClassNames
}
onClick
=
{
onClose
}
/>
)
}
<
div
className
=
{
headerClassNames
}
>
{
header
}
</
div
>
{
props
.
header
&&
<
div
className
=
{
headerClassNames
}
>
{
header
}
</
div
>
}
<
div
className
=
{
bodyClassNames
}
>
<
div
>
{
props
.
children
}
</
div
>
</
div
>
...
...
Prev
1
2
Next
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