From 828788b769ba4b2c0fa709e7de08c1b6bdf7b557 Mon Sep 17 00:00:00 2001 From: Hans Schouten Date: Thu, 11 May 2023 17:21:42 +0200 Subject: [PATCH] Add remove image button --- dist/pagebuilder/app.css | 2 +- .../resources/assets/sass/pagebuilder.scss | 11 ++++ .../views/grapesjs/trait-manager.php | 57 ++++++++++++------- 3 files changed, 47 insertions(+), 23 deletions(-) diff --git a/dist/pagebuilder/app.css b/dist/pagebuilder/app.css index e177b1b..f55daec 100644 --- a/dist/pagebuilder/app.css +++ b/dist/pagebuilder/app.css @@ -1 +1 @@ -#gjs,body,html{height:100%!important;margin:0;overflow:hidden}*{-webkit-box-shadow:none!important;box-shadow:none!important}.form-control,.form-control:focus{color:#e1e1e1}.cursor-pointer{cursor:pointer}.gjs-editor{font-size:.9rem}.toast{opacity:1!important;border:none;right:15px;-webkit-box-shadow:none;box-shadow:none}.toast.toast-success{background:#2dc837}#phpb-loading{position:absolute;height:100%;width:100%;background-color:#fff;z-index:10000;-webkit-transition:opacity .3s,visibility .3s;transition:opacity .3s,visibility .3s}#phpb-loading.loaded{visibility:hidden;opacity:0}#phpb-loading .circle{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:150px;height:150px}#phpb-loading .circle .text{font-size:20px;margin:0 -30px;margin-top:20px;text-align:center;color:#0091d1}#phpb-loading .loader{width:calc(100% - 0px);height:calc(100% - 0px);border:8px solid #0091d1;border-top:8px solid #004a6c;border-radius:50%;-webkit-animation:rotate 5s linear infinite;animation:rotate 5s linear infinite}@-webkit-keyframes rotate{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes rotate{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.btn.focus,.btn:focus{-webkit-box-shadow:none;box-shadow:none}.gjs-cv-canvas{height:100%;top:0;width:calc(100% - 325px)}.gjs-toolbar{z-index:100!important}.gjs-pn-panel{padding:0}.gjs-pn-panel .gjs-pn-buttons{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.gjs-pn-commands,.gjs-pn-devices-c,.gjs-pn-options{display:none}.gjs-devices-c{padding:0}.gjs-one-bg{background-color:#313844;border-bottom:none;color:#c4c7ce}.gjs-four-color,.gjs-four-color-h:hover,.gjs-two-color{color:#e1e1e1}.gjs-pn-commands{width:100%;-webkit-box-shadow:none;box-shadow:none}::-webkit-scrollbar{width:7px;height:7px}::-webkit-scrollbar-track{background:#313844!important}::-webkit-scrollbar-thumb{background-color:#a5acb9!important;border-radius:3px}::-webkit-scrollbar-thumb:hover{background-color:#0091d1!important}.gjs-pn-views{top:40px}.gjs-pn-views .gjs-pn-btn{width:33.33%;margin-right:0;padding:16px 15px;border-radius:0;background:#3a3f4a;color:#e3e3e3;border-bottom:1px solid #3a3f4a;font-size:16px}.gjs-pn-views .gjs-pn-btn.gjs-pn-active{padding:15px;background-color:#515664;border-bottom-left-radius:unset;border-bottom-right-radius:unset;-webkit-box-shadow:none;box-shadow:none;color:#fff;border-bottom:3px solid #0091d1}.gjs-pn-options{right:0}.gjs-pn-views,.gjs-pn-views-container{left:0;-webkit-box-shadow:none;box-shadow:none;width:325px;padding-bottom:0;margin-bottom:0;margin-left:0;margin-right:0;padding-left:0;padding-right:0}.gjs-pn-views-container{padding-top:89px;background:#22272e;height:calc(100% - 40px);overflow:hidden}.gjs-pn-views-container>div:first-of-type{margin-top:44px}.gjs-pn-views-container>div{height:100%;overflow-y:auto}.gjs-pn-views-container>div>div{background:#22272e;border:none}.gjs-cv-canvas,.gjs-pn-devices-c{left:325px}.gjs-pn-panel #gjs-sm-caret{padding-right:0!important}.gjs-pn-panel .fa-caret-down{margin-right:5px!important}.gjs-pn-panel .fa-caret-right{margin-right:8px!important}.gjs-three-bg{background-color:#0091d1}.gjs-clm-tags #gjs-clm-checkbox,.gjs-clm-tags #gjs-clm-close{color:#fff}.gjs-field{border-radius:0;padding:2px}.gjs-field input,.gjs-field select,.gjs-field textarea{padding:5px}.gjs-field .gjs-d-s-arrow{border-top:4px solid #646464}#sidebar-header{position:absolute;-webkit-box-shadow:none;box-shadow:none;width:325px;padding-bottom:0;margin-bottom:0;margin-left:0;margin-right:0;padding-left:0;padding-right:0;background:#22272e;height:40px;z-index:100}#sidebar-header #language-selector{float:right}#sidebar-header #language-selector .dropdown-item.active,#sidebar-header #language-selector .dropdown-item:active{background:#22272e!important}#sidebar-header #language-selector .dropdown-menu.show{padding:0}#sidebar-header #language-selector .dropdown-toggle{margin-top:2px;color:#fff!important;background:none!important;border:none;-webkit-box-shadow:none;box-shadow:none;outline:none!important}#sidebar-header #language-selector .flag-icon{background-size:contain;background-position:50%;background-repeat:no-repeat;position:relative;display:inline-block;width:1.33333333em;height:12px;line-height:1em}#toggle-sidebar{position:absolute;left:0;top:0;z-index:100;color:#c4c7ce;-webkit-transition-duration:unset;transition-duration:unset}#block-search,#toggle-sidebar{background:#22272e;border-radius:0}#block-search{position:fixed;border-color:#3a3f4a;width:325px;margin-top:-44px}#block-search i.fa-search{position:absolute;top:14px;left:9px;font-size:15px;color:#515664}#block-search input{background:#181b1e;padding:22px 20px 22px 30px;border-radius:0;border:none}#block-search input::-webkit-input-placeholder{color:#515664}#block-search input::-moz-placeholder{color:#515664}#block-search input::-ms-input-placeholder{color:#515664}#block-search input::placeholder{color:#515664}.gjs-block{border:none;-webkit-box-shadow:none;box-shadow:none;padding-bottom:8px;margin:5px;width:calc(50% - 10px)}.gjs-block.fa{padding:8px}.gjs-block:hover{color:#0091d1!important}.gjs-block .block-thumb{height:70px;overflow:hidden;margin-bottom:5px;opacity:.8}.gjs-block .block-thumb img{width:100%}.gjs-blocks-c{background:#22272e;padding:4px}.gjs-block-categories{background:#22272e;padding-bottom:45px}.gjs-block-label{font-size:.8rem;height:100%;display:grid}.gjs-block-label b{display:contents;font-weight:800}.gjs-block-category{background:#5a6371}.gjs-block-category.gjs-open{border-bottom:none!important;margin-bottom:10px}.gjs-blocks-cs{border-bottom:none!important}.gjs-layer .gjs-layer-title{background:#5a6371!important}.gjs-layer.gjs-selected .gjs-layer-title{background-color:#0091d1!important}.gjs-layer.gjs-hovered .gjs-layer-title{background-color:#0091d170!important}.gjs-block-category .gjs-title,.gjs-category-title,.gjs-clm-tags .gjs-sm-title,.gjs-layer-title,.gjs-sm-sector .gjs-sm-title{background:#424853!important;border-bottom:2px solid #363d48!important;letter-spacing:0;font-size:16px;font-weight:400}.gjs-block-category.gjs-open .gjs-title,.gjs-clm-tags.gjs-open .gjs-sm-title,.gjs-sm-sector.gjs-sm-open .gjs-sm-title{background:#545d6c!important}.gjs-layer-name{padding-top:2px;padding-bottom:13px}.gjs-layer-count{display:none}.gjs-layer-vis{padding-top:11px}.gjs-sm-sector.gjs-sm-open{border-bottom:1px solid rgba(0,0,0,.1)}.gjs-trt-trait{display:block}.gjs-trt-header{font-weight:400}.gjs-trt-trait .gjs-field,.gjs-trt-trait .gjs-label{width:100%}.gjs-field-checkbox{height:17px!important;width:17px!important}.gjs-traits-label{font-weight:400;font-size:16px;border-bottom:none}.gjs-clm-tags #gjs-sm-caret,.gjs-sm-sector #gjs-sm-caret{font-size:medium}.gjs-trt-traits .gjs-label-wrp{width:100%}.gjs-trt-traits p.no-settings{padding-top:10px;padding-bottom:10px}.gjs-trt-trait__wrp:first-of-type{padding-top:8px}.gjs-trt-trait__wrp:last-of-type{padding-bottom:8px}.gjs-trt-trait{padding-bottom:10px}.gjs-trt-trait .gjs-field-image{background:none;padding:0}.gjs-trt-trait .gjs-field-image .image__preview-container{text-align:center}.gjs-trt-trait .gjs-field-image .image__preview-container img{max-width:100%;max-height:150px}#sidebar-bottom-buttons{position:absolute;left:0;bottom:0;height:40px;width:325px;margin:0;padding:0;-webkit-box-shadow:none;box-shadow:none;background:#474c57;border-top:none}#sidebar-bottom-buttons a,#sidebar-bottom-buttons button{float:right;height:100%;width:33.33%;border-left:1px solid #343944;border-radius:0;color:#e3e3e3;font-size:15px;padding:8px 0}#sidebar-bottom-buttons a:hover,#sidebar-bottom-buttons button:hover{background:#017eb5;color:#fff}#sidebar-bottom-buttons a:last-child,#sidebar-bottom-buttons button:last-child{border-left:none}#sidebar-bottom-buttons button.waiting{background:#0091d1;color:#fff!important}#sidebar-bottom-buttons button.waiting i.fa{display:none}#sidebar-bottom-buttons #go-back:hover{background:#b03541}#sidebar-bottom-buttons #save-page:hover{background:#419147}.gjs-field{background-color:#22272e}.gjs-field select option{background-color:#fff;color:#000}.gjs-field-arrows,.gjs-input-unit,.gjs-sm-field select.gjs-input-unit{color:#e1e1e1}.gjs-sm-field select.gjs-input-unit option{background-color:#22272e;color:#fff}.gjs-field-arrow-d{border-top:4px solid #e1e1e1}.gjs-field-arrow-u{border-bottom:4px solid #e1e1e1}.gjs-field-radio{padding:0!important}.gjs-radio-item .gjs-radio-item-label{padding-top:10px;margin-bottom:0;padding-bottom:10px;width:100%}.gjs-radio-item input:checked+.gjs-radio-item-label{background-color:#545d6c}.gjs-sm-header,.gjs-trt-header{font-weight:400;color:#8c909d}.gjs-clm-tags{width:100%;padding-top:0;padding-bottom:0}.gjs-clm-tags #gjs-clm-sel-help,.gjs-clm-tags #gjs-clm-status-c{display:none}.gjs-clm-tags #gjs-clm-new{color:#e1e1e1}.gjs-clm-tags #gjs-clm-add-tag{background-color:#0091d1;border:none;-webkit-box-shadow:1px 1px 0 hsla(0,0%,100%,.2) inset;box-shadow:inset 1px 1px 0 hsla(0,0%,100%,.2);color:#fff}.gjs-clm-tags #gjs-clm-add-tag:hover{background-color:#004a6c}.gjs-sm-sectors .gjs-color-warn,.gjs-sm-sectors .gjs-four-color{color:#e1e1e1}.gjs-sm-sectors .gjs-sm-field.gjs-sm-composite{background-color:rgba(195,226,236,.14);border:1px solid rgba(121,147,155,.14)}.gjs-sm-sectors .gjs-sm-layers{background-color:#3a3f4a}.gjs-sm-sectors .gjs-sm-layers .gjs-sm-btn{background:#fff;color:#000;text-shadow:none}.gjs-sm-sectors .gjs-sm-layers .gjs-field{padding:0;background-color:#3a3f4a}.gjs-sm-sectors .gjs-sm-layers .gjs-field select{color:#fff;background:#424853}.gjs-sm-sectors .gjs-sm-stack #gjs-sm-add{color:#fff}.gjs-sm-sectors .gjs-sm-stack #gjs-sm-add:hover{color:#aaa}.gjs-am-assets-header{display:none}.gjs-am-assets-cont{background:none;padding-top:0}.gjs-am-assets{height:325px}.gjs-am-asset{-webkit-touch-callout:none}.gjs-am-asset,.gjs-btn-prim{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.gjs-btn-prim{display:inline-block;margin-top:10px;padding:.375rem .75rem;font-weight:400;text-align:center;vertical-align:middle;font-size:1rem;line-height:1.5;border-radius:.25rem;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;color:#fff;border:1px solid #0091d1;background-color:#0091d1}.gjs-am-add-asset button{float:left;width:auto}.gjs-am-add-asset .gjs-am-add-field{width:100%}.gjs-am-file-uploader>form{background-color:rgba(195,226,236,.14);border:2px dashed #bdc2c8}.gjs-am-file-uploader #gjs-am-title{color:#7e8793;text-shadow:none}.cke_dialog_body .cke_dialog_ui_vbox_child{padding:0}.cke_dialog_body div.cke_dialog_ui_input_select,.cke_dialog_body input.cke_dialog_ui_input_password,.cke_dialog_body input.cke_dialog_ui_input_tel,.cke_dialog_body input.cke_dialog_ui_input_text,.cke_dialog_body textarea.cke_dialog_ui_input_textarea{margin-bottom:10px}.cke_dialog_body .cke_dialog_ui_input_select{width:100%!important}.sidebar-collapsed .gjs-cv-canvas{width:calc(100% - 0px)}.sidebar-collapsed .gjs-pn-panels{display:none}.sidebar-collapsed .gjs-cv-canvas,.sidebar-collapsed .gjs-pn-devices-c{left:0}.sidebar-collapsed #toggle-sidebar{padding:14px 18px;font-size:18px;-webkit-box-shadow:3px 7px 11px -4px rgba(0,0,0,.03);box-shadow:2px 3px 10px 2px rgba(0,0,0,.3);border-bottom-right-radius:4px} \ No newline at end of file +#gjs,body,html{height:100%!important;margin:0;overflow:hidden}*{-webkit-box-shadow:none!important;box-shadow:none!important}.form-control,.form-control:focus{color:#e1e1e1}.cursor-pointer{cursor:pointer}.gjs-editor{font-size:.9rem}.toast{opacity:1!important;border:none;right:15px;-webkit-box-shadow:none;box-shadow:none}.toast.toast-success{background:#2dc837}#phpb-loading{position:absolute;height:100%;width:100%;background-color:#fff;z-index:10000;-webkit-transition:opacity .3s,visibility .3s;transition:opacity .3s,visibility .3s}#phpb-loading.loaded{visibility:hidden;opacity:0}#phpb-loading .circle{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:150px;height:150px}#phpb-loading .circle .text{font-size:20px;margin:0 -30px;margin-top:20px;text-align:center;color:#0091d1}#phpb-loading .loader{width:calc(100% - 0px);height:calc(100% - 0px);border:8px solid #0091d1;border-top:8px solid #004a6c;border-radius:50%;-webkit-animation:rotate 5s linear infinite;animation:rotate 5s linear infinite}@-webkit-keyframes rotate{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes rotate{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.btn.focus,.btn:focus{-webkit-box-shadow:none;box-shadow:none}.gjs-cv-canvas{height:100%;top:0;width:calc(100% - 325px)}.gjs-toolbar{z-index:100!important}.gjs-pn-panel{padding:0}.gjs-pn-panel .gjs-pn-buttons{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.gjs-pn-commands,.gjs-pn-devices-c,.gjs-pn-options{display:none}.gjs-devices-c{padding:0}.gjs-one-bg{background-color:#313844;border-bottom:none;color:#c4c7ce}.gjs-four-color,.gjs-four-color-h:hover,.gjs-two-color{color:#e1e1e1}.gjs-pn-commands{width:100%;-webkit-box-shadow:none;box-shadow:none}::-webkit-scrollbar{width:7px;height:7px}::-webkit-scrollbar-track{background:#313844!important}::-webkit-scrollbar-thumb{background-color:#a5acb9!important;border-radius:3px}::-webkit-scrollbar-thumb:hover{background-color:#0091d1!important}.gjs-pn-views{top:40px}.gjs-pn-views .gjs-pn-btn{width:33.33%;margin-right:0;padding:16px 15px;border-radius:0;background:#3a3f4a;color:#e3e3e3;border-bottom:1px solid #3a3f4a;font-size:16px}.gjs-pn-views .gjs-pn-btn.gjs-pn-active{padding:15px;background-color:#515664;border-bottom-left-radius:unset;border-bottom-right-radius:unset;-webkit-box-shadow:none;box-shadow:none;color:#fff;border-bottom:3px solid #0091d1}.gjs-pn-options{right:0}.gjs-pn-views,.gjs-pn-views-container{left:0;-webkit-box-shadow:none;box-shadow:none;width:325px;padding-bottom:0;margin-bottom:0;margin-left:0;margin-right:0;padding-left:0;padding-right:0}.gjs-pn-views-container{padding-top:89px;background:#22272e;height:calc(100% - 40px);overflow:hidden}.gjs-pn-views-container>div:first-of-type{margin-top:44px}.gjs-pn-views-container>div{height:100%;overflow-y:auto}.gjs-pn-views-container>div>div{background:#22272e;border:none}.gjs-cv-canvas,.gjs-pn-devices-c{left:325px}.gjs-pn-panel #gjs-sm-caret{padding-right:0!important}.gjs-pn-panel .fa-caret-down{margin-right:5px!important}.gjs-pn-panel .fa-caret-right{margin-right:8px!important}.gjs-three-bg{background-color:#0091d1}.gjs-clm-tags #gjs-clm-checkbox,.gjs-clm-tags #gjs-clm-close{color:#fff}.gjs-field{border-radius:0;padding:2px}.gjs-field input,.gjs-field select,.gjs-field textarea{padding:5px}.gjs-field .gjs-d-s-arrow{border-top:4px solid #646464}#sidebar-header{position:absolute;-webkit-box-shadow:none;box-shadow:none;width:325px;padding-bottom:0;margin-bottom:0;margin-left:0;margin-right:0;padding-left:0;padding-right:0;background:#22272e;height:40px;z-index:100}#sidebar-header #language-selector{float:right}#sidebar-header #language-selector .dropdown-item.active,#sidebar-header #language-selector .dropdown-item:active{background:#22272e!important}#sidebar-header #language-selector .dropdown-menu.show{padding:0}#sidebar-header #language-selector .dropdown-toggle{margin-top:2px;color:#fff!important;background:none!important;border:none;-webkit-box-shadow:none;box-shadow:none;outline:none!important}#sidebar-header #language-selector .flag-icon{background-size:contain;background-position:50%;background-repeat:no-repeat;position:relative;display:inline-block;width:1.33333333em;height:12px;line-height:1em}#toggle-sidebar{position:absolute;left:0;top:0;z-index:100;color:#c4c7ce;-webkit-transition-duration:unset;transition-duration:unset}#block-search,#toggle-sidebar{background:#22272e;border-radius:0}#block-search{position:fixed;border-color:#3a3f4a;width:325px;margin-top:-44px}#block-search i.fa-search{position:absolute;top:14px;left:9px;font-size:15px;color:#515664}#block-search input{background:#181b1e;padding:22px 20px 22px 30px;border-radius:0;border:none}#block-search input::-webkit-input-placeholder{color:#515664}#block-search input::-moz-placeholder{color:#515664}#block-search input::-ms-input-placeholder{color:#515664}#block-search input::placeholder{color:#515664}.gjs-block{border:none;-webkit-box-shadow:none;box-shadow:none;padding-bottom:8px;margin:5px;width:calc(50% - 10px)}.gjs-block.fa{padding:8px}.gjs-block:hover{color:#0091d1!important}.gjs-block .block-thumb{height:70px;overflow:hidden;margin-bottom:5px;opacity:.8}.gjs-block .block-thumb img{width:100%}.gjs-blocks-c{background:#22272e;padding:4px}.gjs-block-categories{background:#22272e;padding-bottom:45px}.gjs-block-label{font-size:.8rem;height:100%;display:grid}.gjs-block-label b{display:contents;font-weight:800}.gjs-block-category{background:#5a6371}.gjs-block-category.gjs-open{border-bottom:none!important;margin-bottom:10px}.gjs-blocks-cs{border-bottom:none!important}.gjs-layer .gjs-layer-title{background:#5a6371!important}.gjs-layer.gjs-selected .gjs-layer-title{background-color:#0091d1!important}.gjs-layer.gjs-hovered .gjs-layer-title{background-color:#0091d170!important}.gjs-block-category .gjs-title,.gjs-category-title,.gjs-clm-tags .gjs-sm-title,.gjs-layer-title,.gjs-sm-sector .gjs-sm-title{background:#424853!important;border-bottom:2px solid #363d48!important;letter-spacing:0;font-size:16px;font-weight:400}.gjs-block-category.gjs-open .gjs-title,.gjs-clm-tags.gjs-open .gjs-sm-title,.gjs-sm-sector.gjs-sm-open .gjs-sm-title{background:#545d6c!important}.gjs-layer-name{padding-top:2px;padding-bottom:13px}.gjs-layer-count{display:none}.gjs-layer-vis{padding-top:11px}.gjs-sm-sector.gjs-sm-open{border-bottom:1px solid rgba(0,0,0,.1)}.gjs-trt-trait{display:block}.gjs-trt-header{font-weight:400}.gjs-trt-trait .gjs-field,.gjs-trt-trait .gjs-label{width:100%}.gjs-field-checkbox{height:17px!important;width:17px!important}.gjs-traits-label{font-weight:400;font-size:16px;border-bottom:none}.gjs-clm-tags #gjs-sm-caret,.gjs-sm-sector #gjs-sm-caret{font-size:medium}.gjs-trt-traits .gjs-label-wrp{width:100%}.gjs-trt-traits p.no-settings{padding-top:10px;padding-bottom:10px}.gjs-trt-trait__wrp:first-of-type{padding-top:8px}.gjs-trt-trait__wrp:last-of-type{padding-bottom:8px}.gjs-trt-trait{padding-bottom:10px}.gjs-trt-trait .gjs-field-image{background:none;padding:0}.gjs-trt-trait .gjs-field-image .image__preview-container{text-align:center}.gjs-trt-trait .gjs-field-image .image__preview-container .image__remove-button{position:absolute;right:0;top:0;border-radius:0;background-color:#e9eef2;border-color:#e9eef2;color:#515664;padding:2px 6px}.gjs-trt-trait .gjs-field-image .image__preview-container img{max-width:100%;max-height:150px}#sidebar-bottom-buttons{position:absolute;left:0;bottom:0;height:40px;width:325px;margin:0;padding:0;-webkit-box-shadow:none;box-shadow:none;background:#474c57;border-top:none}#sidebar-bottom-buttons a,#sidebar-bottom-buttons button{float:right;height:100%;width:33.33%;border-left:1px solid #343944;border-radius:0;color:#e3e3e3;font-size:15px;padding:8px 0}#sidebar-bottom-buttons a:hover,#sidebar-bottom-buttons button:hover{background:#017eb5;color:#fff}#sidebar-bottom-buttons a:last-child,#sidebar-bottom-buttons button:last-child{border-left:none}#sidebar-bottom-buttons button.waiting{background:#0091d1;color:#fff!important}#sidebar-bottom-buttons button.waiting i.fa{display:none}#sidebar-bottom-buttons #go-back:hover{background:#b03541}#sidebar-bottom-buttons #save-page:hover{background:#419147}.gjs-field{background-color:#22272e}.gjs-field select option{background-color:#fff;color:#000}.gjs-field-arrows,.gjs-input-unit,.gjs-sm-field select.gjs-input-unit{color:#e1e1e1}.gjs-sm-field select.gjs-input-unit option{background-color:#22272e;color:#fff}.gjs-field-arrow-d{border-top:4px solid #e1e1e1}.gjs-field-arrow-u{border-bottom:4px solid #e1e1e1}.gjs-field-radio{padding:0!important}.gjs-radio-item .gjs-radio-item-label{padding-top:10px;margin-bottom:0;padding-bottom:10px;width:100%}.gjs-radio-item input:checked+.gjs-radio-item-label{background-color:#545d6c}.gjs-sm-header,.gjs-trt-header{font-weight:400;color:#8c909d}.gjs-clm-tags{width:100%;padding-top:0;padding-bottom:0}.gjs-clm-tags #gjs-clm-sel-help,.gjs-clm-tags #gjs-clm-status-c{display:none}.gjs-clm-tags #gjs-clm-new{color:#e1e1e1}.gjs-clm-tags #gjs-clm-add-tag{background-color:#0091d1;border:none;-webkit-box-shadow:1px 1px 0 hsla(0,0%,100%,.2) inset;box-shadow:inset 1px 1px 0 hsla(0,0%,100%,.2);color:#fff}.gjs-clm-tags #gjs-clm-add-tag:hover{background-color:#004a6c}.gjs-sm-sectors .gjs-color-warn,.gjs-sm-sectors .gjs-four-color{color:#e1e1e1}.gjs-sm-sectors .gjs-sm-field.gjs-sm-composite{background-color:rgba(195,226,236,.14);border:1px solid rgba(121,147,155,.14)}.gjs-sm-sectors .gjs-sm-layers{background-color:#3a3f4a}.gjs-sm-sectors .gjs-sm-layers .gjs-sm-btn{background:#fff;color:#000;text-shadow:none}.gjs-sm-sectors .gjs-sm-layers .gjs-field{padding:0;background-color:#3a3f4a}.gjs-sm-sectors .gjs-sm-layers .gjs-field select{color:#fff;background:#424853}.gjs-sm-sectors .gjs-sm-stack #gjs-sm-add{color:#fff}.gjs-sm-sectors .gjs-sm-stack #gjs-sm-add:hover{color:#aaa}.gjs-am-assets-header{display:none}.gjs-am-assets-cont{background:none;padding-top:0}.gjs-am-assets{height:325px}.gjs-am-asset{-webkit-touch-callout:none}.gjs-am-asset,.gjs-btn-prim{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.gjs-btn-prim{display:inline-block;margin-top:10px;padding:.375rem .75rem;font-weight:400;text-align:center;vertical-align:middle;font-size:1rem;line-height:1.5;border-radius:.25rem;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;color:#fff;border:1px solid #0091d1;background-color:#0091d1}.gjs-am-add-asset button{float:left;width:auto}.gjs-am-add-asset .gjs-am-add-field{width:100%}.gjs-am-file-uploader>form{background-color:rgba(195,226,236,.14);border:2px dashed #bdc2c8}.gjs-am-file-uploader #gjs-am-title{color:#7e8793;text-shadow:none}.cke_dialog_body .cke_dialog_ui_vbox_child{padding:0}.cke_dialog_body div.cke_dialog_ui_input_select,.cke_dialog_body input.cke_dialog_ui_input_password,.cke_dialog_body input.cke_dialog_ui_input_tel,.cke_dialog_body input.cke_dialog_ui_input_text,.cke_dialog_body textarea.cke_dialog_ui_input_textarea{margin-bottom:10px}.cke_dialog_body .cke_dialog_ui_input_select{width:100%!important}.sidebar-collapsed .gjs-cv-canvas{width:calc(100% - 0px)}.sidebar-collapsed .gjs-pn-panels{display:none}.sidebar-collapsed .gjs-cv-canvas,.sidebar-collapsed .gjs-pn-devices-c{left:0}.sidebar-collapsed #toggle-sidebar{padding:14px 18px;font-size:18px;-webkit-box-shadow:3px 7px 11px -4px rgba(0,0,0,.03);box-shadow:2px 3px 10px 2px rgba(0,0,0,.3);border-bottom-right-radius:4px} \ No newline at end of file diff --git a/src/Modules/GrapesJS/resources/assets/sass/pagebuilder.scss b/src/Modules/GrapesJS/resources/assets/sass/pagebuilder.scss index 681ccf4..c114ada 100644 --- a/src/Modules/GrapesJS/resources/assets/sass/pagebuilder.scss +++ b/src/Modules/GrapesJS/resources/assets/sass/pagebuilder.scss @@ -495,6 +495,17 @@ html, body, #gjs { .image__preview-container { text-align: center; + .image__remove-button { + position: absolute; + right: 0; + top: 0; + border-radius: 0; + background-color: #e9eef2; + border-color: #e9eef2; + color: #515664; + padding: 2px 6px; + } + img { max-width: 100%; max-height: 150px; diff --git a/src/Modules/GrapesJS/resources/views/grapesjs/trait-manager.php b/src/Modules/GrapesJS/resources/views/grapesjs/trait-manager.php index d8dc61f..aef08db 100644 --- a/src/Modules/GrapesJS/resources/views/grapesjs/trait-manager.php +++ b/src/Modules/GrapesJS/resources/views/grapesjs/trait-manager.php @@ -1,33 +1,46 @@