Merge e974af0 into acec469

res/menu/context.en.yml

@@ -168,6 +168,16 @@ en:
         command: 'app:restore-item'
       - label: 'Permanently Delete Selected Items'
         command: 'app:destroy-item'
+    item-view: &item-view
+      - label: View Layout
+        id: 'item-view-layout'
+        submenu:
+        - label: 'Stacked'
+          id: 'stacked'
+          type: checkbox
+        - label: 'Side by side'
+          id: 'side-by-side'
+          type: checkbox
     trash: &trash
       - label: 'Permanently Delete Items'
         command: 'app:destroy-item'
@@ -199,6 +209,7 @@ en:
     item-bulk-list: *item-bulk-list
     item-deleted: *item-deleted
     item-bulk-deleted: *item-bulk-deleted
+    item-view: *item-view
     trash: *trash
     photo: *photo
     selection: *selection
@@ -223,6 +234,7 @@ en:
     item-bulk-list: *item-bulk-list
     item-deleted: *item-deleted
     item-bulk-deleted: *item-bulk-deleted
+    item-view: *item-view
     trash: *trash
     photo: *photo
     selection: *selection

res/strings/renderer.en.yml

@@ -97,7 +97,7 @@ en:
       template: Default Template
       debug: Enable Developer Mode
       dup:
-        label: During Import
+        label: During import
         option:
           skip: Skip duplicate photos
           import: Accept duplicate photos
@@ -113,7 +113,11 @@ en:
         option:
           fit: Zoom photos to fit
           fill: Zoom photos to fill
-
+      layout:
+        label: Item View layout
+        option:
+          stacked: Stacked
+          side-by-side: Side by side
     project:
       label: Project
     template:

src/browser/menu.js

@@ -251,6 +251,18 @@ class Menu {
               id: target.id, mode: li.mode
             })
           }))
+          break
+        }
+        case 'item-view-layout': {
+          const { target } = params[0]
+          item.submenu = item.submenu.map(li => ({
+            ...li,
+            checked: li.id === target.layout,
+            click: this.responder('app:settings-persist', win, {
+              layout: li.id
+            })
+          }))
+          break
         }
       }
 
