Skip to content
This repository has been archived by the owner on Jan 5, 2025. It is now read-only.

updated components & component file structure #145

Merged
merged 11 commits into from
Jan 3, 2025
48 changes: 29 additions & 19 deletions docs/components/README.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,32 @@
# Components

## Applets `/components/applet`
* [`<applet-battery></applet-battery>` | applet-battery.js](applet/applet-battery.md)
* `<applet-cpu></applet-cpu>` | applet-cpu.js
* [`<applet-network-down></applet-network-down>` | applet-network-down.js](applet/applet-network-down.md)
* [`<applet-network-rtt></applet-network-rtt>` | applet-network-rtt.js](applet/applet-network-rtt.md)
* `<applet-network></applet-network>` | applet-network.js
* `<applet-ram></applet-ram>` | applet-ram.js
* `<applet-sound></applet-sound>` | applet-sound.js

## Elements `/components/element`
* `<element-link-copy></element-link-copy>` | element-link-copy.js

## Taskbar `/components/taskbar`
* `<taskbar-app></taskbar-app>` | taskbar-app.js
* `<taskbar-clock></taskbar-clock>` | taskbar-clock.js

## Widgets `/components/widget`
* `<widget-clock></widget-clock>` | widget-clock.js
* `<widget-weather></widget-weather>` | widget-weather.js

# UI `/components/ui`
* [`<ui-progress></ui-progress>` | ui-progress.js](ui/ui-progress.md)
* [`<ui-switch></ui-switch>` | ui-switch.js](ui/ui-switch.md)

## Other `/components`
* [`<desktop-popup></desktop-popup>` | popup.js](popup.md)


## Naming Convention

Expand Down Expand Up @@ -33,29 +60,12 @@ File Name: `applet-network-connection.js`
<!-- KEEP ALPHABETICAL ORDER -->

### UI
* [`<desktop-popup></desktop-popup>` | popup.js](popup.md)
- [`<ui-progress></ui-progress>` | ui-progress.js](ui-progress.md)
- [`<ui-switch></ui-switch>` | ui-switch.js](ui-switch.md)

* [`<calendar-widget></calendar-widget>` | calendar.js](calendar.md)

- [`<chart-square></chart-square>` | chart-square.js](chart-square.md)
* `<button-power></button-power>` | power.js


### Applets `/components/applet`
* [`<applet-battery></applet-battery>` | applet-battery.js](applet-battery.md)
### Other
* `<applet-clock></applet-clock>` | clock.js
* `<applet-cpu></applet-cpu>` | applet-cpu.js
* `<applet-date></applet-date>` | date.js
* [`<applet-network-down></applet-network-down>` | applet-network-down.js](applet-network-down.md)
* [`<applet-network-rtt></applet-network-rtt>` | applet-network-rtt.js](applet-network-rtt.md)
* `<applet-ram></applet-ram>` | applet-ram.js
* `<applet-sound></applet-sound>` | applet-sound.js
* `<applet-weather></applet-weather>` | weather.js
* `<applet-network></applet-network>` | applet-network.js



## Naming
Ensure that the Markdown documentation file has the identical name to the script.
* `<applet-date></applet-date>` | date.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@

### Script
```html
<script src="/components/applet-battery.js" type="module"></script>
<script src="/components/applet/applet-battery.js" type="module"></script>
```


Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ This applet uses the navigation.connection API to get downlink speed and display

### Script
```html
<script src="/components/applet-network-down.js" type="module"></script>
<script src="/components/applet/applet-network-down.js" type="module"></script>
```


Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ This applet uses the navigation.connection API to get the round-trip time and di

### Script
```html
<script src="/components/applet-network-rtt.js" type="module"></script>
<script src="/components/applet/applet-network-rtt.js" type="module"></script>
```

### Body
Expand Down
25 changes: 12 additions & 13 deletions docs/components/popup.md
Original file line number Diff line number Diff line change
Expand Up @@ -33,13 +33,12 @@


