Skip to content

Commit

Permalink
Merge pull request #196 from appwrite/create-org-modal
Browse files Browse the repository at this point in the history 
Create organization Modal
  • Loading branch information
@ArmanNik
ArmanNik authored May 13, 2024
2 parents 1746793 + 9d66c75 commit 20b8ad5
Show file tree
Hide file tree
Showing 5 changed files with 417 additions and 0 deletions.
6 changes: 6 additions & 0 deletions .changeset/six-rabbits-obey.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@appwrite.io/pink-icons": minor
"@appwrite.io/pink": minor
---

Create organization Modal
374 changes: 374 additions & 0 deletions apps/kitchensink/create-org-modal.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,374 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@appwrite/kitchensink - bucket settings demo</title>
</head>

<body>
<main class="grid-with-side u-hide" id="main">
{{> topNav}} {{> sideNav}}

<section class="main-content s-dFvp3V-Iy6FY">
<div class="top-cover">
<div class="container">
<div class="u-flex u-cross-center u-gap-16 u-margin-block-start-20">
<h1 class="heading-level-4 s-dFvp3V-Iy6FY">
<span class="text s-dFvp3V-Iy6FY">Storage</span>
</h1>
</div>
<div class="tabs s-dFvp3V-Iy6FY">
<ul class="tabs-list scroll-shadow-horizontal s-dFvp3V-Iy6FY">
<li class="tabs-item s-dFvp3V-Iy6FY">
<a class="tabs-button s-dFvp3V-Iy6FY is-selected" href="#"
><span class="text s-dFvp3V-Iy6FY">Buckets</span></a
>
</li>
<li class="tabs-item s-dFvp3V-Iy6FY">
<a class="tabs-button s-dFvp3V-Iy6FY" href="#"
><span class="text s-dFvp3V-Iy6FY">Usage</span></a
>
</li>
</ul>
</div>
</div>
</div>
<!--<Cover>-->
<div class="container u-margin-block-start-24">
<div class="u-flex u-gap-12 common-section u-main-space-between">
<h2 class="heading-level-5">Buckets</h2>
<button class="button" type="button">
<span class="icon-plus" aria-hidden="true"></span>
<span class="text">Add bucket</span></button
><!--<Button>-->
</div>
<div
class="grid-box common-section"
style="--grid-gap: 2rem; --grid-item-size: 22rem"
>
<a class="card" href="#"
><div class="grid-item-1">
<div class="eyebrow-heading-3">XX Files</div>
<h2 class="heading-level-6">Images</h2>
<div class="status"></div>
<div class="options">
<span class="tooltip"
><button type="button" class="tag">
<i class="icon-duplicate"></i>Bucket ID</button
><!--<Pill>-->
<span class="tooltip-popup is-bottom" role="tooltip"
>Click to copy</span
></span
><!--<Copy>-->
</div>
<ul class="icons u-flex u-gap-8">
<li>
<button class="tooltip" aria-label="encryption">
<span class="icon-lock-closed" aria-hidden="true"></span>
<span class="tooltip-popup" role="tooltip"
><span>Encryption enabled</span></span
></button
><!--<Tooltip>-->
</li>
<li>
<button class="tooltip" aria-label="antivirus">
<span class="icon-shield-check" aria-hidden="true"></span>
<span class="tooltip-popup" role="tooltip"
><span>Antivirus enabled</span></span
></button
><!--<Tooltip>-->
</li>
</ul>
</div></a
><!--<Bucket>--><a class="card" href="#"
><div class="grid-item-1">
<div class="eyebrow-heading-3">XX Files</div>
<h2 class="heading-level-6">Empty Bucket</h2>
<div class="status">
<div class="tag">Disabled</div>
<!--<Pill>-->
</div>
<div class="options">
<span class="tooltip"
><button type="button" class="tag">
<i class="icon-duplicate"></i>Bucket ID</button
><!--<Pill>-->
<span class="tooltip-popup is-bottom" role="tooltip"
>Click to copy</span
></span
><!--<Copy>-->
</div>
<ul class="icons u-flex u-gap-8">
<li>
<button class="tooltip" aria-label="encryption">
<span
class="icon-lock-closed u-opacity-20"
aria-hidden="true"
></span>
<span class="tooltip-popup" role="tooltip"
><span>Encryption disabled</span></span
></button
><!--<Tooltip>-->
</li>
<li>
<button class="tooltip" aria-label="antivirus">
<span
class="icon-shield-check u-opacity-20"
aria-hidden="true"
></span>
<span class="tooltip-popup" role="tooltip"
><span>Antivirus disabled</span></span
></button
><!--<Tooltip>-->
</li>
</ul>
</div></a
><!--<Bucket>--><a class="card" href="#"
><div class="grid-item-1">
<div class="eyebrow-heading-3">XX Files</div>
<h2 class="heading-level-6">test</h2>
<div class="status"></div>
<div class="options">
<span class="tooltip"
><button type="button" class="tag">
<i class="icon-duplicate"></i>Bucket ID</button
><!--<Pill>-->
<span class="tooltip-popup is-bottom" role="tooltip"
>Click to copy</span
></span
><!--<Copy>-->
</div>
<ul class="icons u-flex u-gap-8">
<li>
<button class="tooltip" aria-label="encryption">
<span class="icon-lock-closed" aria-hidden="true"></span>
<span class="tooltip-popup" role="tooltip"
><span>Encryption enabled</span></span
></button
><!--<Tooltip>-->
</li>
<li>
<button class="tooltip" aria-label="antivirus">
<span
class="icon-shield-check u-opacity-20"
aria-hidden="true"
></span>
<span class="tooltip-popup" role="tooltip"
><span>Antivirus disabled</span></span
></button
><!--<Tooltip>-->
</li>
</ul>
</div></a
><!--<Bucket>--><a class="card" href="#"
><div class="grid-item-1">
<div class="eyebrow-heading-3">XX Files</div>
<h2 class="heading-level-6">zrdz</h2>
<div class="status">
<div class="tag">Disabled</div>
<!--<Pill>-->
</div>
<div class="options">
<span class="tooltip"
><button type="button" class="tag">
<i class="icon-duplicate"></i>Bucket ID</button
><!--<Pill>-->
<span class="tooltip-popup is-bottom" role="tooltip"
>Click to copy</span
></span
><!--<Copy>-->
</div>
<ul class="icons u-flex u-gap-8">
<li>
<button class="tooltip" aria-label="encryption">
<span class="icon-lock-closed" aria-hidden="true"></span>
<span class="tooltip-popup" role="tooltip"
><span>Encryption enabled</span></span
></button
><!--<Tooltip>-->
</li>
<li>
<button class="tooltip" aria-label="antivirus">
<span class="icon-shield-check" aria-hidden="true"></span>
<span class="tooltip-popup" role="tooltip"
><span>Antivirus enabled</span></span
></button
><!--<Tooltip>-->
</li>
</ul>
</div></a
><!--<Bucket>--><a class="card" href="#"
><div class="grid-item-1">
<div class="eyebrow-heading-3">XX Files</div>
<h2 class="heading-level-6">asdasd</h2>
<div class="status"></div>
<div class="options">
<span class="tooltip"
><button type="button" class="tag">
<i class="icon-duplicate"></i>Bucket ID</button
><!--<Pill>-->
<span class="tooltip-popup is-bottom" role="tooltip"
>Click to copy</span
></span
><!--<Copy>-->
</div>
<ul class="icons u-flex u-gap-8">
<li>
<button class="tooltip" aria-label="encryption">
<span
class="icon-lock-closed u-opacity-20"
aria-hidden="true"
></span>
<span class="tooltip-popup" role="tooltip"
><span>Encryption disabled</span></span
></button
><!--<Tooltip>-->
</li>
<li>
<button class="tooltip" aria-label="antivirus">
<span class="icon-shield-check" aria-hidden="true"></span>
<span class="tooltip-popup" role="tooltip"
><span>Antivirus enabled</span></span
></button
><!--<Tooltip>-->
</li>
</ul>
</div></a
><!--<Bucket>-->
<article class="card is-border-dashed u-grid u-cross-center">
<div class="u-flex u-flex-vertical u-cross-center">
<div class="common-section">
<button
class="button is-only-icon is-secondary"
type="button"
>
<i class="icon-plus"></i></button
><!--<Button>-->
</div>
<div class="common-section"><p>Add a new bucket</p></div>
</div>
</article>
</div>
<div class="u-flex u-margin-block-start-32 u-main-space-between">
<p class="text">Total results: 5</p>
<nav class="pagination">
<button class="button is-text is-disabled" aria-label="prev page">
<span class="icon-cheveron-left" aria-hidden="true"></span>
<span class="text">Prev</span>
</button>
<ol class="pagination-list is-only-desktop">
<li class="pagination-item">
<button class="button is-disabled" aria-label="page">
<span class="text">1</span>
</button>
</li>
</ol>
<button class="button is-text is-disabled" aria-label="next page">
<span class="text">Next</span>
<span class="icon-cheveron-right" aria-hidden="true"></span>
</button>
</nav>
<!--<Pagination>-->
</div>
</div>
<!--<Container>-->
<form class="form"><!--<Modal>--></form>
<!--<Form>--><!--<_create>--><!--<Index>--><!--<__layout>-->
<!--<UploadBox>--><!--<__layout>-->
<footer class="main-footer"></footer>
</section>
</main>



