Fixed column widths

Signed-off-by: James Ketrenos <james_git@ketrenos.com>

README.md

@@ -1,4 +1,22 @@
+#### Upgrade to Node >v6
+
+```bash
+wget -qO- https://deb.nodesource.com/setup_6.x | sudo bash -
+sudo apt-get install --yes nodejs
+```
+
+You can then install the latest npm, polymer-cli, and bower:
+
+```bash
+sudo npm install --global npm@latest
+sudo npm install --global polymer-cli
+sudo npm install --global bower
+```
+###
 NEF processing uses ufraw-batch
+```
+sudo apt install ufraw-batch
+```
 
 ### Create `photos` user for DB
 

frontend/bower.json

@@ -34,7 +34,7 @@
     "paper-button": "PolymerElements/paper-button#^1.0.11",
     "app-route": "PolymerElements/app-route#~0.9.1",
     "app-layout": "PolymerElements/app-layout#^0.9.1",
-    "paper-checkbox": "PolymerElements/paper-checkbox#^1.2.0",
+    "paper-checkbox": "PolymerElements/paper-checkbox#^2.0.4",
     "iron-form": "PolymerElements/iron-form#^1.0.16",
     "iron-resizable-behavior": "PolymerElements/iron-resizable-behavior#^2.1.1",
     "paper-dialog": "PolymerElements/paper-dialog#^1.1.0",
@@ -55,6 +55,7 @@
     "iron-location": "^1.0.0",
     "iron-collapse": "^1.2.1",
     "paper-spinner": "^1.0.0",
-    "iron-resizable-behavior": "^1.0.4"
+    "iron-resizable-behavior": "^1.0.4",
+    "paper-checkbox": "^1.2.0"
   }
 }

frontend/elements/photo-thumbnail.html

@@ -11,6 +11,7 @@
 <template>
   <style is="custom-style" include="iron-flex iron-flex-alignment iron-positioning">
   :host {
+    @apply --photo-thumbnail;
     display: inline-block;
     position: relative;
     background-repeat: no-repeat;
@@ -20,6 +21,10 @@
     cursor: pointer;
     color: white;
     overflow: hidden;
+
+    box-sizing: border-box;
+    width: 200px;
+    height: 200px;
   }
 
       :host > div {

frontend/src/ketr-photos/ketr-photos.html

@@ -13,6 +13,7 @@
 <link rel="import" href="../../bower_components/iron-pages/iron-pages.html">
 
 <link rel="import" href="../../bower_components/paper-button/paper-button.html">
+<link rel="import" href="../../bower_components/paper-checkbox/paper-checkbox.html">
 <link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">
 <link rel="import" href="../../bower_components/paper-dialog-scrollable/paper-dialog-scrollable.html">
 <link rel="import" href="../../bower_components/paper-input/paper-input.html">
@@ -93,11 +94,15 @@
       }
 
       photo-thumbnail {
-        border: 3px solid rgba(0, 0, 0, 0);
+        --photo-thumbnail: {
+          border: 3px solid rgba(0, 0, 0, 0);
+        };
       }
 
       photo-thumbnail[selected] {
-        border-color: blue;
+        --photo-thumbnail: {
+          border-color: blue;
+        };
       }
 
     </style>
@@ -114,6 +119,8 @@
             <paper-radio-button name="by-date">By date</paper-radio-button>
             <paper-radio-button name="by-album">By album</paper-radio-button>
           </paper-radio-group>
+          <paper-checkbox checked$="[[limitPerFolder]]" on-checked-changed="onLimitPerFolderChecked">Limit per folder</paper-checkbox>
+          <paper-checkbox checked$="[[breakOnDayChange]]" on-checked-changed="onBreakOnDayChanged">Break on day change</paper-checkbox>
           <div>[[path]]</div>
         </div>
       </app-header>
@@ -154,6 +161,16 @@
           next: {
             type: Boolean,
             value: false
+          },
+          breakOnDayChange: {
+            type: Boolean,
+            value: true,
+            reflectToAttribute: true
+          },
+          limitPerFolder: {
+            type: Boolean,
+            value: false,
+            reflectToAttribute: true
           }
         },
 
@@ -161,6 +178,29 @@
           "widthChanged(calcWidth)"
         ],
 
+        onLimitPerFolder: function(event) {
+          if (!this.photos) {
+            return;
+          }
+
+          this.limitPerFolder = event.detail.value;
+          
+          Polymer.dom(this.$.thumbnails).innerHTML = "";
+          
+          this.appendItems(this.photos);
+        },
+        onBreakOnDayChanged: function(event) {
+          if (!this.photos) {
+            return;
+          }
+
+          this.breakOnDayChange = event.detail.value;
+
+          Polymer.dom(this.$.thumbnails).innerHTML = "";
+
+          this.appendItems(this.photos);
+        },
+
         listeners: {
           "scroll": "onScroll",
           "iron-resize" : "onResize"
@@ -269,6 +309,28 @@
           this._loadPhotos(cursor.taken.toString().replace(/T.*/, "") + "_" + cursor.id, +1);
         },
         
+        appendItems: function(photos) {
+          photos.forEach(function(photo) {
+            var thumbnail = document.createElement("photo-thumbnail");
+            thumbnail.item = photo;
+            thumbnail.width = this.calcWidth;
+            thumbnail.addEventListener("click", this._imageTap.bind(this));
+            if (this.breakOnDayChange) {
+              var datetime = (photo.taken || photo.modified || photo.added).replace(/T.*$/, ""),
+                dateBlock = this.querySelector("#date-" + datetime);
+              if (!dateBlock) {
+                dateBlock = document.createElement("div");
+                dateBlock.id = "date-" + datetime;
+                dateBlock.classList.add("date-line");
+                dateBlock.textContent = datetime;
+                Polymer.dom(this.$.thumbnails).appendChild(dateBlock);
+              }
+            }
+
+            Polymer.dom(this.$.thumbnails).appendChild(thumbnail);
+          }.bind(this));
+        },
+
         _loadPhotos: function(start, dir, append) {
           if (this.loading == true) {
             return;
@@ -321,23 +383,7 @@
               this.base = "";
             }
 
-            results.items.forEach(function(photo) {
+            this.appendItems(results.items);
-              var thumbnail = document.createElement("photo-thumbnail");
-              thumbnail.item = photo;
-              thumbnail.width = this.calcWidth;
-              thumbnail.addEventListener("click", this._imageTap.bind(this));
-              var datetime = (photo.taken || photo.modified || photo.added).replace(/T.*$/, ""),
-                dateBlock = this.querySelector("#date-" + datetime);
-              if (!dateBlock) {
-                dateBlock = document.createElement("div");
-                dateBlock.id = "date-" + datetime;
-                dateBlock.classList.add("date-line");
-                dateBlock.textContent = datetime;
-                Polymer.dom(this.$.thumbnails).appendChild(dateBlock);
-              }
-
-              Polymer.dom(this.$.thumbnails).appendChild(thumbnail);
-            }.bind(this));
 
             if (append) {
               this.photos = this.photos.concat(results.items);
@@ -360,9 +406,9 @@
           this.debounce("resize", function() {
             var width = Math.max(this.$.placeholder.offsetWidth || 0, 200);
 
-            this.cols = Math.floor(this.clientWidth / width);
+            this.cols = Math.floor(this.$.thumbnails.clientWidth / width);
 
-            var calc = width + Math.floor((this.clientWidth % width) / this.cols);
+            var calc = width + Math.floor((this.$.thumbnails.clientWidth % width) / this.cols);
             if (calc != this.calcWidth) {
               this.calcWidth = calc;
             }