## CSS Variables
- `--ok-color`: Color of the OK button
- `--cancel-color`: Color of the Cancel button
- `--text-color`: Color of the text
- `--bg-color`: Background color of the popup
* `--ok-text-color`: Text color of the OK button
* `--cancel-text-color`: Text color of the Cancel button

- `--color-ok`: Color of the OK button
- `--color-cancel`: Color of the Cancel button
- `--color-background`: Background color of the popup
* `--color-text`: Color of the text
* `--color-text--ok`: Text color of the OK button
* `--color-text--cancel`: Text color of the Cancel button

## Attributes
* `position`: positions the popup in the window center
Expand All @@ -49,9 +48,9 @@
```


# Child Components
- `desktop-popup_yes_no`
- `desktop-popup_ok`
- `desktop-popup_info`
- `desktop-popup_warning`
- `desktop-popup_error`
# Variants
- `desktop-popup--yes-no`
- `desktop-popup--ok`
- `desktop-popup--info`
- `desktop-popup--warning`
- `desktop-popup--error`
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@

### Script
```html
<script src="/components/ui-progress.js" type="module"></script>
<script src="/components/ui/ui-progress.js" type="module"></script>
```


Expand Down
14 changes: 7 additions & 7 deletions docs/components/ui-switch.md → docs/components/ui/ui-switch.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@

### Script
```html
<script src="/components/ui-switch.js" type="module"></script>
<script src="/components/ui/ui-switch.js" type="module"></script>
```


Expand All @@ -19,12 +19,12 @@
## Properties

### CSS
- `--on-color`: Color of the switch when checked
- `--off-color`: Color of the switch when unchecked
- `--knob-color`: Color of the knob
* `--disabled-on-color`: Color of the switch when checked and disabled
* `--disabled-off-color`: Color of the switch when unchecked and disabled
* `--disabled-knob-color`: Color of the knob when disabled
- `--color-on`: Color of the switch when checked
- `--color-off`: Color of the switch when unchecked
- `--color-knob`: Color of the knob
* `--color-on--disabled`: Color of the switch when checked and disabled
* `--color-off--disabled`: Color of the switch when unchecked and disabled
* `--color-knob--disabled`: Color of the knob when disabled


### Attributes
Expand Down
128 changes: 128 additions & 0 deletions src/components/element/element-link-copy.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,128 @@
class ElementLinkCopy extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.render();
}

connectedCallback() {
this.render();
}

css() {
return `
:host {
/* COLORS */
--color-background: #ffffff;
--color-border: rgba(0, 0, 0, 0.1);
--color-text: #0f0f0f;
--color-button: #065fd4;
--color-button--error: #ff0000;
}

.bar {
padding: 8px 4px;
background: var(--color-background);
border: 1px solid var(--color-border);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: space-between;
}

input {
background-color: transparent;
border: none;
color: var(--color-text);
font-size: 14px;
margin-left: 16px;
min-width: 0;
overflow: hidden;
white-space: nowrap;
}

.copy-button {
background-color: var(--color-button);
border: none;
border-radius: 18px;
color: #fff;
cursor: pointer;
font-size: 14px;
height: 36px;
line-height: 36px;
margin: 0;
padding: 0 16px;
}

