Close #8 - Add the possibility to expand/hide sub tasks

src/app/bullet/bulletDirective.js

@@ -82,6 +82,15 @@
                     populateIndexes(bullets);
                 }, true);
 
+                /**
+                 * Check if the given bullet has sub bullets
+                 * @param  {bullet}  bullet the bullet
+                 * @return {Boolean} true if it has sub bullets, false otherwise
+                 */
+                scope.hasBullets = function hasBullets(bullet) {
+                    return bullet.bullets.length > 0;
+                };
+
                 /**
                  * Select the bullet in wich the cursor must be focused
                  * @param {[Integer]} indexes the array of indexes in wich the cursor must be focuses
@@ -211,6 +220,17 @@
 
                     $event.preventDefault();
                 };
+
+                /**
+                 * Show/Hide the sub bullets of the selected bullet
+                 * @param  {event} $event the event
+                 * @param  {[Integer]} indexes the array of indexes of the bullet
+                 */
+                scope.expandHideBullets = function expandHideBullets($event, indexes) {
+                    var bullet = bulletUtils.findBullet(scope.bullets, indexes.slice());
+                    bullet.hideBullets = !bullet.hideBullets;
+                    $event.preventDefault();
+                };
             }
         };
     });

src/app/bullet/bulletFactory.js

