exclude tooltip

TargetProcess · Dec 20, 2014 · da180db · da180db
1 parent 5fd85b5
commit da180db
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 42 deletions.
diff --git a/less/tooltip.less b/less/tooltip.less
@@ -8,6 +8,10 @@
         left: 0;
         max-width: 300px;
         z-index: 900;
+
+        display: flex;
+        align-items: stretch;
+
         font-family: @fontFamily;
         font-size: 11px;
         background: @bgColor;
@@ -21,14 +25,27 @@
         }
 
         &__exclude {
-            padding: 0 15px;
-            line-height: 26px;
-            border-top: 1px solid #dde2e7;
+            border-right: 1px solid #dde2e7;
             color: #65717f;
             cursor: pointer;
+            min-height: 86px;
+            width: 26px;position: relative;
+
+            &__wrap{
+                line-height: 26px;
+                padding: 0 15px;
+                transform:rotate(-90deg) translate(-50%, 0) ;
+                transform-origin: 0 0 ;
+                height: 100%;
+                white-space: nowrap;
+                position: absolute;
+                top: 50%;
+                left: 0;
+                box-sizing: border-box;
+            }
 
-            &:hover {
-                background: linear-gradient(to bottom, rgba(235, 238, 241, 0.9) 0%, rgba(255, 255, 255, 0) 100%);
+            &:hover{
+                background: linear-gradient(to right, rgba(235, 238, 241, 0.9) 0%, rgba(255, 255, 255, 0) 100%);
             }
 
             .tau-icon-close-gray {

diff --git a/plugins/tooltip.js b/plugins/tooltip.js
@@ -27,7 +27,11 @@
         return {
             template: [
                 '<div class="i-role-content graphical-report__tooltip__content"></div>',
-                '<div class="i-role-exclude graphical-report__tooltip__exclude"><span class="tau-icon-close-gray"></span>Exclude</div>',
+                '<div class="i-role-exclude graphical-report__tooltip__exclude">',
+                    '<div class="graphical-report__tooltip__exclude__wrap">',
+                        '<span class="tau-icon-close-gray"></span>Exclude',
+                    '</div>',
+                '</div>'
             ].join(''),
             itemTemplate: [
                 '<div class="graphical-report__tooltip__list__item">',

diff --git a/prototype/tooltip.html b/prototype/tooltip.html
@@ -32,41 +32,7 @@
 </head>
 <body>
 <div id="template" class="tooltip">
-    <div class="tooltip__content">
-        <div class="tooltip__list">
-            <div class="tooltip__list__item">
-                <div class="tooltip__list__elem">Effort</div>
-                <div class="tooltip__list__elem">
-                    44<span class="tooltip__gray-text">pt</span>
-                </div>
-            </div>
-            <div class="tooltip__list__item">
-                <div class="tooltip__list__elem">Project</div>
-                <div class="tooltip__list__elem">TP3
-                </div>
-            </div>
-            <div class="tooltip__list__item">
-                <div class="tooltip__list__elem">Cycle Time</div>
-                <div class="tooltip__list__elem">
-                    12<span class="tooltip__gray-text">d</span>
-                </div>
-            </div>
-            <div class="tooltip__list__item">
-                <div class="tooltip__list__elem">Entity type</div>
-                <div class="tooltip__list__elem">User Story
-                </div>
-            </div>
-            <div class="tooltip__list__item">
-                <div class="tooltip__list__elem">Time spent</div>
-                <div class="tooltip__list__elem">
-                    34<span class="tooltip__gray-text">h</span>
-                </div>
-            </div>
-        </div>
-    </div>
-    <div class="tooltip__exclude">
-        <span class="tau-icon-close-gray"></span>Exclude
-    </div>
+    <div class="i-role-content graphical-report__tooltip__content"><div class="graphical-report__tooltip__list__item"><div class="graphical-report__tooltip__list__elem">type</div><div class="graphical-report__tooltip__list__elem">sin</div></div></div><div class="i-role-exclude graphical-report__tooltip__exclude"><div class="i-role-exclude graphical-report__tooltip__exclude__wrap"><span class="tau-icon-close-gray"></span>Exclude</div></div>
 </div>
 <a id="tooltipTarget">show tooltip</a>
 
@@ -153,7 +119,7 @@
         }());
     }
     System.baseURL = location.pathname.replace(/(.+)(prototype\/\w+\.html)/, '$1src/');
-    System.import('api/tooltip').then(function(m) {
+    System.import('api/balloon').then(function(m) {
         var s = document.getElementById('tooltipTarget');
         var dragger = new DragAndReset(s);
         var tip = new m.Tooltip(document.getElementById('template').innerHTML, {place: 'top', auto: 1, spacing: 10});