public/Boostnote
1
0
Fork 0
mirror of https://github.com/BoostIo/Boostnote synced 2025-12-13 17:56:25 +00:00
Code Issues Releases Wiki Activity

Merge pull request #424 from BoostIO/Design-update

Browse Source 
Design update at v0.8.8
This commit is contained in:
Kazu Yokomizo
2017-04-15 13:00:36 +09:00
committed by GitHub
parent c120633f14 6ce6a7036b
commit 3dd49c287d
32 changed files with 389 additions and 287 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
browser/components/NoteItem.js
View File

@@ -13,7 +13,7 @@ import styles from './NoteItem.styl'
*/
const TagElement = ({ tagName }) => (
<span styleName='item-bottom-tagList-item' key={tagName}>
{tagName}
#{tagName}
</span>
)
@@ -52,8 +52,10 @@ const NoteItem = ({ isActive, note, dateDisplay, handleNoteClick, handleNoteCont
onContextMenu={e => handleNoteContextMenu(e, `${note.storage}-${note.key}`)}
>
<div styleName='item-wrapper'>
<div styleName='item-bottom-time'>{dateDisplay}</div>
{note.type === 'SNIPPET_NOTE'
? <i styleName='item-title-icon' className='fa fa-fw fa-code' />
: <i styleName='item-title-icon' className='fa fa-fw fa-file-text-o' />
}
<div styleName='item-title'>
{note.title.trim().length > 0
? note.title
@@ -61,23 +63,18 @@ const NoteItem = ({ isActive, note, dateDisplay, handleNoteClick, handleNoteCont
}
</div>
<div styleName='item-bottom-time'>{dateDisplay}</div>
{note.isStarred
? <i styleName='item-star' className='fa fa-star' /> : ''
}
<div styleName='item-bottom'>
<div styleName='item-bottom-tagList'>
{note.tags.length > 0
? TagElementList(note.tags)
: ''
: <span styleName='item-bottom-tagList-empty' />
}
</div>
</div>
{note.type === 'SNIPPET_NOTE'
? <i styleName='item-title-icon' className='fa fa-fw fa-code' />
: <i styleName='item-title-icon' className='fa fa-fw fa-file-text-o' />
}
{note.isStarred
? <i styleName='item-star' className='fa fa-star' /> : ''
}
</div>
</div>
)

130
browser/components/NoteItem.styl
View File

@@ -7,63 +7,64 @@ $control-height = 30px
.item
position relative
padding 0 25px
padding 0 20px
user-select none
cursor pointer
background-color $ui-noteList-backgroundColor
transition background-color 0.15s
transition background-color 0.2s
&:hover
background-color alpha($ui-active-color, 20%)
&:active
background-color $ui-active-color
color white
background-color alpha($ui-button--active-backgroundColor, 40%)
.item-title
.item-title-empty
.item-bottom-tagList-empty
.item-bottom-time
.item-title-icon
color white
.item-bottom-time
.item-bottom-tagList-item
background-color transparent
color white
transition 0.15s
color $ui-text-color
&:active
background-color $ui-button--active-backgroundColor
color $ui-text-color
.item-title
.item-title-icon
.item-bottom-time
.item-bottom-tagList-item
transition 0.15s
color $ui-text-color
.item-wrapper
padding 20px 0
padding 15px 0
border-bottom $ui-border
.item--active
@extend .item
background-color $ui-active-color
color white
background-color $ui-button--active-backgroundColor
color $ui-text-color
.item-title
.item-title-empty
.item-bottom-tagList-empty
.item-bottom-time
.item-title-icon
color white
color $ui-text-color
.item-bottom-tagList-item
background-color transparent
color white
color $ui-text-color
.item-wrapper
border-color transparent
&:hover
background-color $ui-active-color
.item-title
font-size 14px
height 40px
box-sizing border-box
line-height 24px
padding-top 5px
padding-bottom 20px
overflow ellipsis
color $ui-text-color
background-color $ui-button--active-backgroundColor
.item-title-icon
position absolute
top 20px
right 25px
font-size 14px
position relative
font-size 12px
color $ui-inactive-text-color
.item-title
font-size 13px
position relative
top -12px
left 20px
padding-right 15px
padding-bottom 4px
overflow ellipsis
color $ui-inactive-text-color
.item-title-empty
@@ -84,37 +85,33 @@ $control-height = 30px
flex 1
overflow ellipsis
line-height 20px
color #FFFFFF
padding-left 2px
.item-bottom-tagList-item
font-size 12px
font-size 10px
margin-right 8px
padding 0 10px
padding 0
height 20px
box-sizing border-box
border-radius 20px
vertical-align middle
background-color $ui-tag-backgroundColor
color #FFFFFF
.item-bottom-tagList-empty
background-color transparent
color $ui-inactive-text-color
vertical-align middle
font-size 10px
margin-left 5px
.item-bottom-time
color $ui-inactive-text-color
font-size 12px
font-size 10px
padding-left 2px
padding-bottom 2px
.item-star
position absolute
top 20px
right 29px
top 19px
left 5px
width 34px
height 34px
color $ui-favorite-star-button-color
font-size 14px
font-size 12px
padding 0
border-radius 17px
@@ -127,41 +124,50 @@ body[data-theme="dark"]
border-color $ui-dark-borderColor
background-color $ui-dark-noteList-backgroundColor
&:active
background-color $ui-active-color
background-color $ui-dark-button--active-backgroundColor
.item-title
.item-title-icon
.item-bottom-time
.item-bottom-tagList-item
transition 0.15s
color $ui-dark-text-color
&:hover
background-color alpha($ui-active-color, 20%)
background-color alpha($ui-dark-button--active-backgroundColor, 20%)
.item-title
.item-title-icon
.item-bottom-time
.item-bottom-tagList-item
transition 0.15s
color $ui-dark-text-color
.item-wrapper
border-color $ui-dark-borderColor
.item--active
@extend .item
border-color $ui-dark-borderColor
background-color $ui-active-color
background-color $ui-dark-button--active-backgroundColor
.item-wrapper
border-color transparent
.item-title
color white
.item-title-icon
.item-bottom-time
color $ui-dark-text-color
.item-bottom-tagList-item
background-color transparent
color white
.item-bottom-tagList-empty
color white
&:hover
background-color $ui-active-color
color $ui-dark-text-color
.item-title
color $ui-dark-text-color
color $ui-inactive-text-color
.item-title-icon
color $ui-darkinactive-text-color
color $ui-inactive-text-color
.item-title-empty
color $ui-dark-inactive-text-color
color $ui-inactive-text-color
.item-bottom-tagList-item
background-color $ui-dark-tag-backgroundColor
color $ui-dark-text-color
background-color transparent
color $ui-inactive-text-color
.item-bottom-tagList-empty
color $ui-inactive-text-color

60
browser/components/NoteItemSimple.styl
View File

@@ -13,36 +13,40 @@ $control-height = 30px
background-color $ui-noteList-backgroundColor
transition background-color 0.15s
&:hover
background-color alpha($ui-active-color, 20%)
&:active
background-color $ui-active-color
color white
background-color alpha($ui-button--active-backgroundColor, 40%)
.item-simple-title
.item-simple-title-empty
.item-simple-title-icon
color white
color $ui-text-color
&:active
background-color $ui-button--active-backgroundColor
color $ui-text-color
.item-simple-title
.item-simple-title-empty
.item-simple-title-icon
color $ui-text-color
.item-simple--active
@extend .item-simple
background-color $ui-active-color
color white
background-color $ui-button--active-backgroundColor
color $ui-text-color
.item-simple-title
.item-simple-title-empty
border-color transparent
color white
color $ui-text-color
.item-simple-title-icon
color white
color $ui-text-color
&:hover
background-color $ui-active-color
background-color $ui-button--active-backgroundColor
.item-simple-title
font-size 14px
font-size 12px
height 40px
box-sizing border-box
line-height 24px
padding-top 8px
overflow ellipsis
color $ui-text-color
color $ui-inactive-text-color
border-bottom $ui-border
.item-simple-title-icon
@@ -63,23 +67,35 @@ body[data-theme="dark"]
border-color $ui-dark-borderColor
background-color $ui-dark-noteList-backgroundColor
&:active
background-color $ui-active-color
background-color $ui-dark-button--active-backgroundColor
.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-active-color, 20%)
background-color alpha($ui-dark-button--active-backgroundColor, 20%)
.item-simple-title
.item-simple-title-icon
.item-simple-bottom-time
.item-simple-bottom-tagList-item
transition 0.15s
color $ui-dark-text-color
.item-simple--active
@extend .item-simple
border-color $ui-dark-borderColor
background-color $ui-active-color
background-color $ui-dark-button--active-backgroundColor
.item-simple-title
.item-simple-title-empty
color white
border-color transparent
&:hover
background-color $ui-active-color
.item-simple-title-icon
.item-simple-bottom-time
color $ui-dark-text-color
.item-simple-bottom-tagList-item
background-color transparent
color $ui-dark-text-color
.item-simple-title
color $ui-dark-text-color
color $ui-inactive-text-color
border-color $ui-dark-borderColor
.item-simple-title-icon

2
browser/components/SideNavFilter.js
View File

@@ -21,7 +21,7 @@ const SideNavFilter = ({
<button styleName={isHomeActive ? 'menu-button--active' : 'menu-button'}
onClick={handleAllNotesButtonClick}
>
<i className='fa fa-book fa-fw' />
<i className='fa fa-archive fa-fw' />
<span styleName='menu-button-label'>All Notes</span>
</button>
<button styleName={isStarredActive ? 'menu-button--active' : 'menu-button'}

23
browser/components/SideNavFilter.styl
View File

@@ -5,17 +5,18 @@
navButtonColor()
height 32px
padding 0 15px
font-size 14px
font-size 12px
width 100%
text-align left
overflow ellipsis
.menu-button--active
@extend .menu-button
color $ui-text-color
background-color $ui-button--active-backgroundColor
color $ui-button--active-color
&:hover
background-color $ui-button--active-backgroundColor
color $ui-text-color
.menu-button-label
margin-left 5px
@@ -48,11 +49,15 @@
body[data-theme="dark"]
.menu-button
navDarkButtonColor()
.menu-button--active
@extend .menu-button
background-color $ui-dark-button--active-backgroundColor
color $ui-dark-button--active-color
&:hover
&:active
background-color $ui-dark-button--active-backgroundColor
color $ui-dark-text-color
&:hover
background-color alpha($ui-dark-button--active-backgroundColor, 20%)
color $ui-dark-text-color
.menu-button--active
color $ui-dark-text-color
background-color $ui-dark-button--active-backgroundColor
&:active
background-color $ui-dark-button--active-backgroundColor
color $ui-dark-text-color

8
browser/components/SnippetTab.styl
View File

@@ -60,7 +60,7 @@ body[data-theme="dark"]
&:hover
background-color darken($ui-dark-button--hover-backgroundColor, 15%)
&:active
color white
color $ui-dark-text-color
background-color $ui-dark-button--active-backgroundColor
.root--active
@@ -73,7 +73,7 @@ body[data-theme="dark"]
&:hover
background-color darken($ui-dark-button--hover-backgroundColor, 15%)
&:active
color white
color $ui-dark-text-color
background-color $ui-dark-button--active-backgroundColor
.button
@@ -83,9 +83,9 @@ body[data-theme="dark"]
transition color background-color 0.15s
border-left 4px solid transparent
&:hover
color white
color $ui-dark-text-color
background-color $ui-dark-button--hover-backgroundColor
.input
background-color $ui-dark-button--hover-backgroundColor
color white
color $ui-dark-text-color

38
browser/components/StorageItem.styl
View File

@@ -13,30 +13,32 @@
text-align left
border none
overflow ellipsis
font-size 14px
font-size 12px
&:first-child
margin-top 0
&:hover
background-color $ui-button--hover-backgroundColor
color $ui-text-color
background-color alpha($ui-button--active-backgroundColor, 20%)
transition background-color 0.15s
&:active
color $ui-button--active-color
color $ui-text-color
background-color $ui-button--active-backgroundColor
.folderList-item--active
@extend .folderList-item
color $ui-button--active-color
color $ui-text-color
background-color $ui-button--active-backgroundColor
&:hover
color $ui-button--active-color
color $ui-text-color
background-color $ui-button--active-backgroundColor
.folderList-item-name
display block
flex 1
padding 0 30px
padding 0 15px
height 26px
line-height 26px
border-width 0 0 0 3px
border-width 0 0 0 1px
border-style solid
border-color transparent
overflow hidden
@@ -67,4 +69,24 @@
.folderList-item-name--folded
@extend .folderList-item-name
padding-left 14px
padding-left 12px
body[data-theme="dark"]
.folderList-item
&:hover
background-color alpha($ui-dark-button--active-backgroundColor, 20%)
color $ui-dark-text-color
&:active
color $ui-dark-text-color
background-color $ui-dark-button--active-backgroundColor
.folderList-item--active
@extend .folderList-item
color $ui-dark-text-color
background-color $ui-dark-button--active-backgroundColor
&:active
background-color $ui-dark-button--active-backgroundColor
&:hover
color $ui-dark-text-color
background-color $ui-dark-button--active-backgroundColor

2
browser/main/Detail/FolderSelect.styl
View File

@@ -26,7 +26,7 @@
overflow ellipsis
.idle-label-name
font-size 16px
font-size 14px
padding 2px
.idle-label-name-surfix

6
browser/main/Detail/SnippetNoteDetail.styl
View File

@@ -22,6 +22,7 @@
height 80px
.body .description textarea
outline none
display block
height 100%
width 100%
@@ -62,9 +63,6 @@
button
navButtonColor()
height 24px
border-width 0 1px 0 0
border-style solid
border-color $ui-borderColor
&:active .update-icon
color white
@@ -83,7 +81,7 @@ body[data-theme="dark"]
.body .description textarea
background-color $ui-dark-noteDetail-backgroundColor
color white
color $ui-dark-text-color
.tabList
background-color $ui-button--active-backgroundColor

6
browser/main/Detail/StarButton.styl
View File

@@ -3,6 +3,7 @@
top 0
padding 0
&:hover
background-color #DCDCDC
.icon
transform rotate(-72deg)
.tooltip
@@ -18,3 +19,8 @@
.icon
transition transform 0.15s
body[data-theme="dark"]
.root
&:hover
background-color #272B32

2
browser/main/Detail/TagSelect.js
View File

@@ -107,7 +107,7 @@ class TagSelect extends React.Component {
<span styleName='tag'
key={tag}
>
<span styleName='tag-label'>{tag}</span>
<span styleName='tag-label'>#{tag}</span>
<button styleName='tag-removeButton'
onClick={(e) => this.handleTagRemoveButtonClick(tag)(e)}
>

10
browser/main/Detail/TagSelect.styl
View File

@@ -16,7 +16,7 @@
padding-left 10px
vertical-align middle
height 20px
background-color $ui-tag-backgroundColor
background-color alpha($ui-tag-backgroundColor, 10%)
border-radius 20px
overflow hidden
clearfix()
@@ -39,9 +39,9 @@
padding-right 4px
.tag-label
font-size 12px
font-weight bold
color: #FFFFFF
font-size 11px
font-weight 600
color: alpha($ui-text-color, 80%)
float left
height 20px
line-height 20px
@@ -83,7 +83,7 @@ body[data-theme="dark"]
color $ui-dark-button-color
.tag
background-color $ui-dark-tag-backgroundColor
background-color alpha($ui-dark-tag-backgroundColor, 60%)
.tag-removeButton
border-color $ui-button--focus-borderColor

18
browser/main/NoteList/NoteList.styl
View File

@@ -26,6 +26,8 @@ $control-height = 30px
padding 0
border none
background-color transparent
outline none
cursor pointer
font-size 10px
.control-button
@@ -33,18 +35,18 @@ $control-height = 30px
padding 0
background-color transparent
border none
color $ui-inactive-text-color
color alpha($ui-inactive-text-color, 60%)
transition 0.15s
&:active, &:active:hover
color $ui-active-color
color $ui-inactive-text-color
&:hover
color $ui-text-color
color $ui-inactive-text-color
.control-button--active
@extend .control-button
color $ui-active-color
color $ui-inactive-text-color
&:hover
color $ui-active-color
color $ui-inactive-text-color
.list
absolute left right bottom
@@ -67,4 +69,8 @@ body[data-theme="dark"]
color $ui-dark-inactive-text-color
&:hover
color $ui-dark-text-color
.control-button--active
color $ui-dark-text-color
&:active
color $ui-dark-text-color

15
browser/main/SideNav/SideNav.styl
View File

@@ -12,9 +12,14 @@
navButtonColor()
height $topBar-height
padding 0 15px
font-size 14px
font-size 12px
width 100%
text-align left
&:hover
color $ui-text-color
&:active, &:active:hover
color $ui-text-color
background-color alpha($ui-button--active-backgroundColor, 20%)
.top-menu-label
margin-left 5px
@@ -110,10 +115,10 @@ body[data-theme="dark"]
.top-menu
navDarkButtonColor()
&:active
background-color alpha($ui-dark-button--active-backgroundColor, 20%)
&:hover
background-color alpha($ui-dark-button--active-backgroundColor, 20%)
.storageList-empty
color $ui-dark-inactive-text-color
.navToggle
navDarkButtonColor()

91
browser/main/SideNav/StorageItem.styl
View File

@@ -8,43 +8,37 @@
width 100%
margin-bottom 5px
transition 0.15s
&:hover
background-color $ui-button--hover-backgroundColor
&:active
.header-toggleButton
.header-addFolderButton
color white
&:active
color $ui-active-color
.header--active
@extend .header
.header-info
color $ui-button--active-color
background-color $ui-button--active-backgroundColor
background-color $ui-button--active-backgroundColor
transition color background-color 0.15s
.header--active
.header-toggleButton
color $ui-text-color
.header--active
.header-info
color $ui-text-color
.header--active
.header-addFolderButton
color white
&:active
&:hover
&:hover:active
color white
color $ui-text-color
.header-toggleButton
navButtonColor()
position absolute
left 0
width 25px
height 26px
padding 0
border none
color $ui-inactive-text-color
background-color transparent
&:hover
background-color transparent
color $ui-text-color
&:active
color $ui-active-color
.header-info
navButtonColor()
display block
width 100%
height 30px
@@ -52,33 +46,26 @@
padding-right 10px
line-height 26px
cursor pointer
font-size 14px
font-size 13px
border none
overflow ellipsis
text-align left
background-color transparent
color $ui-inactive-text-color
&:active
color $ui-button--active-color
background-color $ui-button--active-backgroundColor
.header-info-path
font-size 10px
margin 0 5px
.header-addFolderButton
navButtonColor()
position absolute
right 0
width 25px
height 26px
padding 0
border none
color $ui-inactive-text-color
background-color transparent
&:hover
background-color transparent
color $ui-text-color
&:active
color $ui-active-color
.root--folded
@extend .root
@@ -108,16 +95,38 @@
margin 0 5px
body[data-theme="dark"]
.header-toggleButton
.header-addFolderButton
color $ui-dark-inactive-text-color
&:hover
color $ui-dark-text-color
&:active
color $ui-dark-active-color
.header--active
background-color $ui-dark-button--active-backgroundColor
transition color background-color 0.15s
.header--active
.header-toggleButton
.header-addFolderButton
color white
color $ui-dark-text-color
.header--active
.header-info
color $ui-dark-text-color
background-color $ui-dark-button--active-backgroundColor
&:active
color white
color $ui-dark-text-color
background-color $ui-dark-button--active-backgroundColor
.header--active
.header-addFolderButton
color $ui-dark-text-color
.header-toggleButton
&:hover
color $ui-dark-text-color
.header-info
&:hover
color $ui-dark-text-color
background-color alpha($ui-dark-button--active-backgroundColor, 20%)
&:active, &:active:hover
color $ui-dark-text-color
background-color $ui-dark-button--active-backgroundColor
.header-addFolderButton
&:hover
color $ui-dark-text-color

4
browser/main/StatusBar/StatusBar.styl
View File

@@ -4,7 +4,6 @@
absolute bottom left right
height $statusBar-height
background-color $ui-noteDetail-backgroundColor
border-top $ui-border
display flex
box-shadow $note-detail-box-shadow
@@ -24,9 +23,6 @@
.zoom
navButtonColor()
height 24px
border-width 0 1px
border-style solid
border-color $ui-borderColor
.update
navButtonColor()

11
browser/main/TopBar/TopBar.styl
View File

@@ -44,12 +44,13 @@ $control-height = 34px
.control-search-optionList
position fixed
z-index 200
width 275px
height 175px
width 500px
height 250px
overflow-y auto
background-color $modal-background
border-radius 2px
box-shadow 2px 2px 10px gray
border-none
box-shadow 0 0 1px rgba(76,86,103,.25), 0 2px 18px rgba(31,37,50,.32)
.control-search-optionList-item
height 50px
@@ -59,10 +60,10 @@ $control-height = 34px
cursor pointer
overflow ellipsis
&:hover
background-color alpha($ui-active-color, 10%)
background-color alpha(#D4D4D4, 30%)
.control-search-optionList-item-folder
border-left 4px solid transparent
border-left 2px solid transparent
padding 2px 5px
color $ui-text-color
overflow ellipsis

4
browser/main/global.styl
View File

@@ -1,6 +1,6 @@
global-reset()
DEFAULT_FONTS = 'Lato', helvetica, arial, sans-serif
DEFAULT_FONTS = 'OpenSans', helvetica, arial, sans-serif
html, body
width 100%
@@ -11,7 +11,7 @@ body
font-family DEFAULT_FONTS
color textColor
font-size fontSize
font-weight 400
font-weight 200
button, input, select, textarea
font-family DEFAULT_FONTS

4
browser/main/modals/CreateFolderModal.js
View File

@@ -78,7 +78,7 @@ class CreateFolderModal extends React.Component {
<div styleName='title'>Create new folder</div>
</div>
<button styleName='close' onClick={(e) => this.handleCloseButtonClick(e)}>
<div styleName='close-mark'>X</div>
<div styleName='close-mark'>×</div>
<div styleName='close-text'>esc</div>
</button>
@@ -95,7 +95,7 @@ class CreateFolderModal extends React.Component {
<button styleName='control-confirmButton'
onClick={(e) => this.handleConfirmButtonClick(e)}
>
Create Folder
Create
</button>
</div>
</div>

34
browser/main/modals/CreateFolderModal.styl
View File

@@ -1,15 +1,15 @@
.root
modal()
width 700px
height 200px
width 500px
height 270px
overflow hidden
position relative
padding 0 40px
.header
height 50px
height 70px
margin-bottom 10px
margin-top 10px
margin-top 20px
font-size 18px
line-height 50px
background-color $ui-backgroundColor
@@ -19,34 +19,34 @@
font-size 15px
.close
height 50px
height 70px
position absolute
background-color transparent
color $ui-inactive-text-color
border none
top 7px
right 10px
right 30px
text-align center
width top-bar--height
height top-bar--height
.control-folder-label
text-align left
font-size 14px
font-size 12px
color $ui-text-color
.control-folder-input
display block
height 30px
width 620px
width 420px
padding 0 5px
margin 10px auto 15px
border 1px solid #C9C9C9 // TODO: use variable.
border-radius 5px
border-radius 2px
background-color transparent
outline none
vertical-align middle
font-size 18px
font-size 14px
&:disabled
background-color $ui-input--disabled-backgroundColor
&:focus, &:active
@@ -54,20 +54,21 @@
.control-confirmButton
display block
float right
height 30px
width 620px
width 100px
border none
border-radius 5px
border-radius 2px
padding 0 25px
margin 20px auto
font-size 14px
font-size 12px
colorPrimaryButton()
body[data-theme="dark"]
.root
modalDark()
width 700px
height 200px
width 500px
height 270px
overflow hidden
position relative
padding 0 40px
@@ -91,3 +92,6 @@ body[data-theme="dark"]
.description
color $ui-inactive-text-color
.control-confirmButton
colorDarkPrimaryButton()

2
browser/main/modals/NewNoteModal.js
View File

@@ -103,7 +103,7 @@ class NewNoteModal extends React.Component {
<div styleName='title'>Make a Note</div>
</div>
<button styleName='closeButton' onClick={(e) => this.handleCloseButtonClick(e)}>
<div styleName='close-mark'>X</div>
<div styleName='close-mark'>×</div>
<div styleName='close-text'>esc</div>
</button>

2
browser/main/modals/NewNoteModal.styl
View File

@@ -73,7 +73,7 @@ body[data-theme="dark"]
color $ui-dark-text-color
background-color transparent
&:focus
colorPrimaryButton()
colorDarkPrimaryButton()
.description
color $ui-inactive-text-color

18
browser/main/modals/PreferencesModal/ConfigTab.styl
View File

@@ -32,14 +32,20 @@
.group-section-control
flex 1
.group-section-control select
outline none
border 1px solid $ui-borderColor
background-color transparent
.group-section-control-input
height 30px
vertical-align middle
width 400px
font-size $tab--button-font-size
border solid 1px $border-color
border-radius $tab--input-border-radius
border-radius 2px
padding 0 5px
outline none
&:disabled
background-color $ui-input--disabled-backgroundColor
@@ -64,7 +70,7 @@
.group-control-leftButton
colorDefaultButton()
border none
border-radius 5px
border-radius 2px
font-size $tab--button-font-size
height $tab--button-height
padding 0 15px
@@ -74,17 +80,17 @@
float right
colorPrimaryButton()
border none
border-radius $tab--button-border-radius
border-radius 2px
font-size $tab--button-font-size
height $tab--button-height
padding 0 15px
height 35px
width 100px
margin-right 10px
.group-hint
border $ui-border
padding 10px 15px
margin 15px 0
border-radius 5px
border-radius 2px
background-color $ui-backgroundColor
color $ui-inactive-text-color
ul

39
browser/main/modals/PreferencesModal/InfoTab.js
View File

@@ -30,28 +30,37 @@ class InfoTab extends React.Component {
<div styleName='icon-right'>
<div styleName='appId'>Boostnote {appVersion}</div>
<div styleName='description'>
A simple markdown/snippet note app for developer.
An open source note-taking app made for programmers just like you.
</div>
</div>
</div>
<div styleName='clear' />
<div styleName='madeBy'>Made by&nbsp;
<a href='http://maisin.co/'
onClick={(e) => this.handleLinkClick(e)}
>MAISIN&CO.</a></div>
<div styleName='copyright'>Copyright 2017 MAISIN&CO. All rights reserved.</div>
</div>
<ul styleName='list'>
<li>
The codes of this app is published under GPLv3 license.
</li>
<li>
Any kinds of feedback, creating a new issue or a pull request, would be welcomed.
</li>
<li>
Issue Tracker : <a href='https://github.com/BoostIO/Boostnote/issues'
<a href='https://boostnote.io'
onClick={(e) => this.handleLinkClick(e)}
>https://github.com/BoostIO/Boostnote/issues</a>
>Website</a>
</li>
<li>
<a href='https://boostnote.paintory.com/'
onClick={(e) => this.handleLinkClick(e)}
>Boostnote Shop</a>: Products are shipped to all over the world 🌏
</li>
<li>
<a href='https://www.patreon.com/boostnote'
onClick={(e) => this.handleLinkClick(e)}
>Donation via Patreon</a>: Thank you for your support 🎉
</li>
<li>
<a href='https://github.com/BoostIO/Boostnote/issues'
onClick={(e) => this.handleLinkClick(e)}
>GitHub Issue</a>: Let us hear your feedback 🙌
</li>
<li styleName='cc'>
Copyright (C) 2017 Maisin&Co.
</li>
<li styleName='cc'>
License: GPL v3
</li>
</ul>
</div>

28
browser/main/modals/PreferencesModal/InfoTab.styl
View File

@@ -4,11 +4,9 @@
padding 15px
white-space pre
line-height 1.4
color $ui-text-color
color alpha($ui-text-color, 90%)
width 100%
.clear
clear both
font-size 14px
.top
text-align left
@@ -34,26 +32,16 @@
.description
font-size 14px
.madeBy
font-size 14px
$ui-inactive-text-color
.copyright
font-size 14px
$ui-inactive-text-color
.list
list-style square
padding-left 2em
li
white-space normal
padding-bottom 10px
a
color #4E8EC6
text-decoration none
body[data-theme="dark"]
.root
color $tab--dark-text-color
.madeBy
color $ui-dark-inactive-text-color
.copyright
color $ui-dark-inactive-text-color
color alpha($tab--dark-text-color, 80%)

21
browser/main/modals/PreferencesModal/PreferencesModal.styl
View File

@@ -45,22 +45,20 @@ top-bar--height = 50px
text-align left
width 100px
margin 4px 0
padding 7px 0
padding-left 7px
padding 5px 0
padding-left 10px
border none
border-radius 3px
border-radius 2px
background-color transparent
color $ui-text-color
font-size 14px
&:hover
color $ui-active-color
.nav-button--active
@extend .nav-button
color white
background-color $ui-active-color
color $ui-text-color
background-color $ui-button--active-backgroundColor
&:hover
color white
color $ui-text-color
.nav-button-icon
display block
@@ -91,3 +89,10 @@ body[data-theme="dark"]
color $tab--dark-text-color
&:hover
color $ui-dark-text-color
.nav-button--active
@extend .nav-button
color white
background-color $dark-primary-button-background--active
&:hover
color white

5
browser/main/modals/PreferencesModal/StorageItem.styl
View File

@@ -35,7 +35,7 @@
border $ui-border
border-radius 2px
padding 0 5px
outline none
.header-control
float right
@@ -71,7 +71,7 @@
background-color darken(white, 3%)
.folderList-item-left
height 30px
border-left solid 4px transparent
border-left solid 1px transparent
padding 0 10px
line-height 30px
float left
@@ -105,6 +105,7 @@
border $ui-border
border-radius 2px
padding 0 5px
outline none
.folderList-item-right
float right

5
browser/main/modals/PreferencesModal/StoragesTab.styl
View File

@@ -28,12 +28,15 @@
.list-control
height 30px
.list-control-addStorageButton
position absolute
top 7px
right 20px
height $tab--button-height
padding 0 15px
border $ui-border
colorDefaultButton()
font-size $tab--button-font-size
border-radius $tab--button-border-radius
border-radius 2px
.addStorage
margin-bottom 15px

2
browser/main/modals/PreferencesModal/UiTab.js
View File

@@ -253,7 +253,7 @@ class UiTab extends React.Component {
<button styleName='group-control-rightButton'
onClick={(e) => this.handleSaveUIClick(e)}
>
Save UI Config
Save
</button>
</div>
</div>

2
browser/main/modals/PreferencesModal/index.js
View File

@@ -118,7 +118,7 @@ class Preferences extends React.Component {
<p>Your menu for Boostnote</p>
</div>
<button styleName='top-bar-close' onClick={(e) => this.handleEscButtonClick(e)}>
<div styleName='top-bar-close-mark'>X</div>
<div styleName='top-bar-close-mark'>×</div>
<div styleName='top-bar-close-text'>esc</div>
</button>
<div styleName='nav'>

7
browser/main/modals/RenameFolderModal.styl
View File

@@ -6,7 +6,7 @@
.header
height 50px
font-size 18px
font-size 16px
line-height 50px
padding 0 15px
background-color $ui-backgroundColor
@@ -40,7 +40,7 @@
background-color transparent
outline none
vertical-align middle
font-size 18px
font-size 14px
text-align center
&:disabled
background-color $ui-input--disabled-backgroundColor
@@ -76,3 +76,6 @@ body[data-theme="dark"]
.control-input
border-color $ui-dark-borderColor
color $ui-dark-text-color
.control-confirmButton
colorDarkPrimaryButton()

54
browser/styles/index.styl
View File

@@ -11,7 +11,7 @@ $sideNav--folded-width = 44px
$topBar-height = 60px
// UI default
$ui-text-color = #515151
$ui-text-color = #333333
$ui-inactive-text-color = #939395
$ui-borderColor = #D1D1D1
$ui-backgroundColor = #FFFFFF
@@ -23,9 +23,9 @@ $ui-tag-backgroundColor = rgba(0, 0, 0, 0.3)
// UI Button
$ui-button-color = #939395
$ui-button--hover-backgroundColor = rgba(126, 127, 129, 0.08)
$ui-button--hover-backgroundColor = #D9D9D9
$ui-button--active-color = white
$ui-button--active-backgroundColor = #6AA5E9
$ui-button--active-backgroundColor = #D9D9D9
$ui-button--focus-borderColor = lighten(#369DCD, 25%)
// UI Tooltip
@@ -67,29 +67,43 @@ $active-border = solid 1px $active-border-color
// Default button
$default-button-background = white
$default-button-background--hover = #e6e6e6
$default-button-background--active = #d4d4d4
$default-button-background--active = #D9D9D9
colorDefaultButton()
background-color $default-button-background
&:hover
background-color $default-button-background--hover
background-color transparent
&:active
&:active:hover
background-color $default-button-background--active
// Primary button(Brand color)
$primary-button-background = $brand-color
$primary-button-background = alpha($brand-color, 60%)
$primary-button-background--hover = darken($brand-color, 5%)
$primary-button-background--active = darken($brand-color, 10%)
colorPrimaryButton()
color white
background-color $primary-button-background
color $ui-text-color
background-color $default-button-background--hover
&:hover
background-color $primary-button-background--hover
background-color $default-button-background--active
&:active
&:active:hover
background-color $primary-button-background--active
background-color $default-button-background--active
// Dark Primary button(Brand color)
$dark-primary-button-background = alpha(#3A404C, 80%)
$dark-primary-button-background--hover = #3A404C
$dark-primary-button-background--active = #3A404C
colorDarkPrimaryButton()
color white
background-color $dark-primary-button-background
&:hover
background-color $dark-primary-button-background--hover
&:active
&:active:hover
background-color $dark-primary-button-background--active
// Danger button(Brand color)
$danger-button-background = #c9302c
@@ -115,11 +129,13 @@ navButtonColor()
background-color transparent
transition color background-color 0.15s
&:hover
background-color $ui-button--hover-backgroundColor
background-color alpha($ui-button--active-backgroundColor, 20%)
transition color background-color 0.15s
color $ui-text-color
&:active, &:active:hover
background-color $ui-button--active-backgroundColor
color $ui-button--active-color
color $ui-text-color
transition color background-color 0.15s
/**
* # Modal Stuff
* These will be moved lib/modal
@@ -137,7 +153,7 @@ modal()
background-color $modal-background
overflow hidden
border-radius $modal-border-radius
box-shadow 2px 2px 10px gray
box-shadow 0 0 1px rgba(76,86,103,.15), 0 2px 18px rgba(31,37,50,.22)
topBarButtonLight()
width 34px
@@ -158,15 +174,16 @@ topBarButtonLight()
opacity 1
// Dark theme
$ui-dark-active-color = #3A404C
$ui-dark-borderColor = lighten(#21252B, 20%)
$ui-dark-backgroundColor = #1D1D1D
$ui-dark-noteList-backgroundColor = #181818
$ui-dark-noteDetail-backgroundColor = #0D0D0D
$ui-dark-tag-backgroundColor = rgba(255, 255, 255, 0.3)
$ui-dark-tag-backgroundColor = #3A404C
$dark-background-color = lighten($ui-dark-backgroundColor, 10%)
$ui-dark-text-color = #DDDDDD
$ui-dark-button--active-color = white
$ui-dark-button--active-backgroundColor = #6AA5E9
$ui-dark-button--active-backgroundColor = #3A404C
$ui-dark-button--hover-backgroundColor = lighten($ui-dark-backgroundColor, 10%)
$ui-dark-button--focus-borderColor = lighten(#369DCD, 25%)
$ui-dark-topbar-button-color = #939395
@@ -202,12 +219,11 @@ navDarkButtonColor()
background-color transparent
transition color background-color 0.15s
&:hover
color white
color $ui-dark-text-color
background-color $ui-dark-button--hover-backgroundColor
&:active
&:active:hover
background-color $ui-dark-button--active-backgroundColor
color $ui-dark-button--active-color
color $ui-dark-text-color
topBarButtonDark()
border-color $ui-dark-borderColor