Scale up/ down popup vi(poptop, popbottom)

Change-Id: I11444f15eec3769e55f3deb37527b7e84e16a999

diff --git a/demos/tizen-winsets/widgets/naviframe/naviframe_footer_more.html b/demos/tizen-winsets/widgets/naviframe/naviframe_footer_more.html
index 65d656a..571e43f 100755 (executable)
--- a/demos/tizen-winsets/widgets/naviframe/naviframe_footer_more.html
+++ b/demos/tizen-winsets/widgets/naviframe/naviframe_footer_more.html
@@ -19,16 +19,16 @@
                <p>Footer more sample</p>
        </div>
        <div data-role="footer">
-               <a href="#pop_js" data-role="button"  data-icon="naviframe-more" data-rel="popupwindow"></a>
+               <a href="#pop_js" data-role="button"  data-icon="naviframe-more" data-rel="popup"></a>
 
-               <div id="pop_js" data-role="popupwindow" data-show-arrow="true">
+               <div id="pop_js" data-role="popup" >
                <ul data-role="listview">
-                       <li><a href="#" class="ui-btn-ctxpopup-close">Settings</a></li>
-                       <li><a href="#" class="ui-btn-ctxpopup-close">Add to contact</a></li>
-                       <li><a href="#" class="ui-btn-ctxpopup-close">Call log</a></li>
-                       <li><a href="#" class="ui-btn-ctxpopup-close">Music</a></li>
-                       <li><a href="#" class="ui-btn-ctxpopup-close">File manager</a></li>
-                       <li><a href="naviframe.html" class="ui-btn-ctxpopup-close">Internal Link</a></li>
+                       <li><a href="#" data-rel="back">Settings</a></li>
+                       <li><a href="#" data-rel="back">Add to contact</a></li>
+                       <li><a href="#" data-rel="back">Call log</a></li>
+                       <li><a href="#" data-rel="back">Music</a></li>
+                       <li><a href="#" data-rel="back">File manager</a></li>
+                       <li><a href="naviframe.html" data-rel="back">Internal Link</a></li>
                </ul>
        </div>
 </div>

diff --git a/demos/tizen-winsets/widgets/naviframe/naviframe_footer_more_button.html b/demos/tizen-winsets/widgets/naviframe/naviframe_footer_more_button.html
index 33e4a73..8102260 100755 (executable)
--- a/demos/tizen-winsets/widgets/naviframe/naviframe_footer_more_button.html
+++ b/demos/tizen-winsets/widgets/naviframe/naviframe_footer_more_button.html
@@ -19,18 +19,18 @@
                <p>Footer more sample</p>
        </div>
        <div data-role="footer">
-               <a href="#pop_js" data-role="button"  data-icon="naviframe-more" data-rel="popupwindow"></a>
+               <a href="#pop_js" data-role="button"  data-icon="naviframe-more" data-transition="popbottom" data-rel="popup"></a>
 
                <div data-role="button" data-inline="true" data-style="round">Button1</div>
                <div data-role="button" data-inline="true" data-style="round">Button2</div>
 
-               <div id="pop_js" data-role="popupwindow" data-show-arrow="true">
+               <div id="pop_js" data-role="popup" >
                <ul data-role="listview">
-                       <li><a href="#" class="ui-btn-ctxpopup-close">Settings</a></li>
-                       <li><a href="#" class="ui-btn-ctxpopup-close">Add to contact</a></li>
-                       <li><a href="#" class="ui-btn-ctxpopup-close">Call log</a></li>
-                       <li><a href="#" class="ui-btn-ctxpopup-close">Music</a></li>
-                       <li><a href="#" class="ui-btn-ctxpopup-close">File manager</a></li>
+                       <li><a href="#" data-rel="back">Settings</a></li>
+                       <li><a href="#" data-rel="back">Add to contact</a></li>
+                       <li><a href="#" data-rel="back">Call log</a></li>
+                       <li><a href="#" data-rel="back">Music</a></li>
+                       <li><a href="#" data-rel="back">File manager</a></li>
                </ul>
        </div>
 </div>

