Merge pull request #33 from uploadcare/feature/blocks-new-theming

Feature/blocks-new-theming
uploadcare · Jun 21, 2024 · 82a69d2 · 82a69d2
2 parents 3f888d9 + 3e6d5e8
commit 82a69d2
Show file tree

Hide file tree

Showing 53 changed files with 2,838 additions and 6,237 deletions.
diff --git a/examples/angular-uploader/package-lock.json b/examples/angular-uploader/package-lock.json
diff --git a/examples/angular-uploader/package.json b/examples/angular-uploader/package.json
@@ -17,7 +17,7 @@
     "@angular/platform-browser": "17.0.9",
     "@angular/platform-browser-dynamic": "17.0.9",
     "@angular/router": "17.0.9",
-    "@uploadcare/blocks": "0.39.0",
+    "@uploadcare/blocks": "0.44.0",
     "rxjs": "7.4.0",
     "tslib": "2.3.1",
     "zone.js": "0.14.4"

diff --git a/examples/angular-uploader/src/app/components/file-uploader/file-uploader.component.html b/examples/angular-uploader/src/app/components/file-uploader/file-uploader.component.html
@@ -7,9 +7,9 @@
     Available options: https://uploadcare.com/docs/file-uploader/options/
 
     Also note: Some options currently are not available via `lr-config`,
-    but may be set via CSS properties. E.g. `darkmode`.
+    but may be set via CSS properties or CSS classes. E.g. accent colors or darkmode
 
-    Here they are: https://github.com/uploadcare/blocks/blob/main/blocks/themes/lr-basic/config.css
+    Here they are: https://uploadcare.com/docs/file-uploader/styling/
   -->
   <lr-config
     #config
@@ -25,7 +25,8 @@
   <lr-file-uploader-regular
     [attr.ctx-name]="uploaderCtxName"
     [class]="uploaderClassName"
-    [class.dark-mode-enabled]="theme === 'dark'"
+    [class.uc-dark]="theme === 'dark'"
+    [class.uc-light]="theme === 'light'"
   ></lr-file-uploader-regular>
 
   <lr-upload-ctx-provider

diff --git a/examples/angular-uploader/src/app/components/file-uploader/file-uploader.component.scss b/examples/angular-uploader/src/app/components/file-uploader/file-uploader.component.scss
@@ -7,20 +7,13 @@
 }
 
 /*
-  Note: We set this class manually when we want File Uploader to join the dark side.
-  The main option here is `darkmore`. The rest ones are used to tune the theme to match the website.
+  CSS variables are used to customize the appearance of the file uploader.
 
-  See more: https://uploadcare.com/docs/file-uploader/styling/#base-values
+  See more: https://uploadcare.com/docs/file-uploader/styling/
  */
-.dark-mode-enabled {
-  --darkmode: 1;
-
-  --h-accent: 33.3;
-  --s-accent: 100%;
-  --l-accent: 60.78%;
-
-  --clr-btn-bgr-primary: var(--ui-action-button-background);
-  --clr-btn-txt-primary: var(--ui-action-button-text-color);
+.file-uploader {
+  --uc-primary-dark: var(--ui-action-button-background);
+  --uc-primary-foreground-dark: var(--ui-action-button-text-color);
 }
 
 .preview {

diff --git a/examples/composition/index.html b/examples/composition/index.html
diff --git a/examples/composition/src/custom-source/CustomFileUploader.js b/examples/composition/src/custom-source/CustomFileUploader.js
diff --git a/examples/composition/vite.config.js b/examples/composition/vite.config.js
diff --git a/...mposition/.devcontainer/devcontainer.json → ...ustom-tab/.devcontainer/devcontainer.json b/...mposition/.devcontainer/devcontainer.json → ...ustom-tab/.devcontainer/devcontainer.json
diff --git a/examples/composition/.env.example → examples/js-custom-tab/.env.example b/examples/composition/.env.example → examples/js-custom-tab/.env.example
diff --git a/examples/composition/.gitignore → examples/js-custom-tab/.gitignore b/examples/composition/.gitignore → examples/js-custom-tab/.gitignore
diff --git a/examples/composition/README.md → examples/js-custom-tab/README.md b/examples/composition/README.md → examples/js-custom-tab/README.md
diff --git a/examples/js-custom-tab/index.html b/examples/js-custom-tab/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./src/main.js"></script>
+    <lr-config ctx-name="my-uploader" pubkey="a6ca334c3520777c0045" source-list="unsplash"></lr-config>
+    <lr-custom-file-uploader ctx-name="my-uploader" class="uc-light"></lr-custom-file-uploader>
+  </body>
+</html>
diff --git a/examples/composition/package-lock.json → examples/js-custom-tab/package-lock.json b/examples/composition/package-lock.json → examples/js-custom-tab/package-lock.json
diff --git a/examples/composition/package.json → examples/js-custom-tab/package.json b/examples/composition/package.json → examples/js-custom-tab/package.json
@@ -15,6 +15,6 @@
     "vite": "4.5.2"
   },
   "dependencies": {
-    "@uploadcare/blocks": "0.30.5"
+    "@uploadcare/blocks": "0.44.0"
   }
 }
