Merge pull request #2790 from appwrite/feat-ui-upload-box
This commit is contained in:
commit
d4c8462730
8 changed files with 173 additions and 15 deletions
|
@ -222,22 +222,48 @@
|
||||||
</footer>
|
</footer>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
<div
|
|
||||||
id="upload-modal" style="position: fixed; right:0; bottom: 0; background: white;z-index: 9999;">
|
<section class="upload-box" x-data>
|
||||||
<template x-data x-if="$store.uploader.files.length > 0">
|
<div class="upload-box-header">
|
||||||
<template x-data x-for="file in $store.uploader.files" :key="file.id">
|
<h4 class="upload-box-title">
|
||||||
<p>
|
<span class="text">Uploading files</span>
|
||||||
<span x-text="file.progress"></span>
|
<span class="amount" x-text="$store.uploader.files.length"></span>
|
||||||
<span x-text="file.name"></span>
|
</h4>
|
||||||
<button @click="$store.uploader.removeFile(file.id)">X</button>
|
<button class="icon-button" :class="$store.uploader.isOpen ? '' : 'is-open'" aria-label="toggle upload box" @click="$store.uploader.toggle()"><span class="icon-down-open" aria-hidden="true"></span></button>
|
||||||
</p>
|
<button class="icon-button" aria-label="close upload box"><span class="icon-cancel" aria-hidden="true"></span></button>
|
||||||
</template>
|
</div>
|
||||||
</template>
|
<div class="upload-box-content" :class="$store.uploader.isOpen ? 'is-open' : ''">
|
||||||
</div>
|
<ul class="upload-box-list">
|
||||||
|
<template x-if="$store.uploader.files.length > 0">
|
||||||
|
<template x-for="file in $store.uploader.files" :key="file.id">
|
||||||
|
<li class="upload-box-item">
|
||||||
|
<div class="upload-image u-margin-inline-end-16" :class="file.completed ? 'is-finished' : ''">
|
||||||
|
<div class="progress"
|
||||||
|
:style="'--progress-value:' + file.progress"
|
||||||
|
:aria-valuenow="file.progress"
|
||||||
|
role="progressbar"
|
||||||
|
aria-valuemin="0"
|
||||||
|
aria-valuemax="100"></div>
|
||||||
|
<span class="icon">%</span>
|
||||||
|
</div>
|
||||||
|
<label for="file1" class="file-name" x-text="file.name"></label>
|
||||||
|
<button x-show="file.completed" class="icon-button is-success" aria-label="Uploading"><span class="icon-ok"></span></button>
|
||||||
|
<button x-show="!file.completed" class="icon-button" aria-label="Uploading" @click="$store.uploader.removeFile(file.id)"><span class="icon-cancel"></span></button>
|
||||||
|
</li>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
<script>
|
<script>
|
||||||
document.addEventListener('alpine:init', () => {
|
document.addEventListener('alpine:init', () => {
|
||||||
Alpine.store('uploader', {
|
Alpine.store('uploader', {
|
||||||
files: [],
|
files: [],
|
||||||
|
isOpen: true,
|
||||||
|
toggle() {
|
||||||
|
this.isOpen = !this.isOpen;
|
||||||
|
},
|
||||||
addFile(file) {
|
addFile(file) {
|
||||||
this.files.push(file);
|
this.files.push(file);
|
||||||
},
|
},
|
||||||
|
@ -269,7 +295,7 @@
|
||||||
completed: false,
|
completed: false,
|
||||||
failed: false,
|
failed: false,
|
||||||
});
|
});
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const response = await sdk.storage.createFile(
|
const response = await sdk.storage.createFile(
|
||||||
formData.get('bucketId'),
|
formData.get('bucketId'),
|
||||||
|
|
2
public/dist/styles/default-ltr.css
vendored
2
public/dist/styles/default-ltr.css
vendored
File diff suppressed because one or more lines are too long
2
public/dist/styles/default-rtl.css
vendored
2
public/dist/styles/default-rtl.css
vendored
File diff suppressed because one or more lines are too long
11
public/styles/comps/pill.less
Normal file
11
public/styles/comps/pill.less
Normal file
|
@ -0,0 +1,11 @@
|
||||||
|
.pill {
|
||||||
|
--p-pill-text-color:var(--config-defalut-color-hsl, var(--pill-text-color));
|
||||||
|
|
||||||
|
color: hsl(var(--p-pill-text-color));
|
||||||
|
background-color: hsl(~"var(--p-pill-text-color) / 0.2");
|
||||||
|
display:inline-grid; place-content:center; padding-inline:12px; height:30px; border-radius:15px;
|
||||||
|
font-size:14px; font-weight:500;
|
||||||
|
|
||||||
|
&.is-disabled { --p-pill-text-color:var(--config-disabled-color-hsl); }
|
||||||
|
&.is-pending { --p-pill-text-color:var(--config-pending-color-hsl); }
|
||||||
|
}
|
111
public/styles/comps/upload-box.less
Normal file
111
public/styles/comps/upload-box.less
Normal file
|
@ -0,0 +1,111 @@
|
||||||
|
.upload-box {
|
||||||
|
--p-header-text-color:var(--config-color-background-fade);
|
||||||
|
--p-header-bg-color:var(--config-color-normal);
|
||||||
|
|
||||||
|
--p-content-text-color:var(--config-color-normal);
|
||||||
|
--p-content-bg-color:var(--config-color-background-fade);
|
||||||
|
|
||||||
|
--p-border-color:var(--config-modal-note-border);
|
||||||
|
|
||||||
|
|
||||||
|
--box-shadow:0 10px 10px rgba(0, 0, 0, 0.05);
|
||||||
|
--border-radius:6px;
|
||||||
|
--transition:0.2s;
|
||||||
|
|
||||||
|
position:fixed; z-index:1; overflow:hidden; min-width:285px;
|
||||||
|
box-shadow:var(--box-shadow);
|
||||||
|
border-radius:var(--border-radius);
|
||||||
|
font-size:14px; line-height:1;
|
||||||
|
*{all:unset; display:revert;}
|
||||||
|
&-header {
|
||||||
|
display:flex; padding:16px; padding-inline-end:21px;
|
||||||
|
color:var(--p-header-text-color); background-color:var(--p-header-bg-color);
|
||||||
|
.icon-button { margin-inline-start:16px; }
|
||||||
|
}
|
||||||
|
&-title {
|
||||||
|
align-self:center; margin-inline-end:auto; margin-block-end:0;
|
||||||
|
.amount {
|
||||||
|
&::before { content:"("; }
|
||||||
|
&::after { content:")"; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-content {
|
||||||
|
background-color:var(--p-content-bg-color); color:var(--p-content-text-color);
|
||||||
|
height:0; overflow:hidden;
|
||||||
|
transition:var(--transition);
|
||||||
|
&.is-open {height:200px; /* consider to change to rem */}
|
||||||
|
}
|
||||||
|
&-list {}
|
||||||
|
&-item {
|
||||||
|
display:flex; padding:13px 20px;
|
||||||
|
.file-name { @include trim; align-self:center; margin-inline-end:auto; }
|
||||||
|
.icon-button{ align-self:center; margin-inline-start:16px;}
|
||||||
|
&:not(:last-child) { border-bottom:solid 1px var(--p-border-color); }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* responsive */
|
||||||
|
@media @phones { inset-inline:16px; inset-block-end:20px; }
|
||||||
|
@media @tablets, @desktops { inset-inline-end:24px; inset-block-end:24px; }
|
||||||
|
|
||||||
|
/* dark theme */
|
||||||
|
:root .theme-dark &{
|
||||||
|
--p-header-text-color:#fff;
|
||||||
|
--p-header-bg-color:var(--config-color-background-dark);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.upload-image {
|
||||||
|
@upload-image-size-default: 40px;
|
||||||
|
--p-upload-image-size:var(--upload-image-size, @upload-image-size-default);
|
||||||
|
--p-upload-bg-color:var(--config-color-fade-super);
|
||||||
|
--p-upload-icon-color:var(--config-color-fade-light);
|
||||||
|
|
||||||
|
position:relative; display:grid; place-content:center;
|
||||||
|
width:var(--p-upload-image-size);
|
||||||
|
height:var(--p-upload-image-size);
|
||||||
|
background-color:var(--p-upload-bg-color);
|
||||||
|
color:var(--p-upload-icon-color);
|
||||||
|
border-radius:50%;
|
||||||
|
|
||||||
|
.icon{position:relative; z-index:20;}
|
||||||
|
.progress {
|
||||||
|
--progress:var(--progress-value, 0);
|
||||||
|
--zero-value: 0 0% 0% / 0%;
|
||||||
|
position:absolute; z-index:10; inset:0; border-radius:50%;
|
||||||
|
background:
|
||||||
|
~"radial-gradient(
|
||||||
|
var(--p-upload-bg-color) 0%,
|
||||||
|
var(--p-upload-bg-color) 64%,
|
||||||
|
transparent 64.01%,
|
||||||
|
transparent 100%),
|
||||||
|
|
||||||
|
conic-gradient(
|
||||||
|
hsl(194 66% 50%) 0%,
|
||||||
|
hsl(97 66% 50%) calc(var(--progress) * 1%),
|
||||||
|
hsl(var(--zero-value)) calc(var(--progress) * 1%),
|
||||||
|
hsl(var(--zero-value)) 100%)";
|
||||||
|
}
|
||||||
|
&.is-finished {
|
||||||
|
--p-upload-icon-color:var(--config-color-fade);
|
||||||
|
.progress{ display:none; }
|
||||||
|
}
|
||||||
|
/* dark theme */
|
||||||
|
:root .theme-dark &{
|
||||||
|
--p-upload-bg-color:var(--config-color-background-dark);
|
||||||
|
--p-upload-icon-color:var(--config-color-focus);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-button {
|
||||||
|
--p-icon-button-size:var(--icon-button-size, 20px);
|
||||||
|
|
||||||
|
width:var(--p-icon-button-size);
|
||||||
|
height:var(--p-icon-button-size);
|
||||||
|
font-size:var(--p-icon-button-size);
|
||||||
|
transition:0.2s; line-height:1; text-align:center; flex-shrink:0; cursor:pointer;
|
||||||
|
>*::before{margin:0;}
|
||||||
|
&.is-open { transform:rotate(180deg); }
|
||||||
|
&.is-success { color:var(--config-color-success); }
|
||||||
|
&:focus, &:hover { background-color:unset; }
|
||||||
|
&:focus-visible { outline:dashed 1px var(--config-color-primary); }
|
||||||
|
}
|
|
@ -20,6 +20,7 @@ img[src=""] {
|
||||||
@import "polyfills";
|
@import "polyfills";
|
||||||
@import "forms";
|
@import "forms";
|
||||||
@import "ide";
|
@import "ide";
|
||||||
|
@import "utilities";
|
||||||
@import "scopes/console";
|
@import "scopes/console";
|
||||||
@import "scopes/home";
|
@import "scopes/home";
|
||||||
@import "comps/alerts";
|
@import "comps/alerts";
|
||||||
|
@ -33,6 +34,8 @@ img[src=""] {
|
||||||
@import "comps/modal";
|
@import "comps/modal";
|
||||||
@import "comps/scroll";
|
@import "comps/scroll";
|
||||||
@import "comps/tabs";
|
@import "comps/tabs";
|
||||||
|
@import "comps/upload-box";
|
||||||
|
@import "comps/pill";
|
||||||
|
|
||||||
html {
|
html {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
|
@ -92,6 +92,12 @@
|
||||||
--config-console-nav-switch-background: #ececec;
|
--config-console-nav-switch-background: #ececec;
|
||||||
--config-console-nav-switch-color: #868686;
|
--config-console-nav-switch-color: #868686;
|
||||||
--config-console-nav-switch-arrow: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24' height='24' viewBox='0 0 24 24'><path fill='%23868686' d='M7.406 7.828l4.594 4.594 4.594-4.594 1.406 1.406-6 6-6-6z'></path></svg>");
|
--config-console-nav-switch-arrow: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24' height='24' viewBox='0 0 24 24'><path fill='%23868686' d='M7.406 7.828l4.594 4.594 4.594-4.594 1.406 1.406-6 6-6-6z'></path></svg>");
|
||||||
|
|
||||||
|
// HSL colors for flexibility with opacity
|
||||||
|
// States colors - HSL colors (used by - pills)
|
||||||
|
--config-defalut-color-hsl: 0 0% 62%;
|
||||||
|
--config-disabled-color-hsl: 0 0% 62%;
|
||||||
|
--config-pending-color-hsl: 36 100% 47%;
|
||||||
|
|
||||||
.theme-dark {
|
.theme-dark {
|
||||||
--config-color-primary: #f02e65;
|
--config-color-primary: #f02e65;
|
||||||
|
|
1
public/styles/utilities.less
Normal file
1
public/styles/utilities.less
Normal file
|
@ -0,0 +1 @@
|
||||||
|
.u-margin-inline-end-16{margin-inline-end:16px!important;}
|
Loading…
Reference in a new issue