Improve log design, fix #15, decrease window-size

Author: kriskbx

package-lock.json

@@ -34,7 +34,8 @@
       },
       "make_targets": {
         "win32": [
-          "squirrel"
+          "squirrel",
+          "appx"
         ],
         "darwin": [
           "zip"
@@ -93,7 +94,11 @@
       },
       "windowsStoreConfig": {
         "packageName": "gtt-taskbar",
-        "name": "gitlab time tracker taskbar"
+        "packageDisplayName": "gitlab time tracker taskbar",
+        "packageVersion": "<%= version %>.0",
+        "publisher": "CN=F0C20719-E0F4-4F1A-99EB-2C25503A0622",
+        "devCert": "",
+        "deploy": false
       }
     }
   },
@@ -104,7 +109,7 @@
     "electron-compile": "^6.4.2",
     "electron-log": "^2.2.14",
     "electron-squirrel-startup": "^1.0.0",
-    "gitlab-time-tracker": "^1.7.20",
+    "gitlab-time-tracker": "^1.7.21",
     "moment": "^2.20.1",
     "raven": "^2.6.2",
     "write-yaml": "^1.0.0"

package.json

@@ -68,6 +68,7 @@ const app = new Vue({
         this.platform = ipc.sync('gtt-platform', 'get');
 
         // set ipc listeners
+        ipc.on('gtt-last-sync', (event, lastSync) => this.lastSync = lastSync);
         ipc.on('gtt-config', (event, config) => this.setConfig(config));
         ipc.on('gtt-log', (event, data) => {
             this.loadingLog = false;
@@ -123,6 +124,10 @@ const app = new Vue({
     },
 
     methods: {
+        synced(modified) {
+            if(!this.lastSync) return;
+            return moment(modified).diff(this.lastSync) < 0;
+        },
         human(input) {
             if (!this.config) return;
             return this.config.toHumanReadable(input);
@@ -171,6 +176,7 @@ const app = new Vue({
         loadLog() {
             this.loadingLog = true;
             ipc.send('gtt-log');
+            ipc.send('gtt-sync');
         },
         loadResource() {
             if (this.resourceType) {

resources/assets/js/app.js

@@ -10,6 +10,7 @@
 
             <v-select class="project"
                       v-model="selectedProject"
+                      max-height="220px"
                       placeholder="Select Project"
                       :options="projectOptions"></v-select>
         </div>
@@ -31,6 +32,7 @@
 
             <v-select class="resource"
                       v-model="selectedResource"
+                      max-height="220px"
                       :placeholder="resourceType ? 'Select Issue' : 'Select MR'"
                       :options="resourceOptions"></v-select>
         </div>
@@ -261,4 +263,4 @@
             }
         }
     }
-</script>
+</script>

resources/assets/js/components/track.vue

@@ -6,6 +6,7 @@ $color-light-gray = #e6e6e6
 $color-middle-gray = #cbcbcb
 $color-mac-gray = #E7E7E7
 $color-bluish = #bfcbd9
+$color-blue = #1c79c3
 $color-black = #000
 $border-radius = .7rem
 
@@ -20,29 +21,37 @@ html
   padding: 0
 
 body
-  height: 25.4rem  
-  padding: 0 10px
   overflow: visible
+  padding: 0 10px
   border-bottom-left-radius: $border-radius
   border-bottom-right-radius: $border-radius
   background: transparent
 
-body, html  
+body, html
   border: 0
   margin: 0
 
-#app  
+#app
+  height: 25.4rem
+  overflow: visible
   position: relative
-  height: 100%  
+
   div.triangle
     display: none
     &.bottom
       transform: rotate(180deg)
-      filter: drop-shadow(0 -3px 2px rgba(0,0,0,0.5))
+      filter: drop-shadow(0 -3px 2px rgba(0, 0, 0, 0.5))
   &.mac, &.linux
     & > .triangle.top
       display: block
   &.win
+    position: absolute
+    bottom: 0
+    left: 10px
+    right: 10px
+    .v-select .dropdown-menu
+      top: auto
+      bottom: 100%
     & > .triangle.bottom
       display: block
 
@@ -52,15 +61,16 @@ body, html
   height: calc(100% - 3rem)
   overflow-y: visible
   overflow-x: hidden
-  box-shadow: 0 0 .2rem rgba(0,0,0,0.5)
+  box-shadow: 0 0 .2rem rgba(0, 0, 0, 0.5)
+  border-radius: $border-radius
 
 .settings
   line-height: 1.2
 
 .triangle
   text-align: center
   height: 1.5rem
-  filter: drop-shadow(0 0 2px rgba(0,0,0,0.5))
+  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5))
   &.bottom
     transform: rotate(180deg)
     display: none
@@ -271,32 +281,45 @@ body, html
     cursor: pointer
 
 .log
-  .day
-    font-weight: bold
 
-  table
-    margin: 0
-    tr
-      height: 4.7rem
-      overflow: hidden
-      &:last-child
-        td
-          border: 0 !important
-    td
-      white-space: nowrap
-      height: 4.7rem
-      padding-left: 1.5rem
-      padding-right: 1.5rem
-      overflow: hidden
-      text-overflow: ellipsis
-
-  th
-    color: $color-gray
-
-  td
-    vertical-align: top
-    &:not(:first-child)
-      padding: 0
-      
+  .timeframe
+    color: $color-blue
+
+  .sync
+    font-size: 1.6rem
+    .red
+      color: $color-red
+    .green
+      color: green
+
+  & > .day
+    overflow: hidden
+    box-shadow: 0 .05rem .3rem rgba(0, 0, 0, 0.4)
+    border-radius: .6rem
+    margin-bottom: 2rem
+    & > .headline
+      background: $color-light-gray
+      color: $color-gray
+      font-weight: bold
+      padding: 1rem
+      & > small
+        font-weight: normal
+        display: inline-block
+        float: right
+        margin-top: .3rem
+    & > .list
+      & > .entry
+        display: flex
+        flex-direction: row
+        width: 100%
+        border-bottom: 1px solid $color-light-gray
+        padding: .6rem 1rem
+        & > .cell
+          flex: 1
+        &:hover
+          background: lighten($color-light-gray, 40%)
+        &:last-child
+          border-bottom: 0
+
 button.clear
-  display: none      
+  display: none

resources/assets/stylus/app.styl

@@ -570,9 +570,8 @@ html {
   padding: 0;
 }
 body {
-  height: 25.4rem;
-  padding: 0 10px;
   overflow: visible;
+  padding: 0 10px;
   border-bottom-left-radius: 0.7rem;
   border-bottom-right-radius: 0.7rem;
   background: transparent;
@@ -583,8 +582,9 @@ html {
   margin: 0;
 }
 #app {
+  height: 25.4rem;
+  overflow: visible;
   position: relative;
-  height: 100%;
 }
 #app div.triangle {
   display: none;
@@ -599,6 +599,16 @@ html {
 #app.linux > .triangle.top {
   display: block;
 }
+#app.win {
+  position: absolute;
+  bottom: 0;
+  left: 10px;
+  right: 10px;
+}
+#app.win .v-select .dropdown-menu {
+  top: auto;
+  bottom: 100%;
+}
 #app.win > .triangle.bottom {
   display: block;
 }
@@ -615,6 +625,7 @@ html {
   overflow-x: hidden;
   -webkit-box-shadow: 0 0 0.2rem rgba(0,0,0,0.5);
           box-shadow: 0 0 0.2rem rgba(0,0,0,0.5);
+  border-radius: 0.7rem;
 }
 .settings {
   line-height: 1.2;
@@ -894,35 +905,59 @@ html {
   color: #909090 !important;
   cursor: pointer;
 }
-.log .day {
-  font-weight: bold;
+.log .timeframe {
+  color: #1c79c3;
 }
-.log table {
-  margin: 0;
+.log .sync {
+  font-size: 1.6rem;
 }
-.log table tr {
-  height: 4.7rem;
-  overflow: hidden;
+.log .sync .red {
+  color: #f8561e;
 }
-.log table tr:last-child td {
-  border: 0 !important;
+.log .sync .green {
+  color: #008000;
 }
-.log table td {
-  white-space: nowrap;
-  height: 4.7rem;
-  padding-left: 1.5rem;
-  padding-right: 1.5rem;
+.log > .day {
   overflow: hidden;
-  text-overflow: ellipsis;
+  -webkit-box-shadow: 0 0.05rem 0.3rem rgba(0,0,0,0.4);
+          box-shadow: 0 0.05rem 0.3rem rgba(0,0,0,0.4);
+  border-radius: 0.6rem;
+  margin-bottom: 2rem;
 }
-.log th {
+.log > .day > .headline {
+  background: #e6e6e6;
   color: #909090;
+  font-weight: bold;
+  padding: 1rem;
 }
-.log td {
-  vertical-align: top;
+.log > .day > .headline > small {
+  font-weight: normal;
+  display: inline-block;
+  float: right;
+  margin-top: 0.3rem;
 }
-.log td:not(:first-child) {
-  padding: 0;
+.log > .day > .list > .entry {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  width: 100%;
+  border-bottom: 1px solid #e6e6e6;
+  padding: 0.6rem 1rem;
+}
+.log > .day > .list > .entry > .cell {
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+}
+.log > .day > .list > .entry:hover {
+  background: #f0f0f0;
+}
+.log > .day > .list > .entry:last-child {
+  border-bottom: 0;
 }
 button.clear {
   display: none;