diff --git a/src/components/Settings.vue b/src/components/Settings.vue
index dcf9fc8d..bcb6057e 100644
--- a/src/components/Settings.vue
+++ b/src/components/Settings.vue
@@ -32,6 +32,11 @@
{{ t('memories', 'Show hidden folders') }}
+
+ {{ t('memories', 'Square photos') }}
+
+
@@ -60,6 +65,10 @@ import { NcCheckboxRadioSwitch } from '@nextcloud/vue'
})
export default class Settings extends Mixins(UserConfig, GlobalMixin) {
async updateAll() {
+ // Update localStorage
+ localStorage.setItem('memories_squareThumbs', this.config_squareThumbs ? '1' : '0');
+
+ // Update remote
await this.updateSetting('showHidden');
const res = await this.updateSetting('timelinePath');
if (res.status === 200) {
diff --git a/src/components/Timeline.vue b/src/components/Timeline.vue
index 780371ec..11bcf241 100644
--- a/src/components/Timeline.vue
+++ b/src/components/Timeline.vue
@@ -285,16 +285,22 @@ export default class Timeline extends Mixins(GlobalMixin, UserConfig) {
if (window.innerWidth <= 768) {
// Mobile
this.numCols = MOBILE_NUM_COLS;
- this.rowHeight = this.rowWidth / this.numCols;
+ this.rowHeight = Math.floor(this.rowWidth / this.numCols);
this.squareMode = true;
} else {
// Desktop
this.rowWidth -= 40;
- this.rowHeight = DESKTOP_ROW_HEIGHT;
- this.squareMode = false;
+ this.squareMode = this.config_squareThumbs;
- // As a heuristic, assume all images are 4:3 landscape
- this.numCols = Math.floor(this.rowWidth / (this.rowHeight * 4 / 3));
+ if (this.squareMode) {
+ // Set columns first, then height
+ this.numCols = Math.max(3, Math.floor(this.rowWidth / DESKTOP_ROW_HEIGHT));
+ this.rowHeight = Math.floor(this.rowWidth / this.numCols);
+ } else {
+ // As a heuristic, assume all images are 4:3 landscape
+ this.rowHeight = DESKTOP_ROW_HEIGHT;
+ this.numCols = Math.floor(this.rowWidth / (this.rowHeight * 4 / 3));
+ }
}
this.scrollerManager.reflow();
@@ -644,6 +650,7 @@ export default class Timeline extends Mixins(GlobalMixin, UserConfig) {
containerPadding: 0,
boxSpacing: 0,
targetRowHeight: this.rowHeight,
+ targetRowHeightTolerance: 0.1,
});
const head = this.heads[dayId];
diff --git a/src/mixins/UserConfig.ts b/src/mixins/UserConfig.ts
index c0682296..81ab3a94 100644
--- a/src/mixins/UserConfig.ts
+++ b/src/mixins/UserConfig.ts
@@ -34,6 +34,7 @@ export default class UserConfig extends Vue {
config_showHidden = loadState('memories', 'showHidden') === "true";
config_tagsEnabled = loadState('memories', 'systemtags');
config_recognizeEnabled = loadState('memories', 'recognize');
+ config_squareThumbs = localStorage.getItem('memories_squareThumbs') === '1';
created() {
subscribe(eventName, this.updateLocalSetting)