@@ -8,21 +8,23 @@
     angular.module('bullet').factory('bulletFactory', function() {
         return {
             /**
-             * [newItem description]
+             * Build a new bullet
              * @param  {String} text the text to show
              * @param  {String} index the index of the bullet
              * @param  {Boolean} focus true if it must be focused, false otherwise
              * @param  {Boolean} complete true if the bullet is complete, false otherwise
              * @param  {[Integer]} subBullets the sub bullets of the bullets
+             * @param  {Boolean} hideBullets true if it must hide the bullets, false otherwise
              * @return {JSONobject} the new bullet
              */
-            newBullet: function(index, text, focus, complete, subBullets) {
+            newBullet: function(index, text, focus, complete, subBullets, hideBullets) {
                 return {
                     index: index || [0],
                     text: text || '',
                     focus: focus || false,
                     complete: complete || false,
-                    bullets: subBullets || []
+                    bullets: subBullets || [],
+                    hideBullets: hideBullets || false
                 };
             }
         };

src/app/bullet/templates/bullet.html

@@ -1,6 +1,8 @@
+<input ng-show="hasBullets(bullet)" type="checkbox" id="ckbx-{{bullet.index}}" ng-checked="!bullet.hideBullets"/>
+<label ng-class="{'has-bullets':hasBullets(bullet)}" for="ckbx-{{bullet.index}}"></label>
 <input ng-model="bullet.text" type="text" ng-class="{complete:bullet.complete}" bul-focusme="bullet.focus" 
-       ui-keydown="{'ctrl-enter': 'completeBullet($event, bullet.index)', 'enter': 'addBullet($event, bullet.index)', 'ctrl-alt-backspace': 'removeBullet($event, bullet.index)', 'down': 'selectBullet(bullet.index, 1)', 'up': 'selectBullet(bullet.index, -1)', 'shift-tab': 'toBullet($event, bullet.index)', 'tab': 'toSubBullet($event, bullet.index)'}" 
+       ui-keydown="{'ctrl-enter': 'completeBullet($event, bullet.index)', 'enter': 'addBullet($event, bullet.index)', 'ctrl-alt-backspace': 'removeBullet($event, bullet.index)', 'down': 'selectBullet(bullet.index, 1)', 'up': 'selectBullet(bullet.index, -1)', 'shift-tab': 'toBullet($event, bullet.index)', 'tab': 'toSubBullet($event, bullet.index)', 'ctrl-space': 'expandHideBullets($event, bullet.index)'}" 
        ng-click="selectBullet(bullet.index)" />
-<ul>
-    <li ng-repeat="bullet in bullet.bullets" ng-include="'app/bullet/templates/bullet.html'"></li>
-</ul>
+<ul class="bullets" ng-hide="bullet.hideBullets">
+    <li class="bullet" ng-repeat="bullet in bullet.bullets" ng-include="'app/bullet/templates/bullet.html'"></li>
+</ul>

src/app/bullet/templates/bullets.html

@@ -1,3 +1,3 @@
-<ul>
+<ul class="bullets">
     <li ng-repeat="bullet in bullets" ng-include="'app/bullet/templates/bullet.html'"></li>
 </ul>

src/app/bulletularCtrl.js

@@ -1,6 +1,6 @@
 (function() {
     'use strict';
-    angular.module('bulletularApp').controller('bulletularCtrl', function($scope, $log, $timeout, bulletFactory) {
+    angular.module('bulletularApp').controller('bulletularCtrl', function($rootScope, $scope, $log, $timeout, bulletFactory) {
         var BULLETS_KEY = 'bullets',
             bullets;
         if (angular.isDefined(localStorage)) {
@@ -36,6 +36,9 @@
             }, 3000);
         };
 
+        /**
+         * Remove all bullets including those saved in the localStorage
+         */
         $scope.removeAllBullets = function removeAllBullets() {
             localStorage.removeItem(BULLETS_KEY);
             $scope.bullets = [bulletFactory.newBullet()];

src/index.html

@@ -61,6 +61,7 @@ <h1><a href="https://github.com/l-lin/bulletular">Bulletular</a></h1>
             <li><strong>UP / DOWN:</strong> Switch task</li>
             <li><strong>TAB:</strong> Increase indent</li>
             <li><strong>SHIFT + TAB:</strong> Decrease indent</li>
+            <li><strong>ALT + Space:</strong> Expand/Collapse</li>
 		</ul>
 	</footer>
 

src/styles/main.css

@@ -1,3 +1,7 @@
+/* ---------------------------------------- */
+/* COMMON */
+/* ---------------------------------------- */
+
 * {
     margin: 0;
 }
@@ -11,55 +15,35 @@ h1 {
     font-family: 'Gilda Display', serif;
 }
 
-.container {
-    margin: 0 auto;
-	width: 900px;
-    font: 13px Helvetica, arial, freesans, clean, sans-serif;
-}
-
-.wrapper {
-    margin-top: 10px;
-	padding: 3px;
-	background: #eee;
-	border-radius: 3px;
-}
-
-article {
-	background-color: #FFF;
-	border: 1px solid #CACACA;
-	padding: 30px;
+ul {
+    list-style-type: none;
 }
 
-input:focus {
-    outline: 0;
-}
-
-input {
-	font-size: large;
-    border: none;
-    width: 99%;
+a, a:visited {
+    color: #045FB4;
+    text-decoration: none;
 }
 
-.complete {
-    text-decoration: line-through;
-	color: #BDBDBD;
+a:hover {
+    color: #b4052c;
 }
 
 hr {
-	border-bottom: 1px solid #eee;
+    border-bottom: 1px solid #eee;
     border-top: 0;
     margin: 10px 0;
 }
 
-.shortcuts {
-	float: left;
-	text-decoration: underline;
-}
+/* ---------------------------------------- */
+/* HEADER */
+/* ---------------------------------------- */
 
 header {
     text-align: center;
 }
 
+/* SAVE MESSAGE */
+
 button {
     display: inline-block;
     padding: 8px 12px;
@@ -87,26 +71,6 @@ button.trash {
     background-image: linear-gradient(#FF6464, #FF0000 6%, #B60E0E);
 }
 
-footer {
-    margin: 30px auto 0 auto;
-	width: 900px;
-    font: 15px Helvetica, arial, freesans, clean, sans-serif;
-}
-
-footer ul {
-	margin-left: 40px;
-	list-style-type: none;
-}
-
-a, a:visited {
-    color: #045FB4;
-    text-decoration: none;
-}
-
-a:hover {
-    color: #b4052c;
-}
-
 .msg-save {
     font-size: 16px;
     color: #FFF;
@@ -144,3 +108,116 @@ a:hover {
 .msg-save.ng-hide-remove.ng-hide-remove-active {
     opacity:1;
 }
+
+/* ---------------------------------------- */
+/* FOOTER */
+/* ---------------------------------------- */
+
+footer {
+    margin: 30px auto 0 auto;
+    width: 900px;
+    font: 15px Helvetica, arial, freesans, clean, sans-serif;
+}
+
+footer ul {
+    margin-left: 40px;
+    list-style-type: none;
+}
+
+.shortcuts {
+    float: left;
+    text-decoration: underline;
+}
+
+/* ---------------------------------------- */
+/* MAIN CONTENT */
+/* ---------------------------------------- */
+
+article {
+    background-color: #FFF;
+    border: 1px solid #CACACA;
+    padding: 30px;
+    border-radius: 5px;
+}
+
+.container {
+    margin: 0 auto;
+	width: 900px;
+    font: 13px Helvetica, arial, freesans, clean, sans-serif;
+}
+
+.wrapper {
+    margin-top: 10px;
+	padding: 3px;
+	background: #eee;
+	border-radius: 5px;
+}
+
+input:focus {
+    outline: 0;
+}
+
+input[type="text"] {
+	font-size: large;
+    border: none;
+    width: 96%;
+}
+
+input[type="checkbox"] {
+    display: none;
+}
+
+label:before {
+    border: 8px solid transparent;
+    border-width: 5px 5px;
+    border-color: #5EA7F7;
+    margin-left: -20px;
+    content: '';
+    position: absolute;
+    margin-top: 7px;
+    -webkit-transform-origin: 25% 50%;
+    -moz-transform-origin: 25% 50%;;
+    -o-transform-origin: 25% 50%;;
+    transform-origin: 25% 50%;
+    -webkit-transition:all .5s ease;
+    -moz-transition:all .5s ease;
+    -o-transition:all .5s ease;
+    transition:all .5s ease;
+}
+
+input[type=checkbox] + label.has-bullets:before {
+    border: 8px solid transparent;
+    border-width: 8px 12px;
+    border-left-color: #5EA7F7;
+    margin-top: 3px;
+}
+
+input[type=checkbox]:checked + label.has-bullets:before {
+    -webkit-transform: rotate(90deg);
+    -moz-transform: rotate(90deg);
+    -o-transform: rotate(90deg);
+    transform: rotate(90deg);
+}
+
+.complete {
+    text-decoration: line-through;
+	color: #BDBDBD;
+}
+
+.bullets.ng-hide-add, .bullets.ng-hide-remove {
+    -webkit-transition:all linear 0.2s;
+    -moz-transition:all linear 0.2s;
+    -o-transition:all linear 0.2s;
+    transition:all linear 0.2s;
+    display:block!important;
+}
+
+.bullets.ng-hide-add.ng-hide-add-active,
+.bullets.ng-hide-remove {
+    opacity:0;
+}
+
+.bullets.ng-hide-add,
+.bullets.ng-hide-remove.ng-hide-remove-active {
+    opacity:1;
+}