Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ <h4 class="my-0 font-semibold text-base text-on-surface">Add New Block</h4>
@if (!isEditMode) {
<mat-stepper
#stepper
class="rounded-lg border grow mat-stepper-starched shadow-sm"
class="rounded-lg grow mat-stepper-starched shadow-sm"
labelPosition="bottom"
[animationDuration]="0"
[linear]="true"
Expand Down Expand Up @@ -79,7 +79,7 @@ <h4 class="my-0 font-semibold text-base text-on-surface">Add New Block</h4>
<ng-template matStepLabel>Block Name</ng-template>
<div #blockNameStepContent class="flex flex-col h-full">
<ng-container *ngTemplateOutlet="blockCreationStepOne; context: { nameControl }"></ng-container>
<div class="flex items-center justify-end pt-4 border-t border-outline/20">
<div class="flex items-center justify-end pt-4">
<button type="button" matButton="filled" (click)="validateFirstStepAndNext(nameControl)">
Next
<mat-icon class="material-icons-outlined mat-icon-18 mat-icon-suffix">navigate_next</mat-icon>
Expand All @@ -92,7 +92,7 @@ <h4 class="my-0 font-semibold text-base text-on-surface">Add New Block</h4>
<ng-template matStepLabel>Configure Method</ng-template>
<div class="flex flex-col h-full">
<ng-container *ngTemplateOutlet="createBlockConfigureMethodTemplate"></ng-container>
<div class="flex items-center justify-between pt-4 border-t border-outline/20">
<div class="flex items-center justify-between pt-4">
<button type="button" matButton="filled" class="flat-default" matStepperPrevious>
<mat-icon class="material-icons-outlined mat-icon-18 mat-icon-prefix">navigate_before</mat-icon
>Back
Expand All @@ -110,7 +110,7 @@ <h4 class="my-0 font-semibold text-base text-on-surface">Add New Block</h4>
<ng-template matStepLabel>Authorization Setup</ng-template>
<div #authorizationStepContent class="flex flex-col h-full">
<ng-container *ngTemplateOutlet="authorizationSetup"></ng-container>
<div class="flex items-center justify-between pt-4 border-t border-outline/20">
<div class="flex items-center justify-between pt-4">
<button type="button" matButton="filled" class="flat-default" matStepperPrevious>
<mat-icon class="material-icons-outlined mat-icon-18 mat-icon-prefix">navigate_before</mat-icon
>Back
Expand All @@ -136,7 +136,7 @@ <h4 class="my-0 font-semibold text-base text-on-surface">Add New Block</h4>
<ng-template matStepLabel>Branding</ng-template>
<div class="flex flex-col h-full">
<ng-container *ngTemplateOutlet="brandingStepContent"></ng-container>
<div class="flex items-center justify-between pt-4 border-t border-outline/20">
<div class="flex items-center justify-between pt-4">
<button type="button" matButton="filled" (click)="updateFeature('branding')">Update</button>
<button type="button" matButton="filled" matStepperNext>
Next<mat-icon class="material-icons-outlined mat-icon-18 mat-icon-suffix"
Expand All @@ -154,7 +154,7 @@ <h4 class="my-0 font-semibold text-base text-on-surface">Add New Block</h4>
<ng-template matStepLabel>Integration Choice</ng-template>
<div class="flex flex-col justify-between h-full">
<ng-container *ngTemplateOutlet="integrationChoice"></ng-container>
<div class="flex items-center justify-between pt-4 border-t border-outline/20">
<div class="flex items-center justify-between pt-4">
<button type="button" matButton="filled" class="flat-default" matStepperPrevious>
<mat-icon class="material-icons-outlined mat-icon-18 mat-icon-prefix">navigate_before</mat-icon
>Back
Expand All @@ -172,7 +172,7 @@ <h4 class="my-0 font-semibold text-base text-on-surface">Add New Block</h4>
<ng-template matStepLabel>Organization Details</ng-template>
<div class="flex flex-col justify-between h-full">
<ng-container *ngTemplateOutlet="organizationDetails"></ng-container>
<div class="flex items-center justify-between pt-4 border-t border-outline/20">
<div class="flex items-center justify-between pt-4">
<button type="button" matButton="filled" class="flat-default" matStepperPrevious>
<mat-icon class="material-icons-outlined mat-icon-18 mat-icon-prefix">navigate_before</mat-icon
>Back
Expand Down Expand Up @@ -736,10 +736,9 @@ <h2 mat-dialog-title class="m-0">{{ getSelectedServiceName() }}</h2>
</div>
}
</ng-template>

