Skip to content

289 add dark mode #290

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

289 add dark mode #290

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions src/components.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,10 @@ export namespace Components {
* @default 24 * 60 * 60 * 1000
*/
"defaultTTL": number;
/**
* If this flag is set to true, the component will reset the cache and database on every load and disconnect. Already existing data will be deleted.
*/
"doNotCacheOrStoreInDatabase": boolean;
/**
* Determines whether components should be emphasized towards their surrounding by border and shadow. If set to true, border and shadows will be shown around the component. It not set, the component won't be surrounded by border and shadow. (optional)
* @type {boolean}
Expand Down Expand Up @@ -168,6 +172,10 @@ declare namespace LocalJSX {
* @default 24 * 60 * 60 * 1000
*/
"defaultTTL"?: number;
/**
* If this flag is set to true, the component will reset the cache and database on every load and disconnect. Already existing data will be deleted.
*/
"doNotCacheOrStoreInDatabase"?: boolean;
/**
* Determines whether components should be emphasized towards their surrounding by border and shadow. If set to true, border and shadows will be shown around the component. It not set, the component won't be surrounded by border and shadow. (optional)
* @type {boolean}
Expand Down
27 changes: 18 additions & 9 deletions src/components/copy-button/copy-button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,19 @@ export class CopyButton {
@Prop() value!: string;

render() {
const normalClasses: string[] = [
'hover:bg-blue-200',
'dark:hover:bg-blue-800',
'hover:text-slate-900',
'dark:hover:text-slate-100',
'bg-white',
'dark:bg-gray-800',
'text-black',
'dark:text-white',
];

const highlightClasses: string[] = ['bg-green-200', 'dark:bg-green-800'];

/**
* Copies the given value to the clipboard and changes the text of the button to "✓ Copied!" for 1.5 seconds.
* @param event The event that triggered this function.
Expand Down Expand Up @@ -46,15 +59,13 @@ export class CopyButton {
function showSuccess() {
const el = event.target as HTMLButtonElement;
el.innerText = '✓ Copied!';
el.classList.remove('hover:bg-blue-200');
el.classList.remove('bg-white');
el.classList.add('bg-green-200');
el.classList.remove(...normalClasses);
el.classList.add(...highlightClasses);

// Reset the button after 1.5 seconds.
setTimeout(() => {
el.classList.remove('bg-green-200');
el.classList.add('hover:bg-blue-200');
el.classList.add('bg-white');
el.classList.remove(...highlightClasses);
el.classList.add(...normalClasses);
el.innerText = 'Copy';
}, 1500);
}
Expand All @@ -63,9 +74,7 @@ export class CopyButton {
return (
<Host class={'inline-block align-baseline text-xs'}>
<button
class={
'bg-white border border-slate-500 text-slate-800 font-medium font-mono rounded-md px-2 py-0.5 hover:bg-blue-200 hover:text-slate-900 flex-none max-h-min items-center'
}
class={'border border-slate-500 font-medium font-mono rounded-md px-2 py-0.5 flex-none max-h-min items-center ' + normalClasses.join(' ')}
onClick={event => copyValue(event, this.value)}
>
Copy
Expand Down
17 changes: 17 additions & 0 deletions src/components/pid-component/pid-component.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -147,6 +147,22 @@ const meta: Meta = {
},
},
},
doNotCacheOrStoreInDatabase: {
name: 'do-not-cache-or-store-in-database',
description: 'If this flag is set to true, the component will reset the cache and database on every load and disconnect. Already existing data will be deleted.',
defaultValue: false,
control: {
type: 'boolean',
},
table: {
defaultValue: {
summary: 'false',
},
type: {
summary: 'boolean',
},
},
},
},
args: {
value: '21.11152/B88E78D4-E1EE-40F7-96CE-EC1AFCFF6343',
Expand All @@ -158,6 +174,7 @@ const meta: Meta = {
levelOfSubcomponents: 1,
currentLevelOfSubcomponents: 0,
defaultTTL: 24 * 60 * 60 * 1000,
doNotCacheOrStoreInDatabase: false,
},
};
const textDecorator = (story: () => unknown) =>
Expand Down
77 changes: 46 additions & 31 deletions src/components/pid-component/pid-component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { Component, h, Host, Prop, State, Watch } from '@stencil/core';
import { GenericIdentifierType } from '../../utils/GenericIdentifierType';
import { FoldableItem } from '../../utils/FoldableItem';
import { FoldableAction } from '../../utils/FoldableAction';
import { getEntity } from '../../utils/IndexedDBUtil';
import { clearEntities, getEntity } from '../../utils/IndexedDBUtil';
import { clearCache } from '../../utils/DataCache';

@Component({
Expand Down Expand Up @@ -106,6 +106,12 @@ export class PidComponent {
*/
@Prop() defaultTTL: number = 24 * 60 * 60 * 1000;

/**
* If this flag is set to true, the component will reset the cache and database on every load and disconnect.
* Already existing data will be deleted.
*/
@Prop() doNotCacheOrStoreInDatabase: boolean = false;

/**
* Stores the parsed identifier object.
*/
Expand Down Expand Up @@ -166,6 +172,12 @@ export class PidComponent {
* Parses the value and settings, generates the items and actions and sets the displayStatus to "loaded".
*/
async connectedCallback() {
if (this.doNotCacheOrStoreInDatabase) {
console.log('Clearing cache and database for ', this.value);
clearCache();
clearEntities();
}

let settings: {
type: string;
values: {
Expand Down Expand Up @@ -216,7 +228,7 @@ export class PidComponent {
*/
render() {
return (
<Host class="inline flex-grow max-w-full font-sans flex-wrap align-baseline items-center text-xs">
<Host class="inline flex-grow max-w-full font-sans flex-wrap align-baseline items-center text-xs dark:text-white">
{
// Check if there are any items or actions to show
(this.items.length === 0 && this.actions.length === 0) || this.hideSubcomponents ? (
Expand All @@ -227,12 +239,12 @@ export class PidComponent {
this.currentLevelOfSubcomponents === 0
? //(w/o sub components)
'group ' +
(this.emphasizeComponent || this.temporarilyEmphasized ? 'rounded-md shadow-md border px-1 bg-white ' : 'bg-white/40') +
(this.emphasizeComponent || this.temporarilyEmphasized ? 'rounded-md shadow-md border px-1 bg-white dark:bg-gray-800' : 'bg-white/40 dark:bg-gray-800/40') +
'text-xs text-clip inline-flex flex-grow open:align-top open:w-full ease-in-out transition-all duration-200 overflow-y-hidden font-bold font-mono cursor-pointer list-none overflow-x-hidden space-x-3 flex-nowrap flex-shrink-0 items-center'
: ''
}
>
<span class={'font-medium font-mono inline-flex flex-nowrap overflow-x-auto text-xs select-all'}>
<span class={'font-medium font-mono inline-flex flex-nowrap overflow-x-auto text-xs select-none'}>
{
// Render the preview of the identifier object defined in the specific implementation of GenericIdentifierType
this.identifierObject.renderPreview()
Expand All @@ -245,8 +257,8 @@ export class PidComponent {
</span>
) : (
<span class={'inline-flex items-center transition ease-in-out'}>
<svg class="animate-spin ml-1 mr-3 h-5 w-5 text-black" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
<svg class="animate-spin ml-1 mr-3 h-5 w-5 text-black dark:text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25 dark:opacity-75" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
<path
class="opacity-75"
fill="currentColor"
Expand All @@ -260,7 +272,7 @@ export class PidComponent {
<details
class={
'group ' +
(this.emphasizeComponent || this.temporarilyEmphasized ? 'rounded-md border pl-0.5 py-0 bg-white bg-opacity-0' : 'bg-white/60') +
(this.emphasizeComponent || this.temporarilyEmphasized ? 'bg-white dark:bg-gray-800 rounded-md border pl-0.5 py-0' : 'bg-white/60 dark:bg-gray-800/60') +
'text-clip inline flex-grow font-sans open:align-top open:w-full ease-in-out transition-all duration-200'
}
open={this.openByDefault}
Expand Down Expand Up @@ -288,7 +300,7 @@ export class PidComponent {
) : (
''
)}
<span class={'font-medium font-mono inline-flex flex-nowrap overflow-x-auto text-sm select-all'}>
<span class={'font-medium font-mono inline-flex flex-nowrap overflow-x-auto text-sm select-none'}>
{
// Render the preview of the identifier object defined in the specific implementation of GenericIdentifierType
this.identifierObject.renderPreview()
Expand All @@ -308,15 +320,9 @@ export class PidComponent {
// If there are any items to show, render the table
this.items.length > 0 ? (
<div>
<div class="resize-y divide-y text-sm leading-6 bg-gray-100 m-1 p-0.5 h-64 max-h-fit overflow-y-scroll border rounded min-h-[4rem]">
<div class="resize-y divide-y text-sm leading-6 bg-gray-100 dark:bg-gray-900 m-1 p-0.5 h-64 max-h-fit overflow-y-scroll border rounded min-h-[4rem]">
<table class="text-left w-full text-sm font-sans select-text">
<thead class="bg-slate-600 flex text-slate-200 w-full rounded-t">
<tr class="flex w-full rounded font-semibold">
<th class="px-1 w-1/4">Key</th>
<th class="px-1 w-3/4">Value</th>
</tr>
</thead>
<tbody class="bg-grey-100 flex flex-col items-center justify-between overflow-y-scroll w-full rounded-b">
<tbody class="bg-grey-100 dark:bg-gray-900 flex flex-col items-center justify-between overflow-y-scroll w-full rounded-b">
{this.items
.filter((_, index) => {
// Filter out items that are not on the current page
Expand All @@ -325,17 +331,17 @@ export class PidComponent {
.map(value => (
// Render a row for every item
// return (
<tr class={'odd:bg-slate-200 flex w-full'}>
<td class={'overflow-x-auto p-1 w-1/4 font-mono'}>
<tr class={'odd:bg-slate-200 dark:odd:bg-slate-800 flex w-full'}>
<td class={'overflow-x-auto p-1 w-1/6 font-mono'}>
<a
role="link"
class="right-0 focus:outline-none focus:ring-gray-300 rounded-md focus:ring-offset-2 focus:ring-2 focus:bg-gray-200 relative md:mt-0 inline flex-nowrap"
class="right-0 focus:outline-none focus:ring-gray-300 dark:focus:ring-gray-700 rounded-md focus:ring-offset-2 focus:ring-2 focus:bg-gray-200 dark:focus:bg-gray-800 relative md:mt-0 inline flex-nowrap"
onMouseOver={this.showTooltip}
onFocus={this.showTooltip}
onMouseOut={this.hideTooltip}
>
<div class="cursor-pointer align-top justify-between flex-nowrap">
<a href={value.keyLink} target={'_blank'} rel={'noopener noreferrer'} class={'mr-2 text-blue-400 justify-start float-left'}>
<a href={value.keyLink} target={'_blank'} rel={'noopener noreferrer'} class={'mr-2 text-blue-500 justify-start float-left'}>
{value.keyTitle}
</a>
<svg
Expand All @@ -359,13 +365,13 @@ export class PidComponent {
</div>
<p
role="tooltip"
class="hidden z-20 mt-1 transition duration-100 ease-in-out shadow-md bg-white rounded text-xs text-gray-600 p-1 flex-wrap overflow-clip"
class="hidden z-20 mt-1 transition duration-100 ease-in-out shadow-md bg-white dark:bg-gray-800 rounded text-xs text-gray-500 p-1 flex-wrap overflow-clip"
>
{value.keyTooltip}
</p>
</a>
</td>
<td class={'align-top overflow-x-auto text-sm p-1 w-3/4 select-text flex '}>
<td class={'align-top overflow-x-auto text-sm p-1 w-5/6 select-text flex '}>
<span class={'flex-grow'}>
{
// Load a foldable subcomponent if subcomponents are not disabled (hideSubcomponents), and the current level of subcomponents is not the total level of subcomponents. If the subcomponent is on the bottom level of the hierarchy, render just a preview. If the value should not be resolved (isFoldable), just render the value as text.
Expand Down Expand Up @@ -400,10 +406,10 @@ export class PidComponent {
</tbody>
</table>
</div>
<div class="flex items-center justify-between border-t border-gray-200 bg-white px-1 py-1 sm:px-1 max-h-12">
<div class="flex items-center justify-between border-t border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-800 px-1 py-1 sm:px-1 max-h-12">
<div class="hidden sm:flex sm:flex-1 sm:flex-nowrap sm:items-center sm:justify-between text-sm">
<div class={''}>
<p class="text-sm text-gray-700">
<p class="text-sm text-gray-700 dark:text-gray-300">
Showing
<span class="font-medium"> {1 + this.tablePage * this.amountOfItems} </span>
to
Expand All @@ -420,10 +426,10 @@ export class PidComponent {
onClick={() => {
this.tablePage = Math.max(this.tablePage - 1, 0);
}}
class="relative inline-flex items-center rounded-l-md px-1 py-1 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0"
class="fill-current relative inline-flex items-center rounded-l-md px-1 py-1 text-gray-500 ring-1 ring-inset ring-gray-300 dark:ring-gray-700 hover:bg-gray-50 dark:hover:bg-gray-950 focus:z-20 focus:outline-offset-0"
>
<span class="sr-only">Previous</span>
<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<svg class="h-5 w-5" viewBox="0 0 20 20" aria-hidden="true">
<path
fill-rule="evenodd"
d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z"
Expand All @@ -439,8 +445,8 @@ export class PidComponent {
onClick={() => (this.tablePage = index)}
class={
index === this.tablePage
? 'relative z-10 inline-flex items-center bg-blue-600 px-2 py-1 text-sm font-semibold text-white focus:z-20 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600'
: 'relative hidden items-center px-2 py-1 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0 md:inline-flex'
? 'relative z-10 inline-flex items-center bg-blue-500 px-2 py-1 text-sm font-semibold text-white focus:z-20 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500'
: 'relative hidden items-center px-2 py-1 text-sm font-semibold text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 hover:bg-gray-50 dark:hover:bg-gray-950 focus:z-20 focus:outline-offset-0 md:inline-flex'
}
>
{index + 1}
Expand All @@ -451,10 +457,10 @@ export class PidComponent {
onClick={() => {
this.tablePage = Math.min(this.tablePage + 1, Math.floor(this.items.length / this.amountOfItems));
}}
class="relative inline-flex items-center rounded-r-md px-1 py-1 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0"
class="fill-current relative inline-flex items-center rounded-r-md px-1 py-1 text-gray-500 ring-1 ring-inset ring-gray-300 dark:ring-gray-700 hover:bg-gray-50 dark:hover:bg-gray-950 focus:z-20 focus:outline-offset-0"
>
<span class="sr-only">Next</span>
<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<svg class="h-5 w-5" viewBox="0 0 20 20" aria-hidden="true">
<path
fill-rule="evenodd"
d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
Expand Down Expand Up @@ -484,7 +490,7 @@ export class PidComponent {
style += 'bg-blue-500 text-white';
break;
case 'secondary':
style += 'bg-slate-200 text-blue-500';
style += 'bg-slate-200 dark:bg-slate-800 text-blue-500';
break;
case 'danger':
style += 'bg-red-500 text-white';
Expand All @@ -508,6 +514,15 @@ export class PidComponent {
);
}

disconnectedCallback() {
console.log('Disconnected callback for ', this.value);
if (this.doNotCacheOrStoreInDatabase) {
console.log('Clearing cache and database for ', this.value);
clearCache();
clearEntities();
}
}

/**
* Toggles the loadSubcomponents property if the current level of subcomponents is not the total level of subcomponents.
*/
Expand Down
Loading