Skip to content

Redesign widget empty state with animated demo table #1647

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
Mar 5, 2026
Merged

Redesign widget empty state with animated demo table #1647

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
f9c38b0
Redesign widget empty state with two-column layout and animated demo …
karinakharchenko Mar 4, 2026
0df3982
Update demo table widget styles: white text for Money/Country, monosp…
karinakharchenko Mar 4, 2026
d9abfea
Merge branch 'main' into widget-empty-state
lyubov-voloshko Mar 5, 2026
0a43bc7
fixes:
lyubov-voloshko Mar 5, 2026
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
73 changes: 0 additions & 73 deletions ...rc/app/components/dashboard/db-table-view/db-table-widgets/db-table-widgets.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,79 +31,6 @@
gap: 16px;
}

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

.empty-state__actions {
display: flex;
gap: 12px;
}

.widgets-hint {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 20px !important;
text-align: center;
width: clamp(300px, 75vw, 800px);
}

.widgets-hint__title {
display: inline-block;
font-size: 1.25em;
margin-bottom: 4px;
}

.widgets-hint__text {
color: rgba(0, 0, 0, 0.64);
}

@media (prefers-color-scheme: dark) {
.widgets-hint__text {
color: rgba(255, 255, 255, 0.64);
}
}

.widget-examples {
display: grid;
grid-template-columns: repeat(3, minmax(300px, 1fr));
grid-template-rows: repeat(2, auto);
gap: 20px;
margin-top: 32px !important;
width: clamp(300px, 80vw, 1200px);
}

.widget-example {
display: flex;
flex-direction: column;
border: 1px solid rgba(0,0,0,0.12);
border-radius: 4px;
padding: 16px 16px 0;
}

@media (prefers-color-scheme: dark) {
.widget-example {
border-color: rgba(255,255,255,0.12);
background-color: var(--surface-dark-color);
}
}

.widget-example_row-2 {
grid-row: 2;
}

.widget-example_row-1-2 {
grid-row: span 2;
}

.examples-arrow {
color: var(--color-accentedPalette-500);
margin: 0 auto 12px;
}

