Re-introduce bookmark modal

app/renderer/components/addEditBookmarkHanger.js

@@ -0,0 +1,207 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+const React = require('react')
+const ImmutableComponent = require('../../../js/components/immutableComponent')
+const Button = require('../../../js/components/button')
+const cx = require('../../../js/lib/classSet')
+const windowActions = require('../../../js/actions/windowActions')
+const appActions = require('../../../js/actions/appActions')
+const KeyCodes = require('../../common/constants/keyCodes')
+const siteTags = require('../../../js/constants/siteTags')
+const settings = require('../../../js/constants/settings')
+const siteUtil = require('../../../js/state/siteUtil')
+const getSetting = require('../../../js/settings').getSetting
+
+class AddEditBookmarkHanger extends ImmutableComponent {
+  constructor () {
+    super()
+    this.onNameChange = this.onNameChange.bind(this)
+    this.onLocationChange = this.onLocationChange.bind(this)
+    this.onParentFolderChange = this.onParentFolderChange.bind(this)
+    this.onKeyDown = this.onKeyDown.bind(this)
+    this.onClose = this.onClose.bind(this)
+    this.onClick = this.onClick.bind(this)
+    this.onSave = this.onSave.bind(this)
+    this.onViewBookmarks = this.onViewBookmarks.bind(this)
+    this.onRemoveBookmark = this.onRemoveBookmark.bind(this)
+  }
+  get bookmarkNameValid () {
+    const title = this.props.currentDetail.get('title') || this.props.currentDetail.get('customTitle')
+    const location = this.props.currentDetail.get('location')
+    return this.isFolder
+      ? (typeof title === 'string' && title.trim().length > 0)
+      : (typeof location === 'string' && location.trim().length > 0)
+  }
+  get displayBookmarkName () {
+    if (this.props.currentDetail.get('customTitle') !== undefined) {
+      return this.props.currentDetail.get('customTitle')
+    }
+    return this.props.currentDetail.get('title') || ''
+  }
+  get heading () {
+    if (this.isFolder) {
+      return this.props.shouldShowLocation
+        ? 'bookmarkFolderEditing'
+        : 'bookmarkFolderAdding'
+    }
+    return this.props.shouldShowLocation
+      ? (!this.props.originalDetail || !this.props.originalDetail.has('location'))
+        ? 'bookmarkCreateNew'
+        : 'bookmarkEdit'
+      : 'bookmarkAdded'
+  }
+  get isFolder () {
+    return siteUtil.isFolder(this.props.currentDetail)
+  }
+  updateFolders (props) {
+    this.folders = siteUtil.getFolders(this.props.sites, props.currentDetail.get('folderId'))
+  }
+  componentWillMount () {
+    this.updateFolders(this.props)
+  }
+  componentWillUpdate (nextProps) {
+    if (this.props.sites !== nextProps.sites) {
+      this.updateFolders(nextProps)
+    }
+  }
+  componentDidMount () {
+    // Automatically save if this is triggered by the url star
+    if (!this.props.isModal && !this.props.shouldShowLocation) {
+      this.onSave(false)
+    }
+    this.bookmarkName.select()
+    this.bookmarkName.focus()
+  }
+  onKeyDown (e) {
+    switch (e.keyCode) {
+      case KeyCodes.ENTER:
+        this.onSave()
+        break
+      case KeyCodes.ESC:
+        this.onClose()
+        break
+    }
+  }
+  onClose () {
+    windowActions.setBookmarkDetail()
+  }
+  onClick (e) {
+    e.stopPropagation()
+  }
+  onNameChange (e) {
+    let currentDetail = this.props.currentDetail
+    if (currentDetail.get('title') === e.target.value && e.target.value) {
+      currentDetail = currentDetail.delete('customTitle')
+    } else {
+      currentDetail = currentDetail.set('customTitle', e.target.value)
+    }
+    windowActions.setBookmarkDetail(currentDetail, this.props.originalDetail, this.props.destinationDetail, this.props.shouldShowLocation, !this.props.isModal)
+  }
+  onLocationChange (e) {
+    const currentDetail = this.props.currentDetail.set('location', e.target.value)
+    windowActions.setBookmarkDetail(currentDetail, this.props.originalDetail, this.props.destinationDetail, this.props.shouldShowLocation, !this.props.isModal)
+  }
+  onParentFolderChange (e) {
+    const currentDetail = this.props.currentDetail.set('parentFolderId', Number(e.target.value))
+    windowActions.setBookmarkDetail(currentDetail, this.props.originalDetail, this.props.destinationDetail, undefined, !this.props.isModal)
+  }
+  showToolbarOnFirstBookmark () {
+    const hasBookmarks = this.props.sites.find(
+      (site) => siteUtil.isBookmark(site) || siteUtil.isFolder(site)
+    )
+    if (!hasBookmarks && !getSetting(settings.SHOW_BOOKMARKS_TOOLBAR)) {
+      appActions.changeSetting(settings.SHOW_BOOKMARKS_TOOLBAR, true)
+    }
+  }
+  onSave (closeDialog = true) {
+    // First check if the title of the currentDetail is set
+    if (!this.bookmarkNameValid) {
+      return false
+    }
+    this.showToolbarOnFirstBookmark()
+    const tag = this.isFolder ? siteTags.BOOKMARK_FOLDER : siteTags.BOOKMARK
+    appActions.addSite(this.props.currentDetail, tag, this.props.originalDetail, this.props.destinationDetail)
+    if (closeDialog) {
+      this.onClose()
+    }
+  }
+  onRemoveBookmark () {
+    const tag = this.isFolder ? siteTags.BOOKMARK_FOLDER : siteTags.BOOKMARK
+    appActions.removeSite(this.props.currentDetail, tag)
+    this.onClose()
+  }
+  onViewBookmarks () {
+    this.onClose()
+    windowActions.newFrame({location: 'about:bookmarks'}, true)
+  }
+  render () {
+    const props = this.props.isModal
+      ? {
+        className: 'fa fa-close',
+        onClick: this.onClose
+      }
+      : {
+        className: cx({
+          arrowUp: true,
+          withStopButton: this.props.withStopButton,
+          withHomeButton: this.props.withHomeButton,
+          withoutButtons: this.props.withoutButtons
+        })
+      }
+    return <div className={cx({
+      bookmarkDialog: this.props.isModal,
+      bookmarkHanger: !this.props.isModal
+    })}>
+      <div className='bookmarkForm' onClick={this.onClick}>
+        <div {...props} />
+
+        <div className='bookmarkFormInner'>
+          <h2 data-l10n-id={this.heading} />
+          <div className='bookmarkFormTable'>
+            <div id='bookmarkName' className='bookmarkFormRow'>
+              <label data-l10n-id='nameField' htmlFor='bookmarkName' />
+              <input spellCheck='false' onKeyDown={this.onKeyDown} onChange={this.onNameChange} value={this.displayBookmarkName} ref={(bookmarkName) => { this.bookmarkName = bookmarkName }} />
+            </div>
+            {
+              !this.isFolder && this.props.shouldShowLocation
+              ? <div id='bookmarkLocation' className='bookmarkFormRow'>
+                <label data-l10n-id='locationField' htmlFor='bookmarkLocation' />
+                <input spellCheck='false' onKeyDown={this.onKeyDown} onChange={this.onLocationChange} value={this.props.currentDetail.get('location')} />
+              </div>
+              : null
+            }
+            <div id='bookmarkParentFolder' className='bookmarkFormRow'>
+              <label data-l10n-id='parentFolderField' htmlFor='bookmarkParentFolder' />
+              <select value={this.props.currentDetail.get('parentFolderId')}
+                onChange={this.onParentFolderChange} >
+                <option value='0' data-l10n-id='bookmarksToolbar' />
+                {
+                  this.folders.map((folder) => <option value={folder.folderId}>{folder.label}</option>)
+                }
+              </select>
+            </div>
+            <div className='bookmarkButtons'>
+              {
+                this.props.originalDetail
+                ? <Button l10nId='remove' className='primaryButton whiteButton inlineButton' onClick={this.onRemoveBookmark} />
+                : null
+              }
+              <Button l10nId='done' disabled={!this.bookmarkNameValid} className='primaryButton' onClick={this.onSave} />
+            </div>
+          </div>
+        </div>
+        {
+          !this.props.isModal
+            ? <div className='bookmarkFormFooter'>
+              <Button l10nId='viewBookmarks' onClick={this.onViewBookmarks} />
+            </div>
+            : null
+        }
+      </div>
+    </div>
+  }
+}
+
+module.exports = AddEditBookmarkHanger

