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

Update note design

browser/components/MarkdownPreview.js

@@ -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);
 }
 `
 }

browser/components/NoteItem.styl

@@ -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

browser/components/TodoListPercentage.styl

@@ -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
+  background-color: #1EC38B
-  height 15px
+  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

browser/components/markdown.styl

@@ -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

browser/main/Detail/Detail.styl

@@ -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
+  font-size 36px
-  line-height 72px
+  font-weight 600
+  line-height 56px
   text-align center
   color $ui-inactive-text-color
 

browser/main/Detail/DetailVars.styl

@@ -3,7 +3,9 @@
  */
 
 // Margin on the left side and the right side for NoteDetail component.
-$note-detail-left-margin = 50px
+$note-detail-left-margin = 100px
-$note-detail-right-margin = 70px
+$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

browser/main/Detail/FolderSelect.js

@@ -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'
+              <i className='fa fa-folder'></i>
-                style={{color: currentOption.folder.color}}
+              <span styleName='idle-label-name'>
-              >
+                {currentOption.folder.name} 
-                {currentOption.folder.name} /
               </span>
             </div>
           </div>

browser/main/Detail/FolderSelect.styl

@@ -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
+  font-size 13px
-  padding 2px
+  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
@@ -39,35 +43,37 @@
   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
+  width 100%
-  line-height 20px
   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
@@ -81,13 +87,17 @@
     background-color $ui-button--active-backgroundColor
     color $ui-button--active-color
 .search-optionList-item-name
-  border-left solid 2px transparent
+  border-left solid 3px transparent
-  padding 2px 5px
+  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

browser/main/Detail/MarkdownNoteDetail.styl

@@ -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
+  left 0
-  right $note-detail-right-margin
+  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
 

browser/main/Detail/NoteDetailInfo.styl

@@ -1,35 +1,30 @@
 @import('DetailVars')
 
-$info-height = 40px
+$info-height = 50px
-$info-margin-under-border = 15px
+$info-margin-under-border = 30px
 
 .info
   absolute top left right
-  left $note-detail-left-margin
+  left 0
-  right $note-detail-right-margin
+  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
+  right 40px
-  top 10px
+  top 60px
-  background $ui-noteDetail-backgroundColor
   bottom 1px
   padding-left 30px
+  z-index 101
 
 .undo-button
   width 34px

browser/main/Detail/SnippetNoteDetail.styl

@@ -9,8 +9,8 @@
 
 .body
   absolute left right
-  left $note-detail-left-margin
+  left $snippet-note-detail-left-margin
-  right $note-detail-right-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

browser/main/Detail/TagSelect.js

@@ -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>
         )

browser/main/Detail/TagSelect.styl

@@ -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%)
+  padding 2px 4px
-  border-radius 3px
+  background-color alpha($ui-tag-backgroundColor, 3%)
-  overflow hidden
+  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-size 13px
-  font-weight 600
+  color: $ui-text-color
-  color: alpha($ui-text-color, 80%)
+  padding 4px 16px 4px 8px
-  float left
-  height 20px
-  line-height 20px
-  padding 0 6px
 
 .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

browser/main/StatusBar/StatusBar.styl

@@ -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

browser/styles/index.styl

@@ -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%)

resources/icon/icon-x.svg

@@ -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>