PDA

View Full Version : Facebook-like slide in menu? Is it possible?



SunboX
6 Nov 2011, 3:47 AM
Could I do a Facebook-App-like slide in menu with ST2? How would i do it? Styling isn´t the problem. I dont know how to do it. Card layout wouldn´t work, it slides the whole page out of view.

This is what I want to achieve:
29066

greetings Sunny

mitchellsimoens
6 Nov 2011, 6:55 AM
Almost anything is possible. All it looks like to me is a docked component that would animate it's width.

SunboX
6 Nov 2011, 6:58 AM
Ah ok, nice idea!

How do I animate the width of an component to screen width - 40px ?

thx Sunny

mitchellsimoens
6 Nov 2011, 7:00 AM
Was trickier than I thought when I tried... couldn't finish as I got put on other things but what I was trying to do was add a CSS rule to add a -webkit-transition and use setWidth.

SunboX
6 Nov 2011, 7:14 AM
Thx, I will try that. :o)

stan229
7 Nov 2011, 9:15 AM
Have you had any luck? I may have a similar requirement, haven't gotten to the stage to play with it though. Kind of like the Twitter iPad app does the horizontal sliding to minimze

http://www.youtube.com/watch?v=SbzdEv30b1Q

mitchellsimoens
7 Nov 2011, 9:20 AM
I actually did something like this last night and what I did is actually render a form to the body and position/size it correctly using setProfile... I could then move the fullscreen panel enough to show the form underneath. SO imagine your Viewport view extending Panel and having it fullscreen. Slide it to the right by adding a CSS rule that adds -webkit-transform: translate(30%, 0); (also need other things to setup the transition).

tomalex0
8 Nov 2011, 3:22 AM
Hi,

How about trying with a floating panel. This may not be an ideal solution but works somewhat. I have only tried this in web browser and came across issue with scroll bar when main panel is moved.

Note : works with ST1x version only




.x-floating.menunavpanelCls.x-panel{
padding: 0px;

-webkit-border-radius: 0em;
border-radius: 0em;
-webkit-box-shadow : none;
color:black;

}
.x-floating.menunavpanelCls .x-panel-body{

-webkit-border-radius: 0em;
border-radius: 0em;
}




Ext.apply(Ext.anims, {
nudge: new Ext.Anim({
direction: 'left',
width:30,
before: function(el) {
this.from = {
'-webkit-transition-duration': '500ms,500ms,500ms',
'-webkit-transition': 'all 500ms ease-in-out'
};

if(this.direction == "left"){
this.to = {
'margin-left' : this.width+'px'
};
} else {
this.to = {
'margin-right' : this.width+'px'
};
}
}
})
});
var card2,mainpanel;
Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {

var card1 = new Ext.Panel({
defaults: {
cls: 'card'
},
dockedItems : [{
xtype : 'toolbar',
ui : 'light',
title : 'One',
items : [{
iconCls: 'maps',
iconMask: true,
ui: 'plain',
handler : function(){
card2.show({
type : 'slide',
direction: 'right',
before : function(){
Ext.Anim.run(card1, 'nudge', {
width:(mainpanel.getWidth()-60),
direction: 'left',
autoClear: false
});
}
});
}
}]
}],
html :'<p class="card card2">This is Card 1</p>'
});

card2 = new Ext.Panel({
floating:true,
modal: false,
centered: false,
componentCls:'menunavpanelCls',
width: 1540,
height:700,
hideOnMaskTap:false,
dockedItems : [{
xtype : 'toolbar',
title : 'All Apps',
items : [{
iconCls: 'arrow_left',
iconMask: true,
ui: 'plain',
handler : function(){
card2.hide({
type : 'slide',
direction: 'right',
before : function(){
Ext.Anim.run(card1, 'nudge', {
width:0,
direction: 'left',
autoClear: false
});
}
});
}
}]
}],
html :'<p class="card">This is Card 2</p>'
});


mainpanel = new Ext.Panel({
fullscreen: true,
items: [card1],
layoutOnOrientationChange : true,
monitorOrientation : true,
listeners :{
beforeorientationchange : function(cmp){
card2.setHeight(cmp.getHeight());
card2.setWidth((cmp.getWidth()-60));
}
}
});
card2.setHeight(mainpanel.getHeight());
card2.setWidth((mainpanel.getWidth()-60));
}
});

