Skip to content

Commit 943e2c5

Browse files
TorstenDittmannTorstenDittmann
committed
Merge branch 'main' of https://github.com/appwrite/ui into style-updates-for-release-1.4
2 parents f4f343e + a2e9f11 commit 943e2c5

35 files changed

+1154
-575
lines changed

‎.changeset/dirty-hounds-do.md

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"@appwrite.io/pink-icons": patch
3+
"@appwrite.io/pink": patch
4+
---
5+
6+
patch bump

‎.changeset/pre.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
"ten-snakes-teach",
2020
"three-waves-cheer",
2121
"two-pans-shake",
22-
"witty-bulldogs-repeat"
22+
"witty-bulldogs-repeat",
23+
"dirty-hounds-do"
2324
]
2425
}

‎.github/workflows/alt-text-image.yml

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
name: Accessibility-alt-text-bot
2+
on:
3+
issues:
4+
types: [opened, edited]
5+
pull_request:
6+
types: [opened, edited]
7+
issue_comment:
8+
types: [created, edited]
9+
discussion:
10+
types: [created, edited]
11+
discussion_comment:
12+
types: [created, edited]
13+
14+
permissions:
15+
issues: write
16+
pull-requests: write
17+
discussions: write
18+
19+
jobs:
20+
accessibility_alt_text_bot:
21+
name: Check alt text is set on issue or pull requests
22+
runs-on: ubuntu-latest
23+
if: ${{ github.event.issue || github.event.pull_request || github.event.discussion }}
24+
steps:
25+
- name: Get action 'github/accessibility-alt-text-bot'
26+
uses: github/[email protected]

‎apps/kitchensink/cover-frame-2.html

+364
Large diffs are not rendered by default.

‎apps/kitchensink/error-console-page.html

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>@appwrite/kitchensink - user demo</title>
7+
</head>
8+
9+
<body>
10+
<main class="" id="main">
11+
{{> topNav}}
12+
<section class="main-content">
13+
<div class="top-cover">
14+
<div class="container">
15+
16+
</div>
17+
</div>
18+
<div class="container">
19+
<div class="modal u-width-full-line u-margin-inline-auto u-margin-block-start-negative-168">
20+
<form class="modal-form">
21+
<header class="modal-header">
22+
<div class="u-flex u-main-space-between u-cross-center u-gap-16">
23+
<h4 class="modal-title heading-level-4">Organization not found</h4>
24+
</div>
25+
</header>
26+
<div class="modal-content">
27+
<p>The organization with the requested ID could not be found.</p>
28+
<div class="u-flex u-margin-block-start-32 u-gap-16">
29+
<button class="button">
30+
<span class="text">Go to console</span>
31+
</button>
32+
</div>
33+
</div>
34+
</form>
35+
</div>
36+
</div>
37+
38+
<footer class="main-footer"></footer>
39+
</section>
40+
</main>
41+
<script type="module" src="/main.js"></script>
42+
</body>
43+
</html>

‎apps/kitchensink/error-not-found-modal.html

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>@appwrite/kitchensink</title>
7+
</head>
8+
9+
<body>
10+
<div class="u-flex u-full-screen-height u-main-center u-cross-center">
11+
<div class="modal">
12+
<form class="modal-form" method="dialog">
13+
<header class="modal-header">
14+
<div class="u-flex u-main-space-between u-cross-center u-gap-16">
15+
<h4 class="modal-title heading-level-4">Missing Redirect URL </h4>
16+
<button class="button is-text is-small is-only-icon u-hide" aria-label="Close modal">
17+
<span class="icon-x" aria-hidden="true"></span>
18+
</button>
19+
</div>
20+
</header>
21+
<div class="modal-content">
22+
<p>Your Oauth sign in flow is missing a proper redirect URL. Send a request for a new session with a valid callback URL.</p>
23+
<ul class="form-list">
24+
<li class="form-item">
25+
<label class="label u-block">Code</label>
26+
<code class="inline-code u-block u-width-fit-content u-margin-block-start-8">DEPLOYMENT_NOT_FOUND</code>
27+
</li>
28+
</ul>
29+
<div class="u-flex u-gap-16">
30+
<button class="button is-secondary">
31+
<span class="text">OAuth docs</span>
32+
</button>
33+
<button class="button">
34+
<span class="text">Go to console</span>
35+
</button>
36+
</div>
37+
</div>
38+
</form>
39+
</div>
40+
</div>
41+
42+
<script type="module" src="/main.js"></script>
43+
</body>
44+
</html>

