This repository was archived by the owner on May 27, 2021. It is now read-only.

Several bug fixes from various authors + exposing isOpen function to the $scope #27

Open

redfox05 wants to merge 40 commits into ionic-team:master from redfox05:master

.gitignore

100644 → 100755

Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		..sw
		node_modules

Gruntfile.js

-Original file line number
+Diff line change
@@ -0,0 +1,20 @@
+    module.exports = function(grunt) {
+      grunt.initConfig({
+        pkg: grunt.file.readJSON('package.json'),
+        connect: {
+          demo: {
+            options: {
+              open: true,
+              port: 8888,
+              keepalive: true,
+              base: '.'
+            }
+          }
+        }
+      });
+      grunt.loadNpmTasks('grunt-contrib-connect');
+      grunt.registerTask('default', 'connect');
+    };

README.md

100644 → 100755

-Original file line number
+Diff line change
@@ Expand Up / @@ -2,3 +2,59 @@ ionic-contrib-drawer @@
     ====================
     A side menu drawer for Ionic apps
+    #####Setting up:
+    Clone the ionic-ion-drawer repo into the lib folder in your ionic project so it looks like:
+    *yourProjectName/www/lib/ionic-ion-drawer*
+    Add the ionic-contrib-drawer.js and ionic-contrib-drawer.css files to your index file
+        <link href="lib/ionic-ion-drawer/ionic.contrib.drawer.css" rel="stylesheet">
+        <script src="lib/ionic-ion-drawer/ionic.contrib.drawer.js"></script>
+    Add ionic.contrib.drawer to your Angular app:
+        angular.module('App', [
+          'ionic',
+          'ionic.contrib.drawer'
+        ])
+    #####Usage:
+     Add the `<drawer>` directive to your ionic templates or index.html files.
+    #####Example:
+        <ion-view>
+          <ion-content>
+            <div class="bar bar-header bar-dark">
+              <h1 class="title">Example</h1>
+            </div>
+          </ion-content>
+          <drawer side="right">
+            <ion-content>
+              <h2>Menu</h2>
+              <button ng-click="closeDrawer()">Close</button>
+              <ion-list>
+                <ion-item>Friends</ion-item>
+                <ion-item>Favorites</ion-item>
+                <ion-item>Search</ion-item>
+              </ion-list>
+            </ion-content>
+          </drawer>
+        </ion-view>
+    Change the 'side' attribute of the `<drawer>` to either "right" or "left" to switch the side the drawer opens from.
+    #####Credits:
+    driftyco: https://github.com/driftyco (original build)
+    vitalyrotari: https://github.com/vitalyrotari (bug fixes, improved performance, background fading
+    transition)
+    brybott: https://github.com/brybott (right side functionality)

bower.json

100644 → 100755

Empty file.

custom.css

-Original file line number
+Diff line change
@@ -0,0 +1,27 @@
+    drawer, drawer.left, drawer.right {
+      background-color: #222;
+      top: 44px;
+      width:20%;
+    }
+    .drawer-overlay {
+      top: 44px;
+    }
+    drawer h2 {
+      color: #fff;
+      margin-top: 40px !important;
+      margin-left: 15px;
+      font-weight: 200;
+    }
+    .item {
+      background: none;
+      color: #fff;
+    }
+    .item:first-child {
+      border-top: 0px;
+    }
+    .item:last-child {
+      border-bottom: 0px;
+    }

index.html

100644 → 100755

-Original file line number
+Diff line change
@@ Expand Up / @@ -4,47 +4,18 @@ @@
         <meta charset="utf-8">
         <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
         <title>Ionic Seed App</title>
-        <!-- ionic css -->
-        <!--<link href="http://code.ionicframework.com/1.0.0-beta.13/css/ionic.css" rel="stylesheet">-->
-        <link href="../ionic/dist/css/ionic.css" rel="stylesheet">
+        <link href="http://code.ionicframework.com/1.0.0-beta.14/css/ionic.css" rel="stylesheet">
         <link rel="stylesheet" href="ionic.contrib.drawer.css">
