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)