‎apps/kitchensink/vite.config.js

+3
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ const config = {
2323
wizardForm: new URL("./wizard-form.html", import.meta.url).pathname,
2424
wizard11: new URL("./wizard-1-1.html", import.meta.url).pathname,
2525
coverFrame: new URL("./cover-frame.html", import.meta.url).pathname,
26+
coverFrame2: new URL("./cover-frame-2.html", import.meta.url).pathname,
2627
users: new URL("./users.html", import.meta.url).pathname,
2728
user: new URL("./user.html", import.meta.url).pathname,
2829
functions: new URL("./functions.html", import.meta.url).pathname,
@@ -39,6 +40,8 @@ const config = {
3940
gettingStarted: new URL("./getting-started.html", import.meta.url).pathname,
4041
modalDemo: new URL("./modal-demo.html", import.meta.url).pathname,
4142
filters: new URL("./filters.html", import.meta.url).pathname,
43+
errorNotFoundModal: new URL("./error-not-found-modal.html", import.meta.url).pathname,
44+
errorConsolePage: new URL("./error-console-page.html", import.meta.url).pathname,
4245
},
4346
},
4447
},

‎apps/pink/src/components/JoinCommunity.svelte

+8-2
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,13 @@
2222
});
2323
2424
function getAvatar(user: User) {
25-
return `https://github.com/${user.username}.png`;
25+
const url = new URL('https://cloud.appwrite.io/v1/avatars/image');
26+
url.searchParams.set('project', 'console');
27+
url.searchParams.set('width', '100');
28+
url.searchParams.set('height', '100');
29+
url.searchParams.set('url', `https://github.com/${user.username}.png`);
30+
31+
return url.toString();
2632
}
2733
2834
function getUrl(user: User) {
@@ -62,7 +68,7 @@
6268
<ul id="join-community-users" class="u-margin-block-start-48">
6369
{#each shuffle(users) as user}
6470
<li>
65-
<a class="avatar-link" href={getUrl(user)} target="_blank" rel="noreferrer">
71+
<a class="avatar-link" href={getUrl(user)} target="_blank" rel="noopener noreferrer">
6672
<img
6773
class="avatar is-size-large u-drop-shadow-large"
6874
src={getAvatar(user)}

‎apps/pink/src/layouts/Layout.astro

-13
Original file line numberDiff line numberDiff line change
@@ -99,19 +99,6 @@ const titleFallback = "Pink Design - Appwrite's Design System";
9999
data-domain="pink.appwrite.io"
100100
src="https://plausible.io/js/script.js"
101101
></script>
102-
<script async src="https://www.googletagmanager.com/gtag/js?id=G-E4B1RRENQ6"></script>
103-
<script>
104-
window.dataLayer = window.dataLayer || [];
105-
function gtag(){dataLayer.push(arguments);}
106-
gtag('js', new Date());
107-
gtag('config', 'G-E4B1RRENQ6');
108-
109-
if (window.navigator?.doNotTrack) {
110-
if (navigator.doNotTrack === '1' || navigator.doNotTrack === 'yes') {
111-
window['ga-disable-G-E4B1RRENQ6'] = true;
112-
}
113-
}
114-
</script>
115102
</head>
116103

117104
<body>

‎apps/pink/src/pages/elements/loader.mdx

+17
Original file line numberDiff line numberDiff line change
@@ -15,4 +15,21 @@ description: Use loaders to indicate to users that something is in progress and
1515

1616
<Preview center>
1717
<div class="loader is-small"></div>
18+
</Preview>
19+
20+
21+
## Loading precent state
22+
Work different from the other rotate loaders.
23+
| State Class | Type | |
24+
| -------------------- | -------- | ----------------------------------------------- |
25+
| `is-loading` | Loading | Change behaving from rotating to loading |
26+
27+
| param | represents | Example: |
28+
| ----------------------------- | -------------------------------------------------------------------------------- | -------------------------------------------------- |
29+
| `--loading` | Loading precent | `--loading: 65%;` |
30+
| `-loader-bg-color-light` | inner circle color (light-mode) that will fit background-color of the container | `--loader-bg-color-light: var(--color-neutral-5);` |
31+
| `-loader-bg-color-dark` | inner circle color (dark-mode) that will fit background-color of the container | `--loader-bg-color-dark: var(--color-neutral-400);`|
32+
33+
<Preview center>
34+
<div class="loader is-loading" style="--loading:65%; --loader-bg-color-light:var(--color-neutral-5); --loader-bg-color-dark:var(--color-neutral-400);"></div>
1835
</Preview>

‎apps/pink/src/pages/elements/table.mdx

+56
Original file line numberDiff line numberDiff line change
@@ -291,6 +291,8 @@ In the Appwrite console, we use three styles of tables:
291291
</table>
292292
</Preview><br /><br /><br />
293293

294+
## Remove Outer Style Table
295+
294296
| Class | Type | |
295297
| ------------------------ | -------------------- | -------------------------------------------------------------------------------- |
296298
| `is-remove-outer-styles` | Without Outer Styles | Secondary table - in the Appwrite console used mostly inside a card or a wizard. |
@@ -384,10 +386,64 @@ In the Appwrite console, we use three styles of tables:
384386
</div>
385387
</section>
386388
</Preview>
389+
390+
## Remove Outer Style Table - List with Table View
391+
392+
<Preview center>
393+
<section class="card">
394+
<ul class="table is-remove-outer-styles u-sep-block-start">
395+
<li class="table-row">
396+
<label class="table-col u-cursor-pointer">
397+
<div class="u-flex u-cross-center u-gap-8">
398+
<input class="is-small u-margin-inline-end-8" type="radio" name="a" />
399+
<div class="avatar is-size-x-small">
400+
<img src="/assets/node.234c8244.svg" alt="node" />
401+
</div>
402+
<div class="u-flex u-gap-8">
403+
<span class="text">repo-name</span>
404+
<time class="u-color-text-gray" datetime="2011-11-18T14:54:39.929">30m ago</time>
405+
</div>
406+
</div>
407+
</label>
408+
</li>
409+
<li class="table-row">
410+
<label class="table-col u-cursor-pointer">
411+
<div class="u-flex u-cross-center u-gap-8">
412+
<input class="is-small u-margin-inline-end-8" type="radio" name="a" />
413+
<div class="avatar is-size-x-small">
414+
<img src="/assets/node.234c8244.svg" alt="node" />
415+
</div>
416+
<div class="u-flex u-gap-8">
417+
<span class="text">repo-name</span>
418+
<time class="u-color-text-gray" datetime="2011-11-18T14:54:39.929">30m ago</time>
419+
</div>
420+
</div>
421+
</label>
422+
</li>
423+
<li class="table-row">
424+
<label class="table-col u-cursor-pointer">
425+
<div class="u-flex u-cross-center u-gap-8">
426+
<input class="is-small u-margin-inline-end-8" type="radio" name="a" />
427+
<div class="avatar is-size-x-small">
428+
<img src="/assets/node.234c8244.svg" alt="node" />
429+
</div>
430+
<div class="u-flex u-gap-8">
431+
<span class="text">repo-name</span>
432+
<time class="u-color-text-gray" datetime="2011-11-18T14:54:39.929">30m ago</time>
433+
</div>
434+
</div>
435+
</label>
436+
</li>
437+
</ul>
438+
</section>
439+
</Preview>
387440
<br />
388441
<br />
389442
<br />
390443

444+
445+
446+
391447
| Class | Type | |
392448
| ------------------ | ------------ | ---------------------------------------------------------------------------------------------------- |
393449
| `is-sticky-scroll` | Inner Scroll | Used in case the content of a table exceeds the maximum width and the first column should be sticky. |

0 commit comments

Comments
 (0)