Beautification of the moment view

Add cards and ionic button styles

Add concatCss and allowed Sass transpiling

Remove dynamic text are plugin as it was breaking tests

Removed dynamic textarea plugin

Adds new styles to moment-view

Fixes typo and several formatting issues

Removes angular-elastic from bower.json

This removes a third party angular plugin that allowed easy resize
of a text area given the amount of text in it. It was removed because
it was breaking the tests.

We might be able to add it later when we're in the polishing stages.

Restores $httpProvider.defaults.withCredentials = true;

bower.json

@@ -4,5 +4,7 @@
   "devDependencies": {
     "ionic": "driftyco/ionic-bower#1.0.0-beta.14",
     "angular-mocks": "~1.3.13"
+  },
+  "dependencies": {
   }
 }

client/www/app/app.module.js

@@ -8,7 +8,7 @@
     'app.moment',
     'app.mementos',
     'app.memento',
-    'app.memento.create'
+    'app.memento.create',
     'app.user.auth'
   ])
 
@@ -27,6 +27,11 @@
   })
 
   .config(function($httpProvider) {
+
+    // IMPORTANT
+    // This will not work when testing in the browser. You will need
+    // to comment this out if you'd like to test the app in Chrome.
+    // Otherwise, it works great in the iOS simulator/built app.
     $httpProvider.defaults.withCredentials = true;
     delete $httpProvider.defaults.headers.common["X-Requested-With"];
   })
@@ -55,7 +60,7 @@
         url: '/create',
         templateUrl: 'app/memento-create/memento.create.html',
         controller: 'MementoCreate as vm'
-      });
+      })
 
     .state('signup', {
       url: '/signup',

client/www/app/moment/items/moment.items.module.js

@@ -1,5 +1,6 @@
 (function() {
+
   'use strict';
-
   angular.module('app.moment.items', []);
-})();
+
+})();

client/www/app/moment/items/newItem.directive.html

@@ -1,13 +1,13 @@
-<div>
+<div class="new-items">
   <div class="new-item-placeholder">
-  	<new-text ng-if="typeSelected === 'text'"></new-text>
+    <new-text ng-if="typeSelected === 'text'"></new-text>
   <div>
 
-  <button on-tap="selectType('text')" ng-if="newItemButtonWasTapped" class="new-text-button">Add Text</button>
-  <button ng-if="newItemButtonWasTapped" class="new-image-button">Add Image</button>
-
-  <button ng-disabled="newItemButtonWasTapped" class="new-item-button">+</button>
+  <div class="row">
+    <button on-tap="selectType('text')" class="col-25 new-text-button button button-outline ion-compose button-calm"></button>
+    <button class="col-25 new-image-button button button-outline ion-image button-calm"></button>
+    <button class="col-25 new-video-button button button-outline ion-videocamera button-calm"></button>
+    <button class="col-25 new-audio-button button button-outline ion-mic-a button-calm"></button>
+  </div>
 
-  <button ng-if="newItemButtonWasTapped" class="new-video">Add Video</button>
-  <button ng-if="newItemButtonWasTapped" class="new-audio">Add Audio</button>
-</div>
+</div>

client/www/app/moment/items/newItem.directive.js

@@ -20,33 +20,13 @@
         return directive;
 
         function link(scope, element, attrs) {
-          scope.typeSelected           = null;
-          scope.newItemButtonWasTapped = false;
+          scope.typeSelected           = null;          ;
           scope.insertIntoMoment       = insertIntoMoment;          
           scope.selectType             = selectType;
           scope.done                   = done;
 
-          activate();
-
           ///////////////////////////////////////
 
-          function activate() {
-            $ionicGesture.on('tap', function (ev) {
-              showThenHideButtons();
-            }, element);
-          }
-
-          function showThenHideButtons() {
-            scope.newItemButtonWasTapped = true;
-
-            $timeout(function() {
-              scope.newItemButtonWasTapped = false;              
-              scope.$apply();              
-            }, 3500);            
-
-            scope.$apply();          
-          }
-
           function insertIntoMoment(type, url) {
             scope.moment.content.push({
               type: type,

client/www/app/moment/items/newText.directive.html

@@ -1,6 +1,16 @@
-<div class="new-text-container" style="display: block">
-	<h2>Write something memorable:</h2>
-    <textarea type="text"  ng-model="text" placeholder="Describe this awesome moment..."></textarea>
-    <button class="save"   on-tap="saveText(text)">Save</button>
-    <button class="cancel" on-tap="cancel()">Cancel</button>
-<div>
+<div class="card list new-text-container">
+
+  <div class="item item-text-wrap header-area">
+    <h2>Write something memorable</h2>
+  </div>
+
+  <div class="item text-area" style="display: block">
+      <textarea type="text" ng-model="text" placeholder="Describe this awesome moment..."></textarea>
+  </div>
+
+  <div class="item action" style="display: block">
+    <button class="save button button-clear button-balanced ion-checkmark-round" on-tap="saveText(text)"></button>
+    <button class="cancel button button-clear ion-close-round button-assertive" on-tap="cancel()"></button>
+  </div>
+
+</div>

client/www/app/moment/items/showText.directive.html

@@ -1,3 +1,5 @@
-<div class="text-item-container">
-  <span class="text-item"> {{ item.url }} </span>
-</div>
+<div class="card text-item-container">
+  <div class="item item-text-wrap">
+    <span class="text-item"> {{ item.url }} </span>
+  </div>
+</div>

client/www/app/moment/items/showText.directive.js

@@ -1,19 +1,19 @@
 (function() {
 
   angular
-      .module('app.moment.items')
-      .directive('showText', showText);
+    .module('app.moment.items')
+    .directive('showText', showText);
 
-      /* @ngInject */      
-      function showText() {
+    /* @ngInject */      
+    function showText() {
 
-        var directive = {
-          restrict: 'EA',          
-          templateUrl: 'app/moment/items/showText.directive.html',          
-          replace: true
-        };
+      var directive = {
+        restrict: 'EA',          
+        templateUrl: 'app/moment/items/showText.directive.html',          
+        replace: true
+      };
 
-        return directive;        
-      }
+      return directive;        
+    }
 
 })();

client/www/app/moment/moment.create.controller.js

@@ -52,4 +52,4 @@
 
   }
 
-})();
+})();

