Skip to content

Commit f855ece

Browse files
aatanasovdevaatanasovdev
committed
Add icons
1 parent 5c21eb1 commit f855ece

File tree

9 files changed

+90
-16
lines changed

9 files changed

+90
-16
lines changed

‎css/cloudinary.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/front-overlay.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/images/image_layer.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎css/images/text_layer.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎css/images/transformation_edit.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎php/media/class-global-transformations.php‎

Lines changed: 45 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -658,28 +658,59 @@ public function transformations_column_value( $column_name, $attachment_id ) {
658658

659659
$item = $this->media->plugin->get_component( 'assets' )->get_asset( $attachment_id, 'dataset' );
660660
if ( ! empty( $item['data']['public_id'] ) ) {
661-
$text = __( 'Add transformation effects', 'cloudinary' );
661+
$text = __( 'Add effects', 'cloudinary' );
662662
$transformations = Relate::get_transformations( $attachment_id, true );
663663
$text_overlay = Relate::get_overlay( $attachment_id, 'text_overlay' );
664664
$image_overlay = Relate::get_overlay( $attachment_id, 'image_overlay' );
665-
666-
if ( ! empty( $transformations ) ) {
667-
$text = $transformations;
668-
669-
if ( ! empty( $text_overlay ) ) {
670-
$text .= '/' . $text_overlay;
671-
}
672-
if ( ! empty( $image_overlay ) ) {
673-
$text .= '/' . $image_overlay;
674-
}
675-
}
676-
$args = array(
665+
$args = array(
677666
'page' => 'cloudinary',
678667
'section' => 'edit-asset',
679668
'asset' => $attachment_id,
680669
);
670+
$link = add_query_arg( $args, 'admin.php' );
671+
672+
if ( ! empty( $transformations ) || ! empty( $text_overlay ) || ! empty( $image_overlay ) ) {
673+
$text = __( 'Edit effects', 'cloudinary' );
674+
}
681675
?>
682-
<a href="<?php echo esc_url( add_query_arg( $args, 'admin.php' ) ); ?>" data-transformation-item="<?php echo esc_attr( wp_json_encode( $item ) ); ?>"><?php echo esc_html( $text ); ?></a>
676+
<a href="<?php echo esc_url( $link ); ?>" class="cld_transformations__icons">
677+
<span class="cld_transformations__icon
678+
<?php
679+
if ( ! empty( $transformations ) ) {
680+
echo 'cld_transformations__icon--active';}
681+
?>
682+
">
683+
<svg viewBox="0 0 13 15" fill="none" xmlns="http://www.w3.org/2000/svg">
684+
<path d="M1.23333 14.1C0.888889 14.1 0.597222 13.9806 0.358333 13.7417C0.119444 13.5028 0 13.2111 0 12.8667C0 12.5222 0.119444 12.2306 0.358333 11.9917C0.597222 11.7528 0.888889 11.6333 1.23333 11.6333H11.7667C12.1111 11.6333 12.4028 11.7528 12.6417 11.9917C12.8806 12.2306 13 12.5222 13 12.8667C13 13.2111 12.8806 13.5028 12.6417 13.7417C12.4028 13.9806 12.1111 14.1 11.7667 14.1H1.23333ZM3 9.33333C2.73333 9.33333 2.54167 9.25278 2.425 9.09167C2.30833 8.93056 2.3 8.72778 2.4 8.48333L5.51667 0.683333C5.59444 0.494444 5.72778 0.333333 5.91667 0.2C6.10556 0.0666667 6.30556 0 6.51667 0C6.72778 0 6.92778 0.0666667 7.11667 0.2C7.30556 0.333333 7.43889 0.494444 7.51667 0.683333L10.6 8.46667C10.7 8.71111 10.6944 8.91667 10.5833 9.08333C10.4722 9.25 10.2778 9.33333 10 9.33333C9.87778 9.33333 9.75833 9.29444 9.64167 9.21667C9.525 9.13889 9.44445 9.03889 9.4 8.91667L8.61667 6.88333H4.36667L3.58333 8.93333C3.53889 9.04444 3.46389 9.13889 3.35833 9.21667C3.25278 9.29444 3.13333 9.33333 3 9.33333ZM4.78333 5.76667H8.2L6.53333 1.33333H6.46667L4.78333 5.76667Z" fill="currentColor"/>
685+
</svg>
686+
</span>
687+
688+
<span class="cld_transformations__icon
689+
<?php
690+
if ( ! empty( $text_overlay ) ) {
691+
echo 'cld_transformations__icon--active';}
692+
?>
693+
">
694+
<svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
695+
<path d="M10.8667 9.86667V3.83333H4.83333V2.7H10.8667C11.1778 2.7 11.4444 2.81111 11.6667 3.03333C11.8889 3.25556 12 3.52222 12 3.83333V9.86667H10.8667ZM11.4333 14.7C11.2667 14.7 11.1306 14.6472 11.025 14.5417C10.9194 14.4361 10.8667 14.3 10.8667 14.1333V12H3.83333C3.52222 12 3.25556 11.8889 3.03333 11.6667C2.81111 11.4444 2.7 11.1778 2.7 10.8667V3.83333H0.566667C0.4 3.83333 0.263889 3.77778 0.158333 3.66667C0.0527777 3.55556 0 3.42222 0 3.26667C0 3.1 0.0527777 2.96389 0.158333 2.85833C0.263889 2.75278 0.4 2.7 0.566667 2.7H2.7V0.566667C2.7 0.4 2.75556 0.263889 2.86667 0.158333C2.97778 0.0527777 3.11111 0 3.26667 0C3.43333 0 3.56944 0.0527777 3.675 0.158333C3.78056 0.263889 3.83333 0.4 3.83333 0.566667V10.8667H14.1333C14.3 10.8667 14.4361 10.9222 14.5417 11.0333C14.6472 11.1444 14.7 11.2778 14.7 11.4333C14.7 11.6 14.6472 11.7361 14.5417 11.8417C14.4361 11.9472 14.3 12 14.1333 12H12V14.1333C12 14.3 11.9444 14.4361 11.8333 14.5417C11.7222 14.6472 11.5889 14.7 11.4333 14.7Z" fill="currentColor"/>
696+
</svg>
697+
</span>
698+
699+
<span class="cld_transformations__icon
700+
<?php
701+
if ( ! empty( $image_overlay ) ) {
702+
echo 'cld_transformations__icon--active';}
703+
?>
704+
">
705+
<svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
706+
<path d="M13.7 8.47283C13.7 8.7795 13.587 9.04539 13.361 9.2705C13.1351 9.49572 12.8683 9.60833 12.5605 9.60833L5.22717 9.60833C4.9205 9.60833 4.65461 9.49572 4.4295 9.2705C4.20428 9.04539 4.09167 8.7795 4.09167 8.47283L4.09167 1.1395C4.09167 0.831722 4.20428 0.564889 4.4295 0.339C4.65461 0.113 4.9205 3.71033e-07 5.22717 3.57628e-07L12.5605 0C12.8683 -1.34534e-08 13.1351 0.112999 13.361 0.338999C13.587 0.564888 13.7 0.831722 13.7 1.1395V8.47283ZM12.5605 8.47283V1.1395L5.22717 1.1395L5.22717 8.47283L12.5605 8.47283ZM11.2262 11.6522L3.18333 11.6522C2.87556 11.6522 2.60872 11.5396 2.38283 11.3143C2.15683 11.0892 2.04383 10.8233 2.04383 10.5167L2.04383 2.47383C2.04383 2.31361 2.09944 2.17894 2.21067 2.06983C2.32189 1.96072 2.45794 1.90617 2.61883 1.90617C2.77972 1.90617 2.914 1.96072 3.02167 2.06983C3.12944 2.17894 3.18333 2.31361 3.18333 2.47383L3.18333 10.5167H11.2262C11.3864 10.5167 11.5211 10.5715 11.6302 10.6812C11.7393 10.7908 11.7938 10.9262 11.7938 11.0873C11.7938 11.2484 11.7393 11.3828 11.6302 11.4905C11.5211 11.5983 11.3864 11.6522 11.2262 11.6522ZM9.22617 13.7H1.1395C0.831722 13.7 0.56489 13.587 0.339001 13.361C0.113001 13.1351 3.71081e-07 12.8683 3.57628e-07 12.5605L0 4.47383C-7.00354e-09 4.31361 0.0548332 4.17894 0.1645 4.06983C0.274167 3.96072 0.410222 3.90617 0.572666 3.90617C0.735111 3.90617 0.870166 3.96072 0.977833 4.06983C1.08561 4.17894 1.1395 4.31361 1.1395 4.47383L1.1395 12.5605L9.22617 12.5605C9.38639 12.5605 9.52106 12.6153 9.63017 12.725C9.73928 12.8347 9.79383 12.9707 9.79383 13.1332C9.79383 13.2956 9.73928 13.4307 9.63017 13.5383C9.52106 13.6461 9.38639 13.7 9.22617 13.7Z" fill="currentColor"/>
707+
<path d="M9.17951 6.5152L8.35434 5.4027C8.30179 5.3417 8.23729 5.31053 8.16084 5.3092C8.0844 5.30787 8.02106 5.33787 7.97084 5.3992L7.13034 6.51853C7.07734 6.60209 7.07179 6.68631 7.11368 6.7712C7.15545 6.85609 7.2234 6.89853 7.31751 6.89853H11.7748C11.8635 6.89853 11.9301 6.85609 11.9747 6.7712C12.0192 6.68631 12.0151 6.60209 11.9622 6.51853L10.7668 4.93553C10.7155 4.87487 10.652 4.84453 10.5763 4.84453C10.5007 4.84453 10.4377 4.8752 10.3875 4.93653L9.17951 6.5152Z" fill="currentColor"/>
708+
</svg>
709+
</span>
710+
</a>
711+
712+
<a href="<?php echo esc_url( $link ); ?>" data-transformation-item="<?php echo esc_attr( wp_json_encode( $item ) ); ?>"><?php echo esc_html( $text ); ?></a>
713+
683714
<?php
684715
}
685716
}

‎src/css/_variables.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ $color-transformations-blue: #51a3ff;
2222
$color-transformations-yellow: #f2d864;
2323
$color-transformations-cyan: #54c8db;
2424
$color-transformations-background: #262c35;
25+
$color-transformations-asset: #333B4C;
2526

2627
/** Sizes */
2728
$content-width: 870px;

‎src/css/components/_brand.scss‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -151,3 +151,30 @@
151151
color: $color-blue;
152152
}
153153
}
154+
155+
.cld_transformations {
156+
&__icons {
157+
display: flex;
158+
gap: 20px;
159+
color: $color-transformations-asset;
160+
margin-block: 5px;
161+
162+
&:hover {
163+
color: $color-transformations-asset;
164+
}
165+
}
166+
167+
&__icon {
168+
opacity: 0.5;
169+
170+
&--active {
171+
color: $color-blue;
172+
opacity: 1;
173+
}
174+
175+
svg {
176+
width: 18px;
177+
height: 18px;
178+
}
179+
}
180+
}

‎src/css/front-overlay.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
.tippy-content{
2727
background-color: #333;
2828
min-width: 250px;
29+
max-width: 600px;
2930
width: auto;
3031
div{
3132
display: flex;
@@ -42,6 +43,10 @@
4243
width: 100%;
4344
text-align: right;
4445
}
46+
47+
span:not(:first-child) {
48+
word-break: break-all;
49+
}
4550
}
4651
}
4752

0 commit comments

Comments
 (0)