Skip to content

Commit

Permalink
Use CSS grid for services dropdown (#242)
Browse files Browse the repository at this point in the history 
* Use CSS grid for services dropdown

* Fix formatting

* Change alignment on menu items

* Adjust dropdown popover spacing to match designs

Signed-off-by: brookewp <[email protected]>

* CSS cleanup

Signed-off-by: brookewp <[email protected]>

* Update dropdown icon size

Signed-off-by: brookewp <[email protected]>

* Fix sheets icon

Signed-off-by: brookewp <[email protected]>

* adjust icon size for http and salesforce

Signed-off-by: brookewp <[email protected]>

* Update dropdown button

Signed-off-by: brookewp <[email protected]>

---------

Signed-off-by: brookewp <[email protected]>
Co-authored-by: brookewp <[email protected]>
  • Loading branch information
@maxschmeling @brookewp
maxschmeling and brookewp authored Dec 13, 2024
1 parent 8519705 commit 6a13981
Show file tree
Hide file tree
Showing 3 changed files with 202 additions and 31 deletions.
29 changes: 17 additions & 12 deletions src/data-sources/components/AddDataSourceDropdown.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,11 +25,15 @@ export const AddDataSourceDropdown = () => {
className="rdb-settings-page_add-data-source-dropdown"
icon={ null }
label={ __( 'Connect new data source', 'remote-data-blocks' ) }
popoverProps={ {
offset: 8,
} }
text={ __( 'Connect New', 'remote-data-blocks' ) }
toggleProps={ {
className: 'rdb-settings-page_add-data-source-btn',
variant: 'primary',
showTooltip: false,
__next40pxDefaultSize: true,
} }
children={ ( { onClose } ) => (
<MenuGroup>
Expand Down Expand Up @@ -60,18 +64,19 @@ export const AddDataSourceDropdown = () => {
value: 'generic-http',
},
].map( ( { icon, label, value } ) => (
<MenuItem
className={ `rdb-settings-page_add-data-source-btn-${ value }` }
key={ value }
icon={ icon }
iconPosition="left"
onClick={ () => {
onAddDataSource( value );
onClose();
} }
>
{ label }
</MenuItem>
<div key={ value } className="rdb-settings-page_add-data-source-btn-wrapper">
<MenuItem
className={ `rdb-settings-page_add-data-source-btn-${ value }` }
icon={ icon }
iconPosition="left"
onClick={ () => {
onAddDataSource( value );
onClose();
} }
>
{ label }
</MenuItem>
</div>
) ) }
</MenuGroup>
) }
Expand Down
159 changes: 150 additions & 9 deletions src/settings/icons/GoogleSheetsIcon.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,156 @@
import { SVG } from '@wordpress/primitives';

