ahasani/psp_panel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(layout): enhance topbar with customizable templates and full-page support

Browse Source 
- Updated app.layout.component.html to include start, center, and end templates for the topbar.
- Modified app.layout.component.ts to manage new template references and added isFullPage getter.
- Refactored app.topbar.component.html to utilize new templates and improved layout structure.
- Enhanced app.topbar.component.ts to accept new input properties for templates.
- Updated layout.service.ts to manage full-page state and new topbar slots.
- Added new payment bridge services for POS functionality.
- Introduced greater validator for form validation.
- Improved dialog component to support mobile drawer and responsive design.
- Updated styles for better mobile support and layout adjustments.
- Added new main menu sidebar for POS with dynamic content.
This commit is contained in:
ahasani194
2026-04-30 16:27:42 +03:30
parent c89d4027d6
commit 8104f1b7a7
56 changed files with 1130 additions and 434 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/customize.scss
+3
View File
@@ -0,0 +1,3 @@
:root {
--p-drawer-header-padding: 0.5rem 0.875rem !important;
}
src/assets/layout/_core.scss
+1 -1
View File
@@ -26,6 +26,6 @@ html {
@media (max-width: 640px) {
html {
font-size: 13px;
font-size: 14px;
}
}
src/assets/layout/_main.scss
+5 -1
View File
@@ -11,9 +11,13 @@
transform: translateX(0) !important;
padding-inline-start: 2rem !important;
}
&.isFullPage {
padding-inline-start: 0 !important;
padding: 0 !important;
}
}
.layout-main {
flex: 1 1 auto;
overflow: auto;
// overflow: auto;
}
src/assets/layout/_responsive.scss
+111 -99
View File
@@ -1,110 +1,122 @@
@media screen and (min-width: 1960px) {
.layout-main,
.landing-wrapper {
width: 1504px;
margin-right: auto !important;
margin-left: auto !important;
}
.layout-main,
.landing-wrapper {
width: 1504px;
margin-right: auto !important;
margin-left: auto !important;
}
}
@media (min-width: 992px) {
.layout-wrapper {
&.layout-overlay {
.layout-main-container {
margin-inline-start: 0;
padding-inline-start: 2rem;
}
.layout-sidebar {
transform: translateX(100%);
right: 0;
top: 0;
height: 100vh;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-inline-end: 1px solid var(--surface-border);
transition:
transform 0.4s cubic-bezier(0.05, 0.74, 0.2, 0.99),
right 0.4s cubic-bezier(0.05, 0.74, 0.2, 0.99);
box-shadow:
0px 3px 5px rgba(0, 0, 0, 0.02),
0px 0px 2px rgba(0, 0, 0, 0.05),
0px 1px 4px rgba(0, 0, 0, 0.08);
}
&.layout-overlay-active {
.layout-sidebar {
transform: translateX(0);
}
}
}
&.layout-static {
.layout-main-container {
margin-inline-start: 22rem;
}
&.layout-static-inactive {
.layout-sidebar {
transform: translateX(100%);
right: 0;
}
.layout-main-container {
margin-inline-start: 0;
padding-inline-start: 2rem;
}
}
}
.layout-mask {
display: none;
}
@media (max-width: 620px) {
.layout-main-container {
padding: 1rem 0.5rem 1rem 1rem;
&.hideMenu {
padding-inline-start: 1rem !important;
}
&.isFullPage {
padding-inline-start: 0 !important;
padding: 0 !important;
}
}
}
@media (min-width: 992px) {
.layout-wrapper {
&.layout-overlay {
.layout-main-container {
margin-inline-start: 0;
padding-inline-start: 2rem;
}
.layout-sidebar {
transform: translateX(100%);
right: 0;
top: 0;
height: 100vh;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-inline-end: 1px solid var(--surface-border);
transition:
transform 0.4s cubic-bezier(0.05, 0.74, 0.2, 0.99),
right 0.4s cubic-bezier(0.05, 0.74, 0.2, 0.99);
box-shadow:
0px 3px 5px rgba(0, 0, 0, 0.02),
0px 0px 2px rgba(0, 0, 0, 0.05),
0px 1px 4px rgba(0, 0, 0, 0.08);
}
&.layout-overlay-active {
.layout-sidebar {
transform: translateX(0);
}
}
}
&.layout-static {
.layout-main-container {
margin-inline-start: 22rem;
}
&.layout-static-inactive {
.layout-sidebar {
transform: translateX(100%);
right: 0;
}
.layout-main-container {
margin-inline-start: 0;
padding-inline-start: 2rem;
}
}
}
.layout-mask {
display: none;
}
}
}
@media (max-width: 991px) {
.blocked-scroll {
overflow: hidden;
.blocked-scroll {
overflow: hidden;
}
.layout-wrapper {
.layout-main-container {
margin-inline-start: 0;
padding-inline-start: 2rem;
}
.layout-wrapper {
.layout-main-container {
margin-inline-start: 0;
padding-inline-start: 2rem;
}
.layout-sidebar {
transform: translateX(100%);
right: 0;
top: 0;
height: 100vh;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
transition:
transform 0.4s cubic-bezier(0.05, 0.74, 0.2, 0.99),
left 0.4s cubic-bezier(0.05, 0.74, 0.2, 0.99);
}
.layout-mask {
display: none;
position: fixed;
top: 0;
right: 0;
z-index: 998;
width: 100%;
height: 100%;
background-color: var(--maskbg);
}
&.layout-mobile-active {
.layout-sidebar {
transform: translateX(0);
}
.layout-mask {
display: block;
}
}
.layout-sidebar {
transform: translateX(100%);
right: 0;
top: 0;
height: 100vh;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
transition:
transform 0.4s cubic-bezier(0.05, 0.74, 0.2, 0.99),
left 0.4s cubic-bezier(0.05, 0.74, 0.2, 0.99);
}
.layout-mask {
display: none;
position: fixed;
top: 0;
right: 0;
z-index: 998;
width: 100%;
height: 100%;
background-color: var(--maskbg);
}
&.layout-mobile-active {
.layout-sidebar {
transform: translateX(0);
}
.layout-mask {
display: block;
}
}
}
}
src/assets/rtlSupport.scss
+4
View File
@@ -66,3 +66,7 @@ input.p-inputtext {
.p-avatar-image {
overflow: hidden !important;
}
.p-drawer {
border-radius: 1rem 1rem 0 0 !important;
}
src/assets/styles.scss
+3 -1
View File
@@ -7,8 +7,10 @@
@use "primeicons/primeicons.css";
@use "./demo/demo.scss";
@use "./rtlSupport.scss";
@use "./customize.scss";
form {
form,
.form-group {
display: flex;
flex-direction: column;
gap: 1rem;