diff --git a/browser/main/Detail/MarkdownNoteDetail.js b/browser/main/Detail/MarkdownNoteDetail.js index 4ef6b806..804ceba8 100644 --- a/browser/main/Detail/MarkdownNoteDetail.js +++ b/browser/main/Detail/MarkdownNoteDetail.js @@ -263,13 +263,20 @@ class MarkdownNoteDetail extends React.Component { /> diff --git a/browser/main/Detail/MarkdownNoteDetail.styl b/browser/main/Detail/MarkdownNoteDetail.styl index 0def79e6..b06a8ef7 100644 --- a/browser/main/Detail/MarkdownNoteDetail.styl +++ b/browser/main/Detail/MarkdownNoteDetail.styl @@ -77,11 +77,18 @@ $info-height = 75px padding 0 &:active border-color $ui-button--focus-borderColor - &:hover .left-control-newPostButton-tooltip - display block + &:hover .info-right-button-tooltip + opacity 1 &:focus border-color $ui-button--focus-borderColor +.info-right-button-tooltip + tooltip() + position fixed + top 45px + padding 5px + opacity 0 + .body absolute bottom left right top $info-height diff --git a/browser/main/Detail/SnippetNoteDetail.js b/browser/main/Detail/SnippetNoteDetail.js index dc71a045..d925be9d 100644 --- a/browser/main/Detail/SnippetNoteDetail.js +++ b/browser/main/Detail/SnippetNoteDetail.js @@ -434,13 +434,20 @@ class SnippetNoteDetail extends React.Component { /> diff --git a/browser/main/Detail/SnippetNoteDetail.styl b/browser/main/Detail/SnippetNoteDetail.styl index f64e0a9c..5963f34b 100644 --- a/browser/main/Detail/SnippetNoteDetail.styl +++ b/browser/main/Detail/SnippetNoteDetail.styl @@ -77,10 +77,16 @@ $info-height = 75px padding 0 &:active border-color $ui-button--focus-borderColor - &:hover .left-control-newPostButton-tooltip - display block + &:hover .info-right-button-tooltip + opacity 1 &:focus border-color $ui-button--focus-borderColor +.info-right-button-tooltip + tooltip() + position fixed + top 45px + padding 5px + opacity 0 .body absolute bottom left right diff --git a/browser/main/Detail/StarButton.js b/browser/main/Detail/StarButton.js index e3f98a97..055a4fff 100644 --- a/browser/main/Detail/StarButton.js +++ b/browser/main/Detail/StarButton.js @@ -47,11 +47,13 @@ class StarButton extends React.Component { onMouseLeave={(e) => this.handleMouseLeave(e)} onClick={this.props.onClick} > - + Star Note ) } diff --git a/browser/main/Detail/StarButton.styl b/browser/main/Detail/StarButton.styl index add3a354..041fdf1d 100644 --- a/browser/main/Detail/StarButton.styl +++ b/browser/main/Detail/StarButton.styl @@ -1,11 +1,25 @@ .root position relative padding 0 - transition transform 0.15s &:hover - transform rotate(-72deg) + .icon + transform rotate(-72deg) + .tooltip + opacity 1 + .root--active @extend .root color $ui-active-color - transform rotate(-72deg) + .icon + transform rotate(-72deg) +.icon + transition transform 0.15s + +.tooltip + tooltip() + position fixed + top 45px + right 65px + padding 5px + opacity 0 diff --git a/browser/main/TopBar/TopBar.styl b/browser/main/TopBar/TopBar.styl index ae6a18e9..f4665dce 100644 --- a/browser/main/TopBar/TopBar.styl +++ b/browser/main/TopBar/TopBar.styl @@ -88,19 +88,17 @@ $control-height = 34px padding 0 &:active border-color $ui-button--active-backgroundColor - &:hover .left-control-newPostButton-tooltip - display block + &:hover .control-newPostButton-tooltip + opacity 1 .control-newPostButton-tooltip + tooltip() position fixed - line-height 1.4 - background-color $ui-tooltip-backgroundColor - color $ui-tooltip-text-color - font-size 10px - margin-left -25px - margin-top 5px - padding 5px - z-index 1 - border-radius 5px - display none pointer-events none + top 45px + left 385px + z-index 10 + padding 5px + line-height normal + opacity 0 + transition 0.1s diff --git a/browser/main/modals/PreferencesModal/StorageItem.js b/browser/main/modals/PreferencesModal/StorageItem.js index 9744e6c9..374c9218 100644 --- a/browser/main/modals/PreferencesModal/StorageItem.js +++ b/browser/main/modals/PreferencesModal/StorageItem.js @@ -313,16 +313,25 @@ class StorageItem extends React.Component { onClick={(e) => this.handleNewFolderButtonClick(e)} > + Add Folder diff --git a/browser/main/modals/PreferencesModal/StorageItem.styl b/browser/main/modals/PreferencesModal/StorageItem.styl index 48184101..0c8aaf55 100644 --- a/browser/main/modals/PreferencesModal/StorageItem.styl +++ b/browser/main/modals/PreferencesModal/StorageItem.styl @@ -47,8 +47,21 @@ border-radius 2px border $ui-border margin-right 5px + position relative &:last-child margin-right 0 + &:hover + .header-control-button-tooltip + opacity 1 + +.header-control-button-tooltip + tooltip() + position absolute + opacity 0 + padding 5px + top 25px + z-index 10 + white-space nowrap .folderList-item height 35px diff --git a/browser/styles/index.styl b/browser/styles/index.styl index 14d50946..30bf3d48 100644 --- a/browser/styles/index.styl +++ b/browser/styles/index.styl @@ -29,6 +29,15 @@ $ui-tooltip-text-color = white $ui-tooltip-backgroundColor = alpha(#444, 70%) $ui-tooltip-button-backgroundColor = #D1D1D1 $ui-tooltip-button--hover-backgroundColor = lighten(#D1D1D1, 30%) +$ui-tooltip-font-size = 12px + +tooltip() + background-color $ui-tooltip-backgroundColor = alpha(#444, 70%) + color $ui-tooltip-text-color = white + font-size $ui-tooltip-font-size + pointer-events none + transition 0.1s + // UI Input $ui-input--focus-borderColor = #369DCD