From 5b224d3b54592abf123c14ea17040a382733336b Mon Sep 17 00:00:00 2001 From: Kazu Yokomizo Date: Tue, 14 Nov 2017 18:13:37 +0900 Subject: [PATCH 01/12] Fix note detail layout --- browser/main/Detail/DetailVars.styl | 4 ++-- browser/main/Detail/InfoButton.js | 2 +- browser/main/Detail/InfoButton.styl | 2 +- browser/main/Detail/MarkdownNoteDetail.js | 24 ++++++++++++--------- browser/main/Detail/MarkdownNoteDetail.styl | 4 ++-- browser/main/Detail/NoteDetailInfo.styl | 6 ++++-- browser/main/Detail/SnippetNoteDetail.js | 22 ++++++++++--------- browser/main/Detail/SnippetNoteDetail.styl | 3 +-- browser/main/Detail/StarButton.styl | 23 ++------------------ browser/main/Detail/TrashButton.styl | 2 +- browser/styles/index.styl | 7 +++--- 11 files changed, 44 insertions(+), 55 deletions(-) diff --git a/browser/main/Detail/DetailVars.styl b/browser/main/Detail/DetailVars.styl index ad492c54..d11d4509 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 = 25px -$note-detail-right-margin = 25px +$note-detail-left-margin = 50px +$note-detail-right-margin = 80px $note-detail-box-shadow = 2px 0 15px -8px #b1b1b1 inset diff --git a/browser/main/Detail/InfoButton.js b/browser/main/Detail/InfoButton.js index e4a9dedc..ce9f35de 100644 --- a/browser/main/Detail/InfoButton.js +++ b/browser/main/Detail/InfoButton.js @@ -8,7 +8,7 @@ const InfoButton = ({ ) diff --git a/browser/main/Detail/InfoButton.styl b/browser/main/Detail/InfoButton.styl index 45c378fe..f5ed4c6a 100644 --- a/browser/main/Detail/InfoButton.styl +++ b/browser/main/Detail/InfoButton.styl @@ -1,5 +1,5 @@ .control-infoButton - float right + top 10px topBarButtonLight() .control-infoPanel diff --git a/browser/main/Detail/MarkdownNoteDetail.js b/browser/main/Detail/MarkdownNoteDetail.js index bc407b62..07673975 100644 --- a/browser/main/Detail/MarkdownNoteDetail.js +++ b/browser/main/Detail/MarkdownNoteDetail.js @@ -302,10 +302,6 @@ class MarkdownNoteDetail extends React.Component { const detailTopBar =
- this.handleStarButtonClick(e)} - isActive={note.isStarred} - />
+ this.handleInfoButtonClick(e)} + /> + + this.handleStarButtonClick(e)} + isActive={note.isStarred} + /> + {(() => { const faClassName = `fa ${this.getToggleLockButton()}` const lockButtonComponent = @@ -341,15 +346,14 @@ class MarkdownNoteDetail extends React.Component { this.state.isLockButtonShown ? lockButtonComponent : '' ) })()} - this.handleTrashButtonClick(e)} /> + - this.handleInfoButtonClick(e)} - /> + + this.handleTrashButtonClick(e)} /> +
- this.handleStarButtonClick(e)} - isActive={note.isStarred} - />
- this.handleTrashButtonClick(e)} /> - this.handleInfoButtonClick(e)} /> + + this.handleStarButtonClick(e)} + isActive={note.isStarred} + /> + + + + this.handleTrashButtonClick(e)} /> Date: Tue, 14 Nov 2017 18:38:05 +0900 Subject: [PATCH 02/12] Fix top part of note detail --- browser/main/Detail/NoteDetailInfo.styl | 11 ++++++----- browser/main/Detail/TagSelect.styl | 9 ++++----- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/browser/main/Detail/NoteDetailInfo.styl b/browser/main/Detail/NoteDetailInfo.styl index 01a177db..502b6824 100644 --- a/browser/main/Detail/NoteDetailInfo.styl +++ b/browser/main/Detail/NoteDetailInfo.styl @@ -1,7 +1,7 @@ @import('DetailVars') $info-height = 40px -$info-margin-under-border = 27px +$info-margin-under-border = 15px .info absolute top left right @@ -13,8 +13,9 @@ $info-margin-under-border = 27px .info-left float left - padding 0 5px - margin 0px 2px + padding 0 7px + width 100% + display flex .info-left-top display inline-block @@ -23,8 +24,8 @@ $info-margin-under-border = 27px .info-left-top-folderSelect padding 0 3px - height 34px - line-height 26px + height 40px + line-height 40px display flex align-items center justify-content center diff --git a/browser/main/Detail/TagSelect.styl b/browser/main/Detail/TagSelect.styl index b5b8bb74..25d431cf 100644 --- a/browser/main/Detail/TagSelect.styl +++ b/browser/main/Detail/TagSelect.styl @@ -1,9 +1,10 @@ .root display inline-block user-select none - height 23px + line-height 45px + height 50px vertical-align middle - width 300px + width 100% overflow-x scroll white-space nowrap @@ -12,9 +13,7 @@ .tag display inline-block - margin 1px 3px - padding 0 - height 20px + margin 0px 2px background-color alpha($ui-tag-backgroundColor, 10%) border-radius 3px overflow hidden From 369f8b6093bad8d178d69cf6c951f52e5f3f556f Mon Sep 17 00:00:00 2001 From: Kazu Yokomizo Date: Tue, 14 Nov 2017 18:40:38 +0900 Subject: [PATCH 03/12] Fix CI --- browser/main/Detail/MarkdownNoteDetail.js | 3 ++- browser/main/Detail/SnippetNoteDetail.js | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/browser/main/Detail/MarkdownNoteDetail.js b/browser/main/Detail/MarkdownNoteDetail.js index 07673975..bccd998a 100644 --- a/browser/main/Detail/MarkdownNoteDetail.js +++ b/browser/main/Detail/MarkdownNoteDetail.js @@ -348,7 +348,8 @@ class MarkdownNoteDetail extends React.Component { })()} diff --git a/browser/main/Detail/SnippetNoteDetail.js b/browser/main/Detail/SnippetNoteDetail.js index d6c85916..3ef08340 100644 --- a/browser/main/Detail/SnippetNoteDetail.js +++ b/browser/main/Detail/SnippetNoteDetail.js @@ -602,7 +602,7 @@ class SnippetNoteDetail extends React.Component { this.handleInfoButtonClick(e)} /> - + this.handleStarButtonClick(e)} isActive={note.isStarred} From 2b73c17cca7748d90dc16d8ae8be31250040dbe1 Mon Sep 17 00:00:00 2001 From: Kazu Yokomizo Date: Tue, 14 Nov 2017 18:51:50 +0900 Subject: [PATCH 04/12] Fix CI --- Backers.md | 6 +++++- browser/main/Detail/MarkdownNoteDetail.js | 4 ++-- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/Backers.md b/Backers.md index afbdfc5e..6c51d8dc 100644 --- a/Backers.md +++ b/Backers.md @@ -9,16 +9,20 @@ Boostnote is an open source project. It's an independent project with its ongoin ## Backers via OpenCollective -- [Kazu Yokomizo](https://twitter.com/kazup_bot) - $20 +- [Ralph03](https://opencollective.com/ralph03) - $24 - [Nikolas Dan](https://opencollective.com/nikolas-dan) - $20 - [tatoosh11](https://twitter.com/ta11) - $10 +- [Alexander Borovkov](https://opencollective.com/alexander-borovkov) - $10 + - [Yeojong Kim](https://twitter.com/yeojoy) - $5 - [Scotia Draven](https://opencollective.com/scotia-draven) - $5 +- [spoonhoop](https://opencollective.com/spoonhoop) - $5 + ## Backers via Bountysource https://salt.bountysource.com/teams/boostnote diff --git a/browser/main/Detail/MarkdownNoteDetail.js b/browser/main/Detail/MarkdownNoteDetail.js index bccd998a..600bfccd 100644 --- a/browser/main/Detail/MarkdownNoteDetail.js +++ b/browser/main/Detail/MarkdownNoteDetail.js @@ -348,8 +348,8 @@ class MarkdownNoteDetail extends React.Component { })()} From deade1f9f8c84dfb7a2bb0406233aa0cf81e210a Mon Sep 17 00:00:00 2001 From: Kazu Yokomizo Date: Tue, 14 Nov 2017 20:26:36 +0900 Subject: [PATCH 05/12] Add trash button in trash --- browser/main/Detail/PermanentDeleteButton.js | 19 +++++++++++++++++++ browser/main/Detail/TrashButton.styl | 4 ++++ 2 files changed, 23 insertions(+) create mode 100644 browser/main/Detail/PermanentDeleteButton.js diff --git a/browser/main/Detail/PermanentDeleteButton.js b/browser/main/Detail/PermanentDeleteButton.js new file mode 100644 index 00000000..cbcf9ad8 --- /dev/null +++ b/browser/main/Detail/PermanentDeleteButton.js @@ -0,0 +1,19 @@ +import React, { PropTypes } from 'react' +import CSSModules from 'browser/lib/CSSModules' +import styles from './TrashButton.styl' + +const PermanentDeleteButton = ({ + onClick +}) => ( + +) + +PermanentDeleteButton.propTypes = { + onClick: PropTypes.func.isRequired +} + +export default CSSModules(PermanentDeleteButton, styles) diff --git a/browser/main/Detail/TrashButton.styl b/browser/main/Detail/TrashButton.styl index 2c5736df..91bc24c7 100644 --- a/browser/main/Detail/TrashButton.styl +++ b/browser/main/Detail/TrashButton.styl @@ -2,6 +2,10 @@ top 120px topBarButtonLight() +.control-trashButton--in-trash + top 60px + topBarButtonLight() + .trashButton padding 0px margin 15px 0 From 2a2b662a6f18f2674b2d524c3e89510840c46305 Mon Sep 17 00:00:00 2001 From: Kazu Yokomizo Date: Tue, 14 Nov 2017 20:28:51 +0900 Subject: [PATCH 06/12] Fix right buttons layout in note detail --- browser/main/Detail/InfoPanel.styl | 4 ++-- browser/main/Detail/MarkdownNoteDetail.js | 3 ++- browser/main/Detail/MarkdownNoteDetail.styl | 6 +++++- browser/main/Detail/NoteDetailInfo.styl | 3 ++- 4 files changed, 11 insertions(+), 5 deletions(-) diff --git a/browser/main/Detail/InfoPanel.styl b/browser/main/Detail/InfoPanel.styl index 62ec529e..980df6d4 100644 --- a/browser/main/Detail/InfoPanel.styl +++ b/browser/main/Detail/InfoPanel.styl @@ -11,7 +11,7 @@ .control-infoButton-panel z-index 200 margin-top 38px - margin-left -140px + right 0px position absolute padding 20px 25px 0 25px width 300px @@ -33,7 +33,7 @@ .control-infoButton-panel-trash z-index 200 margin-top 45px - margin-left -190px + right 0px position absolute padding 20px 25px 0 25px width 300px diff --git a/browser/main/Detail/MarkdownNoteDetail.js b/browser/main/Detail/MarkdownNoteDetail.js index 600bfccd..186cd7ab 100644 --- a/browser/main/Detail/MarkdownNoteDetail.js +++ b/browser/main/Detail/MarkdownNoteDetail.js @@ -15,6 +15,7 @@ import _ from 'lodash' import { findNoteTitle } from 'browser/lib/findNoteTitle' import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig' import TrashButton from './TrashButton' +import PermanentDeleteButton from './PermanentDeleteButton' import InfoButton from './InfoButton' import InfoPanel from './InfoPanel' import InfoPanelTrashed from './InfoPanelTrashed' @@ -285,7 +286,7 @@ class MarkdownNoteDetail extends React.Component { />
- this.handleTrashButtonClick(e)} /> + this.handleTrashButtonClick(e)} /> this.handleInfoButtonClick(e)} /> diff --git a/browser/main/Detail/MarkdownNoteDetail.styl b/browser/main/Detail/MarkdownNoteDetail.styl index dbfa53f8..f6708ce8 100644 --- a/browser/main/Detail/MarkdownNoteDetail.styl +++ b/browser/main/Detail/MarkdownNoteDetail.styl @@ -11,7 +11,7 @@ padding-bottom 3px .control-lockButton - top 120px + top 160px topBarButtonLight() .control-lockButton-tooltip @@ -26,6 +26,10 @@ opacity 0 transition 0.1s +.trashed-infopanel + top 40px + position relative + .control-fullScreenButton top 80px topBarButtonLight() diff --git a/browser/main/Detail/NoteDetailInfo.styl b/browser/main/Detail/NoteDetailInfo.styl index 502b6824..6ff65a94 100644 --- a/browser/main/Detail/NoteDetailInfo.styl +++ b/browser/main/Detail/NoteDetailInfo.styl @@ -62,7 +62,7 @@ $info-margin-under-border = 15px height 34px border-radius 17px font-size 14px - margin 15px 7px + margin 5px 0px border none color $ui-button-color display flex @@ -75,6 +75,7 @@ $info-margin-under-border = 15px border-color $ui-button--active-backgroundColor &:hover background-color alpha($ui-button--hover-backgroundColor, 60%) + transition 0.2s .control-lockButton-tooltip opacity 1 From f4764afbf49ef897d8d0485ca8293941053dad8c Mon Sep 17 00:00:00 2001 From: Kazu Yokomizo Date: Tue, 14 Nov 2017 20:45:53 +0900 Subject: [PATCH 07/12] Appear the todo percentage bar --- browser/components/TodoListPercentage.styl | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/browser/components/TodoListPercentage.styl b/browser/components/TodoListPercentage.styl index 4881fcd1..065b95aa 100644 --- a/browser/components/TodoListPercentage.styl +++ b/browser/components/TodoListPercentage.styl @@ -1,7 +1,7 @@ .percentageBar position absolute - top 58px - right: 0px + top 40px + right 0px left 0px background-color #DADFE1 width 100% From 0aaea28e74b01276870eaef193f6ff9ec9369afd Mon Sep 17 00:00:00 2001 From: Kazu Yokomizo Date: Tue, 14 Nov 2017 20:46:07 +0900 Subject: [PATCH 08/12] Fix note detail layout --- browser/main/Detail/DetailVars.styl | 2 +- browser/main/Detail/NoteDetailInfo.styl | 2 +- browser/main/Detail/TagSelect.styl | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/browser/main/Detail/DetailVars.styl b/browser/main/Detail/DetailVars.styl index d11d4509..42185160 100644 --- a/browser/main/Detail/DetailVars.styl +++ b/browser/main/Detail/DetailVars.styl @@ -4,6 +4,6 @@ // Margin on the left side and the right side for NoteDetail component. $note-detail-left-margin = 50px -$note-detail-right-margin = 80px +$note-detail-right-margin = 70px $note-detail-box-shadow = 2px 0 15px -8px #b1b1b1 inset diff --git a/browser/main/Detail/NoteDetailInfo.styl b/browser/main/Detail/NoteDetailInfo.styl index 6ff65a94..8d03d4c7 100644 --- a/browser/main/Detail/NoteDetailInfo.styl +++ b/browser/main/Detail/NoteDetailInfo.styl @@ -51,7 +51,7 @@ $info-margin-under-border = 15px .info-right position absolute - right -35px + right -20px top 0 background $ui-noteDetail-backgroundColor bottom 1px diff --git a/browser/main/Detail/TagSelect.styl b/browser/main/Detail/TagSelect.styl index 25d431cf..fd57434b 100644 --- a/browser/main/Detail/TagSelect.styl +++ b/browser/main/Detail/TagSelect.styl @@ -1,7 +1,7 @@ .root display inline-block user-select none - line-height 45px + line-height 50px height 50px vertical-align middle width 100% From 148fb25a15c794d8a08af3e1e9bfba27869c564d Mon Sep 17 00:00:00 2001 From: Kazu Yokomizo Date: Tue, 14 Nov 2017 20:54:31 +0900 Subject: [PATCH 09/12] Fix note list layout --- browser/components/NoteItem.styl | 6 ++++-- browser/components/NoteItemSimple.styl | 6 ++++-- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/browser/components/NoteItem.styl b/browser/components/NoteItem.styl index 212fedec..d410a7cf 100644 --- a/browser/components/NoteItem.styl +++ b/browser/components/NoteItem.styl @@ -149,13 +149,15 @@ body[data-theme="white"] .item background-color $ui-white-noteList-backgroundColor &:hover - background-color alpha($ui-button--active-backgroundColor, 40%) + background-color alpha($ui-button--active-backgroundColor, 60%) &:active background-color $ui-button--active-backgroundColor .item--active @extend .item background-color $ui-button--active-backgroundColor + &:hover + background-color alpha($ui-button--active-backgroundColor, 60%) body[data-theme="dark"] .root @@ -208,7 +210,7 @@ body[data-theme="dark"] background-color alpha(white, 10%) color $ui-dark-text-color &:hover - background-color alpha($ui-dark-button--active-backgroundColor, 50%) + background-color alpha($ui-dark-button--active-backgroundColor, 60%) color #c0392b .item-bottom-tagList-item background-color alpha(#fff, 20%) diff --git a/browser/components/NoteItemSimple.styl b/browser/components/NoteItemSimple.styl index 1a84f26c..fdfed1ab 100644 --- a/browser/components/NoteItemSimple.styl +++ b/browser/components/NoteItemSimple.styl @@ -71,13 +71,15 @@ body[data-theme="white"] .item-simple background-color $ui-white-noteList-backgroundColor &:hover - background-color alpha($ui-button--active-backgroundColor, 40%) + background-color alpha($ui-button--active-backgroundColor, 60%) &:active background-color $ui-button--active-backgroundColor .item-simple--active @extend .item-simple background-color $ui-button--active-backgroundColor + &:hover + background-color alpha($ui-button--active-backgroundColor, 60%) body[data-theme="dark"] .root @@ -127,7 +129,7 @@ body[data-theme="dark"] background-color alpha(white, 10%) color $ui-dark-text-color &:hover - background-color alpha($ui-dark-button--active-backgroundColor, 50%) + background-color alpha($ui-dark-button--active-backgroundColor, 60%) color #c0392b .item-simple-bottom-tagList-item background-color alpha(#fff, 20%) From e933ad89dcdfc8716aabef52cee1da353b79925e Mon Sep 17 00:00:00 2001 From: Kazu Yokomizo Date: Tue, 14 Nov 2017 21:00:10 +0900 Subject: [PATCH 10/12] Fix star button at note detail --- browser/main/Detail/StarButton.styl | 26 +++++++++++--------------- browser/styles/index.styl | 2 -- 2 files changed, 11 insertions(+), 17 deletions(-) diff --git a/browser/main/Detail/StarButton.styl b/browser/main/Detail/StarButton.styl index 6d2de1b2..b1880a8e 100644 --- a/browser/main/Detail/StarButton.styl +++ b/browser/main/Detail/StarButton.styl @@ -1,28 +1,24 @@ .root top 45px topBarButtonLight() + &:hover + transition 0.2s + color alpha($ui-favorite-star-button-color, 0.6) .root--active @extend .root + transition 0.15s + color $ui-favorite-star-button-color + &:hover + transition 0.2s + color alpha($ui-favorite-star-button-color, 0.6) .icon transition transform 0.15s body[data-theme="dark"] .root + topBarButtonDark() &:hover - transition 0.15s - background-color alpha($ui-dark-button--active-backgroundColor, 20%) - color $ui-favorite-star-button-color - &:active - transition 0.15s - background-color alpha($ui-dark-button--active-backgroundColor, 20%) - color $ui-favorite-star-button-color - - .root--active - @extend .root - color $ui-favorite-star-button-color - &:hover - transition 0.15s - color $ui-favorite-star-button-color - background-color alpha($ui-dark-button--active-backgroundColor, 20%) \ No newline at end of file + transition 0.2s + color alpha($ui-favorite-star-button-color, 0.6) \ No newline at end of file diff --git a/browser/styles/index.styl b/browser/styles/index.styl index 7b94844f..7f7b0f7a 100644 --- a/browser/styles/index.styl +++ b/browser/styles/index.styl @@ -283,12 +283,10 @@ topBarButtonDark() border-color $ui-dark-borderColor color $ui-dark-topbar-button-color &:hover - background-color $dark-default-button-background--hover color $ui-dark-tooltip-text-color &:active border-color $ui-dark-button--focus-borderColor &:active:hover - background-color $ui-dark-button--active-backgroundColor color $ui-dark-tooltip-text-color &:focus border-color $ui-button--focus-borderColor From 34a16298d4c048234932e7a3a803884d2b0a8f7b Mon Sep 17 00:00:00 2001 From: Kazu Yokomizo Date: Tue, 14 Nov 2017 21:15:00 +0900 Subject: [PATCH 11/12] Change markdown lock icon --- browser/main/Detail/MarkdownNoteDetail.js | 5 +---- browser/main/Detail/MarkdownNoteDetail.styl | 12 ------------ browser/styles/index.styl | 3 ++- 3 files changed, 3 insertions(+), 17 deletions(-) diff --git a/browser/main/Detail/MarkdownNoteDetail.js b/browser/main/Detail/MarkdownNoteDetail.js index 186cd7ab..a427198b 100644 --- a/browser/main/Detail/MarkdownNoteDetail.js +++ b/browser/main/Detail/MarkdownNoteDetail.js @@ -232,7 +232,7 @@ class MarkdownNoteDetail extends React.Component { } getToggleLockButton () { - return this.state.isLocked ? 'fa-lock' : 'fa-unlock' + return this.state.isLocked ? 'fa-eye-slash' : 'fa-eye' } handleDeleteKeyDown (e) { @@ -339,9 +339,6 @@ class MarkdownNoteDetail extends React.Component { onMouseDown={(e) => this.handleLockButtonMouseDown(e)} > - - {this.state.isLocked ? 'Unlock Editor' : 'Keep Editor Locked'} - return ( this.state.isLockButtonShown ? lockButtonComponent : '' diff --git a/browser/main/Detail/MarkdownNoteDetail.styl b/browser/main/Detail/MarkdownNoteDetail.styl index f6708ce8..a4ed7762 100644 --- a/browser/main/Detail/MarkdownNoteDetail.styl +++ b/browser/main/Detail/MarkdownNoteDetail.styl @@ -14,18 +14,6 @@ top 160px topBarButtonLight() -.control-lockButton-tooltip - tooltip() - position fixed - pointer-events none - top 50px - z-index 200 - padding 5px - line-height normal - border-radius 2px - opacity 0 - transition 0.1s - .trashed-infopanel top 40px position relative diff --git a/browser/styles/index.styl b/browser/styles/index.styl index 7f7b0f7a..dd572191 100644 --- a/browser/styles/index.styl +++ b/browser/styles/index.styl @@ -186,12 +186,13 @@ topBarButtonLight() border-radius 17px font-size 14px border none - color alpha($ui-button-color, 0.3) + color alpha($ui-button-color, 0.4) fill $ui-button-color background-color transparent &:active border-color $ui-button--active-backgroundColor &:hover + transform scale(1.1) transition 0.4s color $ui-button-color .control-lockButton-tooltip From 55ef998c55ebb5433a7de1d5d290e29269f00e40 Mon Sep 17 00:00:00 2001 From: Kazu Yokomizo Date: Tue, 14 Nov 2017 21:27:02 +0900 Subject: [PATCH 12/12] Fix create sub snippet button color --- browser/main/Detail/SnippetNoteDetail.styl | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/browser/main/Detail/SnippetNoteDetail.styl b/browser/main/Detail/SnippetNoteDetail.styl index 1129e7de..bfd8e6b2 100644 --- a/browser/main/Detail/SnippetNoteDetail.styl +++ b/browser/main/Detail/SnippetNoteDetail.styl @@ -43,7 +43,7 @@ overflow hidden .tabList .plusButton - navButtonColor() + navWhiteButtonColor() width 30px .tabView