Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
Genesys PGR
Genesys Website
Commits
aabd2355
Commit
aabd2355
authored
Nov 29, 2018
by
Oleksii Savran
Committed by
Viacheslav Pavlov
Dec 03, 2018
Browse files
ButtonBar component
ButtonBar component fixed
parent
a4da5efc
Changes
7
Hide whitespace changes
Inline
Side-by-side
locales/en/translations.json
View file @
aabd2355
...
...
@@ -372,7 +372,8 @@
},
"browse"
:
{
"title"
:
"Accession browser"
,
"subTitle"
:
"Explore curated sets of accessions"
"subTitle"
:
"Explore curated sets of accessions"
,
"kml"
:
"KML"
}
}
},
...
...
src/accessions/translations.json
View file @
aabd2355
...
...
@@ -53,7 +53,8 @@
},
"browse"
:
{
"title"
:
"Accession browser"
,
"subTitle"
:
"Explore curated sets of accessions"
"subTitle"
:
"Explore curated sets of accessions"
,
"kml"
:
"KML"
}
}
},
...
...
src/accessions/ui/BrowsePage.tsx
View file @
aabd2355
...
...
@@ -24,6 +24,7 @@ import Tabs, { Tab } from 'ui/common/Tabs';
import
AccessionFilters
from
'
./c/Filters
'
;
// TODO only for demo
import
Button
from
'
@material-ui/core/Button
'
;
import
ButtonBar
from
'
ui/common/buttons/ButtonBar
'
;
class
BrowsePage
extends
BrowsePageTemplate
<
Accession
>
{
protected
static
needs
=
[
...
...
@@ -59,11 +60,11 @@ class BrowsePage extends BrowsePageTemplate<Accession> {
<
Tabs
tab
=
{
currentTab
}
actions
=
{
<
span
>
<
ButtonBar
>
<
Button
variant
=
"contained"
>
{
t
(
'
TODO-Demo Share
'
)
}
</
Button
>
<
Button
variant
=
"contained"
>
{
t
(
'
TODO-Demo Select all
'
)
}
</
Button
>
<
Button
variant
=
"contained"
>
{
t
(
'
TODO-Demo Delete
'
)
}
</
Button
>
<
Button
variant
=
"contained"
>
{
t
(
'
TODO-Demo Share
'
)
}
</
Button
>
</
span
>
</
ButtonBar
>
}
>
<
Tab
name
=
"data"
to
=
{
`/a/
${
filterCode
||
''
}
`
}
>
{
t
(
'
accessions.tab.data
'
)
}
</
Tab
>
...
...
src/accessions/ui/MapPage.tsx
View file @
aabd2355
...
...
@@ -12,6 +12,7 @@ import ContentHeader from 'ui/common/heading/ContentHeader';
import
Button
from
'
@material-ui/core/Button
'
;
import
Tabs
,
{
Tab
}
from
'
ui/common/Tabs
'
;
import
PrettyFilters
from
'
ui/common/filter/PrettyFilters
'
;
import
ButtonBar
from
'
ui/common/buttons/ButtonBar
'
;
let
Map
;
...
...
@@ -88,12 +89,14 @@ class BrowsePage extends React.Component<IMapPageProps, any> {
<
Tabs
tab
=
{
currentTab
}
actions
=
{
<
ButtonBar
>
<
span
>
<
form
method
=
"post"
action
=
"/proxy/api/v1/acn/downloadKml"
>
<
input
type
=
"hidden"
name
=
"f"
value
=
{
filterCode
}
/>
<
Button
type
=
"submit"
>
Download KML
</
Button
>
<
Button
type
=
"submit"
>
{
`
${
t
(
'
common:action.download
'
)}
${
t
(
'
accessions.public.p.browse.kml
'
)}
`
}
</
Button
>
</
form
>
</
span
>
</
ButtonBar
>
}
>
<
Tab
name
=
"data"
to
=
{
`/a/
${
filterCode
||
''
}
`
}
>
{
t
(
'
accessions.tab.data
'
)
}
</
Tab
>
...
...
src/institutes/ui/DisplayPage.tsx
View file @
aabd2355
...
...
@@ -31,6 +31,7 @@ import { CardActions } from 'ui/common/Card';
import
Button
from
'
@material-ui/core/Button
'
;
import
Permissions
from
'
ui/common/permission/Permissions
'
;
import
FaoInstitute
from
'
model/genesys/FaoInstitute
'
;
import
ButtonBar
from
'
ui/common/buttons/ButtonBar
'
;
interface
IDisplayPageProps
extends
React
.
ClassAttributes
<
any
>
{
t
:
any
;
...
...
@@ -140,18 +141,15 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
</
Properties
>
<
CardActions
className
=
"container-spacing-vertical mt-15"
>
<
Button
onClick
=
{
this
.
applyInstituteCodeFilter
}
>
{
t
(
'
institutes.public.p.display.browseAccessions
'
)
}
</
Button
>
<
Button
onClick
=
{
this
.
applyFilterForOverview
}
>
{
t
(
'
accessions.tab.overview
'
)
}
</
Button
>
<
Button
onClick
=
{
()
=>
null
}
>
{
`
${
t
(
'
common:action.download
'
)}
${
t
(
'
institutes.public.p.display.MCPD
'
)}
`
}
</
Button
>
<
Button
onClick
=
{
()
=>
null
}
>
{
`
${
t
(
'
common:action.download
'
)}
${
t
(
'
institutes.public.p.display.PDCI_short
'
)}
`
}
</
Button
>
<
Button
onClick
=
{
()
=>
null
}
>
{
`
${
t
(
'
common:action.download
'
)}
${
t
(
'
institutes.public.p.display.zip
'
)}
`
}
</
Button
>
{
institute
.
details
.
_permissions
.
manage
&&
<
Link
to
=
{
`/dashboard/wiews/
${
institute
.
details
.
code
}
/edit`
}
>
<
Button
variant
=
"contained"
>
{
t
(
'
common:action.edit
'
)
}
</
Button
>
</
Link
>
}
{
institute
.
details
.
_permissions
.
manage
&&
<
Permissions
clazz
=
{
FaoInstitute
.
clazz
}
id
=
{
institute
.
details
.
id
}
/>
}
<
ButtonBar
>
<
Button
onClick
=
{
this
.
applyInstituteCodeFilter
}
>
{
t
(
'
institutes.public.p.display.browseAccessions
'
)
}
</
Button
>
<
Button
onClick
=
{
this
.
applyFilterForOverview
}
>
{
t
(
'
accessions.tab.overview
'
)
}
</
Button
>
<
Button
onClick
=
{
()
=>
null
}
>
{
`
${
t
(
'
common:action.download
'
)}
${
t
(
'
institutes.public.p.display.MCPD
'
)}
`
}
</
Button
>
<
Button
onClick
=
{
()
=>
null
}
>
{
`
${
t
(
'
common:action.download
'
)}
${
t
(
'
institutes.public.p.display.PDCI_short
'
)}
`
}
</
Button
>
<
Button
onClick
=
{
()
=>
null
}
>
{
`
${
t
(
'
common:action.download
'
)}
${
t
(
'
institutes.public.p.display.zip
'
)}
`
}
</
Button
>
{
institute
.
details
.
_permissions
.
manage
&&
<
Link
to
=
{
`/dashboard/wiews/
${
institute
.
details
.
code
}
/edit`
}
><
Button
>
{
t
(
'
common:action.edit
'
)
}
</
Button
></
Link
>
}
{
institute
.
details
.
_permissions
.
manage
&&
<
Permissions
clazz
=
{
FaoInstitute
.
clazz
}
id
=
{
institute
.
details
.
id
}
/>
}
</
ButtonBar
>
</
CardActions
>
</
MainSection
>
...
...
src/ui/common/Tabs.tsx
View file @
aabd2355
...
...
@@ -22,6 +22,8 @@ const styles = (theme) => ({
display
:
'
flex
'
as
'
flex
'
,
height
:
'
auto
'
,
borderBottom
:
'
1px #ccc solid
'
,
alignItems
:
'
center
'
as
'
center
'
,
justifyContent
:
'
space-between
'
as
'
space-between
'
,
},
actionsArea
:
{
display
:
'
flex
'
as
'
flex
'
,
...
...
@@ -30,31 +32,28 @@ const styles = (theme) => ({
overflow
:
'
hidden
'
as
'
hidden
'
,
height
:
'
48px
'
,
left
:
'
100%
'
,
padding
:
'
0 16px
'
,
'
& > * > *
'
:
{
margin
:
'
8px
'
,
'
& > * > button
'
:
{
marginLeft
:
'
15px
'
,
[
theme
.
breakpoints
.
down
(
'
sm
'
)]:
{
marginTop
:
'
5px
'
,
marginBottom
:
'
5px
'
,
},
[
theme
.
breakpoints
.
down
(
'
xs
'
)]:
{
marginLeft
:
'
5px
'
,
width
:
'
100%
'
,
margin
:
'
8px 0
'
,
},
},
[
theme
.
breakpoints
.
down
(
'
sm
'
)]:
{
position
:
'
initial
'
as
'
initial
'
,
overflow
:
'
initial
'
as
'
initial
'
,
display
:
'
initial
'
as
'
initial
'
,
padding
:
'
0
'
,
height
:
'
auto
'
as
'
auto
'
,
marginTop
:
'
48px
'
,
width
:
'
100%
'
,
'
& > *
'
:
{
width
:
'
100%
'
,
}
},
},
tabsArea
:
{
[
theme
.
breakpoints
.
down
(
'
sm
'
)]:
{
position
:
'
absolute
'
as
'
absolute
'
,
},
alignSelf
:
'
flex-end
'
as
'
flex-end
'
,
}
});
/*tslint:enable*/
...
...
@@ -95,7 +94,7 @@ class Tabs extends React.Component<any> {
};
return
(
<
Grid
container
className
=
{
classes
.
root
}
>
<
Grid
container
className
=
{
`pr-10
${
classes
.
root
}
`
}
>
<
Grid
item
className
=
{
`float-left
${
classes
.
tabsArea
}
`
}
>
<
MuiTabs
value
=
{
currentTab
}
indicatorColor
=
"primary"
onChange
=
{
tabChange
}
>
{
tabs
.
map
((
tab
)
=>
<
MuiTab
key
=
{
tab
.
to
}
label
=
{
typeof
tab
.
label
===
'
string
'
?
t
(
tab
.
label
)
:
tab
.
label
}
/>)
}
...
...
src/ui/common/buttons/ButtonBar.tsx
0 → 100644
View file @
aabd2355
import
*
as
React
from
'
react
'
;
import
{
withStyles
}
from
'
@material-ui/core/styles
'
;
import
List
from
'
@material-ui/core/List
'
;
import
ListItem
from
'
@material-ui/core/ListItem
'
;
import
MenuItem
from
'
@material-ui/core/MenuItem
'
;
import
Menu
from
'
@material-ui/core/Menu
'
;
import
ListItemIcon
from
'
@material-ui/core/ListItemIcon
'
;
import
ReorderIcon
from
'
@material-ui/icons/Reorder
'
;
import
Button
from
'
@material-ui/core/Button
'
;
const
styles
=
(
theme
)
=>
({
root
:
{
width
:
'
100%
'
,
display
:
'
flex
'
as
'
flex
'
,
flexFlow
:
'
row wrap
'
as
'
row wrap
'
,
justifyContent
:
'
flex-start
'
as
'
flex-start
'
,
[
theme
.
breakpoints
.
down
(
'
md
'
)]:
{
justifyContent
:
'
flex-end
'
as
'
flex-end
'
,
},
},
/* tslint:disable */
selected
:
{
padding
:
'
0
'
,
'
& > *:first-child
'
:
{
display
:
'
block
'
,
'
@media (min-width: 940px) and (max-width: 1060px)
'
:
{
display
:
'
none
'
,
},
[
theme
.
breakpoints
.
down
(
'
xs
'
)]:
{
display
:
'
none
'
,
},
},
},
menuItem
:
{
padding
:
'
6px 0
'
,
'
& > button
'
:
{
width
:
'
100%
'
,
height
:
'
100%
'
,
'
& > span
'
:
{
justifyContent
:
'
flex-start
'
as
'
flex-start
'
,
}
},
'
& > a
'
:
{
width
:
'
100%
'
,
'
& > button
'
:
{
width
:
'
100%
'
,
'
& > span
'
:
{
justifyContent
:
'
flex-start
'
as
'
flex-start
'
,
}
},
},
'
& > span
'
:
{
width
:
'
100%
'
,
'
& > button
'
:
{
width
:
'
100%
'
,
margin
:
'
0
'
,
'
& > span
'
:
{
justifyContent
:
'
flex-start
'
as
'
flex-start
'
,
}
},
}
},
mobile
:
{
display
:
'
none
'
,
[
theme
.
breakpoints
.
down
(
'
md
'
)]:
{
display
:
'
block
'
,
},
},
desktop
:
{
display
:
'
block
'
,
'
& > *
'
:
{
display
:
'
inline-flex
'
,
marginRight
:
'
10px
'
,
},
[
theme
.
breakpoints
.
down
(
'
md
'
)]:
{
display
:
'
none
'
,
},
},
icon
:
{
margin
:
'
5px
'
,
[
theme
.
breakpoints
.
down
(
'
xs
'
)]:
{
margin
:
'
10px
'
,
}
},
list
:
{
'
& > div > ul
'
:
{
padding
:
'
0
'
,
'
& button
'
:
{
boxShadow
:
'
none
'
,
backgroundColor
:
'
transparent
'
,
}
},
},
firstAction
:
{
padding
:
'
0
'
,
'
& > span
'
:
{
color
:
'
rgba(0, 0, 0, 0.87)
'
,
'
& > button
'
:
{
boxShadow
:
'
none
'
,
backgroundColor
:
'
transparent
'
,
}
},
}
/* tslint:enable */
});
interface
IButtonBarProps
extends
React
.
Props
<
any
>
{
classes
?:
any
;
children
?:
any
[];
}
class
ButtonBar
extends
React
.
Component
<
IButtonBarProps
,
any
>
{
constructor
(
props
:
any
)
{
super
(
props
);
this
.
state
=
{
anchorEl
:
null
,
selectedIndex
:
0
,
};
}
private
handleClickListItem
=
(
event
)
=>
{
this
.
setState
({
anchorEl
:
event
.
currentTarget
});
}
private
handleMenuItemClick
=
(
event
,
index
)
=>
{
this
.
setState
({
selectedIndex
:
index
,
anchorEl
:
null
});
}
private
handleClose
=
()
=>
{
this
.
setState
({
anchorEl
:
null
});
}
public
render
()
{
const
{
classes
,
children
}
=
this
.
props
;
const
{
anchorEl
}
=
this
.
state
;
const
childrenArr
=
React
.
Children
.
toArray
(
children
);
return
(
<
div
className
=
{
classes
.
root
}
>
<
div
className
=
{
classes
.
mobile
}
>
<
List
className
=
{
`p-0`
}
>
<
ListItem
className
=
{
`p-0
${
classes
.
selected
}
`
}
button
aria
-
haspopup
=
"true"
aria
-
controls
=
"button-menu"
onClick
=
{
this
.
handleClickListItem
}
>
<
Button
disabled
className
=
{
classes
.
firstAction
}
>
{
childrenArr
[
this
.
state
.
selectedIndex
]
}
</
Button
>
<
ListItemIcon
className
=
{
`
${
classes
.
icon
}
`
}
>
<
ReorderIcon
/>
</
ListItemIcon
>
</
ListItem
>
</
List
>
<
Menu
id
=
"button-menu"
anchorEl
=
{
anchorEl
}
open
=
{
Boolean
(
anchorEl
)
}
onClose
=
{
this
.
handleClose
}
className
=
{
classes
.
list
}
>
{
childrenArr
.
map
((
button
,
index
)
=>
(
button
&&
(
<
MenuItem
key
=
{
index
}
selected
=
{
null
}
onClick
=
{
(
event
)
=>
this
.
handleMenuItemClick
(
event
,
index
)
}
className
=
{
classes
.
menuItem
}
>
{
button
}
</
MenuItem
>
)
))
}
</
Menu
>
</
div
>
<
div
className
=
{
classes
.
desktop
}
>
{
children
}
</
div
>
</
div
>
);
}
}
export
default
withStyles
(
styles
)(
ButtonBar
);
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