From 07c9ec7bfb49488ad096e31b1716392fed4e35ef Mon Sep 17 00:00:00 2001
From: Omar Duarte <omarduarte@gmail.com>
Date: Sat, 21 Feb 2015 13:04:53 -0800
Subject: [PATCH] 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                                    |  2 ++
 client/www/app/app.module.js                  |  9 +++++--
 .../app/moment/items/moment.items.module.js   |  5 ++--
 .../app/moment/items/newItem.directive.html   | 18 ++++++-------
 .../www/app/moment/items/newItem.directive.js | 22 +--------------
 .../app/moment/items/newText.directive.html   | 22 ++++++++++-----
 .../app/moment/items/showText.directive.html  |  8 +++---
 .../app/moment/items/showText.directive.js    | 22 +++++++--------
 .../app/moment/moment.create.controller.js    |  2 +-
 client/www/app/moment/moment.create.html      | 13 +++++----
 .../app/moment/moment.render.controller.js    |  2 +-
 client/www/content/css/app.css                | 11 ++++++++
 client/www/content/sass/items.scss            | 10 +++++++
 client/www/content/sass/moment.scss           |  5 ++++
 client/www/index.html                         |  1 +
 gulpfile.js                                   | 27 ++++++++++---------
 package.json                                  |  1 +
 17 files changed, 107 insertions(+), 73 deletions(-)
 create mode 100644 client/www/content/css/app.css
 create mode 100644 client/www/content/sass/items.scss
 create mode 100644 client/www/content/sass/moment.scss

diff --git a/bower.json b/bower.json
index 56e7e2e..7f015d3 100644
--- a/bower.json
+++ b/bower.json
@@ -4,5 +4,7 @@
   "devDependencies": {
     "ionic": "driftyco/ionic-bower#1.0.0-beta.14",
     "angular-mocks": "~1.3.13"
+  },
+  "dependencies": {
   }
 }
diff --git a/client/www/app/app.module.js b/client/www/app/app.module.js
index 63729f8..b0aad27 100644
--- a/client/www/app/app.module.js
+++ b/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',
diff --git a/client/www/app/moment/items/moment.items.module.js b/client/www/app/moment/items/moment.items.module.js
index b3de9ef..65de0e5 100644
--- a/client/www/app/moment/items/moment.items.module.js
+++ b/client/www/app/moment/items/moment.items.module.js
@@ -1,5 +1,6 @@
 (function() {
+  
   'use strict';
-
   angular.module('app.moment.items', []);
-})();
\ No newline at end of file
+  
+})();
diff --git a/client/www/app/moment/items/newItem.directive.html b/client/www/app/moment/items/newItem.directive.html
index cfc93cb..c1b22b4 100644
--- a/client/www/app/moment/items/newItem.directive.html
+++ b/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>
\ No newline at end of file
+</div>
diff --git a/client/www/app/moment/items/newItem.directive.js b/client/www/app/moment/items/newItem.directive.js
index b1cb2c9..15c2896 100644
--- a/client/www/app/moment/items/newItem.directive.js
+++ b/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,
diff --git a/client/www/app/moment/items/newText.directive.html b/client/www/app/moment/items/newText.directive.html
index 61614cc..2d95313 100644
--- a/client/www/app/moment/items/newText.directive.html
+++ b/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>
\ No newline at end of file
+<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>
diff --git a/client/www/app/moment/items/showText.directive.html b/client/www/app/moment/items/showText.directive.html
index 4ba5820..fbce82c 100644
--- a/client/www/app/moment/items/showText.directive.html
+++ b/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>
\ No newline at end of file
+<div class="card text-item-container">
+  <div class="item item-text-wrap">
+    <span class="text-item"> {{ item.url }} </span>
+  </div>
+</div>
diff --git a/client/www/app/moment/items/showText.directive.js b/client/www/app/moment/items/showText.directive.js
index 851f8e3..8551758 100644
--- a/client/www/app/moment/items/showText.directive.js
+++ b/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;        
+    }
 
 })();
diff --git a/client/www/app/moment/moment.create.controller.js b/client/www/app/moment/moment.create.controller.js
index 56eb7a9..570432a 100644
--- a/client/www/app/moment/moment.create.controller.js
+++ b/client/www/app/moment/moment.create.controller.js
@@ -52,4 +52,4 @@
 
   }
 
-})();
\ No newline at end of file
+})();
diff --git a/client/www/app/moment/moment.create.html b/client/www/app/moment/moment.create.html
index e555a9b..e52c974 100644
--- a/client/www/app/moment/moment.create.html
+++ b/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>
diff --git a/client/www/app/moment/moment.render.controller.js b/client/www/app/moment/moment.render.controller.js
index 953e710..677615b 100644
--- a/client/www/app/moment/moment.render.controller.js
+++ b/client/www/app/moment/moment.render.controller.js
@@ -26,4 +26,4 @@
 
   }
 
-})();
\ No newline at end of file
+})();
diff --git a/client/www/content/css/app.css b/client/www/content/css/app.css
new file mode 100644
index 0000000..c595bfa
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/client/www/content/sass/items.scss b/client/www/content/sass/items.scss
new file mode 100644
index 0000000..43c0019
--- /dev/null
+++ b/client/www/content/sass/items.scss
@@ -0,0 +1,10 @@
+.new-items {
+	.buttons {
+		display: block;
+		margin: 0 auto;
+		
+		button {
+			display: inline-block;
+		}
+	}
+}
\ No newline at end of file
diff --git a/client/www/content/sass/moment.scss b/client/www/content/sass/moment.scss
new file mode 100644
index 0000000..d9d57b5
--- /dev/null
+++ b/client/www/content/sass/moment.scss
@@ -0,0 +1,5 @@
+.moment-title {
+  input[type='text'] {
+    text-align: center;
+  }
+}
\ No newline at end of file
diff --git a/client/www/index.html b/client/www/index.html
index 48f4325..ba595fd 100644
--- a/client/www/index.html
+++ b/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">
diff --git a/gulpfile.js b/gulpfile.js
index effeafe..0a82dcc 100644
--- a/gulpfile.js
+++ b/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
diff --git a/package.json b/package.json
index 4d51359..fb1e936 100644
--- a/package.json
+++ b/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",