<ng-template #previewAuthorization let-authorizationDetails="authorizationDetails" let-previewVersion="previewVersion">
<div
class="auth-credentials px-6 w-[350px] border rounded-8 max-h-[650px] overflow-y-auto max-lg:w-full"
class="auth-credentials px-6 w-[350px] border border-color rounded-8 max-h-[650px] overflow-y-auto max-lg:w-full"
[class.dark]="featureForm.get('brandingDetails.theme')?.value === WidgetTheme.Dark"
[style.--branding-primary-color]="getEffectivePrimaryColor()"
[style.--branding-button-color]="featureForm.get('brandingDetails.button_color')?.value || '#19E6CE'"
Expand Down Expand Up @@ -1096,6 +1095,7 @@ <h2 class="mat-h2 font-semibold text-light-gray mb-0" [style.color]="getEffectiv
<div class="flex items-center justify-start mt-6">
<button type="button" matButton="filled" (click)="previewFeature()">Preview</button>
</div>
<!-- <div id="userProxyContainer"></div> -->
}
</ng-template>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ <h4 class="my-0 text-secondary mat-body-1 font-semibold">Blocks</h4>
<span
[matTooltip]="element.reference_id"
matTooltipPosition="above"
class="cursor-pointer font-mono text-xs px-2 py-0.5 rounded-4 min-w-[150px]"
class="cursor-default"
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This change removes several styling classes (font-mono text-xs px-2 py-0.5 rounded-4 min-w-[150px]) that affect the appearance of the reference ID display. Was this intentional? If the goal was just to change the cursor style, you might want to keep the other styling classes to maintain the visual design.

