Dfki branch update with all changes from mcq-dev

.gitignore

@@ -17,3 +17,11 @@ www/js/control/sync-settings.js
 www/js/control/transition-notify-settings.js
 config.xml
 package.json
+
+# ignore css from scss compiled files
+www/css/*.css
+*.css
+*.css.map
+
+**/.sass-cache/**
+

README.md

@@ -80,8 +80,16 @@ If you want to make only UI changes, (as opposed to modifying the existing plugi
     ```
     $ bower install
     ```
+ 1. Compile sass files to www/css
+
+    ```
+    $ npm run sass-build
+    ```
 
 1. Configure values if necessary - e.g.
+What you need to do here is e.g. copy "physical_device" json sample to the connectionConfig.json
+The connectionConfig.json is a necessary file. Just copy connectionConfig.physical_device2localhost.json.sample,
+replace the host with your own server on any other working server and then name it connectionConfig.json
 
     ```
     $ ls www/json/*.sample

package.serve.json

@@ -4,9 +4,12 @@
   "displayName": "emission",
   "scripts": {
     "setup-serve": "./bin/download_settings_controls.js",
-    "serve": "phonegap --verbose serve"
+    "serve": "phonegap --verbose serve",
+    "sass-watch": "npm run sass-build && node-sass --watch scss -o www/css",
+    "sass-build": "node-sass scss -o www/css"
   },
   "devDependencies": {
+    "node-sass": "^4.12.0",
     "phonegap": "7.1.1"
   },
   "dependencies": {

scss/_diary.scss

@@ -0,0 +1,18 @@
+/* diary page start*/
+
+.diary-entry{
+    .date-picker-button {
+      color: #303030;
+      padding: 0 15px;
+      margin-top: 4px;
+      box-shadow: none;
+      border-style: none;
+      background: transparent;
+    }
+
+    ion-item{
+        background: transparent;
+    }
+}
+
+/* diary page ends */

scss/_icons.scss

