Skip to content

Demo connection #1197

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

Merged
lyubov-voloshko merged 4 commits into from
Jun 5, 2025
Merged

Demo connection #1197

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c703410
Table view: fix tooltip text
lyubov-voloshko Jun 4, 2025
7114fb5
home page:
lyubov-voloshko Jun 5, 2025
b3eb15a
fix unit tests
lyubov-voloshko Jun 5, 2025
4459123
disable Show demo admin panels in Demo mode
lyubov-voloshko Jun 5, 2025
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
1 change: 1 addition & 0 deletions frontend/src/app/components/company/company.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -474,6 +474,7 @@ <h3>Configure DNS Records</h3>
<mat-slide-toggle class="test-connections-toggle" *ngIf="currentUser && currentUser.role === 'ADMIN'"
name="showTestConnections"
data-testid="company-test-connections-switch"
[disabled]="isDemo"
[(ngModel)]="company.show_test_connections"
(change)="changeShowTestConnections($event.checked)">
Show demo admin panels
Expand Down
328 changes: 14 additions & 314 deletions frontend/src/app/components/connections-list/connections-list.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,331 +70,31 @@
opacity: 1;
}

.empty-state {
display: flex;
flex-direction: column;
align-items: center;
}

.empty-state_bottom {
margin-top: auto;
}

.empty-state__text {
font-size: 12px !important;
font-weight: 500 !important;
margin-top: 56px !important;
margin-bottom: 0 !important;
text-align: center;
text-transform: uppercase;
}

.showAllButton {
margin-top: 20px;
margin-bottom: -56px;
}

@media (width <= 600px) {
.showAllButton {
margin-bottom: 0;
}
}

.addButton {
margin-top: -44px;
height: 40px;
}

.fabActions {
display: flex;
align-items: center;
gap: 12px;
align-self: flex-end;
margin-top: 20px;
}

.zapier-link {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
border: 1px solid rgba(0, 0, 0, 0.12);
border-radius: 24px;
box-shadow:
0px 1px 10px 0px rgba(0, 0, 0, 0.08),
0px 4px 5px 0px rgba(0, 0, 0, 0.05),
0px 2px 4px 0px rgba(0, 0, 0, 0.06);
color: var(--color-accentedPalette-500);
text-decoration: none;
height: 48px;
padding: 8px;
width: 140px;
}

.zapier-link__caption {
font-size: 12px;
}

.zapier-link__logo {
border-radius: 8px;
height: 32px;
width: 32px;
}

.zapier-link__icon {
color: var(--mat-sidenav-content-text-color);
font-size: 16px;
height: 16px;
width: 16px;
}

.fabAddButton {
border-radius: 24px;
box-shadow:
0px 1px 10px 0px rgba(0, 0, 0, 0.2),
0px 4px 5px 0px rgba(0, 0, 0, 0.12),
0px 2px 4px 0px rgba(0, 0, 0, 0.14);
height: 48px !important;
width: 178px;
}

@media (width <= 600px) {
.fabAddButton {
position: fixed;
bottom: max(64px, 10vw);
z-index: 1;
}
}

.connections {
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
width: 100%;
}

@media (width <= 600px) {
.connections {
flex-direction: column;
flex-wrap: nowrap;
}
}

.connectionItem {
flex: 0 0 calc((100% - 40px)/3);
}

@media (width <= 600px) {
.connectionItem {
flex: initial;
}
}

.connection {
display: flex;
flex-direction: column;
border: 1px solid rgba(0, 0, 0, 0.12);
border-radius: 4px;
color: inherit;
height: 148px;
padding: 20px 12px;
text-decoration: none;
width: 100%;
transition: border 200ms, box-shadow 200ms;
}

@media (prefers-color-scheme: dark) {
.connection {
background-color: #000;
border: 1px solid #313131;
}
}

.connection:hover {
border: 1px solid var(--color-primaryPalette-500);
box-shadow:
0px 4px 5px 0px rgba(0, 0, 0, 0.2),
0px 3px 14px 0px rgba(0, 0, 0, 0.12),
0px 8px 10px 0px rgba(0, 0, 0, 0.14);
}