+        <link rel="stylesheet" href="custom.css">
         <!-- angularjs scripts -->
-        <script src="../ionic/dist/js/ionic.bundle.js"></script>
+        <script src="http://code.ionicframework.com/1.0.0-beta.14/js/ionic.bundle.js"></script>
         <script src="ionic.contrib.drawer.js"></script>
-        <style>
-          drawer {
-            background-color: #222;
-          }
-          drawer h2 {
-            color: #fff;
-            margin-top: 40px !important;
-            margin-left: 15px;
-            font-weight: 200;
-          }
-          .item {
-            background: none;
-            color: #fff;
-          }
-          .item:first-child {
-            border-top: 0px;
-          }
-          .item:last-child {
-            border-bottom: 0px;
-          }
-        </style>
-      </head>
-      <!--
-        'starter' is the name of this angular module (js/app.js)
-      -->
+      </head>
       <body ng-app="app">
         <drawer side="left">
           <ion-content>
             <h2>Menu</h2>
-            <button ng-click="closeDrawer()">Close</button>
             <ion-list>
               <ion-item>Friends</ion-item>
               <ion-item>Favorites</ion-item>
@@ Expand All / @@ -54,7 +25,10 @@ <h2>Menu</h2> @@
         </drawer>
         <ion-pane>
           <ion-content>
-            <button ng-click="openDrawer()">Open</button>
+            <ion-header-bar class="bar-positive text-right">
+              <button class="drawer-button" ng-show="!drawerIsOpen()" ng-click="openDrawer()" ng-class="{'drawer-open': drawerIsOpen()}">Open</button>
+              <button class="drawer-button" ng-show="drawerIsOpen()" ng-click="closeDrawer()" ng-class="{'drawer-open': drawerIsOpen()}">Close</button>
+            </ion-header-bar>
           </ion-content>
         </ion-pane>
         <script>
@@ Expand Down @@

ionic.contrib.drawer.css

100644 → 100755

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -1,26 +1,49 @@
  
    drawer {

      display: block;

      position: fixed;

      width: 270px;

      height: 100%;

      width: 90%;

      z-index: 100;

      background: #ffffff;

    }

    drawer.animate {

      -webkit-transition: 0.4s all ease-in-out;

      transition: 0.4s all ease-in-out;

    drawer.animate, .menu-animated {

      -webkit-transition: -webkit-transform 0.4s ease-in-out;

      transition: transform 0.4s ease-in-out;

    }

    drawer.left {

      -webkit-transform: translate3d(-100%, 0, 0);

      transform: translate3d(-100%, 0, 0);

      box-shadow: 1px 0px 10px rgba(0,0,0,0.3);

    }

    drawer.right {

      right: 0;

      top: 0;

      -webkit-transform: translate3d(100%, 0, 0);

      transform: translate3d(100%, 0, 0);

      box-shadow: -1px 0px 10px rgba(0,0,0,0.3);

    }

    drawer.closed {

      box-shadow: none;

    }

    .drawer-overlay {

      background-color: rgba(0, 0, 0, 0.6);

      opacity: 0;

      position: fixed;

      top: 0;

      left: 0;

      width: 100%;

      height: 100%;

      z-index: 99;

      -webkit-transform: translate3d(-100%, 0, 0);

      transform: translate3d(-100%, 0, 0);

    }

    .drawer-overlay.animate {

      -webkit-transition: 0.4s opacity ease-in-out;

      transition: 0.4s opacity ease-in-out;

    }

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Several bug fixes from various authors + exposing isOpen function to the $scope #27

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

Several bug fixes from various authors + exposing isOpen function to the $scope #27

Are you sure you want to change the base?

Uh oh!

Several bug fixes from various authors + exposing isOpen function to the $scope #27

Uh oh!

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!