Skip to content

Commit a3ed9a1

Browse files
vytisbulkeviciusvytisbulkevicius
authored
release: fixes
- Improved chart actions icons - Updated WordPress core tested up to version
2 parents 39c3f40 + 6571b3d commit a3ed9a1

File tree

2 files changed

+91
-75
lines changed

2 files changed

+91
-75
lines changed

‎classes/Visualizer/Render/Library.php

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -258,11 +258,14 @@ private function _renderLibrary() {
258258
echo '<div class="visualizer-notfound">', esc_html__( 'No charts found', 'visualizer' ), '<p><h2><a href="javascript:;" class="add-new-h2 add-new-chart">', esc_html__( 'Add New', 'visualizer' ), '</a></h2></p></div>';
259259
echo '</div>';
260260
echo '<div class="visualizer-chart-footer visualizer-clearfix">';
261-
echo '<span class="visualizer-chart-action visualizer-nochart-delete"></span>';
262-
echo '<span class="visualizer-chart-action visualizer-nochart-clone"></span>';
263-
echo '<span class="visualizer-chart-action visualizer-nochart-edit"></span>';
264-
echo '<span class="visualizer-chart-action visualizer-nochart-export"></span>';
265-
echo '<span class="visualizer-chart-action visualizer-nochart-shortcode"></span>';
261+
echo '<div class="visualizer-action-group visualizer-nochart">';
262+
echo '<span class="visualizer-chart-action visualizer-nochart-delete"><span class="dashicons dashicons-trash"></span></span>';
263+
echo '<span class="visualizer-chart-action visualizer-nochart-shortcode"><span class="dashicons dashicons-shortcode"></span></span>';
264+
echo '<span class="visualizer-chart-action visualizer-nochart-image"><span class="dashicons dashicons-format-image"></span></span>';
265+
echo '<span class="visualizer-chart-action visualizer-nochart-export"><span class="dashicons dashicons-download"></span></span>';
266+
echo '<span class="visualizer-chart-action visualizer-nochart-clone"><span class="dashicons dashicons-admin-page"></span></span>';
267+
echo '<span class="visualizer-chart-action visualizer-nochart-edit"><span class="dashicons dashicons-admin-generic"></span></span>';
268+
echo '</div>';
266269
echo '</div>';
267270
echo '</div></div>';
268271
$this->_renderSidebar();
@@ -353,15 +356,16 @@ private function _renderChartBox( $placeholder_id, $chart_id, $with_filter = fal
353356
echo '</div>';
354357
}
355358
echo '<div class="visualizer-chart-footer visualizer-clearfix">';
356-
echo '<a class="visualizer-chart-action visualizer-chart-delete" href="', $delete_url, '" title="', esc_attr__( 'Delete', 'visualizer' ), '" onclick="return showNotice.warn();"></a>';
357-
echo '<a class="visualizer-chart-action visualizer-chart-clone" href="', $clone_url, '" title="', esc_attr__( 'Clone', 'visualizer' ), '"></a>';
358-
echo '<a class="visualizer-chart-action visualizer-chart-edit" href="javascript:;" title="', esc_attr__( 'Edit', 'visualizer' ), '" data-chart="', $chart_id, '"></a>';
359-
echo '<a class="visualizer-chart-action visualizer-chart-export" href="javascript:;" title="', esc_attr__( 'Export', 'visualizer' ), '" data-chart="', $export_link, '"></a>';
359+
echo '<div class="visualizer-action-group">';
360+
echo '<a class="visualizer-chart-action visualizer-chart-delete" href="', $delete_url, '" onclick="return showNotice.warn();"><span class="dashicons dashicons-trash"></span><span class="tooltip-text">' . esc_attr__( 'Delete', 'visualizer' ) . '</span></a>';
361+
echo '<a class="visualizer-chart-action visualizer-chart-shortcode" href="javascript:;" data-clipboard-text="', esc_attr( $shortcode ), '"><span class="dashicons dashicons-shortcode"></span><span class="tooltip-text">' . esc_attr__( 'Copy Shortcode', 'visualizer' ) . '</span></a>';
360362
if ( $this->can_chart_have_action( 'image', $chart_id ) ) {
361-
echo '<a class="visualizer-chart-action visualizer-chart-image" href="javascript:;" title="', esc_attr__( 'Download as image', 'visualizer' ), '" data-chart="visualizer-', $chart_id, '" data-chart-title="', $title, '"></a>';
363+
echo '<a class="visualizer-chart-action visualizer-chart-image" href="javascript:;" data-chart="visualizer-', $chart_id, '" data-chart-title="', $title, '"><span class="dashicons dashicons-format-image"></span><span class="tooltip-text">' . esc_attr__( 'Download PNG', 'visualizer' ) . '</span></a>';
362364
}
363-
echo '<a class="visualizer-chart-action visualizer-chart-shortcode" href="javascript:;" title="', esc_attr__( 'Click to copy shortcode', 'visualizer' ), '" data-clipboard-text="', esc_attr( $shortcode ), '"><span class="dashicons dashicons-admin-page"></span></a>';
364-
echo '<span>&nbsp;</span>';
365+
echo '<a class="visualizer-chart-action visualizer-chart-export" href="javascript:;" data-chart="', $export_link, '"><span class="dashicons dashicons-download"></span><span class="tooltip-text">' . esc_attr__( 'Export CSV', 'visualizer' ) . '</span></a>';
366+
echo '<a class="visualizer-chart-action visualizer-chart-clone" href="', $clone_url, '"><span class="dashicons dashicons-admin-page"></span><span class="tooltip-text">' . esc_attr__( 'Duplicate', 'visualizer' ) . '</span></a>';
367+
echo '<a class="visualizer-chart-action visualizer-chart-edit" href="javascript:;" data-chart="', $chart_id, '"><span class="dashicons dashicons-admin-generic"></span><span class="tooltip-text">' . esc_attr__( 'Edit', 'visualizer' ) . '</span></a>';
368+
echo '</div>';
365369
do_action( 'visualizer_chart_languages', $chart_id );
366370
echo '<hr><div class="visualizer-chart-status"><span title="' . __( 'Chart ID', 'visualizer' ) . '">(' . $chart_id . '):</span> <span class="visualizer-date" title="' . __( 'Last Updated', 'visualizer' ) . '">' . $chart_status['date'] . '</span><span class="visualizer-error"><i class="dashicons ' . $chart_status['icon'] . '" data-viz-error="' . esc_attr( str_replace( '"', "'", $chart_status['error'] ) ) . '" title="' . esc_attr( $chart_status['title'] ) . '"></i></span></div>';
367371
echo '</div>';

‎css/library.css

Lines changed: 75 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -93,56 +93,82 @@
9393
text-align: center;
9494
}
9595