@@ -347,13 +359,15 @@ class ContextMenu extends Menu {
   scopes.selection = [...scopes.photo, 'selection']
   scopes.notes = [...scopes.global]
   scopes.note = [...scopes.notes, 'note']
-  scopes.notepad = [...scopes.global, 'notepad']
   scopes['item-bulk'] = [...scopes.items, 'item-bulk']
   scopes['item-list'] = [...scopes.items, 'item-list', 'item']
   scopes['item-bulk-list'] = [...scopes.items, 'item-bulk-list', 'item-bulk']
   scopes['item-deleted'] = [...scopes.global, 'item-deleted']
   scopes['item-bulk-deleted'] = [...scopes.global, 'item-bulk-deleted']
   scopes['item-tag'] = [...scopes.global, 'item-tag']
+  scopes['item-view'] = [...scopes.global, 'item-view']
+  scopes.notepad = [...scopes['item-view'], 'notepad']
+  scopes.esper = [...scopes['item-view']]
 }
 
 module.exports = {

src/browser/tropy.js

@@ -469,6 +469,9 @@ class Tropy extends EventEmitter {
     this.on('app:writing-mode', (win, { id, mode }) =>
       this.dispatch(act.notepad.update({ [id]: { mode  } }), win))
 
+    this.on('app:settings-persist', (win, payload) =>
+      this.dispatch(act.settings.persist(payload), win))
+
     this.on('app:toggle-menu-bar', win => {
       if (win.isMenuBarAutoHide()) {
         win.setAutoHideMenuBar(false)

src/components/editor/container.js

@@ -1,7 +1,6 @@
 'use strict'
 
 const React = require('react')
-const { Component } = React
 const { func, bool, object, number, string } = require('prop-types')
 const { EditorToolbar } = require('./toolbar')
 const { EditorState } = require('prosemirror-state')
@@ -16,7 +15,7 @@ const { get, noop, restrict } = require('../../common/util')
 const { SASS: { EDITOR } } = require('../../constants')
 
 
-class Editor extends Component {
+class Editor extends React.Component {
   constructor(props) {
     super(props)
     this.state = {
@@ -126,19 +125,20 @@ class Editor extends Component {
   }
 
   render() {
-    const { isDisabled, placeholder, tabIndex } = this.props
-    const { hasViewFocus } = this.state
-    const state = this.getEditorState()
-    const showPlaceholder = placeholder != null && this.isBlank(state.doc)
+    let { isDisabled, isDraggable, placeholder, tabIndex } = this.props
+    let { hasViewFocus } = this.state
+    let state = this.getEditorState()
+    let showPlaceholder = placeholder != null && this.isBlank(state.doc)
 
     return (
       <div
         ref={this.setContainer}
         className={cx(this.classes)}
         tabIndex={-1}
         onFocus={this.handleFocus}>
-        {!isDisabled &&
+        {(isDraggable || !isDisabled) &&
           <EditorToolbar
+            isDraggable={isDraggable}
             state={state}
             ref={this.setToolbar}
             onCommand={this.handleCommand}/>
@@ -164,6 +164,7 @@ class Editor extends Component {
 
   static propTypes = {
     isDisabled: bool,
+    isDraggable: bool,
     keymap: object.isRequired,
     mode: string.isRequired,
     onBlur: func.isRequired,

src/components/editor/toolbar.js

@@ -1,8 +1,7 @@
 'use strict'
 
 const React = require('react')
-const { PureComponent } = React
-const { func, instanceOf } = require('prop-types')
+const { bool, func, instanceOf } = require('prop-types')
 const { Toolbar, ToolbarContext, ToolGroup } = require('../toolbar')
 const { Button } = require('../button')
 const { EditorState } = require('prosemirror-state')
@@ -29,7 +28,7 @@ const {
 } = require('../icons')
 
 
-class EditorToolbar extends PureComponent {
+class EditorToolbar extends React.PureComponent {
   constructor(props) {
     super(props)
 
@@ -162,7 +161,7 @@ class EditorToolbar extends PureComponent {
 
   render() {
     return (
-      <Toolbar isDraggable={false}>
+      <Toolbar isDraggable={this.props.isDraggable}>
         <ToolbarContext
           className="default"
           isActive={this.hasDefaultContext}>
@@ -229,12 +228,10 @@ class EditorToolbar extends PureComponent {
   }
 
   static propTypes = {
+    isDraggable: bool,
     state: instanceOf(EditorState),
     onCommand: func.isRequired
   }
-
-  static defaultProps = {
-  }
 }
 
 module.exports = {

src/components/esper/esper.js

@@ -669,6 +669,12 @@ class Esper extends React.PureComponent {
     this.container = container
   }
 
+  handleContextMenu = (event) => {
+    if (!this.isDisabled) {
+      this.props.onContextMenu(event, 'esper')
+    }
+  }
+
   handleMouseDown = () => {
     if (document.activeElement !== this.container) {
       this.container.focus()
@@ -694,6 +700,7 @@ class Esper extends React.PureComponent {
         tabIndex={tabIndex}
         className={cx(this.classes)}
         onBlur={this.handleBlur}
+        onContextMenu={this.handleContextMenu}
         onMouseDown={this.handleMouseDown}
         onKeyDown={this.handleKeyDown}
         onKeyUp={this.handleKeyUp}>
@@ -761,6 +768,7 @@ class Esper extends React.PureComponent {
     maxZoom: number.isRequired,
     minZoom: number.isRequired,
     mode: string.isRequired,
+    onContextMenu: func.isRequired,
     onChange: func.isRequired,
     onPhotoError: func.isRequired,
     onSelect: func.isRequired,

src/components/item/container.js

@@ -6,7 +6,8 @@ const { BufferedResizable } = require('../resizable')
 const { Esper } = require('../esper')
 const { NotePad } = require('../note')
 const act = require('../../actions')
-const { SASS: { ESPER } } = require('../../constants')
+const cx = require('classnames')
+const { SASS: { ESPER }, ITEM: { LAYOUT } } = require('../../constants')
 
 const {
   arrayOf, bool, func, number, object, shape, string
@@ -22,10 +23,49 @@ const {
 
 
 class ItemContainer extends React.PureComponent {
+  get dimension() {
+    return (this.props.settings.layout === LAYOUT.SIDE_BY_SIDE) ?
+      'width' : 'height'
+  }
+
+  get size() {
+    switch (this.props.settings.layout) {
+      case LAYOUT.STACKED:
+        return this.props.esper.height
+      case LAYOUT.SIDE_BY_SIDE:
+        return this.props.esper.width
+      default:
+        return 100
+    }
+  }
+
+  get isNotePadDraggable() {
+    return ARGS.frameless &&
+      this.props.settings.layout === LAYOUT.SIDE_BY_SIDE
+  }
+
+  get hasOverlayToolbars() {
+    return this.props.settings.overlayToolbars &&
+      this.props.settings.layout !== LAYOUT.SIDE_BY_SIDE
+  }
+
+  getResizableProps(layout = this.props.settings.layout) {
+    return layout === LAYOUT.SIDE_BY_SIDE ?
+      { edge: 'right', margin: ESPER.MIN_WIDTH, min: ESPER.MIN_WIDTH } :
+      { edge: 'bottom', margin: ESPER.MIN_HEIGHT, min: ESPER.MIN_HEIGHT }
+  }
+
   setNotePad = (notepad) => {
     this.notepad = notepad
   }
 
+  handleContextMenu = (event, scope = 'item-view', opts = {}) => {
+    this.props.onContextMenu(event, scope, {
+      layout: this.props.settings.layout,
+      ...opts
+    })
+  }
+
   handleEsperChange = ({ photo, selection, image, esper }) => {
     if (esper != null) {
       this.props.onUiUpdate({ esper })
@@ -41,24 +81,26 @@ class ItemContainer extends React.PureComponent {
     }
   }
 
-  handleEsperResize = (height) => {
-    this.props.onUiUpdate({ esper: { height } })
+  handleEsperResize = (value) => {
+    this.props.onUiUpdate({
+      esper: { [this.dimension]: value }
+    })
   }
 
   render() {
     return (
-      <div className="item-container">
+      <div
+        className={cx('item-container', this.props.settings.layout)}
+        onContextMenu={this.handleContextMenu}>
         <BufferedResizable
-          edge="bottom"
-          value={this.props.esper.height}
+          {...this.getResizableProps()}
           isRelative
-          onChange={this.handleEsperResize}
-          margin={38}
-          min={ESPER.MIN_HEIGHT}>
+          value={this.size}
+          onChange={this.handleEsperResize}>
           <Esper {...this.props.view}
             cache={this.props.cache}
             mode={this.props.view.mode || this.props.settings.zoomMode}
-            hasOverlayToolbar={this.props.settings.overlayToolbars}
+            hasOverlayToolbar={this.hasOverlayToolbars}
             invertScroll={this.props.settings.invertScroll}
             invertZoom={this.props.settings.invertZoom}
             isDisabled={this.props.isDisabled}
@@ -69,6 +111,7 @@ class ItemContainer extends React.PureComponent {
             selection={this.props.selection}
             selections={this.props.selections}
             tool={this.props.esper.tool}
+            onContextMenu={this.handleContextMenu}
             onChange={this.handleEsperChange}
             onPhotoError={this.props.onPhotoError}
             onSelect={this.props.onPhotoSelect}
@@ -78,11 +121,12 @@ class ItemContainer extends React.PureComponent {
           ref={this.setNotePad}
           note={this.props.note}
           isDisabled={this.props.isDisabled || !this.props.photo}
+          isDraggable={this.isNotePadDraggable}
           isItemOpen={this.props.isOpen}
           keymap={this.props.keymap.NotePad}
           onChange={this.props.onNoteChange}
           onCommit={this.props.onNoteCommit}
-          onContextMenu={this.props.onContextMenu}/>
+          onContextMenu={this.handleContextMenu}/>
       </div>
     )
   }
@@ -91,6 +135,7 @@ class ItemContainer extends React.PureComponent {
     cache: string.isRequired,
     esper: shape({
       height: number.isRequired,
+      width: number.isRequired,
       panel: bool.isRequired,
       tool: string.isRequired
     }).isRequired,

src/components/note/pad.js

@@ -1,14 +1,13 @@
 'use strict'
 
 const React = require('react')
-const { PureComponent } = React
 const { bool, func, number, object, shape, string } = require('prop-types')
 const { Editor } = require('../editor')
 const { TABS } = require('../../constants')
 const cx = require('classnames')
 
 
-class NotePad extends PureComponent {
+class NotePad extends React.PureComponent {
   get classes() {
     return ['note-pad', this.props.mode, {
       'no-wrap': !this.props.wrap,
@@ -66,6 +65,7 @@ class NotePad extends PureComponent {
           mode={this.props.mode}
           placeholder="notepad.placeholder"
           isDisabled={this.isDisabled}
+          isDraggable={this.props.isDraggable}
           tabIndex={this.props.tabIndex}
           onBlur={this.handleEditorBlur}
           onChange={this.handleChange}/>
@@ -75,6 +75,7 @@ class NotePad extends PureComponent {
 
   static propTypes = {
     isDisabled: bool,
+    isDraggable: bool,
     isItemOpen: bool,
     keymap: object.isRequired,
     note: shape({