Skip to content

P
portal-apps-manage
Commit 0824e147 by Ooh-Ao
Options

css

parent 573ac80d
Showing with 453 additions and 447 deletions
src/app/portal-manage/dashboard-management/dashboard-viewer/dashboard-viewer.component.html
<div class="min-h-screen dashboard-background">
<!-- Enhanced Dashboard Header -->
<div class="dashboard-header-container">
<div class="header-content">
<div class="header-flex">
<div class="header-left">
<!-- Dashboard Title with Icon -->
<div class="header-title-section">
<!-- <div class="title-icon">
<i class="bi bi-grid-3x3-gap"></i>
</div> -->
<div class="title-content">
<h1>{{dashboardData?.thName}}</h1>
<!-- <p>Create and manage your dashboards</p> -->
</div>
</div>
<!-- Error Message -->
<div *ngIf="errorMessage" class="error-message">
<div class="error-message-content">
<i class="bi bi-exclamation-triangle-fill error-icon"></i>
<span class="error-text">Error:</span>
<span class="error-description">{{ errorMessage }}</span>
</div> </div>
</div> </div>
</div>
<!-- Dashboard Viewer Container - Clean Layout --> <!-- Enhanced Dashboard Content Area -->
<div *ngIf="dashboardData" class="viewer-container-clean"> <div class="dashboard-content-area">
<!-- Dashboard Content Only -->
<div class="viewer-content-clean"> <!-- Dashboard Content -->
<div class="dashboard-content-card">
<div *ngIf="!panels || panels.length === 0" class="empty-state">
<div class="empty-state-icon">
<i class="bi bi-grid-3x3-gap"></i>
</div>
<h3 class="empty-state-title">Empty Dashboard</h3>
<p class="empty-state-description">
To get started, select a dashboard from the dropdown above or create
a new one. Then, click on a widget from the sidebar on the left to
add it to this canvas.
</p>
</div>
<!-- Dashboard Layout -->
<div *ngIf="panels.length > 0" class="dashboard-layout-container">
<ejs-dashboardlayout <ejs-dashboardlayout
id='dashboard_viewer' id="dashboard_default"
#viewerLayout
[cellSpacing]="cellSpacing"
[columns]="columns" [columns]="columns"
[allowResizing]="false" [cellSpacing]="cellSpacing"
[allowDragging]="false" [panels]="panels"
[allowFloating]="false" #editLayout
[showGridLines]="false" [allowResizing]="true"
class="dashboard-viewer-layout-clean" [allowDragging]="true"
class="dashboard-layout"
> >
<e-panels> <e-panels>
<e-panel <e-panel
*ngFor="let panel of panels" *ngFor="let panel of panels"
[row]="panel.row" [id]="panel.id + '-' + panel.row + '-' + panel.col"
[col]="panel.col"
[sizeX]="panel.sizeX" [sizeX]="panel.sizeX"
[sizeY]="panel.sizeY" [sizeY]="panel.sizeY"
[id]="panel.id" [row]="panel.row"
class="widget-panel-clean" [col]="panel.col"
[zIndex]="999"
> >
<ng-template #header> <ng-template #header>
<!-- No header -->
</ng-template> </ng-template>
<ng-template #content> <ng-template #content>
<div class="widget-content-clean"> <ng-container
<ng-container [ngComponentOutlet]="panel.componentType" [ngComponentOutletInputs]="panel.componentInputs"></ng-container> [ngComponentOutlet]="panel.componentType"
</div> [ngComponentOutletInputs]="panel.componentInputs"
></ng-container>
</ng-template> </ng-template>
</e-panel> </e-panel>
</e-panels> </e-panels>
</ejs-dashboardlayout> </ejs-dashboardlayout>
</div> </div>
</div>
</div>
</div>
</div> </div>
src/app/portal-manage/dashboard-management/dashboard-viewer/dashboard-viewer.component.scss
/* Modern Dashboard Viewer Styles */ /* Enhanced Dashboard Management Styles */
/* Clean Container - No Header, No Borders */ /* Background */
.viewer-container-clean { .dashboard-background {
width: 100vw; background: linear-gradient(to bottom right, #f8fafc, #e0e7ff);
height: 100vh;
margin: 0;
padding: 0;
background: transparent;
overflow: hidden;
position: relative;
} }
.viewer-content-clean { /* Layout Classes */
width: 100%; .action-buttons {
height: 100%; display: flex;
padding: 0; align-items: center;
margin: 0; gap: 0.75rem;
background: transparent; flex-shrink: 0;
flex-wrap: wrap;
} }
/* Original Container */ .view-dashboard-section {
.viewer-container { margin-bottom: 1rem;
min-height: 100vh;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
position: relative;
overflow: hidden;
} }
/* Header Styles */ .dashboard-header-container {
.viewer-header { background: white;
background: rgba(255, 255, 255, 0.95); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-webkit-backdrop-filter: blur(10px); border-bottom: 1px solid #e5e7eb;
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 100;
} }
.viewer-header-content { .header-content {
max-width: 1400px; max-width: 80rem;
margin: 0 auto; margin: 0 auto;
padding: 0 2rem; padding: 0 1rem;
} }
.viewer-header-flex { .header-flex {
display: flex; display: flex;
align-items: center;
justify-content: space-between; justify-content: space-between;
align-items: center;
padding: 1.5rem 0; padding: 1.5rem 0;
flex-wrap: wrap;
gap: 1rem;
}
.header-left {
display: flex;
align-items: center;
gap: 2rem; gap: 2rem;
flex-wrap: wrap;
} }
.viewer-title-section { .header-title-section {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 1rem; gap: 0.75rem;
flex-shrink: 0;
} }
.viewer-icon { .header-controls {
width: 3rem;
height: 3rem;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 12px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; gap: 1.5rem;
color: white; flex-wrap: wrap;
font-size: 1.5rem; }
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
.title-icon {
padding: 0.5rem;
background-color: #e0e7ff;
border-radius: 0.5rem;
}
.title-icon i {
color: #4f46e5;
font-size: 1.25rem;
} }
.viewer-title-content { .title-content h1 {
h1 { font-size: 1.5rem;
font-size: 1.75rem;
font-weight: 700; font-weight: 700;
color: #1a202c; color: #111827;
margin: 0; margin: 0;
line-height: 1.2; }
}
p { .title-content p {
font-size: 0.9rem; font-size: 0.875rem;
color: #64748b; color: #6b7280;
margin: 0.25rem 0 0 0; margin: 0;
font-weight: 500; margin-top: 0.25rem;
}
} }
.viewer-actions { .dashboard-selector {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 1rem; gap: 0.75rem;
flex-shrink: 0;
} }
.viewer-back-btn { .selector-label {
display: flex; font-size: 0.875rem;
align-items: center; font-weight: 500;
gap: 0.5rem; color: #374151;
padding: 0.75rem 1.5rem; }
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
border-radius: 8px;
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
&:hover { .dashboard-select {
transform: translateY(-2px); padding: 0.5rem 1rem;
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4); border: 1px solid #d1d5db;
} border-radius: 0.5rem;
background: white;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
min-width: 200px;
font-size: 0.875rem;
&:active { &:focus {
transform: translateY(0); outline: none;
border-color: #4f46e5;
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
} }
}
i { .dataset-picker-section {
font-size: 1rem; display: flex;
} align-items: center;
gap: 0.75rem;
flex-shrink: 0;
} }
/* Content Area */ /* Content Area */
.viewer-content-area { .dashboard-content-area {
padding: 2rem; max-width: 80rem;
max-width: 1400px;
margin: 0 auto; margin: 0 auto;
width: 100%; padding: 1.5rem 1rem;
} }
.viewer-content-card { .dashboard-content-card {
background: rgba(255, 255, 255, 0.95); background: white;
-webkit-backdrop-filter: blur(10px); border-radius: 0.75rem;
backdrop-filter: blur(10px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
border-radius: 20px; border: 1px solid #e5e7eb;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
overflow: hidden;
min-height: 600px; min-height: 600px;
} }
.viewer-layout-container { /* Empty State */
.empty-state {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 600px;
text-align: center;
color: #6b7280;
}
.empty-state-icon {
padding: 2rem; padding: 2rem;
background: linear-gradient(to bottom right, #dbeafe, #e0e7ff);
border-radius: 50%;
margin-bottom: 1.5rem;
} }
/* Clean Dashboard Layout - No Borders, No Shadows */ .empty-state-icon i {
.dashboard-viewer-layout-clean { font-size: 3.75rem;
width: 100% !important; color: #60a5fa;
height: 100% !important; }
margin: 0;
padding: 0;
background: transparent;
.e-panel { .empty-state-title {
border: none !important; font-size: 1.5rem;
box-shadow: none !important; font-weight: 600;
border-radius: 0 !important; color: #374151;
background: transparent !important; margin-bottom: 0.5rem;
transition: none !important; }
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
&:hover { .empty-state-description {
transform: none !important; color: #6b7280;
box-shadow: none !important; max-width: 28rem;
border: none !important; margin-bottom: 1.5rem;
} }
&::before { /* Custom Button Styles (fallback for Tailwind) */
display: none !important; .custom-btn {
} display: inline-flex;
align-items: center;
padding: 0.5rem 1rem;
font-size: 0.875rem;
font-weight: 500;
border-radius: 0.5rem;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
transition: all 0.2s ease-in-out;
border: none;
cursor: pointer;
text-decoration: none;
&:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
} }
.e-panel-header { &:hover {
display: none !important; transform: translateY(-1px);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
} }
.e-panel-content { i {
border: none !important; margin-right: 0.5rem;
border-radius: 0 !important;
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
overflow: visible !important;
} }
} }
/* Original Dashboard Layout */ .btn-indigo {
.dashboard-viewer-layout { background-color: #4f46e5;
.e-panel { color: white;
background: white;
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
border: 1px solid rgba(0, 0, 0, 0.05);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
opacity: 0;
transition: opacity 0.3s ease;
}
&:hover { &:hover {
transform: translateY(-4px); background-color: #4338ca;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); }
border-color: rgba(102, 126, 234, 0.2);
&::before { &:focus {
opacity: 1; box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.5);
} }
}
.btn-emerald {
background-color: #10b981;
color: white;
&:hover {
background-color: #059669;
} }
&:focus {
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.5);
} }
}
.e-panel-header { .btn-red {
display: none !important; background-color: #ef4444;
color: white;
&:hover {
background-color: #dc2626;
} }
.e-panel-content { &:focus {
border-radius: 0 0 16px 16px; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.5);
overflow: hidden;
position: relative;
background: white;
} }
} }
/* Clean Widget Content - No Padding */ .btn-green {
.widget-content-clean { background-color: #22c55e;
height: 100%; color: white;
width: 100%;
margin: 0;
padding: 0;
background: transparent;
> * { &:hover {
height: 100%; background-color: #16a34a;
width: 100%; }
margin: 0;
padding: 0; &:focus {
background: transparent; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.5);
} }
} }
/* Original Widget Content */ .btn-blue {
.widget-content { background-color: #3b82f6;
height: 100%; color: white;
width: 100%;
padding: 1.5rem;
> * { &:hover {
height: 100%; background-color: #2563eb;
width: 100%; }
&:focus {
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
} }
} }
/* Clean Widget Panel - No Styling */ .btn-gray {
.widget-panel-clean { background-color: #6b7280;
.e-panel { color: white;
background: transparent !important;
border: none !important;
border-radius: 0 !important;
overflow: visible !important;
transition: none !important;
margin: 0 !important;
padding: 0 !important;
&:hover { &:hover {
border: none !important; background-color: #4b5563;
box-shadow: none !important;
transform: none !important;
} }
&:focus {
box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.5);
} }
} }
/* Original Widget Panel Enhancements */ /* Dashboard Layout Styling */
.widget-panel { .dashboard-layout {
.e-panel { .e-panel {
background: white; border-radius: 12px;
border: 1px solid rgba(0, 0, 0, 0.05); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
border-radius: 16px; border: 1px solid #e5e7eb;
transition: all 0.3s ease;
position: relative;
max-width: 100%;
overflow: hidden; overflow: hidden;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
&:hover { &:hover {
border-color: rgba(102, 126, 234, 0.3); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); transform: translateY(-2px);
} }
} }
}
/* Syncfusion Overrides */ .e-panel-header {
::ng-deep { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
/* Clean Layout Overrides */ color: white;
#dashboard_viewer.e-dashboardlayout.dashboard-viewer-layout-clean { border-radius: 12px 12px 0 0;
width: 100vw !important; padding: 12px 16px;
height: 100vh !important; font-weight: 600;
max-height: 100vh !important; position: relative;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
.e-panel {
border: none !important;
box-shadow: none !important;
border-radius: 0 !important;
background: transparent !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
} }
.e-panel-content { .e-panel-content {
border: none !important; border-radius: 0 0 12px 12px;
border-radius: 0 !important; overflow: hidden;
background: transparent !important; position: relative;
padding: 0 !important;
margin: 0 !important;
overflow: visible !important;
}
} }
}
/* Original Layout Overrides */ /* Syncfusion DashboardLayout Override */
#dashboard_viewer.e-dashboardlayout { ::ng-deep {
#dashboard_default.e-dashboardlayout {
width: 100% !important; width: 100% !important;
height: auto !important; height: auto !important;
max-height: calc(100vh - 200px) !important; max-height: calc(100vh - 300px) !important;
overflow: auto !important; overflow: auto !important;
position: relative !important; position: relative !important;
background: transparent !important;
.e-panel { .e-panel {
max-width: 100% !important; max-width: 100% !important;
overflow: hidden !important; overflow: hidden !important;
position: relative !important; position: relative !important;
background: white !important;
} }
.e-panel-content { .e-panel-content {
overflow: hidden !important; overflow: hidden !important;
max-width: 100% !important; max-width: 100% !important;
background: white !important;
} }
} }
} }
/* Error Message */ /* Widget Panel Enhancements */
.error-message { .widget-panel {
background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%); .e-panel {
border: 1px solid #f87171; background: white;
color: #dc2626; border: 1px solid #e5e7eb;
padding: 1rem 1.5rem;
border-radius: 12px; border-radius: 12px;
margin: 2rem; overflow: hidden;
box-shadow: 0 4px 15px rgba(220, 38, 38, 0.1); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.error-message-content {
display: flex;
align-items: center;
gap: 0.75rem;
}
.error-icon {
font-size: 1.25rem;
color: #dc2626;
}
.error-text {
font-weight: 600;
font-size: 0.9rem;
}
.error-description {
font-size: 0.9rem;
opacity: 0.9;
}
/* Animations */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideInRight { &:hover {
from { border-color: #3b82f6;
opacity: 0; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
transform: translateX(30px);
} }
to {
opacity: 1;
transform: translateX(0);
} }
} }
.viewer-container {
animation: fadeInUp 0.6s ease-out;
}
.viewer-header {
animation: slideInRight 0.8s ease-out;
}
.viewer-content-card {
animation: fadeInUp 1s ease-out;
}
/* Loading States */ /* Loading States */
.loading-shimmer { .loading-shimmer {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
...@@ -435,198 +365,245 @@ ...@@ -435,198 +365,245 @@
100% { background-position: 200% 0; } 100% { background-position: 200% 0; }
} }
/* Global Clean Styles */ /* Responsive Design */
.viewer-container-clean { @media (max-width: 1024px) {
* { .header-content {
box-sizing: border-box; padding: 0 0.75rem;
}
// Reset any inherited styles
h1, h2, h3, h4, h5, h6, p, div, span {
margin: 0;
padding: 0;
}
// Ensure no scrollbars
overflow: hidden !important;
// Remove any default margins/padding
& > * {
margin: 0 !important;
padding: 0 !important;
} }
}
/* Body and HTML styles for clean layout */ .header-left {
::ng-deep { gap: 1rem;
body {
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
background: transparent !important;
} }
html { .header-controls {
margin: 0 !important; gap: 1rem;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
overflow: hidden !important;
} }
}
/* Responsive Design */ .dashboard-selector {
@media (max-width: 1200px) { flex-direction: column;
.viewer-header-content { align-items: flex-start;
padding: 0 1.5rem; gap: 0.5rem;
} }
.viewer-content-area { .selector-label {
padding: 1.5rem; font-size: 0.8rem;
} }
.viewer-layout-container { .dashboard-select {
padding: 1.5rem; min-width: 150px;
} }
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.viewer-header-flex { .header-flex {
flex-direction: column; flex-direction: column;
align-items: stretch; align-items: stretch;
gap: 1rem; gap: 1rem;
padding: 1rem 0; padding: 1rem 0;
} }
.viewer-title-section { .header-left {
justify-content: center; flex-direction: column;
align-items: stretch;
gap: 1rem;
} }
.viewer-title-content { .header-title-section {
text-align: center; justify-content: center;
}
h1 { .header-controls {
font-size: 1.5rem; flex-direction: column;
align-items: stretch;
gap: 1rem;
} }
.dashboard-selector {
align-items: center;
} }
.viewer-actions { .action-buttons {
justify-content: center; justify-content: center;
gap: 0.5rem;
} }
.viewer-content-area { .custom-btn {
padding: 1rem; padding: 0.4rem 0.8rem;
font-size: 0.8rem;
} }
.viewer-layout-container { .dashboard-content-card {
padding: 1rem; max-height: calc(100vh - 150px);
} }
.viewer-content-card { .dashboard-layout-container {
border-radius: 16px; max-height: calc(100vh - 200px);
} }
.dashboard-viewer-layout { .dashboard-layout {
.e-panel { .e-panel {
margin: 8px; margin: 8px;
border-radius: 12px;
} }
} }
/* Clean layout responsive */ // Syncfusion overrides for mobile
.dashboard-viewer-layout-clean { ::ng-deep {
.e-panel { #dashboard_default.e-dashboardlayout {
margin: 0 !important; max-height: calc(100vh - 250px) !important;
} }
} }
} }
@media (max-width: 480px) { @media (max-width: 480px) {
.viewer-header-content { .header-content {
padding: 0 1rem; padding: 0 0.5rem;
} }
.viewer-title-content { .title-content h1 {
h1 {
font-size: 1.25rem; font-size: 1.25rem;
} }
p { .title-content p {
font-size: 0.8rem; font-size: 0.75rem;
}
} }
.viewer-icon { .action-buttons {
width: 2.5rem; flex-direction: column;
height: 2.5rem; gap: 0.5rem;
font-size: 1.25rem;
} }
.viewer-back-btn { .custom-btn {
padding: 0.625rem 1.25rem; width: 100%;
font-size: 0.85rem; justify-content: center;
} }
} }
/* Print Styles */
@media print {
.viewer-header {
display: none !important;
}
.viewer-content-card { .dashboard-container {
box-shadow: none !important; display: flex;
border: 1px solid #ccc !important; height: 100vh;
border-radius: 0 !important; background-color: #f3f4f6; /* bg-gray-100 */
} }
.dashboard-viewer-layout { .widget-sidebar {
.e-panel { width: 18rem; /* w-72 */
box-shadow: none !important; background-color: #ffffff; /* bg-white */
border: 1px solid #ccc !important; padding: 1rem; /* p-4 */
page-break-inside: avoid; overflow-y: auto;
} box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-lg */
} border-right: 1px solid #e5e7eb; /* border-r border-gray-200 */
display: flex;
flex-direction: column;
} }
/* Dark Mode Support */ .widget-list {
@media (prefers-color-scheme: dark) { flex-grow: 1;
.viewer-container { /* space-y-2 is handled by margin-bottom on widget-item */
background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%); }
}
.viewer-header { .widget-item {
background: rgba(26, 32, 44, 0.95); padding: 0.75rem; /* p-3 */
border-bottom-color: rgba(255, 255, 255, 0.1); margin-bottom: 0.5rem; /* mb-2 */
} background-color: #f9fafb; /* bg-gray-50 */
border-radius: 0.5rem; /* rounded-lg */
border: 1px solid #e5e7eb; /* border border-gray-200 */
cursor: pointer;
transition: all 0.2s ease-in-out;
.viewer-title-content { &:hover {
h1 { background-color: #e0e7ff; /* hover:bg-indigo-50 */
color: #f7fafc; border-color: #c7d2fe; /* hover:border-indigo-100 */
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* hover:shadow-md */
} }
}
p { .dashboard-area {
color: #a0aec0; flex: 1;
} display: flex;
flex-direction: column;
background-color: #f3f4f6; /* bg-gray-100 */
}
.dashboard-header {
padding: 1rem; /* p-4 */
background-color: #ffffff; /* bg-white */
border-bottom: 1px solid #e5e7eb; /* border-b border-gray-200 */
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); /* shadow-sm */
}
.dashboard-content {
// flex: 1;
padding: 1rem; /* p-4 */
overflow: auto;
min-height: 600px; /* min-h-[600px] */
}
/* Button styles (assuming ti-btn is a base class) */
.ti-btn {
font-weight: bold;
padding: 0.5rem 1rem; /* py-2 px-4 */
border-radius: 0.5rem; /* rounded-lg */
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
transition: transform 0.2s ease-in-out; /* transition-transform */
transform: scale(1); /* transform */
&:hover {
transform: scale(1.05); /* hover:scale-105 */
} }
}
.viewer-content-card { .ti-btn-primary-full {
background: rgba(26, 32, 44, 0.95); background-color: #4f46e5; /* bg-indigo-600 */
border-color: rgba(255, 255, 255, 0.1); color: #ffffff; /* text-white */
&:hover {
background-color: #4338ca; /* hover:bg-indigo-700 */
} }
}
.dashboard-viewer-layout { .ti-btn-info-full {
.e-panel { background-color: #14b8a6; /* bg-teal-600 */
background: #2d3748; color: #ffffff; /* text-white */
border-color: rgba(255, 255, 255, 0.1); &:hover {
background-color: #0d9488; /* hover:bg-teal-700 */
} }
}
.e-panel-content { .ti-btn-danger-full {
background: #2d3748; background-color: #ef4444; /* bg-rose-600 */
color: #ffffff; /* text-white */
&:hover {
background-color: #dc2626; /* hover:bg-rose-700 */
} }
}
.ti-btn-success-full {
background-color: #10b981; /* bg-emerald-600 */
color: #ffffff; /* text-white */
&:hover {
background-color: #059669; /* hover:bg-emerald-700 */
} }
}
.widget-content { .ti-btn-secondary-full {
background: #2d3748; background-color: #6b7280; /* A shade of gray, similar to default secondary */
color: #ffffff;
&:hover {
background-color: #4b5563;
} }
} }
// .control-section {
// margin: 0 auto;
// width: 500px;
// }
// #defaultLayout {
// padding: 10px;
// }
// #dashboard_default .e-panel .e-panel-container .content {
// vertical-align: middle;
// font-weight: 600;
// font-size: 20px;
// text-align: center;
// line-height: 90px;
// }
src/app/portal-manage/dashboard-management/dashboard-viewer/dashboard-viewer.component.ts
import { Component, OnInit, Type, ChangeDetectorRef } from '@angular/core'; import { Component, OnInit, Type, ChangeDetectorRef, ViewEncapsulation } from '@angular/core';
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { ActivatedRoute, RouterModule } from '@angular/router'; import { ActivatedRoute, RouterModule } from '@angular/router';
import { DashboardLayoutModule, PanelModel } from '@syncfusion/ej2-angular-layouts'; import { DashboardLayoutModule, PanelModel } from '@syncfusion/ej2-angular-layouts';
...@@ -60,6 +60,7 @@ export interface DashboardPanel extends PanelModel { ...@@ -60,6 +60,7 @@ export interface DashboardPanel extends PanelModel {
], ],
templateUrl: './dashboard-viewer.component.html', templateUrl: './dashboard-viewer.component.html',
styleUrls: ['./dashboard-viewer.component.scss'], styleUrls: ['./dashboard-viewer.component.scss'],
encapsulation: ViewEncapsulation.None
}) })
export class DashboardViewerComponent implements OnInit { export class DashboardViewerComponent implements OnInit {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment