diff options
author | Clement Ho <ClemMakesApps@gmail.com> | 2017-08-17 11:50:20 -0500 |
---|---|---|
committer | Clement Ho <ClemMakesApps@gmail.com> | 2017-08-17 11:50:20 -0500 |
commit | adb7dfe7207f7e120dd4371f8008b4579c9e93f6 (patch) | |
tree | 8e8cc03babe84f98e40e01b97166e8cbd210c7a6 /app/assets | |
parent | d2fabcf87005f7cee0c72c74a25eced147958ea9 (diff) | |
download | gitlab-ce-adb7dfe7207f7e120dd4371f8008b4579c9e93f6.tar.gz |
[skip ci] use popover css but not js
Diffstat (limited to 'app/assets')
-rw-r--r-- | app/assets/javascripts/fly_out_nav.js | 19 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/feature_highlight.scss | 97 |
2 files changed, 76 insertions, 40 deletions
diff --git a/app/assets/javascripts/fly_out_nav.js b/app/assets/javascripts/fly_out_nav.js index 32cb42c8b10..08c162f8f0c 100644 --- a/app/assets/javascripts/fly_out_nav.js +++ b/app/assets/javascripts/fly_out_nav.js @@ -174,4 +174,23 @@ export default () => { }); document.addEventListener('mousemove', documentMouseMove); + + document.querySelector('.feature-highlight').addEventListener('mouseenter', (e) => { + console.log('hover'); + // debugger + const { top, left } = e.target.getBoundingClientRect(); + const popover = document.querySelector('.feature-highlight .popover'); + popover.style.top = `${top - 85}px`; + popover.style.left = `${left + 10}px`; + }); + + document.querySelector('.feature-highlight .popover-container').addEventListener('click', (e) => { + debugger + e.preventDefault(); + e.stopPropagation(); + }); + + document.querySelector('.feature-highlight .popover-container button').addEventListener('click', (e) => { + console.log('clicked') + }); }; diff --git a/app/assets/stylesheets/framework/feature_highlight.scss b/app/assets/stylesheets/framework/feature_highlight.scss index 4978dce26d2..3ff30461491 100644 --- a/app/assets/stylesheets/framework/feature_highlight.scss +++ b/app/assets/stylesheets/framework/feature_highlight.scss @@ -1,6 +1,6 @@ -.feature-highlight-container { - position: relative; -} +// .feature-highlight-container { +// position: relative; +// } .feature-highlight { margin-left: 16px; @@ -17,51 +17,68 @@ } } -.rich-tooltip-container { +.popover-container { display: none; - position: absolute; - top: -50px; - left: 0; - padding-left: 50px; - background-color: rgba(0,0,0, 0.1); + // background-color: rgba(0, 0, 0, 0.1); + width: 200px; + height: 30px; + margin-top: -13px; + cursor: default; } -.rich-tooltip.right-tooltip:before { - content: ''; - position: absolute; - left: 41px; - top: 50px; - width: 10px; - height: 10px; - background-color: white; +.feature-highlight .popover { + display: block; } -.rich-tooltip { - cursor: default; - background-color: $white-light; - box-shadow: rgba(0, 0, 0, 0.2) 0 5px 10px; - border-width: 1px; - border-style: solid; - border-color: rgba(0, 0, 0, 0.2); - border-radius: 6px; - max-width: 276px; +.feature-highlight:hover .popover-container { + display: block; +} - header { - padding: 8px 14px; - margin: 0; - border-bottom: 1px solid rgb(235, 235, 235); - border-radius: 5px 5px 0 0; - } +// .rich-tooltip-container { +// display: none; +// position: absolute; +// top: -50px; +// left: 0; +// padding-left: 50px; +// background-color: rgba(0,0,0, 0.1); +// } - section { - padding: 9px 14px; - } -} +// .rich-tooltip.right-tooltip:before { +// content: ''; +// position: absolute; +// left: 41px; +// top: 50px; +// width: 10px; +// height: 10px; +// background-color: white; +// } -// .feature-highlight-container:hover .rich-tooltip, -.feature-highlight-container:hover > .rich-tooltip-container { - display: block; -} +// .rich-tooltip { +// cursor: default; +// background-color: $white-light; +// box-shadow: rgba(0, 0, 0, 0.2) 0 5px 10px; +// border-width: 1px; +// border-style: solid; +// border-color: rgba(0, 0, 0, 0.2); +// border-radius: 6px; +// max-width: 276px; + +// header { +// padding: 8px 14px; +// margin: 0; +// border-bottom: 1px solid rgb(235, 235, 235); +// border-radius: 5px 5px 0 0; +// } + +// section { +// padding: 9px 14px; +// } +// } + +// // .feature-highlight-container:hover .rich-tooltip, +// .feature-highlight-container:hover > .rich-tooltip-container { +// display: block; +// } @include keyframes(pulse-highlight) { 0% { |