From 9cb086cbd9a6088beabf348e3f0b89bb7f9319b8 Mon Sep 17 00:00:00 2001 From: Yutaka Ishii Date: Thu, 23 Nov 2017 19:25:29 +0900 Subject: [PATCH] update tag and folder --- browser/main/Detail/Detail.styl | 8 +++-- browser/main/Detail/DetailVars.styl | 4 +-- browser/main/Detail/FolderSelect.js | 9 +++--- browser/main/Detail/FolderSelect.styl | 9 ++++-- browser/main/Detail/MarkdownNoteDetail.styl | 7 ++-- browser/main/Detail/NoteDetailInfo.styl | 34 ++++++++----------- browser/main/Detail/TagSelect.js | 2 +- browser/main/Detail/TagSelect.styl | 36 ++++++++------------- browser/styles/index.styl | 2 +- resources/icon/icon-x.svg | 17 ++++++++++ 10 files changed, 70 insertions(+), 58 deletions(-) create mode 100644 resources/icon/icon-x.svg diff --git a/browser/main/Detail/Detail.styl b/browser/main/Detail/Detail.styl index 81b3e08c..4d0e3fe8 100644 --- a/browser/main/Detail/Detail.styl +++ b/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 - line-height 72px + font-size 36px + font-weight 600 + line-height 56px text-align center color $ui-inactive-text-color diff --git a/browser/main/Detail/DetailVars.styl b/browser/main/Detail/DetailVars.styl index 42185160..6306c9e0 100644 --- a/browser/main/Detail/DetailVars.styl +++ b/browser/main/Detail/DetailVars.styl @@ -3,7 +3,7 @@ */ // 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 $note-detail-box-shadow = 2px 0 15px -8px #b1b1b1 inset diff --git a/browser/main/Detail/FolderSelect.js b/browser/main/Detail/FolderSelect.js index bec02f3d..4329c270 100644 --- a/browser/main/Detail/FolderSelect.js +++ b/browser/main/Detail/FolderSelect.js @@ -259,12 +259,11 @@ class FolderSelect extends React.Component { {optionList} - :
+ :
- - {currentOption.folder.name} / + + + {currentOption.folder.name}
diff --git a/browser/main/Detail/FolderSelect.styl b/browser/main/Detail/FolderSelect.styl index 81c5c41a..7abb79da 100644 --- a/browser/main/Detail/FolderSelect.styl +++ b/browser/main/Detail/FolderSelect.styl @@ -1,11 +1,11 @@ .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 @@ -24,10 +24,13 @@ .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 diff --git a/browser/main/Detail/MarkdownNoteDetail.styl b/browser/main/Detail/MarkdownNoteDetail.styl index c8b02bc9..bc4c3e66 100644 --- a/browser/main/Detail/MarkdownNoteDetail.styl +++ b/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 - 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 diff --git a/browser/main/Detail/NoteDetailInfo.styl b/browser/main/Detail/NoteDetailInfo.styl index fa0f8a65..a4927485 100644 --- a/browser/main/Detail/NoteDetailInfo.styl +++ b/browser/main/Detail/NoteDetailInfo.styl @@ -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,9 +46,8 @@ $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 diff --git a/browser/main/Detail/TagSelect.js b/browser/main/Detail/TagSelect.js index cb711f0e..851696c2 100644 --- a/browser/main/Detail/TagSelect.js +++ b/browser/main/Detail/TagSelect.js @@ -113,7 +113,7 @@ class TagSelect extends React.Component { ) diff --git a/browser/main/Detail/TagSelect.styl b/browser/main/Detail/TagSelect.styl index fd57434b..4001f03e 100644 --- a/browser/main/Detail/TagSelect.styl +++ b/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%) - 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 diff --git a/browser/styles/index.styl b/browser/styles/index.styl index 04b3d849..51b2bc17 100644 --- a/browser/styles/index.styl +++ b/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) diff --git a/resources/icon/icon-x.svg b/resources/icon/icon-x.svg new file mode 100644 index 00000000..6cfecc48 --- /dev/null +++ b/resources/icon/icon-x.svg @@ -0,0 +1,17 @@ + + + + x + Created with Sketch. + + + + + + + + + + + + \ No newline at end of file