Skip to content

Commit

Permalink
Fix grid and column components not properly displaying columns and size.
Browse files Browse the repository at this point in the history 
Grid columns highlight on section hover.
Empty column highlight and placeholder for easier component/block drop.
Bootstrap 5.3.2 update.
  • Loading branch information
@givanz
givanz committed Oct 4, 2023
1 parent ab58768 commit 3d46c82
Show file tree
Hide file tree
Showing 14 changed files with 171 additions and 51 deletions.
57 changes: 31 additions & 26 deletions css/editor.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8483,7 +8483,7 @@ i[class^='icon-'] {
content: "\ee33"; }

/*!
* Bootstrap v5.3.1 (https://getbootstrap.com/)
* Bootstrap v5.3.2 (https://getbootstrap.com/)
* Copyright 2011-2023 The Bootstrap Authors
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
*/
Expand Down Expand Up @@ -8582,6 +8582,7 @@ i[class^='icon-'] {
--bs-link-hover-color: #0a58ca;
--bs-link-hover-color-rgb: 10, 88, 202;
--bs-code-color: #d63384;
--bs-highlight-color: #212529;
--bs-highlight-bg: #fff3cd;
--bs-border-width: 1px;
--bs-border-style: solid;
Expand Down Expand Up @@ -8652,6 +8653,8 @@ i[class^='icon-'] {
--bs-link-color-rgb: 110, 168, 254;
--bs-link-hover-color-rgb: 139, 185, 254;
--bs-code-color: #e685b5;
--bs-highlight-color: #dee2e6;
--bs-highlight-bg: #664d03;
--bs-border-color: #495057;
--bs-border-color-translucent: rgba(255, 255, 255, 0.15);
--bs-form-valid-color: #75b798;
Expand Down Expand Up @@ -8773,6 +8776,7 @@ small, .small {

mark, .mark {
padding: 0.1875em;
color: var(--bs-highlight-color);
background-color: var(--bs-highlight-bg); }

sub,
Expand Down Expand Up @@ -9939,16 +9943,16 @@ progress {
--bs-table-bg-type: initial;
--bs-table-color-state: initial;
--bs-table-bg-state: initial;
--bs-table-color: var(--bs-body-color);
--bs-table-color: var(--bs-emphasis-color);
--bs-table-bg: var(--bs-body-bg);
--bs-table-border-color: var(--bs-border-color);
--bs-table-accent-bg: transparent;
--bs-table-striped-color: var(--bs-body-color);
--bs-table-striped-bg: rgba(0, 0, 0, 0.05);
--bs-table-active-color: var(--bs-body-color);
--bs-table-active-bg: rgba(0, 0, 0, 0.1);
--bs-table-hover-color: var(--bs-body-color);
--bs-table-hover-bg: rgba(0, 0, 0, 0.075);
--bs-table-striped-color: var(--bs-emphasis-color);
--bs-table-striped-bg: rgba(var(--bs-emphasis-color-rgb), 0.05);
--bs-table-active-color: var(--bs-emphasis-color);
--bs-table-active-bg: rgba(var(--bs-emphasis-color-rgb), 0.1);
--bs-table-hover-color: var(--bs-emphasis-color);
--bs-table-hover-bg: rgba(var(--bs-emphasis-color-rgb), 0.075);
width: 100%;
margin-bottom: 1rem;
vertical-align: top;
Expand Down Expand Up @@ -10003,7 +10007,7 @@ progress {
.table-primary {
--bs-table-color: #000;
--bs-table-bg: #cfe2ff;
--bs-table-border-color: #bacbe6;
--bs-table-border-color: #a6b5cc;
--bs-table-striped-bg: #c5d7f2;
--bs-table-striped-color: #000;
--bs-table-active-bg: #bacbe6;
Expand All @@ -10016,7 +10020,7 @@ progress {
.table-secondary {
--bs-table-color: #000;
--bs-table-bg: #e2e3e5;
--bs-table-border-color: #cbccce;
--bs-table-border-color: #b5b6b7;
--bs-table-striped-bg: #d7d8da;
--bs-table-striped-color: #000;
--bs-table-active-bg: #cbccce;
Expand All @@ -10029,7 +10033,7 @@ progress {
.table-success {
--bs-table-color: #000;
--bs-table-bg: #d1e7dd;
--bs-table-border-color: #bcd0c7;
--bs-table-border-color: #a7b9b1;
--bs-table-striped-bg: #c7dbd2;
--bs-table-striped-color: #000;
--bs-table-active-bg: #bcd0c7;
Expand All @@ -10042,7 +10046,7 @@ progress {
.table-info {
--bs-table-color: #000;
--bs-table-bg: #cff4fc;
--bs-table-border-color: #badce3;
--bs-table-border-color: #a6c3ca;
--bs-table-striped-bg: #c5e8ef;
--bs-table-striped-color: #000;
--bs-table-active-bg: #badce3;
Expand All @@ -10055,7 +10059,7 @@ progress {
.table-warning {
--bs-table-color: #000;
--bs-table-bg: #fff3cd;
--bs-table-border-color: #e6dbb9;
--bs-table-border-color: #ccc2a4;
--bs-table-striped-bg: #f2e7c3;
--bs-table-striped-color: #000;
--bs-table-active-bg: #e6dbb9;
Expand All @@ -10068,7 +10072,7 @@ progress {
.table-danger {
--bs-table-color: #000;
--bs-table-bg: #f8d7da;
--bs-table-border-color: #dfc2c4;
--bs-table-border-color: #c6acae;
--bs-table-striped-bg: #eccccf;
--bs-table-striped-color: #000;
--bs-table-active-bg: #dfc2c4;
Expand All @@ -10081,7 +10085,7 @@ progress {
.table-light {
--bs-table-color: #000;
--bs-table-bg: #f8f9fa;
--bs-table-border-color: #dfe0e1;
--bs-table-border-color: #c6c7c8;
--bs-table-striped-bg: #ecedee;
--bs-table-striped-color: #000;
--bs-table-active-bg: #dfe0e1;
Expand All @@ -10094,7 +10098,7 @@ progress {
.table-dark {
--bs-table-color: #fff;
--bs-table-bg: #212529;
--bs-table-border-color: #373b3e;
--bs-table-border-color: #4d5154;
--bs-table-striped-bg: #2c3034;
--bs-table-striped-color: #fff;
--bs-table-active-bg: #373b3e;
Expand Down Expand Up @@ -10350,6 +10354,7 @@ textarea.form-control-lg {

.form-check-input {
--bs-form-check-bg: var(--bs-body-bg);
flex-shrink: 0;
width: 1em;
height: 1em;
margin-top: 0.25em;
Expand Down Expand Up @@ -10465,7 +10470,7 @@ textarea.form-control-lg {
height: 0.5rem;
color: transparent;
cursor: pointer;
background-color: var(--bs-tertiary-bg);
background-color: var(--bs-secondary-bg);
border-color: transparent;
border-radius: 1rem; }
.form-range::-moz-range-thumb {
Expand All @@ -10486,7 +10491,7 @@ textarea.form-control-lg {
height: 0.5rem;
color: transparent;
cursor: pointer;
background-color: var(--bs-tertiary-bg);
background-color: var(--bs-secondary-bg);
border-color: transparent;
border-radius: 1rem; }
.form-range:disabled {
Expand Down Expand Up @@ -11215,7 +11220,7 @@ textarea.form-control-lg {
--bs-dropdown-inner-border-radius: calc(var(--bs-border-radius) - var(--bs-border-width));
--bs-dropdown-divider-bg: var(--bs-border-color-translucent);
--bs-dropdown-divider-margin-y: 0.5rem;
--bs-dropdown-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
--bs-dropdown-box-shadow: var(--bs-box-shadow);
--bs-dropdown-link-color: var(--bs-body-color);
--bs-dropdown-link-hover-color: var(--bs-body-color);
--bs-dropdown-link-hover-bg: var(--bs-tertiary-bg);
Expand Down Expand Up @@ -12904,7 +12909,7 @@ textarea.form-control-lg {
--bs-modal-border-color: var(--bs-border-color-translucent);
--bs-modal-border-width: var(--bs-border-width);
--bs-modal-border-radius: var(--bs-border-radius-lg);
--bs-modal-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
--bs-modal-box-shadow: var(--bs-box-shadow-sm);
--bs-modal-inner-border-radius: calc(var(--bs-border-radius-lg) - (var(--bs-border-width)));
--bs-modal-header-padding-x: 1rem;
--bs-modal-header-padding-y: 1rem;
Expand Down Expand Up @@ -13023,7 +13028,7 @@ textarea.form-control-lg {
@media (min-width: 576px) {
.modal {
--bs-modal-margin: 1.75rem;
--bs-modal-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); }
--bs-modal-box-shadow: var(--bs-box-shadow); }
.modal-dialog {
max-width: var(--bs-modal-width);
margin-right: auto;
Expand Down Expand Up @@ -13232,7 +13237,7 @@ textarea.form-control-lg {
--bs-popover-border-color: var(--bs-border-color-translucent);
--bs-popover-border-radius: var(--bs-border-radius-lg);
--bs-popover-inner-border-radius: calc(var(--bs-border-radius-lg) - var(--bs-border-width));
--bs-popover-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
--bs-popover-box-shadow: var(--bs-box-shadow);
--bs-popover-header-padding-x: 1rem;
--bs-popover-header-padding-y: 0.5rem;
--bs-popover-header-font-size: 1rem;
Expand Down Expand Up @@ -13605,7 +13610,7 @@ textarea.form-control-lg {
--bs-offcanvas-bg: var(--bs-body-bg);
--bs-offcanvas-border-width: var(--bs-border-width);
--bs-offcanvas-border-color: var(--bs-border-color-translucent);
--bs-offcanvas-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
--bs-offcanvas-box-shadow: var(--bs-box-shadow-sm);
--bs-offcanvas-transition: transform 0.3s ease-in-out;
--bs-offcanvas-title-line-height: 1.5; }

Expand Down Expand Up @@ -14450,13 +14455,13 @@ textarea.form-control-lg {
display: none !important; }

.shadow {
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; }
box-shadow: var(--bs-box-shadow) !important; }

.shadow-sm {
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important; }
box-shadow: var(--bs-box-shadow-sm) !important; }

.shadow-lg {
box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important; }
box-shadow: var(--bs-box-shadow-lg) !important; }

.shadow-none {
box-shadow: none !important; }
Expand Down
42 changes: 42 additions & 0 deletions css/vvvebjs-editor-helpers.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,3 +70,45 @@ Prevents iframe mouse events that prevents clicking on the component

.vvveb-hidden {
display: none !important; }

section .container div > .row > [class*="col-"]:empty,
section .container div > .row > .col:empty,
section .container > .row > [class*="col-"]:empty,
section .container > .row > .col:empty, section .container-fluid div > .row > [class*="col-"]:empty,
section .container-fluid div > .row > .col:empty,
section .container-fluid > .row > [class*="col-"]:empty,
section .container-fluid > .row > .col:empty {
background: var(--bs-tertiary-bg);
min-height: 200px;
outline: 1px solid var(--bs-border-color);
outline-offset: -0.5rem;
margin: 0.5rem;
display: flex; }
section .container div > .row > [class*="col-"]:empty:after,
section .container div > .row > .col:empty:after,
section .container > .row > [class*="col-"]:empty:after,
section .container > .row > .col:empty:after, section .container-fluid div > .row > [class*="col-"]:empty:after,
section .container-fluid div > .row > .col:empty:after,
section .container-fluid > .row > [class*="col-"]:empty:after,
section .container-fluid > .row > .col:empty:after {
content: 'Drag elements here';
font-size: 85%;
color: var(--bs-secondary);
display: block;
vertical-align: middle;
display: flex;
align-self: center;
margin: auto; }

section:hover .container div > .row > [class*="col-"],
section:hover .container div > .row > .col, section:hover .container > .row > [class*="col-"],
section:hover .container > .row > .col, section:hover .container-fluid div > .row > [class*="col-"],
section:hover .container-fluid div > .row > .col, section:hover .container-fluid > .row > [class*="col-"],
section:hover .container-fluid > .row > .col {
outline: 1px dashed lime;
outline-offset: -2px; }

.row:hover > [class*="col-"],
.row:hover > .col {
outline: 1px dashed lime;
outline-offset: -2px; }
15 changes: 9 additions & 6 deletions libs/builder/components-bootstrap5.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -728,6 +728,7 @@ Vvveb.Components.add("html/gridcolumn", {
name: "Grid Column",
image: "icons/grid_row.svg",
classesRegex: ["col-"],
classes: ["col"],
html: '<div class="col-sm-4"><h3>col-sm-4</h3></div>',
properties: [{
name: "Column",
Expand All @@ -739,11 +740,12 @@ Vvveb.Components.add("html/gridcolumn", {
beforeInit: function(node) {
_class = $(node).attr("class");

var reg = /col-([^-\$ ]*)?-?(\d+)/g;
var reg = /col(-[^-\$ ]*)?-?(\d+)?/g;
var match;

while ((match = reg.exec(_class)) != null) {
this.data["col" + ((match[1] != undefined)?"_" + match[1]:"")] = match[2];
let key = "col" + ((match[1] != undefined) ? "_" + match[1].replace('-','') : "");
this.data[key] = match[2] ?? '';
}
},

Expand Down Expand Up @@ -775,15 +777,16 @@ Vvveb.Components.add("html/gridrow", {
var i = 0;
var j = 0;

$(node).find('[class*="col-"]').each(function() {
$(node).find('[class*="col-"],.col').each(function() {
_class = $(this).attr("class");

var reg = /col-([^-\$ ]*)?-?(\d+)/g;
var reg = /col(-[^-\$ ]*)?-?(\d+)?/g;
var match;
var data = {};

while ((match = reg.exec(_class)) != null) {
data["col" + ((match[1] != undefined)?"_" + match[1]:"")] = match[2];
let key = "col" + ((match[1] != undefined) ? "_" + match[1].replace('-','') : "");
data[key] = match[2] ?? '';
}

i++;
Expand Down Expand Up @@ -854,7 +857,7 @@ Vvveb.Components.add("html/gridrow", {
data: {text:"Add column", icon:"la la-plus"},
onChange: function(node)
{
$(node).append('<div class="col-3">Col-3</div>');
$(node).append('<div class="col-3"><h3>Col-3</h3></div>');

//render component properties again to include the new column inputs
Vvveb.Components.render("html/gridrow");
Expand Down
2 changes: 2 additions & 0 deletions libs/builder/inputs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -562,6 +562,8 @@ var GridInput = $.extend({}, Input, {

setValue: function(value) {
$('select', this.element).val(value);
//fix selected attribute not working bug
$('select option[selected]', this.element).prop( 'selected', 'selected' );
},

init: function(data) {
Expand Down
2 changes: 1 addition & 1 deletion scss/bootstrap/_buttons.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -170,7 +170,7 @@
--#{$prefix}btn-disabled-color: #{$btn-link-disabled-color};
--#{$prefix}btn-disabled-border-color: transparent;
--#{$prefix}btn-box-shadow: 0 0 0 #000; // Can't use `none` as keyword negates all values when used with multiple shadows
--#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix(color-contrast($link-color), $link-color, 15%))};
--#{$prefix}btn-focus-shadow-rgb: #{$btn-link-focus-shadow-rgb};

text-decoration: $link-decoration;
@if $enable-gradients {
Expand Down
1 change: 1 addition & 0 deletions scss/bootstrap/_reboot.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -217,6 +217,7 @@ small {

mark {
padding: $mark-padding;
color: var(--#{$prefix}highlight-color);
background-color: var(--#{$prefix}highlight-bg);
}

Expand Down
3 changes: 3 additions & 0 deletions scss/bootstrap/_root.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,7 @@
}

--#{$prefix}code-color: #{$code-color};
--#{$prefix}highlight-color: #{$mark-color};
--#{$prefix}highlight-bg: #{$mark-bg};

// scss-docs-start root-border-var
Expand Down Expand Up @@ -171,6 +172,8 @@
--#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color-dark)};

--#{$prefix}code-color: #{$code-color-dark};
--#{$prefix}highlight-color: #{$mark-color-dark};
--#{$prefix}highlight-bg: #{$mark-bg-dark};

--#{$prefix}border-color: #{$border-color-dark};
--#{$prefix}border-color-translucent: #{$border-color-translucent-dark};
Expand Down
6 changes: 3 additions & 3 deletions scss/bootstrap/_utilities.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,9 +77,9 @@ $utilities: map-merge(
property: box-shadow,
class: shadow,
values: (
null: $box-shadow,
sm: $box-shadow-sm,
lg: $box-shadow-lg,
null: var(--#{$prefix}box-shadow),
sm: var(--#{$prefix}box-shadow-sm),
lg: var(--#{$prefix}box-shadow-lg),
none: none,
)
),
Expand Down
2 changes: 2 additions & 0 deletions scss/bootstrap/_variables-dark.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,8 @@ $headings-color-dark: inherit !default;
$link-color-dark: tint-color($primary, 40%) !default;
$link-hover-color-dark: shift-color($link-color-dark, -$link-shade-percentage) !default;
$code-color-dark: tint-color($code-color, 40%) !default;
$mark-color-dark: $body-color-dark !default;
$mark-bg-dark: $yellow-800 !default;


//
Expand Down
Loading

0 comments on commit 3d46c82

Please sign in to comment.