Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use CSS grid for services dropdown #242

Merged
merged 9 commits into from
Dec 13, 2024
Merged

Use CSS grid for services dropdown #242

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
5975847
Use CSS grid for services dropdown
maxschmeling Dec 13, 2024
ad89164
Fix formatting
maxschmeling Dec 13, 2024
2ddc2b7
Change alignment on menu items
maxschmeling Dec 13, 2024
69f5422
Adjust dropdown popover spacing to match designs
brookewp Dec 13, 2024
e4bf638
CSS cleanup
brookewp Dec 13, 2024
7c78626
Update dropdown icon size
brookewp Dec 13, 2024
dca1354
Fix sheets icon
brookewp Dec 13, 2024
99e0e51
adjust icon size for http and salesforce
brookewp Dec 13, 2024
4d0eb98
Update dropdown button
brookewp Dec 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 17 additions & 12 deletions src/data-sources/components/AddDataSourceDropdown.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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%;
}
brookewp marked this conversation as resolved.
Show resolved Hide resolved

.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
Loading