From 1a7e4a7367032ad15acddd33df2e27bff190966c Mon Sep 17 00:00:00 2001 From: givanz Date: Mon, 23 Sep 2024 12:00:26 +0300 Subject: [PATCH] Fixed chrome bug that adds div elements inside paragraphs on enter key, media modal styles improvement. --- css/editor.css | 40 +++++++++++++++++++++++++++++++--------- demo/landing | 2 +- libs/builder/builder.js | 16 ++++++++++++++-- libs/media/media.css | 37 +++++++++++++++++++++++-------------- libs/media/media.js | 41 +++++++++++++++++++++++++++-------------- scss/_builder.scss | 14 ++++++++------ scss/_csstree.scss | 13 +++++++++++-- scss/editor.scss | 28 +++++++++++++++++++++++----- 8 files changed, 138 insertions(+), 53 deletions(-) diff --git a/css/editor.css b/css/editor.css index cf8b96e7..8603023c 100644 --- a/css/editor.css +++ b/css/editor.css @@ -17809,6 +17809,7 @@ https://github.com/givanz/VvvebJs .tree > ol li.file .file-actions { display: none; position: absolute; + background-color: var(--bs-body-bg); top: 0px; right: 2px; } .tree > ol li.file .file-actions .btn { @@ -17819,7 +17820,9 @@ https://github.com/givanz/VvvebJs border-radius: 4px; --bs-btn-border-color: rgba(var(--bs-link-color-rgb), 0.25); } .tree > ol li.page > label { - background-image: url(../libs/builder/icons/panel.svg); } + background-image: url(../libs/builder/icons/post.svg); } + .tree > ol li.url > label { + background-image: url(../../../js/vvvebjs/icons/panel.svg); } .tree > ol li input { position: absolute; left: 0; @@ -18818,7 +18821,7 @@ li[data-type] { .sections-container { width: 100%; background: var(--bs-body-bg); - padding-top: 1rem; } + padding: 1rem; } .sections-container > div.section-item { box-shadow: 0px 0px 1px 0px var(--bs-primary); box-shadow: 0px 0px 1px 0px rgba(18, 83, 205, 0.7), 0px 0px 5px 0px rgba(18, 83, 205, 0.1); @@ -18860,7 +18863,7 @@ li[data-type] { .sections-container > div.section-item .controls .info { margin-left: 0.2rem; } .sections-container > div.section-item .controls .info .name { - font-size: 13px; } + font-size: 12px; } .sections-container > div.section-item .controls .info .type { font-size: 12px; } .sections-container > div.section-item .controls .buttons { @@ -19166,7 +19169,8 @@ div.section, .header > ol { .form-select { -webkit-appearance: none; - -moz-appearance: none; } + -moz-appearance: none; + box-shadow: rgba(var(--bs-body-color-rgb), 0.08) 0px 1px 2px 0px; } input[type="number"] { -moz-appearance: textfield; @@ -19216,6 +19220,10 @@ input[type="number"]:focus { .form-control::placeholder { opacity: 0.7; } +.form-control { + font-size: inherit; + box-shadow: rgba(var(--bs-body-color-rgb), 0.08) 0px 1px 2px 0px inset; } + .btn-link:hover { text-decoration: none; } @@ -19756,7 +19764,10 @@ body > section, body > footer, body > header { .btn-icon { font-weight: 500; text-transform: capitalize; - margin-bottom: 0px; } + margin-bottom: 0px; + box-shadow: 1px 1px 2px 1px rgba(var(--bs-body-color-rgb), 0.07), 1px 1px 2px 1px rgba(var(--bs-body-bg-rgb), 0.15) inset; + border: none; + position: relative; } .btn-icon i:first-child { display: inline-block; margin-right: 0.3rem; @@ -19766,21 +19777,32 @@ body > section, body > footer, body > header { box-shadow: 0px 0px 1px 0px #3478f2; background-color: var(--bs-body-bg); } .btn-icon.btn-outline-primary:hover { - color: var(--bs-link-color-rgb); + color: var(--bs-link-color); background: #f8f9fa; } .btn-icon.btn-outline-primary i { background: transparent; } .btn-icon.btn-outline-secondary { - box-shadow: 0px 0px 2px 1px rgba(var(--bs-body-color-rgb), 0.07), -1px 1px 2px 0px rgba(var(--bs-body-bg-rgb), 0.15) inset; - box-shadow: 1px 1px 1px 0px rgba(var(--bs-body-color-rgb), 0.07); } + box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(var(--bs-body-color-rgb), 0.12) 0px 1px 2px 0px, rgba(var(--bs-body-color-rgb), 0.08) 0px 0px 0px 1px; } .btn-icon.btn-secondary { box-shadow: -1px 1px 2px 1px rgba(var(--bs-body-color-rgb), 0.07), -1px 1px 2px 0px rgba(var(--bs-body-bg-rgb), 0.15) inset; } .btn-icon.btn-secondary i { background: transparent; } .btn-icon.btn-primary { - box-shadow: -1px 1px 2px 1px rgba(var(--bs-body-color-rgb), 0.07), -1px 1px 2px 0px rgba(var(--bs-body-bg-rgb), 0.15) inset; } + box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 255, 255, 0.2) 0px 0.75px 0px 0px inset, rgba(var(--bs-primary-rgb), 0.4) 0px 1px 2px 0px, rgba(var(--bs-primary-rgb), 0.8) 0px 0px 0px 1px; } .btn-icon.btn-primary i { /*background: rgba(var(--bs-body-bg-rgb), 0.1);*/ } + .btn-icon:after { + content: "."; + background-image: linear-gradient(rgba(var(--bs-body-bg-rgb), 1), rgba(var(--bs-body-bg-rgb), 0)); + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0.16; } + .btn-icon.btn-outline-secondary:after, .btn-icon.btn-outline-primary:after { + background-image: linear-gradient(rgba(var(--bs-body-color-rgb), 0), rgba(var(--bs-body-color-rgb), 1)); + opacity: 0.03; } label.form-check .form-check-input { float: none; diff --git a/demo/landing b/demo/landing index 8c8d419b..3096991d 160000 --- a/demo/landing +++ b/demo/landing @@ -1 +1 @@ -Subproject commit 8c8d419b798b4ff9860c1f421c8308105d2f2cac +Subproject commit 3096991d336d9eac9171c06acfc43f8537c7b171 diff --git a/libs/builder/builder.js b/libs/builder/builder.js index 804abab6..4c2d853e 100644 --- a/libs/builder/builder.js +++ b/libs/builder/builder.js @@ -764,6 +764,16 @@ Vvveb.WysiwygEditor = { e.preventDefault(); return false; }); + + doc.addEventListener('keydown', event => { + if (event.key === 'Enter') { + let target = event.target.closest("[contenteditable]"); + if (target) { + doc.execCommand('insertLineBreak'); + event.preventDefault(); + } + } + }) }, undo: function(element) { @@ -2531,8 +2541,10 @@ Vvveb.Gui = { }); }; - form.removeEventListener("submit", submitForm); - form.addEventListener("submit", submitForm); + if (!form.dataset.init) { + form.addEventListener("submit", submitForm); + form.dataset.init = true; + } }, setDesignerMode : function () { diff --git a/libs/media/media.css b/libs/media/media.css index 057cee7f..487e5fe9 100644 --- a/libs/media/media.css +++ b/libs/media/media.css @@ -19,8 +19,7 @@ .filemanager .breadcrumbs { color: var(--bs-primary-text); - margin-left:20px; - font-size: 1.2rem; + //font-size: 1.2rem; //font-weight: 500; line-height: 35px; } @@ -31,12 +30,12 @@ } .filemanager .breadcrumbs a:hover { - text-decoration: underline; + color: var(--bs-link-color); } .filemanager .breadcrumbs .arrow { - color: var(--bs-border-color); - font-size: 24px; + color: var(--bs-secondary-border-subtle); + //font-size: 24px; font-weight: 500; line-height: 20px; } @@ -277,12 +276,11 @@ } .filemanager .nothingfound { - background-color: #373743; - background-color: var(--bs-light-border-subtle); + /*background-color: rgba(var(--bs-primary-rgb), 0.1);*/ + border:1px solid var(--bs-primary-bg-subtle); width: 23em; height: 21em; margin: 0 auto; - display: none; border-radius:20px; text-align:center; -webkit-animation: showSlowlyElement 700ms; /* Chrome, Safari, Opera */ @@ -291,14 +289,20 @@ .filemanager .nothingfound .nofiles { margin: 30px auto; - top: 3em; border-radius: 50%; position:relative; - background-color: #d72f6e; + background-color: var(--bs-primary-bg-subtle); width: 11em; height: 11em; - line-height: 11.4em; + line-height: 15em; +} + +.filemanager .nothingfound .nofiles i { + font-size: 7rem; + transform: rotate(270deg); + line-height: 1rem; } +/* .filemanager .nothingfound .nofiles:after { content: 'x'; position: absolute; @@ -309,6 +313,7 @@ font-weight: 600; right: 0; } +*/ .filemanager .nothingfound span { margin: 0 auto auto; @@ -403,7 +408,9 @@ .icon.folder:before { content: ''; float: left; - background-color: rgba(var(--bs-primary-rgb), 0.5); + //background-color: rgba(var(--bs-primary-rgb), 0.5); + background:linear-gradient(var(--bs-primary-bg-subtle), rgba(var(--bs-primary-rgb), 0.4)); + background:linear-gradient(var(--bs-primary-border-subtle), rgba(var(--bs-primary-rgb), 0.6)); width: 1.5em; height: 0.45em; @@ -421,11 +428,13 @@ float: left; clear: left; - background-color: rgba(var(--bs-primary-rgb), 1); + //background-color: rgba(var(--bs-primary-rgb), 1); + //background-color: var(--bs-primary-border-subtle); + background:linear-gradient(var(--bs-primary-border-subtle), rgba(var(--bs-primary-rgb), 0.6)); width: 3em; height: 2.25em; - border-radius: 0.1em; + border-radius: 0.2em; } .icon.folder.full:before { height: 0.55em; diff --git a/libs/media/media.js b/libs/media/media.js index f88300ff..beb303e7 100755 --- a/libs/media/media.js +++ b/libs/media/media.js @@ -18,10 +18,10 @@ class MediaModal {
- + -
@@ -30,23 +30,23 @@ class MediaModal {
-
+
-
+
-
@@ -75,8 +75,16 @@ class MediaModal {
    -
    - No files here. +
    + +
    +
    No files here.
    +
    + +
    @@ -89,8 +97,14 @@ class MediaModal {
    - - + +
    @@ -250,7 +264,7 @@ class MediaModal { let _search = this; _search.querySelectorAll('span').forEach(function (el,i) { el.style.display = "none";}); - search.style.display = ""; + search.style.display = "block"; search.focus(); }); @@ -542,7 +556,6 @@ _ fetch(deleteUrl, {method: "POST", body: {file}}) .then((response) => { - console.log(response); if (!response.ok) { throw new Error(response) } return response.text() }) diff --git a/scss/_builder.scss b/scss/_builder.scss index 2df23d77..55c01389 100644 --- a/scss/_builder.scss +++ b/scss/_builder.scss @@ -1695,7 +1695,7 @@ li[data-type] .sections-container { width:100%; background:var(--bs-body-bg); -padding-top:1rem; + padding:1rem; > div.section-item { @@ -1752,7 +1752,7 @@ padding-top:1rem; .info { margin-left:0.2rem; .name { - font-size: 13px; + font-size: 12px; } .type { font-size: 12px; @@ -2056,6 +2056,7 @@ div.section { .form-select { -webkit-appearance: none; -moz-appearance: none; + box-shadow:rgba(var(--bs-body-color-rgb), 0.08) 0px 1px 2px 0px; } @@ -2131,9 +2132,10 @@ input[type="number"]:focus { opacity:0.7; } -.form-control, .form-select { - //box-shadow: 1px 1px 3px 0px rgba(var(--bs-body-color-rgb), 0.05) inset; - //background-color:rgba(var(--bs-secondary-color-rgb), 0.01); +.form-control +{ + font-size:inherit; + box-shadow:rgba(var(--bs-body-color-rgb), 0.08) 0px 1px 2px 0px inset; } .btn-link:hover { @@ -2590,7 +2592,7 @@ img.preview { min-height: 250px; height: 500px; resize: both; - overflow: hidden; + overflow: hidden; box-shadow: 0px 1px 5px 0px rgba(var(--bs-body-color-rgb), 0.15); background: var(--bs-body-bg); diff --git a/scss/_csstree.scss b/scss/_csstree.scss index 9e38be53..48d263ba 100644 --- a/scss/_csstree.scss +++ b/scss/_csstree.scss @@ -68,7 +68,7 @@ > label { - background: url(../libs/builder/icons/file.svg); + background-image: url(../libs/builder/icons/file.svg); background-position:8px 4px; background-size:19px 19px; background-repeat:no-repeat; @@ -90,6 +90,7 @@ .file-actions { display:none; position:absolute; + background-color: var(--bs-body-bg); top:0px; right:2px; @@ -116,7 +117,15 @@ { > label { - background-image: url(../libs/builder/icons/panel.svg); + background-image: url(../libs/builder/icons/post.svg); + } + } + + li.url + { + > label + { + background-image: url(../../../js/vvvebjs/icons/panel.svg); } } diff --git a/scss/editor.scss b/scss/editor.scss index 54aa6c7f..7f51ca35 100644 --- a/scss/editor.scss +++ b/scss/editor.scss @@ -67,6 +67,9 @@ $font-size-base: 1rem; text-transform:capitalize; margin-bottom:0px; //padding:0.4rem 2rem; + box-shadow:1px 1px 2px 1px rgba(var(--bs-body-color-rgb),0.07),1px 1px 2px 1px rgba(var(--bs-body-bg-rgb),0.15) inset; + border:none; + position:relative; i:first-child { @@ -84,7 +87,7 @@ $font-size-base: 1rem; &:hover { - color:var(--bs-link-color-rgb); + color:var(--bs-link-color); background:$gray-100; } @@ -95,8 +98,9 @@ $font-size-base: 1rem; } &.btn-outline-secondary { - box-shadow:0px 0px 2px 1px rgba(var(--bs-body-color-rgb), 0.07), -1px 1px 2px 0px rgba(var(--bs-body-bg-rgb), 0.15) inset; - box-shadow:1px 1px 1px 0px rgba(var(--bs-body-color-rgb), 0.07); + //box-shadow:0px 0px 3px 1px rgba(var(--bs-body-color-rgb), 0.1), -1px 1px 2px 0px rgba(var(--bs-body-bg-rgb), 0.15) inset; + box-shadow:rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(var(--bs-body-color-rgb), 0.12) 0px 1px 2px 0px, rgba(var(--bs-body-color-rgb), 0.08) 0px 0px 0px 1px; + //--bs-btn-bg:var(--bs-body-bg); } &.btn-gray @@ -117,8 +121,7 @@ $font-size-base: 1rem; } &.btn-primary { - box-shadow:-1px 1px 2px 1px rgba(var(--bs-body-color-rgb),0.07),-1px 1px 2px 0px rgba(var(--bs-body-bg-rgb),0.15) inset; - + box-shadow:rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 255, 255, 0.2) 0px 0.75px 0px 0px inset, rgba(var(--bs-primary-rgb), 0.4) 0px 1px 2px 0px, rgba(var(--bs-primary-rgb), 0.8) 0px 0px 0px 1px; i { /*background: rgba(var(--bs-body-bg-rgb), 0.1);*/ } @@ -129,6 +132,21 @@ $font-size-base: 1rem; //padding: 0.5rem 0.5rem; } } + &:after { + content: "."; + background-image:linear-gradient(rgba(var(--bs-body-bg-rgb), 1), rgba(var(--bs-body-bg-rgb), 0)); + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0.16; + } + + &.btn-outline-secondary:after,&.btn-outline-primary:after { + background-image: linear-gradient(rgba(var(--bs-body-color-rgb), 0), rgba(var(--bs-body-color-rgb), 1)); + opacity: 0.03; + } } label.form-check .form-check-input {