.copy-button--failed {
background-color: var(--color-button--error);
}
`;
}

template() {
return `
<div class="bar">
<input class="share-url" dir="ltr" readonly="" size="45">
<button class="copy-button" aria-disabled="false" aria-label="Copy">Copy</button>
</div>
`;
}

render() {
this.shadowRoot.innerHTML = `
<style>${this.css()}</style>
${this.template()}
`;

this.shadowRoot.querySelector('.share-url').value = this.url;
this.shadowRoot.querySelector('.copy-button').addEventListener('click', () => this.copyToClipboard(this.url));
}

copyToClipboard(url) {
const button = this.shadowRoot.querySelector('.copy-button');
const input = this.shadowRoot.querySelector('.share-url');

button.disabeld = true;
input.select();

try {
navigator.clipboard.writeText(url);
button.textContent = 'Copied!';
setTimeout(() => {
button.textContent = 'Copy';
button.disabeld = false;
}, 1000);
} catch (error) {
console.error('Failed to copy: ', error);
button.textContent = 'Failed!';
button.classList.add('copy-button--failed');
setTimeout(() => {
button.textContent = 'Copy';
button.classList.remove('copy-button--failed');
button.disabeld = false;
}, 2000);
}
}



static get observedAttributes() {
return ['url'];
}

attributeChangedCallback(name, oldValue, newValue) {
this.render();
}

set url(url) {
this.setAttribute('url', url);
}

get url() {
console.log(this.getAttribute('url'));
return this.getAttribute('url') || 'https://example.org';
}
}

customElements.define('element-link-copy', ElementLinkCopy);
47 changes: 27 additions & 20 deletions src/components/popup.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,29 +18,29 @@ class Popup extends HTMLElement {
css() {
return `
:host {
--ok-color: #166fd1;
--cancel-color: #878181;
--text-color: white;
--bg-color: #484444;
--color-ok: #166fd1;
--color-cancel: #878181;
--color-text: white;
--color-background: #484444;

--ok-text-color: var(--text-color);
--cancel-text-color: var(--text-color);
--color-text--ok: var(--text-color);
--color-text--cancel: var(--text-color);
}

@media (prefers-color-scheme: light) {
:host {
--ok-color: #60a844;
--cancel-color: #cfcfcf;
--bg-color: #e9e9e9;
--text-color: #484848;
--ok-text-color: var(--bg-color);
--color-ok: #60a844;
--color-cancel: #cfcfcf;
--color-background: #e9e9e9;
--color-text: #484848;
--color-text--ok: var(--color-background);
border: 1px solid #b0b0b0;
}
}

:host {
color: var(--text-color);
background-color: var(--bg-color);
color: var(--color-text);
background-color: var(--color-background);
padding: 20px;
display: flex;
justify-content: center;
Expand Down Expand Up @@ -110,8 +110,8 @@ class Popup extends HTMLElement {
font-size: 16px;
}

button.ok { background-color: var(--ok-color); color: var(--ok-text-color); }
button.cancel { background-color: var(--cancel-color); color: var(--cancel-text-color); }
button.ok { background-color: var(--color-ok); color: var(--color-text--ok); }
button.cancel { background-color: var(--color-cancel); color: var(--color-text--cancel); }


${
Expand Down Expand Up @@ -209,7 +209,8 @@ class Popup extends HTMLElement {

customElements.define('desktop-popup', Popup);

/* POPUP VARIANT */

/* POPUP VARIANTS */

class PopupAskYesNo extends Popup {
constructor() {
Expand All @@ -219,28 +220,34 @@ class PopupAskYesNo extends Popup {
this.cancel_text = 'No';
}
}
customElements.define('desktop-popup_yes_no', PopupAskYesNo);
customElements.define('desktop-popup--yes-no', PopupAskYesNo);



class PopupInfo extends Popup {
constructor() {
super();
this.icon = '/assets/popup/info.svg';
}
}
customElements.define('desktop-popup_info', PopupInfo);
customElements.define('desktop-popup--info', PopupInfo);



class PopupWarning extends Popup {
constructor() {
super();
this.icon = '/assets/popup/warning.svg';
}
}
customElements.define('desktop-popup_warning', PopupWarning);
customElements.define('desktop-popup--warning', PopupWarning);



class PopupError extends Popup {
constructor() {
super();
this.icon = '/assets/popup/error.svg';
}
}
customElements.define('desktop-popup_error', PopupError);
customElements.define('desktop-popup--error', PopupError);
Loading
Loading