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
6d69c75e
Commit
6d69c75e
authored
Feb 11, 2018
by
Matija Obreza
Browse files
Merge branch '217-scale-descriptor-layout' into 'master'
Resolve "Scale descriptor layout" See merge request
!185
parents
0db7e536
5cd4ee6b
Changes
4
Hide whitespace changes
Inline
Side-by-side
images/descriptor-scale-decimal.png
0 → 100644
View file @
6d69c75e
5.54 KB
images/descriptor-scale-integer.png
0 → 100644
View file @
6d69c75e
4.54 KB
src/ui/catalog/descriptor/DescriptorScale.tsx
View file @
6d69c75e
...
...
@@ -10,20 +10,40 @@ const styles = (theme) => ({
/* tslint:disable */
scaleContainer
:
{
// nop
backgroundRepeat
:
'
repeat no-repeat
'
,
backgroundSize
:
'
40px
'
,
backgroundPosition
:
'
0 1px
'
,
justifyContent
:
'
space-between
'
as
'
space-between
'
,
alignItems
:
'
baseline
'
as
'
baseline
'
,
display
:
'
flex
'
,
flexWrap
:
'
wrap
'
as
'
wrap
'
,
boxSizing
:
'
border-box
'
,
// border
borderBottom
:
'
solid 1px #e4e4e4
'
,
paddingBottom
:
'
2rem
'
,
},
scaleInteger
:
{
backgroundImage
:
'
url(/images/descriptor-scale-integer.png)
'
,
},
scaleDecimal
:
{
backgroundImage
:
'
url(/images/descriptor-scale-decimal.png)
'
,
},
marker
:
{
fontSize
:
'
21px
'
,
textAlign
:
'
center
'
,
'
&:first-of-type
'
:
{
fontWeight
:
'
bold
'
as
'
bold
'
,
},
'
&:last-of-type
'
:
{
'
&:first-of-type, &:last-of-type
'
:
{
fontWeight
:
'
bold
'
as
'
bold
'
,
backgroundColor
:
'
#504d46
'
,
color
:
'
#e1e2df
'
,
width
:
'
25px
'
,
display
:
'
inline-block
'
,
height
:
'
24px
'
,
fontSize
:
'
21px
'
,
},
},
labeled
:
{
border
:
'
solid 1px #88ba42
'
,
color
:
'
White
'
,
// border: 'solid 1px #88ba42',
// borderRadius: '100%',
width
:
'
25px
'
,
display
:
'
inline-block
'
,
...
...
@@ -31,11 +51,16 @@ const styles = (theme) => ({
fontSize
:
'
21px
'
,
backgroundColor
:
'
#88ba42
'
,
textAlign
:
'
center
'
,
}
},
unlabeled
:
{
top
:
'
1.2rem
'
,
position
:
'
relative
'
as
'
relative
'
,
fontSize
:
'
.8rem
'
,
},
/* tslint:enable */
});
const
DescriptorScale
=
({
classes
,
min
,
max
,
labels
,
className
=
''
}:
{
classes
?:
any
,
min
:
number
,
max
:
number
,
labels
:
VocabularyTerm
[],
className
:
string
})
=>
{
const
DescriptorScale
=
({
classes
,
decimal
,
min
,
max
,
labels
,
className
=
''
}:
{
classes
?:
any
,
decimal
?:
boolean
,
min
:
number
,
max
:
number
,
labels
:
VocabularyTerm
[],
className
:
string
})
=>
{
const
bits
:
number
[]
=
labels
.
map
((
l
)
=>
+
l
.
code
);
log
(
`Numeric labels`
,
bits
,
labels
);
...
...
@@ -48,14 +73,15 @@ const DescriptorScale = ({classes, min, max, labels, className = '' }: { classes
return
(
<
div
className
=
{
className
}
>
<
Grid
container
justify
=
"space-between"
alignItems
=
"baseline"
className
=
{
`
${
classes
.
scale
Contain
er
}
mb-
2
0`
}
>
<
div
className
=
{
`
${
classes
.
scaleContainer
}
${
decimal
?
classes
.
scaleDecimal
:
classes
.
scale
Integ
er
}
mb-
1
0`
}
>
{
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
>
<
div
key
=
{
bat
}
className
=
{
`
${
bits
.
indexOf
(
bat
)
<
0
?
(
index
===
0
||
index
===
bats
.
length
-
1
?
''
:
classes
.
unlabeled
)
:
classes
.
labeled
}
${
classes
.
marker
}
`
}
>
<
span
>
{
bat
}
</
span
>
</
div
>
))
}
</
Grid
>
</
div
>
<
p
><
b
>
Legend:
</
b
></
p
>
{
labels
.
map
((
label
,
index
)
=>
(
<
Grid
key
=
{
label
.
code
}
container
justify
=
"space-between"
alignItems
=
"center"
>
<
Grid
item
xs
=
{
2
}
style
=
{
{
textAlign
:
'
center
'
}
}
>
...
...
src/ui/pages/descriptor/DisplayPage.tsx
View file @
6d69c75e
...
...
@@ -160,7 +160,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
<
Properties
>
<
PropertiesItem
title
=
"Allowed values:"
>
{
descriptor
.
integerOnly
?
'
Integers
'
:
'
Decimals
'
}
</
PropertiesItem
>
</
Properties
>
<
DescriptorScale
className
=
"mt-20"
min
=
{
descriptor
.
minValue
}
max
=
{
descriptor
.
maxValue
}
labels
=
{
descriptor
.
terms
}
/>
<
DescriptorScale
className
=
"mt-20"
decimal
=
{
!
descriptor
.
integerOnly
}
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