Added tooltip component

kreta · Apr 30, 2015 · 4953424 · 4953424
1 parent 0a451e6
commit 4953424
Show file tree

Hide file tree

Showing 5 changed files with 96 additions and 28 deletions.
diff --git a/src/Kreta/Bundle/WebBundle/Resources/public/js/app.js b/src/Kreta/Bundle/WebBundle/Resources/public/js/app.js
@@ -11,6 +11,7 @@ import {HeaderView} from 'views/layout/mainMenu';
 import {MainContentView} from 'views/layout/mainContent';
 import {LeftAsideView} from 'views/layout/leftAside';
 import {RightAsideView} from 'views/layout/rightAside';
+import {TooltipView} from 'views/component/tooltip';
 import {Profile} from 'models/profile'
 import {Router} from 'router';
 import {Config} from 'config';
@@ -45,6 +46,8 @@ $(() => {
   App.router = new Router();
   new HeaderView();
 
+  new TooltipView();
+
   App.views.main = new MainContentView();
 
   Backbone.history.start({pushState: true});

diff --git a/src/Kreta/Bundle/WebBundle/Resources/public/js/views/component/tooltip.js b/src/Kreta/Bundle/WebBundle/Resources/public/js/views/component/tooltip.js
@@ -0,0 +1,28 @@
+/*
+ * This file belongs to Kreta.
+ * The source code of application includes a LICENSE file
+ * with all information about license.
+ *
+ * @author benatespina <benatespina@gmail.com>
+ * @author gorkalaucirica <gorka.lauzirika@gmail.com>
+ */
+
+export class TooltipView {
+  constructor() {
+    $(document.body).on('mouseenter', '[data-tooltip-text]', this.onMouseEnter);
+    $(document.body).on('mouseleave', '[data-tooltip-text]', this.onMouseLeave);
+  }
+
+  onMouseEnter() {
+    if($(this).children('.tooltip').length == 0) {
+      var tooltipPos = $(this).attr('data-tooltip-position') ? $(this).attr('data-tooltip-position') : 'left';
+      $(this).append('<span class="tooltip ' + tooltipPos + '">' +  $(this).attr('data-tooltip-text') + '</span>');
+    }
+
+    $(this).find('.tooltip').addClass('visible');
+  }
+
+  onMouseLeave() {
+    $(this).find('.tooltip').removeClass('visible');
+  }
+}
diff --git a/src/Kreta/Bundle/WebBundle/Resources/public/scss/components/_tooltip.scss b/src/Kreta/Bundle/WebBundle/Resources/public/scss/components/_tooltip.scss
@@ -1,21 +1,70 @@
+$tooltip-arrow-height: 10px;
+
 [data-tooltip-text] {
   position: relative;
 }
 
 .tooltip {
-  display: none;
-  position: absolute;
-  bottom: -30px;
-  width: 50px;
   background: $main-black;
+  border-radius: 3px;
   color: $white;
-  font-size: .7em;
-  padding: .3em;
-  top: -4px;
-  left: -65px;
+  font-size: 12px;
   height: 20px;
+  margin-top: -10px;
+  padding: .3em .6em;
+  position: absolute;
+  top: 50%;
+  transition-duration: .5s;
+  opacity: 0;
+  visibility: hidden;
+  white-space: nowrap;
 
   &.visible {
-    display: block;
+    visibility: visible;
+    opacity: 1;
+  }
+
+  &:after {
+    content: " ";
+    height: 0;
+    width: 0;
+    position: absolute;
+    pointer-events: none;
+    border: solid transparent;
+    border-color: rgba($main-black, 0);
+    border-width: $tooltip-arrow-height / 2;
+  }
+
+  //Position modifiers
+  &.left {
+    right: 100%;
+
+    &:after {
+      top: 50%;
+      left: 100%;
+
+      border-left-color: $main-black;
+      border-width: $tooltip-arrow-height / 2;
+      margin-top: -$tooltip-arrow-height / 2;
+    }
+
+    &.visible {
+      right: calc(100% + 10px);
+    }
+  }
+
+  &.right {
+    left: 100%;
+
+    &:after {
+      top: 50%;
+      right: 100%;
+      border-right-color: $main-black;
+      margin-top: -$tooltip-arrow-height / 2;
+    }
+
+    &.visible {
+      left: calc(100% + 10px);
+    }
   }
 }
diff --git a/src/Kreta/Bundle/WebBundle/Resources/views/Default/app.html.twig b/src/Kreta/Bundle/WebBundle/Resources/views/Default/app.html.twig
@@ -19,10 +19,14 @@
             <span class="kreta-notification-bubble">4</span>
         </a>
         {#<a href="/"><img src="{{ asset('images/icons/search.png') }}"></a>#}
-        <a href="/issue/new"><img src="{{ asset('images/icons/new.png') }}"></a>
+        <a href="/issue/new" data-tooltip-text="Create issue" data-tooltip-position="right">
+            <img src="{{ asset('images/icons/new.png') }}">
+        </a>
         {#<a href="/"><img src="{{ asset('images/icons/dashboard.png') }}"></a>
         <a href="/"><img src="{{ asset('images/icons/lists.png') }}"></a>#}
-        <a href="/projects"><img src="{{ asset('images/icons/projects.png') }}"></a>
+        <a href="/projects" data-tooltip-text="Project list" data-tooltip-position="right">
+            <img src="{{ asset('images/icons/projects.png') }}">
+        </a>
     </div>
 </nav>
 <div id="kreta-left-aside"></div>
@@ -52,21 +56,5 @@
 <script src="{{ asset('vendor/backbone.controller/backbone.controller.js') }}"></script>
 <script data-main="/js/app" src="{{ asset('vendor/requirejs/require.js') }}"></script>
 
-<script>
-    (function($) {
-        $(document.body).on('mouseenter', '[data-tooltip-text]', function() {
-            if($(this).children('.tooltip').length == 0) {
-                $(this).append('<span class="tooltip bottom">' + $(this).attr('data-tooltip-text') + '</span>');
-            }
-
-            $(this).find('.tooltip').addClass('visible');
-        });
-
-        $(document.body).on('mouseleave', '[data-tooltip-text]', function() {
-            $(this).find('.tooltip').removeClass('visible');
-        });
-
-    })(jQuery);
-</script>
 </body>
 </html>
diff --git a/web/app_dev.php b/web/app_dev.php
@@ -19,7 +19,7 @@
 
 if (isset($_SERVER['HTTP_CLIENT_IP'])
     || isset($_SERVER['HTTP_X_FORWARDED_FOR'])
-    || !in_array(@$_SERVER['REMOTE_ADDR'], array('127.0.0.1', '192.168.10.1'))
+    || !in_array(@$_SERVER['REMOTE_ADDR'], array('127.0.0.1', '192.168.10.1', '::1'))
 ) {
     header('HTTP/1.0 403 Forbidden');
     exit('You are not allowed to access this file from '.@$_SERVER['REMOTE_ADDR'].'. Check '.basename(__FILE__).' for more information.');