Skip to content

Commit 82a69d2

Browse files
nd0utnd0ut
authored
Merge pull request #33 from uploadcare/feature/blocks-new-theming
Feature/blocks-new-theming
2 parents 3f888d9 + 3e6d5e8 commit 82a69d2

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

53 files changed

+2838
-6237
lines changed

‎examples/angular-uploader/package-lock.json

+1,102-3,602
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/angular-uploader/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
"@angular/platform-browser": "17.0.9",
1818
"@angular/platform-browser-dynamic": "17.0.9",
1919
"@angular/router": "17.0.9",
20-
"@uploadcare/blocks": "0.39.0",
20+
"@uploadcare/blocks": "0.44.0",
2121
"rxjs": "7.4.0",
2222
"tslib": "2.3.1",
2323
"zone.js": "0.14.4"

‎examples/angular-uploader/src/app/components/file-uploader/file-uploader.component.html

+4-3
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@
77
Available options: https://uploadcare.com/docs/file-uploader/options/
88
99
Also note: Some options currently are not available via `lr-config`,
10-
but may be set via CSS properties. E.g. `darkmode`.
10+
but may be set via CSS properties or CSS classes. E.g. accent colors or darkmode
1111
12-
Here they are: https://github.com/uploadcare/blocks/blob/main/blocks/themes/lr-basic/config.css
12+
Here they are: https://uploadcare.com/docs/file-uploader/styling/
1313
-->
1414
<lr-config
1515
#config
@@ -25,7 +25,8 @@
2525
<lr-file-uploader-regular
2626
[attr.ctx-name]="uploaderCtxName"
2727
[class]="uploaderClassName"
28-
[class.dark-mode-enabled]="theme === 'dark'"
28+
[class.uc-dark]="theme === 'dark'"
29+
[class.uc-light]="theme === 'light'"
2930
></lr-file-uploader-regular>
3031

3132
<lr-upload-ctx-provider

‎examples/angular-uploader/src/app/components/file-uploader/file-uploader.component.scss

+5-12
Original file line numberDiff line numberDiff line change
@@ -7,20 +7,13 @@
77
}
88

99
/*
10-
Note: We set this class manually when we want File Uploader to join the dark side.
11-
The main option here is `darkmore`. The rest ones are used to tune the theme to match the website.
10+
CSS variables are used to customize the appearance of the file uploader.
1211
13-
See more: https://uploadcare.com/docs/file-uploader/styling/#base-values
12+
See more: https://uploadcare.com/docs/file-uploader/styling/
1413
*/
15-
.dark-mode-enabled {
16-
--darkmode: 1;
17-
18-
--h-accent: 33.3;
19-
--s-accent: 100%;
20-
--l-accent: 60.78%;
21-
22-
--clr-btn-bgr-primary: var(--ui-action-button-background);
23-
--clr-btn-txt-primary: var(--ui-action-button-text-color);
14+
.file-uploader {
15+
--uc-primary-dark: var(--ui-action-button-background);
16+
--uc-primary-foreground-dark: var(--ui-action-button-text-color);
2417
}
2518

2619
.preview {

‎examples/composition/index.html

-1
This file was deleted.

‎examples/composition/src/custom-source/CustomFileUploader.js

-24
This file was deleted.

‎examples/composition/vite.config.js

-13
This file was deleted.

‎examples/composition/.devcontainer/devcontainer.json renamed to ‎examples/js-custom-tab/.devcontainer/devcontainer.json

File renamed without changes.

‎examples/composition/.env.example renamed to ‎examples/js-custom-tab/.env.example

File renamed without changes.

‎examples/composition/.gitignore renamed to ‎examples/js-custom-tab/.gitignore

File renamed without changes.

‎examples/composition/README.md renamed to ‎examples/js-custom-tab/README.md

File renamed without changes.

‎examples/js-custom-tab/index.html

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
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>Vite App</title>
7+
</head>
8+
<body>
9+
<div id="app"></div>
10+
<script type="module" src="./src/main.js"></script>
11+
<lr-config ctx-name="my-uploader" pubkey="a6ca334c3520777c0045" source-list="unsplash"></lr-config>
12+
<lr-custom-file-uploader ctx-name="my-uploader" class="uc-light"></lr-custom-file-uploader>
13+
</body>
14+
</html>

‎examples/composition/package-lock.json renamed to ‎examples/js-custom-tab/package-lock.json

+37-28
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/composition/package.json renamed to ‎examples/js-custom-tab/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,6 @@
1515
"vite": "4.5.2"
1616
},
1717
"dependencies": {
18-
"@uploadcare/blocks": "0.30.5"
18+
"@uploadcare/blocks": "0.44.0"
1919
}
2020
}

