better dates on filelist

4 files changed, 55 insertions, 2 deletions

diff --git a/app/client/common/fileList.component.js b/app/client/common/fileList.component.js
index f932274..8f79148 100644
--- a/app/client/common/fileList.component.js
+++ b/app/client/common/fileList.component.js
@@ -122,7 +122,14 @@ export const FileRow = props => {
         <div className={"date " + util.carbon_date(date)}>{moment(date).format("YYYY-MM-DD")}</div>
       }
       {fields.has('datetime') &&
-        <div className={"datetime " + util.carbon_date(date)}>{moment(date).format("YYYY-MM-DD h:mm a")}</div>
+        <div className={"datetime"}>
+          <span class={'date ' + util.carbon_date(date)}>
+            {moment(date).format("YYYY-MM-DD")}
+          </span>
+          <span class={'time ' + util.carbon_time(date)}>
+            {moment(date).format("H:mm")}
+          </span>
+        </div>
       }
       {fields.has('size') &&
         <div className={"size " + size[0]}>{size[1]}</div>
diff --git a/app/client/dashboard/dashboard.component.js b/app/client/dashboard/dashboard.component.js
index cbfdd33..8f47049 100644
--- a/app/client/dashboard/dashboard.component.js
+++ b/app/client/dashboard/dashboard.component.js
@@ -48,7 +48,7 @@ class Dashboard extends Component {
           linkFiles
           files={renders[key]}
           orderBy='date desc'
-          fields={'name date epoch size'}
+          fields={'name datetime epoch size'}
           onClick={key === 'samplernn' ? (file, e) => {
             e.preventDefault()
             e.stopPropagation()
diff --git a/app/client/util/format.js b/app/client/util/format.js
index c8e8f3f..ee1f47f 100644
--- a/app/client/util/format.js
+++ b/app/client/util/format.js
@@ -38,6 +38,22 @@ export function carbon_date (date, no_bold) {
     { color = "quiet" }
   return color
 }
+export function carbon_time (date, no_bold) {
+  var span = (+new Date() - new Date(date)) / 1000, color
+  if (! no_bold && span < 3600) // modified this hour
+    { color = "new" }
+  else if (span < 3 * 3600) // modifed last 3 hours
+    { color = "recent" }
+  else if (span < 12 * 3600) // modifed last 12 hours
+    { color = "med" }
+  else if (span < 24 * 3600) // modifed last day
+    { color = "old" }
+  else if (span < 48 * 3600) // modifed last two days
+    { color = "older" }
+  else
+    { color = "quiet" }
+  return color
+}
 export function hush_views (n, bias, no_bold) {
   var txt = commatize(n, 1000)
   bias = bias || 1
diff --git a/public/assets/css/css.css b/public/assets/css/css.css
index bd7de50..a1d29e5 100644
--- a/public/assets/css/css.css
+++ b/public/assets/css/css.css
@@ -300,6 +300,17 @@ input.small {
 .filelist .epoch {
   width: 45px;
 }
+.filelist .datetime .date {
+  display: inline-block;
+  text-align: right;
+}
+.filelist .datetime .time {
+  width: 28px;
+  display: inline-block;
+  text-align: right;
+  font-size: smaller;
+  padding-left: 4px;
+}
 
 .row .epoch {
   white-space: nowrap;
@@ -679,6 +690,24 @@ input.small {
   max-height: 80vh;
 }
 
+/* sequence editor timeline */
+
+.timeline {
+  display: block;
+  border: 1px solid #333;
+  background: #fff;
+  position: relative;
+  margin-bottom: 5px;
+  height: 50px;
+}
+.timeline .selection {
+  position: absolute;
+  border: 1px solid #000;
+  border-top: 0;
+  border-left: 0;
+  background: #eee;
+}
+
 /* system */
 .screen {
   width: 750px;
@@ -695,6 +724,7 @@ input.small {
   color: #234;
 }
 
+/* login diamond */
 .diamond {
   position: fixed;
   left: calc(50vw - 175px);