.widget-settings {
display: grid;
grid-template-columns: minmax(10%, 130px) 1fr 2fr 1fr 2fr 50px;
Expand Down
121 changes: 5 additions & 116 deletions ...c/app/components/dashboard/db-table-view/db-table-widgets/db-table-widgets.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,123 +73,12 @@
</form>

<ng-template #emptyState>
<div class="empty-state">
<!--<p class="empty-state__text">No fields configured</p>-->
<p class="widgets-hint">
<strong class="widgets-hint__title">Customize how fields look in forms and tables</strong>
<span class="widgets-hint__text">Nothing will be changed in your data types, just better reflecting the nature of the data.</span>
</p>
<app-widgets-empty-state (onAddWidget)="addNewWidget()"></app-widgets-empty-state>

<div class="empty-state__actions">
<button mat-flat-button color="accent"
angulartics2On="click"
angularticsAction="Widgets: add first widget is clicked"
(click)="addNewWidget(); posthog.capture('Widgets: add first widget is clicked')">
Create UI Widget
</button>
<a mat-stroked-button color="primary"
href="https://docs.rocketadmin.com/Reference/UI%20Widgets/widgets_definition"
target="_blank"
rel="noopener noreferrer">
Read what UI Widgets are
<mat-icon>open_in_new</mat-icon>
</a>
</div>

<div class="widget-examples">
<div class="widget-example">
<app-edit-text
key="password-original-example"
label="Password"
value="MySuper-Secret-Password_12345678"
[required]="false"
[readonly]="false"
[disabled]="false">
</app-edit-text>
<mat-icon class="examples-arrow">arrow_downward</mat-icon>
<app-edit-password
key="password-example"
label="Password"
value="MySuper-Secret-Password_12345678"
[required]="false"
[readonly]="false"
[disabled]="false">
</app-edit-password>
</div>

<div class="widget-example widget-example_row-2">
<app-edit-text
key="select-original-example"
label="Color"
value="💜 Purple"
[required]="false"
[readonly]="false"
[disabled]="false">
</app-edit-text>
<mat-icon class="examples-arrow">arrow_downward</mat-icon>
<app-edit-select
key="select-example"
label="Color"
value="purple"
[widgetStructure]="{widget_params: {options: [{value: 'red', label: '❤️ Red'}, {value: 'green', label: '💚 Green'}, {value: 'blue', label: '💙 Blue'}, {value: 'purple', label: '💜 Purple'}]}}"
[required]="false"
[readonly]="false"
[disabled]="false">
</app-edit-select>
</div>

<div class="widget-example widget-example_row-1-2">
<app-edit-text
key="image-original-example"
label="Image"
value="https://app.rocketadmin.com/assets/main-table-reg-image.svg"
[required]="false"
[readonly]="false"
[disabled]="false">
</app-edit-text>
<mat-icon class="examples-arrow">arrow_downward</mat-icon>
<app-edit-image
key="image-example"
label="Image"
value="https://app.rocketadmin.com/assets/main-table-reg-image.svg"
[required]="false"
[readonly]="false"
[disabled]="false">
</app-edit-image>
</div>

<div class="widget-example widget-example_row-1-2">
<app-edit-long-text
key="long-text-original-example"
label="code"
[value]="widgetCodeEample"
[required]="false"
[readonly]="false"
[disabled]="false">
</app-edit-long-text>
<mat-icon class="examples-arrow">arrow_downward</mat-icon>
<app-edit-code
key="code-example"
label="Code"
[value]="widgetCodeEample"
[widgetStructure]="{widget_params: {language: 'html'}}"
[required]="false"
[readonly]="false"
[disabled]="false">
</app-edit-code>
</div>
</div>

<div class="actions">
<button mat-stroked-button type="button" (click)="goBack()">
Back
</button>

<button mat-flat-button color="primary"
type="submit" disabled>
Save
</button>
</div>
<div class="actions">
<a mat-stroked-button routerLink="/dashboard/{{connectionID}}/{{tableName}}">
Back
</a>
</div>
</ng-template>
</div>
20 changes: 4 additions & 16 deletions ...src/app/components/dashboard/db-table-view/db-table-widgets/db-table-widgets.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,14 +21,9 @@ import { UiSettingsService } from 'src/app/services/ui-settings.service';
import { PlaceholderTableWidgetsComponent } from '../../../skeletons/placeholder-table-widgets/placeholder-table-widgets.component';
import { AlertComponent } from '../../../ui-components/alert/alert.component';
import { BreadcrumbsComponent } from '../../../ui-components/breadcrumbs/breadcrumbs.component';
import { CodeEditComponent } from '../../../ui-components/record-edit-fields/code/code.component';
import { ImageEditComponent } from '../../../ui-components/record-edit-fields/image/image.component';
import { LongTextEditComponent } from '../../../ui-components/record-edit-fields/long-text/long-text.component';
import { PasswordEditComponent } from '../../../ui-components/record-edit-fields/password/password.component';
import { SelectEditComponent } from '../../../ui-components/record-edit-fields/select/select.component';
import { TextEditComponent } from '../../../ui-components/record-edit-fields/text/text.component';
import { WidgetComponent } from './widget/widget.component';
import { WidgetDeleteDialogComponent } from './widget-delete-dialog/widget-delete-dialog.component';
import { WidgetsEmptyStateComponent } from './widgets-empty-state/widgets-empty-state.component';

@Component({
selector: 'app-db-table-widgets',
Expand All @@ -46,13 +41,8 @@ import { WidgetDeleteDialogComponent } from './widget-delete-dialog/widget-delet
AlertComponent,
PlaceholderTableWidgetsComponent,
BreadcrumbsComponent,
PasswordEditComponent,
ImageEditComponent,
CodeEditComponent,
WidgetComponent,
TextEditComponent,
LongTextEditComponent,
SelectEditComponent,
WidgetsEmptyStateComponent,
Angulartics2OnModule,
],
})
Expand All @@ -68,6 +58,7 @@ export class DbTableWidgetsComponent implements OnInit {
public submitting: boolean = false;
public widgetsWithSettings: string[];
public codeEditorTheme: 'vs' | 'vs-dark' = 'vs-dark';

public paramsEditorOptions = {
minimap: { enabled: false },
lineNumbersMinChars: 3,
Expand All @@ -76,10 +67,6 @@ export class DbTableWidgetsComponent implements OnInit {
scrollBeyondLastLine: false,
wordWrap: 'on',
};
public widgetCodeEample = `<h1 class="post-title">Why UI Customization Matters in Admin Panels</h1>
<p class="post-paragraph">
A well-designed <strong>admin panel</strong> isn’t just about managing data — it’s about making that data easier to understand and interact with. By customizing how each field is displayed, you can turn raw database values into meaningful, user-friendly interfaces that save time and reduce errors.
</p>`;
// JSON5-formatted default params
public defaultParams = {
Boolean: `// Display "Yes/No" buttons with configurable options:
Expand Down Expand Up @@ -438,4 +425,5 @@ export class DbTableWidgetsComponent implements OnInit {
},
);
}

}
Loading
Loading