diff --git a/libs/patch/0020-JQM-Apply-tizen-style-context-popup.patch b/libs/patch/0020-JQM-Apply-tizen-style-context-popup.patch
index a028a8a..09671dd 100644 (file)
--- a/libs/patch/0020-JQM-Apply-tizen-style-context-popup.patch
+++ b/libs/patch/0020-JQM-Apply-tizen-style-context-popup.patch
@@ -53,7 +53,7 @@ index de2af2c..6470bc4 100644
  
                _setTolerance: function( value ) {
 -                      var tol = { t: 30, r: 15, b: 30, l: 15 };
-+                      var tol = { t: 10, r: 10, b: 10, l: 10 };
++                      var tol = { t: 5, r: 5, b: 5, l: 5 };
  
                        if ( value ) {
                                var ar = String( value ).split( "," );
@@ -94,21 +94,21 @@ index de2af2c..6470bc4 100644
 +                                      break;
 +                              case 1:
 +                                      correctionValue = [ 0 , -(ret.y + menuSize.cy - linkOffset.top)];
-+                                      arrowtop = menuSize.cy;
++                                      arrowtop = menuSize.cy - 1;
 +                                      arrowleft = (linkOffset.left - ret.x + correctionValue[0]) + ( $(this.link).width() / 2 ) - parseInt( $(this._ui.arrow).css("border-width") ) / 2;
 +                                      $(this._ui.arrow).attr( "class", "" )
 +                                                                      .addClass( "ui-arrow bottom" );
 +                                      break;
 +                              case 2:
 +                                      correctionValue = [ 0 , ( linkOffset.top + $(this.link).height() - ret.y ) ];
-+                                      arrowtop = - parseInt( $(this._ui.arrow).css("border-width") ) * 2;
++                                      arrowtop = - parseInt( $(this._ui.arrow).css("border-width") ) * 2 + 1;
 +                                      arrowleft = (linkOffset.left - ret.x + correctionValue[0]) + ( $(this.link).width() / 2 ) - parseInt( $(this._ui.arrow).css("border-width") ) / 2;
 +                                      $(this._ui.arrow).attr( "class", "" )
 +                                                                      .addClass("ui-arrow top");
 +                                      break;
 +                              case 3:
 +                                      correctionValue = [ ( menuSize.cx < $(this.link).width() ) ? ( $(this.link).width() / 2 ) + ( menuSize.cx / 2) : $(this.link).width() , 0];
-+                                      arrowtop = ( linkOffset.top - ret.y  ) + ( $(this.link).height() / 2 ) - parseInt( $(this._ui.arrow).css("border-width") );
++                                      arrowtop = ( linkOffset.top - ret.y  ) + ( $(this.link).height() / 2 ) - parseInt( $(this._ui.arrow).css("border-width") ) ;
 +                                      arrowleft = - parseInt( $(this._ui.arrow).css("border-width") ) * 2;
 +                                      $(this._ui.arrow).attr( "class", "" )
 +                                                                      .addClass("ui-arrow right");
@@ -116,7 +116,7 @@ index de2af2c..6470bc4 100644
 +                      }
  
 -                      return { left: ret.x, top: ret.y };
-+                      return { left: ret.x + correctionValue[0], top: ret.y + correctionValue[1] , arrowleft: arrowleft , arrowtop: arrowtop};
++                      return { left: ret.x + correctionValue[0], top: ret.y + correctionValue[1] , arrowleft: arrowleft , arrowtop: arrowtop };
                },
  
                _createPrereqs: function( screenPrereq, containerPrereq, whenDone ) {

diff --git a/src/themes/tizen/common/jquery.mobile.tizen.ctxpopup.less b/src/themes/tizen/common/jquery.mobile.tizen.ctxpopup.less
index 7346aa4..b8eb203 100755 (executable)
--- a/src/themes/tizen/common/jquery.mobile.tizen.ctxpopup.less
+++ b/src/themes/tizen/common/jquery.mobile.tizen.ctxpopup.less
@@ -211,3 +211,117 @@
                border-top-right-radius: @border_radius;
        }
 }
+
+.poptop {
+       -webkit-transform-origin: 0% 0%;
+       -moz-transform-origin: 0% 0%;
+}
+
+.poptop.in {
+       -webkit-transform: scale(1);
+       -moz-transform: scale(1);
+    opacity: 1;
+       -webkit-animation-name: scalepopin;
+       -moz-animation-name: scalepopin;
+       -webkit-animation-duration: 350ms;
+       -moz-animation-duration: 350ms;
+}
+
+.poptop.out {
+       -webkit-animation-name: fadeout;
+       -moz-animation-name: fadeout;
+       opacity: 0;
+       -webkit-animation-duration: 100ms;
+       -moz-animation-duration: 100ms;
+}
+
+.poptop.in.reverse {
+       -webkit-animation-name: fadein;
+       -moz-animation-name: fadein;
+}
+
+.poptop.out.reverse {
+       -webkit-transform: scale(.8);
+       -moz-transform: scale(.8);
+       -webkit-animation-name: scalepopout;
+       -moz-animation-name: scalepopout;
+}
+
+@-webkit-keyframes scalepopin {
+    from {
+        -webkit-transform: scale(.8);
+        opacity: 0;
+    }
+    to {
+        -webkit-transform: scale(1);
+        opacity: 1;
+    }
+}
+
+.popbottom {
+       -webkit-transform-origin: 0% 100%;
+       -moz-transform-origin: 0% 100%;
+}
+
+.popbottom.in {
+       -webkit-transform: scale(1);
+       -moz-transform: scale(1);
+    opacity: 1;
+       -webkit-animation-name: scalepopin;
+       -moz-animation-name: scalepopin;
+       -webkit-animation-duration: 350ms;
+       -moz-animation-duration: 350ms;
+}
+
+.popbottom.out {
+       -webkit-animation-name: fadeout;
+       -moz-animation-name: fadeout;
+       opacity: 0;
+       -webkit-animation-duration: 100ms;
+       -moz-animation-duration: 100ms;
+}
+
+.popbottom.in.reverse {
+       -webkit-animation-name: fadein;
+       -moz-animation-name: fadein;
+}
+
+.popbottom.out.reverse {
+       -webkit-transform: scale(.8);
+       -moz-transform: scale(.8);
+       -webkit-animation-name: scalepopout;
+       -moz-animation-name: scalepopout;
+}
+
+@-moz-keyframes scalepopin {
+    from {
+        -moz-transform: scale(.8);
+        opacity: 0;
+    }
+    to {
+        -moz-transform: scale(1);
+        opacity: 1;
+    }
+}
+
+@-webkit-keyframes scalepopout {
+    from {
+        -webkit-transform: scale(1);
+        opacity: 1;
+    }
+    to {
+        -webkit-transform: scale(.8);
+        opacity: 0;
+    }
+}
+
+@-moz-keyframes scalepopout {
+    from {
+        -moz-transform: scale(1);
+        opacity: 1;
+    }
+    to {
+        -moz-transform: scale(.8);
+        opacity: 0;
+    }
+}
\ No newline at end of file