mirror of
https://github.com/BoostIo/Boostnote
synced 2025-12-13 17:56:25 +00:00
Merge branch 'master' into feature/add_multiselect_notes_delete
This commit is contained in:
voidSatisfaction
@@ -37,3 +37,7 @@ Adam - $5
|
||||
Steve - $5
|
||||
|
||||
evmin - $5
|
||||
|
||||
[@yeojoy](https://twitter.com/yeojoy) - $5
|
||||
|
||||
Scotia Draven - $5
|
||||
|
||||
@@ -1,3 +1,10 @@
|
||||
<!--
|
||||
Please paste some **screenshots** with the **developer tool** open (console tab) when you report a bug.
|
||||
|
||||
If your issue is regarding boostnote mobile, move to https://github.com/BoostIO/boostnote-mobile.
|
||||
-->
|
||||
|
||||
<!--
|
||||
Love Boostnote? Please consider supporting us via OpenCollective:
|
||||
👉 https://opencollective.com/boostnoteio
|
||||
-->
|
||||
|
||||
@@ -59,7 +59,15 @@ $control-height = 30px
|
||||
.item-star
|
||||
color $ui-favorite-star-button-color
|
||||
&:hover
|
||||
background-color $ui-button--active-backgroundColor
|
||||
background-color alpha($ui-button--active-backgroundColor, 50%)
|
||||
color #e74c3c
|
||||
.menu-button-label
|
||||
color $ui-text-color
|
||||
&:active, &:active:hover
|
||||
background-color alpha($ui-button--active-backgroundColor, 50%)
|
||||
color #e74c3c
|
||||
.menu-button-label
|
||||
color $ui-text-color
|
||||
|
||||
.item-title-icon
|
||||
position relative
|
||||
@@ -111,7 +119,7 @@ $control-height = 30px
|
||||
|
||||
.item-bottom-time
|
||||
color $ui-inactive-text-color
|
||||
font-size 11px
|
||||
font-size 13px
|
||||
padding-left 2px
|
||||
padding-bottom 2px
|
||||
|
||||
@@ -148,6 +156,7 @@ body[data-theme="dark"]
|
||||
&:hover
|
||||
transition 0.15s
|
||||
background-color alpha($ui-dark-button--active-backgroundColor, 20%)
|
||||
color $ui-dark-text-color
|
||||
.item-title
|
||||
.item-title-icon
|
||||
.item-bottom-time
|
||||
@@ -155,11 +164,12 @@ body[data-theme="dark"]
|
||||
color $ui-dark-text-color
|
||||
.item-bottom-tagList-item
|
||||
transition 0.15s
|
||||
background-color alpha($ui-dark-button--active-backgroundColor, 40%)
|
||||
background-color alpha(#fff, 20%)
|
||||
color $ui-dark-text-color
|
||||
&:active
|
||||
transition 0.15s
|
||||
background-color $ui-dark-button--active-backgroundColor
|
||||
color $ui-dark-text-color
|
||||
.item-title
|
||||
.item-title-icon
|
||||
.item-bottom-time
|
||||
@@ -185,6 +195,11 @@ body[data-theme="dark"]
|
||||
.item-bottom-tagList-item
|
||||
background-color alpha(white, 10%)
|
||||
color $ui-dark-text-color
|
||||
&:hover
|
||||
background-color alpha($ui-dark-button--active-backgroundColor, 50%)
|
||||
color #c0392b
|
||||
.item-bottom-tagList-item
|
||||
background-color alpha(#fff, 20%)
|
||||
|
||||
.item-title
|
||||
color $ui-inactive-text-color
|
||||
|
||||
@@ -37,7 +37,15 @@ $control-height = 30px
|
||||
.item-simple-title-icon
|
||||
color $ui-text-color
|
||||
&:hover
|
||||
background-color $ui-button--active-backgroundColor
|
||||
background-color alpha($ui-button--active-backgroundColor, 50%)
|
||||
color #e74c3c
|
||||
.menu-button-label
|
||||
color $ui-text-color
|
||||
&:active, &:active:hover
|
||||
background-color alpha($ui-button--active-backgroundColor, 50%)
|
||||
color #e74c3c
|
||||
.menu-button-label
|
||||
color $ui-text-color
|
||||
|
||||
.item-simple-title
|
||||
font-size 13px
|
||||
@@ -67,33 +75,50 @@ body[data-theme="dark"]
|
||||
.item-simple
|
||||
border-color $ui-dark-borderColor
|
||||
background-color $ui-dark-noteList-backgroundColor
|
||||
&:active
|
||||
background-color $ui-dark-button--active-backgroundColor
|
||||
&:hover
|
||||
transition 0.15s
|
||||
background-color alpha($ui-dark-button--active-backgroundColor, 20%)
|
||||
color $ui-dark-text-color
|
||||
.item-simple-title
|
||||
.item-simple-title-icon
|
||||
.item-simple-bottom-time
|
||||
.item-simple-bottom-tagList-item
|
||||
transition 0.15s
|
||||
color $ui-dark-text-color
|
||||
&:hover
|
||||
background-color alpha($ui-dark-button--active-backgroundColor, 20%)
|
||||
.item-simple-bottom-tagList-item
|
||||
transition 0.15s
|
||||
background-color alpha(#fff, 20%)
|
||||
color $ui-dark-text-color
|
||||
&:active
|
||||
transition 0.15s
|
||||
background-color $ui-dark-button--active-backgroundColor
|
||||
color $ui-dark-text-color
|
||||
.item-simple-title
|
||||
.item-simple-title-icon
|
||||
.item-simple-bottom-time
|
||||
transition 0.15s
|
||||
color $ui-dark-text-color
|
||||
.item-simple-bottom-tagList-item
|
||||
transition 0.15s
|
||||
background-color alpha(white, 10%)
|
||||
color $ui-dark-text-color
|
||||
|
||||
.item-simple--active
|
||||
border-color $ui-dark-borderColor
|
||||
background-color $ui-dark-button--active-backgroundColor
|
||||
.item-simple-wrapper
|
||||
border-color transparent
|
||||
.item-simple-title
|
||||
.item-simple-title-icon
|
||||
.item-simple-bottom-time
|
||||
color $ui-dark-text-color
|
||||
.item-simple-bottom-tagList-item
|
||||
background-color transparent
|
||||
background-color alpha(white, 10%)
|
||||
color $ui-dark-text-color
|
||||
&:hover
|
||||
background-color alpha($ui-dark-button--active-backgroundColor, 50%)
|
||||
color #c0392b
|
||||
.item-simple-bottom-tagList-item
|
||||
background-color alpha(#fff, 20%)
|
||||
|
||||
.item-simple-title
|
||||
color $ui-inactive-text-color
|
||||
|
||||
@@ -40,7 +40,7 @@ class RealtimeNotification extends React.Component {
|
||||
? <a styleName='notification-link' href={notifications[0].linkUrl}
|
||||
onClick={(e) => this.handleLinkClick(e)}
|
||||
>
|
||||
{notifications[0].text}
|
||||
Info: {notifications[0].text}
|
||||
</a>
|
||||
: ''
|
||||
|
||||
|
||||
@@ -2,20 +2,20 @@
|
||||
z-index 1000
|
||||
font-size 12px
|
||||
position absolute
|
||||
bottom 0px
|
||||
right 0px
|
||||
background-color #EBEBEB
|
||||
bottom 20px
|
||||
width 100%
|
||||
float left
|
||||
height 30px
|
||||
background-color none
|
||||
|
||||
.notification-link
|
||||
position absolute
|
||||
right 5px
|
||||
top 5px
|
||||
text-decoration none
|
||||
color #282A36
|
||||
font-size 14px
|
||||
border 1px solid #6FA8E6
|
||||
background-color alpha(#6FA8E6, 0.2)
|
||||
padding 3px 9px
|
||||
padding 5px 12px
|
||||
border-radius 2px
|
||||
transition 0.2s
|
||||
&:hover
|
||||
@@ -23,7 +23,7 @@
|
||||
|
||||
body[data-theme="dark"]
|
||||
.notification-area
|
||||
background-color #1E2124
|
||||
background-color none
|
||||
|
||||
.notification-link
|
||||
color #fff
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
navButtonColor()
|
||||
height 32px
|
||||
padding 0 15px
|
||||
font-size 12px
|
||||
font-size 13px
|
||||
width 100%
|
||||
text-align left
|
||||
overflow ellipsis
|
||||
@@ -71,7 +71,7 @@
|
||||
border-bottom-right-radius 2px
|
||||
pointer-events none
|
||||
opacity 0
|
||||
font-size 12px
|
||||
font-size 13px
|
||||
|
||||
body[data-theme="dark"]
|
||||
.menu-button
|
||||
|
||||
@@ -35,10 +35,8 @@ const StorageItem = ({
|
||||
>
|
||||
<span styleName={isFolded
|
||||
? 'folderList-item-name--folded' : 'folderList-item-name'
|
||||
}
|
||||
style={{borderColor: folderColor}}
|
||||
>
|
||||
{isFolded ? folderName.substring(0, 1) : folderName}
|
||||
}>
|
||||
<text style={{color: folderColor, paddingRight: '10px'}}>{isActive ? <i className='fa fa-folder-open-o' /> : <i className='fa fa-folder-o' />}</text>{isFolded ? folderName.substring(0, 1) : folderName}
|
||||
</span>
|
||||
{(!isFolded && isNumber(noteCount)) &&
|
||||
<span styleName='folderList-item-noteCount'>{noteCount}</span>
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
text-align left
|
||||
border none
|
||||
overflow ellipsis
|
||||
font-size 12px
|
||||
font-size 13px
|
||||
&:first-child
|
||||
margin-top 0
|
||||
&:hover
|
||||
@@ -35,7 +35,7 @@
|
||||
.folderList-item-name
|
||||
display block
|
||||
flex 1
|
||||
padding 0 25px
|
||||
padding 0 12px
|
||||
height 26px
|
||||
line-height 26px
|
||||
border-width 0 0 0 2px
|
||||
@@ -48,7 +48,7 @@
|
||||
float right
|
||||
line-height 26px
|
||||
padding-right 15px
|
||||
font-size 12px
|
||||
font-size 13px
|
||||
|
||||
.folderList-item-tooltip
|
||||
tooltip()
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
text-align left
|
||||
border none
|
||||
overflow ellipsis
|
||||
font-size 12px
|
||||
font-size 13px
|
||||
&:first-child
|
||||
margin-top 0
|
||||
&:hover
|
||||
@@ -30,7 +30,7 @@
|
||||
text-align left
|
||||
border none
|
||||
overflow ellipsis
|
||||
font-size 12px
|
||||
font-size 13px
|
||||
&:hover
|
||||
background-color alpha($ui-button--active-backgroundColor, 60%)
|
||||
transition 0.2s
|
||||
@@ -38,7 +38,7 @@
|
||||
.tagList-item-name
|
||||
display block
|
||||
flex 1
|
||||
padding 0 25px
|
||||
padding 0 15px
|
||||
height 26px
|
||||
line-height 26px
|
||||
border-width 0 0 0 2px
|
||||
|
||||
@@ -6,68 +6,54 @@ const InfoPanel = ({
|
||||
storageName, folderName, noteLink, updatedAt, createdAt, exportAsMd, exportAsTxt, wordCount, letterCount, type, print
|
||||
}) => (
|
||||
<div className='infoPanel' styleName='control-infoButton-panel' 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'>
|
||||
{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 styleName='group-section'>
|
||||
<div styleName='group-section-label'>
|
||||
Note Link
|
||||
</div>
|
||||
<div styleName='group-section-control'>
|
||||
<input value={noteLink} onClick={(e) => { e.target.select() }} />
|
||||
</div>
|
||||
<div>
|
||||
<p styleName='modification-date'>{updatedAt}</p>
|
||||
<p styleName='modification-date-desc'>MODIFICATION DATE</p>
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
|
||||
{type === 'SNIPPET_NOTE'
|
||||
? ''
|
||||
: <div>
|
||||
<div styleName='group-section'>
|
||||
<div styleName='group-section-label'>
|
||||
Words
|
||||
</div>
|
||||
<div styleName='group-section-control'>
|
||||
{wordCount}
|
||||
</div>
|
||||
: <div styleName='count-wrap'>
|
||||
<div styleName='count-number'>
|
||||
<p styleName='infoPanel-defaul-count'>{wordCount}</p>
|
||||
<p styleName='infoPanel-sub-count'>Words</p>
|
||||
</div>
|
||||
<div styleName='group-section'>
|
||||
<div styleName='group-section-label'>
|
||||
Letters
|
||||
</div>
|
||||
<div styleName='group-section-control'>
|
||||
{letterCount}
|
||||
</div>
|
||||
<div styleName='count-number'>
|
||||
<p styleName='infoPanel-defaul-count'>{letterCount}</p>
|
||||
<p styleName='infoPanel-sub-count'>Letters</p>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
{type === 'SNIPPET_NOTE'
|
||||
? ''
|
||||
: <hr />
|
||||
}
|
||||
|
||||
<div>
|
||||
<p styleName='infoPanel-default'>{storageName}</p>
|
||||
<p styleName='infoPanel-sub'>STORAGE</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p styleName='infoPanel-default'>{folderName}</p>
|
||||
<p styleName='infoPanel-sub'>FOLDER</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p styleName='infoPanel-default'>{createdAt}</p>
|
||||
<p styleName='infoPanel-sub'>CREATION DATE</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input styleName='infoPanel-noteLink' value={noteLink} onClick={(e) => { e.target.select() }} />
|
||||
<p styleName='infoPanel-sub'>NOTE LINK</p>
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<div id='export-wrap'>
|
||||
<button styleName='export--enable' onClick={(e) => exportAsMd(e)}>
|
||||
<i className='fa fa-file-code-o fa-fw' />
|
||||
|
||||
@@ -10,52 +10,81 @@
|
||||
|
||||
.control-infoButton-panel
|
||||
z-index 200
|
||||
margin-top 45px
|
||||
margin-left -210px
|
||||
margin-top 38px
|
||||
margin-left -140px
|
||||
position absolute
|
||||
padding 20px 20px 0 20px
|
||||
width 340px
|
||||
padding 20px 25px 0 25px
|
||||
width 300px
|
||||
height 500px
|
||||
overflow auto
|
||||
background-color $ui-noteList-backgroundColor
|
||||
border 1px solid $border-color
|
||||
box-shadow 2px 12px 15px 2px rgba(0, 0, 0, 0.1), 2px 1px 50px 2px rgba(0, 0, 0, 0.1)
|
||||
border-radius 2px
|
||||
|
||||
.modification-date
|
||||
font-size 18px
|
||||
line-height 30px
|
||||
color $ui-text-color
|
||||
|
||||
.modification-date-desc
|
||||
font-size 18px
|
||||
color $ui-inactive-text-color
|
||||
|
||||
.control-infoButton-panel-trash
|
||||
z-index 200
|
||||
margin-top 45px
|
||||
margin-left -230px
|
||||
margin-left -190px
|
||||
position absolute
|
||||
padding 20px 20px 0 20px
|
||||
width 320px
|
||||
padding 20px 25px 0 25px
|
||||
width 300px
|
||||
background-color $ui-noteList-backgroundColor
|
||||
border 1px solid $border-color
|
||||
box-shadow 2px 12px 15px 2px rgba(0, 0, 0, 0.1), 2px 1px 50px 2px rgba(0, 0, 0, 0.1)
|
||||
border-radius 2px
|
||||
|
||||
.group-section
|
||||
display flex
|
||||
.count-wrap
|
||||
display flex
|
||||
position relative
|
||||
width 100%
|
||||
|
||||
.count-number
|
||||
position relative
|
||||
display block
|
||||
width 50%
|
||||
overflow hidden
|
||||
margin 0
|
||||
padding 0
|
||||
|
||||
.infoPanel-defaul-count
|
||||
font-size 16px
|
||||
line-height 30px
|
||||
font-size 13px
|
||||
|
||||
.group-section-label
|
||||
width 70px
|
||||
height 20px
|
||||
text-align left
|
||||
margin-right 50px
|
||||
font-size 13px
|
||||
color $ui-inactive-text-color
|
||||
|
||||
.group-section-control
|
||||
flex 1
|
||||
font-size 13px
|
||||
color $ui-text-color
|
||||
|
||||
.group-section-control input
|
||||
width 160px
|
||||
height 25px
|
||||
.infoPanel-sub-count
|
||||
font-size 16px
|
||||
color $ui-inactive-text-color
|
||||
padding-bottom 8px
|
||||
|
||||
.group-section-control text
|
||||
.infoPanel-default
|
||||
font-size 14px
|
||||
line-height 30px
|
||||
color $ui-text-color
|
||||
|
||||
.infoPanel-sub
|
||||
font-size 14px
|
||||
color $ui-inactive-text-color
|
||||
padding-bottom 8px
|
||||
|
||||
.infoPanel-noteLink
|
||||
padding-right 5px
|
||||
width 200px
|
||||
height 25px
|
||||
margin-bottom 6px
|
||||
|
||||
.infoPanel-trash
|
||||
color #EA4447
|
||||
font-weight 600
|
||||
font-size 14px
|
||||
width 70px
|
||||
height 25px
|
||||
background-color rgba(226,33,113,0.1)
|
||||
border none
|
||||
outline none
|
||||
@@ -96,20 +125,30 @@
|
||||
body[data-theme="dark"]
|
||||
.control-infoButton-panel
|
||||
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
|
||||
|
||||
.group-section-control
|
||||
.modification-date
|
||||
color $ui-dark-text-color
|
||||
|
||||
.group-section-control input
|
||||
background-color alpha($ui-dark-borderColor, 80%)
|
||||
.modification-date-desc
|
||||
color $ui-inactive-text-color
|
||||
|
||||
.infoPanel-defaul-count
|
||||
color $ui-dark-text-color
|
||||
|
||||
.infoPanel-sub-count
|
||||
color $ui-inactive-text-color
|
||||
|
||||
.infoPanel-default
|
||||
color $ui-dark-text-color
|
||||
|
||||
.infoPanel-sub
|
||||
color $ui-inactive-text-color
|
||||
|
||||
.infoPanel-noteLink
|
||||
background-color alpha($ui-dark-borderColor, 60%)
|
||||
color $ui-dark-text-color
|
||||
|
||||
[id=export-wrap]
|
||||
|
||||
@@ -6,37 +6,26 @@ 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>
|
||||
<p styleName='modification-date'>{updatedAt}</p>
|
||||
<p styleName='modification-date-desc'>MODIFICATION DATE</p>
|
||||
</div>
|
||||
<div styleName='group-section'>
|
||||
<div styleName='group-section-label'>
|
||||
Folder
|
||||
</div>
|
||||
<div styleName='group-section-control'>
|
||||
<text>Trash</text>{folderName}
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<div>
|
||||
<p styleName='infoPanel-default'>{storageName}</p>
|
||||
<p styleName='infoPanel-sub'>STORAGE</p>
|
||||
</div>
|
||||
<div styleName='group-section'>
|
||||
<div styleName='group-section-label'>
|
||||
Created
|
||||
</div>
|
||||
<div styleName='group-section-control'>
|
||||
{createdAt}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p styleName='infoPanel-default'><text styleName='infoPanel-trash'>Trash</text>{folderName}</p>
|
||||
<p styleName='infoPanel-sub'>FOLDER</p>
|
||||
</div>
|
||||
<div styleName='group-section'>
|
||||
<div styleName='group-section-label'>
|
||||
Updated
|
||||
</div>
|
||||
<div styleName='group-section-control'>
|
||||
{updatedAt}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p styleName='infoPanel-default'>{createdAt}</p>
|
||||
<p styleName='infoPanel-sub'>CREATION DATE</p>
|
||||
</div>
|
||||
|
||||
<div id='export-wrap'>
|
||||
|
||||
@@ -3,9 +3,7 @@
|
||||
|
||||
.root
|
||||
absolute top right bottom
|
||||
border-width 0 0 1px
|
||||
border-style solid
|
||||
border-color $ui-borderColor
|
||||
border-width 0
|
||||
background-color $ui-noteDetail-backgroundColor
|
||||
box-shadow $note-detail-box-shadow
|
||||
|
||||
@@ -44,7 +42,6 @@
|
||||
|
||||
body[data-theme="dark"]
|
||||
.root
|
||||
border-color $ui-dark-borderColor
|
||||
background-color $ui-dark-noteDetail-backgroundColor
|
||||
box-shadow none
|
||||
|
||||
|
||||
@@ -3,9 +3,7 @@
|
||||
|
||||
.root
|
||||
absolute top bottom right
|
||||
border-width 0 0 1px
|
||||
border-style solid
|
||||
border-color $ui-borderColor
|
||||
border-width 0
|
||||
background-color $ui-noteDetail-backgroundColor
|
||||
box-shadow $note-detail-box-shadow
|
||||
|
||||
@@ -57,7 +55,7 @@
|
||||
|
||||
.override
|
||||
absolute bottom left
|
||||
bottom 30px
|
||||
bottom 2px
|
||||
left 60px
|
||||
height 23px
|
||||
z-index 101
|
||||
|
||||
@@ -14,7 +14,6 @@ import InitModal from 'browser/main/modals/InitModal'
|
||||
import mixpanel from 'browser/main/lib/mixpanel'
|
||||
import mobileAnalytics from 'browser/main/lib/AwsMobileAnalyticsConfig'
|
||||
import eventEmitter from 'browser/main/lib/eventEmitter'
|
||||
import RealtimeNotification from 'browser/components/RealtimeNotification'
|
||||
|
||||
function focused () {
|
||||
mixpanel.track('MAIN_FOCUSED')
|
||||
@@ -192,14 +191,6 @@ class Main extends React.Component {
|
||||
|
||||
// the width of the navigation bar when it is folded/collapsed
|
||||
const foldedNavigationWidth = 44
|
||||
let notificationBarOffsetLeft
|
||||
if (this.state.fullScreen) {
|
||||
notificationBarOffsetLeft = 0
|
||||
} else if (config.isSideNavFolded) {
|
||||
notificationBarOffsetLeft = foldedNavigationWidth
|
||||
} else {
|
||||
notificationBarOffsetLeft = this.state.navWidth
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
@@ -268,9 +259,6 @@ class Main extends React.Component {
|
||||
ignorePreviewPointerEvents={this.state.isRightSliderFocused}
|
||||
/>
|
||||
</div>
|
||||
<RealtimeNotification
|
||||
style={{left: notificationBarOffsetLeft}}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -2,7 +2,6 @@ $control-height = 30px
|
||||
|
||||
.root
|
||||
absolute left bottom
|
||||
bottom 30px
|
||||
top $topBar-height - 1
|
||||
background-color $ui-noteList-backgroundColor
|
||||
|
||||
|
||||
@@ -575,11 +575,7 @@ class NoteList extends React.Component {
|
||||
// Add notes to the current folder
|
||||
addNotesFromFiles (filepaths) {
|
||||
const { dispatch, location } = this.props
|
||||
|
||||
const targetIndex = this.getTargetIndex()
|
||||
|
||||
const storageKey = this.notes[targetIndex].storage
|
||||
const folderKey = this.notes[targetIndex].folder
|
||||
const { storage, folder } = this.resolveTargetFolder()
|
||||
|
||||
if (filepaths === undefined) return
|
||||
filepaths.forEach((filepath) => {
|
||||
@@ -588,11 +584,11 @@ class NoteList extends React.Component {
|
||||
const content = data.toString()
|
||||
const newNote = {
|
||||
content: content,
|
||||
folder: folderKey,
|
||||
folder: folder.key,
|
||||
title: markdown.strip(findNoteTitle(content)),
|
||||
type: 'MARKDOWN_NOTE'
|
||||
}
|
||||
dataApi.createNote(storageKey, newNote)
|
||||
dataApi.createNote(storage.key, newNote)
|
||||
.then((note) => {
|
||||
dispatch({
|
||||
type: 'UPDATE_NOTE',
|
||||
@@ -615,6 +611,36 @@ class NoteList extends React.Component {
|
||||
return targetIndex
|
||||
}
|
||||
|
||||
resolveTargetFolder () {
|
||||
const { data, params } = this.props
|
||||
let storage = data.storageMap.get(params.storageKey)
|
||||
|
||||
// Find first storage
|
||||
if (storage == null) {
|
||||
for (let kv of data.storageMap) {
|
||||
storage = kv[1]
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
if (storage == null) this.showMessageBox('No storage for importing note(s)')
|
||||
const folder = _.find(storage.folders, {key: params.folderKey}) || storage.folders[0]
|
||||
if (folder == null) this.showMessageBox('No folder for importing note(s)')
|
||||
|
||||
return {
|
||||
storage,
|
||||
folder
|
||||
}
|
||||
}
|
||||
|
||||
showMessageBox (message) {
|
||||
dialog.showMessageBox(remote.getCurrentWindow(), {
|
||||
type: 'warning',
|
||||
message: message,
|
||||
buttons: ['OK']
|
||||
})
|
||||
}
|
||||
|
||||
render () {
|
||||
let { location, notes, config, dispatch } = this.props
|
||||
let { selectedNoteKeys } = this.state
|
||||
@@ -631,6 +657,25 @@ class NoteList extends React.Component {
|
||||
if (note.isTrashed !== true || location.pathname === '/trashed') return true
|
||||
})
|
||||
|
||||
moment.locale('en', {
|
||||
relativeTime: {
|
||||
future: 'in %s',
|
||||
past: '%s ago',
|
||||
s: '%ds',
|
||||
ss: '%ss',
|
||||
m: '1m',
|
||||
mm: '%dm',
|
||||
h: 'an hour',
|
||||
hh: '%dh',
|
||||
d: '1d',
|
||||
dd: '%dd',
|
||||
M: '1M',
|
||||
MM: '%dM',
|
||||
y: '1Y',
|
||||
yy: '%dY'
|
||||
}
|
||||
})
|
||||
|
||||
let noteList = notes
|
||||
.map(note => {
|
||||
if (note == null) {
|
||||
@@ -644,6 +689,7 @@ class NoteList extends React.Component {
|
||||
config.sortBy === 'CREATED_AT'
|
||||
? note.createdAt : note.updatedAt
|
||||
).fromNow('D')
|
||||
const key = `${note.storage}-${note.key}`
|
||||
|
||||
if (isDefault) {
|
||||
return (
|
||||
|
||||
@@ -26,27 +26,22 @@
|
||||
|
||||
.switch-buttons
|
||||
background-color transparent
|
||||
border 1px solid $ui-borderColor
|
||||
width 110px
|
||||
border 0
|
||||
height 25px
|
||||
margin 20px auto 0px auto
|
||||
border-radius 1px
|
||||
margin 20px auto 0px 8px
|
||||
|
||||
.non-active-button
|
||||
navButtonColor()
|
||||
font-weight 600
|
||||
width 54px
|
||||
height 23px
|
||||
color $ui-inactive-text-color
|
||||
font-size 16px
|
||||
border 0
|
||||
background-color transparent
|
||||
transition 0.2s
|
||||
&:hover
|
||||
color alpha(#0B99F1, 60%)
|
||||
|
||||
.active-button
|
||||
@extend .non-active-button
|
||||
background-color $ui-button--active-backgroundColor
|
||||
color $ui-text-color
|
||||
&:hover
|
||||
background-color alpha($ui-button--active-backgroundColor, 70%)
|
||||
color alpha($ui-text-color, 70%)
|
||||
&:active, &:active:hover
|
||||
background-color $ui-button--active-backgroundColor
|
||||
color #0B99F1
|
||||
|
||||
.top-menu-label
|
||||
margin-left 5px
|
||||
@@ -100,7 +95,7 @@
|
||||
border-top-right-radius 2px
|
||||
border-bottom-right-radius 2px
|
||||
pointer-events none
|
||||
font-size 12px
|
||||
font-size 13px
|
||||
|
||||
body[data-theme="dark"]
|
||||
.root, .root--folded
|
||||
@@ -118,25 +113,10 @@ body[data-theme="dark"]
|
||||
&:hover
|
||||
background-color alpha($ui-dark-button--active-backgroundColor, 20%)
|
||||
|
||||
.switch-buttons
|
||||
border-color $ui-dark-borderColor
|
||||
|
||||
.non-active-button
|
||||
navDarkButtonColor()
|
||||
|
||||
.active-button
|
||||
@extend .non-active-button
|
||||
background-color $ui-dark-button--active-backgroundColor
|
||||
color $ui-dark-text-color
|
||||
color alpha($ui-dark-text-color, 60%)
|
||||
&:hover
|
||||
background-color alpha($ui-dark-button--active-backgroundColor, 70%)
|
||||
color alpha($ui-dark-text-color, 70%)
|
||||
&:active
|
||||
color $ui-dark-text-color
|
||||
background-color alpha($ui-dark-button--active-backgroundColor, 60%)
|
||||
&:active, &:active:hover
|
||||
color $ui-dark-text-color
|
||||
background-color $ui-dark-button--active-backgroundColor
|
||||
color alpha(#0B99F1, 60%)
|
||||
|
||||
.tag-title
|
||||
p
|
||||
|
||||
@@ -148,8 +148,8 @@ class SideNav extends React.Component {
|
||||
>
|
||||
<div styleName='top'>
|
||||
<div styleName='switch-buttons'>
|
||||
<button styleName={isTagActive ? 'non-active-button' : 'active-button'} onClick={this.handleSwitchFoldersButtonClick.bind(this)}>Folders</button>
|
||||
<button styleName={isTagActive ? 'active-button' : 'non-active-button'} onClick={this.handleSwitchTagsButtonClick.bind(this)}>Tags</button>
|
||||
<button styleName={isTagActive ? 'non-active-button' : 'active-button'} onClick={this.handleSwitchFoldersButtonClick.bind(this)}><i className='fa fa-folder fa-fw' /></button>
|
||||
<button styleName={isTagActive ? 'active-button' : 'non-active-button'} onClick={this.handleSwitchTagsButtonClick.bind(this)}><i className='fa fa-tags fa-fw' /></button>
|
||||
</div>
|
||||
<div>
|
||||
<button styleName='top-menu'
|
||||
|
||||
@@ -2,8 +2,6 @@
|
||||
|
||||
.root
|
||||
absolute bottom left right
|
||||
height $statusBar-height
|
||||
bottom 16px
|
||||
z-index 100
|
||||
background-color $ui-noteDetail-backgroundColor
|
||||
display flex
|
||||
|
||||
@@ -25,7 +25,7 @@
|
||||
|
||||
.folderItem-left-key
|
||||
color $ui-inactive-text-color
|
||||
font-size 10px
|
||||
font-size 13px
|
||||
margin 0 5px
|
||||
border none
|
||||
|
||||
|
||||
@@ -9,6 +9,7 @@ import StoragesTab from './StoragesTab'
|
||||
import ModalEscButton from 'browser/components/ModalEscButton'
|
||||
import CSSModules from 'browser/lib/CSSModules'
|
||||
import styles from './PreferencesModal.styl'
|
||||
import RealtimeNotification from 'browser/components/RealtimeNotification'
|
||||
|
||||
class Preferences extends React.Component {
|
||||
constructor (props) {
|
||||
@@ -136,6 +137,7 @@ class Preferences extends React.Component {
|
||||
<div ref='content' styleName='content'>
|
||||
{content}
|
||||
</div>
|
||||
<RealtimeNotification />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -5,7 +5,7 @@ $danger-color = #c9302c
|
||||
$danger-lighten-color = lighten(#c9302c, 5%)
|
||||
|
||||
// Layouts
|
||||
$statusBar-height = 36px
|
||||
$statusBar-height = 0px
|
||||
$sideNav-width = 200px
|
||||
$sideNav--folded-width = 44px
|
||||
$topBar-height = 60px
|
||||
|
||||
Reference in New Issue
Block a user