explorigin/portfolio
1
0
Fork 0
Code Releases Activity

Make appbar state poppable with the back arrow

Browse Source
This commit is contained in:
Timothy Farrell 2017-12-16 04:27:42 -06:00
parent f40a93bba8
commit 637c67a50d
2 changed files with 20 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/gallery/src/interface/allImages.js
View File

@ -136,9 +136,11 @@ export function AllImagesView(vm, params, key, { appbar }) {
la.subscribe(res => images.splice(0, images.length, ...res)),
appbar.subscribe(({ newState, oldState }) => {
appbarState(newState);
if (!newState.selectMode && hasSelectedIDs()) {
selectedIds.clear();
}
}),
hasSelectedIDs.subscribe(selected => {
console.log('hasSelectedIDs subscription');
if (selected && !selectMode()) {
pushAppBarState();
} else if (!selected && appbarState().selectMode) {

34
packages/gallery/src/interface/components/appbar.js
View File

@ -17,10 +17,7 @@ export function AppBarView(vm, params, key, opts) {
const title = computed(state => state.title || '', [currentState]);
const renderButtons = computed(state => state.buttons, [currentState]);
const hasBackButton = computed(stack => stack.length > 1, [stateStack]);
const stateChange = computed((c, p) => ({ newState: c, oldState: p }), [
currentState,
previousState
]);
const stateChange = computed(c => ({ newState: c, oldState: previousState() }), [currentState]);
const boxShadowStyle = computed(
t => (t === 0 ? 'none' : `0px ${Math.min(t / 10, 3)}px 3px rgba(0, 0, 0, .2)`),
@ -32,15 +29,13 @@ export function AppBarView(vm, params, key, opts) {
}
function pushState(newState) {
const oldState = currentState() || {};
previousState(currentState());
stateStack.unshift(Object.assign({ _seq: seq++ }, newState));
previousState(oldState);
}
function popState() {
const oldState = currentState();
previousState(currentState());
stateStack.shift();
previousState(oldState);
}
opts.appbar = {
@ -61,15 +56,20 @@ export function AppBarView(vm, params, key, opts) {
},
[
hasBackButton()
? backButtonContainer([
Icon({
name: 'arrow_left',
size: 0.75,
attrs: {
onclick: popState
}
})
])
? backButtonContainer(
{
onclick: popState
},
[
Icon({
name: 'arrow_left',
size: 0.75,
attrs: {
onclick: popState
}
})
]
)
: null,
titleContainer(title()),
headerRight(_buttons())