raggedstaff/openfoodnetwork
1
0
Fork 0
mirror of https://github.com/openfoodfoundation/openfoodnetwork synced 2026-02-28 01:53:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

create a new directive: question mark with tooltip

Browse Source 
- Display a rounded blue question mark icon
 - Show (hide) on click a blue tooltip on top of the question mark icon
This commit is contained in:
Jean-Baptiste Bellet
2021-02-12 17:14:00 +01:00
parent 7442d06bed
commit 4be2b42fe1
6 changed files with 58 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
app/assets/javascripts/darkswarm/directives/question_mark_tooltip.js.coffee Normal file
View File

@@ -0,0 +1,17 @@
Darkswarm.directive "questionMarkWithTooltip", ($tooltip)->
# We use the $tooltip service from Angular foundation to give us boilerplate
# Subsequently we patch the scope, template and restrictions
tooltip = $tooltip 'questionMarkWithTooltip', 'questionMarkWithTooltip', 'click'
tooltip.scope =
variant: "="
tooltip.templateUrl = "question_mark_with_tooltip_icon.html"
tooltip.replace = true
tooltip.restrict = 'E'
tooltip
# This is automatically referenced via naming convention in $tooltip
Darkswarm.directive 'questionMarkWithTooltipPopup', ->
restrict: 'EA'
replace: true
templateUrl: 'question_mark_with_tooltip.html'
scope: false

8
app/assets/javascripts/templates/question_mark_with_tooltip.html.haml Normal file
View File

@@ -0,0 +1,8 @@
.joyride-tip-guide.question-mark-tooltip{ng: {class: "{ in: tt_isOpen, fade: tt_animation }", show: "tt_isOpen"}}
.background{ng: {click: "tt_isOpen = false"}}
.joyride-content-wrapper
This is the unit price of this item.
%br/
It allows you to compare the price of products across varying sizes and weights.
%span.joyride-nub.bottom

1
app/assets/javascripts/templates/question_mark_with_tooltip_icon.html.haml Normal file
View File

@@ -0,0 +1 @@
%button.question-mark-icon{"ng-class" => "{open: tt_isOpen}", type: 'button'}

1
app/assets/stylesheets/darkswarm/branding.scss
View File

@@ -56,6 +56,7 @@ $grey-700: #555;
$grey-800: #333;
$tiny-blue: #80b2e1;
$dynamic-blue: #3d8dd1;
$teal-300: #80d3df;
$teal-400: #4cb5c5;

30
app/assets/stylesheets/darkswarm/question-mark-icon.scss
View File

@@ -15,4 +15,32 @@
font-weight: bold;
font-size: 1rem;
}
}
}
.joyride-tip-guide.question-mark-tooltip {
width: 16rem;
max-width: 65%;
// JS needs to be tweaked to adjust for left alignment - this is dynamic can't rewrite in CSS
margin-left: -7.4rem;
margin-top: 0.1rem;
background-color: transparent;
.joyride-content-wrapper {
background-color: $dynamic-blue;
padding: $padding-small;
border-radius: $radius-small;
color: $white;
width: 100%;
font-size: 0.8rem;
}
.joyride-nub.bottom {
// Need to rewrite all with !important as it's marked as !important in the original file
border-color: $dynamic-blue !important;
border-bottom-color: transparent !important;
border-left-color: transparent !important;
border-right-color: transparent !important;
left: 7.4rem;
z-index: -1;
}
}

2
app/assets/stylesheets/darkswarm/variables.scss
View File

@@ -43,3 +43,5 @@ $radius-medium: 0.5em;
$shop-sidebar-overlay: rgba(0, 0, 0, 0.5);
$transition-sidebar: 250ms ease-in-out 0s;
$padding-small: 0.5rem;