export const GoogleSheetsIcon: JSX.Element = (
<SVG width="24" height="24" viewBox="0 0 49 67" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M29.5833333,0 L4.4375,0 C1.996875,0 0,1.996875 0,4.4375 L0,60.6458333 C0,63.0864583 1.996875,65.0833333 4.4375,65.0833333 L42.8958333,65.0833333 C45.3364583,65.0833333 47.3333333,63.0864583 47.3333333,60.6458333 L47.3333333,17.75 L29.5833333,0 Z"
fill="#0F9D58"
/>
<path
d="M11.8333333,31.8020833 L11.8333333,53.25 L35.5,53.25 L35.5,31.8020833 L11.8333333,31.8020833 Z M22.1875,50.2916667 L14.7916667,50.2916667 L14.7916667,46.59375 L22.1875,46.59375 L22.1875,50.2916667 Z M22.1875,44.375 L14.7916667,44.375 L14.7916667,40.6770833 L22.1875,40.6770833 L22.1875,44.375 Z M22.1875,38.4583333 L14.7916667,38.4583333 L14.7916667,34.7604167 L22.1875,34.7604167 L22.1875,38.4583333 Z M32.5416667,50.2916667 L25.1458333,50.2916667 L25.1458333,46.59375 L32.5416667,46.59375 L32.5416667,50.2916667 Z M32.5416667,44.375 L25.1458333,44.375 L25.1458333,40.6770833 L32.5416667,40.6770833 L32.5416667,44.375 Z M32.5416667,38.4583333 L25.1458333,38.4583333 L25.1458333,34.7604167 L32.5416667,34.7604167 L32.5416667,38.4583333 Z"
fill="#F1F1F1"
/>
<SVG
width="49px"
height="67px"
viewBox="0 0 49 67"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<path
d="M29.5833333,0 L4.4375,0 C1.996875,0 0,1.996875 0,4.4375 L0,60.6458333 C0,63.0864583 1.996875,65.0833333 4.4375,65.0833333 L42.8958333,65.0833333 C45.3364583,65.0833333 47.3333333,63.0864583 47.3333333,60.6458333 L47.3333333,17.75 L29.5833333,0 Z"
id="path-1"
></path>
<linearGradient
x1="50.0053945%"
y1="8.58610612%"
x2="50.0053945%"
y2="100.013939%"
id="linearGradient-7"
>
<stop stopColor="#263238" stopOpacity="0.2" offset="0%"></stop>
<stop stopColor="#263238" stopOpacity="0.02" offset="100%"></stop>
</linearGradient>
<radialGradient
cx="3.16804688%"
cy="2.71744318%"
fx="3.16804688%"
fy="2.71744318%"
r="161.248516%"
gradientTransform="translate(0.031680,0.027174),scale(1.000000,0.727273),translate(-0.031680,-0.027174)"
id="radialGradient-16"
>
<stop stopColor="#FFFFFF" stopOpacity="0.1" offset="0%"></stop>
<stop stopColor="#FFFFFF" stopOpacity="0" offset="100%"></stop>
</radialGradient>
</defs>
<g id="Page-1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
<g id="Consumer-Apps-Sheets-Large-VD-R8-" transform="translate(-451.000000, -451.000000)">
<g id="Hero" transform="translate(0.000000, 63.000000)">
<g id="Personal" transform="translate(277.000000, 299.000000)">
<g id="Sheets-icon" transform="translate(174.833333, 89.958333)">
<g id="Group">
<g id="Clipped">
<mask id="mask-2" fill="white">
<use xlinkHref="#path-1"></use>
</mask>
<g id="SVGID_1_"></g>
<path
d="M29.5833333,0 L4.4375,0 C1.996875,0 0,1.996875 0,4.4375 L0,60.6458333 C0,63.0864583 1.996875,65.0833333 4.4375,65.0833333 L42.8958333,65.0833333 C45.3364583,65.0833333 47.3333333,63.0864583 47.3333333,60.6458333 L47.3333333,17.75 L36.9791667,10.3541667 L29.5833333,0 Z"
id="Path"
fill="#0F9D58"
fillRule="nonzero"
mask="url(#mask-2)"
></path>
</g>
<g id="Clipped">
<mask id="mask-4" fill="white">
<use xlinkHref="#path-1"></use>
</mask>
<g id="SVGID_1_"></g>
<path
d="M11.8333333,31.8020833 L11.8333333,53.25 L35.5,53.25 L35.5,31.8020833 L11.8333333,31.8020833 Z M22.1875,50.2916667 L14.7916667,50.2916667 L14.7916667,46.59375 L22.1875,46.59375 L22.1875,50.2916667 Z M22.1875,44.375 L14.7916667,44.375 L14.7916667,40.6770833 L22.1875,40.6770833 L22.1875,44.375 Z M22.1875,38.4583333 L14.7916667,38.4583333 L14.7916667,34.7604167 L22.1875,34.7604167 L22.1875,38.4583333 Z M32.5416667,50.2916667 L25.1458333,50.2916667 L25.1458333,46.59375 L32.5416667,46.59375 L32.5416667,50.2916667 Z M32.5416667,44.375 L25.1458333,44.375 L25.1458333,40.6770833 L32.5416667,40.6770833 L32.5416667,44.375 Z M32.5416667,38.4583333 L25.1458333,38.4583333 L25.1458333,34.7604167 L32.5416667,34.7604167 L32.5416667,38.4583333 Z"
id="Shape"
fill="#F1F1F1"
fillRule="nonzero"
mask="url(#mask-4)"
></path>
</g>
<g id="Clipped">
<mask id="mask-6" fill="white">
<use xlinkHref="#path-1"></use>
</mask>
<g id="SVGID_1_"></g>
<polygon
id="Path"
fill="url(#linearGradient-7)"
fillRule="nonzero"
mask="url(#mask-6)"
points="30.8813021 16.4520313 47.3333333 32.9003646 47.3333333 17.75"
></polygon>
</g>
<g id="Clipped">
<mask id="mask-9" fill="white">
<use xlinkHref="#path-1"></use>
</mask>
<g id="SVGID_1_"></g>
<g id="Group" mask="url(#mask-9)">
<g transform="translate(26.625000, -2.958333)">
<path
d="M2.95833333,2.95833333 L2.95833333,16.2708333 C2.95833333,18.7225521 4.94411458,20.7083333 7.39583333,20.7083333 L20.7083333,20.7083333 L2.95833333,2.95833333 Z"
id="Path"
fill="#87CEAC"
fillRule="nonzero"
></path>
</g>
</g>
</g>
<g id="Clipped">
<mask id="mask-11" fill="white">
<use xlinkHref="#path-1"></use>
</mask>
<g id="SVGID_1_"></g>
<path
d="M4.4375,0 C1.996875,0 0,1.996875 0,4.4375 L0,4.80729167 C0,2.36666667 1.996875,0.369791667 4.4375,0.369791667 L29.5833333,0.369791667 L29.5833333,0 L4.4375,0 Z"
id="Path"
fillOpacity="0.2"
fill="#FFFFFF"
fillRule="nonzero"
mask="url(#mask-11)"
></path>
</g>
<g id="Clipped">
<mask id="mask-13" fill="white">
<use xlinkHref="#path-1"></use>
</mask>
<g id="SVGID_1_"></g>
<path
d="M42.8958333,64.7135417 L4.4375,64.7135417 C1.996875,64.7135417 0,62.7166667 0,60.2760417 L0,60.6458333 C0,63.0864583 1.996875,65.0833333 4.4375,65.0833333 L42.8958333,65.0833333 C45.3364583,65.0833333 47.3333333,63.0864583 47.3333333,60.6458333 L47.3333333,60.2760417 C47.3333333,62.7166667 45.3364583,64.7135417 42.8958333,64.7135417 Z"
id="Path"
fillOpacity="0.2"
fill="#263238"
fillRule="nonzero"
mask="url(#mask-13)"
></path>
</g>
<g id="Clipped">
<mask id="mask-15" fill="white">
<use xlinkHref="#path-1"></use>
</mask>
<g id="SVGID_1_"></g>
<path
d="M34.0208333,17.75 C31.5691146,17.75 29.5833333,15.7642188 29.5833333,13.3125 L29.5833333,13.6822917 C29.5833333,16.1340104 31.5691146,18.1197917 34.0208333,18.1197917 L47.3333333,18.1197917 L47.3333333,17.75 L34.0208333,17.75 Z"
id="Path"
fillOpacity="0.1"
fill="#263238"
fillRule="nonzero"
mask="url(#mask-15)"
></path>
</g>
</g>
<path
d="M29.5833333,0 L4.4375,0 C1.996875,0 0,1.996875 0,4.4375 L0,60.6458333 C0,63.0864583 1.996875,65.0833333 4.4375,65.0833333 L42.8958333,65.0833333 C45.3364583,65.0833333 47.3333333,63.0864583 47.3333333,60.6458333 L47.3333333,17.75 L29.5833333,0 Z"
id="Path"
fill="url(#radialGradient-16)"
fillRule="nonzero"
></path>
</g>
</g>
</g>
</g>
</g>
</SVG>
);

