updates

src/core/App.js

@@ -52,17 +52,17 @@ export class App extends Boot {
 	static cardTitleWrapper(card) {
 
 		let content = card.dxFind('.content-card') || card;
-		let topBar = content.dxFind('.top-bar');
+		let topBar = content.dxFind('.sp-top-bar');
 
 		if (!topBar) {
-			topBar = El('div', { className: 'top-bar' });
+			topBar = El('div', { className: 'sp-top-bar' });
 			content.prepend(topBar);
 		}
 
-		let topBarInner = topBar.dxFind('.top-bar-inner');
+		let topBarInner = topBar.dxFind('.sp-top-bar-inner');
 
 		if (!topBarInner) {
-			topBarInner = topBar.appendChild( El('div', { className: 'top-bar-inner' }) );
+			topBarInner = topBar.appendChild( El('div', { className: 'sp-top-bar-inner' }) );
 		}
 
 		let titleWrapper = topBarInner.dxFind('.title-wrapper');
@@ -145,7 +145,7 @@ export class App extends Boot {
 			return;
 		}
 
-		let toolbar = card.dxFind('.top-bar-inner');
+		let toolbar = card.dxFind('.sp-top-bar-inner');
 
 		if (Ut.isStr(data)) {
 			toolbar?.insertAdjacentHTML('beforeend', data);
@@ -267,7 +267,7 @@ export class App extends Boot {
 		}
 
 		if (viewEl.classList.contains('sp-card')) {
-			App.toolbarEl = viewEl.dxFind('.top-bar-inner');
+			App.toolbarEl = viewEl.dxFind('.sp-top-bar-inner');
 			App.tabMenuEl = viewEl.dxFind('.tab-menu');
 			App.viewEl = viewEl.dxFind('.container');
 		}

src/core/Render.js

@@ -74,8 +74,8 @@ export class Render {
 		
 		if (node.title || node.descr || node?.children?.toolbar) {
 
-			const topBarInner = content.appendChild(El('div', { className: 'top-bar' }))
+			const topBarInner = content.appendChild(El('div', { className: 'sp-top-bar' }))
-				.appendChild(El('div', { className: 'top-bar-inner'}) );
+				.appendChild(El('div', { className: 'sp-top-bar-inner'}) );
 
 			if (node.title || node.descr) {
 				

src/core/css/app-ui.css

@@ -205,7 +205,7 @@
 	padding-bottom: 48px;
 }
 
-.sp-card .top-bar {
+.sp-card .sp-top-bar {
 	width: 100%;
 	display: flex;
 	flex-direction: column;
@@ -213,7 +213,7 @@
 	padding: 18px 24px 18px 24px;
 }
 
-.sp-card .top-bar .top-bar-inner {
+.sp-card .sp-top-bar .sp-top-bar-inner {
 	display: flex;
 	flex-wrap: nowrap;
 	align-items: center;
@@ -221,7 +221,7 @@
 	position: relative;
 }
 
-.sp-card .top-bar .title-wrapper {
+.sp-card .sp-top-bar .title-wrapper {
 	width: 100%;
 }
 

src/widgets/popup/Popup.js

@@ -28,8 +28,8 @@ export class Popup {
 
 		this.opts = { ... {
 			scrollBar    : true,
-			marginTop    : 50,
+			position     : 'top', // top / center
-			marginBottom : 50,
+			
 			multiple     : false,
 			width        : 800,
 			height       : 'auto',
@@ -90,15 +90,15 @@ export class Popup {
 
 		this.card.container = this.card.ui.dxFind('.container');
 
-		this.card.toolbar = this.card.ui.dxFind('.top-bar-inner');
+		this.card.toolbar = this.card.ui.dxFind('.sp-top-bar-inner');
 
 		this.card.container.append(this.target);
 
 		if (this.opts.toolbar) {
 
 			if (!this.card.toolbar) {
-				this.card.toolbar =  El('div', { className: 'top-bar-inner' });
+				this.card.toolbar =  El('div', { className: 'sp-top-bar-inner' });
-				this.card.ui.prepend(El('div', { className: 'top-bar' }, this.card.toolbar));
+				this.card.ui.prepend(El('div', { className: 'sp-top-bar' }, this.card.toolbar));
 			}
 
 			this.card.toolbar.append(this.opts.toolbar);
@@ -136,7 +136,10 @@ export class Popup {
 
 		this.resize();
 
-		this.card.ui.dxCss({ top: this.opts.marginTop + 'px', opacity: 1 });
+		this.card.ui.dxCss({ opacity: 1 });
+
+
+		this.card.ui.classList.add(`position-${this.opts.position}`);
 
 		Ut.trigger(this.opts.onInit, this);
 	}
@@ -160,7 +163,7 @@ export class Popup {
 	resize() {
 
 		if (this.opts.scrollBar) {
-			this.card.container.style.maxHeight = ( window.innerHeight - (this.card?.toolbar?.clientHeight || 0) - this.opts.marginTop - this.opts.marginBottom ) + 'px';
+			this.card.container.style.maxHeight = ( window.innerHeight - (this.card?.toolbar?.clientHeight || 0) ) + 'px';
 		}
 
 		Ut.trigger(this.opts.onResize,

src/widgets/popup/popup.css

@@ -14,6 +14,15 @@
 	overflow: hidden;
 }
 
+.sp-popup.position-top {
+	top: 50px;
+}
+
+.sp-popup.position-center {
+	top: 50%;
+	transform: translateY(-50%);
+}
+
 .sp-popup .container {
 	padding-bottom: 0;
 }