Button with template instead of switch to toggle view mode.
This commit is contained in:
Mateus Machado Luna
parent
e6903d37fa
commit
52f6ab3023
|
|
@ -155,6 +155,64 @@
|
|||
padding: 0 12px;
|
||||
color: #454647; }
|
||||
|
||||
.components-panel__body .collection-carousel-view-modes {
|
||||
display: flex;
|
||||
margin: 12px 0 24px 0; }
|
||||
.components-panel__body .collection-carousel-view-modes button {
|
||||
background: transparent;
|
||||
border: 1px solid #cbcbcb;
|
||||
border-radius: 5px;
|
||||
padding: 2px;
|
||||
margin: 0;
|
||||
width: calc(50% - 6px);
|
||||
flex-shrink: 0;
|
||||
cursor: pointer;
|
||||
transition: border ease 0.5s, opacity ease 0.5; }
|
||||
.components-panel__body .collection-carousel-view-modes button.collection-carousel-view-mode-grid {
|
||||
margin-right: 6px; }
|
||||
.components-panel__body .collection-carousel-view-modes button.collection-carousel-view-mode-grid div {
|
||||
display: grid;
|
||||
grid-template-columns: 33% 33% 33%;
|
||||
grid-template-rows: 50% 50%;
|
||||
grid-column-gap: 2px;
|
||||
grid-row-gap: 2px;
|
||||
width: 60px;
|
||||
height: 40px;
|
||||
margin: 4px auto 8px auto; }
|
||||
.components-panel__body .collection-carousel-view-modes button.collection-carousel-view-mode-grid div > div:first-of-type {
|
||||
grid-column-start: 1;
|
||||
grid-column-end: span 2;
|
||||
grid-row-start: 1;
|
||||
grid-row-end: span 2;
|
||||
width: 41px;
|
||||
height: 42px; }
|
||||
.components-panel__body .collection-carousel-view-modes button.collection-carousel-view-mode-grid div > div {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: #555758;
|
||||
transition: background-color ease 0.5s; }
|
||||
.components-panel__body .collection-carousel-view-modes button.collection-carousel-view-mode-thumbnail {
|
||||
margin-left: 6px; }
|
||||
.components-panel__body .collection-carousel-view-modes button.collection-carousel-view-mode-thumbnail div {
|
||||
display: block;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
background: #555758;
|
||||
margin: 4px auto 8px auto;
|
||||
transition: background-color ease 0.5s; }
|
||||
.components-panel__body .collection-carousel-view-modes button label {
|
||||
font-size: 0.75rem;
|
||||
color: #555758; }
|
||||
.components-panel__body .collection-carousel-view-modes button.is-active {
|
||||
border: 2px solid #298596; }
|
||||
.components-panel__body .collection-carousel-view-modes button.is-active.collection-carousel-view-mode-thumbnail div, .components-panel__body .collection-carousel-view-modes button.is-active.collection-carousel-view-mode-grid div > div {
|
||||
background-color: #298596; }
|
||||
.components-panel__body .collection-carousel-view-modes button:hover {
|
||||
opacity: 0.9;
|
||||
border-width: 2px; }
|
||||
.components-panel__body .collection-carousel-view-modes button:hover button {
|
||||
background: #f2f2f2; }
|
||||
|
||||
.wp-block-tainacan-carousel-collections-list {
|
||||
margin: 2rem 0px; }
|
||||
.wp-block-tainacan-carousel-collections-list .spinner-container {
|
||||
|
|
@ -286,10 +344,11 @@
|
|||
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin: 16px;
|
||||
margin: 16px 32px 16px 0px;
|
||||
width: calc(16.666% - 32px);
|
||||
min-width: calc(16.666% - 32px); }
|
||||
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item.collection-list-item-grid {
|
||||
margin: 16px;
|
||||
width: calc(25% - 16px);
|
||||
min-width: calc(25% - 16px); }
|
||||
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item a {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,5 +1,86 @@
|
|||
@import '../../gutenberg-blocks-style.scss';
|
||||
|
||||
.components-panel__body .collection-carousel-view-modes {
|
||||
display: flex;
|
||||
margin: 12px 0 24px 0;
|
||||
|
||||
button {
|
||||
background: transparent;
|
||||
border: 1px solid #cbcbcb;
|
||||
border-radius: 5px;
|
||||
padding: 2px;
|
||||
margin: 0;
|
||||
width: calc(50% - 6px);
|
||||
flex-shrink: 0;
|
||||
cursor: pointer;
|
||||
transition: border ease 0.5s, opacity ease 0.5;
|
||||
|
||||
&.collection-carousel-view-mode-grid {
|
||||
margin-right: 6px;
|
||||
div {
|
||||
display: grid;
|
||||
grid-template-columns: 33% 33% 33%;
|
||||
grid-template-rows: 50% 50%;
|
||||
grid-column-gap: 2px;
|
||||
grid-row-gap: 2px;
|
||||
width: 60px;
|
||||
height: 40px;
|
||||
margin: 4px auto 8px auto;
|
||||
|
||||
&>div:first-of-type {
|
||||
grid-column-start: 1;
|
||||
grid-column-end: span 2;
|
||||
grid-row-start: 1;
|
||||
grid-row-end: span 2;
|
||||
width: 41px;
|
||||
height: 42px;
|
||||
}
|
||||
|
||||
&>div {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: #555758;
|
||||
transition: background-color ease 0.5s;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.collection-carousel-view-mode-thumbnail {
|
||||
margin-left: 6px;
|
||||
|
||||
div {
|
||||
display: block;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
background: #555758;
|
||||
margin: 4px auto 8px auto;
|
||||
transition: background-color ease 0.5s;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: 0.75rem;
|
||||
color: #555758;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
border: 2px solid #298596;
|
||||
|
||||
&.collection-carousel-view-mode-thumbnail div,
|
||||
&.collection-carousel-view-mode-grid div>div {
|
||||
background-color: #298596;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
opacity: 0.9;
|
||||
border-width: 2px;
|
||||
button {
|
||||
background: #f2f2f2;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.wp-block-tainacan-carousel-collections-list {
|
||||
margin: 2rem 0px;
|
||||
|
||||
|
|
@ -162,11 +243,12 @@
|
|||
li.collection-list-item {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin: 16px;
|
||||
margin: 16px 32px 16px 0px;
|
||||
width: calc(16.666% - 32px);
|
||||
min-width: calc(16.666% - 32px);
|
||||
|
||||
&.collection-list-item-grid {
|
||||
margin: 16px;
|
||||
width: calc(25% - 16px);
|
||||
min-width: calc(25% - 16px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -291,7 +291,7 @@ registerBlockType('tainacan/carousel-collections-list', {
|
|||
initialOpen={ true }
|
||||
>
|
||||
<div>
|
||||
<ToggleControl
|
||||
{/* <ToggleControl
|
||||
label={__('Show collection\'s thumbnail', 'tainacan')}
|
||||
help={ !showCollectionThumbnail ? __('Toggle to show items grid instead of collection\'s thumbnail', 'tainacan') : __('Do not show collection\'s thumbnail instead of items grid', 'tainacan')}
|
||||
checked={ showCollectionThumbnail ? showCollectionThumbnail : false }
|
||||
|
|
@ -301,7 +301,35 @@ registerBlockType('tainacan/carousel-collections-list', {
|
|||
setContent();
|
||||
}
|
||||
}
|
||||
/>
|
||||
/> */}
|
||||
<div className="collection-carousel-view-modes">
|
||||
<button
|
||||
onClick={ () => {
|
||||
showCollectionThumbnail = false;
|
||||
setAttributes({ showCollectionThumbnail: showCollectionThumbnail });
|
||||
setContent();
|
||||
}
|
||||
}
|
||||
className={'collection-carousel-view-mode-grid' + (showCollectionThumbnail ? '' : ' is-active')}>
|
||||
<div>
|
||||
<div />
|
||||
<div />
|
||||
<div />
|
||||
</div>
|
||||
<label>{ __('Items\'s grid', 'tainacan') }</label>
|
||||
</button>
|
||||
<button
|
||||
onClick={ () => {
|
||||
showCollectionThumbnail = true;
|
||||
setAttributes({ showCollectionThumbnail: showCollectionThumbnail });
|
||||
setContent();
|
||||
}
|
||||
}
|
||||
className={'collection-carousel-view-mode-thumbnail' + (showCollectionThumbnail ? ' is-active' : '')}>
|
||||
<div />
|
||||
<label>{ __('Thumbnail', 'tainacan') }</label>
|
||||
</button>
|
||||
</div>
|
||||
<ToggleControl
|
||||
label={__('Hide name', 'tainacan')}
|
||||
help={ !hideName ? __('Toggle to hide collection\'s name', 'tainacan') : __('Do not hide collection\'s name', 'tainacan')}
|
||||
|
|
|
|||
Loading…
Reference in New Issue