Show month names instead of dots in grid scrollbar

picturama · Aug 29, 2019 · 6a65dcf · 6a65dcf
1 parent e304895
commit 6a65dcf
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 18 deletions.
diff --git a/src/app/ui/library/GridScrollBar.less b/src/app/ui/library/GridScrollBar.less
@@ -2,7 +2,7 @@
 
 
 @hintBarHeight: 2px;
-@monthDotSize: 4px;
+@monthHeight: 12px;
 @yearHeight: 14px;
 
 .GridScrollBar {
@@ -22,22 +22,21 @@
 .GridScrollBar-scaleItem {
     position: absolute;
 
+    left: 0;
+    right: 0;
+    text-align: center;
+
     &.hasType_month {
-        left: 50%;
-        width: @monthDotSize;
-        height: @monthDotSize;
-        margin: (-@monthDotSize / 2) 0 0 (-@monthDotSize / 2);
-        background-color: @blue-grey-400;
-        border-radius: 50%;
+        margin-top: -2px;  // Make Top line of text match the top of the div
+        font-size: @monthHeight;
+        line-height: @monthHeight;
+        color: @blue-grey-300;
     }
     &.hasType_year {
-        left: 0;
-        right: 0;
         margin-top: -2px;  // Make Top line of text match the top of the div
-        text-align: center;
         font-size: @yearHeight;
         line-height: @yearHeight;
-        color: @blue-grey-400;
+        color: @blue-grey-600;
     }
 }
 
@@ -66,6 +65,7 @@
     bottom: @hintBarHeight;
     padding: 2px 0;
     text-align: center;
+    background-color: fadeout(@blue-grey-100, 50%);
 
     &.isBelow {
         bottom: auto;

diff --git a/src/app/ui/library/GridScrollBar.tsx b/src/app/ui/library/GridScrollBar.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import { findDOMNode } from 'react-dom'
 import classnames from 'classnames'
+import moment = require('moment')
 
 import { PhotoSectionId, PhotoSectionById } from 'common/CommonTypes'
 import { bindMany } from 'common/util/LangUtil'
@@ -15,11 +16,16 @@ import './GridScrollBar.less'
 interface ScaleItem {
     y: number
     type: 'year' | 'month'
-    title: string
+    /** E.g. '2019' for a year or '2019-08' for a month */
+    id: string
+    /** E.g. '2019' for a year or 'Aug' for a month */
+    label: string
 }
 
-const minMonthScaleItemGap = 8
-const minYearScaleItemGap = 15
+const minMonthScaleItemGap = 15
+const minYearScaleItemGap = 16
+
+let monthLabels: string[] | null = null
 
 
 export interface Props {
@@ -55,6 +61,13 @@ export default class GridScrollBar extends React.Component<Props, State> {
             scaleItems: [],
         }
         bindMany(this, 'onMouseDown', 'onWindowMouseMove', 'onWindowMouseUp', 'onMouseMove', 'onMouseOut', 'onWheel')
+
+        if (!monthLabels) {
+            monthLabels = []
+            for (let month = 0; month < 12; month++) {
+                monthLabels[month] = moment(new Date(2000, month)).format('MMM')
+            }
+        }
     }
 
     static getDerivedStateFromProps(nextProps: Props, prevState: State): Partial<State> | null {
@@ -157,12 +170,12 @@ export default class GridScrollBar extends React.Component<Props, State> {
                 />
                 {state.scaleItems.map(scaleItem =>
                     <div
-                        key={scaleItem.title}
-                        data-title={scaleItem.title}
+                        key={scaleItem.id}
+                        data-id={scaleItem.id}
                         className={`GridScrollBar-scaleItem hasType_${scaleItem.type}`}
                         style={{ top: scaleItem.y }}
                     >
-                        {scaleItem.type === 'year' && scaleItem.title}
+                        {scaleItem.label}
                     </div>
                 )}
                 <div
@@ -228,7 +241,8 @@ function generateScaleItems(sectionLayouts: GridSectionLayout[], sectionIds: Pho
         const scaleItem: ScaleItem = {
             y,
             type: isNewYear ? 'year' : 'month',
-            title: isNewYear ? year : month
+            id: isNewYear ? year : month,
+            label: isNewYear ? year : monthLabels![parseInt(month.substr(5)) - 1]
         }
         if (overlapsLastItem) {
             result.pop()