>
{{
element.reference_id?.length > 15
Expand Down
11 changes: 6 additions & 5 deletions apps/36-blocks/src/app/layout/layout.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,12 @@
[class.mat-drawer-toggle-btn-hover]="isSideNavOpen()"
[class]="!isSideNavOpen() ? 'overflow-hidden !w-[56px] p-1.5' : 'w-[246px]'"
>
<div class="flex items-center py-2" [class]="!isSideNavOpen() ? 'flex-col gap-2' : ''">
<div class="flex items-center pt-2" [class]="!isSideNavOpen() ? 'flex-col gap-2' : ''">
<div
class="flex items-center grow gap-2 mat-drawer-header-title px-4"
class="flex items-center grow gap-2 mat-drawer-header-title pr-2"
#clientsMenuTrigger="matMenuTrigger"
[matMenuTriggerFor]="clientsMenu"
[class]="!isSideNavOpen() ? 'pl-2' : 'pl-4'"
>
@if (!isSideNavOpen()) {
<mat-icon class="mat-icon-22">apps</mat-icon>
Expand Down Expand Up @@ -65,14 +66,14 @@
</div>
</div>
<button
matButton="tonal"
class="mat-drawer-toggle-btn mat-icon-32 !p-0 !min-w-0"
matIconButton
class="sidebar-toggle-btn"
(click)="toggleSideBarEvent()"
[matTooltip]="isSideNavOpen() ? 'Collapse Menu' : 'Expand Menu'"
matTooltipPosition="right"
type="button"
>
<mat-icon class="!m-0">{{
<mat-icon>{{
isSideNavOpen() ? 'keyboard_double_arrow_left' : 'keyboard_double_arrow_right'
}}</mat-icon>
</button>
Expand Down
12 changes: 12 additions & 0 deletions apps/36-blocks/src/app/layout/layout.component.scss
Original file line number Diff line number Diff line change
@@ -1,3 +1,15 @@
:not(.collapsed-sidebar) {
.mat-drawer-content {
.sidebar-toggle-btn {
opacity: 0;
transition: opacity 0.2s ease;
}

&:hover .sidebar-toggle-btn {
opacity: 1;
}
}
}
:not(.collapsed-sidebar) {
@media (max-width: 992px) {
.mat-drawer-content {
Expand Down
27 changes: 12 additions & 15 deletions apps/36-blocks/src/app/users/management/management.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -63,11 +63,13 @@
<ng-container matColumnDef="permissions">
<th mat-header-cell *matHeaderCellDef>Permissions</th>
<td mat-cell *matCellDef="let element" data-label="Permissions">
<div class="flex flex-wrap gap-1.5 py-2">
<mat-chip-set>
@for (permission of element.permissionsList; track permission.name) {
{{ permission.name }}
<mat-chip>
{{ permission.name }}
</mat-chip>
}
</div>
</mat-chip-set>
</td>
</ng-container>

Expand Down Expand Up @@ -235,31 +237,26 @@

<!-- ── Snippet Tab ── -->
@if (selectedSectionIndex === 2) {
<div class="flex flex-col gap-4 max-w-2xl">
<div class="flex flex-col gap-4">
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removing the max-width constraint from the snippet container could make code snippets stretch too wide on larger screens, reducing readability. Consider keeping a reasonable maximum width.

<div class="card-with-header">
<div class="card-with-header--header justify-between">
<div class="flex items-center gap-2">
<mat-icon class="!text-base !w-4 !h-4 secondary-text-color opacity-70">code</mat-icon>
<mat-icon class="!text-base !w-4 mt-1">code</mat-icon>
<span class="mat-body-2 font-semibold">Integration Script</span>
</div>
<proxy-copy-button [copyData]="userManagementScript" tooltip="Copy Script"></proxy-copy-button>
</div>
<div class="bg-color overflow-auto code-snippet-view">
<markdown [data]="userManagementScript | language: 'javascript'"></markdown>
</div>
<div class="bg-color flex gap-2 px-4 py-3 border-t border-color bg-color">
<mat-icon class="!text-sm !w-3.5 !h-3.5 secondary-text-color opacity-60 shrink-0 mt-0.5"
>info</mat-icon
>
<p class="mat-body-2 text-secondary m-0 text-xs">
Add this script to your page to integrate the user management component.
</p>
</div>
<p class="mat-body-2 text-color px-4 py-3 m-0 text-xs">
Add this script to your page to integrate the user management component.
</p>
</div>
<div class="card-with-header">
<div class="card-with-header--header justify-between">
<div class="flex items-center gap-2">
<mat-icon class="!text-base !w-4 !h-4 secondary-text-color opacity-70">html</mat-icon>
<mat-icon>html</mat-icon>
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The HTML icon is missing the same sizing classes that are applied to the code icon above it. This will cause inconsistent icon sizing in the UI.

Suggested change
<mat-icon>html</mat-icon>
<mat-icon class="!text-base !w-4 mt-1">html</mat-icon>

<span class="mat-body-2 font-semibold">Container HTML</span>
</div>
<proxy-copy-button [copyData]="userProxyContainerHtml" tooltip="Copy Code"></proxy-copy-button>
Expand All @@ -275,7 +272,7 @@
<!-- ── Settings Tab ── -->
@if (selectedSectionIndex === 3) {
<div class="max-w-xl">
<p class="mat-body-2 text-secondary font-medium mb-6">Default Roles</p>
<p class="mat-body-2 font-medium mb-6">Default Roles</p>
<form [formGroup]="defaultRolesForm" class="flex flex-col gap-6">
<mat-card class="outline-card p-5">
<mat-card-content class="flex items-start gap-3 !p-0">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ import { IPaginatedResponse } from '@proxy/models/root-models';
import { UserComponentStore } from '../user/user.store';
import { MatDialog, MatDialogRef } from '@angular/material/dialog';
import { PROXY_DOM_ID } from '@proxy/constant';
import { MatChipsModule } from '@angular/material/chips';

interface IRole {
id: number;
Expand Down Expand Up @@ -72,6 +73,7 @@ interface IRole {
ServiceListComponent,
CopyButtonComponent,
MarkdownModule,
MatChipsModule,
],
templateUrl: './management.component.html',
styleUrls: ['./management.component.scss'],
Expand Down
4 changes: 4 additions & 0 deletions apps/36-blocks/src/assets/scss/theme/_default-theme.scss
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ html {
@include mat.system-level-typography(theme.$light-theme);
--mat-sys-outline: var(--color-common-border);
--mat-sys-on-surface: var(--proxy-neutral-40);
--mat-list-list-item-label-text-size: 0.875rem;
}

/* System default: follow OS dark mode when body has no theme class */
Expand All @@ -22,6 +23,7 @@ html {
@include mat.system-level-colors(theme.$dark-theme);
--mat-sys-outline: var(--color-common-border);
--mat-sys-on-surface: var(--proxy-neutral-80);
--mat-list-list-item-label-text-size: 0.875rem;
}
}

Expand All @@ -31,6 +33,7 @@ body.dark-theme {
@include mat.system-level-colors(theme.$dark-theme);
--mat-sys-outline: var(--color-common-border);
--mat-sys-on-surface: var(--proxy-neutral-80);
--mat-list-list-item-label-text-size: 0.875rem;
}

/* Force light theme (overrides OS dark preference) */
Expand All @@ -39,4 +42,5 @@ body.light-theme {
@include mat.system-level-colors(theme.$light-theme);
--mat-sys-outline: var(--color-common-border);
--mat-sys-on-surface: var(--proxy-neutral-40);
--mat-list-list-item-label-text-size: 0.875rem;
}
1 change: 1 addition & 0 deletions apps/36-blocks/src/styles.scss
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
body {
background: var(--mat-sys-surface);
color: var(--mat-sys-on-surface);
font-size: 0.875rem;
}
.text-color {
color: var(--mat-sys-on-surface);
Expand Down
Loading