@media (prefers-color-scheme: dark) {
.connection:hover {
border: 1px solid #636363;
}
.home {
display: contents;
}

.connectionLogoPreview {
flex-shrink: 0;
.demoHome {
display: flex;
/* flex-direction: column; */
/* align-items: flex-start; */
align-items: center;
/* justify-content: center; */
gap: 4px;
background-color: var(--color-primaryPalette-500);
border-radius: 2px;
color: #fff;
font-size: 20px;
font-weight: 900;
height: 52px;
margin-bottom: 4px;
padding: 8px;
}

.connectionLogoPreview__logo {
height: 100%;
object-fit: contain;
}

.connectionLogoPreview .connectionLogoPreview__name {
margin-bottom: 0;
font-size: 20px;
}

.connectionInfo {
display: grid;
grid-template-columns: auto 40px;
flex-direction: column-reverse;
align-items: center;
}

.connectionInfo .connectionInfo__connectionTitle {
margin-bottom: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
}

.connections-divider {
margin: 36px auto 32px;
position: relative;
margin: 44px auto 52px;
width: calc(100% - 16px);
}

.testConnections {
list-style: none;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-gap: 20px;
margin-top: 48px;
width: 100%;
}

@media (width <= 600px) {
.testConnections {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

.testConnectionLink {
display: flex;
align-items: center;
justify-content: space-between;
border-radius: 4px;
box-shadow:
0px 1px 3px 0px rgba(0, 0, 0, 0.2),
0px 2px 2px 0px rgba(0, 0, 0, 0.12),
0px 0px 2px 0px rgba(0, 0, 0, 0.14);
color: inherit;
font-weight: 600;
height: 48px;
padding: 0 16px;
text-decoration: none;
transition: box-shadow 200ms, background 200ms, border 200ms;
}

@media (width <= 600px) {
.testConnectionLink {
justify-content: flex-start;
}
}

@media (prefers-color-scheme: light) {
.testConnectionLink {
background: var(--mat-sidenav-content-background-color);
border: 1px solid var(--mat-sidenav-content-background-color);
}

.testConnectionLink:hover {
box-shadow:
0px 1px 3px 0px rgba(0, 0, 0, 0.2),
0px 2px 2px 0px rgba(0, 0, 0, 0.12),
0px 0px 2px 0px rgba(0, 0, 0, 0.14);
}
}

@media (prefers-color-scheme: dark) {
.testConnectionLink {
background: #404040;
border: 1px solid #404040;
}

.testConnectionLink:hover {
background: #212121;
border: 1px solid rgba(255, 255, 255, 0.75);
box-shadow:
0px 1px 3px 0px rgba(255, 255, 255, 0.1),
0px 2px 2px 0px rgba(255, 255, 255, 0.08),
0px 0px 2px 0px rgba(255, 255, 255, 0.12);
}

.testConnectionLink:hover .connection__goIcon {
color: var(--color-accentedPalette-500);
}
}

.testConnectionLink:hover {
box-shadow:
0px 1px 5px 0px rgba(0, 0, 0, 0.2),
0px 3px 4px 0px rgba(0, 0, 0, 0.12),
0px 2px 4px 0px rgba(0, 0, 0, 0.14);
}

.testConnectionLink:active {
background: rgba(0, 0, 0, 0.16);
}

.testConnectionLink__iconBox {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
background-image: radial-gradient(#fff 1em, var(--color-accentedPalette-500) 1em);
border-radius: 4px;
height: 36px;
margin-right: 12px;
width: 36px;
}

.testConnectionLink__icon {
flex-shrink: 0;
height: 20px;
width: 20px;
}

.connection__goIcon {
grid-row: 1 / span 2;
grid-column: 2;
margin-left: auto;
opacity: 0.65;
transition: opacity 200ms, color 200ms;
}

@media (width <= 600px) {
.testConnectionLink .connection__goIcon {
display: none;
}
}

.testConnectionLink:hover .connection__goIcon,
.connection:hover .connection__goIcon{
opacity: 1;
}

.disabled {
color: rgba(0,0,0,.26);
.connections-divider_or::after {
content: 'OR';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: var(--mat-sidenav-content-background-color);
padding: 0 8px;
}

.placeholder {
Expand Down
Loading