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
Nicolas Frandeboeuf
kresus
Commits
a1514133
Commit
a1514133
authored
May 12, 2017
by
Benjamin Bouvier
Browse files
Store screen size state in the top-level component and pass it down;
parent
3c96be43
Changes
3
Hide whitespace changes
Inline
Side-by-side
client/components/operations/index.js
View file @
a1514133
...
...
@@ -21,8 +21,8 @@ import SyncButton from './sync-button';
const
OPERATION_BALLAST
=
10
;
// Keep in sync with style.css.
function
computeOperationHeight
()
{
return
window
.
innerWidth
<
768
?
41
:
54
;
function
computeOperationHeight
(
isSmallScreen
)
{
return
isSmallScreen
?
41
:
54
;
}
function
filterOperationsThisMonth
(
operations
)
{
...
...
@@ -50,7 +50,7 @@ class OperationsComponent extends React.Component {
this
.
getOperationHeight
=
this
.
getOperationHeight
.
bind
(
this
);
this
.
getNumItems
=
this
.
getNumItems
.
bind
(
this
);
this
.
operationHeight
=
computeOperationHeight
();
this
.
operationHeight
=
computeOperationHeight
(
this
.
props
.
isSmallScreen
);
this
.
selectModalOperation
=
this
.
selectModalOperation
.
bind
(
this
);
...
...
@@ -92,7 +92,7 @@ class OperationsComponent extends React.Component {
this
.
heightAbove
=
heightAbove
;
this
.
operationHeight
=
computeOperationHeight
();
this
.
operationHeight
=
computeOperationHeight
(
this
.
props
.
isSmallScreen
);
}
computeHeightAbove
()
{
...
...
client/main.js
View file @
a1514133
...
...
@@ -22,29 +22,60 @@ import WeboobInstallReadme from './components/init/weboob-readme';
import
AccountWizard
from
'
./components/init/account-wizard
'
;
import
Loading
from
'
./components/ui/loading
'
;
const
IS_SMALL_SCREEN
=
768
;
const
SMALL_SCREEN_MAX_WIDTH
=
768
;
function
computeIsSmallScreen
(
width
=
null
)
{
let
actualWidth
=
width
;
if
(
width
===
null
)
{
// Mocha does not know window, tests fail without testing window != undefined.
actualWidth
=
typeof
window
!==
'
undefined
'
?
window
.
innerWidth
:
+
Infinity
;
}
return
actualWidth
<=
SMALL_SCREEN_MAX_WIDTH
;
}
// Now this really begins.
class
BaseApp
extends
React
.
Component
{
constructor
(
props
)
{
super
(
props
);
let
isSmallScreen
=
computeIsSmallScreen
();
this
.
state
=
{
isMenuHidden
:
window
.
innerWidth
<
IS_SMALL_SCREEN
isMenuHidden
:
isSmallScreen
,
isSmallScreen
};
this
.
menu
=
null
;
this
.
handleMenuToggle
=
this
.
handleMenuToggle
.
bind
(
this
);
this
.
handleWindowResize
=
this
.
handleWindowResize
.
bind
(
this
);
this
.
resizeTimer
=
null
;
}
handleMenuToggle
()
{
this
.
setState
({
isMenuHidden
:
!
this
.
state
.
isMenuHidden
});
}
handleWindowResize
(
event
)
{
clearTimeout
(
this
.
resizeTimer
);
this
.
resizeTimer
=
setTimeout
(()
=>
{
this
.
setState
({
isSmallScreen
:
computeIsSmallScreen
(
event
.
target
.
innerWidth
)
});
},
500
);
}
componentDidMount
()
{
window
.
addEventListener
(
'
resize
'
,
this
.
handleWindowResize
);
}
componentWillUnMount
()
{
window
.
removeEventListener
(
'
resize
'
,
this
.
handleWindowResize
);
}
render
()
{
let
{
currentAccountId
,
initialAccountId
,
location
,
maybeCurrentAccount
}
=
this
.
props
;
let
handleContentClick
=
null
;
if
(
window
.
innerWidth
<
IS_SMALL_SCREEN
)
{
if
(
this
.
props
.
isSmallScreen
)
{
handleContentClick
=
()
=>
{
this
.
setState
({
isMenuHidden
:
true
});
};
...
...
@@ -75,6 +106,13 @@ class BaseApp extends React.Component {
return
<
Redirect
to
=
'
/
'
/>
;
};
const
makeOperationList
=
props
=>
(
<
OperationList
{
...
props
}
isSmallScreen
=
{
this
.
state
.
isSmallScreen
}
/
>
);
const
renderMain
=
()
=>
{
if
(
!
this
.
props
.
isWeboobInstalled
)
{
return
(
...
...
@@ -135,7 +173,7 @@ class BaseApp extends React.Component {
<
Switch
>
<
Route
path
=
{
'
/reports/:currentAccountId
'
}
component
=
{
OperationList
}
render
=
{
make
OperationList
}
/
>
<
Route
path
=
{
'
/budget/:currentAccountId
'
}
...
...
@@ -185,7 +223,7 @@ class BaseApp extends React.Component {
}
BaseApp
.
propTypes
=
{
// True if
weboob 1.1 (at least)
is installed.
// True if
an adequate version of weboob
is installed.
isWeboobInstalled
:
React
.
PropTypes
.
bool
.
isRequired
,
// True if the user has at least one bank access.
...
...
client/store/ui.js
View file @
a1514133
...
...
@@ -11,7 +11,6 @@ import {
// Basic action creators
const
basic
=
{
setSearchField
(
field
,
value
)
{
return
{
type
:
SET_SEARCH_FIELD
,
...
...
@@ -51,7 +50,6 @@ export function setSearchFields(fieldsMap) {
export
function
resetSearch
(
showDetails
)
{
return
basic
.
resetSearch
(
showDetails
);
}
export
function
toggleSearchDetails
(
show
)
{
return
basic
.
toggleSearchDetails
(
show
);
}
...
...
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