96-
.visualizer-chart-action {
97-
display: block;
98-
float: right;
99-
width: 16px;
100-
height: 16px;
101-
margin: 2px 5px 0;
102-
background-image: url("../images/ui-icons.png");
103-
background-repeat: no-repeat;
96+
.visualizer-action-group{
97+
display: flex;
98+
flex-wrap: wrap;
99+
align-items: center;
100+
justify-content: flex-end;
104101
}
105102

106-
.visualizer-nochart-delete,
107-
.visualizer-chart-delete {
108-
background-position: -176px -96px;
109-
}
110-
111-
.visualizer-nochart-clone,
112-
.visualizer-chart-clone {
113-
background-position: -176px -128px;
103+
.visualizer-chart-action {
104+
position: relative;
105+
display: flex;
106+
align-items: center;
107+
justify-content: center;
108+
width: 40px;
109+
height: 40px;
110+
margin: 2px 0 0;
111+
border-radius: 100%;
112+
text-decoration: none;
113+
color: #3F3F3F;
114+
}
115+
116+
.visualizer-chart-action .tooltip-text {
117+
visibility: hidden;
118+
opacity: 0;
119+
background-color: #3F3F3F;
120+
color: #fff;
121+
text-align: center;
122+
padding: 5px 14px;
123+
position: absolute;
124+
border-radius: 2px;
125+
font-size: 12px;
126+
line-height: 14px;
127+
z-index: 1;
128+
white-space: nowrap;
129+
left: 50%;
130+
top: calc(100% + 9px);
131+
transform: translate(-50%, 0);
132+
transition: all .3s ease-in-out;
133+
}
134+
.visualizer-chart-action:focus {
135+
border: none;
136+
box-shadow: none;
114137
}
115-
116-
.visualizer-nochart-edit,
117-
.visualizer-chart-edit {
118-
background-position: -64px -112px;
138+
.visualizer-chart-action .tooltip-text::before {
139+
content: '';
140+
position: absolute;
141+
display: block;
142+
width: 0px;
143+
left: 50%;
144+
top: 0;
145+
border: 10px solid transparent;
146+
border-top: 0;
147+
border-bottom: 10px solid #3F3F3F;
148+
transform: translate(-50%, -8px);
149+
}
150+
.visualizer-chart-action:hover .tooltip-text {
151+
visibility: visible;
152+
opacity: 1;
153+
}
154+
.visualizer-chart-action .dashicons{
155+
width: 16px;
156+
height: 16px;
157+
font-size: 16px;
119158
}
120-
121-
.visualizer-nochart-export,
122-
.visualizer-chart-export {
123-
background-position: -46px -64px;
159+
.visualizer-action-group:not(.visualizer-nochart) .visualizer-chart-action:hover,
160+
.visualizer-action-group:not(.visualizer-nochart) .visualizer-chart-action:focus {
161+
color: #3F3F3F;
162+
background: #ffffff;
124163
}
125164

126-
.visualizer-nochart-shortcode,
127-
.visualizer-nochart-shortcode:focus,
128-
.visualizer-chart-shortcode,
129-
.visualizer-chart-shortcode:focus {
130-
float: left;
131-
background: none;
132-
text-decoration: none;
133-
box-shadow: none;
134-
}
135-
.visualizer-chart-shortcode:hover {
136-
color: #404040;
137-
}
138-
.visualizer-nochart-shortcode .dashicons-admin-page ,
139-
.visualizer-chart-shortcode .dashicons-admin-page {
140-
font-size: 16px;
165+
.visualizer-chart-action.visualizer-chart-delete,
166+
.visualizer-chart-action.visualizer-nochart-delete {
167+
margin-right: auto;
141168
}
142-
143-
.visualizer-nochart-image,
144-
.visualizer-chart-image {
145-
background-position: -206px -129px;
169+
.visualizer-action-group:not(.visualizer-nochart) .visualizer-chart-action.visualizer-chart-delete:hover,
170+
.visualizer-action-group:not(.visualizer-nochart) .visualizer-chart-action.visualizer-nochart-delete:hover {
171+
color: #DA1E28;
146172
}
147173

148174
.visualizer-nochart-clone,
@@ -162,26 +188,6 @@
162188
width: 100%;
163189
}
164190

165-
.visualizer-chart-shortcode {
166-
color: #404040;
167-
text-shadow: 0 1px 0 #fff;
168-
cursor: pointer;
169-
}
170-
171-
.visualizer-chart-shortcode::-moz-selection,
172-
.visualizer-chart-shortcode::-moz-selection {
173-
color: black;
174-
background-color: #a8d1ff;
175-
text-shadow: none;
176-
}
177-
178-
.visualizer-chart-shortcode::selection,
179-
.visualizer-chart-shortcode::-moz-selection {
180-
color: black;
181-
background-color: #a8d1ff;
182-
text-shadow: none;
183-
}
184-
185191
.visualizer-list-item {
186192
float: left;
187193
margin-right: 20px;
@@ -480,6 +486,12 @@ div#visualizer-types ul, div#visualizer-types form p {
480486
.visualizer-languages-list.only-pro:hover a:last-child {
481487
display: block;
482488
}
489+
.visualizer-action-left {
490+
float: left;
491+
}
492+
.visualizer-action-right {
493+
float: right;
494+
}
483495
@media (-webkit-min-device-pixel-ratio: 2) and (min-width: 1000px) and (max-width: 1600px) {
484496
#visualizer-sidebar.one-columns .visualizer-sidebar-box ul li:nth-child(+n+7) {
485497
display: none;

0 commit comments

Comments
 (0)