Commit 7487ff51930895ff1d6f6e7864daf68c8372a118
1 parent
f41c4ef0
css export menu
Showing
1 changed file
with
24 additions
and
15 deletions
datalets/base-datalet/base-datalet.html
| @@ -64,6 +64,7 @@ Example : | @@ -64,6 +64,7 @@ Example : | ||
| 64 | text-decoration: underline; | 64 | text-decoration: underline; |
| 65 | } | 65 | } |
| 66 | #base_datalet_container { | 66 | #base_datalet_container { |
| 67 | + position: relative; | ||
| 67 | font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; | 68 | font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; |
| 68 | padding-top: 2px; | 69 | padding-top: 2px; |
| 69 | border-top: 2px solid #B6B6B6; | 70 | border-top: 2px solid #B6B6B6; |
| @@ -103,41 +104,48 @@ Example : | @@ -103,41 +104,48 @@ Example : | ||
| 103 | /*EXPORT*/ | 104 | /*EXPORT*/ |
| 104 | .export | 105 | .export |
| 105 | { | 106 | { |
| 106 | - cursor: pointer; | ||
| 107 | - background-image:url("./static/images/more_horiz_grey600_36x36.png"); | ||
| 108 | - background-repeat: no-repeat; | ||
| 109 | position: absolute; | 107 | position: absolute; |
| 110 | - padding: 31px; | ||
| 111 | - right: 5px; | ||
| 112 | - bottom: 70px; | 108 | + right: 0px; |
| 109 | + top: 0px; | ||
| 110 | + --paper-icon-button-ink-color: #2196F3; | ||
| 111 | + padding: 4px; | ||
| 112 | + } | ||
| 113 | + | ||
| 114 | + .export:hover { | ||
| 115 | + color: #2196F3; | ||
| 113 | } | 116 | } |
| 114 | 117 | ||
| 115 | .highcharts-contextmenu | 118 | .highcharts-contextmenu |
| 116 | { | 119 | { |
| 117 | position: absolute; | 120 | position: absolute; |
| 118 | - right: 65px; | ||
| 119 | - bottom: 43px; | ||
| 120 | - display: none; | 121 | + top: 4px; |
| 122 | + right: 40px; | ||
| 123 | + font-size: small; | ||
| 124 | + font-size: small; | ||
| 121 | border: solid 1px #000000; | 125 | border: solid 1px #000000; |
| 126 | + | ||
| 127 | + display: none; | ||
| 122 | } | 128 | } |
| 123 | 129 | ||
| 124 | .highcharts-contextmenu-container | 130 | .highcharts-contextmenu-container |
| 125 | { | 131 | { |
| 126 | - background: rgb(255, 255, 255); | 132 | + /*background: rgb(255, 255, 255);*/ |
| 133 | + /*background-color: #E0E0E0;*/ | ||
| 127 | } | 134 | } |
| 128 | 135 | ||
| 129 | .highcharts-contextmenu-container div | 136 | .highcharts-contextmenu-container div |
| 130 | { | 137 | { |
| 131 | cursor: pointer; | 138 | cursor: pointer; |
| 132 | - padding: 0px 10px; | ||
| 133 | - color: rgb(48, 48, 48); | 139 | + padding: 0px 4px; |
| 140 | + /*color: rgb(48, 48, 48);*/ | ||
| 134 | font-size: 11px; | 141 | font-size: 11px; |
| 135 | - background: none; | 142 | + line-height: 15px; |
| 143 | + /*background: none;*/ | ||
| 136 | } | 144 | } |
| 137 | 145 | ||
| 138 | .highcharts-contextmenu-container div:hover | 146 | .highcharts-contextmenu-container div:hover |
| 139 | { | 147 | { |
| 140 | - background: #cccccc; | 148 | + background: #00BCD4; |
| 141 | } | 149 | } |
| 142 | /*EXPORT*/ | 150 | /*EXPORT*/ |
| 143 | </style> | 151 | </style> |
| @@ -162,7 +170,8 @@ Example : | @@ -162,7 +170,8 @@ Example : | ||
| 162 | </div> | 170 | </div> |
| 163 | 171 | ||
| 164 | <div id="export"> | 172 | <div id="export"> |
| 165 | - <div class="export" on-click="showHideExportMenu"></div> | 173 | + <!--<div class="export" on-click="showHideExportMenu"></div>--> |
| 174 | + <paper-icon-button class="export" on-click="showHideExportMenu" icon="more-horiz"></paper-icon-button> | ||
| 166 | <div class="highcharts-contextmenu" id="highcharts-contextmenu"> | 175 | <div class="highcharts-contextmenu" id="highcharts-contextmenu"> |
| 167 | <div class="highcharts-contextmenu-container"> | 176 | <div class="highcharts-contextmenu-container"> |
| 168 | <div id="export_html" on-click="exportToHTML">Export to HTML</div> | 177 | <div id="export_html" on-click="exportToHTML">Export to HTML</div> |