From 1547bf0e83631e736caea24ddd1271aee6cb6d17 Mon Sep 17 00:00:00 2001
From: Tamara Steinwender <tamara.steinwender@tugraz.at>
Date: Mon, 31 Aug 2020 12:16:09 +0200
Subject: [PATCH] Small UI bugfixes
---
.../src/dbp-nextcloud-file-picker.js | 34 +++++++++++++++----
packages/file-handling/src/file-sink.js | 7 ++--
2 files changed, 31 insertions(+), 10 deletions(-)
diff --git a/packages/file-handling/src/dbp-nextcloud-file-picker.js b/packages/file-handling/src/dbp-nextcloud-file-picker.js
index e740fab9..bb914693 100644
--- a/packages/file-handling/src/dbp-nextcloud-file-picker.js
+++ b/packages/file-handling/src/dbp-nextcloud-file-picker.js
@@ -725,12 +725,18 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
this._("#replace-new-name").focus();
}
MicroModal.show(this._('#replace-modal'), {
+ disableScroll: true,
onClose: modal => {
this.statusText = "";
this.loading = false;},
});
}
+ closeDialog(e) {
+ console.log("closeDialog");
+ MicroModal.close(this._('#modal-picker'));
+ }
+
/**
* Returns a filename with the next counter number.
*
@@ -1031,6 +1037,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
width: 100%;
height: 100%;
overflow-y: auto;
+ -webkit-overflow-scrolling: touch;
}
.tabulator .tabulator-header .tabulator-col.tabulator-sortable .tabulator-col-title{
@@ -1274,6 +1281,10 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
top: 0px;
font-size: 1.4rem;
}
+
+ .spinner{
+ font-size: 0.7em;
+ }
@media only screen
and (orientation: portrait)
@@ -1349,17 +1360,28 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
.nextcloud-footer{
/*grid-area: header-r;*/
- position: fixed;
+ /*position: fixed;*/
bottom: 0px;
width: 100%;
left: 0px;
padding: 20px;
}
- .info-box{
+ .mobile-hidden{
display: none;
}
-
+
+ .spinner{
+ font-size: 1.2em;
+ position: absolute;
+ bottom: -19px;
+ left: -40px;
+ }
+
+ .info-box{
+ position:relative;
+ }
+
.nextcloud-footer-grid{
display: flex;
justify-content: center;
@@ -1458,8 +1480,8 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
<div class="block info-box ${classMap({hidden: this.statusText === ""})}">
- <dbp-mini-spinner style="font-size: 0.7em" class="${classMap({hidden: this.loading === false})}"></dbp-mini-spinner>
- ${this.statusText}
+ <dbp-mini-spinner class="spinner ${classMap({hidden: this.loading === false})}"></dbp-mini-spinner>
+ <span class="mobile-hidden">${this.statusText}</span>
</div>
</div>
@@ -1475,7 +1497,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
<span style="word-break: break-all;">${this.replaceFilename}</span>
${i18n.t('nextcloud-file-picker.replace-title-2')}.
</h2>
- <button title="${i18n.t('file-sink.modal-close')}" class="modal-close" aria-label="Close modal" data-micromodal-close>
+ <button title="${i18n.t('file-sink.modal-close')}" class="modal-close" aria-label="Close modal" @click="${() => {this.closeDialog()}}">
<dbp-icon title="${i18n.t('file-sink.modal-close')}" name="close" class="close-icon"></dbp-icon>
</button>
</header>
diff --git a/packages/file-handling/src/file-sink.js b/packages/file-handling/src/file-sink.js
index f6cdbd2f..303b6e3c 100644
--- a/packages/file-handling/src/file-sink.js
+++ b/packages/file-handling/src/file-sink.js
@@ -157,11 +157,10 @@ export class FileSink extends ScopedElementsMixin(DBPLitElement) {
MicroModal.show(this._('#modal-picker'), {
disableScroll: true,
onClose: modal => { this.isDialogOpen = false; },
- closeTrigger: 'data-custom-close',
});
}
- closeDialog() {
+ closeDialog(e) {
console.log("closeDialog");
MicroModal.close(this._('#modal-picker'));
}
@@ -194,7 +193,7 @@ export class FileSink extends ScopedElementsMixin(DBPLitElement) {
return html`
<vpu-notification lang="de" client-id="my-client-id"></vpu-notification>
<div class="modal micromodal-slide" id="modal-picker" aria-hidden="true">
- <div class="modal-overlay" tabindex="-1" data-custom-close>
+ <div class="modal-overlay" tabindex="-1">
<div class="modal-container" role="dialog" aria-modal="true" aria-labelledby="modal-picker-title">
<nav class="modal-nav">
<div title="${i18n.t('file-sink.nav-local')}"
@@ -211,7 +210,7 @@ export class FileSink extends ScopedElementsMixin(DBPLitElement) {
</div>
</nav>
<div class="modal-header">
- <button title="${i18n.t('file-sink.modal-close')}" class="modal-close" aria-label="Close modal" data-custom-close @click="${() => { this.closeDialog()}}">
+ <button title="${i18n.t('file-sink.modal-close')}" class="modal-close" aria-label="Close modal" @click="${() => { this.closeDialog()}}">
<dbp-icon title="${i18n.t('file-sink.modal-close')}" name="close" class="close-icon"></dbp-icon>
</button>
<p class="modal-context"> ${this.context}</p>
--
GitLab