r1196 - in wit: . css js - Sandbox-commits

15 Apr 2015

Author: jruchaud
Date: 2015-04-15 13:57:22 +0000 (Wed, 15 Apr 2015)
New Revision: 1196

Url: http://forge.nuiton.org/projects/sandbox/repository/revisions/1196

Log:
Add actions

Added:
   wit/css/actions.css
   wit/css/select.css
Modified:
   wit/css/style.css
   wit/index.html
   wit/js/main.js
   wit/package.json

Added: wit/css/actions.css
===================================================================

--- wit/css/actions.css	                        (rev 0)
+++ wit/css/actions.css	2015-04-15 13:57:22 UTC (rev 1196)
@@ -0,0 +1,36 @@
+.actions {
+    display: flex;
+    justify-content: center;
+}
+
+.actions div {
+    height: 50px;
+    width: 50px;
+    background-color: #ccc;
+    margin: 5px;
+    
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+#play .icon {
+      border-top: transparent 20px solid;
+      /* border-right: transparent 20px solid; */
+      border-bottom: transparent 20px solid;
+      border-left: black 20px solid;
+    
+    height: 0px;
+    width: 0px;
+    background-color: transparent;
+}
+
+#stop .icon {
+    height: 30px;
+    width: 30px;
+    background-color: black;
+}
+
+#time {
+    text-align: center;
+}
\ No newline at end of file

Added: wit/css/select.css
===================================================================
--- wit/css/select.css	                        (rev 0)
+++ wit/css/select.css	2015-04-15 13:57:22 UTC (rev 1196)
@@ -0,0 +1,54 @@
+.selection {
+    background-color: #FFF;
+    border: 1px solid #AAA;
+    border-radius: 4px;
+    cursor: text;
+    min-height: 32px;
+    
+    -webkit-user-select: none;
+}
+
+.selection ul {
+    list-style: outside none none;
+    margin: 0px;
+    padding: 0px 5px;
+    width: 100%;
+    
+    display: inline-block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.selection li.tag {
+    background-color: #E4E4E4;
+    border: 1px solid #AAA;
+    border-radius: 4px;
+    cursor: default;
+    float: left;
+    margin-right: 5px;
+    margin-top: 5px;
+    padding: 0px 5px;
+}
+
+.selection .remove {
+    color: #999;
+    cursor: pointer;
+    display: inline-block;
+    font-weight: bold;
+    margin-right: 2px;
+}
+
+.selection li.input {
+    float: left;
+}
+
+.selection li input {
+    width: 6em;
+    background: none repeat scroll 0% 0% transparent;
+    border: medium none;
+    outline: 0px none;
+    
+    font-size: 100%;
+    margin-top: 5px;
+}
\ No newline at end of file

Modified: wit/css/style.css
===================================================================
--- wit/css/style.css	2015-04-15 13:14:26 UTC (rev 1195)
+++ wit/css/style.css	2015-04-15 13:57:22 UTC (rev 1196)
@@ -1,58 +1,3 @@
 * {
     box-sizing: border-box;
 }
-
-.selection {
-    background-color: #FFF;
-    border: 1px solid #AAA;
-    border-radius: 4px;
-    cursor: text;
-    min-height: 32px;
-    
-    -webkit-user-select: none;
-}
-
-.selection ul {
-    list-style: outside none none;
-    margin: 0px;
-    padding: 0px 5px;
-    width: 100%;
-    
-    display: inline-block;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.selection li.tag {
-    background-color: #E4E4E4;
-    border: 1px solid #AAA;
-    border-radius: 4px;
-    cursor: default;
-    float: left;
-    margin-right: 5px;
-    margin-top: 5px;
-    padding: 0px 5px;
-}
-
-.selection .remove {
-    color: #999;
-    cursor: pointer;
-    display: inline-block;
-    font-weight: bold;
-    margin-right: 2px;
-}
-
-.selection li.input {
-    float: left;
-}
-
-.selection li input {
-    width: 6em;
-    background: none repeat scroll 0% 0% transparent;
-    border: medium none;
-    outline: 0px none;
-    
-    font-size: 100%;
-    margin-top: 5px;
-}
\ No newline at end of file

Modified: wit/index.html
===================================================================
--- wit/index.html	2015-04-15 13:14:26 UTC (rev 1195)
+++ wit/index.html	2015-04-15 13:57:22 UTC (rev 1196)
@@ -3,6 +3,8 @@
     <head>
         <title>WIT</title>
         <link type="text/css" href="css/style.css" rel="stylesheet"/>
+        <link type="text/css" href="css/select.css" rel="stylesheet"/>
+        <link type="text/css" href="css/actions.css" rel="stylesheet"/>
     </head>
     <body>
         <div class="selection">
@@ -14,6 +16,17 @@
             </ul>
         </div>
 
+        <div class="actions">
+            <div id="play">
+                <div class="icon"></div>
+            </div>
+            <div id="stop">
+                <div class="icon"></div>
+            </div>
+        </div>
+
+        <div id="time"></div>
+
         <script type="application/javascript" src="js/main.js"></script>
         <script type="application/javascript" src="js/database.js"></script>
     </body>

Modified: wit/js/main.js
===================================================================
--- wit/js/main.js	2015-04-15 13:14:26 UTC (rev 1195)
+++ wit/js/main.js	2015-04-15 13:57:22 UTC (rev 1196)
@@ -1,5 +1,10 @@
+var moment = require('moment');
+
 var tagsNode = document.getElementById("tags");
 var inputTagNode = document.getElementById("inputTag");
+var playNode = document.getElementById("play");
+var stopNode = document.getElementById("stop");
+var timeNode = document.getElementById("time");
 
 var templateTag = "<li class=\"tag\"><span class=\"remove\">x</span>{{value}}</li>";
 
@@ -7,6 +12,8 @@
     if (e.keyCode == 13 && this.value != "") { // On enter
         inputTagNode.parentNode.insertAdjacentHTML("beforebegin", templateTag.replace("{{value}}", this.value));
         this.value = "";
+        
+        time = performance.now();
     }
 }
 
@@ -18,3 +25,25 @@
         inputTagNode.focus();
     }
 }
+
+var time = null;
+
+playNode.onclick = function(e) {
+    time = new Date();
+}
+
+stopNode.onclick = function(e) {
+    //console.log("time", performance.now() - time);
+    time = null;
+}
+
+var updateTime = function() {
+    if (time) {
+        var diff = moment(moment().diff(time)).utcOffset(0);
+        timeNode.textContent = diff.format("HH:mm:ss");
+    } else {
+        timeNode.textContent = "Not started";
+    }
+    setTimeout(updateTime.bind(), 1000);
+}
+updateTime();

Modified: wit/package.json
===================================================================
--- wit/package.json	2015-04-15 13:14:26 UTC (rev 1195)
+++ wit/package.json	2015-04-15 13:57:22 UTC (rev 1196)
@@ -7,7 +7,8 @@
     "height": 300
   },
   "dependencies": {
-    "nedb": "^1.1.2"
+    "nedb": "^1.1.2",
+    "moment": "^2.10.2"
   },
   "devDependencies": {
      "grunt": "^0.4.5",

    

r1196 - in wit: . css js

jruchaud＠users.nuiton.org

tags

participants (1)