tomalex0
8 Nov 2011, 4:10 AM
I have tried this using ripple plugin and looks to work fine. Here are some screen shots2912229123

SunboX
8 Nov 2011, 4:34 AM
Ripple plugin?

tomalex0
8 Nov 2011, 4:42 AM
It's a chrome extension, i have not used extensively .


https://chrome.google.com/webstore/detail/geelfhphabnejjhdalkjhgipohgpdnoc

umr.ashrf
22 Dec 2011, 3:53 AM
I have created similar thing here http://senchafiddle.com/#pplUD and I am not sure how can I apply animation as when user swipe it right to show the menu full size and swipe it right to make width 30 again.

There are just icons right now which I want shown until user wish to to see their names and other info. So how can I animately increase the width of the white left bar from 30 to 130? Also would that affect the panel's content on the right squeezing everything and ruining the right panel's layout?

estesbubba
22 Dec 2011, 1:01 PM
How about just a Ext.Sheet({exit: 'left'}) for a Facebook-like sliding menu?

SunboX
12 Mar 2012, 11:17 AM
Seems like it´s more difficult than mentioned ...

First thing, if you look at the Facebook App, the menu doesn't overlay the content ... so no Ext.Sheet.
Second, the content Panel doesn't get scaled ... it just moves out of the viewport, only a small piece stays visible. And if you tab on this visible piece of content, it hides the menu again. You don't need to tab on the button to hide it, every content thing will force a menu hide. And one more, you could drag the content back in by touching it and swiping to the left. The menu panel would go behind the content.

If it were this easy, I wouldn´t had asked. ;o)

mitchellsimoens
12 Mar 2012, 2:10 PM
What I did is I shifted Ext.Viewport over and had the menu render to the body. Couple things had to take care of like z-index but worked quite well.

wozznik
15 Mar 2012, 4:46 AM
I've been working with something like that, but I've used a panel with hbox layout that contains two views (one for settings view and one for main view).


By default the Settings view is not showed because the Main view has the 100% of viewport width.
When the settings button inside the toolbar from Main view is tapped, the Settings view is showed and the Main view is redimensioned to 20% (the width of settings view is setted to 80%).
If Main view is tapped when Settings view is showed, the controller hides the Setting view and restore the Main view width to 100%.


I hope publish my code in a github repository soon (two or three days) I'm waiting to finish a first part of a blogpost to explain it, before publish the code.

mitchellsimoens
15 Mar 2012, 4:50 AM
I would be careful with using box layouts, they are a performance hit if you use them a lot or use shadows or have complex layouts.

wozznik
18 Mar 2012, 5:09 AM
I've developed something like it, and it seems to work fine. This is a work in progress and still needs work to improve and change things...
You can get the code and a demo application from here: https://github.com/wozznik/Slider-Menu
Read the README file to setting up your application (it's so easy)...

Below you can view the Slider Menu working on iphone simulator.
32860

roycyang
18 Mar 2012, 5:49 PM
I've pulled your example and it looks great. The webkit transform is very smooth (granted I'm testing on iPhone 4S and iPad 3). The next step in my test is to fill the panels with a buncha stuff (images, carousels, etc) and see if that affects the animation at all. Have you gotten there yet?

The core interaction works really naturally. I primarily do tablet apps and one of the things I really like about the Facebook iPhone and iPad apps is that you can:

- swipe the main view to the right to expose the menu
- swipe the main view to the left to hide the menu
- tap the main view to hide the menu

I can see how that could be very resource intensive and not be very smooth. Before I started trying to extend your code, was wondering if you had any thoughts on that?