docs/windowActions.md

@@ -467,7 +467,7 @@ Dispatches a message to set the find-in-page details.
 
 
 
-### setBookmarkDetail(currentDetail, originalDetail, destinationDetail, shouldShowLocation) 
+### setBookmarkDetail(currentDetail, originalDetail, destinationDetail, shouldShowLocation, isBookmarkHanger) 
 
 Dispatches a message to set add/edit bookmark details
 If set, also indicates that add/edit is shown
@@ -480,7 +480,9 @@ If set, also indicates that add/edit is shown
 
 **destinationDetail**: `Object`, Will move the added bookmark to the specified position
 
-**shouldShowLocation**: `Object`, Whether or not to show the URL input
+**shouldShowLocation**: `boolean`, Whether or not to show the URL input
+
+**isBookmarkHanger**: `boolean`, true if triggered from star icon in nav bar
 
 
 

js/about/history.js

@@ -21,7 +21,7 @@ const ipc = window.chrome.ipc
 require('../../less/about/history.less')
 require('../../node_modules/font-awesome/css/font-awesome.css')
 
-// BSCTODO: this button is currently hidden (along with column icon)
+// TODO(bsclifton): this button is currently hidden (along with column icon)
 // When ready, this can be shown again (by updating style in history.less)
 // When that happens, be sure to also show the ::before (which has trash can icon)
 class DeleteHistoryEntryButton extends ImmutableComponent {
@@ -34,7 +34,7 @@ class DeleteHistoryEntryButton extends ImmutableComponent {
     if (e && e.preventDefault) {
       e.preventDefault()
     }
-    // BSCTODO: delete the selected entry
+    // TODO(bsclifton): delete the selected entry
   }
 
   render () {

js/actions/windowActions.js

@@ -655,15 +655,17 @@ const windowActions = {
    * @param {Object} currentDetail - Properties of the bookmark to change to
    * @param {Object} originalDetail - Properties of the bookmark to edit
    * @param {Object} destinationDetail - Will move the added bookmark to the specified position
-   * @param {Object} shouldShowLocation - Whether or not to show the URL input
+   * @param {boolean} shouldShowLocation - Whether or not to show the URL input
+   * @param {boolean} isBookmarkHanger - true if triggered from star icon in nav bar
    */
-  setBookmarkDetail: function (currentDetail, originalDetail, destinationDetail, shouldShowLocation) {
+  setBookmarkDetail: function (currentDetail, originalDetail, destinationDetail, shouldShowLocation, isBookmarkHanger) {
     dispatch({
       actionType: WindowConstants.WINDOW_SET_BOOKMARK_DETAIL,
       currentDetail,
       originalDetail,
       destinationDetail,
-      shouldShowLocation
+      shouldShowLocation,
+      isBookmarkHanger
     })
   },