From cd5de96666d6f64a7b21426504ca831d824ccf02 Mon Sep 17 00:00:00 2001 From: Max Lynch Date: Thu, 29 Aug 2013 11:53:36 -0500 Subject: [PATCH] Tweaks to panel and my drag panel demo --- example/cordova/iOS/www/css/framework.css | 61 ++++- example/cordova/iOS/www/index.html | 290 +++++++++++++++++++--- example/panel_controller.html | 256 +++++++++++++++++++ js/ionic-panel.js | 8 +- scss/ionic/structure/_base.scss | 18 ++ scss/ionic/structure/_panel.scss | 7 + scss/ionic/theme/_base.scss | 6 +- 7 files changed, 589 insertions(+), 57 deletions(-) create mode 100644 example/panel_controller.html diff --git a/example/cordova/iOS/www/css/framework.css b/example/cordova/iOS/www/css/framework.css index 784ad91c1f..032ce4480a 100644 --- a/example/cordova/iOS/www/css/framework.css +++ b/example/cordova/iOS/www/css/framework.css @@ -42,6 +42,16 @@ main > * { .content-padded { padding: 10px; } +.section { + position: fixed; + z-index: 1; } + +.full-section { + position: fixed; + z-index: 1; + width: 100%; + height: 100%; } + .alert { padding: 8px 35px 8px 14px; } @@ -221,36 +231,55 @@ a.list-item { margin-bottom: 0; line-height: 1.3; } -[data-panel] { +.ion-panel { display: none; min-height: 100%; max-height: 100%; position: absolute; top: 0; + bottom: 0; z-index: 0; } -.panel-active { +.ion-panel-active-left { + left: 0; } + +.ion-panel-active-right { + right: 0; } + +.ion-panel-active { display: block; width: 270px; } -header, main, footer { +.bar-header, .content, .bar-footer { z-index: 100; left: 0; right: 0; - -webkit-transition: -webkit-transform 300ms ease; - -moz-transition: -moz-transform 300ms ease; - transition: transform 300ms ease; + -webkit-transition: -webkit-transform 200ms ease; + -moz-transition: -moz-transform 200ms ease; + transition: transform 200ms ease; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } -.panel-opened > section > header, -.panel-opened > section > main, -.panel-opened > section > footer { +.ion-panel-left .bar-header, +.ion-panel-left .content, +.ion-panel-left .bar-footer { -webkit-transform: translate3d(270px, 0, 0); -moz-transform: translate3d(270px, 0, 0); transform: translate3d(270px, 0, 0); } +.ion-panel-right .bar-header, +.ion-panel-right .content, +.ion-panel-right .bar-footer { + -webkit-transform: translate3d(-270px, 0, 0); + -moz-transform: translate3d(-270px, 0, 0); + transform: translate3d(-270px, 0, 0); } + +.ion-panel-animated { + -webkit-transition: -webkit-transform 200ms ease; + -moz-transition: -moz-transform 200ms ease; + transition: transform 200ms ease; } + .ptr-capable { -webkit-user-drag: element; } @@ -324,6 +353,11 @@ body { main { background-color: white; } +.full-section { + -webkit-box-shadow: -3px 0px 10px rgba(0, 0, 0, 0.2), 3px 0px 10px rgba(0, 0, 0, 0.2); + -moz-box-shadow: -3px 0px 10px rgba(0, 0, 0, 0.2), 3px 0px 10px rgba(0, 0, 0, 0.2); + box-shadow: -3px 0px 10px rgba(0, 0, 0, 0.2), 3px 0px 10px rgba(0, 0, 0, 0.2); } + .alert { margin-bottom: 1.42857; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); @@ -534,10 +568,15 @@ main { a.list-item { color: #333333; } -[data-panel] { - background: #eeeeee; +.ion-panel { + background: #eeeeee; } + +.ion-panel-left .ion-panel { border-right: 1px solid #bbbbbb; } +.ion-panel-right .ion-panel { + border-left: 1px solid #bbbbbb; } + .ptr-content { background: #eee; } diff --git a/example/cordova/iOS/www/index.html b/example/cordova/iOS/www/index.html index 62fd608188..adcae462a7 100755 --- a/example/cordova/iOS/www/index.html +++ b/example/cordova/iOS/www/index.html @@ -1,45 +1,255 @@ - - - - - - - - - - - - - - -
- - -
    -
  • - Max Lynch -
    • -
- - -
- -
- -

Feeds

-
+ + + Panels -
-
    -
  • - {{room.name}} -
    • -
-
-
+ + + + + + + -
+
- +
+ +

Panels

+ +
+ +
+

+

+
+ +
+

Panels

+
+ +
+ + +
+ This is my default left side panel! +
+ +
+ This is my right side panel! +
+ +
+ This is my other left side panel! +
+ + + + + + + + diff --git a/example/panel_controller.html b/example/panel_controller.html new file mode 100644 index 0000000000..a9eccb31fb --- /dev/null +++ b/example/panel_controller.html @@ -0,0 +1,256 @@ + + + + Panels + + + + + + + + + +
+ +
+ +

Panels

+ +
+ +
+

+

+
+ +
+

Panels

+
+ +
+ + +
+ This is my default left side panel! +
+ +
+ This is my right side panel! +
+ +
+ This is my other left side panel! +
+ + + + + + + + + + diff --git a/js/ionic-panel.js b/js/ionic-panel.js index 3d4349cfaa..470254751a 100644 --- a/js/ionic-panel.js +++ b/js/ionic-panel.js @@ -59,11 +59,9 @@ isPanelOpen = false; // remove from so that no panels should be open - // using the replace method so that it changes the classnames in one go - document.body.className = document.body.className - .replace(PANEL_OPEN_LEFT, "") - .replace(PANEL_OPEN_RIGHT, "") - .trim(); + var className = document.body.className; + className = className.replace(PANEL_OPEN_LEFT, "").replace(PANEL_OPEN_RIGHT, "").trim(); + document.body.className = className; } } diff --git a/scss/ionic/structure/_base.scss b/scss/ionic/structure/_base.scss index c74da987e7..5c4e37f2d3 100644 --- a/scss/ionic/structure/_base.scss +++ b/scss/ionic/structure/_base.scss @@ -49,3 +49,21 @@ main > * { padding: $contentPadding; } +// A section is a wrapper that contains objects that are positioned +// together. For example, the entire contents of a page could +// be a section, to make it easy to drag the section and expose panels +// on the left and right sides of the app. +.section { + position: fixed; + z-index: 1; +} +// A full section is like a section but with a full size +.full-section { + position: fixed; + z-index: 1; + width: 100%; + height: 100%; +} + +.shadow { +} diff --git a/scss/ionic/structure/_panel.scss b/scss/ionic/structure/_panel.scss index 58d6232659..4a7f877a79 100644 --- a/scss/ionic/structure/_panel.scss +++ b/scss/ionic/structure/_panel.scss @@ -55,3 +55,10 @@ -moz-transform: translate3d( ($panelOpenWidth * -1), 0,0 ); transform: translate3d( ($panelOpenWidth * -1), 0,0 ); } + + +.ion-panel-animated { + -webkit-transition: -webkit-transform $panelAnimationSpeed ease; + -moz-transition: -moz-transform $panelAnimationSpeed ease; + transition: transform $panelAnimationSpeed ease; +} diff --git a/scss/ionic/theme/_base.scss b/scss/ionic/theme/_base.scss index 267adbfed8..7d6175ec4c 100644 --- a/scss/ionic/theme/_base.scss +++ b/scss/ionic/theme/_base.scss @@ -7,4 +7,8 @@ body { main { background-color: $baseBackgroundColor; -} \ No newline at end of file +} + +.full-section { + @include box-shadow(#{-3px 0px 10px rgba(0,0,0,0.2), 3px 0px 10px rgba(0,0,0,0.2)}); +}