Expand Down
45 changes: 35 additions & 10 deletions src/settings/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,34 +91,42 @@ body {
padding: 24px 48px;
border-bottom: 1px solid var(--Alias-border-border-secondary, #ebebeb);


p {
margin-bottom: 0;
}


.rdb-settings-page_add-data-source-dropdown {
grid-area: 1 / 2 / span 1 / span 1;
justify-self: end;
align-self: center;

.rdb-settings-page_add-data-source-btn.is-opened {
background: #1d35b4;
}
}
}
}

/* Add new source menu */
.components-menu-group {

div {
display: flex;
> div {
display: grid;
grid-template-columns: repeat(3, 1fr);
width: 368px;
align-items: flex-start;
align-content: flex-start;
align-items: start;
align-content: start;
gap: 8px;
padding: 8px 8px 16px 8px;
flex-wrap: wrap;

.rdb-settings-page_add-data-source-btn-wrapper {
height: 100%;
}

.components-button.has-icon.has-text {
display: flex;
width: 112px;
height: 101px;
padding: var(--Spacing-Spacing-Base, 16px);
flex-direction: column;
align-items: center;
Expand All @@ -130,16 +138,33 @@ body {

}

svg {
width: 40px;
height: 40px;
padding: 4px;
}

.components-menu-item__item {
min-width: unset;
margin-right: unset;
text-wrap: auto;
text-align: center;
}
}

.rdb-settings-page_add-data-source-btn-salesforce-b2c svg {
width: 50px;
.components-button.has-icon.has-text.rdb-settings-page_add-data-source-btn-generic-http svg {
padding: 8px;
}

.components-button.has-icon.has-text.rdb-settings-page_add-data-source-btn-salesforce-b2c {

svg {
padding: 0;
}

span.components-menu-item__item {
text-wrap: auto;
min-width: 112px;
}
}
}
}
Expand Down

0 comments on commit 6a13981

Please sign in to comment.