Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
Genesys PGR
Genesys Catalog
catalog.genesys-pgr.org
Commits
0db7e536
Commit
0db7e536
authored
Feb 11, 2018
by
Matija Obreza
Browse files
Merge branch '217-scale-descriptor-layout' into 'master'
"Scale descriptor layout" See merge request
!184
parents
4c86d3d7
f25f38a3
Changes
2
Hide whitespace changes
Inline
Side-by-side
src/ui/catalog/descriptor/DescriptorScale.tsx
View file @
0db7e536
import
*
as
React
from
'
react
'
;
import
{
withStyles
}
from
'
material-ui/styles
'
;
import
Grid
from
'
material-ui/Grid
'
;
// import { withStyles } from 'material-ui/styles';
import
{
VocabularyTerm
}
from
'
model/vocabulary.model
'
;
import
{
log
}
from
'
utilities/debug
'
;
const
DescriptorScale
=
({
min
,
max
,
labels
,
className
=
''
}:
{
min
:
number
,
max
:
number
,
labels
:
VocabularyTerm
[],
className
:
string
})
=>
{
const
styles
=
(
theme
)
=>
({
/* tslint:disable */
scaleContainer
:
{
// nop
},
marker
:
{
fontSize
:
'
21px
'
,
textAlign
:
'
center
'
,
'
&:first-of-type
'
:
{
fontWeight
:
'
bold
'
as
'
bold
'
,
},
'
&:last-of-type
'
:
{
fontWeight
:
'
bold
'
as
'
bold
'
,
},
},
labeled
:
{
border
:
'
solid 1px #88ba42
'
,
color
:
'
White
'
,
// borderRadius: '100%',
width
:
'
25px
'
,
display
:
'
inline-block
'
,
height
:
'
24px
'
,
fontSize
:
'
21px
'
,
backgroundColor
:
'
#88ba42
'
,
textAlign
:
'
center
'
,
}
/* tslint:enable */
});
const
DescriptorScale
=
({
classes
,
min
,
max
,
labels
,
className
=
''
}:
{
classes
?:
any
,
min
:
number
,
max
:
number
,
labels
:
VocabularyTerm
[],
className
:
string
})
=>
{
const
bits
:
number
[]
=
labels
.
map
((
l
)
=>
+
l
.
code
);
log
(
`Numeric labels`
,
bits
,
labels
);
const
bats
:
number
[]
=
[
min
,
...
bits
,
max
].
sort
();
const
bats
:
number
[]
=
[];
for
(
let
n
=
Math
.
min
(
min
,
max
);
n
<=
Math
.
max
(
min
,
max
);
n
++
)
{
bats
.
push
(
n
);
}
log
(
`To render`
,
bats
);
return
(
<
div
className
=
{
className
}
>
<
Grid
container
justify
=
"space-between"
alignItems
=
"baseline"
className
=
"
mb-20
"
>
{
bats
.
map
((
bat
)
=>
(
<
Grid
key
=
{
bat
}
item
xs
=
{
1
}
style
=
{
{
textAlign
:
'
center
'
}
}
>
<
span
>
{
bat
}
</
span
>
<
Grid
container
justify
=
"space-between"
alignItems
=
"baseline"
className
=
{
`
${
classes
.
scaleContainer
}
mb-20
`
}
>
{
bats
.
map
((
bat
,
index
)
=>
(
<
Grid
key
=
{
bat
}
item
xs
=
{
1
}
className
=
{
`
${
index
===
0
||
index
===
bats
.
length
-
1
?
''
:
bits
.
indexOf
(
bat
)
<
0
?
'
smHidden
'
:
''
}
${
classes
.
marker
}
`
}
>
<
span
className
=
{
bits
.
indexOf
(
bat
)
<
0
?
''
:
classes
.
labeled
}
>
{
bat
}
</
span
>
</
Grid
>
))
}
</
Grid
>
<
b
>
Legend:
</
b
>
{
labels
.
map
((
label
)
=>
(
<
Grid
container
key
=
{
label
.
code
}
>
<
Grid
item
xs
=
{
3
}
/>
<
Grid
item
xs
=
{
9
}
>
<
span
>
{
label
.
code
}
→
<
b
>
{
label
.
title
}
</
b
>
{
label
.
description
&&
<
span
>
{
label
.
description
}
</
span
>
}
</
span
>
{
labels
.
map
((
label
,
index
)
=>
(
<
Grid
key
=
{
label
.
code
}
container
justify
=
"space-between"
alignItems
=
"center"
>
<
Grid
item
xs
=
{
2
}
style
=
{
{
textAlign
:
'
center
'
}
}
>
<
span
className
=
{
classes
.
labeled
}
>
{
label
.
code
}
</
span
>
</
Grid
>
<
Grid
item
xs
=
{
10
}
>
<
b
>
{
label
.
title
}
</
b
>
{
label
.
description
&&
<
span
>
{
label
.
description
}
</
span
>
}
</
Grid
>
</
Grid
>
))
}
...
...
@@ -35,4 +70,4 @@ const DescriptorScale = ({min, max, labels, className = '' }: { min: number, max
);
};
export
default
DescriptorScale
;
export
default
withStyles
(
styles
)(
DescriptorScale
)
;
src/ui/pages/descriptor/DisplayPage.tsx
View file @
0db7e536
...
...
@@ -160,7 +160,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
<
Properties
>
<
PropertiesItem
title
=
"Allowed values:"
>
{
descriptor
.
integerOnly
?
'
Integers
'
:
'
Decimals
'
}
</
PropertiesItem
>
</
Properties
>
<
DescriptorScale
className
=
"
p
-20"
min
=
{
descriptor
.
minValue
}
max
=
{
descriptor
.
maxValue
}
labels
=
{
descriptor
.
terms
}
/>
<
DescriptorScale
className
=
"
mt
-20"
min
=
{
descriptor
.
minValue
}
max
=
{
descriptor
.
maxValue
}
labels
=
{
descriptor
.
terms
}
/>
</
Section
>
</
Grid
>
}
...
...
Write
Preview
Supports
Markdown
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