Merge pull request #39 from AgronKabashi/templateengine/email-compone…

…nts-#35 Create Gmail components #35
AgronKabashi · Feb 23, 2016 · 5f3620d · 5f3620d
2 parents f43fded + e5cb686
commit 5f3620d
Show file tree

Hide file tree

Showing 50 changed files with 1,221 additions and 168 deletions.
diff --git a/grunt-tasks/connect.js b/grunt-tasks/connect.js
@@ -21,7 +21,7 @@ module.exports = function (grunt) {
         hostname: "localhost",
         livereload: false,
         open: true,
-        port: 9001,
+        port: 9000,
         base: "<%= config.dest %>",
         keepalive: true
       }

diff --git a/grunt-tasks/eslint.js b/grunt-tasks/eslint.js
@@ -16,7 +16,7 @@ module.exports = function (grunt) {
           "browser",
           "jquery"
         ],
-        globals: ["angular", "tryParseInt"]
+        globals: ["angular", "tryParseInt", "tryParseFloat"]
       },
       src: [
         "src/**/*.js",

diff --git a/grunt-tasks/watch.js b/grunt-tasks/watch.js
@@ -21,7 +21,7 @@ module.exports = function (grunt) {
     },
     markup: {
       files: ["<%= config.src %>/**/*.html"],
-      tasks: ["concat", "ngtemplates"]
+      tasks: ["buildLibraries", "concat", "ngtemplates"]
     },
     demoMarkup: {
       files: ["<%= config.src %>/*.html"],

diff --git a/package.json b/package.json
@@ -45,7 +45,7 @@
   },
   "license": "MIT",
   "dependencies": {
-    "angular": "^1.4.8",
+    "angular": "^1.5.0-rc.0",
     "angular-sanitize": "^1.4.8",
     "angular-ui-router": "^0.2.15",
     "jquery": "^2.1.4",

diff --git a/src/demo.html b/src/demo.html
@@ -13,6 +13,9 @@ <h1>TemplateEngine Demo</h1>
     <p>
       For ideas on how TemplateEngine can be applied in real world applications, please check out the wiki pages on <a href="https://github.com/AgronKabashi/TemplateEngine" target="_blank">GitHub</a>.
     </p>
+    <p class="warning">
+      Please note: this demo application uses localStorage for storing the templates so the they will only be accessible from your browser.
+    </p>
   </div>
 
   <div class="actions">

diff --git a/src/demo.js b/src/demo.js
@@ -140,8 +140,13 @@
         generatedCSS += String.format("@media(min-width:{0}px) and (max-width:{1}px){", previousResolution.resolutionValue + 1, resolution.resolutionValue);
       }
 
+      var isFixedHeight = false;
       _.forIn(resolution.componentVisualProperties, function (visualProperties, componentId) {
-        generatedCSS += String.format("#TC{0}{{1}}", componentId, visualProperties);
+        // Special case - Fixed height containers must be rendered as blocks
+        // to allow for scrollbars
+        isFixedHeight = visualProperties.indexOf("overflow:") >= 0;
+
+        generatedCSS += String.format("#TC{0}{{1};{2}}", componentId, isFixedHeight ? "display:block" : "", visualProperties);
       });
 
       generatedCSS += "}";

diff --git a/src/demo.scss b/src/demo.scss
@@ -34,6 +34,10 @@ h1 {
   display: none !important;
 }
 
+.warning {
+  color: red;
+}
+
 .list {
   border: 1px solid #ddd;
   border-radius: 5px;

diff --git a/src/index.html b/src/index.html
@@ -2,6 +2,7 @@
 <html>
 <head>
   <title></title>
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
   <!--<link href="http://fonts.googleapis.com/css?family=Ropa+Sans|Roboto:400,300|Droid+Sans:400,700|Rouge+Script" rel="stylesheet" type="text/css">-->
   <link href="templateengine/css/templateengine.css" rel="stylesheet" />
 </head>

diff --git a/src/template-presets.json b/src/template-presets.json
@@ -153,7 +153,7 @@
             "category": "basic",
             "friendlyName": "",
             "name": "text",
-            "content": { },
+            "content": {},
             "visualProperties": "left:0px;top:0px;",
             "class": "",
             "creationGUID": ""
@@ -164,7 +164,7 @@
             "category": "basic",
             "friendlyName": "",
             "name": "text",
-            "content": { },
+            "content": {},
             "visualProperties": "left:0px;top:0px;",
             "class": "",
             "creationGUID": ""
@@ -175,7 +175,7 @@
             "category": "basic",
             "friendlyName": "",
             "name": "text",
-            "content": { },
+            "content": {},
             "visualProperties": "left:0px;top:0px;",
             "class": "",
             "creationGUID": ""
@@ -186,7 +186,7 @@
             "category": "basic",
             "friendlyName": "",
             "name": "text",
-            "content": { },
+            "content": {},
             "visualProperties": "left:0px;top:0px;",
             "class": "",
             "creationGUID": ""
@@ -197,7 +197,7 @@
             "category": "basic",
             "friendlyName": "",
             "name": "text",
-            "content": { },
+            "content": {},
             "visualProperties": "left:0px;top:0px;",
             "class": "",
             "creationGUID": ""
@@ -208,7 +208,7 @@
             "category": "basic",
             "friendlyName": "",
             "name": "text",
-            "content": { },
+            "content": {},
             "visualProperties": "left:0px;top:0px;",
             "class": "",
             "creationGUID": ""
@@ -219,7 +219,7 @@
             "category": "basic",
             "friendlyName": "",
             "name": "text",
-            "content": { },
+            "content": {},
             "visualProperties": "left:0px;top:0px;",
             "class": "",
             "creationGUID": ""
@@ -230,7 +230,7 @@
             "category": "basic",
             "friendlyName": "",
             "name": "text",
-            "content": { },
+            "content": {},
             "visualProperties": "left:0px;top:0px;",
             "class": "",
             "creationGUID": ""
@@ -241,7 +241,7 @@
             "category": "basic",
             "friendlyName": "",
             "name": "text",
-            "content": { },
+            "content": {},
             "visualProperties": "left:0px;top:0px;",
             "class": "",
             "creationGUID": ""
@@ -252,7 +252,7 @@
             "category": "basic",
             "friendlyName": "",
             "name": "text",
-            "content": { },
+            "content": {},
             "visualProperties": "left:0px;top:0px;",
             "class": "",
             "creationGUID": ""
@@ -263,7 +263,7 @@
             "category": "basic",
             "friendlyName": "",
             "name": "text",
-            "content": { },
+            "content": {},
             "visualProperties": "left:0px;top:0px;",
             "class": "",
             "creationGUID": ""
@@ -283,7 +283,7 @@
           {
             "category": "basic",
             "class": "",
-            "content": { },
+            "content": {},
             "name": "text",
             "componentType": "Cerberus.TemplateEngine.Controller.Component.Basic.Text",
             "friendlyName": "",
@@ -293,7 +293,7 @@
           {
             "category": "basic",
             "class": "",
-            "content": { },
+            "content": {},
             "name": "text",
             "componentType": "Cerberus.TemplateEngine.Controller.Component.Basic.Text",
             "friendlyName": "",
@@ -315,7 +315,7 @@
           {
             "category": "basic",
             "class": "",
-            "content": { },
+            "content": {},
             "name": "text",
             "componentType": "Cerberus.TemplateEngine.Controller.Component.Basic.Text",
             "friendlyName": "",
@@ -349,7 +349,7 @@
           {
             "category": "socialMedia",
             "class": "",
-            "content": { },
+            "content": {},
             "name": "sharer",
             "componentType": "Cerberus.TemplateEngine.Controller.Component.SocialMedia.Sharer",
             "friendlyName": "",
@@ -371,7 +371,7 @@
           {
             "category": "basic",
             "class": "",
-            "content": { },
+            "content": {},
             "name": "text",
             "componentType": "Cerberus.TemplateEngine.Controller.Component.Basic.Text",
             "friendlyName": "Menu",
@@ -405,7 +405,7 @@
           {
             "category": "basic",
             "class": "RightPosIEFix",
-            "content": { },
+            "content": {},
             "name": "text",
             "componentType": "Cerberus.TemplateEngine.Controller.Component.Basic.Text",
             "friendlyName": "",
@@ -415,7 +415,7 @@
           {
             "category": "basic",
             "class": "",
-            "content": { },
+            "content": {},
             "name": "text",
             "componentType": "Cerberus.TemplateEngine.Controller.Component.Basic.Text",
             "friendlyName": "",
@@ -425,7 +425,12 @@
           {
             "category": "navigation",
             "class": "",
-            "content": { "url": "", "tooltip": "", "text": "CERBERUS Solutions", "target": "_self" },
+            "content": {
+              "url": "",
+              "tooltip": "",
+              "text": "CERBERUS Solutions",
+              "target": "_self"
+            },
             "name": "link",
             "componentType": "Cerberus.TemplateEngine.Controller.Component.Navigation.Link",
             "friendlyName": "",
@@ -435,7 +440,7 @@
           {
             "category": "basic",
             "class": "",
-            "content": { },
+            "content": {},
             "name": "text",
             "componentType": "Cerberus.TemplateEngine.Controller.Component.Basic.Text",
             "friendlyName": "",
@@ -445,7 +450,9 @@
           {
             "category": "basic",
             "class": "",
-            "content": { "text": "RESPONSIVE DESIGN" },
+            "content": {
+              "text": "RESPONSIVE DESIGN"
+            },
             "name": "text",
             "componentType": "Cerberus.TemplateEngine.Controller.Component.Basic.Text",
             "friendlyName": "",
@@ -455,7 +462,7 @@
           {
             "category": "basic",
             "class": "RightPosIEFix",
-            "content": { },
+            "content": {},
             "name": "text",
             "componentType": "Cerberus.TemplateEngine.Controller.Component.Basic.Text",
             "friendlyName": "",
@@ -666,6 +673,87 @@
           }
         ]
       }
+    },
+    {
+      "name": "Gmail",
+      "data": {
+        "name": "Gmail",
+        "id": 0,
+        "visualProperties": "",
+        "createdDateAsString": "",
+        "lastModifiedDateAsString": "",
+        "components": [
+          {
+            "category": "gmail",
+            "class": "",
+            "content": {},
+            "name": "labelList",
+            "componentType": "Cerberus.TemplateEngine.Controller.Component.Gmail.LabelList",
+            "friendlyName": "",
+            "id": 1,
+            "visualProperties": "width:100%;height:46px;font-size:16px;z-index:3;font-weight:bold;font-family:sans-serif;background-color:#4285f4;color:white;box-shadow:black 0px 0px 4px 0px "
+          },
+          {
+            "category": "gmail",
+            "class": "",
+            "content": {
+              "localization": {
+                "loading": "Loading...",
+                "noMessages": "There are no messages",
+                "emptyList": "There are no messages with this label."
+              },
+              "loadingClass": ""
+            },
+            "name": "messageList",
+            "componentType": "Cerberus.TemplateEngine.Controller.Component.Gmail.MessageList",
+            "friendlyName": "",
+            "id": 2,
+            "visualProperties": "top:46px;width:100%;height:200px;overflow:auto;font-size:12px;font-family:sans-serif;max-height:50%"
+          },
+          {
+            "category": "gmail",
+            "class": "",
+            "content": {},
+            "name": "messageContent",
+            "componentType": "Cerberus.TemplateEngine.Controller.Component.Gmail.MessageContent",
+            "friendlyName": "",
+            "id": 3,
+            "visualProperties": "width:100%;height:calc(100% - 246px);background-color:white;top:246px;overflow:auto;font-size:12px;font-family:sans-serif;border-top-style:solid;border-top-width:1px;border-top-color:#bdbdbd;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px"
+          },
+          {
+            "category": "gmail",
+            "class": "",
+            "content": {},
+            "name": "authorization",
+            "componentType": "Cerberus.TemplateEngine.Controller.Component.Gmail.Authorization",
+            "friendlyName": "",
+            "id": 4,
+            "visualProperties": "width:100%;height:5px"
+          }
+        ],
+        "resolutions": [
+          {
+            "id": 2,
+            "resolutionValue": 768,
+            "componentVisualProperties": {
+              "1": "width:100%;height:46px;font-size:16px;z-index:3;font-weight:bold;font-family:sans-serif;background-color:#4285f4;color:white;box-shadow:black 0px 0px 4px 0px ",
+              "2": "top:46px;width:100%;height:200px;overflow:auto;font-size:12px;font-family:sans-serif;max-height:50%",
+              "3": "width:100%;height:calc(100% - 246px);background-color:white;top:246px;overflow:auto;font-size:12px;font-family:sans-serif;border-top-style:solid;border-top-width:1px;border-top-color:#bdbdbd;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px",
+              "4": "width:100%;height:5px"
+            }
+          },
+          {
+            "id": 1,
+            "resolutionValue": 10000,
+            "componentVisualProperties": {
+              "1": "width:100%;height:46px;font-size:16px;z-index:3;font-weight:bold;font-family:sans-serif;background-color:#4285f4;color:white;box-shadow:black 0px 0px 4px 0px ",
+              "2": "width:350px;height:calc(100% - 46px);overflow:auto;font-family:sans-serif;font-size:13px;top:46px",
+              "3": "left:350px;width:calc(100% - 350px);height:calc(100% - 46px);background-color:white;overflow:auto;font-family:sans-serif;font-size:13px;top:46px;border-left-style:solid;border-left-width:1px;border-left-color:#bdbdbd;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px",
+              "4": "width:100%;height:5px"
+            }
+          }
+        ]
+      }
     }
   ]
-}
+}
diff --git a/src/templateeditor/controller/componentEditor/gmail/messageList.js b/src/templateeditor/controller/componentEditor/gmail/messageList.js
@@ -0,0 +1,10 @@
+(function (angular) {
+  "use strict";
+
+  angular
+    .module("Cerberus.TemplateEditor")
+    .controller("Cerberus.TemplateEditor.Controller.ComponentEditor.Gmail.MessageList", [
+      "$scope",
+      function () {}
+    ]);
+})(window.angular);