From 325fb4002e12af2fe557558cf668d0ddb0f3bafe Mon Sep 17 00:00:00 2001
From: Tamara Steinwender <tamara.steinwender@tugraz.at>
Date: Mon, 28 Nov 2022 13:03:21 +0100
Subject: [PATCH] Improve modal with size
---
packages/common/src/modal.js | 46 +++++++++++++++++++++++++++++-------
1 file changed, 38 insertions(+), 8 deletions(-)
diff --git a/packages/common/src/modal.js b/packages/common/src/modal.js
index 39c1c133..ea7f65fd 100644
--- a/packages/common/src/modal.js
+++ b/packages/common/src/modal.js
@@ -1,10 +1,12 @@
-import {html, css} from 'lit';
+import {html, css
+} from 'lit';
import {createInstance} from './i18n';
import * as commonStyles from '../styles.js';
-import {Icon} from "./icon";
-import {MiniSpinner} from "./mini-spinner";
+import {Icon} from './icon';
+import {MiniSpinner} from './mini-spinner';
import MicroModal from './micromodal.es';
-import DBPLitElement from "../dbp-lit-element";
+import DBPLitElement from '../dbp-lit-element';
+import {styleMap} from 'lit/directives/style-map.js';
export class Modal extends DBPLitElement {
@@ -13,18 +15,40 @@ export class Modal extends DBPLitElement {
this._i18n = createInstance();
this.lang = this._i18n.language;
this.modalId = 'dbp-modal-id';
- this.title = "Modal Title";
+ this.title = "";
- // TODO add with/height
+ this.width = 'inherit';
+ this.height = 'inherit';
+ this.minWidth = 'inherit';
+ this.minHeight = 'inherit';
+
+ this.size = {
+ width: this.width,
+ height: this.height,
+ minWidth: this.minWidth,
+ minHeight: this.minHeight};
}
static get properties() {
return {
modalId: {type: String, attribute: 'modal-id'},
title: {type: String},
+ width: {type: String},
+ height: {type: String},
+ minWidth: {type: String, attribute: 'min-width'},
+ minHeight: {type: String, attribute: 'min-height'},
};
}
+ connectedCallback() {
+ super.connectedCallback();
+ this.size = {
+ width: this.width,
+ height: this.height,
+ minWidth: this.minWidth,
+ minHeight: this.minHeight};
+ }
+
static get scopedElements() {
return {
'dbp-icon': Icon,
@@ -64,9 +88,10 @@ export class Modal extends DBPLitElement {
}
.modal-header{
- padding: 0px;
display: flex;
justify-content: space-between;
+ align-items: center;
+ padding: 0 0 20px 0;
}
.modal-content{
@@ -78,6 +103,10 @@ export class Modal extends DBPLitElement {
flex-direction: column;
height: 100%;
}
+
+ footer{
+ padding-top: 20px;
+ }
`;
}
@@ -90,7 +119,8 @@ export class Modal extends DBPLitElement {
<div class="modal-container"
role="dialog"
aria-modal="true"
- aria-labelledby="show-recipient-modal-title">
+ aria-labelledby="show-recipient-modal-title"
+ style=${styleMap(this.size)}>
<header class="modal-header">
<h3 class="modal-title">
${this.title}
--
GitLab