From 8182e5327e19835aa0457c88b9e9d3ff8d747860 Mon Sep 17 00:00:00 2001
From: Tamara Steinwender <tamara.steinwender@tugraz.at>
Date: Wed, 23 Mar 2022 15:47:28 +0100
Subject: [PATCH] Clean up css
---
packages/common/styles.js | 80 +++++++++++++++++++
packages/file-handling/src/clipboard.js | 5 +-
.../src/nextcloud-file-picker.js | 3 +-
packages/file-handling/src/styles.js | 6 +-
.../src/tabulator-table-styles.js | 78 ------------------
5 files changed, 85 insertions(+), 87 deletions(-)
delete mode 100644 packages/file-handling/src/tabulator-table-styles.js
diff --git a/packages/common/styles.js b/packages/common/styles.js
index 1cb6c1f9..34d5a361 100644
--- a/packages/common/styles.js
+++ b/packages/common/styles.js
@@ -1397,3 +1397,83 @@ export function getLinkCss() {
}
`;
}
+
+export function getTabulatorStyles() {
+ // language=css
+ return css`
+ /* Define the style when the column is not sorted */
+ .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="none"] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow{
+ border-top: none;
+ border-bottom: 6px solid var(--dbp-muted);
+ }
+
+ /* Define the style when the column is sorted in ascending order */
+ .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="asc"] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow{
+ border-top: none;
+ border-bottom: 6px solid var(--dbp-accent);
+ }
+
+ /* Define the style when the column is sorted in descending order */
+ .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="desc"] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow{
+ border-bottom: none;
+ border-top: 6px solid var(--dbp-accent);
+ color: var(--dbp-accent);
+ }
+
+ .tabulator-row, .tabulator-row.tabulator-row-even, .tabulator-row.tabulator-row-odd{
+ padding-top: 0px;
+ padding-bottom: 0px;
+ }
+
+ .tabulator-row .tabulator-cell{
+ padding-top: 15px;
+ padding-bottom: 15px;
+ }
+
+ .tabulator .tabulator-tableholder .tabulator-placeholder .tabulator-placeholder-contents {
+ color: var(--dbp-muted);
+ font-size: 1rem;
+ font-weight: initial;
+ }
+
+ .tabulator-placeholder {
+ border-top: 1px solid var(--dbp-muted);
+ }
+
+ .tabulator-row.no-select.tabulator-selected {
+ background-color: var(--dbp-background);
+ color: var(--dbp-muted);
+ }
+
+ .no-select,
+ .tabulator-row.tabulator-selected.no-select:hover,
+ .tabulator-row.no-select:hover,
+ .tabulator-row.tabulator-selectable.no-select:hover {
+ cursor: unset;
+ }
+
+ .no-select-styles,
+ .tabulator-row.tabulator-selectable.tabulator-selected.no-select-styles,
+ .tabulator-row.tabulator-selectable.tabulator-selected.no-select-styles:hover,
+ .no-select,
+ .tabulator-row.tabulator-selected.no-select:hover,
+ .tabulator-row.no-select:hover,
+ .tabulator-row.tabulator-selectable.no-select:hover,
+ .tabulator-row.tabulator-selected.no-select-styles:hover,
+ .tabulator-row.no-select-styles:hover,
+ .tabulator-row.tabulator-selectable.no-select-styles:hover{
+ color: var(--dbp-content);
+ background-color: var(--dbp-background);
+ }
+
+ .tabulator .tabulator-tableholder{
+ overflow: inherit;
+ }
+
+ @media only screen and (orientation: portrait) and (max-width: 768px) {
+
+ }
+
+ `;
+}
+
diff --git a/packages/file-handling/src/clipboard.js b/packages/file-handling/src/clipboard.js
index 64f8b47a..4445868c 100644
--- a/packages/file-handling/src/clipboard.js
+++ b/packages/file-handling/src/clipboard.js
@@ -6,7 +6,6 @@ import * as commonStyles from '@dbp-toolkit/common/styles';
import * as fileHandlingStyles from '@dbp-toolkit/file-handling/src/styles';
import {Icon} from '@dbp-toolkit/common';
import {TabulatorFull as Tabulator} from 'tabulator-tables';
-import * as tabulatorStyles from './tabulator-table-styles';
import {humanFileSize} from '@dbp-toolkit/common/i18next';
import {name as pkgName} from '@dbp-toolkit/file-handling/package.json';
import {send} from '@dbp-toolkit/common/notification';
@@ -416,7 +415,7 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
this.tabulatorTable.clearData();
this.tabulatorTable.setData(data);
-
+
} else {
if (this.tabulatorTable)
this.tabulatorTable.setData([]);
@@ -843,8 +842,8 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
${commonStyles.getTextUtilities()}
${commonStyles.getModalDialogCSS()}
${commonStyles.getRadioAndCheckboxCss()}
+ ${commonStyles.getTabulatorStyles()}
${fileHandlingStyles.getFileHandlingCss()}
- ${tabulatorStyles.getTabulatorStyles()}
a {
diff --git a/packages/file-handling/src/nextcloud-file-picker.js b/packages/file-handling/src/nextcloud-file-picker.js
index dd8dd585..f89491ed 100644
--- a/packages/file-handling/src/nextcloud-file-picker.js
+++ b/packages/file-handling/src/nextcloud-file-picker.js
@@ -12,7 +12,6 @@ import {TabulatorFull as Tabulator} from 'tabulator-tables';
import MicroModal from './micromodal.es';
import {name as pkgName} from './../package.json';
import * as fileHandlingStyles from './styles';
-import * as tabulatorStyles from './tabulator-table-styles';
import {encrypt, decrypt, parseJwt} from './crypto.js';
/**
@@ -2419,8 +2418,8 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
${commonStyles.getTextUtilities()}
${commonStyles.getModalDialogCSS()}
${commonStyles.getRadioAndCheckboxCss()}
+ ${commonStyles.getTabulatorStyles()}
${fileHandlingStyles.getFileHandlingCss()}
- ${tabulatorStyles.getTabulatorStyles()}
#new-folder-row .button {
background-color: var(--dbp-success);
diff --git a/packages/file-handling/src/styles.js b/packages/file-handling/src/styles.js
index e6df1464..312b5e04 100644
--- a/packages/file-handling/src/styles.js
+++ b/packages/file-handling/src/styles.js
@@ -139,8 +139,8 @@ export function getFileHandlingCss() {
}
.tabulator-row.tabulator-selectable.tabulator-selectable:hover {
- background-color: var(--dbp-hover-background-color, var(--dbp-content-surface));
- color: var(--dbp-hover-color, var(--dbp-on-content-surface));
+ background-color: var(--dbp-hover-background-color, var(--dbp-background));
+ color: var(--dbp-hover-color, var(--dbp-content));
}
.tabulator-row.tabulator-selectable.tabulator-selected:hover,
@@ -155,8 +155,6 @@ export function getFileHandlingCss() {
.tabulator-row,
.tabulator-row.tabulator-row-even {
- padding-top: 10px;
- padding-bottom: 10px;
border-top: 1px solid #eee;
color: var(--dbp-content);
}
diff --git a/packages/file-handling/src/tabulator-table-styles.js b/packages/file-handling/src/tabulator-table-styles.js
deleted file mode 100644
index 7fbf523c..00000000
--- a/packages/file-handling/src/tabulator-table-styles.js
+++ /dev/null
@@ -1,78 +0,0 @@
-import {css} from 'lit';
-
-export function getTabulatorStyles() {
- // language=css
- return css`
- /* Define the style when the column is not sorted */
- .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="none"] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow{
- border-top: none;
- border-bottom: 6px solid var(--dbp-muted);
- }
-
- /* Define the style when the column is sorted in ascending order */
- .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="asc"] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow{
- border-top: none;
- border-bottom: 6px solid var(--dbp-accent);
- }
-
- /* Define the style when the column is sorted in descending order */
- .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="desc"] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow{
- border-bottom: none;
- border-top: 6px solid var(--dbp-accent);
- color: var(--dbp-accent);
- }
-
- .tabulator-row, .tabulator-row.tabulator-row-even, .tabulator-row.tabulator-row-odd{
- padding-top: 0px;
- padding-bottom: 0px;
- }
-
- .tabulator-row .tabulator-cell{
- padding-top: 20px;
- padding-bottom: 20px;
- }
-
- .tabulator .tabulator-tableholder .tabulator-placeholder .tabulator-placeholder-contents {
- color: var(--dbp-muted);
- font-size: 1rem;
- font-weight: initial;
- }
-
- .tabulator-placeholder {
- border-top: 1px solid var(--dbp-muted);
- }
-
- .tabulator-row.no-select.tabulator-selected {
- background-color: var(--dbp-background);
- color: var(--dbp-muted);
- }
-
- .no-select,
- .tabulator-row.tabulator-selected.no-select:hover,
- .tabulator-row.no-select:hover,
- .tabulator-row.tabulator-selectable.no-select:hover {
- cursor: unset;
- }
-
- .no-select-styles,
- .no-select,
- .tabulator-row.tabulator-selected.no-select:hover,
- .tabulator-row.no-select:hover,
- .tabulator-row.tabulator-selectable.no-select:hover,
- .tabulator-row.tabulator-selected.no-select-styles:hover,
- .tabulator-row.no-select-styles:hover,
- .tabulator-row.tabulator-selectable.no-select-styles:hover{
- color: var(--dbp-content);
- background-color: var(--dbp-background);
- }
-
- .tabulator .tabulator-tableholder{
- overflow: inherit;
- }
-
- @media only screen and (orientation: portrait) and (max-width: 768px) {
-
- }
-
- `;
-}
--
GitLab