@@ -0,0 +1,34 @@
+@font-face {
+    font-family: 'icomoon';
+    src:  url('../fonts/icomoon.eot?gbrohl');
+    src:  url('../fonts/icomoon.eot?gbrohl#iefix') format('embedded-opentype'),
+      url('../fonts/icomoon.ttf?gbrohl') format('truetype'),
+      url('../fonts/icomoon.woff?gbrohl') format('woff'),
+      url('../fonts/icomoon.svg?gbrohl#icomoon') format('svg');
+    font-weight: normal;
+    font-style: normal;
+    font-display: block;
+  }
+
+  [class^="icon-"], [class*=" icon-"] {
+    /* use !important to prevent issues with browser extensions that change fonts */
+    font-family: 'icomoon' !important;
+    speak: none;
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    line-height: 1;
+
+    /* Better Font Rendering =========== */
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  .icon-trips:before {
+    content: "\e901";
+  }
+  .icon-dashboard:before {
+    content: "\e900";
+  }
+

scss/_nvd3.scss

@@ -0,0 +1,106 @@
+
+/***
+ * styles for nvd3 charts on dahsboard / main-metrics.js
+ */
+/* hide vertical lines showing x-axis units (because design says so) */
+.nv-x .tick line {
+    display: none;
+  }
+  /* hide y-axis line */
+  .nv-y .domain {
+    display: none;
+  }
+  /* label background styles */
+  .nvd3.nv-pie .nv-label {
+      rect {
+        fill-opacity: 1;
+        stroke-opacity: 1;
+        stroke: #91F2DC !important;
+        width: 66px;
+        height: 19px;
+        transform: translate(-33px, -13px);
+      }
+  }
+  .nvd3 text {
+    font-size: 10px;
+  }
+
+// line chart on dashboard
+
+.nvd3-linechart-dashboard {
+    .nvd3 {
+        .nv-axis {
+            .tick {
+                line {
+                    stroke-dasharray: 12;
+                }
+            }
+        }
+    }
+
+    .nv-series-0 {
+        stroke-width: 1!important;
+        stroke: #91F2DC!important;
+        stroke-dasharray: 4;
+        fill: none;
+        .nv-area {
+            display: none;
+        }
+    }
+    .nv-series-1 {
+        stroke-width: 1!important;
+        stroke: #DF284B!important;
+        stroke-dasharray: 4;
+        fill: none;
+        .nv-area {
+            display: none;
+        }
+    }
+
+    .nv-series-2 {
+        .nv-area {
+            fill: url(#grad)
+        }
+    }
+
+    .legend {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 10px;
+        span {
+            margin-left: 10px;
+            font-size: 12px;
+            text-decoration: underline;
+            &:before {
+                content: '';
+                width: 20px;
+                height: 5px;
+                margin-right: 3px;
+                border: none;
+                border-top: 2px dashed;
+                display: inline-block;
+            }
+            &:first-child:before {
+                border-color: #DF284B;
+            }
+            &:last-child:before {
+                border-color: #91F2DC;
+            }
+        }
+    }
+}
+
+.nv-pieLabels-text {
+    text:nth-child(1) {
+        font-size: 52px;
+        text-anchor: middle;
+        alignment-baseline: middle;
+    }
+
+    text:nth-child(2) {
+        text-anchor: middle;
+        font-size: 16px;
+        fill: rgba(0,0,0,0.5);
+    }
+
+}

scss/_splash.scss

@@ -0,0 +1,14 @@
+.splash {
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-color: #4febb6;
+    background-position: center;
+    center {
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100%;
+        width: 100%;
+    }
+}

scss/_variables.scss

@@ -0,0 +1,8 @@
+/**
+ * DFKI OSL (Open Source Lab) corporate design
+ */
+$primary: #91F2DC;
+$dfki-stable: #f5f5f5;
+$attention: #df284b;
+
+$default-text: black;

scss/intro.scss

@@ -0,0 +1,89 @@
+@import "splash";
+
+.slider {
+  height: 100%;
+}
+
+.slider-slide {
+  padding-top: 80px;
+  color: #000;
+  background-color: #fff;
+  text-align: center;
+  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+  font-weight: 300;
+}
+
+.scroll {
+  min-width: 100%;
+}
+.nav-placeholder {
+  height: 30px;
+}
+.wide-as-needed {
+  overflow-y: scroll;
+  white-space: nowrap;
+}
+.intro-view {
+  /*background-color: #eeeeee;*/
+}
+
+.intro-title {
+  padding-top: 10%;
+  padding-right: 8%;
+  padding-left: 8%;
+  font-size: 18px;
+}
+.intro-text {
+  padding-top: 5%;
+  padding-right: 8%;
+  padding-left: 8%;
+  font-size: 15px;
+  line-height: 1.5;
+  text-align: left;
+}
+.intro-space {
+  height: 15px;
+}
+#intro-footer {
+  padding: 15px;
+  height: 90px;
+}
+.consent-title {
+  padding-top: 10%;
+  padding-right: 8%;
+  padding-left: 8%;
+  font-size: 18px;
+}
+.consent-text {
+  padding-top: 5%;
+  padding-right: 8%;
+  padding-left: 8%;
+  font-size: 15px;
+  line-height: 1.5;
+  text-align: left;
+}
+.consent-space {
+  height: 15px;
+}
+#consent-footer {
+  padding: 15px;
+  height: 90px;
+  position: absolute;
+}
+#consent-button {
+  height: 35px;
+}
+.refuse-popup {
+  font-size: 13px;
+  line-height: 1.5;
+  text-align: left;
+  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+}
+.refuse-popup .popup-buttons {
+    margin-left: 15%;
+    width: 70% !important;
+}
+.refuse-popup .popup-body {
+  padding-left: 8%;
+  padding-right: 8%;
+}

scss/ionic.app.scss

@@ -15,9 +15,43 @@ $royal:                           #886aea !default;
 $dark:                            #444 !default;
 */
 
-// The path for our ionicons font files, relative to the built CSS in www/css
-$ionicons-font-path: "../lib/ionic/fonts" !default;
+
+@import "variables";
+
+
+/*
+ * customize Ionic with our theme colors
+ */
+$button-color: $primary;
+$toggle-on-default-bg: $primary;
+
+$stable: $dfki-stable;
+$light: white;
+$energized: $attention;
+$balanced: $primary;
+
+
+
+/*
+ * other, non-brand customizations to Ionic css
+ */
+$bar-height: 0;
+$tabs-height: 60px;
+$tabs-text-font-size:             16px;
+$tabs-text-font-size-side-icon:   16px;
+$tabs-striped-border-width:       0;
+
+
+  // The path for our ionicons font files, relative to the built CSS in www/css
+$ionicons-font-path: "../lib/ionic/fonts";
+
+
+// avatar
+$item-avatar-border-radius:       0;
+
 
 // Include all of Ionic
-@import "www/lib/ionic/scss/ionic";
+@import "../www/lib/ionic/scss/ionic";
 
+// customize
+@import "ionic/tabs";