Skip to content

Commit 01914d1

Browse files
PeeterPaalPeeterPaal
committed
Use opacity for edit buttons
1 parent c7ebd7f commit 01914d1

File tree

6 files changed

+27
-81
lines changed

6 files changed

+27
-81
lines changed

‎javascripts/editmode.js

-18
Original file line numberDiff line numberDiff line change
@@ -381,24 +381,6 @@
381381
};
382382

383383
const bindBlockLayoutChange = ({bodyBlocks, dataKey}) => {
384-
$('.js-blocks-wrapper').on('mouseenter', e => {
385-
const $block = $(e.target).closest('.js-blocks-wrapper').first();
386-
387-
$block.addClass('active');
388-
});
389-
390-
$('.js-change-layout-select').on('click', e => {
391-
const $block = $(e.target).closest('.js-blocks-wrapper').first();
392-
393-
$block.addClass('active');
394-
});
395-
396-
$('.js-blocks-wrapper').on('mouseleave', e => {
397-
const $block = $(e.target).closest('.js-blocks-wrapper').first();
398-
399-
$block.removeClass('active');
400-
});
401-
402384
$('.js-change-layout-select').on('change', e => {
403385
const targetKey = $(e.target).find(':selected').data('key');
404386
const newLayout = e.target.value;

‎javascripts/editmode.min.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎sources/javascripts/editmode.js

-18
Original file line numberDiff line numberDiff line change
@@ -377,24 +377,6 @@
377377
};
378378

379379
const bindBlockLayoutChange = ({bodyBlocks, dataKey}) => {
380-
$('.js-blocks-wrapper').on('mouseenter', e => {
381-
const $block = $(e.target).closest('.js-blocks-wrapper').first();
382-
383-
$block.addClass('active');
384-
});
385-
386-
$('.js-change-layout-select').on('click', e => {
387-
const $block = $(e.target).closest('.js-blocks-wrapper').first();
388-
389-
$block.addClass('active');
390-
})
391-
392-
$('.js-blocks-wrapper').on('mouseleave', e => {
393-
const $block = $(e.target).closest('.js-blocks-wrapper').first();
394-
395-
$block.removeClass('active');
396-
});
397-
398380
$('.js-change-layout-select').on('change', e => {
399381
const targetKey = $(e.target).find(':selected').data('key');
400382
const newLayout = e.target.value;

‎sources/stylesheets/components/_block.scss

+6-10
Original file line numberDiff line numberDiff line change
@@ -8,24 +8,20 @@
88
}
99

1010
.block-edit-buttons {
11-
width: 100%;
11+
background-color: transparent;
1212
height: 100%;
13+
opacity: 0;
1314
position: absolute;
15+
transition: background-color, opacity .3s ease-in-out;
16+
width: 100%;
1417
z-index: 2;
15-
background-color: transparent;
16-
transition: background-color .3s ease-in-out;
17-
18-
> * {
19-
display: none;
20-
}
2118
}
2219

23-
&:hover > .block-edit-buttons, &.active > .block-edit-buttons {
20+
&:hover > .block-edit-buttons {
2421
background-color: rgba($grey-1, .5);
22+
opacity: 1;
2523

2624
> * {
27-
display: block;
28-
2925
&[data-title] {
3026
&:after {
3127
content: attr(data-title);

‎stylesheets/main.css

+19-33
Original file line numberDiff line numberDiff line change
@@ -10,30 +10,21 @@
1010
}
1111
.block-wrapper .block-edit-buttons,
1212
.category-blocks .block-edit-buttons {
13-
width: 100%;
13+
background-color: transparent;
1414
height: 100%;
15+
opacity: 0;
1516
position: absolute;
17+
transition: background-color, opacity 0.3s ease-in-out;
18+
width: 100%;
1619
z-index: 2;
17-
background-color: transparent;
18-
transition: background-color 0.3s ease-in-out;
1920
}
20-
.block-wrapper .block-edit-buttons > *,
21-
.category-blocks .block-edit-buttons > * {
22-
display: none;
23-
}
24-
.block-wrapper:hover > .block-edit-buttons, .block-wrapper.active > .block-edit-buttons,
25-
.category-blocks:hover > .block-edit-buttons,
26-
.category-blocks.active > .block-edit-buttons {
21+
.block-wrapper:hover > .block-edit-buttons,
22+
.category-blocks:hover > .block-edit-buttons {
2723
background-color: rgba(247, 247, 242, 0.5);
24+
opacity: 1;
2825
}
29-
.block-wrapper:hover > .block-edit-buttons > *, .block-wrapper.active > .block-edit-buttons > *,
30-
.category-blocks:hover > .block-edit-buttons > *,
31-
.category-blocks.active > .block-edit-buttons > * {
32-
display: block;
33-
}
34-
.block-wrapper:hover > .block-edit-buttons > *[data-title]:after, .block-wrapper.active > .block-edit-buttons > *[data-title]:after,
35-
.category-blocks:hover > .block-edit-buttons > *[data-title]:after,
36-
.category-blocks.active > .block-edit-buttons > *[data-title]:after {
26+
.block-wrapper:hover > .block-edit-buttons > *[data-title]:after,
27+
.category-blocks:hover > .block-edit-buttons > *[data-title]:after {
3728
content: attr(data-title);
3829
opacity: 0;
3930
transition: opacity 0.3s ease-in-out;
@@ -50,31 +41,26 @@
5041
font-family: var(--font-family);
5142
pointer-events: none;
5243
}
53-
.block-wrapper:hover > .block-edit-buttons > *[data-title]:hover:after, .block-wrapper.active > .block-edit-buttons > *[data-title]:hover:after,
54-
.category-blocks:hover > .block-edit-buttons > *[data-title]:hover:after,
55-
.category-blocks.active > .block-edit-buttons > *[data-title]:hover:after {
44+
.block-wrapper:hover > .block-edit-buttons > *[data-title]:hover:after,
45+
.category-blocks:hover > .block-edit-buttons > *[data-title]:hover:after {
5646
opacity: 1;
5747
}
58-
.block-wrapper:hover > .block-edit-buttons .up-button:after, .block-wrapper.active > .block-edit-buttons .up-button:after,
59-
.category-blocks:hover > .block-edit-buttons .up-button:after,
60-
.category-blocks.active > .block-edit-buttons .up-button:after {
48+
.block-wrapper:hover > .block-edit-buttons .up-button:after,
49+
.category-blocks:hover > .block-edit-buttons .up-button:after {
6150
left: 0;
6251
}
63-
.block-wrapper:hover > .block-edit-buttons .delete-button:after, .block-wrapper.active > .block-edit-buttons .delete-button:after,
64-
.category-blocks:hover > .block-edit-buttons .delete-button:after,
65-
.category-blocks.active > .block-edit-buttons .delete-button:after {
52+
.block-wrapper:hover > .block-edit-buttons .delete-button:after,
53+
.category-blocks:hover > .block-edit-buttons .delete-button:after {
6654
right: 0;
6755
}
68-
.block-wrapper:hover > .block-edit-buttons .down-button:after, .block-wrapper.active > .block-edit-buttons .down-button:after,
69-
.category-blocks:hover > .block-edit-buttons .down-button:after,
70-
.category-blocks.active > .block-edit-buttons .down-button:after {
56+
.block-wrapper:hover > .block-edit-buttons .down-button:after,
57+
.category-blocks:hover > .block-edit-buttons .down-button:after {
7158
top: 32px;
7259
right: 0;
7360
transform: rotate(180deg);
7461
}
75-
.block-wrapper:hover > .block-edit-buttons .change-layout-options:after, .block-wrapper.active > .block-edit-buttons .change-layout-options:after,
76-
.category-blocks:hover > .block-edit-buttons .change-layout-options:after,
77-
.category-blocks.active > .block-edit-buttons .change-layout-options:after {
62+
.block-wrapper:hover > .block-edit-buttons .change-layout-options:after,
63+
.category-blocks:hover > .block-edit-buttons .change-layout-options:after {
7864
left: 0;
7965
}
8066

‎stylesheets/main.min.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)