Framework7: extend f7-Side Panels to "panel-bottom" and "panel-top"

[nimo23]

This is a (multiple allowed):

• [] bug
• [ ] enhancement
• [x] feature-discussion (RFC)

Actually, the Side-Panels have "panel-left" and "panel-right". Please extend the side-panel:

• enable "panel-top" (side-panel comes from top to bottom (for example, half of the screen)
• enable "panel-bottom" (side-panel comes from bottom to top (for example, half of the screen)

This would be great! Thanks!

[valnub]

I don't think there is such a feature in original iOS or Material Design, or not?

[nimo23]

I know, it s not material. But why limiting the developers creativity by saying: "No, you are not allowed to make a panel-top or panel-bottom". It would be easy to add these two animations as the panels are already in f7.

F7 has already some cool features which are not really ios or material specific such as "picker-modal", so it is definitly not wrong to add such cool features to f7. Because this is what f7 aparts from others. A mixture from the best of both is not wrong.

[valnub]

I think @nolimits4web has to decide if this gets implemented or not

[ZanderBrown]

I'm failing to see any uses for these

[nimo23]

F7 has already a "picker modal" which slides like a picker from bottom to top. The content can be anything. And it is useful. However, a sidepanel could be used as a kind like that and as a kind of "split-screen". The other content is darken when sidepanel is active and I can close the sidepanel when clicking the page (darken area) - this is already the case for f7-sidepanel. The "split-screen" (=sidepanel from bottom or top) can be opened for anything where I dont want to make the user a need for a page-transistion. Like a "speed-dialog" for the page. It is useful and the sidepanel is already in f7 - I guess, only two transition modes are needed (from top to bottom and vice versa).

[ZanderBrown]

you mean like a popup? why not use that?

[nimo23]

popup behaves differently and is fullscreen..

[valnub]

@nimo23 Why don't you create a plug-in that replicates this feature for ppl who want it?
If it's good, F7 would even mention it on the plugins section: http://framework7.io/plugins/

[waptaxi]

I also would like to have similar functionality. Some kind of bottom panel, that we can expand by click or swipe. Just like bottom panel in Uber for example.

[JosephShenton]

I already have both top and bottom panels should i make a plugin for them?

[JosephShenton]

and they are also activated via swipe up and swipe down

[nimo23]

For my opinion, writing a "plugin" for a thing which is already included in f7 is not reasonable. F7 has already a "side-panel" which can be positioned left or right (sidepanel_right, sidepanel_left). F7 needs "sidepanel_top" and "sidepanel_bottom". Nothing else. It s only transition operation.

[nimo23]

@iHackify, that sounds good!! push request or plugin? I dont know? Maybe it will be included in the next f7-version. File size and performance matters..

[JosephShenton]

Well idk really how to use GitHub so if u could help me with a push request that would be great @nimo23

[ZanderBrown]

Just to clarify you are going to attempt a Pull Request?

[JosephShenton]

@ZanderBrown Yes

[JosephShenton]

Is that what you guys mean by bottom panel?

[nimo23]

A kind of this. Look at f7-sidepanel. Exactly the same behaviour and visual experience, the only difference is: it splits the screen not from left or right side but from bottom or top. That s all. And if I click anything outside from the sidepanel, the sidepanel closes. This is actually not the case for f7-"popup" or f7-"picker-modal", but for f7-"sidepanel".

[valnub]

Are you guys aware that such a panel would collidate with control center in iOS when you swipe up from the bottom of the screen?

[nolimits4web]

@valnub is right. There is no such implementation because there are no such things in iOS or material specifications. Another heavy reason is that it will be totally useless on iOS as it will conflict with native control center (swipe from the bottom) and notifications center (swipe from the top), so it won't work anyway. There are also no such features as (I believe) developers and good apps must deliver good user experience, so if user opens iOS app he should know and aware and use common gestures and control elements he get used to. Such things may confuse users.

And actually if you need something swipe from up or down you can easily use popup, just add some custom class and specify required height for it (like half height of the screen) and you'll get what you want

[ZanderBrown]

I vote this issue be closed

[waptaxi]

And actually if you need something swipe from up or down you can easily use popup

Could you please provide an example how to open popup with swipe gesture?

[JosephShenton]

@waptaxi

CSS

.popup{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 11000;
    background: transparent;
    box-sizing: border-box;
    display: none;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -ms-transition-property: -ms-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
    -webkit-transform: translate3d(0,100%,0);
    transform: translate3d(0,100%,0);
}

.halfpanel-bottom {
  height: 70%;
  width: 100%;
  position: absolute;
  background: #FFF;
  bottom: 0;
  left: 0;
}

HTML

<script src="https://libraries.cdnhttps.com/ajax/libs/jquery.touchswipe/1.6.12/jquery.touchSwipe.min.js"></script>
<script src="my-app.js"></script>
<div class="popup popup-halfpanel-bottom">
      <div class="halfpanel-bottom">
        <div class="content-block">
        <p>halfpanel-bottom</p>
        <p><a href="#" class="close-popup">Close</a></p>
        <p>Content</p>
      </div>
    </div>
  </div>

JS
Inside of my-app.js

$(function() {      
      // Enable swiping...
      $("body").swipe( {
        // Single swipe handler for left swipes
        swipeUp:function(event, direction, distance, duration, fingerCount) {
          myApp.popup('.popup-halfpanel-bottom');
        },
        // Default is 75px, set to 0 for demo so any distance triggers swipe
        threshold:75
      });
    });

    $(function() {      
      // Enable swiping...
      $("body").swipe( {
        // Single swipe handler for left swipes
        swipeDown:function(event, direction, distance, duration, fingerCount) {
          myApp.closeModal('.popup-halfpanel-bottom');
        },
        // Default is 75px, set to 0 for demo so any distance triggers swipe
        threshold:75
      });
    });

That's what you need for the swipe and bottom panel... Oh and @nolimits4web and @valnub this doesn't conflict with the control center from what my testing has shown

[waptaxi]

@iHackify
So you use third-party library for swipes.
And I think your popup just opens on swipe up, but not follows the finger as F7 side menu does.
And swipes in application don't conflict with iOS control center as system swipes must be done from the side of the screen. Side menu we can enable with some threshold from the side.
There's similar functionality in Uber application, but there we can see small panel at the bottom, which we can expand by swiping up.

[JosephShenton]

yeah i can try to make it using the inbuilt follow finger if u like

[ZanderBrown]

@iHackify if you going to do it you should probably do it properly. Personally, I would rather you didn't do it at all

[nimo23]

Actually, I guess, you are right about that: "it will conflict with native control center".

But I wanted to make this:
Trigger the "bottom panel" by "swipe up the bottom toolbar" and the "top panel" by "swipe down the fixed subnavbar". It s a kind of split-screen or "2 pages" within "one page". Look for example, Android 7 which now supports "Dual-Screen". So it is really a feature which can better usability (not having to switch totally from one page to another and back again).

I will solve that with a popup and resizing as suggested. However, I have to put a listener which closes the popup when clicking about the popup. Sidepanel have such feature with "panelsCloseByOutside" and other things. So you see, f7-sidepanel has all the features which would make a good candidate for "bottom and top panel".

However, if nobody is interested in that, we can close this issue.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.