SunboX
19 Mar 2012, 12:08 AM
Hey wozznik, that´s really great. I will take a look at your code. Two of the three points roycyang mentioned would be "nice to have". These are:


- swipe the main view to the left to hide the menu
- tap the main view to hide the menu

Your code is a good start, keep on :o)

wozznik
19 Mar 2012, 4:41 AM
Hey wozznik, that´s really great. I will take a look at your code. Two of the three points roycyang mentioned would be "nice to have". These are:


- swipe the main view to the left to hide the menu
- tap the main view to hide the menu

Your code is a good start, keep on :o)


Hi!

Firstly, I hadn't say in my last post, but all of you are invited to contribute in the project on github.

I'm still working on the three points that roycyang requests. The first two points are easy, you only need to re-write drag/dragStart/dragEnd events to detect swipe direction and open or close menu... but I'm thinking about what's the best way to detect tap event on the masked main panel some of you has an idea?

I hope release a version with swipe events at the end of this week...

SunboX
19 Mar 2012, 4:43 AM
You could listen to the "tap" (or "click"?) event on this mask. I will take a look next we, and maybe contribute. :o)

-> http://docs.sencha.com/touch/2-0/#!/api/Ext.Mask-event-tap

wozznik
19 Mar 2012, 3:10 PM
You could listen to the "tap" (or "click"?) event on this mask. I will take a look next we, and maybe contribute. :o)

-> http://docs.sencha.com/touch/2-0/#!/api/Ext.Mask-event-tap

I just pull a new version at github with mask tap detection enabled, you can try it :)

I'm still working on enable drag events...

Tambien
22 Mar 2012, 7:19 AM
Very nice wozznik and thanks for sharing your code.

1 thing, when I tried your demo it didn't work because it was searching for some js files.
I changed the following:



Ext.Loader.setPath({
'SliderMenu': 'slider_menu/'
});


into:


Ext.Loader.setPath({
'SliderMenu': 'slider_menu'
});


Thanks again,
Nigel

Tambien
22 Mar 2012, 8:01 AM
Btw, I just tested in on iphone 4s, blackberry torch, 3 different android phones.
Perfect on blackberry and iphone except for android.

When application is loaded the menu is directly visible here is a screenshot:

33022


Nigel

wozznik
22 Mar 2012, 9:09 AM
Thank you for the notice, can you open an issue on github repository?


I suppose that will be a problem with CSS style. I look for it when I have some time...


However, I don't understand the problem explained before because demo application is working correctly on my laptop. In a few minutes I push an update version of SliderMenu with the correct path.


If you solve the problem before me, you can request a pull on the github repo.

EPV
23 Mar 2012, 1:37 AM
We also have:
http://wnielson.github.com/sencha-SlideNavigation/

Tambien
23 Mar 2012, 1:57 AM
Hi EPV,

Thanks for your reply,

Unfortunally for this demo, same problem. works perfect on bb/iphone but android is showing the list only.

Yours,
Nigel

wnielson
26 Mar 2012, 7:13 PM
Hi EPV,

Thanks for your reply,

Unfortunally for this demo, same problem. works perfect on bb/iphone but android is showing the list only.

Yours,
Nigel

Just ran across this thread. FYI, I just committed a new version that adds Android support (tested on SDK versions 2.3.3 and 4.0.3).

wozznik
29 Mar 2012, 8:29 AM
I've pushed a new version of Slider-Menu compatible with Android 4.x, Android 2.x iOS 5 and BB torch.
You can see a demo here

(http://wozznik.github.com/Slider-Menu/)

ssdesign
24 May 2012, 6:12 PM
This is really nice job. Thanks.

I am also interested in the slide to show and hide the options.
If anyone has already worked this out, please let me know.
Meanwhile I will continue to investigate how to add this feature.

edit:
Also came across this one, it also looks pretty nice.
Wish I can combine both into one :D
http://www.sencha.com/forum/showthread.php?173990-Sliding-Side-Menu&highlight=drag