Skip to content

Commit

Permalink
Merge pull request #505 from stellarwp/feature/upload-custom-svg
Browse files Browse the repository at this point in the history 
Upload custom SVGs
  • Loading branch information
@kadencewp
kadencewp authored Jun 26, 2024
2 parents 51fd6a5 + a08622f commit 93842de
Show file tree
Hide file tree
Showing 7 changed files with 846 additions and 269 deletions.
Empty file added .gitmodules
View file
Empty file.
13 changes: 12 additions & 1 deletion includes/class-kadence-blocks-svg.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ class Kadence_Blocks_Svg_Render {
* @var null
*/
private static $all_icons = null;

/**
* Instance Control
*/
Expand Down Expand Up @@ -134,6 +134,17 @@ public static function render( $name, $fill = 'currentColor', $stroke_width = fa
if ( 'fa_facebook' === $name ) {
$name = 'fa_facebook-n';
}

// Custom SVGs
$is_custom_svg = strpos($name, 'kb-custom-') === 0;
if ( $is_custom_svg && !isset( self::$all_icons[ $name ] ) ) {
$custom_post = get_post( str_replace('kb-custom-', '', $name) );

if ( ! empty( $custom_post ) && ! is_wp_error( $custom_post ) && 'kadence_custom_svg' === $custom_post->post_type && 'publish' === $custom_post->post_status ) {
self::$all_icons[ $name ] = json_decode( $custom_post->post_content, true );
}
}

if ( ! empty( self::$all_icons[ $name ] ) ) {
$icon = self::$all_icons[ $name ];
$vb = ( ! empty( $icon['vB'] ) ? $icon['vB'] : '0 0 24 24' );
Expand Down
223 changes: 179 additions & 44 deletions src/packages/components/src/icon-picker/editor.scss
View file
Original file line number Diff line number Diff line change
@@ -1,73 +1,92 @@
.kadence-icon-picker {
margin-bottom: 24px;
}

.kadence-icon-picker-selection {
display: block;
}

.kadence-icon-picker-search {
position: fixed;
z-index: 999;
background-color: #fff;
padding: 10px 10px 5px 10px;
width: 350px;
border-bottom:1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
}

.kadence-icon-picker-content.has-search {
padding-top: 91px;
padding-top: 91px;
}

.kadence-icon-picker-container {
min-width: 350px;
height: 50vh;
max-height: 400px;
}

.kadence-icon-grid-wrap {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr) );
gap: 2px;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr) );
gap: 2px;
}

.kadence-icon-picker-link {
display: flex;
align-items: center;
justify-content: center;
align-items: center;
justify-content: center;
background: #f5f5f5;
color: #424242;
border: 0;
padding: 8px;
padding: 8px;
min-height: 60px;
min-width: 60px;
margin: 0;
font-size: 24px;
margin: 0;
font-size: 24px;
box-shadow: none;
text-align: center;

&:hover {
background: #e5e5e5;
cursor: pointer;
}

> * {
transform: scale(1);
transition: transform .25s;
transform-origin: center;
}

&:hover > * {
transform: scale(1.3);
}

svg {
width: 1em;
height: 1em;
}

&.add-custom-svg {
background: #FFF;
border: 2px dashed #f5f5f5;
color: #f5f5f5;
}
}

