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

Merge pull request #1161 from ytk141/update-note-design

Browse Source 
Update note design
This commit is contained in:
Kazz Yokomizo
2017-11-24 12:17:32 +09:00
committed by GitHub
parent 3a836aaf34 529f271e07
commit 804991b300
19 changed files with 129 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
browser/components/MarkdownPreview.js
View File

@@ -33,6 +33,15 @@ function buildStyle (fontFamily, fontSize, codeBlockFontFamily, lineNumber) {
font-weight: normal;
text-rendering: optimizeLegibility;
}
@font-face {
font-family: 'Lato';
src: url('${appPath}/resources/fonts/Lato-Black.woff2') format('woff2'), /* Modern Browsers */
url('${appPath}/resources/fonts/Lato-Black.woff') format('woff'), /* Modern Browsers */
url('${appPath}/resources/fonts/Lato-Black.ttf') format('truetype');
font-style: normal;
font-weight: 700;
text-rendering: optimizeLegibility;
}
${markdownStyle}
body {
font-family: '${fontFamily.join("','")}';
@@ -83,6 +92,7 @@ h2 {
body p {
white-space: normal;
color: rgba(0,0,0,.84);
}
`
}

8
browser/components/NoteItem.styl
View File

@@ -75,7 +75,8 @@ $control-height = 30px
color $ui-inactive-text-color
.item-title
font-size 14px
font-size 15px
font-weight 700
position relative
top -12px
left 20px
@@ -91,7 +92,7 @@ $control-height = 30px
.item-bottom
position relative
bottom 0px
margin-top 2px
margin-top 10px
font-size 12px
line-height 20px
overflow ellipsis
@@ -108,10 +109,9 @@ $control-height = 30px
font-size 11px
margin-right 8px
padding 0
height 20px
box-sizing border-box
border-radius 2px
padding 1px 2px
padding 4px
vertical-align middle
background-color white
color $ui-inactive-text-color

11
browser/components/TodoListPercentage.styl
View File

@@ -1,24 +1,25 @@
.percentageBar
position absolute
top 40px
top 50px
right 0px
left 0px
background-color #DADFE1
width 100%
height: 15px
height: 17px
font-size: 12px
z-index 100
border-radius 2px
.progressBar
background-color: #6C7A89
height 15px
background-color: #1EC38B
height 17px
border-radius 2px
transition 0.3s
transition 0.4s cubic-bezier(0.4, 0.4, 0, 1)
.percentageText
color #f4f4f4
padding: 2px 43%
font-weight 600
body[data-theme="dark"]
.percentageBar

2
browser/components/markdown.styl
View File

@@ -118,7 +118,7 @@ hr
h1, h2, h3, h4, h5, h6
font-weight bold
h1
font-size 2.25em
font-size 2.55em
padding-bottom 0.3em
line-height 1.2em
border-bottom solid 1px borderColor

8
browser/main/Detail/Detail.styl
View File

@@ -1,5 +1,8 @@
.root
absolute top bottom right
display flex
align-items center
justify-content center
.empty
height 320px
@@ -8,8 +11,9 @@
.empty-message
width 100%
font-size 42px
line-height 72px
font-size 36px
font-weight 600
line-height 56px
text-align center
color $ui-inactive-text-color

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

@@ -3,7 +3,9 @@
*/
// Margin on the left side and the right side for NoteDetail component.
$note-detail-left-margin = 50px
$note-detail-right-margin = 70px
$note-detail-left-margin = 100px
$note-detail-right-margin = 120px
$snippet-note-detail-left-margin = 60px
$snippet-note-detail-right-margin = 80px
$note-detail-box-shadow = 2px 0 15px -8px #b1b1b1 inset

9
browser/main/Detail/FolderSelect.js
View File

@@ -259,12 +259,11 @@ class FolderSelect extends React.Component {
{optionList}
</div>
</div>
: <div styleName='idle'>
: <div styleName='idle' style={{color: currentOption.folder.color}}>
<div styleName='idle-label'>
<span styleName='idle-label-name'
style={{color: currentOption.folder.color}}
>
{currentOption.folder.name} /
<i className='fa fa-folder'></i>
<span styleName='idle-label-name'>
{currentOption.folder.name}
</span>
</div>
</div>

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

@@ -1,21 +1,22 @@
.root
position relative
border solid 1px transparent
line-height 26px
vertical-align middle
border-radius 2px
transition 0.15s
user-select none
margin-right 10px
&:hover
background-color $ui-button--hover-backgroundColor
.root--search, .root--focus
@extend .root
background-color $ui-noteDetail-backgroundColor = #F4F4F4
background-color $ui-noteDetail-backgroundColor = #fff
border-color $ui-input--focus-borderColor
width 100px
width 154px
height 30px
&:hover
border-color $ui-input--focus-borderColor
border-color $ui-input--focus-borderColor = #fff
.idle
position relative
@@ -24,13 +25,16 @@
.idle-label
right 20px
overflow ellipsis
display flex
align-items center
.idle-label-name
font-size 14px
padding 2px
font-size 13px
font-weight 600
margin-left 4px
.idle-label-name-surfix
font-size 10px
font-size 15px
color $ui-inactive-text-color
margin-left 5px
.idle-caret
@@ -38,40 +42,42 @@
height 34px
width 20px
line-height 34px
.search
absolute top left right bottom
line-height 34px
.search-input
vertical-align middle
position relative
top -2px
top 0
font-size 14px
outline none
border none
height 20px
line-height 20px
width 100%
background-color transparent
padding 0 10px
.search-optionList
position fixed
position absolute
top 30px
max-height 450px
min-width 150px
overflow auto
z-index 200
border $ui-border
background-color white
border-radius 2px
padding 10px 6px
.search-optionList-item
width 140px
height 34px
width 250px
display flex
align-items center
box-sizing border-box
padding 0 5px
padding 0
margin-bottom 10px
overflow ellipsis
cursor pointer
&:hover
background-color $ui-button--hover-backgroundColor
background-color $ui-button--hover-backgroundColor
.search-optionList-item--active
@extend .search-optionList-item
@@ -81,13 +87,17 @@
background-color $ui-button--active-backgroundColor
color $ui-button--active-color
.search-optionList-item-name
border-left solid 2px transparent
padding 2px 5px
border-left solid 3px transparent
padding 6px
.search-optionList-item-name-surfix
font-size 10px
color $ui-inactive-text-color
margin-left 5px
body[data-theme="dark"]
.root
color $ui-dark-text-color

7
browser/main/Detail/MarkdownNoteDetail.styl
View File

@@ -6,6 +6,7 @@
border-left 1px solid alpha(#DEDEDE, 60%)
background-color $ui-noteDetail-backgroundColor
box-shadow none
padding 20px 40px
.lock-button
padding-bottom 3px
@@ -25,10 +26,12 @@
.body
absolute left right
left $note-detail-left-margin
right $note-detail-right-margin
left 0
right 0
top $info-height + $info-margin-under-border
bottom $statusBar-height
max-width 600px
margin 0 auto
.body-noteEditor
absolute top bottom left right

35
browser/main/Detail/NoteDetailInfo.styl
View File

@@ -1,35 +1,30 @@
@import('DetailVars')
$info-height = 40px
$info-margin-under-border = 15px
$info-height = 50px
$info-margin-under-border = 30px
.info
absolute top left right
left $note-detail-left-margin
right $note-detail-right-margin
left 0
right 0
height $info-height
border-bottom $ui-border
border-bottom 1px solid #eee
background-color $ui-noteDetail-backgroundColor
.info-left
float left
padding 0 7px
width 100%
display flex
align-items center
.info-left
padding 0 10px
width 100%
display flex
align-items center
.info-left-top
display inline-block
height $info-height
line-height $info-height
.info-left-top-folderSelect
padding 0 3px
height 40px
line-height 40px
display flex
align-items center
justify-content center
border-radius 3px
.info-left-button
width 34px
@@ -51,11 +46,11 @@ $info-margin-under-border = 15px
.info-right
position absolute
right -20px
top 10px
background $ui-noteDetail-backgroundColor
right 40px
top 60px
bottom 1px
padding-left 30px
z-index 101
.undo-button
width 34px

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

@@ -9,8 +9,8 @@
.body
absolute left right
left $note-detail-left-margin
right $note-detail-right-margin
left $snippet-note-detail-left-margin
right $snippet-note-detail-right-margin
top $info-height + $info-margin-under-border
bottom $statusBar-height
background-color $ui-noteDetail-backgroundColor
@@ -55,7 +55,7 @@
.override
absolute bottom left
bottom 2px
bottom 5px
height 18px
left 60px
z-index 101

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

@@ -113,7 +113,7 @@ class TagSelect extends React.Component {
<button styleName='tag-removeButton'
onClick={(e) => this.handleTagRemoveButtonClick(tag)(e)}
>
<i className='fa fa-times fa-fw tag-removeButton-icon' />
<img className='tag-removeButton-icon' src='../resources/icon/icon-x.svg' width='8px'/>
</button>
</span>
)

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

@@ -1,8 +1,7 @@
.root
display inline-block
display flex
align-items center
user-select none
line-height 50px
height 50px
vertical-align middle
width 100%
overflow-x scroll
@@ -12,49 +11,42 @@
display none
.tag
display inline-block
display flex
align-items center
margin 0px 2px
background-color alpha($ui-tag-backgroundColor, 10%)
border-radius 3px
overflow hidden
padding 2px 4px
background-color alpha($ui-tag-backgroundColor, 3%)
border-radius 4px
position relative
clearfix()
.tag-removeButton
float right
height 20px
width 18px
margin 0
padding 0
border-style solid
border-width 0
border-radius 20px
line-height 18px
background-color transparent
color $ui-button-color
position absolute
right 6px
.tag-removeButton-icon
width 5px
padding-right 4px
.tag-label
font-size 11px
font-weight 600
color: alpha($ui-text-color, 80%)
float left
height 20px
line-height 20px
padding 0 6px
font-size 13px
color: $ui-text-color
padding 4px 16px 4px 8px
.newTag
display inline-block
margin 2px 0 15px 2px
vertical-align middle
height 18px
box-sizing border-box
border none
background-color transparent
outline none
padding 0 4px
font-size 13px
body[data-theme="dark"]
.tag

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

@@ -1,11 +1,12 @@
@import('../Detail/DetailVars')
.root
absolute bottom left right
position absolute
bottom 10px
right 10px
z-index 100
background-color $ui-noteDetail-backgroundColor
display flex
height 20px
.blank
flex 1
@@ -22,8 +23,10 @@
.zoom
navButtonColor()
height 18px
color rgba(0,0,0,.54)
height 20px
display flex
padding 0
align-items center
&:hover
color $ui-active-color

4
browser/styles/index.styl
View File

@@ -16,7 +16,7 @@ $ui-inactive-text-color = #939395
$ui-borderColor = #D1D1D1
$ui-backgroundColor = #FFFFFF
$ui-noteList-backgroundColor = #FBFBFB
$ui-noteDetail-backgroundColor = #F8F8F8
$ui-noteDetail-backgroundColor = #FFFFFF
$ui-border = solid 1px $ui-borderColor
$ui-active-color = #6AA5E9
$ui-tag-backgroundColor = rgba(0, 0, 0, 0.3)
@@ -215,7 +215,7 @@ navWhiteButtonColor()
// UI Button
$ui-button-color = #939395
$ui-button--hover-backgroundColor = #D9D9D9
$ui-button--hover-backgroundColor = #F6F6F6
$ui-button--active-color = white
$ui-button--active-backgroundColor = #D9D9D9
$ui-button--focus-borderColor = lighten(#369DCD, 25%)

BIN
resources/fonts/Lato-Black.ttf Normal file
View File

Binary file not shown.

BIN
resources/fonts/Lato-Black.woff Normal file
View File

Binary file not shown.

BIN
resources/fonts/Lato-Black.woff2 Normal file
View File

Binary file not shown.

17
resources/icon/icon-x.svg Normal file
View File

@@ -0,0 +1,17 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
<title>x</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g id="Feather" transform="translate(-1910.000000, -644.000000)" stroke="#666666" stroke-width="2">
<g id="Group" transform="translate(175.000000, 332.000000)">
<g id="x" transform="translate(1736.000000, 313.000000)">
<path d="M12,0 L0,12" id="Shape"></path>
<path d="M0,0 L12,12" id="Shape"></path>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 917 B