From cde0ec506b98ddebb178826e8857f6be7414d962 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Christina=20T=C3=B6gl?= <toegl@tugraz.at>
Date: Wed, 17 Nov 2021 11:33:22 +0100
Subject: [PATCH] Change code and css for new folder creation
---
.../src/nextcloud-file-picker.js | 89 +++++++++++--------
1 file changed, 51 insertions(+), 38 deletions(-)
diff --git a/packages/file-handling/src/nextcloud-file-picker.js b/packages/file-handling/src/nextcloud-file-picker.js
index ed42295e..4d88bed1 100644
--- a/packages/file-handling/src/nextcloud-file-picker.js
+++ b/packages/file-handling/src/nextcloud-file-picker.js
@@ -334,6 +334,9 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
} else {
// TODO
console.log('reached');
+ if (this._('#tf-new-folder')) {
+ this._('#tf-new-folder').focus();
+ }
}
},
rowDblClick: (e, row) => {
@@ -389,6 +392,8 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
// that.addFolder();
// }
// });
+
+
});
}
@@ -1480,18 +1485,22 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
if (this._('.addRowAnimation')) {
this._('.addRowAnimation').classList.remove('addRowAnimation');
}
- // this._('#new-folder-wrapper').classList.toggle('hidden');
- // if (this._('#new-folder-wrapper').classList.contains('hidden')) {
- // this._('#add-folder-button').setAttribute("name", "plus");
- // this._('#add-folder-button').setAttribute("title", i18n.t('nextcloud-file-picker.add-folder-open'));
- // } else {
- // this._('#add-folder-button').setAttribute("name", "close");
- // this._('#add-folder-button').setAttribute("title", i18n.t('nextcloud-file-picker.add-folder-close'));
- // this._('#new-folder').focus();
- // }
-
+ this._('#new-folder-wrapper').classList.toggle('hidden');
+ if (this._('#new-folder-wrapper').classList.contains('hidden')) {
+ this._('#add-folder-button').setAttribute("name", "plus");
+ this._('#add-folder-button').setAttribute("title", i18n.t('nextcloud-file-picker.add-folder-open'));
+ } else {
+ this._('#add-folder-button').setAttribute("name", "close");
+ this._('#add-folder-button').setAttribute("title", i18n.t('nextcloud-file-picker.add-folder-close'));
+ this._('#new-folder').focus();
+ }
+ }
- // TODO move this to new function
+ addOpenFolderTableEntry() {
+ const i18n = this._i18n;
+ if (this._('.addRowAnimation')) {
+ this._('.addRowAnimation').classList.remove('addRowAnimation');
+ }
let props = {permissions: 'RGDNVCK'};
var row = {
@@ -1507,6 +1516,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
this._('#new-folder-row').setAttribute('style', 'background: #259207; color: white');
this._('#new-folder-row').querySelector("div.tabulator-cell:nth-child(1) > div > span.tabulator-responsive-collapse-toggle-open").classList.add('new-folder-selected');
+ this._('#new-folder-row').querySelector("div.tabulator-cell:nth-child(1) > div > span.tabulator-responsive-collapse-toggle-close").classList.add('new-folder-selected');
// this._('#directory-content-table').querySelector("div.tabulator-tableHolder > div.tabulator-table > div.tabulator-row:nth-child(1) > div.tabulator-cell:nth-child(3)")
// .classList.add('blinking');
@@ -1538,7 +1548,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
})
- this._('#tf-new-folder').focus();
+ // this._('#tf-new-folder').focus();
}
addNewFolder() {
@@ -1787,6 +1797,11 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
${commonStyles.getRadioAndCheckboxCss()}
${fileHandlingStyles.getFileHandlingCss()}
+ .tabulator-row.no-select.tabulator-selected {
+ background-color: white;
+ color: #333;
+ }
+
input[type=text]#tf-new-folder:focus {
border: none;
background: transparent;
@@ -1799,8 +1814,28 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
}
input[type=text]#tf-new-folder::placeholder {
- color: #000;
- font-weight: 200;
+ color: #333;
+ font-weight: 300;
+ }
+
+ #tf-new-folder::-webkit-input-placeholder {
+ color: #333;
+ font-weight: 300;
+ }
+
+ #tf-new-folder:-moz-placeholder {
+ color: #333;
+ font-weight: 300;
+ }
+
+ #tf-new-folder::-moz-placeholder {
+ color: #333;
+ font-weight: 300;
+ }
+
+ #tf-new-folder::-ms-input-placeholder {
+ color: #333;
+ font-weight: 300;
}
input[type=text]#tf-new-folder {
@@ -1808,35 +1843,13 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
background: transparent;
width: 100%;
height: 100%;
+ margin-left: -8px;
}
.new-folder-selected::after {
filter: invert(100%);
}
- .blinking::after {
- // animation: blink 1s linear infinite alternate;
- content: "";
- margin-left: 2px;
- width: 2px;
- height: 1rem;
- background: white;
- display: inline-block;
- animation: cursor-blink 1.5s steps(2) infinite;
- }
-
- .blinking {
- display: flex;
- align-items: center;
- gap: 2px;
- }
-
- @keyframes cursor-blink {
- 0% {
- opacity: 0;
- }
- }
-
.visible {
display: unset;
}
@@ -2465,7 +2478,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
</a>
</li>
<li class="${classMap({hidden: !this.directoriesOnly})}">
- <a class="${classMap({inactive: this.isInRecent || this.isInFavorites || this.disableRowClick})}" @click="${() => { this.openAddFolderDialogue(); }}">
+ <a class="${classMap({inactive: this.isInRecent || this.isInFavorites || this.disableRowClick})}" @click="${() => { this.addOpenFolderTableEntry(); }}">
${i18n.t('nextcloud-file-picker.add-folder')}
</a>
</li>
--
GitLab