client/www/app/moment/moment.create.html

@@ -2,9 +2,12 @@
   <ion-content class="padding moment">
 
     <!-- Include a editable input box if editable -->
-
-    <input type="text" ng-model="vm.currentMoment.title" placeholder="Moment Title"/>
-
+
+    <div class="list list-inset">
+      <label class="item item-input moment-title">
+        <input type="text" ng-model="vm.currentMoment.title" placeholder="Moment Title"/>
+      </label>
+    </div>
 
     <!-- // ng-repeat over all items in the moment -->
     <div class="items">
@@ -19,8 +22,8 @@
     <!-- // Allow users to create a new item if editable -->
     <new-item moment="vm.currentMoment"></new-item>    
 
-    <!-- if isEditable: <save></save> -->
-    <button on-tap="vm.saveMoment(vm.currentMoment)" class="save-button">Save</button>
+
+    <button class="button button-outline button-block button-positive moment-save" on-tap="vm.saveMoment(vm.currentMoment)">Save</button>
 
   </ion-content>
 </ion-view>

client/www/app/moment/moment.render.controller.js

@@ -26,4 +26,4 @@
 
   }
 
-})();
+})();

client/www/content/css/app.css

@@ -0,0 +1,11 @@
+.new-items .buttons {
+  display: block;
+  margin: 0 auto;
+}
+
+.new-items .buttons button {
+  display: inline-block;
+}
+.moment-title input[type='text'] {
+  text-align: center;
+}

client/www/content/sass/items.scss

@@ -0,0 +1,10 @@
+.new-items {
+	.buttons {
+		display: block;
+		margin: 0 auto;
+
+		button {
+			display: inline-block;
+		}
+	}
+}

client/www/content/sass/moment.scss

@@ -0,0 +1,5 @@
+.moment-title {
+  input[type='text'] {
+    text-align: center;
+  }
+}

client/www/index.html

@@ -6,6 +6,7 @@
     <title></title>
 
     <link href="lib/ionic/css/ionic.css" rel="stylesheet">
+    <link href="content/css/app.css" rel="stylesheet">
 
     <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
     <link href="css/ionic.app.css" rel="stylesheet">

gulpfile.js

@@ -4,6 +4,7 @@ var gulp = require('gulp');
 // include plugins
 var sass = require('gulp-sass');
 var minifyCss = require('gulp-minify-css');
+var concatCss = require('gulp-concat-css');
 var rename = require('gulp-rename');
 var jshint = require('gulp-jshint');
 /*old testing framework
@@ -13,10 +14,14 @@ var shell = require('gulp-shell');
 
 // the paths to our app files
 var paths = {
-  scripts: 'client/www/app/**/*.js',
-  html:    'client/www/app/**/*.html',
-  test:    'client/www/test/**/*.js',
-  sass:    'client/scss/**/*.scss'
+  scripts:  'client/www/app/**/*.js',
+  appRoot:  'client/www/app/',
+  html:     'client/www/app/**/*.html',
+  test:     'client/www/test/**/*.js',
+  sass:     'client/www/content/sass/**/*.scss',
+  sassRoot: 'client/www/content/sass/',
+  css:      'client/www/content/css/**/*.css',
+  cssRoot:  'client/www/content/css/'
 };
 
 // run linting
@@ -48,15 +53,13 @@ gulp.task('karma', function() {
 
 // compile sass
 gulp.task('sass', function(done) {
-  gulp.src('/client/scss/ionic.app.scss')
+  gulp.src(paths.sass)
     .pipe(sass())
-    .pipe(gulp.dest('/client/www/css/'))
-    .pipe(minifyCss({
-      keepSpecialComments: 0
-    }))
-    .pipe(rename({ extname: '.min.css' }))
-    .pipe(gulp.dest('/client/www/css/'))
-    .on('end', done);
+    .pipe(concatCss('app.css'))    
+    // .pipe(minifyCss({
+    //   keepSpecialComments: 0
+    // }))
+    .pipe(gulp.dest(paths.cssRoot))
 });
 
 // run tests

package.json

@@ -21,6 +21,7 @@
     "chai": "^2.0.0",
     "gulp": "^3.8.11",
     "gulp-concat": "^2.2.0",
+    "gulp-concat-css": "^2.1.0",
     "gulp-jshint": "^1.9.2",
     "gulp-karma": "0.0.4",
     "gulp-minify-css": "^0.3.0",