Merge pull request #768 from BoostIO/fix-infoPanel-layout-in-trash

Fixed InfoPanel layout in Trash

browser/main/Detail/InfoPanel.js

@@ -24,7 +24,7 @@ const InfoPanel = ({
     </div>
     <div styleName='group-section'>
       <div styleName='group-section-label'>
-        Created at
+        Created
       </div>
       <div styleName='group-section-control'>
         {createdAt}
@@ -32,7 +32,7 @@ const InfoPanel = ({
     </div>
     <div styleName='group-section'>
       <div styleName='group-section-label'>
-        Updated at
+        Updated
       </div>
       <div styleName='group-section-control'>
         {updatedAt}

browser/main/Detail/InfoPanel.styl

@@ -18,6 +18,16 @@
   background-color $ui-noteList-backgroundColor
   border 1px solid $border-color
 
+.control-infoButton-panel-trash
+  z-index 200
+  margin-top 45px
+  margin-left -230px
+  position absolute
+  padding 20px 20px 0 20px
+  width 320px
+  background-color $ui-noteList-backgroundColor
+  border 1px solid $border-color
+
 .group-section
   display flex
   line-height 30px
@@ -40,6 +50,19 @@
   width 160px
   height 25px
 
+.group-section-control text
+  color #EA4447
+  font-weight 600
+  font-size 14px
+  width 70px
+  height 25px
+  background-color rgba(226,33,113,0.1)
+  border none
+  outline none
+  border-radius 2px
+  margin-right 5px
+  padding 2px 5px
+
 [id=export-wrap]
   height 90px
   display flex
@@ -75,6 +98,10 @@ body[data-theme="dark"]
     background-color $ui-dark-noteList-backgroundColor
     border 1px solid $ui-dark-borderColor
 
+  .control-infoButton-panel-trash
+    background-color $ui-dark-noteList-backgroundColor
+    border 1px solid $ui-dark-borderColor
+
   .group-section-label
     color $ui-inactive-text-color
 

browser/main/Detail/InfoPanelTrashed.js

@@ -0,0 +1,70 @@
+import React, { PropTypes } from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './InfoPanel.styl'
+
+const InfoPanelTrashed = ({
+  storageName, folderName, updatedAt, createdAt, exportAsMd, exportAsTxt
+}) => (
+  <div className='infoPanel' styleName='control-infoButton-panel-trash' style={{display: 'none'}}>
+    <div styleName='group-section'>
+      <div styleName='group-section-label'>
+        Storage
+      </div>
+      <div styleName='group-section-control'>
+        {storageName}
+      </div>
+    </div>
+    <div styleName='group-section'>
+      <div styleName='group-section-label'>
+        Folder
+      </div>
+      <div styleName='group-section-control'>
+        <text>Trash</text>{folderName}
+      </div>
+    </div>
+    <div styleName='group-section'>
+      <div styleName='group-section-label'>
+        Created
+      </div>
+      <div styleName='group-section-control'>
+        {createdAt}
+      </div>
+    </div>
+    <div styleName='group-section'>
+      <div styleName='group-section-label'>
+        Updated
+      </div>
+      <div styleName='group-section-control'>
+        {updatedAt}
+      </div>
+    </div>
+
+    <div id='export-wrap'>
+      <button styleName='export--enable' onClick={(e) => exportAsMd(e)}>
+        <i className='fa fa-file-code-o fa-fw' />
+        <p>.md</p>
+      </button>
+
+      <button styleName='export--enable' onClick={(e) => exportAsTxt(e)}>
+        <i className='fa fa-file-text-o fa-fw' />
+        <p>.txt</p>
+      </button>
+
+      <button styleName='export--unable'>
+        <i className='fa fa-file-pdf-o fa-fw' />
+        <p>.pdf</p>
+      </button>
+    </div>
+  </div>
+)
+
+InfoPanelTrashed.propTypes = {
+  storageName: PropTypes.string.isRequired,
+  folderName: PropTypes.string.isRequired,
+  updatedAt: PropTypes.string.isRequired,
+  createdAt: PropTypes.string.isRequired,
+  exportAsMd: PropTypes.func.isRequired,
+  exportAsTxt: PropTypes.func.isRequired
+}
+
+export default CSSModules(InfoPanelTrashed, styles)

browser/main/Detail/MarkdownNoteDetail.js

@@ -17,6 +17,7 @@ import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'
 import TrashButton from './TrashButton'
 import InfoButton from './InfoButton'
 import InfoPanel from './InfoPanel'
+import InfoPanelTrashed from './InfoPanelTrashed'
 import { formatDate } from 'browser/lib/date-formatter'
 
 const electron = require('electron')
@@ -300,10 +301,9 @@ class MarkdownNoteDetail extends React.Component {
         <InfoButton
           onClick={(e) => this.handleInfoButtonClick(e)}
         />
-        <InfoPanel
+        <InfoPanelTrashed
           storageName={currentOption.storage.name}
           folderName={currentOption.folder.name}
-          noteLink={`[${note.title}](${location.query.key})`}
           updatedAt={formatDate(note.updatedAt)}
           createdAt={formatDate(note.createdAt)}
           exportAsMd={this.exportAsMd}

browser/main/Detail/SnippetNoteDetail.js

@@ -20,6 +20,7 @@ import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'
 import TrashButton from './TrashButton'
 import InfoButton from './InfoButton'
 import InfoPanel from './InfoPanel'
+import InfoPanelTrashed from './InfoPanelTrashed'
 import { formatDate } from 'browser/lib/date-formatter'
 
 function pass (name) {
@@ -560,10 +561,9 @@ class SnippetNoteDetail extends React.Component {
         <InfoButton
           onClick={(e) => this.handleInfoButtonClick(e)}
         />
-        <InfoPanel
+        <InfoPanelTrashed
           storageName={currentOption.storage.name}
           folderName={currentOption.folder.name}
-          noteLink={`[${note.title}](${location.query.key})`}
           updatedAt={formatDate(note.updatedAt)}
           createdAt={formatDate(note.createdAt)}
           exportAsMd={this.showWarning}