Merge pull request #2790 from appwrite/feat-ui-upload-box

app/views/console/comps/header.phtml

@@ -222,22 +222,48 @@
         </footer>
     </form>
 </div>
-<div
- id="upload-modal" style="position: fixed; right:0; bottom: 0; background: white;z-index: 9999;">
-    <template x-data x-if="$store.uploader.files.length > 0">
-        <template x-data x-for="file in $store.uploader.files" :key="file.id">
-            <p>
-                <span x-text="file.progress"></span>
-                <span x-text="file.name"></span>
-                <button @click="$store.uploader.removeFile(file.id)">X</button>
-            </p>
-        </template>
-    </template>
-</div>
+
+<section class="upload-box" x-data>
+    <div class="upload-box-header">
+        <h4 class="upload-box-title">
+            <span class="text">Uploading files</span>
+            <span class="amount" x-text="$store.uploader.files.length"></span>
+        </h4>
+        <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>
+        <button class="icon-button" aria-label="close upload box"><span class="icon-cancel" aria-hidden="true"></span></button>
+    </div>
+    <div class="upload-box-content" :class="$store.uploader.isOpen ? 'is-open' : ''">
+        <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>
     document.addEventListener('alpine:init', () => {
             Alpine.store('uploader', {
                 files: [],
+                isOpen: true,
+                toggle() {
+                    this.isOpen = !this.isOpen;
+                },
                 addFile(file) {
                     this.files.push(file);
                 },
@@ -269,7 +295,7 @@
                         completed: false,
                         failed: false,
                     });
-                    
+
                     try {
                         const response = await sdk.storage.createFile(
                             formData.get('bucketId'),

public/styles/comps/pill.less

@@ -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);  }
+}

public/styles/comps/upload-box.less

@@ -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); }
+}

public/styles/default.less

@@ -20,6 +20,7 @@ img[src=""] {
 @import "polyfills";
 @import "forms";
 @import "ide";
+@import "utilities";
 @import "scopes/console";
 @import "scopes/home";
 @import "comps/alerts";
@@ -33,6 +34,8 @@ img[src=""] {
 @import "comps/modal";
 @import "comps/scroll";
 @import "comps/tabs";
+@import "comps/upload-box";
+@import "comps/pill";
 
 html {
   padding: 0;

public/styles/themes.less

@@ -92,6 +92,12 @@
     --config-console-nav-switch-background: #ececec;
     --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>");
+
+    // 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 {
         --config-color-primary: #f02e65;

public/styles/utilities.less

@@ -0,0 +1 @@
+.u-margin-inline-end-16{margin-inline-end:16px!important;}