diff --git a/examples/js-custom-tab/src/CustomFileUploader.js b/examples/js-custom-tab/src/CustomFileUploader.js
@@ -0,0 +1,23 @@
+import { FileUploaderRegular } from "@uploadcare/blocks";
+
+export class CustomFileUploader extends FileUploaderRegular {}
+CustomFileUploader.template = /* HTML */ `
+  <lr-simple-btn></lr-simple-btn>
+
+  <lr-modal strokes block-body-scrolling>
+    <lr-start-from>
+      <lr-drop-area with-icon clickable></lr-drop-area>
+      <lr-source-list wrap></lr-source-list>
+      <lr-copyright></lr-copyright>
+    </lr-start-from>
+    <lr-upload-list></lr-upload-list>
+    <lr-camera-source></lr-camera-source>
+    <lr-url-source></lr-url-source>
+    <lr-external-source></lr-external-source>
+    <lr-cloud-image-editor-activity></lr-cloud-image-editor-activity>
+    <lr-unsplash-source token="${import.meta.env.VITE_UNSPLASH_TOKEN}"></lr-unsplash-source>
+  </lr-modal>
+
+  <lr-message-box></lr-message-box>
+  <lr-progress-bar-common></lr-progress-bar-common>
+`;
diff --git a/...tion/src/custom-source/CustomSourceBtn.js → ...ples/js-custom-tab/src/CustomSourceBtn.js b/...tion/src/custom-source/CustomSourceBtn.js → ...ples/js-custom-tab/src/CustomSourceBtn.js
diff --git a/...ition/src/custom-source/UnsplashSource.js → examples/js-custom-tab/src/UnsplashSource.js b/...ition/src/custom-source/UnsplashSource.js → examples/js-custom-tab/src/UnsplashSource.js
@@ -17,7 +17,7 @@ const getRandomImages = async (token) => {
 
 export class UnsplashSource extends UploaderBlock {
   activityType = "unsplash";
-  _currentItemId = null
+  _currentItemId = null;
 
   init$ = {
     handleNext: () => {
@@ -28,21 +28,16 @@ export class UnsplashSource extends UploaderBlock {
     },
   };
 
-  cssInit$ = {
-    "--cfg-unsplash-token": null,
-  };
-
-  get token() {
-    return this.getCssData("--cfg-unsplash-token");
-  }
-
   async fetch() {
-    const items = await getRandomImages(this.token);
+    const items = await getRandomImages(this.$.token);
     this._items.push(...items);
     for (const item of items) {
-      this._splide.add(
-        /* HTML */ `<li data-id="${item.id}" class="splide__slide"><img src="${item.url}" /></li>`
-      );
+      this._splide.add(/* HTML */ `<li
+        data-id="${item.id}"
+        class="splide__slide"
+      >
+        <img src="${item.url}" />
+      </li>`);
     }
   }
 
@@ -60,10 +55,10 @@ export class UnsplashSource extends UploaderBlock {
       this._items.shift();
     });
 
-    this._splide.on("active", ({slide}) => {
+    this._splide.on("active", ({ slide }) => {
       const itemId = slide.dataset.id;
       this._currentItemId = itemId;
-    })
+    });
   }
 
   unmount() {
@@ -78,7 +73,7 @@ export class UnsplashSource extends UploaderBlock {
   }
 
   pick() {
-    const item = this._items.find(item => item.id === this._currentItemId)
+    const item = this._items.find((item) => item.id === this._currentItemId);
 
     this.uploadCollection.add({
       externalUrl: item.rawUrl,
@@ -101,6 +96,19 @@ export class UnsplashSource extends UploaderBlock {
   }
 
   static template = /* HTML */ `
+    <svg width="0" height="0" style="position:absolute">
+      <symbol
+        viewBox="0 0 24 24"
+        id="uc-icon-unsplash"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          fill="currentColor"
+          fill-rule="evenodd"
+          d="M15 4.5H9v4h6v-4ZM4 10.5h5v4h6v-4h5v9H4v-9Z"
+        />
+      </symbol>
+    </svg>
     <lr-activity-header>
       <button
         type="button"
@@ -146,3 +154,7 @@ export class UnsplashSource extends UploaderBlock {
     </div>
   `;
 }
+
+UnsplashSource.bindAttributes({
+  token: "token",
+});
diff --git a/.../composition/src/custom-source/index.html → examples/js-custom-tab/src/index.html b/.../composition/src/custom-source/index.html → examples/js-custom-tab/src/index.html
diff --git a/...les/composition/src/custom-source/main.js → examples/js-custom-tab/src/main.js b/...les/composition/src/custom-source/main.js → examples/js-custom-tab/src/main.js
@@ -2,7 +2,7 @@ import * as LR from "@uploadcare/blocks";
 import { CustomFileUploader } from "./CustomFileUploader.js";
 import { CustomSourceBtn } from "./CustomSourceBtn.js";
 import { UnsplashSource } from "./UnsplashSource.js";
-import cssSrc from './style.css?url';
+import './style.css';
 
 LR.registerBlocks({
   ...LR,
@@ -11,14 +11,6 @@ LR.registerBlocks({
   SourceBtn: CustomSourceBtn,
 });
 
-const uploader = document.querySelector("lr-custom-file-uploader");
-uploader.setAttribute('css-src', cssSrc);
 if (!import.meta.env.VITE_UNSPLASH_TOKEN) {
   throw new Error("VITE_UNSPLASH_TOKEN is not defined");
-}
-
-// TODO: move to lr-config also
-uploader.style.setProperty(
-  "--cfg-unsplash-token",
-  `"${import.meta.env.VITE_UNSPLASH_TOKEN}"`
-);
+}
diff --git a/...s/composition/src/custom-source/style.css → examples/js-custom-tab/src/style.css b/...s/composition/src/custom-source/style.css → examples/js-custom-tab/src/style.css