legend

TargetProcess · Jan 30, 2015 · 60ae5c0 · 60ae5c0
1 parent 21b7310
commit 60ae5c0
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 48 deletions.
diff --git a/less/legend.less b/less/legend.less
@@ -29,7 +29,7 @@
     }
 
     &__item {
-      padding: 11px 30px 10px 30px;
+      padding: 11px 20px 10px 40px;
       position: relative;
       font-size: 13px;
       cursor: pointer;
@@ -54,57 +54,61 @@
       background: transparent;
     }
 
-    &__guide-size {
-
+    &__guide {
       position: absolute;
-      top: 50%;
+      box-sizing: border-box;
+      width: 100%;
+      height: 100%;
       left: 50%;
+      top: 50%;
       transform: translate(-50%, -50%);
-      stroke: @default-color;
-      fill: @default-color;
+      border: 1px solid transparent;
+      border-radius: 50%;
 
+      &__wrap {
+        position: absolute;
+        top: 12px;
+        left: 10px;
+        width: 16px;
+        height: 16px;
+      }
+
+      &__guide--size {
+        stroke: @default-color;
+        fill: @default-color;
+
+      }
       &.color-definite {
         stroke: @color-definite;
         fill: @color-definite;
       }
-    }
-    &__guide {
-      width: 16px;
-      height: 16px;
-      box-sizing: border-box;
-      border-width: 1px;
-      border-style: solid;
-      border-radius: 50%;
-      position: absolute;
-      top: 12px;
-      left: 10px;
 
     }
 
-    &__table {
-      display: table;
-    }
-
-    &__row {
-      display: table-row;
-    }
-    &__cell {
-      display: table-cell;
-//      text-align: right;
-      padding: 10px 5px;
-      font-size: 13px;
-      height: 1em;
-      max-height: 1em;
-      vertical-align: middle;
-      position: relative;
-      min-width: 16px;
-
-      &:first-child {
-        padding-left: 0;
-        text-align: center;
-        vertical-align: middle;
-      }
-    }
+//    &__table {
+//      display: table;
+//    }
+
+//    &__row {
+//      display: table-row;
+//    }
+//    &__cell {
+//      display: table-cell;
+////      text-align: right;
+//      padding: 10px 5px;
+//      font-size: 13px;
+//      height: 1em;
+//      max-height: 1em;
+//      vertical-align: middle;
+//      position: relative;
+//      min-width: 16px;
+//
+//      &:first-child {
+//        padding-left: 0;
+//        text-align: center;
+//        vertical-align: middle;
+//      }
+//    }
   }
 }
 

diff --git a/plugins/legend.js b/plugins/legend.js
@@ -162,15 +162,14 @@
             _template: _.template('<div class="graphical-report__legend"><div class="graphical-report__legend__title"><%=name%></div><%=items%></div>'),
             _itemTemplate: _.template([
                 '<div data-value=\'<%=value%>\' class="graphical-report__legend__item graphical-report__legend__item-color <%=classDisabled%>">',
-                '<div class="graphical-report__legend__guide <%=color%>" ></div><%=label%>',
+                '<div class="graphical-report__legend__guide__wrap"><div class="graphical-report__legend__guide <%=color%>" ></div></div><%=label%>',
                 '</div>'
             ].join('')),
             _itemSizeTemplate: _.template([
-                '<div class="graphical-report__legend__row">',
-                '<div class="graphical-report__legend__cell" style="width: <%=diameter%>px">',
-                '<svg class="graphical-report__legend__guide-size  <%=className%>" style="width: <%=diameter%>px;height: <%=diameter%>px;"><circle cx="<%=radius%>" cy="<%=radius%>" class="graphical-report__dot" r="<%=radius%>"></circle></svg>',
-                '</div>',
-                '<div class="graphical-report__legend__cell"><%=value%></div>',
+                '<div class="graphical-report__legend__item">',
+                    '<div class="graphical-report__legend__guide__wrap">',
+                        '<svg class="graphical-report__legend__guide graphical-report__legend__guide--size  <%=className%>" style="width: <%=diameter%>px;height: <%=diameter%>px;"><circle cx="<%=radius%>" cy="<%=radius%>" class="graphical-report__dot" r="<%=radius%>"></circle></svg>',
+                    '</div><%=value%>',
                 '</div>'
             ].join('')),
             _renderColorLegend: function (configUnit, chart) {
@@ -254,7 +253,7 @@
                     }, this).reverse();
 
                 this._container.insertAdjacentHTML('beforeend', this._template({
-                    items: '<div class="graphical-report__legend__table">' + items.join('') + '</div>',
+                    items: items.join(''),
                     name: sizeScaleName
                 }));
             },