<dialog class="wizard-secondary">
<div class="wizard-secondary-container">
<header class="wizard-secondary-header">
<div class="u-flex u-main-space-between u-cross-baseline u-gap-32">
<h1 class="heading-level-5">Create organization</h1>
<button class="button is-text is-only-icon u-margin-block-start-8" aria-label="close modal">
<span class="icon-x u-font-size-20" aria-hidden="true"></span>
</button>
</div>
</header>
<div class="wizard-secondary-content">
<div class="wizard-secondary-content-1">
<ul class="form-list">
<li>
<label for="name">Name</label>
<input id="name" type="text" placeholder="Organization name">
</li>
<li>
<div class="label">Select plan</div>
<p>For more details on our plans, visit our pricing page.</p>
<ul class="u-flex u-gap-16 u-flex-vertical-mobile u-margin-block-start-8">
<li class="u-stretch">
<label class="card is-allow-focus u-flex u-gap-8 u-height-100-percent">
<input type="radio" class="is-small" name="package">
<div class="u-flex-vertical u-gap-4">
<h6 class="body-text-2 u-bold u-line-height-1">Starter</h6>
<p>For personal hobby projects of small scale and students</p>
<div class="u-margin-block-start-4">$0</div>
</div>
</label>
</li>
<li class="u-stretch">
<label class="card is-allow-focus u-flex u-gap-8 u-height-100-percent">
<input type="radio" class="is-small" name="package">
<div class="u-flex-vertical u-gap-4">
<h6 class="body-text-2 u-bold u-line-height-1">Pro</h6>
<p>For pro developers and production projects that need the ability to scale</p>
<div class="u-margin-block-start-4">$15 per member/month + usage</div>
</div>
</label>
</li>
</ul>
</li>
</ul>
</div>
<div class="wizard-secondary-content-sep"></div>
<div class="wizard-secondary-content-2">
<div class="wizard-secondary-content-sticky">
<div class="card" style="--card-padding:1.5rem">
<div class="u-flex-vertical u-gap-24">
<ul class="secondary-tabs is-stretch">
<li class="secondary-tabs-item">
<button class="secondary-tabs-button" disabled><span class="text">Starter</span></button>
</li>
<li class="secondary-tabs-item">
<button class="secondary-tabs-button"><span class="text">Pro</span></button>
</li>
</ul>
<div class="u-flex-vertical u-gap-8">
<h5 class="body-text-2 u-bold">Starter plan</h5>
<ul class="un-order-list u-gap-0">
<li>Limited to 1 Database, 3 Buckets, 5 Functions per project</li>
<li>Limited to 1 organization member</li>
<li>10GB bandwidth</li>
<li>2GB storage</li>
<li>750K executions</li>
</ul>
</div>
</div>

</div>
</div>
</div>
</div>
<div class="wizard-secondary-options">
<div class="wizard-secondary-options-start">
<!-- <button class="button is-secondary is-full-width-mobile">Button</button>-->
</div>
<div class="wizard-secondary-options-end">
<button class="button is-secondary is-full-width-mobile">Cancel</button>
<button class="button is-full-width-mobile">Create organization</button>
</div>
</div>
</div>
</dialog>


<script type="module" src="/main.js"></script>
</body>
</html>
1 change: 1 addition & 0 deletions apps/kitchensink/vite.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ const config = {
wizardWithModal: new URL("./wizard-with-modal.html", import.meta.url).pathname,
wizardWithModalEmpty: new URL("./wizard-with-modal-empty.html", import.meta.url).pathname,
fullScreenModal: new URL("./full-screen-modal.html", import.meta.url).pathname,
createOrgModal: new URL("./create-org-modal.html", import.meta.url).pathname,
},
},
},
Expand Down
Loading

0 comments on commit 20b8ad5

Please sign in to comment.