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 *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 -->
<div *ngIf="dashboardData" class="viewer-container-clean">
<!-- Dashboard Content Only -->
<div class="viewer-content-clean">
<ejs-dashboardlayout
id='dashboard_viewer'
#viewerLayout
[cellSpacing]="cellSpacing"
[columns]="columns"
[allowResizing]="false"
[allowDragging]="false"
[allowFloating]="false"
[showGridLines]="false"
class="dashboard-viewer-layout-clean"
>
<e-panels>
<e-panel
*ngFor="let panel of panels"
[row]="panel.row"
[col]="panel.col"
[sizeX]="panel.sizeX"
[sizeY]="panel.sizeY"
[id]="panel.id"
class="widget-panel-clean"
>
<ng-template #header>
<!-- No header -->
</ng-template>
<ng-template #content>
<div class="widget-content-clean">
<ng-container [ngComponentOutlet]="panel.componentType" [ngComponentOutletInputs]="panel.componentInputs"></ng-container>
</div>
</ng-template>
</e-panel>
</e-panels>
</ejs-dashboardlayout>
<!-- Enhanced Dashboard Content Area -->
<div class="dashboard-content-area">
<!-- 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
id="dashboard_default"
[columns]="columns"
[cellSpacing]="cellSpacing"
[panels]="panels"
#editLayout
[allowResizing]="true"
[allowDragging]="true"
class="dashboard-layout"
>
<e-panels>
<e-panel
*ngFor="let panel of panels"
[id]="panel.id + '-' + panel.row + '-' + panel.col"
[sizeX]="panel.sizeX"
[sizeY]="panel.sizeY"
[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>
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 */
.viewer-container-clean {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
background: transparent;
overflow: hidden;
position: relative;
/* Background */
.dashboard-background {
background: linear-gradient(to bottom right, #f8fafc, #e0e7ff);
}
.viewer-content-clean {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
background: transparent;
/* Layout Classes */
.action-buttons {
display: flex;
align-items: center;
gap: 0.75rem;
flex-shrink: 0;
flex-wrap: wrap;
}
/* Original Container */
.viewer-container {
min-height: 100vh;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
position: relative;
overflow: hidden;
.view-dashboard-section {
margin-bottom: 1rem;
}
/* Header Styles */
.viewer-header {
background: rgba(255, 255, 255, 0.95);
-webkit-backdrop-filter: blur(10px);
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);
.dashboard-header-container {
background: white;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
border-bottom: 1px solid #e5e7eb;
position: sticky;
top: 0;
z-index: 100;
}
.viewer-header-content {
max-width: 1400px;
.header-content {
max-width: 80rem;
margin: 0 auto;
padding: 0 2rem;
padding: 0 1rem;
}
.viewer-header-flex {
.header-flex {
display: flex;
align-items: center;
justify-content: space-between;
align-items: center;
padding: 1.5rem 0;
flex-wrap: wrap;
gap: 1rem;
}
.header-left {
display: flex;
align-items: center;
gap: 2rem;
flex-wrap: wrap;
}
.viewer-title-section {
.header-title-section {
display: flex;
align-items: center;
gap: 1rem;
gap: 0.75rem;
flex-shrink: 0;
}
.viewer-icon {
width: 3rem;
height: 3rem;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 12px;
.header-controls {
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.5rem;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
gap: 1.5rem;
flex-wrap: wrap;
}
.viewer-title-content {
h1 {
font-size: 1.75rem;
font-weight: 700;
color: #1a202c;
margin: 0;
line-height: 1.2;
}
.title-icon {
padding: 0.5rem;
background-color: #e0e7ff;
border-radius: 0.5rem;
}
p {
font-size: 0.9rem;
color: #64748b;
margin: 0.25rem 0 0 0;
font-weight: 500;
}
.title-icon i {
color: #4f46e5;
font-size: 1.25rem;
}
.viewer-actions {
display: flex;
align-items: center;
gap: 1rem;
.title-content h1 {
font-size: 1.5rem;
font-weight: 700;
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;
align-items: center;
gap: 0.5rem;
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);
gap: 0.75rem;
flex-shrink: 0;
}
&:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}
.selector-label {
font-size: 0.875rem;
font-weight: 500;
color: #374151;
}
&:active {
transform: translateY(0);
}
.dashboard-select {
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 {
font-size: 1rem;
&:focus {
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 */
.viewer-content-area {
padding: 2rem;
max-width: 1400px;
.dashboard-content-area {
max-width: 80rem;
margin: 0 auto;
width: 100%;
padding: 1.5rem 1rem;
}
.viewer-content-card {
background: rgba(255, 255, 255, 0.95);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
overflow: hidden;
.dashboard-content-card {
background: white;
border-radius: 0.75rem;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
border: 1px solid #e5e7eb;
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;
background: linear-gradient(to bottom right, #dbeafe, #e0e7ff);
border-radius: 50%;
margin-bottom: 1.5rem;
}
/* Clean Dashboard Layout - No Borders, No Shadows */
.dashboard-viewer-layout-clean {
width: 100% !important;
height: 100% !important;
margin: 0;
padding: 0;
background: transparent;
.empty-state-icon i {
font-size: 3.75rem;
color: #60a5fa;
}
.e-panel {
border: none !important;
box-shadow: none !important;
border-radius: 0 !important;
background: transparent !important;
transition: none !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
.empty-state-title {
font-size: 1.5rem;
font-weight: 600;
color: #374151;
margin-bottom: 0.5rem;
}
&:hover {
transform: none !important;
box-shadow: none !important;
border: none !important;
}
.empty-state-description {
color: #6b7280;
max-width: 28rem;
margin-bottom: 1.5rem;
}
&::before {
display: none !important;
}
/* Custom Button Styles (fallback for Tailwind) */
.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 {
display: none !important;
&:hover {
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 {
border: none !important;
border-radius: 0 !important;
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
overflow: visible !important;
i {
margin-right: 0.5rem;
}
}
/* Original Dashboard Layout */
.dashboard-viewer-layout {
.e-panel {
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;
.btn-indigo {
background-color: #4f46e5;
color: white;
&::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 {
background-color: #4338ca;
}
&:hover {
transform: translateY(-4px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
border-color: rgba(102, 126, 234, 0.2);
&:focus {
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.5);
}
}
&::before {
opacity: 1;
}
}
.btn-emerald {
background-color: #10b981;
color: white;
&:hover {
background-color: #059669;
}
.e-panel-header {
display: none !important;
&:focus {
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.5);
}
}
.e-panel-content {
border-radius: 0 0 16px 16px;
overflow: hidden;
position: relative;
background: white;
.btn-red {
background-color: #ef4444;
color: white;
&:hover {
background-color: #dc2626;
}
&:focus {
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.5);
}
}
/* Clean Widget Content - No Padding */
.widget-content-clean {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background: transparent;
.btn-green {
background-color: #22c55e;
color: white;
> * {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background: transparent;
&:hover {
background-color: #16a34a;
}
&:focus {
box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.5);
}
}
/* Original Widget Content */
.widget-content {
height: 100%;
width: 100%;
padding: 1.5rem;
.btn-blue {
background-color: #3b82f6;
color: white;
> * {
height: 100%;
width: 100%;
&:hover {
background-color: #2563eb;
}
&:focus {
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
}
}
/* Clean Widget Panel - No Styling */
.widget-panel-clean {
.e-panel {
background: transparent !important;
border: none !important;
border-radius: 0 !important;
overflow: visible !important;
transition: none !important;
margin: 0 !important;
padding: 0 !important;
.btn-gray {
background-color: #6b7280;
color: white;
&:hover {
border: none !important;
box-shadow: none !important;
transform: none !important;
}
&:hover {
background-color: #4b5563;
}
&:focus {
box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.5);
}
}
/* Original Widget Panel Enhancements */
.widget-panel {
/* Dashboard Layout Styling */
.dashboard-layout {
.e-panel {
background: white;
border: 1px solid rgba(0, 0, 0, 0.05);
border-radius: 16px;
border-radius: 12px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
border: 1px solid #e5e7eb;
transition: all 0.3s ease;
position: relative;
max-width: 100%;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
&:hover {
border-color: rgba(102, 126, 234, 0.3);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
transform: translateY(-2px);
}
}
}
/* Syncfusion Overrides */
::ng-deep {
/* Clean Layout Overrides */
#dashboard_viewer.e-dashboardlayout.dashboard-viewer-layout-clean {
width: 100vw !important;
height: 100vh !important;
max-height: 100vh !important;
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-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border-radius: 12px 12px 0 0;
padding: 12px 16px;
font-weight: 600;
position: relative;
}
.e-panel-content {
border: none !important;
border-radius: 0 !important;
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
overflow: visible !important;
}
.e-panel-content {
border-radius: 0 0 12px 12px;
overflow: hidden;
position: relative;
}
}
/* Original Layout Overrides */
#dashboard_viewer.e-dashboardlayout {
/* Syncfusion DashboardLayout Override */
::ng-deep {
#dashboard_default.e-dashboardlayout {
width: 100% !important;
height: auto !important;
max-height: calc(100vh - 200px) !important;
max-height: calc(100vh - 300px) !important;
overflow: auto !important;
position: relative !important;
background: transparent !important;
.e-panel {
max-width: 100% !important;
overflow: hidden !important;
position: relative !important;
background: white !important;
}
.e-panel-content {
overflow: hidden !important;
max-width: 100% !important;
background: white !important;
}
}
}
/* Error Message */
.error-message {
background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
border: 1px solid #f87171;
color: #dc2626;
padding: 1rem 1.5rem;
border-radius: 12px;
margin: 2rem;
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);
}
}
/* Widget Panel Enhancements */
.widget-panel {
.e-panel {
background: white;
border: 1px solid #e5e7eb;
border-radius: 12px;
overflow: hidden;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(30px);
}
to {
opacity: 1;
transform: translateX(0);
&:hover {
border-color: #3b82f6;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
}
}
.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-shimmer {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
......@@ -435,198 +365,245 @@
100% { background-position: 200% 0; }
}
/* Global Clean Styles */
.viewer-container-clean {
* {
box-sizing: border-box;
}
// 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;
/* Responsive Design */
@media (max-width: 1024px) {
.header-content {
padding: 0 0.75rem;
}
}
/* Body and HTML styles for clean layout */
::ng-deep {
body {
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
background: transparent !important;
.header-left {
gap: 1rem;
}
html {
margin: 0 !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
overflow: hidden !important;
.header-controls {
gap: 1rem;
}
}
/* Responsive Design */
@media (max-width: 1200px) {
.viewer-header-content {
padding: 0 1.5rem;
.dashboard-selector {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
.viewer-content-area {
padding: 1.5rem;
.selector-label {
font-size: 0.8rem;
}
.viewer-layout-container {
padding: 1.5rem;
.dashboard-select {
min-width: 150px;
}
}
@media (max-width: 768px) {
.viewer-header-flex {
.header-flex {
flex-direction: column;
align-items: stretch;
gap: 1rem;
padding: 1rem 0;
}
.viewer-title-section {
.header-left {
flex-direction: column;
align-items: stretch;
gap: 1rem;
}
.header-title-section {
justify-content: center;
}
.viewer-title-content {
text-align: center;
.header-controls {
flex-direction: column;
align-items: stretch;
gap: 1rem;
}
h1 {
font-size: 1.5rem;
}
.dashboard-selector {
align-items: center;
}
.viewer-actions {
.action-buttons {
justify-content: center;
gap: 0.5rem;
}
.viewer-content-area {
padding: 1rem;
.custom-btn {
padding: 0.4rem 0.8rem;
font-size: 0.8rem;
}
.viewer-layout-container {
padding: 1rem;
.dashboard-content-card {
max-height: calc(100vh - 150px);
}
.viewer-content-card {
border-radius: 16px;
.dashboard-layout-container {
max-height: calc(100vh - 200px);
}
.dashboard-viewer-layout {
.dashboard-layout {
.e-panel {
margin: 8px;
border-radius: 12px;
}
}
/* Clean layout responsive */
.dashboard-viewer-layout-clean {
.e-panel {
margin: 0 !important;
// Syncfusion overrides for mobile
::ng-deep {
#dashboard_default.e-dashboardlayout {
max-height: calc(100vh - 250px) !important;
}
}
}
@media (max-width: 480px) {
.viewer-header-content {
padding: 0 1rem;
.header-content {
padding: 0 0.5rem;
}
.viewer-title-content {
h1 {
font-size: 1.25rem;
}
.title-content h1 {
font-size: 1.25rem;
}
p {
font-size: 0.8rem;
}
.title-content p {
font-size: 0.75rem;
}
.viewer-icon {
width: 2.5rem;
height: 2.5rem;
font-size: 1.25rem;
.action-buttons {
flex-direction: column;
gap: 0.5rem;
}
.viewer-back-btn {
padding: 0.625rem 1.25rem;
font-size: 0.85rem;
.custom-btn {
width: 100%;
justify-content: center;
}
}
/* Print Styles */
@media print {
.viewer-header {
display: none !important;
}
.viewer-content-card {
box-shadow: none !important;
border: 1px solid #ccc !important;
border-radius: 0 !important;
}
.dashboard-container {
display: flex;
height: 100vh;
background-color: #f3f4f6; /* bg-gray-100 */
}
.dashboard-viewer-layout {
.e-panel {
box-shadow: none !important;
border: 1px solid #ccc !important;
page-break-inside: avoid;
}
}
.widget-sidebar {
width: 18rem; /* w-72 */
background-color: #ffffff; /* bg-white */
padding: 1rem; /* p-4 */
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 */
@media (prefers-color-scheme: dark) {
.viewer-container {
background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
}
.widget-list {
flex-grow: 1;
/* space-y-2 is handled by margin-bottom on widget-item */
}
.viewer-header {
background: rgba(26, 32, 44, 0.95);
border-bottom-color: rgba(255, 255, 255, 0.1);
.widget-item {
padding: 0.75rem; /* p-3 */
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 {
h1 {
color: #f7fafc;
}
.dashboard-area {
flex: 1;
display: flex;
flex-direction: column;
background-color: #f3f4f6; /* bg-gray-100 */
}
p {
color: #a0aec0;
}
.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 {
background: rgba(26, 32, 44, 0.95);
border-color: rgba(255, 255, 255, 0.1);
.ti-btn-primary-full {
background-color: #4f46e5; /* bg-indigo-600 */
color: #ffffff; /* text-white */
&:hover {
background-color: #4338ca; /* hover:bg-indigo-700 */
}
}
.dashboard-viewer-layout {
.e-panel {
background: #2d3748;
border-color: rgba(255, 255, 255, 0.1);
}
.ti-btn-info-full {
background-color: #14b8a6; /* bg-teal-600 */
color: #ffffff; /* text-white */
&:hover {
background-color: #0d9488; /* hover:bg-teal-700 */
}
}
.e-panel-content {
background: #2d3748;
}
.ti-btn-danger-full {
background-color: #ef4444; /* bg-rose-600 */
color: #ffffff; /* text-white */
&:hover {
background-color: #dc2626; /* hover:bg-rose-700 */
}
}
.widget-content {
background: #2d3748;
.ti-btn-success-full {
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 { ActivatedRoute, RouterModule } from '@angular/router';
import { DashboardLayoutModule, PanelModel } from '@syncfusion/ej2-angular-layouts';
......@@ -60,6 +60,7 @@ export interface DashboardPanel extends PanelModel {
],
templateUrl: './dashboard-viewer.component.html',
styleUrls: ['./dashboard-viewer.component.scss'],
encapsulation: ViewEncapsulation.None
})
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