Initial commit

Galothus · Jul 10, 2019 · 97e2c7b · 97e2c7b
commit 97e2c7b
Show file tree

Hide file tree

Showing 22 changed files with 5,962 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,3 @@
+.cache
+node_modules
+build
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,5 @@
+{
+  "files.associations": {
+    "*.webapp": "json",
+  },
+}
diff --git a/.vscode/tasks.json b/.vscode/tasks.json
@@ -0,0 +1,79 @@
+{
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "label": "Developer mode (Watch)",
+      "type": "npm",
+      "script": "start",
+      "problemMatcher": [],
+      "presentation": {
+        "reveal": "silent",
+        "panel": "dedicated"
+      },
+      "group": {
+        "kind": "build",
+        "isDefault": true
+      }
+    },
+    {
+      "label": "Build app",
+      "type": "npm",
+      "script": "build",
+      "problemMatcher": [],
+      "presentation": {
+        "reveal": "silent",
+        "panel": "dedicated"
+      }
+    },
+    {
+      "label": "Install app",
+      "type": "npm",
+      "script": "app:install",
+      "problemMatcher": [],
+      "presentation": {
+        "reveal": "silent",
+        "panel": "dedicated"
+      }
+    },
+    {
+      "label": "Uninstall app",
+      "type": "npm",
+      "script": "app:uninstall",
+      "problemMatcher": [],
+      "presentation": {
+        "reveal": "silent",
+        "panel": "dedicated"
+      }
+    },
+    {
+      "label": "Update app",
+      "type": "npm",
+      "script": "app:update",
+      "problemMatcher": [],
+      "presentation": {
+        "reveal": "silent",
+        "panel": "dedicated"
+      }
+    },
+    {
+      "label": "Start app",
+      "type": "npm",
+      "script": "app:start",
+      "problemMatcher": [],
+      "presentation": {
+        "reveal": "silent",
+        "panel": "dedicated"
+      }
+    },
+    {
+      "label": "Stop app",
+      "type": "npm",
+      "script": "app:stop",
+      "problemMatcher": [],
+      "presentation": {
+        "reveal": "silent",
+        "panel": "dedicated"
+      }
+    }
+  ]
+}
diff --git a/README.md b/README.md
@@ -0,0 +1,38 @@
+# Sample Vanilla app for KaiOS
+
+Simple example of a to-do list, for more information see [KaiOS Developer Portal](https://developer.kaiostech.com/getting-started/build-your-first-app/sample-code#vanilla)
+
+![](./docs/to-do-on-input.png)
+![](./docs/to-do.png)
+
+In portrait devices
+
+![](./docs/to-do-portrait.gif)
+
+In landscape devices
+
+![](./docs/to-do-landscape.gif)
+
+## Start
+
+```console
+npm run start
+# or
+yarn start
+```
+
+## Build app
+
+```console
+npm run build
+# or
+yarn build
+```
+
+## Send the app to a KaiOS device
+
+```console
+npm run app:install
+# or
+yarn app:install
+```
diff --git a/assets/icons/kaios_112.png b/assets/icons/kaios_112.png
diff --git a/assets/icons/kaios_56.png b/assets/icons/kaios_56.png
diff --git a/docs/to-do-landscape.gif b/docs/to-do-landscape.gif
diff --git a/docs/to-do-on-input.png b/docs/to-do-on-input.png
diff --git a/docs/to-do-portrait.gif b/docs/to-do-portrait.gif
diff --git a/docs/to-do.png b/docs/to-do.png
diff --git a/index.html b/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <meta name="theme-color" content="rgb(106, 0, 128)" />
+    <title>My first Vanilla App for KaiOS</title>
+    <link rel="stylesheet" type="text/css" href="/src/css/header.css" />
+    <link rel="stylesheet" type="text/css" href="/src/css/input.css" />
+    <link rel="stylesheet" type="text/css" href="/src/css/softkey.css" />
+    <link rel="stylesheet" type="text/css" href="/src/css/todos.css" />
+    <link rel="stylesheet" type="text/css" href="/src/css/root.css" />
+  </head>
+
+  <body>
+    <div id="root">
+      <header>
+        <span>ToDo List</span>
+      </header>
+
+      <div class="input">
+        <input type="text" nav-selectable="true" autofocus />
+        <label>New task</label>
+      </div>
+
+      <div id="toDos" class="todos"></div>
+
+      <div id="softkey">
+        <label id="left"></label>
+        <label id="center">Insert</label>
+        <label id="right"></label>
+      </div>
+    </div>
+    <script src="/src/index.js"></script>
+  </body>
+</html>
diff --git a/manifest.webapp b/manifest.webapp
@@ -0,0 +1,23 @@
+{
+  "version": "1.0.0",
+  "name": "My first Vanilla App for KaiOS",
+  "description": "Simple example of a to-do list",
+  "type": "web",
+  "launch_path": "/index.html",
+  "icons": {
+    "56": "/assets/icons/kaios_56.png",
+    "112": "/assets/icons/kaios_112.png"
+  },
+  "developer": {
+    "name": "KaiOS Team",
+    "url": "https://www.kaiostech.com"
+  },
+  "locales": {
+    "en-US": {
+      "name": "My first Vanilla App for KaiOS",
+      "subtitle": "Simple example of a to-do list",
+      "description": "Simple example of a to-do list"
+    }
+  },
+  "default_locale": "en-US"
+}
diff --git a/package.json b/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "my-first-vanilla-app-for-kaios",
+  "version": "1.0.0",
+  "description": "A simple task application using only Vanilla",
+  "main": "index.html",
+  "scripts": {
+    "start": "parcel index.html --out-dir build --open && cp ./manifest.webapp ./build/ && cp -r ./assets/ ./build/",
+    "build": "parcel build index.html --out-dir build && cp ./manifest.webapp ./build/ && cp -r ./assets/ ./build/",
+    "app:install": "kdeploy build install",
+    "app:uninstall": "kdeploy build uninstall",
+    "app:update": "kdeploy build update",
+    "app:start": "kdeploy build start",
+    "app:stop": "kdeploy build stop"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@babel/core": "7.2.0",
+    "parcel-bundler": "^1.6.1",
+    "kdeploy": "kaiostech/kdeploy"
+  },
+  "keywords": [
+    "vanilla",
+    "kaios"
+  ]
+}
diff --git a/src/css/header.css b/src/css/header.css
@@ -0,0 +1,15 @@
+header {
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  background-color: #9b27af;
+  padding: 3px 10px;
+}
+
+header span {
+  font-size: 16px;
+  font-weight: 600;
+  color: #ffffff;
+  text-transform: uppercase;
+}
diff --git a/src/css/input.css b/src/css/input.css
@@ -0,0 +1,55 @@
+.input {
+  display: flex;
+  flex-direction: column;
+  margin: 5px 10px;
+  position: relative;
+  padding-top: 7px;
+}
+
+.input input {
+  font-family: inherit;
+  width: 100%;
+  border: 0;
+  border-bottom: 1px solid #d2d2d2;
+  outline: 0;
+  font-size: 16px;
+  color: transparent;
+  padding: 7px 0;
+  background: transparent;
+  transition: border-color 0.2s;
+}
+
+.input label {
+  position: absolute;
+  bottom: 0;
+  color: #9b9b9b;
+}
+
+.input input::placeholder {
+  color: transparent;
+}
+
+.input input:placeholder-shown ~ label {
+  font-size: 16px;
+  cursor: text;
+  top: 20px;
+}
+
+.input input[nav-selected="true"] ~ label {
+  position: absolute;
+  top: 0;
+  display: block;
+  transition: 0.2s;
+  font-size: 12px;
+  color: #9b9b9b;
+}
+
+.input input[nav-selected="true"] ~ label {
+  color: #9b27af;
+}
+
+.input input[nav-selected="true"] {
+  padding-bottom: 6px;
+  border-bottom: 2px solid #9b27af;
+  text-shadow: 0 0 0 rgba(0, 0, 0, 1);
+}
diff --git a/src/css/root.css b/src/css/root.css
@@ -0,0 +1,14 @@
+* {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#root {
+  font-family: "Open Sans", sans-serif;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background-color: #E1E2E1 !important;
+}
diff --git a/src/css/softkey.css b/src/css/softkey.css
@@ -0,0 +1,51 @@
+#softkey {
+  height: 30px;
+  max-height: 30px;
+  width: 100%;
+  max-width: 100%;
+  background: white;
+  border-top: 2px #cbcbcb solid;
+  display: flex;
+  flex-shrink: 0;
+  white-space: nowrap;
+  padding: 0 5px;
+  font-weight: 700;
+  box-sizing: border-box;
+  line-height: 26px;
+  margin-top: auto;
+  position: absolute;
+  bottom: 0;
+}
+
+#left,
+#right {
+  font-weight: 600;
+  font-size: 14px;
+  color: #242424;
+  overflow: hidden;
+  width: 100%;
+  letter-spacing: -0.5px;
+  box-sizing: border-box;
+  text-overflow: ellipsis;
+}
+
+#left {
+  text-align: left;
+  padding-right: 5px;
+}
+
+#center {
+  color: #242424;
+  text-transform: uppercase;
+  font-size: 18px;
+  text-align: center;
+  max-width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
+}
+
+#right {
+  text-align: right;
+  padding-left: 5px;
+}
diff --git a/src/css/todos.css b/src/css/todos.css
@@ -0,0 +1,26 @@
+.todos {
+  display: flex;
+  flex-direction: column;
+  padding: 0 10px;
+}
+
+.todos span {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 40px;
+  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .2);
+  border-radius: 6px;
+  padding: 0 10px;
+  margin-bottom: 9px;
+  background-color: #F5F5F6;
+}
+
+.todos span[nav-selected="true"] {
+  background-image: linear-gradient(255deg, #9B27AF, #9B27AF);
+  color: #FFF;
+}
+
+.todos .completed {
+  text-decoration: line-through;
+}