Skip to content

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

css

parent 573ac80d
Showing with 484 additions and 478 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>
<div *ngIf="errorMessage" class="error-message"> </div>
<div class="error-message-content"> </div>
<i class="bi bi-exclamation-triangle-fill error-icon"></i>
<span class="error-text">Error:</span>
<span class="error-description">{{ errorMessage }}</span>
</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 -->
<ejs-dashboardlayout <div class="dashboard-content-card">
id='dashboard_viewer' <div *ngIf="!panels || panels.length === 0" class="empty-state">
#viewerLayout <div class="empty-state-icon">
[cellSpacing]="cellSpacing" <i class="bi bi-grid-3x3-gap"></i>
[columns]="columns" </div>
[allowResizing]="false" <h3 class="empty-state-title">Empty Dashboard</h3>
[allowDragging]="false" <p class="empty-state-description">
[allowFloating]="false" To get started, select a dashboard from the dropdown above or create
[showGridLines]="false" a new one. Then, click on a widget from the sidebar on the left to
class="dashboard-viewer-layout-clean" add it to this canvas.
> </p>
<e-panels> </div>
<e-panel
*ngFor="let panel of panels" <!-- Dashboard Layout -->
[row]="panel.row" <div *ngIf="panels.length > 0" class="dashboard-layout-container">
[col]="panel.col" <ejs-dashboardlayout
[sizeX]="panel.sizeX" id="dashboard_default"
[sizeY]="panel.sizeY" [columns]="columns"
[id]="panel.id" [cellSpacing]="cellSpacing"
class="widget-panel-clean" [panels]="panels"
> #editLayout
<ng-template #header> [allowResizing]="true"
<!-- No header --> [allowDragging]="true"
</ng-template> class="dashboard-layout"
<ng-template #content> >
<div class="widget-content-clean"> <e-panels>
<ng-container [ngComponentOutlet]="panel.componentType" [ngComponentOutletInputs]="panel.componentInputs"></ng-container> <e-panel
</div> *ngFor="let panel of panels"
</ng-template> [id]="panel.id + '-' + panel.row + '-' + panel.col"
</e-panel> [sizeX]="panel.sizeX"
</e-panels> [sizeY]="panel.sizeY"
</ejs-dashboardlayout> [row]="panel.row"
[col]="panel.col"
[zIndex]="999"
>
<ng-template #header>
</ng-template>
<ng-template #content>
<ng-container
[ngComponentOutlet]="panel.componentType"
[ngComponentOutletInputs]="panel.componentInputs"
></ng-container>
</ng-template>
</e-panel>
</e-panels>
</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);
} }
.viewer-title-content { .title-icon {
h1 { padding: 0.5rem;
font-size: 1.75rem; background-color: #e0e7ff;
font-weight: 700; border-radius: 0.5rem;
color: #1a202c; }
margin: 0;
line-height: 1.2;
}
p { .title-icon i {
font-size: 0.9rem; color: #4f46e5;
color: #64748b; font-size: 1.25rem;
margin: 0.25rem 0 0 0;
font-weight: 500;
}
} }
.viewer-actions { .title-content h1 {
display: flex; font-size: 1.5rem;
align-items: center; font-weight: 700;
gap: 1rem; color: #111827;
margin: 0;
} }
.viewer-back-btn { .title-content p {
font-size: 0.875rem;
color: #6b7280;
margin: 0;
margin-top: 0.25rem;
}
.dashboard-selector {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.75rem;
padding: 0.75rem 1.5rem; flex-shrink: 0;
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 { .selector-label {
transform: translateY(-2px); font-size: 0.875rem;
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4); font-weight: 500;
} color: #374151;
}
&:active { .dashboard-select {
transform: translateY(0); padding: 0.5rem 1rem;
} 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;
i { &:focus {
font-size: 1rem; outline: none;
border-color: #4f46e5;
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
} }
} }
.dataset-picker-section {
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 { &:hover {
content: ''; background-color: #4338ca;
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 { &:focus {
transform: translateY(-4px); box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.5);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); }
border-color: rgba(102, 126, 234, 0.2); }
&::before { .btn-emerald {
opacity: 1; background-color: #10b981;
} color: white;
}
&:hover {
background-color: #059669;
} }
.e-panel-header { &:focus {
display: none !important; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.5);
} }
}
.e-panel-content { .btn-red {
border-radius: 0 0 16px 16px; background-color: #ef4444;
overflow: hidden; color: white;
position: relative;
background: white; &:hover {
background-color: #dc2626;
}
&:focus {
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.5);
} }
} }
/* 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; overflow: hidden;
margin: 2rem; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 15px rgba(220, 38, 38, 0.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 {
flex-direction: column;
align-items: stretch;
gap: 1rem;
}
.header-title-section {
justify-content: center; justify-content: center;
} }
.viewer-title-content { .header-controls {
text-align: center; flex-direction: column;
align-items: stretch;
gap: 1rem;
}
h1 { .dashboard-selector {
font-size: 1.5rem; 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;
&:hover {
background-color: #e0e7ff; /* hover:bg-indigo-50 */
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 */
} }
}
.viewer-title-content { .dashboard-area {
h1 { flex: 1;
color: #f7fafc; display: flex;
} flex-direction: column;
background-color: #f3f4f6; /* bg-gray-100 */
}
p { .dashboard-header {
color: #a0aec0; 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 */
} }
}
.widget-content { .ti-btn-success-full {
background: #2d3748; background-color: #10b981; /* bg-emerald-600 */
color: #ffffff; /* text-white */
&:hover {
background-color: #059669; /* hover:bg-emerald-700 */
} }
} }
.ti-btn-secondary-full {
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