.kadence-icon-picker-link.kadence-icon-picker-selection-toggle {
padding-right: 40px;
padding-right: 40px;
padding-left: 12px;
position: relative;
background: white;
width: 100%;
justify-content: flex-start;
border: 1px solid var(--kb-border-color, #859CB6 );
position: relative;
background: white;
width: 100%;
justify-content: flex-start;
border: 1px solid var(--kb-border-color, #859CB6);

.kadence-icon-picker-selection-value {
display: flex;
transform: scale(1) rotate(0) !important;
}

.kadence-icon-picker-selection-arrow {
position: absolute;
top: 0;
Expand All @@ -80,65 +99,181 @@
justify-content: center;
transform: scale(1) rotate(0) !important;
transition: background .25s;
border-left: 1px solid var(--kb-border-color, #859CB6 );
border-left: 1px solid var(--kb-border-color, #859CB6);
}

&:hover .kadence-icon-picker-selection-arrow {
background: #EBEFF3;
}
}

.kadence-icon-picker-link.kadence-icon-picker-selection-toggle .kadence-icon-picker-selection-value.kadence-icon-picker-placeholder {
font-size: 14px;
color:#6280A1;
font-size: 14px;
color: #6280A1;
}

.kadence-icon-picker-toggle-wrap {
display: block;
width: 100%;
position: relative;
display: block;
width: 100%;
position: relative;
}

.kadence-icon-picker-toggle-wrap .kadence-icon-picker-clear {
position: absolute;
top: 50%;
right: 40px;
transform: translate(0px, -50%);
border: 0;
padding: 0;
background: #EBEFF3;
display:flex;
position: absolute;
top: 50%;
right: 40px;
transform: translate(0px, -50%);
border: 0;
padding: 0;
background: #EBEFF3;
display: flex;

&:hover {
background: #D2DAE4;
cursor: pointer;
}
}

.kadence-icon-picker-pop-theme-dividers .kadence-icon-picker-content {
padding: 12px;
padding: 12px;
}

.kadence-icon-picker-pop-theme-dividers .kadence-icon-grid-wrap {
grid-template-columns: minmax(0,1fr);
gap:6px;
grid-template-columns: minmax(0, 1fr);
gap: 6px;
}

.kadence-icon-picker-pop-theme-dividers .kadence-icon-picker-link {
overflow:hidden;
min-height: 40px;
overflow: hidden;
min-height: 40px;
}

.kadence-icon-picker-pop-theme-dividers .kadence-icon-picker-link svg {
width: auto;
height: auto;
width: auto;
height: auto;
max-height: 30px;
transform: scale(1) !important;
transform: scale(1) !important;
}

.kadence-icon-picker-theme-dividers .kadence-icon-picker-link.kadence-icon-picker-selection-toggle .kadence-icon-picker-selection-value {
flex-grow: 1;
}

.kadence-icon-picker-theme-dividers .kadence-icon-picker-link.kadence-icon-picker-selection-toggle .kadence-icon-picker-selection-value svg {
max-width: calc(100% - 30px);
width: auto;
max-height: 30px;
height: auto;
width: auto;
max-height: 30px;
height: auto;
}

.kadence-icon-picker-pop-theme-dividers .kadence-icon-picker-link svg.kadence-row-divider-top {
transform: rotate(180deg) !important;
transform: rotate(180deg) !important;
}

.kadence-icon-picker-theme-dividers .kadence-icon-picker-selection-value svg.kadence-row-divider-top {
transform: rotate(180deg) !important;
}

.upload-svg-modal {
.modal-body {
padding-left: 32px;
padding-right: 32px;
}

.security-notice {
border: 1px solid #AD9D08;
background-color: #FDF9D3;
color: #000;
padding: 10px 20px;
border-radius: 5px;
margin-bottom: 25px;

h4 {
margin-bottom: 5px;
}

p {
margin: 0;
}
}

.drag-drop-container {
text-align: center;
margin-bottom: 25px;

.drag-drop-target {
border: 4px dashed #f5f5f5;
padding: 20px 15px 15px 15px;
}
}

.paste-container {
text-align: center;
margin-bottom: 25px;

}

.footer {
display: flex;
justify-content: space-between;
border-top: 1px solid #e0e0e0;
padding: 10px 20px;
}

.components-modal__content{
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
}

.error-message{
text-align: center;
padding: 15px;
font-size: 15px;
}
}

.kb-custom-svg {
position: relative;

.custom-svg-delete {
position: absolute;
top: -10px;
right: 0;
background-color: #ff0000;
border-radius: 10px;
width: 20px;
height: 20px;
display: none;
z-index: 2;

svg {
display: none;
fill: #FFF;
}
}

.custom-svg-delete:hover {
display: block;
cursor: pointer;

svg {
display: block !important;
}
}

.kadence-icon-picker-link {

}

}
.kadence-icon-picker-theme-dividers .kadence-icon-picker-selection-value svg.kadence-row-divider-top {
transform: rotate(180deg) !important;

.kb-custom-svg:hover {
.custom-svg-delete {
display: block !important;
}

svg {
display: block !important;
}
}
Loading

0 comments on commit 93842de

Please sign in to comment.