Skip to content
GitLab
Menu
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
Luc Didry
kresus
Commits
ca437455
Commit
ca437455
authored
Mar 19, 2019
by
Nicolas Frandeboeuf
Browse files
Make input/select borders behaviour more reusable
parent
5a085982
Changes
7
Hide whitespace changes
Inline
Side-by-side
client/components/operations/category-select.js
View file @
ca437455
...
...
@@ -13,9 +13,14 @@ function formatCreateLabel(label) {
}
let
CategorySelect
=
props
=>
{
let
className
=
'
form-element-block
'
;
if
(
props
.
className
)
{
className
+=
`
${
props
.
className
}
`
;
}
return
(
<
FuzzyOrNativeSelect
className
=
"
form-element-block
"
className
=
{
className
}
clearable
=
{
false
}
creatable
=
{
true
}
formatCreateLabel
=
{
formatCreateLabel
}
...
...
@@ -77,7 +82,10 @@ Export.propTypes = {
value
:
PropTypes
.
string
,
// A callback to be called when the select value changes.
onChange
:
PropTypes
.
func
.
isRequired
onChange
:
PropTypes
.
func
.
isRequired
,
// A CSS class to apply to the select.
className
:
PropTypes
.
string
};
export
default
Export
;
client/components/operations/item.js
View file @
ca437455
...
...
@@ -60,13 +60,13 @@ class Operation extends React.PureComponent {
maybeTypeCell
=
(
<
td
className
=
"
type
"
>
<
OperationTypeSelect
operationId
=
{
op
.
id
}
value
=
{
op
.
type
}
/
>
<
OperationTypeSelect
operationId
=
{
op
.
id
}
value
=
{
op
.
type
}
className
=
"
light
"
/>
<
/td
>
);
maybeCategoryCell
=
(
<
td
className
=
"
category
"
>
<
CategorySelect
operationId
=
{
op
.
id
}
value
=
{
op
.
categoryId
}
/
>
<
CategorySelect
operationId
=
{
op
.
id
}
value
=
{
op
.
categoryId
}
className
=
"
light
"
/>
<
/td
>
);
...
...
@@ -101,7 +101,7 @@ class Operation extends React.PureComponent {
<
/td
>
{
maybeTypeCell
}
<
td
>
<
LabelComponent
item
=
{
op
}
/
>
<
LabelComponent
item
=
{
op
}
inputClassName
=
"
light
"
/>
<
/td
>
<
td
className
=
"
amount
"
>
{
this
.
props
.
formatCurrency
(
op
.
amount
)}
<
/td
>
{
maybeCategoryCell
}
...
...
client/components/operations/type-select.js
View file @
ca437455
...
...
@@ -21,10 +21,15 @@ function noTypeFound() {
return
$t
(
'
client.operations.no_type_found
'
);
}
const
TypeSelect
=
connect
(
state
=>
{
const
TypeSelect
=
connect
((
state
,
props
)
=>
{
let
className
=
'
form-element-block
'
;
if
(
props
.
className
)
{
className
+=
`
${
props
.
className
}
`
;
}
return
{
clearable
:
false
,
className
:
'
form-element-block
'
,
className
,
noOptionsMessage
:
noTypeFound
,
options
:
optionsSelector
(
state
)
};
...
...
@@ -38,7 +43,10 @@ TypeSelect.propTypes = {
value
:
PropTypes
.
string
.
isRequired
,
// A callback to be called when the select value changes.
onChange
:
PropTypes
.
func
.
isRequired
onChange
:
PropTypes
.
func
.
isRequired
,
// A CSS class to apply to the select.
className
:
PropTypes
.
string
};
export
default
TypeSelect
;
client/components/settings/bank-accesses/account.js
View file @
ca437455
...
...
@@ -182,7 +182,7 @@ export default connect(
/
>
<
/td
>
<
td
className
=
"
account-label
"
>
<
AccountLabelComponent
item
=
{
a
}
/
>
<
AccountLabelComponent
item
=
{
a
}
inputClassName
=
"
light
"
/>
<
/td
>
<
td
className
=
"
iban
"
>
{
maybeIban
}
<
/td
>
<
td
className
=
"
actions
"
>
...
...
client/components/settings/bank-accesses/item.js
View file @
ca437455
...
...
@@ -178,6 +178,7 @@ export default connect(
item
=
{
access
}
setCustomLabel
=
{
props
.
setAccessCustomLabel
}
getLabel
=
{
getLabel
}
inputClassName
=
"
light
"
/>
<
/h3
>
<
div
className
=
"
actions
"
>
...
...
client/components/ui/label.js
View file @
ca437455
...
...
@@ -74,12 +74,17 @@ class LabelComponent extends React.Component {
render
()
{
let
label
=
this
.
state
.
value
!==
null
?
this
.
state
.
value
:
this
.
getDefaultValue
();
let
forceEditMode
=
this
.
props
.
forceEditMode
?
'
force-edit-mode
'
:
''
;
let
inputClassName
=
'
form-element-block
'
;
if
(
this
.
props
.
inputClassName
)
{
inputClassName
+=
`
${
this
.
props
.
inputClassName
}
`
;
}
return
(
<
div
className
=
{
`label-component-container
${
forceEditMode
}
`
}
>
<
span
>
{
label
}
<
/span
>
<
input
className
=
"
form-element-block
"
className
=
{
inputClassName
}
type
=
"
text
"
value
=
{
label
}
onChange
=
{
this
.
handleChange
}
...
...
@@ -107,7 +112,10 @@ LabelComponent.propTypes /* remove-proptypes */ = {
forceEditMode
:
PropTypes
.
bool
,
// A function that returns the displayed label.
getLabel
:
PropTypes
.
func
.
isRequired
getLabel
:
PropTypes
.
func
.
isRequired
,
// A CSS class to apply to the input.
inputClassName
:
PropTypes
.
string
};
LabelComponent
.
defaultProps
=
{
...
...
client/themes/default/style.css
View file @
ca437455
...
...
@@ -694,17 +694,15 @@ button.budget-assignment {
z-index
:
auto
;
}
.operation-table
select
:not
(
:hover
)
:not
(
:focus
)
:not
(
:active
),
.operation-table
input
:not
(
:hover
)
:not
(
:focus
)
:not
(
:active
),
.bank-accounts-list
input
:not
(
:hover
)
:not
(
:focus
)
:not
(
:active
),
.operation-table
.Select
:not
(
:hover
)
.Select__control
:not
(
.Select__control--is-focused
)
{
input
.light
:not
(
:hover
)
:not
(
:focus
)
:not
(
:active
),
.Select.light
:not
(
:hover
)
.Select__control
:not
(
.Select__control--is-focused
)
{
color
:
inherit
;
border-color
:
transparent
;
background-image
:
none
;
background-color
:
transparent
;
}
.
operation-table
.Selec
t
:not
(
:hover
)
.Select__control
:not
(
.Select__control--is-focused
)
.Select__indicators
{
.
Select.ligh
t
:not
(
:hover
)
.Select__control
:not
(
.Select__control--is-focused
)
.Select__indicators
{
visibility
:
hidden
;
}
...
...
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