‎examples/js-custom-tab/src/CustomFileUploader.js

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { FileUploaderRegular } from "@uploadcare/blocks";
2+
3+
export class CustomFileUploader extends FileUploaderRegular {}
4+
CustomFileUploader.template = /* HTML */ `
5+
<lr-simple-btn></lr-simple-btn>
6+
7+
<lr-modal strokes block-body-scrolling>
8+
<lr-start-from>
9+
<lr-drop-area with-icon clickable></lr-drop-area>
10+
<lr-source-list wrap></lr-source-list>
11+
<lr-copyright></lr-copyright>
12+
</lr-start-from>
13+
<lr-upload-list></lr-upload-list>
14+
<lr-camera-source></lr-camera-source>
15+
<lr-url-source></lr-url-source>
16+
<lr-external-source></lr-external-source>
17+
<lr-cloud-image-editor-activity></lr-cloud-image-editor-activity>
18+
<lr-unsplash-source token="${import.meta.env.VITE_UNSPLASH_TOKEN}"></lr-unsplash-source>
19+
</lr-modal>
20+
21+
<lr-message-box></lr-message-box>
22+
<lr-progress-bar-common></lr-progress-bar-common>
23+
`;

‎examples/composition/src/custom-source/CustomSourceBtn.js renamed to ‎examples/js-custom-tab/src/CustomSourceBtn.js

File renamed without changes.

‎examples/composition/src/custom-source/UnsplashSource.js renamed to ‎examples/js-custom-tab/src/UnsplashSource.js

+28-16
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ const getRandomImages = async (token) => {
1717

1818
export class UnsplashSource extends UploaderBlock {
1919
activityType = "unsplash";
20-
_currentItemId = null
20+
_currentItemId = null;
2121

2222
init$ = {
2323
handleNext: () => {
@@ -28,21 +28,16 @@ export class UnsplashSource extends UploaderBlock {
2828
},
2929
};
3030

31-
cssInit$ = {
32-
"--cfg-unsplash-token": null,
33-
};
34-
35-
get token() {
36-
return this.getCssData("--cfg-unsplash-token");
37-
}
38-
3931
async fetch() {
40-
const items = await getRandomImages(this.token);
32+
const items = await getRandomImages(this.$.token);
4133
this._items.push(...items);
4234
for (const item of items) {
43-
this._splide.add(
44-
/* HTML */ `<li data-id="${item.id}" class="splide__slide"><img src="${item.url}" /></li>`
45-
);
35+
this._splide.add(/* HTML */ `<li
36+
data-id="${item.id}"
37+
class="splide__slide"
38+
>
39+
<img src="${item.url}" />
40+
</li>`);
4641
}
4742
}
4843

@@ -60,10 +55,10 @@ export class UnsplashSource extends UploaderBlock {
6055
this._items.shift();
6156
});
6257

63-
this._splide.on("active", ({slide}) => {
58+
this._splide.on("active", ({ slide }) => {
6459
const itemId = slide.dataset.id;
6560
this._currentItemId = itemId;
66-
})
61+
});
6762
}
6863

6964
unmount() {
@@ -78,7 +73,7 @@ export class UnsplashSource extends UploaderBlock {
7873
}
7974

8075
pick() {
81-
const item = this._items.find(item => item.id === this._currentItemId)
76+
const item = this._items.find((item) => item.id === this._currentItemId);
8277

8378
this.uploadCollection.add({
8479
externalUrl: item.rawUrl,
@@ -101,6 +96,19 @@ export class UnsplashSource extends UploaderBlock {
10196
}
10297

10398
static template = /* HTML */ `
99+
<svg width="0" height="0" style="position:absolute">
100+
<symbol
101+
viewBox="0 0 24 24"
102+
id="uc-icon-unsplash"
103+
xmlns="http://www.w3.org/2000/svg"
104+
>
105+
<path
106+
fill="currentColor"
107+
fill-rule="evenodd"
108+
d="M15 4.5H9v4h6v-4ZM4 10.5h5v4h6v-4h5v9H4v-9Z"
109+
/>
110+
</symbol>
111+
</svg>
104112
<lr-activity-header>
105113
<button
106114
type="button"
@@ -146,3 +154,7 @@ export class UnsplashSource extends UploaderBlock {
146154
</div>
147155
`;
148156
}
157+
158+
UnsplashSource.bindAttributes({
159+
token: "token",
160+
});

‎examples/composition/src/custom-source/index.html renamed to ‎examples/js-custom-tab/src/index.html

File renamed without changes.

‎examples/composition/src/custom-source/main.js renamed to ‎examples/js-custom-tab/src/main.js

+2-10
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import * as LR from "@uploadcare/blocks";
22
import { CustomFileUploader } from "./CustomFileUploader.js";
33
import { CustomSourceBtn } from "./CustomSourceBtn.js";
44
import { UnsplashSource } from "./UnsplashSource.js";
5-
import cssSrc from './style.css?url';
5+
import './style.css';
66

77
LR.registerBlocks({
88
...LR,
@@ -11,14 +11,6 @@ LR.registerBlocks({
1111
SourceBtn: CustomSourceBtn,
1212
});
1313

14-
const uploader = document.querySelector("lr-custom-file-uploader");
15-
uploader.setAttribute('css-src', cssSrc);
1614
if (!import.meta.env.VITE_UNSPLASH_TOKEN) {
1715
throw new Error("VITE_UNSPLASH_TOKEN is not defined");
18-
}
19-
20-
// TODO: move to lr-config also
21-
uploader.style.setProperty(
22-
"--cfg-unsplash-token",
23-
`"${import.meta.env.VITE_UNSPLASH_TOKEN}"`
24-
);
16+
}

‎examples/composition/src/custom-source/style.css renamed to ‎examples/js-custom-tab/src/style.css

File renamed without changes.

0 commit comments

Comments
 (0)