From 92eccb635a330bb897612d78e4fdcb9276d23e19 Mon Sep 17 00:00:00 2001 From: Kazu Yokomizo Date: Sun, 5 Nov 2017 17:56:32 +0900 Subject: [PATCH 01/15] Move the notification area from main window to preference modal --- browser/components/RealtimeNotification.js | 2 +- browser/components/RealtimeNotification.styl | 14 +++++++------- browser/main/Detail/MarkdownNoteDetail.styl | 5 +---- browser/main/Detail/SnippetNoteDetail.styl | 6 ++---- browser/main/Main.js | 12 ------------ browser/main/NoteList/NoteList.styl | 1 - browser/main/StatusBar/StatusBar.styl | 2 -- browser/main/modals/PreferencesModal/index.js | 2 ++ browser/styles/index.styl | 2 +- 9 files changed, 14 insertions(+), 32 deletions(-) diff --git a/browser/components/RealtimeNotification.js b/browser/components/RealtimeNotification.js index 3a6bcc27..6904b362 100644 --- a/browser/components/RealtimeNotification.js +++ b/browser/components/RealtimeNotification.js @@ -40,7 +40,7 @@ class RealtimeNotification extends React.Component { ? this.handleLinkClick(e)} > - {notifications[0].text} + Info: {notifications[0].text} : '' diff --git a/browser/components/RealtimeNotification.styl b/browser/components/RealtimeNotification.styl index a49de536..7eeebb37 100644 --- a/browser/components/RealtimeNotification.styl +++ b/browser/components/RealtimeNotification.styl @@ -2,20 +2,20 @@ z-index 1000 font-size 12px position absolute - bottom 0px - right 0px - background-color #EBEBEB + bottom 20px + width 100% + float left height 30px + background-color none .notification-link position absolute - right 5px - top 5px text-decoration none color #282A36 + font-size 14px border 1px solid #6FA8E6 background-color alpha(#6FA8E6, 0.2) - padding 3px 9px + padding 5px 12px border-radius 2px transition 0.2s &:hover @@ -23,7 +23,7 @@ body[data-theme="dark"] .notification-area - background-color #1E2124 + background-color none .notification-link color #fff diff --git a/browser/main/Detail/MarkdownNoteDetail.styl b/browser/main/Detail/MarkdownNoteDetail.styl index 131ff9fd..5ed487d8 100644 --- a/browser/main/Detail/MarkdownNoteDetail.styl +++ b/browser/main/Detail/MarkdownNoteDetail.styl @@ -3,9 +3,7 @@ .root absolute top right bottom - border-width 0 0 1px - border-style solid - border-color $ui-borderColor + border-width 0 background-color $ui-noteDetail-backgroundColor box-shadow $note-detail-box-shadow @@ -44,7 +42,6 @@ body[data-theme="dark"] .root - border-color $ui-dark-borderColor background-color $ui-dark-noteDetail-backgroundColor box-shadow none diff --git a/browser/main/Detail/SnippetNoteDetail.styl b/browser/main/Detail/SnippetNoteDetail.styl index e233755d..e4a8f97d 100644 --- a/browser/main/Detail/SnippetNoteDetail.styl +++ b/browser/main/Detail/SnippetNoteDetail.styl @@ -3,9 +3,7 @@ .root absolute top bottom right - border-width 0 0 1px - border-style solid - border-color $ui-borderColor + border-width 0 background-color $ui-noteDetail-backgroundColor box-shadow $note-detail-box-shadow @@ -57,7 +55,7 @@ .override absolute bottom left - bottom 30px + bottom 2px left 60px height 23px z-index 101 diff --git a/browser/main/Main.js b/browser/main/Main.js index 2868e6a8..bfd1bd5f 100644 --- a/browser/main/Main.js +++ b/browser/main/Main.js @@ -14,7 +14,6 @@ import InitModal from 'browser/main/modals/InitModal' import mixpanel from 'browser/main/lib/mixpanel' import mobileAnalytics from 'browser/main/lib/AwsMobileAnalyticsConfig' import eventEmitter from 'browser/main/lib/eventEmitter' -import RealtimeNotification from 'browser/components/RealtimeNotification' function focused () { mixpanel.track('MAIN_FOCUSED') @@ -192,14 +191,6 @@ class Main extends React.Component { // the width of the navigation bar when it is folded/collapsed const foldedNavigationWidth = 44 - let notificationBarOffsetLeft - if (this.state.fullScreen) { - notificationBarOffsetLeft = 0 - } else if (config.isSideNavFolded) { - notificationBarOffsetLeft = foldedNavigationWidth - } else { - notificationBarOffsetLeft = this.state.navWidth - } return (
- ) } diff --git a/browser/main/NoteList/NoteList.styl b/browser/main/NoteList/NoteList.styl index c8023a38..892ad3d8 100644 --- a/browser/main/NoteList/NoteList.styl +++ b/browser/main/NoteList/NoteList.styl @@ -2,7 +2,6 @@ $control-height = 30px .root absolute left bottom - bottom 30px top $topBar-height - 1 background-color $ui-noteList-backgroundColor diff --git a/browser/main/StatusBar/StatusBar.styl b/browser/main/StatusBar/StatusBar.styl index df8df627..519950f8 100644 --- a/browser/main/StatusBar/StatusBar.styl +++ b/browser/main/StatusBar/StatusBar.styl @@ -2,8 +2,6 @@ .root absolute bottom left right - height $statusBar-height - bottom 16px z-index 100 background-color $ui-noteDetail-backgroundColor display flex diff --git a/browser/main/modals/PreferencesModal/index.js b/browser/main/modals/PreferencesModal/index.js index 490fcfc3..3f1fcce7 100644 --- a/browser/main/modals/PreferencesModal/index.js +++ b/browser/main/modals/PreferencesModal/index.js @@ -9,6 +9,7 @@ import StoragesTab from './StoragesTab' import ModalEscButton from 'browser/components/ModalEscButton' import CSSModules from 'browser/lib/CSSModules' import styles from './PreferencesModal.styl' +import RealtimeNotification from 'browser/components/RealtimeNotification' class Preferences extends React.Component { constructor (props) { @@ -136,6 +137,7 @@ class Preferences extends React.Component {
{content}
+ ) } diff --git a/browser/styles/index.styl b/browser/styles/index.styl index 50cd8f7e..e2b4ff3d 100644 --- a/browser/styles/index.styl +++ b/browser/styles/index.styl @@ -5,7 +5,7 @@ $danger-color = #c9302c $danger-lighten-color = lighten(#c9302c, 5%) // Layouts -$statusBar-height = 36px +$statusBar-height = 0px $sideNav-width = 200px $sideNav--folded-width = 44px $topBar-height = 60px From 2f52233bd098ba14067aef886115e16498933e96 Mon Sep 17 00:00:00 2001 From: Kazu Yokomizo Date: Sun, 5 Nov 2017 19:21:28 +0900 Subject: [PATCH 02/15] Fix UX when press a note in note list --- browser/components/NoteItem.styl | 19 +++++++++-- browser/components/NoteItemSimple.styl | 47 ++++++++++++++++++++------ 2 files changed, 53 insertions(+), 13 deletions(-) diff --git a/browser/components/NoteItem.styl b/browser/components/NoteItem.styl index bda90407..b156f5ae 100644 --- a/browser/components/NoteItem.styl +++ b/browser/components/NoteItem.styl @@ -59,7 +59,15 @@ $control-height = 30px .item-star color $ui-favorite-star-button-color &:hover - background-color $ui-button--active-backgroundColor + background-color alpha($ui-button--active-backgroundColor, 50%) + color #e74c3c + .menu-button-label + color $ui-text-color + &:active, &:active:hover + background-color alpha($ui-button--active-backgroundColor, 50%) + color #e74c3c + .menu-button-label + color $ui-text-color .item-title-icon position relative @@ -148,6 +156,7 @@ body[data-theme="dark"] &:hover transition 0.15s background-color alpha($ui-dark-button--active-backgroundColor, 20%) + color $ui-dark-text-color .item-title .item-title-icon .item-bottom-time @@ -155,11 +164,12 @@ body[data-theme="dark"] color $ui-dark-text-color .item-bottom-tagList-item transition 0.15s - background-color alpha($ui-dark-button--active-backgroundColor, 40%) + background-color alpha(#fff, 20%) color $ui-dark-text-color &:active transition 0.15s background-color $ui-dark-button--active-backgroundColor + color $ui-dark-text-color .item-title .item-title-icon .item-bottom-time @@ -185,6 +195,11 @@ body[data-theme="dark"] .item-bottom-tagList-item background-color alpha(white, 10%) color $ui-dark-text-color + &:hover + background-color alpha($ui-dark-button--active-backgroundColor, 50%) + color #c0392b + .item-bottom-tagList-item + background-color alpha(#fff, 20%) .item-title color $ui-inactive-text-color diff --git a/browser/components/NoteItemSimple.styl b/browser/components/NoteItemSimple.styl index 2333353e..aa01d4ab 100644 --- a/browser/components/NoteItemSimple.styl +++ b/browser/components/NoteItemSimple.styl @@ -37,7 +37,15 @@ $control-height = 30px .item-simple-title-icon color $ui-text-color &:hover - background-color $ui-button--active-backgroundColor + background-color alpha($ui-button--active-backgroundColor, 50%) + color #e74c3c + .menu-button-label + color $ui-text-color + &:active, &:active:hover + background-color alpha($ui-button--active-backgroundColor, 50%) + color #e74c3c + .menu-button-label + color $ui-text-color .item-simple-title font-size 13px @@ -67,33 +75,50 @@ body[data-theme="dark"] .item-simple border-color $ui-dark-borderColor background-color $ui-dark-noteList-backgroundColor - &:active - 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 + transition 0.15s background-color alpha($ui-dark-button--active-backgroundColor, 20%) + color $ui-dark-text-color .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-bottom-tagList-item + transition 0.15s + background-color alpha(#fff, 20%) + color $ui-dark-text-color + &:active + transition 0.15s + background-color $ui-dark-button--active-backgroundColor + color $ui-dark-text-color + .item-simple-title + .item-simple-title-icon + .item-simple-bottom-time + transition 0.15s + color $ui-dark-text-color + .item-simple-bottom-tagList-item + transition 0.15s + background-color alpha(white, 10%) + color $ui-dark-text-color .item-simple--active border-color $ui-dark-borderColor background-color $ui-dark-button--active-backgroundColor + .item-simple-wrapper + border-color transparent .item-simple-title .item-simple-title-icon .item-simple-bottom-time color $ui-dark-text-color .item-simple-bottom-tagList-item - background-color transparent + background-color alpha(white, 10%) color $ui-dark-text-color + &:hover + background-color alpha($ui-dark-button--active-backgroundColor, 50%) + color #c0392b + .item-simple-bottom-tagList-item + background-color alpha(#fff, 20%) .item-simple-title color $ui-inactive-text-color From 6bbc5a91feac945af4eaaba7090020304c5bef4e Mon Sep 17 00:00:00 2001 From: Kazu Yokomizo Date: Sun, 5 Nov 2017 20:05:44 +0900 Subject: [PATCH 03/15] Increase font size and change folder icon at side bar --- browser/components/SideNavFilter.styl | 4 ++-- browser/components/StorageItem.js | 6 ++---- browser/components/StorageItem.styl | 6 +++--- browser/main/SideNav/SideNav.styl | 2 +- browser/main/modals/PreferencesModal/FolderItem.styl | 2 +- 5 files changed, 9 insertions(+), 11 deletions(-) diff --git a/browser/components/SideNavFilter.styl b/browser/components/SideNavFilter.styl index b7fd7dc6..3c1e2185 100644 --- a/browser/components/SideNavFilter.styl +++ b/browser/components/SideNavFilter.styl @@ -5,7 +5,7 @@ navButtonColor() height 32px padding 0 15px - font-size 12px + font-size 13px width 100% text-align left overflow ellipsis @@ -71,7 +71,7 @@ border-bottom-right-radius 2px pointer-events none opacity 0 - font-size 12px + font-size 13px body[data-theme="dark"] .menu-button diff --git a/browser/components/StorageItem.js b/browser/components/StorageItem.js index ab2616fb..b01bb920 100644 --- a/browser/components/StorageItem.js +++ b/browser/components/StorageItem.js @@ -35,10 +35,8 @@ const StorageItem = ({ > - {isFolded ? folderName.substring(0, 1) : folderName} + }> + {isActive ? : }{isFolded ? folderName.substring(0, 1) : folderName} {(!isFolded && isNumber(noteCount)) && {noteCount} diff --git a/browser/components/StorageItem.styl b/browser/components/StorageItem.styl index e6aabd34..e5eb1e1f 100644 --- a/browser/components/StorageItem.styl +++ b/browser/components/StorageItem.styl @@ -13,7 +13,7 @@ text-align left border none overflow ellipsis - font-size 12px + font-size 13px &:first-child margin-top 0 &:hover @@ -35,7 +35,7 @@ .folderList-item-name display block flex 1 - padding 0 25px + padding 0 12px height 26px line-height 26px border-width 0 0 0 2px @@ -48,7 +48,7 @@ float right line-height 26px padding-right 15px - font-size 12px + font-size 13px .folderList-item-tooltip tooltip() diff --git a/browser/main/SideNav/SideNav.styl b/browser/main/SideNav/SideNav.styl index 9cc38c7c..2359cb54 100644 --- a/browser/main/SideNav/SideNav.styl +++ b/browser/main/SideNav/SideNav.styl @@ -100,7 +100,7 @@ border-top-right-radius 2px border-bottom-right-radius 2px pointer-events none - font-size 12px + font-size 13px body[data-theme="dark"] .root, .root--folded diff --git a/browser/main/modals/PreferencesModal/FolderItem.styl b/browser/main/modals/PreferencesModal/FolderItem.styl index e3b09582..a54f464a 100644 --- a/browser/main/modals/PreferencesModal/FolderItem.styl +++ b/browser/main/modals/PreferencesModal/FolderItem.styl @@ -25,7 +25,7 @@ .folderItem-left-key color $ui-inactive-text-color - font-size 10px + font-size 13px margin 0 5px border none From 2351bb78da778a325c072c59472330d0c16bbfc5 Mon Sep 17 00:00:00 2001 From: Kazu Yokomizo Date: Sun, 5 Nov 2017 20:31:32 +0900 Subject: [PATCH 04/15] Change "Folders" and "Tags" strings to icons. --- browser/main/SideNav/SideNav.styl | 44 +++++++++---------------------- browser/main/SideNav/index.js | 4 +-- 2 files changed, 14 insertions(+), 34 deletions(-) diff --git a/browser/main/SideNav/SideNav.styl b/browser/main/SideNav/SideNav.styl index 2359cb54..a3f0ffae 100644 --- a/browser/main/SideNav/SideNav.styl +++ b/browser/main/SideNav/SideNav.styl @@ -26,27 +26,22 @@ .switch-buttons background-color transparent - border 1px solid $ui-borderColor - width 110px + border 0 height 25px - margin 20px auto 0px auto - border-radius 1px + margin 20px auto 0px 8px .non-active-button - navButtonColor() - font-weight 600 - width 54px - height 23px + color $ui-inactive-text-color + font-size 16px + border 0 + background-color transparent + transition 0.2s + &:hover + color alpha(#0B99F1, 60%) .active-button @extend .non-active-button - background-color $ui-button--active-backgroundColor - color $ui-text-color - &:hover - background-color alpha($ui-button--active-backgroundColor, 70%) - color alpha($ui-text-color, 70%) - &:active, &:active:hover - background-color $ui-button--active-backgroundColor + color #0B99F1 .top-menu-label margin-left 5px @@ -118,25 +113,10 @@ body[data-theme="dark"] &:hover background-color alpha($ui-dark-button--active-backgroundColor, 20%) - .switch-buttons - border-color $ui-dark-borderColor - .non-active-button - navDarkButtonColor() - - .active-button - @extend .non-active-button - background-color $ui-dark-button--active-backgroundColor - color $ui-dark-text-color + color alpha($ui-dark-text-color, 60%) &:hover - background-color alpha($ui-dark-button--active-backgroundColor, 70%) - color alpha($ui-dark-text-color, 70%) - &:active - color $ui-dark-text-color - background-color alpha($ui-dark-button--active-backgroundColor, 60%) - &:active, &:active:hover - color $ui-dark-text-color - background-color $ui-dark-button--active-backgroundColor + color alpha(#0B99F1, 60%) .tag-title p diff --git a/browser/main/SideNav/index.js b/browser/main/SideNav/index.js index 6ac7718f..1e78c058 100644 --- a/browser/main/SideNav/index.js +++ b/browser/main/SideNav/index.js @@ -148,8 +148,8 @@ class SideNav extends React.Component { >
- - + +