miniplayer - notes pull-down

kiavashp · Jan 11, 2021 · bc6200b · bc6200b
1 parent 7423d64
commit bc6200b
Show file tree

Hide file tree

Showing 4 changed files with 153 additions and 73 deletions.
diff --git a/index.js b/index.js
@@ -46,6 +46,17 @@ function createWindow() {
     context.mainWindow.once('ready-to-show', () => {
         setState({}, context.mainWindow.webContents);
         context.mainWindow.show();
+    });
+    context.mainWindow.on('resized', () => {
+        if (state.miniPlayerMode) {
+            const bounds = context.mainWindow.getBounds();
+
+            if (bounds.height < 130) {
+                context.mainWindow.setBounds({height: 76}, true);
+            } else if (bounds.height < 220) {
+                context.mainWindow.setBounds({height: 220}, true);
+            }
+        }
     });
 	context.mainWindow.loadFile('static/index.html');
 	context.mainWindow.once('closed', () => context.mainWindow = null);
@@ -65,7 +76,7 @@ function toggleWindowMode(webContents=context.mainWindow.webContents) {
 
     if (enabled) {
         context.mainWindow.setMinimumSize(280, 76);
-        context.mainWindow.setMaximumSize(500, 76);
+        context.mainWindow.setMaximumSize(500, 10e3);
         context.mainWindow.setSize(280, 76);
     } else {
         const {width, height, minWidth, minHeight} = defaultSize();

diff --git a/raw/tim.jsx b/raw/tim.jsx
@@ -110,6 +110,7 @@ class Tim extends GlobalEventComponent {
                         close={() => this.close()}/>
                     <div className="tim-body">
                         <Timer key="timer"
+                            miniPlayerMode={miniPlayerMode}
                             saveTimer={timer => this.saveTimer(timer)}/>
                     </div>
                 </div>

diff --git a/raw/timer.jsx b/raw/timer.jsx
@@ -47,6 +47,8 @@ class Timer extends React.Component {
             editIndex: null,
             editValue: null
         };
+
+        this.notesScrollElement = React.createRef();
     }
 
     componentWillUnmount() {
@@ -132,6 +134,13 @@ class Timer extends React.Component {
                 newNote: null,
                 notes: notes.concat(value)
             });
+
+            if (this.props.miniPlayerMode) {
+                requestAnimationFrame(() => {
+                    let element = this.notesScrollElement.current;
+                    element.scrollTop = element.scrollHeight - element.clientHeight;
+                });
+            }
         }
     }
 
@@ -283,6 +292,7 @@ class Timer extends React.Component {
 
     render() {
         const {events} = this;
+        const {miniPlayerMode} = this.props;
         const {
             running, start, end, notes, newNote, setDuration,
             editing, editIndex, editValue
@@ -296,79 +306,96 @@ class Timer extends React.Component {
 
         events.send('update-timer', timerString);
 
-        return (
-            <div className="timer">
-                {running
-                    ? <div className="timer-display">
-                        {timerString}
-                      </div>
-                    : <div className="timer-display">
-                        <span
-                            className="timer-display-hour"
-                            tabIndex="0"
-                            onKeyDown={event => this.onTimerDisplayKeyDown(event, 'hours')}
-                        >{setDurationTimes[0]}</span>:<span
-                            className="timer-display-minute"
-                            tabIndex="0"
-                            onKeyDown={event => this.onTimerDisplayKeyDown(event, 'minutes')}
-                        >{setDurationTimes[1]}</span>:<span
-                            className="timer-display-second"
-                            tabIndex="0"
-                            onKeyDown={event => this.onTimerDisplayKeyDown(event, 'seconds')}
-                        >{setDurationTimes[2]}</span>
-                      </div>
-                }
-                <div className="timer-notes">
-                    {notes.map((note, i) => {
-                        if (editing && editIndex === i) {
-                            return (
-                                <input key={`${i}-edit`}
-                                    name="timer-notes-input"
-                                    className="timer-notes-input"
-                                    placeholder="edit note"
-                                    autoFocus="true"
-                                    value={editValue}
-                                    onKeyPress={event => this.onNotesEditKeyPress(event)}
-                                    onKeyDown={event => this.onNotesEditKeyDown(event)}
-                                    onChange={event => this.onNotesEditChange(event)}/>
-                            );
-                        } else {
-                            return (
-                                <div key={i} className="timer-notes-item"
-                                    tabIndex="0"
-                                    onKeyPress={event => this.onNotesItemKeyPress(event, i)}
-                                    onKeyDown={event => this.onNotesItemKeyDown(event, i)}>
-                                    <div className="timer-notes-item-value">{note}</div>
-                                    <div className="timer-notes-item-remove"
-                                        onClick={event => this.removeNote(i)}
-                                        >&times;</div>
-                                </div>);
-                        }
-                    })}
-                    {editing
-                        ? ''
-                        : <input name="timer-notes-input"
-                                className="timer-notes-input"
-                                placeholder="add note"
-                                value={newNote || ''}
-                                onKeyPress={event => this.onNotesAddKeyPress(event)}
-                                onKeyDown={event => this.onNotesAddKeyDown(event)}
-                                onChange={event => this.onNotesAddChange(event)}/>
+        const timerElement = running
+            ? (<div className="timer-display">
+                {timerString}
+              </div>)
+            : (<div className="timer-display">
+                <span
+                    className="timer-display-hour"
+                    tabIndex="0"
+                    onKeyDown={event => this.onTimerDisplayKeyDown(event, 'hours')}
+                >{setDurationTimes[0]}</span>:<span
+                    className="timer-display-minute"
+                    tabIndex="0"
+                    onKeyDown={event => this.onTimerDisplayKeyDown(event, 'minutes')}
+                >{setDurationTimes[1]}</span>:<span
+                    className="timer-display-second"
+                    tabIndex="0"
+                    onKeyDown={event => this.onTimerDisplayKeyDown(event, 'seconds')}
+                >{setDurationTimes[2]}</span>
+            </div>);
+
+        const notesElement = (<div className="timer-notes">
+            <div className="timer-notes-wrapper" ref={this.notesScrollElement}>
+                {notes.map((note, i) => {
+                    if (editing && editIndex === i) {
+                        return (
+                            <input key={`${i}-edit`}
+                                name="timer-notes-input"
+                                className="timer-notes-input timer-notes-input-edit"
+                                placeholder="edit note"
+                                autoFocus="true"
+                                value={editValue}
+                                onKeyPress={event => this.onNotesEditKeyPress(event)}
+                                onKeyDown={event => this.onNotesEditKeyDown(event)}
+                                onChange={event => this.onNotesEditChange(event)}/>
+                        );
+                    } else {
+                        return (
+                            <div key={i} className="timer-notes-item"
+                                tabIndex="0"
+                                onKeyPress={event => this.onNotesItemKeyPress(event, i)}
+                                onKeyDown={event => this.onNotesItemKeyDown(event, i)}>
+                                <div className="timer-notes-item-value">{note}</div>
+                                <div className="timer-notes-item-remove"
+                                    onClick={event => this.removeNote(i)}
+                                    >&times;</div>
+                            </div>);
                     }
-                </div>
-                <div className="timer-controls">
-                    <button className={`timer-toggle ${running ? 'running' : ''}`}
-                        onClick={event => this.toggleTimer(event)}>
-                        {running ? 'stop' : 'start'}
-                    </button>
-                    {running
-                        ? <button className='timer-cancel'
-                            onClick={event => this.stop(true)}
-                            >cancel</button>
-                        : ''}
-                </div>
+                })}
             </div>
-        );
+            {editing
+                ? ''
+                : <input name="timer-notes-input"
+                        className="timer-notes-input"
+                        placeholder="add note"
+                        value={newNote || ''}
+                        onKeyPress={event => this.onNotesAddKeyPress(event)}
+                        onKeyDown={event => this.onNotesAddKeyDown(event)}
+                        onChange={event => this.onNotesAddChange(event)}/>
+            }
+        </div>);
+
+        const controlsElement = (<div className="timer-controls">
+                <button className={`timer-toggle ${running ? 'running' : ''}`}
+                    onClick={event => this.toggleTimer(event)}>
+                    {running ? 'stop' : 'start'}
+                </button>
+                {running
+                    ? <button className='timer-cancel'
+                        onClick={event => this.stop(true)}
+                        >cancel</button>
+                    : ''}
+            </div>);
+
+        if (miniPlayerMode) {
+            return (
+                <div className="timer">
+                    <div className="timer-miniplayer-wrapper">
+                        {timerElement}
+                        {controlsElement}
+                    </div>
+                    {notesElement}
+                </div>
+            );
+        } else {
+            return (<div className="timer">
+                {timerElement}
+                {notesElement}
+                {controlsElement}
+            </div>);
+        }
     }
 }
 

diff --git a/static/css/mini.css b/static/css/mini.css
@@ -30,10 +30,18 @@
 
 #tim-wrapper.mini .tim-body {
     flex-grow: 1;
+    flex-direction: column;
 }
 
 #tim-wrapper.mini .timer {
     padding: 0;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    max-height: 100%;
+}
+
+#tim-wrapper.mini .timer-miniplayer-wrapper {
     display: flex;
     flex-direction: row;
 }
@@ -43,18 +51,51 @@
     margin: 0;
     flex-grow: 1;
     line-height: 76px;
+    height: 76px;
 }
 
 #tim-wrapper.mini .timer-controls {
     display: flex;
     flex-direction: column;
     width: 80px;
+    height: 60px;
     margin: 8px;
     -webkit-app-region: no-drag;
 }
 
 #tim-wrapper.mini .timer-notes {
-    display: none;
+    -webkit-app-region: no-drag;
+    box-sizing: border-box;
+    margin: 0;
+    padding-bottom: 16px;
+    border-top: 1px solid #1a1a1a;
+    overflow: hidden;
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+#tim-wrapper.mini .timer-notes-wrapper {
+    overflow: auto;
+    flex-grow: 1;
+    flex-shrink: 1;
+    padding: 16px;
+    padding-left: 0px;
+    padding-bottom: 10px;
+    /* background set explicitly to get white scrollbar */
+    background-color: var(--background-color);
+}
+
+#tim-wrapper.mini .timer-notes-item,
+#tim-wrapper.mini .timer-notes-input {
+    margin: 4px;
+}
+
+#tim-wrapper.mini .timer-notes-input:not(.timer-notes-input-edit) {
+    flex-grow: 0;
+    box-sizing: border-box;
+    width: calc( 100% - 16px );
+    margin: 0;
 }
 
 #tim-wrapper.mini .timer-toggle {