From 3128dd1e5e87e6484a2ac0b19fa5efb46e67d29c Mon Sep 17 00:00:00 2001 From: Anton Nesterov Date: Thu, 1 Dec 2022 13:07:29 +0100 Subject: [PATCH 001/135] StartFrom - 1 column --- blocks/StartFrom/start-from.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/StartFrom/start-from.css b/blocks/StartFrom/start-from.css index 483610036..79051c492 100644 --- a/blocks/StartFrom/start-from.css +++ b/blocks/StartFrom/start-from.css @@ -1,6 +1,6 @@ lr-start-from { display: grid; - grid-template-columns: min-content auto; + grid-template-columns: auto; gap: var(--gap-mid); /* height: 100%; - this breaks inner modal layout height in Safari */ From f98de641cede713a6fd77d74d1b94e59e7780664 Mon Sep 17 00:00:00 2001 From: Anton Nesterov Date: Thu, 1 Dec 2022 13:16:36 +0100 Subject: [PATCH 002/135] drop-area first, added big-icon mode --- blocks/DropArea/drop-area.css | 4 ++++ solutions/file-uploader/inline/FileUploaderInline.js | 2 +- solutions/file-uploader/regular/FileUploaderRegular.js | 2 +- 3 files changed, 6 insertions(+), 2 deletions(-) diff --git a/blocks/DropArea/drop-area.css b/blocks/DropArea/drop-area.css index 974ea2568..146a003a1 100644 --- a/blocks/DropArea/drop-area.css +++ b/blocks/DropArea/drop-area.css @@ -14,6 +14,10 @@ lr-drop-area::after { content: var(--l10n-drop-files-here); } +lr-drop-area[big-icon] { + min-height: 180px; +} + lr-drop-area[ghost][drag-state='inactive'] { opacity: 0; } diff --git a/solutions/file-uploader/inline/FileUploaderInline.js b/solutions/file-uploader/inline/FileUploaderInline.js index d751f9fd1..b282a1aac 100644 --- a/solutions/file-uploader/inline/FileUploaderInline.js +++ b/solutions/file-uploader/inline/FileUploaderInline.js @@ -24,8 +24,8 @@ export class FileUploaderInline extends SolutionBlock { } FileUploaderInline.template = /* HTML */ ` + - diff --git a/solutions/file-uploader/regular/FileUploaderRegular.js b/solutions/file-uploader/regular/FileUploaderRegular.js index c001b4443..ecda277da 100644 --- a/solutions/file-uploader/regular/FileUploaderRegular.js +++ b/solutions/file-uploader/regular/FileUploaderRegular.js @@ -9,8 +9,8 @@ FileUploaderRegular.template = /* HTML */ ` + - From b43fcc3eef4d28afb3845f4af4c1167aa41bc2d7 Mon Sep 17 00:00:00 2001 From: Anton Nesterov Date: Thu, 1 Dec 2022 13:29:32 +0100 Subject: [PATCH 003/135] StartFrom - large gaps --- blocks/StartFrom/start-from.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/blocks/StartFrom/start-from.css b/blocks/StartFrom/start-from.css index 79051c492..90e99442a 100644 --- a/blocks/StartFrom/start-from.css +++ b/blocks/StartFrom/start-from.css @@ -1,9 +1,9 @@ lr-start-from { display: grid; grid-template-columns: auto; - gap: var(--gap-mid); + gap: var(--gap-max); /* height: 100%; - this breaks inner modal layout height in Safari */ - padding: var(--gap-mid); + padding: var(--gap-max); overflow-y: auto; } From 18054a9cbc8ea5aee5317a2fc52d88f25a71cf03 Mon Sep 17 00:00:00 2001 From: Anton Nesterov Date: Thu, 1 Dec 2022 14:22:22 +0100 Subject: [PATCH 004/135] modal styles 1 --- blocks/Modal/modal.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/blocks/Modal/modal.css b/blocks/Modal/modal.css index 1adda386a..b1c0d5c65 100644 --- a/blocks/Modal/modal.css +++ b/blocks/Modal/modal.css @@ -61,7 +61,7 @@ lr-modal > .dialog { margin: auto; padding: 0; overflow: hidden; - background-color: var(--clr-background); + background-color: var(--clr-background-light); border: 0; border-radius: var(--border-radius-frame); box-shadow: var(--modal-shadow); @@ -91,5 +91,4 @@ lr-modal .heading { font-size: 1.1em; line-height: var(--ui-size); background-color: var(--clr-background-light); - border-bottom: var(--border-light); } From 01bcd154cd32c45c42b05b4f21004521b31a1908 Mon Sep 17 00:00:00 2001 From: Anton Nesterov Date: Thu, 1 Dec 2022 14:39:37 +0100 Subject: [PATCH 005/135] SourceBtn, gaps and paddings --- blocks/SourceBtn/source-btn.css | 1 + blocks/themes/lr-basic/theme.css | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/blocks/SourceBtn/source-btn.css b/blocks/SourceBtn/source-btn.css index e467489a2..b69878757 100644 --- a/blocks/SourceBtn/source-btn.css +++ b/blocks/SourceBtn/source-btn.css @@ -1,6 +1,7 @@ lr-source-btn { display: flex; align-items: center; + padding: var(--gap-min); padding-right: 1em; color: var(--clr-txt-mid); border-radius: var(--border-radius-element); diff --git a/blocks/themes/lr-basic/theme.css b/blocks/themes/lr-basic/theme.css index 5167c2f1b..98656c02f 100644 --- a/blocks/themes/lr-basic/theme.css +++ b/blocks/themes/lr-basic/theme.css @@ -34,7 +34,7 @@ --opacity-hover: 0.8; --opacity-active: 1; - --ui-size: 36px; + --ui-size: 34px; --gap-min: 2px; --gap-mid: 10px; From 1d0c56a632abb9c3c8b06c2ecda5d5ad36e39e80 Mon Sep 17 00:00:00 2001 From: Anton Nesterov Date: Thu, 1 Dec 2022 14:41:13 +0100 Subject: [PATCH 006/135] bug temporary workaround for some reason --gap-min from CloudImageEditor is used --- blocks/themes/lr-basic/theme.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/themes/lr-basic/theme.css b/blocks/themes/lr-basic/theme.css index 98656c02f..815757486 100644 --- a/blocks/themes/lr-basic/theme.css +++ b/blocks/themes/lr-basic/theme.css @@ -36,7 +36,7 @@ --ui-size: 34px; - --gap-min: 2px; + --gap-min: 2px !important; --gap-mid: 10px; --gap-max: 20px; --gap-table: 0px; From 696e5c24c3f8cd8ff389ece3dbdc60f3a925b9bc Mon Sep 17 00:00:00 2001 From: Anton Nesterov Date: Thu, 1 Dec 2022 15:03:10 +0100 Subject: [PATCH 007/135] remove :host from CloudImageEditor --- blocks/CloudImageEditor/src/css/common.css | 63 ---------------------- blocks/themes/lr-basic/theme.css | 2 +- 2 files changed, 1 insertion(+), 64 deletions(-) diff --git a/blocks/CloudImageEditor/src/css/common.css b/blocks/CloudImageEditor/src/css/common.css index 239a2dbb9..da868c9d8 100644 --- a/blocks/CloudImageEditor/src/css/common.css +++ b/blocks/CloudImageEditor/src/css/common.css @@ -1,66 +1,3 @@ -:where(.lr-cldtr-common), -:host { - /* Theme settings >>> */ - --rgb-primary-accent: 6, 2, 196; - --rgb-text-base: 0, 0, 0; - --rgb-text-accent-contrast: 255, 255, 255; - --rgb-fill-contrast: 255, 255, 255; - --rgb-fill-shaded: 245, 245, 245; - --rgb-shadow: 0, 0, 0; - --rgb-error: 209, 81, 81; - --opacity-shade-mid: 0.2; - - /* <<< Theme settings */ - - --color-primary-accent: rgb(var(--rgb-primary-accent)); - --color-text-base: rgb(var(--rgb-text-base)); - --color-text-accent-contrast: rgb(var(--rgb-text-accent-contrast)); - --color-text-soft: rgb(var(--rgb-fill-contrast)); - --color-text-error: rgb(var(--rgb-error)); - --color-fill-contrast: rgb(var(--rgb-fill-contrast)); - --color-modal-backdrop: rgba(var(--rgb-fill-shaded), 0.95); - --color-image-background: rgba(var(--rgb-fill-shaded)); - --color-outline: rgba(var(--rgb-text-base), var(--opacity-shade-mid)); - --color-underline: rgba(var(--rgb-text-base), 0.08); - --color-shade: rgba(var(--rgb-text-base), 0.02); - --color-focus-ring: var(--color-primary-accent); - --color-input-placeholder: rgba(var(--rgb-text-base), 0.32); - --color-error: rgb(var(--rgb-error)); - - --font-size-ui: 16px; - --font-size-title: 18px; - --font-weight-title: 500; - --font-size-soft: 14px; - - --size-touch-area: 40px; - --size-panel-heading: 66px; - --size-ui-min-width: 130px; - --size-line-width: 1px; - --size-modal-width: 650px; - - --border-radius-connect: 2px; - --border-radius-editor: 3px; - --border-radius-thumb: 4px; - --border-radius-ui: 5px; - --border-radius-base: 6px; - - --gap-min: 5px; - --gap-mid-1: 10px; - --gap-mid-2: 15px; - --gap-max: 20px; - - --opacity-min: var(--opacity-shade-mid); - --opacity-mid: 0.1; - --opacity-max: 0.05; - - --transition-duration-2: var(--transition-duration-all, 0.2s); - --transition-duration-3: var(--transition-duration-all, 0.3s); - --transition-duration-4: var(--transition-duration-all, 0.4s); - --transition-duration-5: var(--transition-duration-all, 0.5s); - - --shadow-base: 0px 5px 15px rgba(var(--rgb-shadow), 0.1), 0px 1px 4px rgba(var(--rgb-shadow), 0.15); -} - :where(.lr-cldtr-common) :is([can-handle-paste]:hover, [can-handle-paste]:focus), :host :is([can-handle-paste]:hover, [can-handle-paste]:focus) { --can-handle-paste: 'true'; diff --git a/blocks/themes/lr-basic/theme.css b/blocks/themes/lr-basic/theme.css index 815757486..98656c02f 100644 --- a/blocks/themes/lr-basic/theme.css +++ b/blocks/themes/lr-basic/theme.css @@ -36,7 +36,7 @@ --ui-size: 34px; - --gap-min: 2px !important; + --gap-min: 2px; --gap-mid: 10px; --gap-max: 20px; --gap-table: 0px; From f7817dc4dc33791c8ec71703c8f5977356186ce3 Mon Sep 17 00:00:00 2001 From: Anton Nesterov Date: Thu, 1 Dec 2022 15:03:37 +0100 Subject: [PATCH 008/135] source-btn new styles --- blocks/SourceBtn/source-btn.css | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/blocks/SourceBtn/source-btn.css b/blocks/SourceBtn/source-btn.css index b69878757..df2d30c25 100644 --- a/blocks/SourceBtn/source-btn.css +++ b/blocks/SourceBtn/source-btn.css @@ -2,7 +2,8 @@ lr-source-btn { display: flex; align-items: center; padding: var(--gap-min); - padding-right: 1em; + padding-right: var(--gap-mid); + padding-left: var(--gap-mid); color: var(--clr-txt-mid); border-radius: var(--border-radius-element); cursor: pointer; @@ -12,8 +13,8 @@ lr-source-btn { } lr-source-btn:hover { - color: var(--clr-txt); - background-color: var(--clr-shade-lv1); + color: var(--clr-accent); + background-color: var(--clr-accent-lightest); } lr-source-btn:active { @@ -26,6 +27,7 @@ lr-source-btn lr-icon { flex-grow: 1; justify-content: center; min-width: var(--ui-size); + margin-right: var(--gap-mid); } lr-source-btn[type='local'] > .txt::after { From 425ce95905dd3f7ce14f7a4b5d2b1f1c5a3e5e7d Mon Sep 17 00:00:00 2001 From: Anton Nesterov Date: Thu, 1 Dec 2022 16:23:26 +0100 Subject: [PATCH 009/135] Icon - added fill-rule="evenodd" --- blocks/Icon/Icon.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/Icon/Icon.js b/blocks/Icon/Icon.js index 4fc82f6e8..d164215e8 100644 --- a/blocks/Icon/Icon.js +++ b/blocks/Icon/Icon.js @@ -31,7 +31,7 @@ export class Icon extends Block { this.ref.svg.innerHTML = path; } else { this.removeAttribute('raw'); - this.ref.svg.innerHTML = ``; + this.ref.svg.innerHTML = ``; } }); From 954ae8a636482a0a805b58f02aed7268d469f312 Mon Sep 17 00:00:00 2001 From: Anton Nesterov Date: Thu, 1 Dec 2022 17:15:31 +0100 Subject: [PATCH 010/135] partially replaced icons --- blocks/themes/lr-basic/icons.css | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/blocks/themes/lr-basic/icons.css b/blocks/themes/lr-basic/icons.css index 08674a8d4..4ee1f9822 100644 --- a/blocks/themes/lr-basic/icons.css +++ b/blocks/themes/lr-basic/icons.css @@ -6,9 +6,9 @@ --icon-info: 'M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z'; --icon-error: 'M13,13H11V7H13M13,17H11V15H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z'; --icon-upload: 'm13 21.9506c5.0533-.5017 9-4.7653 9-9.9506 0-5.52285-4.4772-10-10-10-5.52285 0-10 4.47715-10 10 0 5.1853 3.94668 9.4489 9 9.9506v-11.5364l-2.79289 2.7929c-.39053.3906-1.02369.3906-1.41422 0-.39052-.3905-.39052-1.0237 0-1.4142l5.20711-5.20708 5.2071 5.20708c.3905.3905.3905 1.0237 0 1.4142-.3905.3906-1.0237.3906-1.4142 0l-2.7929-2.7929z'; - --icon-local: 'M2 10.0928C2 7.7191 2 6.53224 2.55634 5.66549C2.84743 5.21197 3.23952 4.8286 3.70334 4.54398C4.58979 4 5.80363 4 8.23131 4C9.21033 4 9.69984 4 10.1402 4.15191C10.374 4.23254 10.5954 4.34395 10.7983 4.48306C11.1807 4.74515 11.4652 5.13463 12.0343 5.91358L12.9091 7.11111H15.4091C18.1796 7.11111 19.5649 7.11111 20.5298 7.81082C20.8171 8.01913 21.0713 8.26774 21.2844 8.54862C22 9.49207 22 10.8466 22 13.5556C22 16.2645 22 17.619 21.2844 18.5625C21.0713 18.8434 20.8171 19.092 20.5298 19.3003C19.5649 20 18.1797 20 15.4091 20H9.27273C5.84433 20 4.13013 20 3.06507 18.9586C2 17.9172 2 16.2411 2 12.8889V10.0928Z'; - --icon-url: 'm15.069028 1.7437159c-1.839249 0-3.678387.7023305-5.0816705 2.105638l-1.0683184 1.0683191c-.5721674.572155-.5721674 1.5000856 0 2.0722529.5721673.5721673 1.4977379.5721673 2.0698679 0l1.070704-1.0683191c1.662305-1.6622801 4.356529-1.6622801 6.018834 0 1.662304 1.6622801 1.662304 4.3566512 0 6.0188332l-1.068319 1.070704c-.572131.572131-.572131 1.497737 0 2.069869.572131.57213 1.500121.57213 2.072253 0l1.068318-1.06832c2.806688-2.806565 2.806688-7.3567246 0-10.1633391-1.403282-1.4033075-3.24242-2.105638-5.081669-2.105638zm-.138309 5.8614473c-.37495 0-.751254.1431516-1.037319.4292353l-5.8590627 5.8590625c-.5721673.572253-.5721673 1.500123 0 2.072253.5721673.572131 1.5001344.572131 2.0722527 0l5.859063-5.859062c.572252-.5721679.572252-1.5000862 0-2.0722535-.286066-.2860837-.659984-.4292353-1.034934-.4292353zm-8.9757886.8847018c-.3749556 0-.7512351.1431516-1.0373187.4292353l-1.0683191 1.0683185c-2.8066147 2.8066882-2.8066148 7.3567742 0 10.1633392 2.8066147 2.806689 7.3567734 2.806689 10.1633404 0l1.068319-1.068319c.572251-.57213.572253-1.500121 0-2.072251-.572132-.572254-1.497739-.572254-2.069869 0l-1.070704 1.068318c-1.662305 1.662183-4.3565534 1.662183-6.0188335 0-1.6622801-1.662304-1.6622801-4.356529 0-6.018833l1.0683191-1.070704c.5721673-.572131.5721673-1.4977014 0-2.0698687-.2860836-.2860837-.6599786-.4292353-1.0349342-.4292353z'; - --icon-camera: 'm11 3c-.9428 0-1.4141313.0000788-1.7070312.2929688-.2714001.2714099-.2915088.6968024-.2929688 1.5078124-3.45256.0000701-5.18871.0076507-6.34375.9941407-.16547.14133-.3196175.2954675-.4609375.4609375-.99524 1.16527-.9960937 2.9216069-.9960937 6.4355466 0 3.5139.0008537 5.2722.9960937 6.4375.14132.1654.2954675.319538.4609375.460938 1.16527.9952 2.9216169.99414 6.4355469.99414h5.8164061c3.5139 0 5.270247.00106 6.435547-.99414.1654-.1414.319637-.295538.460938-.460938.9952-1.1653.996093-2.9236.996093-6.4375 0-3.5139397-.000893-5.2702766-.996093-6.4355466-.1413-.16547-.295538-.3196075-.460938-.4609375-1.1551-.98649-2.89125-.9940706-6.34375-.9941407-.0015-.8110099-.021569-1.2364025-.292969-1.5078124-.2929-.29289-.764231-.2929688-1.707031-.2929688zm1 5.1230469c2.5235 0 4.568359 2.0448591 4.568359 4.5683591s-2.044859 4.570313-4.568359 4.570313-4.5683594-2.046813-4.5683594-4.570313 2.0448594-4.5683591 4.5683594-4.5683591zm6.646484 0c.4588 0 .830078.3712581.830078.8300781 0 .45883-.371278.8320312-.830078.8320312-.4589 0-.832031-.3732012-.832031-.8320312 0-.45882.373131-.8300781.832031-.8300781z'; + --icon-local: 'm3 3.75c-.82843 0-1.5.67157-1.5 1.5v13.5c0 .8284.67157 1.5 1.5 1.5h18c.8284 0 1.5-.6716 1.5-1.5v-9.75c0-.82843-.6716-1.5-1.5-1.5h-9c-.2634 0-.5076-.13822-.6431-.36413l-2.03154-3.38587zm-3 1.5c0-1.65685 1.34315-3 3-3h6.75c.2634 0 .5076.13822.6431.36413l2.0315 3.38587h8.5754c1.6569 0 3 1.34315 3 3v9.75c0 1.6569-1.3431 3-3 3h-18c-1.65685 0-3-1.3431-3-3z'; + --icon-url: 'm19.1099 3.67026c-1.7092-1.70917-4.5776-1.68265-6.4076.14738l-2.2212 2.22122c-.2929.29289-.7678.29289-1.0607 0-.29289-.29289-.29289-.76777 0-1.06066l2.2212-2.22122c2.376-2.375966 6.1949-2.481407 8.5289-.14738l1.2202 1.22015c2.334 2.33403 2.2286 6.15294-.1474 8.52895l-2.2212 2.2212c-.2929.2929-.7678.2929-1.0607 0s-.2929-.7678 0-1.0607l2.2212-2.2212c1.8301-1.83003 1.8566-4.69842.1474-6.40759zm-3.3597 4.57991c.2929.29289.2929.76776 0 1.06066l-6.43918 6.43927c-.29289.2928-.76777.2928-1.06066 0-.29289-.2929-.29289-.7678 0-1.0607l6.43924-6.43923c.2929-.2929.7677-.2929 1.0606 0zm-9.71158 1.17048c.29289.29289.29289.76775 0 1.06065l-2.22123 2.2212c-1.83002 1.8301-1.85654 4.6984-.14737 6.4076l1.22015 1.2202c1.70917 1.7091 4.57756 1.6826 6.40763-.1474l2.2212-2.2212c.2929-.2929.7677-.2929 1.0606 0s.2929.7677 0 1.0606l-2.2212 2.2212c-2.37595 2.376-6.19486 2.4815-8.52889.1474l-1.22015-1.2201c-2.334031-2.3341-2.22859-6.153.14737-8.5289l2.22123-2.22125c.29289-.2929.76776-.2929 1.06066 0z'; + --icon-camera: 'm7.65 2.55c.14164-.18885.36393-.3.6-.3h7.5c.2361 0 .4584.11115.6.3l2.025 2.7h2.625c1.6569 0 3 1.34315 3 3v10.5c0 1.6569-1.3431 3-3 3h-18c-1.65685 0-3-1.3431-3-3v-10.5c0-1.65685 1.34315-3 3-3h2.625zm.975 1.2-2.025 2.7c-.14164.18885-.36393.3-.6.3h-3c-.82843 0-1.5.67157-1.5 1.5v10.5c0 .8284.67157 1.5 1.5 1.5h18c.8284 0 1.5-.6716 1.5-1.5v-10.5c0-.82843-.6716-1.5-1.5-1.5h-3c-.2361 0-.4584-.11115-.6-.3l-2.025-2.7zm3.375 6c-1.864 0-3.375 1.511-3.375 3.375s1.511 3.375 3.375 3.375 3.375-1.511 3.375-3.375-1.511-3.375-3.375-3.375zm-4.875 3.375c0-2.6924 2.18261-4.875 4.875-4.875 2.6924 0 4.875 2.1826 4.875 4.875s-2.1826 4.875-4.875 4.875c-2.69239 0-4.875-2.1826-4.875-4.875z'; --icon-dots: 'M16,12A2,2 0 0,1 18,10A2,2 0 0,1 20,12A2,2 0 0,1 18,14A2,2 0 0,1 16,12M10,12A2,2 0 0,1 12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12M4,12A2,2 0 0,1 6,10A2,2 0 0,1 8,12A2,2 0 0,1 6,14A2,2 0 0,1 4,12Z'; --icon-back: 'M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z'; --icon-remove: 'm6.35673 9.71429c-.76333 0-1.35856.66121-1.27865 1.42031l1.01504 9.6429c.06888.6543.62067 1.1511 1.27865 1.1511h9.25643c.658 0 1.2098-.4968 1.2787-1.1511l1.015-9.6429c.0799-.7591-.5153-1.42031-1.2786-1.42031zm.50041-4.5v.32142h-2.57143c-.71008 0-1.28571.57564-1.28571 1.28572s.57563 1.28571 1.28571 1.28571h15.42859c.7101 0 1.2857-.57563 1.2857-1.28571s-.5756-1.28572-1.2857-1.28572h-2.5714v-.32142c0-1.77521-1.4391-3.21429-3.2143-3.21429h-3.8572c-1.77517 0-3.21426 1.43908-3.21426 3.21429zm7.07146-.64286c.355 0 .6428.28782.6428.64286v.32142h-5.14283v-.32142c0-.35504.28782-.64286.64283-.64286z'; @@ -39,11 +39,11 @@ --icon-edit-resize: 'M10.59,12L14.59,8H11V6H18V13H16V9.41L12,13.41V16H20V4H8V12H10.59M22,2V18H12V22H2V12H6V2H22M10,14H4V20H10V14Z'; --icon-external-source-placeholder: 'M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z'; - --icon-facebook: 'M12 2.04C6.5 2.04 2 6.53 2 12.06C2 17.06 5.66 21.21 10.44 21.96V14.96H7.9V12.06H10.44V9.85C10.44 7.34 11.93 5.96 14.22 5.96C15.31 5.96 16.45 6.15 16.45 6.15V8.62H15.19C13.95 8.62 13.56 9.39 13.56 10.18V12.06H16.34L15.89 14.96H13.56V21.96A10 10 0 0 0 22 12.06C22 6.53 17.5 2.04 12 2.04Z'; - --icon-dropbox: 'm6.0344426 1.9570014-5.96360421 3.7989306 5.96360421 3.7989309 5.9636044-3.7989309zm5.9636044 3.7989306 5.963604 3.7989309 5.963605-3.7989309-5.963605-3.7989306zm5.963604 3.7989309-5.963604 3.7989311 5.963604 3.798929 5.963605-3.798929zm-5.963604 3.7989311-5.9636044-3.7989311-5.96360421 3.7989311 5.96360421 3.798929zm.0024 1.204188-5.9636041 3.80132 5.9636041 3.798931 5.963604-3.798931z'; - --icon-gdrive: 'M7.71,3.5L1.15,15L4.58,21L11.13,9.5M9.73,15L6.3,21H19.42L22.85,15M22.28,14L15.42,2H8.58L8.57,2L15.43,14H22.28Z'; + --icon-facebook: 'm12 1.5c-5.79901 0-10.5 4.70099-10.5 10.5 0 4.9427 3.41586 9.0888 8.01562 10.2045v-6.1086h-2.13281c-.41421 0-.75-.3358-.75-.75v-3.2812c0-.4142.33579-.75.75-.75h2.13281v-1.92189c0-.95748.22571-2.51089 1.38068-3.6497 1.1934-1.17674 3.1742-1.71859 6.2536-1.05619.3455.07433.5923.3798.5923.73323v2.75395c0 .41422-.3358.75-.75.75-.6917 0-1.2029.02567-1.5844.0819-.3865.05694-.5781.13711-.675.20223-.1087.07303-.2367.20457-.2367 1.02837v1.0781h2.3906c.2193 0 .4275.0959.57.2626.1425.1666.205.3872.1709.6038l-.5156 3.2813c-.0573.3647-.3716.6335-.7409.6335h-1.875v6.1058c4.5939-1.1198 8.0039-5.2631 8.0039-10.2017 0-5.79901-4.701-10.5-10.5-10.5zm-12 10.5c0-6.62744 5.37256-12 12-12 6.6274 0 12 5.37256 12 12 0 5.9946-4.3948 10.9614-10.1384 11.8564-.2165.0337-.4369-.0289-.6033-.1714s-.2622-.3506-.2622-.5697v-7.7694c0-.4142.3358-.75.75-.75h1.9836l.28-1.7812h-2.2636c-.4142 0-.75-.3358-.75-.75v-1.8281c0-.82854.0888-1.72825.9-2.27338.3631-.24396.8072-.36961 1.293-.4412.3081-.0454.6583-.07238 1.0531-.08618v-1.39629c-2.4096-.40504-3.6447.13262-4.2928.77165-.7376.72735-.9338 1.79299-.9338 2.58161v2.67189c0 .4142-.3358.75-.75.75h-2.13279v1.7812h2.13279c.4142 0 .75.3358.75.75v7.7712c0 .219-.0956.427-.2619.5695-.1662.1424-.3864.2052-.6028.1717-5.74968-.8898-10.1509-5.8593-10.1509-11.8583z'; + --icon-dropbox: 'm6.01895 1.92072c.24583-.15659.56012-.15658.80593.00003l5.17512 3.29711 5.1761-3.29714c.2458-.15659.5601-.15658.8059.00003l5.5772 3.55326c.2162.13771.347.37625.347.63253 0 .25629-.1308.49483-.347.63254l-4.574 2.91414 4.574 2.91418c.2162.1377.347.3762.347.6325s-.1308.4948-.347.6325l-5.5772 3.5533c-.2458.1566-.5601.1566-.8059 0l-5.1761-3.2971-5.17512 3.2971c-.24581.1566-.5601.1566-.80593 0l-5.578142-3.5532c-.216172-.1377-.347058-.3763-.347058-.6326s.130886-.4949.347058-.6326l4.574772-2.91408-4.574772-2.91411c-.216172-.1377-.347058-.37626-.347058-.63257 0-.2563.130886-.49486.347058-.63256zm.40291 8.61518-4.18213 2.664 4.18213 2.664 4.18144-2.664zm6.97504 2.664 4.1821 2.664 4.1814-2.664-4.1814-2.664zm2.7758-3.54668-4.1727 2.65798-4.17196-2.65798 4.17196-2.658zm1.4063-.88268 4.1814-2.664-4.1814-2.664-4.1821 2.664zm-6.9757-2.664-4.18144-2.664-4.18213 2.664 4.18213 2.664zm-4.81262 12.43736c.22254-.3494.68615-.4522 1.03551-.2297l5.17521 3.2966 5.1742-3.2965c.3493-.2226.813-.1198 1.0355.2295.2226.3494.1198.813-.2295 1.0355l-5.5772 3.5533c-.2458.1566-.5601.1566-.8059 0l-5.57819-3.5532c-.34936-.2226-.45216-.6862-.22963-1.0355z'; + --icon-gdrive: 'm7.73633 1.81806c.13459-.22968.38086-.37079.64707-.37079h7.587c.2718 0 .5223.14697.6548.38419l7.2327 12.94554c.1281.2293.1269.5089-.0031.7371l-3.7935 6.6594c-.1334.2342-.3822.3788-.6517.3788l-14.81918.0004c-.26952 0-.51831-.1446-.65171-.3788l-3.793526-6.6598c-.1327095-.233-.130949-.5191.004617-.7504zm.63943 1.87562-6.71271 11.45452 2.93022 5.1443 6.65493-11.58056zm3.73574 6.52652-2.39793 4.1727 4.78633.0001zm4.1168 4.1729 5.6967-.0002-6.3946-11.44563h-5.85354zm5.6844 1.4998h-13.06111l-2.96515 5.1598 13.08726-.0004z'; --icon-gphotos: 'M21.35,11.1H12.18V13.83H18.69C18.36,17.64 15.19,19.27 12.19,19.27C8.36,19.27 5,16.25 5,12C5,7.9 8.2,4.73 12.2,4.73C15.29,4.73 17.1,6.7 17.1,6.7L19,4.72C19,4.72 16.56,2 12.1,2C6.42,2 2.03,6.8 2.03,12C2.03,17.05 6.16,22 12.25,22C17.6,22 21.5,18.33 21.5,12.91C21.5,11.76 21.35,11.1 21.35,11.1V11.1Z'; - --icon-instagram: 'm 16.6963,8.35462 c 0.5834,0 1.0564,-0.47293 1.0564,-1.05632 0,-0.58339 -0.473,-1.05632 -1.0564,-1.05632 -0.5833,0 -1.0563,0.47293 -1.0563,1.05632 0,0.58339 0.473,1.05632 1.0563,1.05632 z m -4.699,-0.87741 c -0.8941,0 -1.7681,0.26513 -2.51154,0.76187 -0.74341,0.49674 -1.32282,1.20277 -1.66495,2.02882 -0.34214,0.826 -0.43164,1.735 -0.25719,2.6119 0.17446,0.8769 0.60503,1.6824 1.23727,2.3146 0.63224,0.6322 1.43771,1.0627 2.31471,1.2371 0.8769,0.1743 1.7858,0.0848 2.6118,-0.2574 0.826,-0.3422 1.532,-0.9217 2.0287,-1.6651 0.4967,-0.7435 0.7618,-1.6175 0.7617,-2.5116 0,-0.5937 -0.1169,-1.1815 -0.344,-1.7299 C 15.9466,9.719 15.6136,9.22066 15.1938,8.80091 14.7741,8.38116 14.2757,8.04822 13.7272,7.82109 13.1787,7.59397 12.5909,7.47712 11.9973,7.47721 Z m 0,7.45429 c -0.5806,0 -1.148,-0.1721 -1.6307,-0.4946 C 9.88388,14.1143 9.50767,13.6559 9.28551,13.1196 9.06335,12.5833 9.00523,11.9931 9.11848,11.4237 9.23174,10.8543 9.51128,10.3313 9.92178,9.92085 10.3323,9.51036 10.8553,9.23081 11.4246,9.11756 11.994,9.0043 12.5842,9.06243 13.1205,9.28459 c 0.5363,0.22215 0.9948,0.59836 1.3173,1.08101 0.3225,0.4827 0.4946,1.0502 0.4946,1.6307 0,0.7785 -0.3092,1.5251 -0.8597,2.0755 -0.5504,0.5505 -1.297,0.8597 -2.0754,0.8597 z m 0,-10.15082 c 2.3506,0 2.6287,0.00909 3.5571,0.05137 0.8582,0.03913 1.3243,0.1824 1.6346,0.30295 0.3828,0.14096 0.7291,0.36604 1.0134,0.65867 0.2926,0.28423 0.5177,0.63052 0.6586,1.01334 0.1206,0.31029 0.2639,0.77642 0.303,1.63461 0.0423,0.92843 0.0514,1.20657 0.0514,3.55718 0,2.3506 -0.0091,2.6287 -0.0514,3.5572 -0.0391,0.8581 -0.1824,1.3243 -0.303,1.6346 -0.1466,0.3795 -0.3709,0.7242 -0.6586,1.0119 -0.2877,0.2877 -0.6324,0.5121 -1.012,0.6587 -0.3103,0.1205 -0.7764,0.2638 -1.6346,0.3029 -0.9281,0.0423 -1.2066,0.0514 -3.5571,0.0514 -2.35063,0 -2.62912,-0.0091 -3.5572,-0.0514 C 7.58331,19.125 7.11718,18.9817 6.80689,18.8612 6.42407,18.7202 6.07778,18.4951 5.79355,18.2025 5.50093,17.9183 5.27584,17.572 5.13488,17.1892 5.01433,16.8789 4.87107,16.4127 4.83193,15.5546 4.78965,14.6261 4.78056,14.348 4.78056,11.9974 4.78056,9.6468 4.78965,9.36865 4.83193,8.44023 4.87107,7.58203 5.01433,7.1159 5.13488,6.80561 5.27584,6.42279 5.50093,6.0765 5.79355,5.79227 6.07778,5.49965 6.42407,5.27456 6.80689,5.1336 7.11718,5.01305 7.58331,4.86979 8.4415,4.83065 9.36993,4.78837 9.64807,4.77928 11.9987,4.77928 Z m 0.0014,-1.58744 c -2.39081,0 -2.69062,0.01013 -3.62953,0.05311 C 7.43026,3.28933 6.79116,3.43923 6.23103,3.65693 5.64371,3.87792 5.11163,4.22433 4.67189,4.67201 4.22484,5.11192 3.87904,5.64398 3.65856,6.23115 3.43912,6.79128 3.29026,7.43108 3.24763,8.3679 3.205,9.30471 3.19452,9.60661 3.19452,11.9974 c 0,2.3908 0.01013,2.6906 0.05311,3.6295 0.04298,0.9389 0.19149,1.5766 0.40918,2.1367 0.22099,0.5874 0.5674,1.1194 1.01508,1.5592 0.43982,0.4476 0.97187,0.7941 1.55914,1.0154 0.55908,0.2173 1.19993,0.3662 2.13674,0.4092 0.93681,0.043 1.23872,0.0527 3.62953,0.0527 2.3907,0 2.6905,-0.0101 3.6295,-0.0527 0.9389,-0.0426 1.5766,-0.1919 2.1367,-0.4092 0.5847,-0.2262 1.1158,-0.5721 1.5591,-1.0154 0.4434,-0.4434 0.7892,-0.9744 1.0155,-1.5592 0.2173,-0.5591 0.3662,-1.1999 0.4091,-2.1367 C 20.7902,14.6901 20.8,14.3882 20.8,11.9974 20.8,9.60661 20.7899,9.3068 20.7472,8.3679 20.7046,7.42899 20.5554,6.79128 20.3381,6.23115 20.1168,5.64388 19.7703,5.11183 19.3226,4.67201 18.8827,4.22496 18.3507,3.87916 17.7635,3.65867 17.2034,3.43923 16.5636,3.29038 15.6268,3.24775 14.6899,3.20512 14.388,3.19464 11.9973,3.19464 Z'; + --icon-instagram: 'M6.225 12a5.775 5.775 0 1 1 11.55 0 5.775 5.775 0 0 1-11.55 0zM12 7.725a4.275 4.275 0 1 0 0 8.55 4.275 4.275 0 0 0 0-8.55zM18.425 6.975a1.4 1.4 0 1 0 0-2.8 1.4 1.4 0 0 0 0 2.8zM11.958.175h.084c2.152 0 3.823 0 5.152.132 1.35.134 2.427.41 3.362 1.013a7.15 7.15 0 0 1 2.124 2.124c.604.935.88 2.012 1.013 3.362.132 1.329.132 3 .132 5.152v.084c0 2.152 0 3.823-.132 5.152-.134 1.35-.41 2.427-1.013 3.362a7.15 7.15 0 0 1-2.124 2.124c-.935.604-2.012.88-3.362 1.013-1.329.132-3 .132-5.152.132h-.084c-2.152 0-3.824 0-5.153-.132-1.35-.134-2.427-.409-3.36-1.013a7.15 7.15 0 0 1-2.125-2.124C.716 19.62.44 18.544.307 17.194c-.132-1.329-.132-3-.132-5.152v-.084c0-2.152 0-3.823.132-5.152.133-1.35.409-2.427 1.013-3.362A7.15 7.15 0 0 1 3.444 1.32C4.378.716 5.456.44 6.805.307c1.33-.132 3-.132 5.153-.132zM6.953 1.799c-1.234.123-2.043.36-2.695.78A5.65 5.65 0 0 0 2.58 4.26c-.42.65-.657 1.46-.78 2.695C1.676 8.2 1.675 9.797 1.675 12c0 2.203 0 3.8.124 5.046.123 1.235.36 2.044.78 2.696a5.649 5.649 0 0 0 1.68 1.678c.65.421 1.46.658 2.694.78 1.247.124 2.844.125 5.047.125s3.8 0 5.046-.124c1.235-.123 2.044-.36 2.695-.78a5.648 5.648 0 0 0 1.68-1.68c.42-.65.657-1.46.78-2.694.123-1.247.124-2.844.124-5.047s-.001-3.8-.125-5.046c-.122-1.235-.359-2.044-.78-2.695a5.65 5.65 0 0 0-1.679-1.68c-.651-.42-1.46-.657-2.695-.78-1.246-.123-2.843-.124-5.046-.124-2.203 0-3.8 0-5.047.124z'; --icon-flickr: var(--icon-external-source-placeholder); --icon-vk: var(--icon-external-source-placeholder); --icon-evernote: var(--icon-external-source-placeholder); From d185f89cf6bbd160778fa089e7cd5e70d8508711 Mon Sep 17 00:00:00 2001 From: Anton Nesterov Date: Thu, 1 Dec 2022 17:29:08 +0100 Subject: [PATCH 011/135] more icon updates --- blocks/Icon/icon.css | 4 ++-- blocks/SourceBtn/source-btn.css | 5 ++--- blocks/themes/lr-basic/config.css | 2 +- 3 files changed, 5 insertions(+), 6 deletions(-) diff --git a/blocks/Icon/icon.css b/blocks/Icon/icon.css index 7ffe6fd1d..560e1e116 100644 --- a/blocks/Icon/icon.css +++ b/blocks/Icon/icon.css @@ -7,8 +7,8 @@ lr-icon { } lr-icon svg { - width: 1.2em; - height: 1.2em; + width: 1.1em; + height: 1.1em; } lr-icon:not([raw]) path { diff --git a/blocks/SourceBtn/source-btn.css b/blocks/SourceBtn/source-btn.css index df2d30c25..b92f62435 100644 --- a/blocks/SourceBtn/source-btn.css +++ b/blocks/SourceBtn/source-btn.css @@ -1,9 +1,8 @@ lr-source-btn { display: flex; align-items: center; - padding: var(--gap-min); - padding-right: var(--gap-mid); - padding-left: var(--gap-mid); + margin-bottom: var(--gap-min); + padding: var(--gap-min) var(--gap-mid); color: var(--clr-txt-mid); border-radius: var(--border-radius-element); cursor: pointer; diff --git a/blocks/themes/lr-basic/config.css b/blocks/themes/lr-basic/config.css index a8606616b..5ff525918 100644 --- a/blocks/themes/lr-basic/config.css +++ b/blocks/themes/lr-basic/config.css @@ -10,7 +10,7 @@ --cfg-accept: ''; --cfg-store: unset; --cfg-camera-mirror: 1; - --cfg-source-list: 'local, url, camera, dropbox, gdrive, facebook'; + --cfg-source-list: 'local, url, camera, dropbox, gdrive'; --cfg-max-local-file-size-bytes: 0; --cfg-thumb-size: 76; --cfg-show-empty-list: 0; From e5d159b4ba08f043223e4f0c0f11b3125531653b Mon Sep 17 00:00:00 2001 From: Anton Nesterov Date: Thu, 1 Dec 2022 17:40:11 +0100 Subject: [PATCH 012/135] values tweaking --- blocks/Icon/icon.css | 4 ++-- blocks/themes/lr-basic/common.css | 2 +- blocks/themes/lr-basic/theme.css | 6 +++--- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/blocks/Icon/icon.css b/blocks/Icon/icon.css index 560e1e116..7ffe6fd1d 100644 --- a/blocks/Icon/icon.css +++ b/blocks/Icon/icon.css @@ -7,8 +7,8 @@ lr-icon { } lr-icon svg { - width: 1.1em; - height: 1.1em; + width: 1.2em; + height: 1.2em; } lr-icon:not([raw]) path { diff --git a/blocks/themes/lr-basic/common.css b/blocks/themes/lr-basic/common.css index 46fb78ac2..ef02e782a 100644 --- a/blocks/themes/lr-basic/common.css +++ b/blocks/themes/lr-basic/common.css @@ -3,7 +3,7 @@ color: var(--clr-txt); /* font-size and family for testing purposes, to be removed */ - font-size: 15px; + font-size: 14px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } diff --git a/blocks/themes/lr-basic/theme.css b/blocks/themes/lr-basic/theme.css index 98656c02f..a2750f486 100644 --- a/blocks/themes/lr-basic/theme.css +++ b/blocks/themes/lr-basic/theme.css @@ -43,9 +43,9 @@ --borders: 1; - --border-radius-element: 7px; - --border-radius-frame: 10px; - --border-radius-thumb: 5px; + --border-radius-element: 8px; + --border-radius-frame: 12px; + --border-radius-thumb: 6px; --transition-duration: 0.2s; From 088e02e7b1c32a3a1d94160ee15d1ff4c37d7227 Mon Sep 17 00:00:00 2001 From: Anton Nesterov Date: Fri, 2 Dec 2022 09:16:11 +0100 Subject: [PATCH 013/135] more value tweaks --- blocks/SourceBtn/source-btn.css | 4 ++-- blocks/themes/lr-basic/theme.css | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/blocks/SourceBtn/source-btn.css b/blocks/SourceBtn/source-btn.css index b92f62435..81b73307d 100644 --- a/blocks/SourceBtn/source-btn.css +++ b/blocks/SourceBtn/source-btn.css @@ -17,8 +17,8 @@ lr-source-btn:hover { } lr-source-btn:active { - color: var(--clr-txt); - background-color: var(--clr-shade-lv2); + color: var(--clr-accent); + background-color: var(--clr-accent-light); } lr-source-btn lr-icon { diff --git a/blocks/themes/lr-basic/theme.css b/blocks/themes/lr-basic/theme.css index a2750f486..811f2d7e7 100644 --- a/blocks/themes/lr-basic/theme.css +++ b/blocks/themes/lr-basic/theme.css @@ -68,7 +68,7 @@ ); --clr-accent: hsl(var(--h-accent), var(--s-accent), var(--l-accent)); - --clr-accent-light: hsla(var(--h-accent), var(--s-accent), var(--l-accent), 50%); + --clr-accent-light: hsla(var(--h-accent), var(--s-accent), var(--l-accent), 30%); --clr-accent-lightest: hsla(var(--h-accent), var(--s-accent), var(--l-accent), 10%); --clr-confirm: hsl(var(--h-confirm), var(--s-confirm), var(--l-confirm)); @@ -110,7 +110,7 @@ calc((0.2 - 0.1 * var(--darkmode)) * var(--borders)) ); --border-accent: 1px solid hsla(var(--h-accent), var(--s-accent), var(--l-accent), 1 * var(--borders)); - --border-dashed: 2px dashed + --border-dashed: 1px dashed hsla(var(--h-foreground), var(--s-foreground), var(--l-foreground), calc(0.1 * var(--borders))); --clr-curtain: hsla(var(--h-background), var(--s-background), calc(var(--l-background) - 10%), 70%); From 017d99966799e892d793abe4ae338faa8afc5c99 Mon Sep 17 00:00:00 2001 From: Anton Nesterov Date: Fri, 2 Dec 2022 16:27:58 +0100 Subject: [PATCH 014/135] DropArea animation done --- blocks/DropArea/DropArea.js | 13 +++++ blocks/DropArea/drop-area.css | 89 +++++++++++++++++++++++++++++--- blocks/themes/lr-basic/icons.css | 5 +- blocks/themes/lr-basic/theme.css | 2 +- 4 files changed, 98 insertions(+), 11 deletions(-) diff --git a/blocks/DropArea/DropArea.js b/blocks/DropArea/DropArea.js index abc34f431..592ec8981 100644 --- a/blocks/DropArea/DropArea.js +++ b/blocks/DropArea/DropArea.js @@ -68,6 +68,19 @@ export class DropArea extends UploaderBlock { this.addEventListener('click', this._onAreaClicked); } } + + if (this.hasAttribute('big-icon')) { + let clickable = this.getAttribute('clickable'); + if (clickable === '' || clickable === 'true') { + // @private + this.innerHTML = /* HTML */ ` +
+ + +
+ `; + } + } } destroyCallback() { diff --git a/blocks/DropArea/drop-area.css b/blocks/DropArea/drop-area.css index 146a003a1..f153364c4 100644 --- a/blocks/DropArea/drop-area.css +++ b/blocks/DropArea/drop-area.css @@ -3,6 +3,7 @@ lr-drop-area { align-items: center; justify-content: center; padding: var(--gap-min); + overflow: hidden; border: var(--border-dashed); border-radius: var(--border-radius-frame); transition: border-color var(--transition-duration) ease, background-color var(--transition-duration) ease, @@ -10,22 +11,17 @@ lr-drop-area { } lr-drop-area::after { + position: relative; + margin: var(--gap-mid); color: var(--clr-txt-light); + transition: transform var(--transition-duration) ease; content: var(--l10n-drop-files-here); } -lr-drop-area[big-icon] { - min-height: 180px; -} - lr-drop-area[ghost][drag-state='inactive'] { opacity: 0; } -lr-drop-area[drag-state='inactive'] { - background-color: var(--clr-shade-lv1); -} - lr-drop-area[drag-state='active'] { background-color: var(--clr-accent-lightest); opacity: 1; @@ -41,8 +37,85 @@ lr-drop-area:hover { border-color: var(--clr-accent-light); } +lr-drop-area:hover::after { + color: var(--clr-accent); +} + lr-drop-area[drag-state='over'] { background-color: var(--clr-accent-lightest); border-color: var(--clr-accent); opacity: 1; } + +lr-drop-area[big-icon] { + display: flex; + flex-direction: column; + min-height: calc(var(--ui-size) * 5); +} + +lr-drop-area[big-icon]::after { + color: var(--clr-txt); + font-weight: 500; + font-size: 1.1em; +} + +lr-drop-area[big-icon] div { + position: relative; + width: calc(var(--ui-size) * 2); + height: calc(var(--ui-size) * 2); + overflow: hidden; + background-color: var(--clr-background); + border-radius: 50%; + transition: var(--transition-duration) ease; +} + +lr-drop-area[big-icon] lr-icon { + position: absolute; + top: calc(50% - var(--ui-size) / 2); + left: calc(50% - var(--ui-size) / 2); + transition: var(--transition-duration) ease; +} + +lr-drop-area[big-icon] lr-icon:last-child { + transform: translateY(calc(var(--ui-size) * 1.5)); +} + +lr-drop-area[big-icon]:hover div { + color: var(--clr-accent); + background-color: var(--clr-accent-lightest); +} + +lr-drop-area[big-icon][drag-state='active'] div, +lr-drop-area[big-icon][drag-state='near'] div, +lr-drop-area[big-icon][drag-state='over'] div { + color: white; + background-color: var(--clr-accent); + transform: translateY(calc(var(--ui-size) * 0.5)); +} + +lr-drop-area[big-icon][drag-state='active']::after, +lr-drop-area[big-icon][drag-state='near']::after, +lr-drop-area[big-icon][drag-state='over']::after { + color: var(--clr-accent); + transform: translateY(calc(var(--ui-size) * 1.75)); +} + +lr-drop-area[big-icon][drag-state='active'] lr-icon:first-child, +lr-drop-area[big-icon][drag-state='near'] lr-icon:first-child, +lr-drop-area[big-icon][drag-state='over'] lr-icon:first-child { + transform: translateY(calc(var(--ui-size) * -1.5)); +} + +lr-drop-area[big-icon][drag-state='active'] lr-icon:last-child, +lr-drop-area[big-icon][drag-state='near'] lr-icon:last-child, +lr-drop-area[big-icon][drag-state='over'] lr-icon:last-child { + transform: translateY(0); +} + +lr-drop-area[big-icon][drag-state='near'] lr-icon:last-child { + transform: scale(1.3); +} + +lr-drop-area[big-icon][drag-state='over'] lr-icon:last-child { + transform: scale(1.5); +} diff --git a/blocks/themes/lr-basic/icons.css b/blocks/themes/lr-basic/icons.css index 4ee1f9822..77a1ec2dc 100644 --- a/blocks/themes/lr-basic/icons.css +++ b/blocks/themes/lr-basic/icons.css @@ -1,11 +1,12 @@ :where(.lr-wgt-icons, .lr-wgt-common), :host { - --icon-default: 'm13 21.9506c5.0533-.5017 9-4.7653 9-9.9506 0-5.52285-4.4772-10-10-10-5.52285 0-10 4.47715-10 10 0 5.1853 3.94668 9.4489 9 9.9506v-11.5364l-2.79289 2.7929c-.39053.3906-1.02369.3906-1.41422 0-.39052-.3905-.39052-1.0237 0-1.4142l5.20711-5.20708 5.2071 5.20708c.3905.3905.3905 1.0237 0 1.4142-.3905.3906-1.0237.3906-1.4142 0l-2.7929-2.7929z'; + --icon-default: 'm11.5014.392135c.2844-.253315.7134-.253315.9978 0l6.7037 5.971925c.3093.27552.3366.74961.0611 1.05889-.2755.30929-.7496.33666-1.0589.06113l-5.4553-4.85982v13.43864c0 .4142-.3358.75-.75.75s-.75-.3358-.75-.75v-13.43771l-5.45427 4.85889c-.30929.27553-.78337.24816-1.0589-.06113-.27553-.30928-.24816-.78337.06113-1.05889zm-10.644466 16.336765c.414216 0 .749996.3358.749996.75v4.9139h20.78567v-4.9139c0-.4142.3358-.75.75-.75.4143 0 .75.3358.75.75v5.6639c0 .4143-.3357.75-.75.75h-22.285666c-.414214 0-.75-.3357-.75-.75v-5.6639c0-.4142.335786-.75.75-.75z'; --icon-file: 'm13.3333 5.57143 4 3.85714h-4zm-6.66663-2.57143c-1.47266 0-2.66667 1.15121-2.66667 2.57143v12.85717c0 1.4202 1.19401 2.5714 2.66667 2.5714h10.66663c1.4727 0 2.6667-1.1512 2.6667-2.5714v-9.00003l-6.6667-6.42857z'; --icon-close: 'M17.6569 7.75734c.3905-.39053.3905-1.02369 0-1.41421-.3906-.39053-1.0237-.39053-1.4143 0L12 10.5858 7.75736 6.34313c-.39053-.39053-1.02369-.39053-1.41421 0-.39053.39052-.39053 1.02368 0 1.41421L10.5858 12l-4.24266 4.2426c-.39052.3905-.39052 1.0237 0 1.4142.39053.3906 1.02369.3906 1.41422 0L12 13.4142l4.2426 4.2426c.3906.3906 1.0237.3906 1.4143 0 .3905-.3905.3905-1.0237 0-1.4142L13.4142 12l4.2427-4.24266Z'; --icon-info: 'M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z'; --icon-error: 'M13,13H11V7H13M13,17H11V15H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z'; - --icon-upload: 'm13 21.9506c5.0533-.5017 9-4.7653 9-9.9506 0-5.52285-4.4772-10-10-10-5.52285 0-10 4.47715-10 10 0 5.1853 3.94668 9.4489 9 9.9506v-11.5364l-2.79289 2.7929c-.39053.3906-1.02369.3906-1.41422 0-.39052-.3905-.39052-1.0237 0-1.4142l5.20711-5.20708 5.2071 5.20708c.3905.3905.3905 1.0237 0 1.4142-.3905.3906-1.0237.3906-1.4142 0l-2.7929-2.7929z'; + --icon-arrow-down: 'm11.5009 23.0302c.2844.2533.7135.2533.9978 0l9.2899-8.2758c.3092-.2756.3366-.7496.0611-1.0589s-.7496-.3367-1.0589-.0612l-8.0417 7.1639v-19.26834c0-.41421-.3358-.749997-.75-.749997s-.75.335787-.75.749997v19.26704l-8.04025-7.1626c-.30928-.2755-.78337-.2481-1.05889.0612-.27553.3093-.24816.7833.06112 1.0589z'; + --icon-upload: 'm11.5014.392135c.2844-.253315.7134-.253315.9978 0l6.7037 5.971925c.3093.27552.3366.74961.0611 1.05889-.2755.30929-.7496.33666-1.0589.06113l-5.4553-4.85982v13.43864c0 .4142-.3358.75-.75.75s-.75-.3358-.75-.75v-13.43771l-5.45427 4.85889c-.30929.27553-.78337.24816-1.0589-.06113-.27553-.30928-.24816-.78337.06113-1.05889zm-10.644466 16.336765c.414216 0 .749996.3358.749996.75v4.9139h20.78567v-4.9139c0-.4142.3358-.75.75-.75.4143 0 .75.3358.75.75v5.6639c0 .4143-.3357.75-.75.75h-22.285666c-.414214 0-.75-.3357-.75-.75v-5.6639c0-.4142.335786-.75.75-.75z'; --icon-local: 'm3 3.75c-.82843 0-1.5.67157-1.5 1.5v13.5c0 .8284.67157 1.5 1.5 1.5h18c.8284 0 1.5-.6716 1.5-1.5v-9.75c0-.82843-.6716-1.5-1.5-1.5h-9c-.2634 0-.5076-.13822-.6431-.36413l-2.03154-3.38587zm-3 1.5c0-1.65685 1.34315-3 3-3h6.75c.2634 0 .5076.13822.6431.36413l2.0315 3.38587h8.5754c1.6569 0 3 1.34315 3 3v9.75c0 1.6569-1.3431 3-3 3h-18c-1.65685 0-3-1.3431-3-3z'; --icon-url: 'm19.1099 3.67026c-1.7092-1.70917-4.5776-1.68265-6.4076.14738l-2.2212 2.22122c-.2929.29289-.7678.29289-1.0607 0-.29289-.29289-.29289-.76777 0-1.06066l2.2212-2.22122c2.376-2.375966 6.1949-2.481407 8.5289-.14738l1.2202 1.22015c2.334 2.33403 2.2286 6.15294-.1474 8.52895l-2.2212 2.2212c-.2929.2929-.7678.2929-1.0607 0s-.2929-.7678 0-1.0607l2.2212-2.2212c1.8301-1.83003 1.8566-4.69842.1474-6.40759zm-3.3597 4.57991c.2929.29289.2929.76776 0 1.06066l-6.43918 6.43927c-.29289.2928-.76777.2928-1.06066 0-.29289-.2929-.29289-.7678 0-1.0607l6.43924-6.43923c.2929-.2929.7677-.2929 1.0606 0zm-9.71158 1.17048c.29289.29289.29289.76775 0 1.06065l-2.22123 2.2212c-1.83002 1.8301-1.85654 4.6984-.14737 6.4076l1.22015 1.2202c1.70917 1.7091 4.57756 1.6826 6.40763-.1474l2.2212-2.2212c.2929-.2929.7677-.2929 1.0606 0s.2929.7677 0 1.0606l-2.2212 2.2212c-2.37595 2.376-6.19486 2.4815-8.52889.1474l-1.22015-1.2201c-2.334031-2.3341-2.22859-6.153.14737-8.5289l2.22123-2.22125c.29289-.2929.76776-.2929 1.06066 0z'; --icon-camera: 'm7.65 2.55c.14164-.18885.36393-.3.6-.3h7.5c.2361 0 .4584.11115.6.3l2.025 2.7h2.625c1.6569 0 3 1.34315 3 3v10.5c0 1.6569-1.3431 3-3 3h-18c-1.65685 0-3-1.3431-3-3v-10.5c0-1.65685 1.34315-3 3-3h2.625zm.975 1.2-2.025 2.7c-.14164.18885-.36393.3-.6.3h-3c-.82843 0-1.5.67157-1.5 1.5v10.5c0 .8284.67157 1.5 1.5 1.5h18c.8284 0 1.5-.6716 1.5-1.5v-10.5c0-.82843-.6716-1.5-1.5-1.5h-3c-.2361 0-.4584-.11115-.6-.3l-2.025-2.7zm3.375 6c-1.864 0-3.375 1.511-3.375 3.375s1.511 3.375 3.375 3.375 3.375-1.511 3.375-3.375-1.511-3.375-3.375-3.375zm-4.875 3.375c0-2.6924 2.18261-4.875 4.875-4.875 2.6924 0 4.875 2.1826 4.875 4.875s-2.1826 4.875-4.875 4.875c-2.69239 0-4.875-2.1826-4.875-4.875z'; diff --git a/blocks/themes/lr-basic/theme.css b/blocks/themes/lr-basic/theme.css index 811f2d7e7..b41a0b163 100644 --- a/blocks/themes/lr-basic/theme.css +++ b/blocks/themes/lr-basic/theme.css @@ -111,7 +111,7 @@ ); --border-accent: 1px solid hsla(var(--h-accent), var(--s-accent), var(--l-accent), 1 * var(--borders)); --border-dashed: 1px dashed - hsla(var(--h-foreground), var(--s-foreground), var(--l-foreground), calc(0.1 * var(--borders))); + hsla(var(--h-foreground), var(--s-foreground), var(--l-foreground), calc(0.2 * var(--borders))); --clr-curtain: hsla(var(--h-background), var(--s-background), calc(var(--l-background) - 10%), 70%); From 15e9eaa7e3ba36f4f9ba711f6c4d30417e4f1b65 Mon Sep 17 00:00:00 2001 From: Anton Nesterov Date: Sat, 3 Dec 2022 18:05:16 +0100 Subject: [PATCH 015/135] intermediate commit --- blocks/DropArea/drop-area.css | 3 ++- blocks/FileItem/file-item.css | 15 +++++++++++---- blocks/UploadList/upload-list.css | 4 ++-- blocks/themes/lr-basic/icons.css | 4 ++-- blocks/themes/lr-basic/theme.css | 2 +- 5 files changed, 18 insertions(+), 10 deletions(-) diff --git a/blocks/DropArea/drop-area.css b/blocks/DropArea/drop-area.css index f153364c4..79f1476ba 100644 --- a/blocks/DropArea/drop-area.css +++ b/blocks/DropArea/drop-area.css @@ -37,7 +37,8 @@ lr-drop-area:hover { border-color: var(--clr-accent-light); } -lr-drop-area:hover::after { +lr-drop-area:hover::after, +lr-drop-area[big-icon]:hover::after { color: var(--clr-accent); } diff --git a/blocks/FileItem/file-item.css b/blocks/FileItem/file-item.css index ce94c3397..bb0dbd847 100644 --- a/blocks/FileItem/file-item.css +++ b/blocks/FileItem/file-item.css @@ -2,14 +2,16 @@ lr-file-item > .inner { position: relative; display: grid; grid-template-columns: min-content auto min-content min-content; + margin-bottom: calc(var(--gap-mid) / 2); padding: var(--gap-mid); - background-color: transparent; - border-bottom: var(--border-light); + font-size: 0.95em; + background-color: var(--clr-background); + border-radius: var(--border-radius-element); transition: var(--transition-duration); } lr-file-item:last-of-type > .inner { - border-bottom: none; + margin-bottom: 0; } lr-file-item:hover > .inner { @@ -62,13 +64,18 @@ lr-file-item button { width: var(--ui-size); height: var(--ui-size); padding: 0; - color: var(--clr-txt-lightest); + color: var(--clr-txt-light); background-color: transparent; cursor: pointer; opacity: var(--opacity-normal); transition: opacity var(--transition-duration); } +lr-file-item button lr-icon { + width: 1.05em; + height: 1.05em; +} + lr-file-item .upload-btn { display: none; } diff --git a/blocks/UploadList/upload-list.css b/blocks/UploadList/upload-list.css index 34832b1fd..dba07c0a9 100644 --- a/blocks/UploadList/upload-list.css +++ b/blocks/UploadList/upload-list.css @@ -14,6 +14,7 @@ lr-upload-list .no-files { lr-upload-list .files { display: block; + padding: 0 var(--gap-mid); overflow: auto; } @@ -22,8 +23,7 @@ lr-upload-list .toolbar { gap: var(--gap-mid); justify-content: space-between; padding: var(--gap-mid); - background-color: var(--clr-background); - border-top: var(--border-light); + background-color: var(--clr-background-light); } lr-upload-list .toolbar-spacer { diff --git a/blocks/themes/lr-basic/icons.css b/blocks/themes/lr-basic/icons.css index 77a1ec2dc..2c6af6ed9 100644 --- a/blocks/themes/lr-basic/icons.css +++ b/blocks/themes/lr-basic/icons.css @@ -17,8 +17,8 @@ --icon-detail: 'M5,3C3.89,3 3,3.89 3,5V19C3,20.11 3.89,21 5,21H19C20.11,21 21,20.11 21,19V5C21,3.89 20.11,3 19,3H5M5,5H19V19H5V5M7,7V9H17V7H7M7,11V13H17V11H7M7,15V17H14V15H7Z'; --icon-select: 'M7,10L12,15L17,10H7Z'; --icon-check: 'm12 22c5.5228 0 10-4.4772 10-10 0-5.52285-4.4772-10-10-10-5.52285 0-10 4.47715-10 10 0 5.5228 4.47715 10 10 10zm4.7071-11.4929-5.9071 5.9071-3.50711-3.5071c-.39052-.3905-.39052-1.0237 0-1.4142.39053-.3906 1.02369-.3906 1.41422 0l2.09289 2.0929 4.4929-4.49294c.3905-.39052 1.0237-.39052 1.4142 0 .3905.39053.3905 1.02374 0 1.41424z'; - --icon-edit-file: 'M3.96371 14.4792c-.15098.151-.25578.3419-.3021.5504L2.52752 20.133c-.17826.8021.53735 1.5177 1.33951 1.3395l5.10341-1.1341c.20844-.0463.39934-.1511.55032-.3021l8.05064-8.0507-5.557-5.55702-8.05069 8.05062ZM13.4286 5.01437l5.557 5.55703 2.0212-2.02111c.6576-.65765.6576-1.72393 0-2.38159l-3.1755-3.17546c-.6577-.65765-1.7239-.65765-2.3816 0l-2.0211 2.02113Z'; - --icon-remove-file: 'm12 22c5.5228 0 10-4.4772 10-10 0-5.52285-4.4772-10-10-10-5.52285 0-10 4.47715-10 10 0 5.5228 4.47715 10 10 10zm3.7071-13.70711c.3905.39053.3905 1.02369 0 1.41422l-2.2929 2.29289 2.2929 2.2929c.3905.3905.3905 1.0237 0 1.4142s-1.0237.3905-1.4142 0l-2.2929-2.2929-2.29289 2.2929c-.39053.3905-1.02369.3905-1.41422 0-.39052-.3905-.39052-1.0237 0-1.4142l2.29291-2.2929-2.2929-2.29289c-.39053-.39053-.39053-1.02369 0-1.41422.39052-.39052 1.02369-.39052 1.41421 0l2.29289 2.29291 2.2929-2.29291c.3905-.39052 1.0237-.39052 1.4142 0z'; + --icon-edit-file: 'm12.1269 5.14285c.3964-1.93386 2.1078-3.38839 4.159-3.38839 2.0511 0 3.7625 1.45453 4.1589 3.38839h2.6446c.4734 0 .8572.38375.8572.85714s-.3838.85714-.8572.85714h-2.6446c-.3964 1.93387-2.1078 3.38837-4.1589 3.38837-2.0512 0-3.7626-1.4545-4.159-3.38837h-11.216046c-.473387 0-.8571432-.38375-.8571431-.85714s.3837561-.85714.8571431-.85714zm4.159-1.67411c-1.398 0-2.5313 1.13328-2.5313 2.53125s1.1333 2.53125 2.5313 2.53125c1.3979 0 2.5312-1.13328 2.5312-2.53125s-1.1333-2.53125-2.5312-2.53125zm-12.73044 13.67406c.39646-1.9338 2.10785-3.3883 4.15897-3.3883 2.05111 0 3.76247 1.4545 4.15897 3.3883h11.216c.4734 0 .8572.3838.8572.8572s-.3838.8571-.8572.8571h-11.216c-.3965 1.9339-2.10786 3.3884-4.15897 3.3884-2.05112 0-3.76251-1.4545-4.15897-3.3884h-2.644606c-.473387 0-.8571431-.3837-.8571431-.8571s.3837561-.8572.8571431-.8572zm4.15897-1.6741c-1.39798 0-2.53125 1.1333-2.53125 2.5313s1.13327 2.5312 2.53125 2.5312c1.39797 0 2.53127-1.1332 2.53127-2.5312s-1.1333-2.5313-2.53127-2.5313z'; + --icon-remove-file: 'm11.9493 2.05712c-.8999 0-1.763.3575-2.39936.99386-.56346.56346-.90829 1.30468-.9799 2.09185h6.75856c-.0716-.78717-.4164-1.52839-.9799-2.09185-.6363-.63636-1.4994-.99386-2.3994-.99386zm5.0983 3.08571c-.0749-1.24241-.6016-2.41893-1.4867-3.30403-.9578-.957851-2.257-1.495966-3.6116-1.495966s-2.65369.538115-3.61154 1.495966c-.8851.8851-1.41181 2.06162-1.4867 3.30403h-2.65105c-.04339 0-.08604.00323-.1277.00945h-2.2723c-.47338 0-.857139.38376-.857139.85715 0 .47338.383759.85714.857139.85714h1.54286v13.53343c0 .8638.34316 1.6923.954 2.3031.61083.6109 1.43929.954 2.30314.954h10.79999c.8639 0 1.6923-.3431 2.3032-.954.6108-.6108.954-1.4393.954-2.3031v-13.53343h1.5428c.4734 0 .8572-.38376.8572-.85714 0-.47339-.3838-.85715-.8572-.85715h-2.2723c-.0416-.00622-.0843-.00945-.1277-.00945zm-11.99044 1.72374v13.53343c0 .4092.16255.8016.45189 1.0909.28934.2894.68177.4519 1.09096.4519h10.79999c.4092 0 .8016-.1625 1.091-.4519.2893-.2893.4519-.6817.4519-1.0909v-13.53343z'; --icon-trash-file: var(--icon-remove); --icon-upload-error: var(--icon-error); --icon-fullscreen: 'M5,5H10V7H7V10H5V5M14,5H19V10H17V7H14V5M17,14H19V19H14V17H17V14M10,17V19H5V14H7V17H10Z'; diff --git a/blocks/themes/lr-basic/theme.css b/blocks/themes/lr-basic/theme.css index b41a0b163..22ad7d976 100644 --- a/blocks/themes/lr-basic/theme.css +++ b/blocks/themes/lr-basic/theme.css @@ -34,7 +34,7 @@ --opacity-hover: 0.8; --opacity-active: 1; - --ui-size: 34px; + --ui-size: 32px; --gap-min: 2px; --gap-mid: 10px; From 5be79987a911d9581f00e08fc724763cf45c0e91 Mon Sep 17 00:00:00 2001 From: Anton Nesterov Date: Mon, 5 Dec 2022 09:40:36 +0100 Subject: [PATCH 016/135] intermediate commit --- blocks/DropArea/drop-area.css | 2 +- blocks/Icon/icon.css | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/blocks/DropArea/drop-area.css b/blocks/DropArea/drop-area.css index 79f1476ba..99266d45c 100644 --- a/blocks/DropArea/drop-area.css +++ b/blocks/DropArea/drop-area.css @@ -14,7 +14,7 @@ lr-drop-area::after { position: relative; margin: var(--gap-mid); color: var(--clr-txt-light); - transition: transform var(--transition-duration) ease; + transition: var(--transition-duration) ease; content: var(--l10n-drop-files-here); } diff --git a/blocks/Icon/icon.css b/blocks/Icon/icon.css index 7ffe6fd1d..9d7a72567 100644 --- a/blocks/Icon/icon.css +++ b/blocks/Icon/icon.css @@ -7,8 +7,8 @@ lr-icon { } lr-icon svg { - width: 1.2em; - height: 1.2em; + width: calc(var(--ui-size) / 2); + height: calc(var(--ui-size) / 2); } lr-icon:not([raw]) path { From e836b88998974cc621df38073c7d7ca824607e9e Mon Sep 17 00:00:00 2001 From: Anton Nesterov Date: Mon, 5 Dec 2022 09:52:24 +0100 Subject: [PATCH 017/135] intermediate commit --- blocks/FileItem/file-item.css | 5 ----- blocks/themes/lr-basic/icons.css | 4 ++-- 2 files changed, 2 insertions(+), 7 deletions(-) diff --git a/blocks/FileItem/file-item.css b/blocks/FileItem/file-item.css index bb0dbd847..dc0a048da 100644 --- a/blocks/FileItem/file-item.css +++ b/blocks/FileItem/file-item.css @@ -71,11 +71,6 @@ lr-file-item button { transition: opacity var(--transition-duration); } -lr-file-item button lr-icon { - width: 1.05em; - height: 1.05em; -} - lr-file-item .upload-btn { display: none; } diff --git a/blocks/themes/lr-basic/icons.css b/blocks/themes/lr-basic/icons.css index 2c6af6ed9..b33179b6f 100644 --- a/blocks/themes/lr-basic/icons.css +++ b/blocks/themes/lr-basic/icons.css @@ -17,8 +17,8 @@ --icon-detail: 'M5,3C3.89,3 3,3.89 3,5V19C3,20.11 3.89,21 5,21H19C20.11,21 21,20.11 21,19V5C21,3.89 20.11,3 19,3H5M5,5H19V19H5V5M7,7V9H17V7H7M7,11V13H17V11H7M7,15V17H14V15H7Z'; --icon-select: 'M7,10L12,15L17,10H7Z'; --icon-check: 'm12 22c5.5228 0 10-4.4772 10-10 0-5.52285-4.4772-10-10-10-5.52285 0-10 4.47715-10 10 0 5.5228 4.47715 10 10 10zm4.7071-11.4929-5.9071 5.9071-3.50711-3.5071c-.39052-.3905-.39052-1.0237 0-1.4142.39053-.3906 1.02369-.3906 1.41422 0l2.09289 2.0929 4.4929-4.49294c.3905-.39052 1.0237-.39052 1.4142 0 .3905.39053.3905 1.02374 0 1.41424z'; - --icon-edit-file: 'm12.1269 5.14285c.3964-1.93386 2.1078-3.38839 4.159-3.38839 2.0511 0 3.7625 1.45453 4.1589 3.38839h2.6446c.4734 0 .8572.38375.8572.85714s-.3838.85714-.8572.85714h-2.6446c-.3964 1.93387-2.1078 3.38837-4.1589 3.38837-2.0512 0-3.7626-1.4545-4.159-3.38837h-11.216046c-.473387 0-.8571432-.38375-.8571431-.85714s.3837561-.85714.8571431-.85714zm4.159-1.67411c-1.398 0-2.5313 1.13328-2.5313 2.53125s1.1333 2.53125 2.5313 2.53125c1.3979 0 2.5312-1.13328 2.5312-2.53125s-1.1333-2.53125-2.5312-2.53125zm-12.73044 13.67406c.39646-1.9338 2.10785-3.3883 4.15897-3.3883 2.05111 0 3.76247 1.4545 4.15897 3.3883h11.216c.4734 0 .8572.3838.8572.8572s-.3838.8571-.8572.8571h-11.216c-.3965 1.9339-2.10786 3.3884-4.15897 3.3884-2.05112 0-3.76251-1.4545-4.15897-3.3884h-2.644606c-.473387 0-.8571431-.3837-.8571431-.8571s.3837561-.8572.8571431-.8572zm4.15897-1.6741c-1.39798 0-2.53125 1.1333-2.53125 2.5313s1.13327 2.5312 2.53125 2.5312c1.39797 0 2.53127-1.1332 2.53127-2.5312s-1.1333-2.5313-2.53127-2.5313z'; - --icon-remove-file: 'm11.9493 2.05712c-.8999 0-1.763.3575-2.39936.99386-.56346.56346-.90829 1.30468-.9799 2.09185h6.75856c-.0716-.78717-.4164-1.52839-.9799-2.09185-.6363-.63636-1.4994-.99386-2.3994-.99386zm5.0983 3.08571c-.0749-1.24241-.6016-2.41893-1.4867-3.30403-.9578-.957851-2.257-1.495966-3.6116-1.495966s-2.65369.538115-3.61154 1.495966c-.8851.8851-1.41181 2.06162-1.4867 3.30403h-2.65105c-.04339 0-.08604.00323-.1277.00945h-2.2723c-.47338 0-.857139.38376-.857139.85715 0 .47338.383759.85714.857139.85714h1.54286v13.53343c0 .8638.34316 1.6923.954 2.3031.61083.6109 1.43929.954 2.30314.954h10.79999c.8639 0 1.6923-.3431 2.3032-.954.6108-.6108.954-1.4393.954-2.3031v-13.53343h1.5428c.4734 0 .8572-.38376.8572-.85714 0-.47339-.3838-.85715-.8572-.85715h-2.2723c-.0416-.00622-.0843-.00945-.1277-.00945zm-11.99044 1.72374v13.53343c0 .4092.16255.8016.45189 1.0909.28934.2894.68177.4519 1.09096.4519h10.79999c.4092 0 .8016-.1625 1.091-.4519.2893-.2893.4519-.6817.4519-1.0909v-13.53343z'; + --icon-edit-file: 'm12.1109 6c.3469-1.69213 1.8444-2.96484 3.6391-2.96484s3.2922 1.27271 3.6391 2.96484h2.314c.4142 0 .75.33578.75.75 0 .41421-.3358.75-.75.75h-2.314c-.3469 1.69213-1.8444 2.9648-3.6391 2.9648s-3.2922-1.27267-3.6391-2.9648h-9.81402c-.41422 0-.75001-.33579-.75-.75 0-.41422.33578-.75.75-.75zm3.6391-1.46484c-1.2232 0-2.2148.99162-2.2148 2.21484s.9916 2.21484 2.2148 2.21484 2.2148-.99162 2.2148-2.21484-.9916-2.21484-2.2148-2.21484zm-11.1391 11.96484c.34691-1.6921 1.84437-2.9648 3.6391-2.9648 1.7947 0 3.2922 1.2727 3.6391 2.9648h9.814c.4142 0 .75.3358.75.75s-.3358.75-.75.75h-9.814c-.3469 1.6921-1.8444 2.9648-3.6391 2.9648-1.79473 0-3.29219-1.2727-3.6391-2.9648h-2.31402c-.41422 0-.75-.3358-.75-.75s.33578-.75.75-.75zm3.6391-1.4648c-1.22322 0-2.21484.9916-2.21484 2.2148s.99162 2.2148 2.21484 2.2148 2.2148-.9916 2.2148-2.2148-.99158-2.2148-2.2148-2.2148z'; + --icon-remove-file: 'm11.9554 3.29999c-.7875 0-1.5427.31281-2.0995.86963-.49303.49303-.79476 1.14159-.85742 1.83037h5.91382c-.0627-.68878-.3644-1.33734-.8575-1.83037-.5568-.55682-1.312-.86963-2.0994-.86963zm4.461 2.7c-.0656-1.08712-.5264-2.11657-1.3009-2.89103-.8381-.83812-1.9749-1.30897-3.1601-1.30897-1.1853 0-2.32204.47085-3.16016 1.30897-.77447.77446-1.23534 1.80391-1.30087 2.89103h-2.31966c-.03797 0-.07529.00282-.11174.00827h-1.98826c-.41422 0-.75.33578-.75.75 0 .41421.33578.75.75.75h1.35v11.84174c0 .7559.30026 1.4808.83474 2.0152.53448.5345 1.25939.8348 2.01526.8348h9.44999c.7559 0 1.4808-.3003 2.0153-.8348.5344-.5344.8347-1.2593.8347-2.0152v-11.84174h1.35c.4142 0 .75-.33579.75-.75 0-.41422-.3358-.75-.75-.75h-1.9883c-.0364-.00545-.0737-.00827-.1117-.00827zm-10.49169 1.50827v11.84174c0 .358.14223.7014.3954.9546.25318.2532.59656.3954.9546.3954h9.44999c.358 0 .7014-.1422.9546-.3954s.3954-.5966.3954-.9546v-11.84174z'; --icon-trash-file: var(--icon-remove); --icon-upload-error: var(--icon-error); --icon-fullscreen: 'M5,5H10V7H7V10H5V5M14,5H19V10H17V7H14V5M17,14H19V19H14V17H17V14M10,17V19H5V14H7V17H10Z'; From 0bb3e9a82f4fb40279176671e4711ab0000748b4 Mon Sep 17 00:00:00 2001 From: Anton Nesterov Date: Mon, 5 Dec 2022 10:20:15 +0100 Subject: [PATCH 018/135] simplified buttons --- blocks/themes/lr-basic/theme.css | 20 ++++++++------------ 1 file changed, 8 insertions(+), 12 deletions(-) diff --git a/blocks/themes/lr-basic/theme.css b/blocks/themes/lr-basic/theme.css index 22ad7d976..8812660e7 100644 --- a/blocks/themes/lr-basic/theme.css +++ b/blocks/themes/lr-basic/theme.css @@ -135,34 +135,30 @@ var(--s-accent), calc(var(--l-accent) - 8% * var(--darkmode-minus)) ); - --clr-btn-txt-primary: var(--clr-background-light); - --shadow-btn-primary: 0px 1px 2px hsla(var(--hsl-shadow), calc(0.26 * var(--shadows))), - 0px 2px 8px hsla(var(--hsl-shadow), calc(0.08 * var(--shadows))), - inset 0px 0px 2px hsla(var(--hsl-shadow), calc(0.2 * var(--shadows))); + --clr-btn-txt-primary: hsl(var(--h-accent), var(--s-accent), 98%); + --shadow-btn-primary: none; --clr-btn-bgr-secondary: hsl( var(--h-background), var(--s-background), - calc(var(--l-background) + 3% + 3% * var(--darkmode)) + calc(var(--l-background) - 5% * var(--darkmode-minus)) ); --clr-btn-bgr-secondary-hover: hsl( var(--h-background), var(--s-background), - calc(var(--l-background) + 8% * var(--darkmode)) + calc(var(--l-background) - 7% * var(--darkmode-minus)) ); --clr-btn-bgr-secondary-active: hsl( var(--h-background), var(--s-background), - calc(var(--l-background) - 3% + 13% * var(--darkmode)) + calc(var(--l-background) - 12% * var(--darkmode-minus)) ); - --clr-btn-txt-secondary: var(--clr-txt); - --shadow-btn-secondary: 0px 1px 1px hsla(var(--hsl-shadow), calc(0.07 * var(--shadows))), - 0px 2px 8px hsla(var(--hsl-shadow), calc(0.06 * var(--shadows))), - inset 0px 0px 1px hsla(var(--hsl-shadow), calc(0.4 * var(--shadows))); + --clr-btn-txt-secondary: var(--clr-txt-mid); + --shadow-btn-secondary: none; --clr-btn-bgr-disabled: var(--clr-background); --clr-btn-txt-disabled: var(--clr-txt-lightest); - --shadow-btn-disabled: inset 0px 0px 1px hsla(var(--hsl-shadow), calc(0.4 * var(--shadows))); + --shadow-btn-disabled: none; } @media only screen and (max-height: 600px) { From 76ed75975d8565a78193e2143b56d63ff5294156 Mon Sep 17 00:00:00 2001 From: Anton Nesterov Date: Mon, 5 Dec 2022 13:43:11 +0100 Subject: [PATCH 019/135] activity icon is not mandatory --- blocks/ActivityIcon/ActivityIcon.js | 2 +- blocks/DropArea/DropArea.js | 2 +- blocks/DropArea/drop-area.css | 16 ++++++++-------- blocks/Modal/modal.css | 3 ++- blocks/StartFrom/StartFrom.js | 2 +- blocks/themes/lr-basic/icons.css | 2 +- blocks/themes/lr-basic/theme.css | 2 +- 7 files changed, 15 insertions(+), 14 deletions(-) diff --git a/blocks/ActivityIcon/ActivityIcon.js b/blocks/ActivityIcon/ActivityIcon.js index de32f2954..c49088c76 100644 --- a/blocks/ActivityIcon/ActivityIcon.js +++ b/blocks/ActivityIcon/ActivityIcon.js @@ -2,4 +2,4 @@ import { ActivityBlock } from '../../abstract/ActivityBlock.js'; export class ActivityIcon extends ActivityBlock {} -ActivityIcon.template = /* HTML */ ` `; +ActivityIcon.template = /* HTML */ ``; diff --git a/blocks/DropArea/DropArea.js b/blocks/DropArea/DropArea.js index 592ec8981..d9c8ff667 100644 --- a/blocks/DropArea/DropArea.js +++ b/blocks/DropArea/DropArea.js @@ -74,7 +74,7 @@ export class DropArea extends UploaderBlock { if (clickable === '' || clickable === 'true') { // @private this.innerHTML = /* HTML */ ` -
+
diff --git a/blocks/DropArea/drop-area.css b/blocks/DropArea/drop-area.css index 99266d45c..be847f1b8 100644 --- a/blocks/DropArea/drop-area.css +++ b/blocks/DropArea/drop-area.css @@ -60,12 +60,14 @@ lr-drop-area[big-icon]::after { font-size: 1.1em; } -lr-drop-area[big-icon] div { +lr-drop-area[big-icon] .icon-container { position: relative; width: calc(var(--ui-size) * 2); height: calc(var(--ui-size) * 2); + margin: var(--gap-mid); overflow: hidden; - background-color: var(--clr-background); + color: var(--clr-txt); + background-color: var(--clr-btn-bgr-secondary); border-radius: 50%; transition: var(--transition-duration) ease; } @@ -81,24 +83,22 @@ lr-drop-area[big-icon] lr-icon:last-child { transform: translateY(calc(var(--ui-size) * 1.5)); } -lr-drop-area[big-icon]:hover div { +lr-drop-area[big-icon]:hover .icon-container { color: var(--clr-accent); background-color: var(--clr-accent-lightest); } -lr-drop-area[big-icon][drag-state='active'] div, -lr-drop-area[big-icon][drag-state='near'] div, -lr-drop-area[big-icon][drag-state='over'] div { +lr-drop-area[big-icon][drag-state='active'] .icon-container, +lr-drop-area[big-icon][drag-state='near'] .icon-container, +lr-drop-area[big-icon][drag-state='over'] .icon-container { color: white; background-color: var(--clr-accent); - transform: translateY(calc(var(--ui-size) * 0.5)); } lr-drop-area[big-icon][drag-state='active']::after, lr-drop-area[big-icon][drag-state='near']::after, lr-drop-area[big-icon][drag-state='over']::after { color: var(--clr-accent); - transform: translateY(calc(var(--ui-size) * 1.75)); } lr-drop-area[big-icon][drag-state='active'] lr-icon:first-child, diff --git a/blocks/Modal/modal.css b/blocks/Modal/modal.css index b1c0d5c65..026c1a814 100644 --- a/blocks/Modal/modal.css +++ b/blocks/Modal/modal.css @@ -35,7 +35,7 @@ lr-modal button.close-btn { width: var(--ui-size); height: var(--ui-size); padding: 0; - color: var(--clr-txt-light); + color: var(--clr-txt-mid); background-color: transparent; border: none; cursor: pointer; @@ -85,6 +85,7 @@ lr-modal > .dialog > .content { lr-modal .heading { display: grid; grid-template-columns: min-content 1fr min-content; + gap: var(--gap-mid); padding: var(--gap-mid); color: var(--clr-txt-light); font-weight: 500; diff --git a/blocks/StartFrom/StartFrom.js b/blocks/StartFrom/StartFrom.js index da67a709d..c06de6d22 100644 --- a/blocks/StartFrom/StartFrom.js +++ b/blocks/StartFrom/StartFrom.js @@ -10,7 +10,7 @@ export class StartFrom extends ActivityBlock { this.add$( { '*activityCaption': this.l10n('select-file-source'), - '*activityIcon': 'default', + '*activityIcon': null, }, true ); diff --git a/blocks/themes/lr-basic/icons.css b/blocks/themes/lr-basic/icons.css index b33179b6f..da3fa14e1 100644 --- a/blocks/themes/lr-basic/icons.css +++ b/blocks/themes/lr-basic/icons.css @@ -2,7 +2,7 @@ :host { --icon-default: 'm11.5014.392135c.2844-.253315.7134-.253315.9978 0l6.7037 5.971925c.3093.27552.3366.74961.0611 1.05889-.2755.30929-.7496.33666-1.0589.06113l-5.4553-4.85982v13.43864c0 .4142-.3358.75-.75.75s-.75-.3358-.75-.75v-13.43771l-5.45427 4.85889c-.30929.27553-.78337.24816-1.0589-.06113-.27553-.30928-.24816-.78337.06113-1.05889zm-10.644466 16.336765c.414216 0 .749996.3358.749996.75v4.9139h20.78567v-4.9139c0-.4142.3358-.75.75-.75.4143 0 .75.3358.75.75v5.6639c0 .4143-.3357.75-.75.75h-22.285666c-.414214 0-.75-.3357-.75-.75v-5.6639c0-.4142.335786-.75.75-.75z'; --icon-file: 'm13.3333 5.57143 4 3.85714h-4zm-6.66663-2.57143c-1.47266 0-2.66667 1.15121-2.66667 2.57143v12.85717c0 1.4202 1.19401 2.5714 2.66667 2.5714h10.66663c1.4727 0 2.6667-1.1512 2.6667-2.5714v-9.00003l-6.6667-6.42857z'; - --icon-close: 'M17.6569 7.75734c.3905-.39053.3905-1.02369 0-1.41421-.3906-.39053-1.0237-.39053-1.4143 0L12 10.5858 7.75736 6.34313c-.39053-.39053-1.02369-.39053-1.41421 0-.39053.39052-.39053 1.02368 0 1.41421L10.5858 12l-4.24266 4.2426c-.39052.3905-.39052 1.0237 0 1.4142.39053.3906 1.02369.3906 1.41422 0L12 13.4142l4.2426 4.2426c.3906.3906 1.0237.3906 1.4143 0 .3905-.3905.3905-1.0237 0-1.4142L13.4142 12l4.2427-4.24266Z'; + --icon-close: 'm4.60395 4.60395c.29289-.2929.76776-.2929 1.06066 0l6.33539 6.33535 6.3354-6.33535c.2929-.2929.7677-.2929 1.0606 0 .2929.29289.2929.76776 0 1.06066l-6.3353 6.33539 6.3353 6.3354c.2929.2929.2929.7677 0 1.0606s-.7677.2929-1.0606 0l-6.3354-6.3353-6.33539 6.3353c-.2929.2929-.76777.2929-1.06066 0-.2929-.2929-.2929-.7677 0-1.0606l6.33535-6.3354-6.33535-6.33539c-.2929-.2929-.2929-.76777 0-1.06066z'; --icon-info: 'M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z'; --icon-error: 'M13,13H11V7H13M13,17H11V15H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z'; --icon-arrow-down: 'm11.5009 23.0302c.2844.2533.7135.2533.9978 0l9.2899-8.2758c.3092-.2756.3366-.7496.0611-1.0589s-.7496-.3367-1.0589-.0612l-8.0417 7.1639v-19.26834c0-.41421-.3358-.749997-.75-.749997s-.75.335787-.75.749997v19.26704l-8.04025-7.1626c-.30928-.2755-.78337-.2481-1.05889.0612-.27553.3093-.24816.7833.06112 1.0589z'; diff --git a/blocks/themes/lr-basic/theme.css b/blocks/themes/lr-basic/theme.css index 8812660e7..4af78cb68 100644 --- a/blocks/themes/lr-basic/theme.css +++ b/blocks/themes/lr-basic/theme.css @@ -30,7 +30,7 @@ --s-shadow: 0%; --l-shadow: 0%; - --opacity-normal: 0.5; + --opacity-normal: 0.6; --opacity-hover: 0.8; --opacity-active: 1; From 2b0b513a319d021b784722ac711cd6558b594401 Mon Sep 17 00:00:00 2001 From: Anton Nesterov Date: Mon, 5 Dec 2022 16:58:56 +0100 Subject: [PATCH 020/135] =?UTF-8?q?=F0=9F=A4=A6=E2=80=8D=E2=99=82=EF=B8=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- blocks/DropArea/DropArea.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/blocks/DropArea/DropArea.js b/blocks/DropArea/DropArea.js index d9c8ff667..900e7f7e0 100644 --- a/blocks/DropArea/DropArea.js +++ b/blocks/DropArea/DropArea.js @@ -70,8 +70,8 @@ export class DropArea extends UploaderBlock { } if (this.hasAttribute('big-icon')) { - let clickable = this.getAttribute('clickable'); - if (clickable === '' || clickable === 'true') { + let bigIcon = this.getAttribute('big-icon'); + if (bigIcon === '' || bigIcon === 'true') { // @private this.innerHTML = /* HTML */ `
From 32bf5d314595d34aad76f10f70be868b2074910c Mon Sep 17 00:00:00 2001 From: Anton Nesterov Date: Tue, 6 Dec 2022 10:26:25 +0100 Subject: [PATCH 021/135] fix dialog:backdrop --- blocks/DropArea/drop-area.css | 2 +- blocks/Modal/modal.css | 15 ++++++++++----- blocks/UploadList/UploadList.js | 2 +- blocks/themes/lr-basic/theme.css | 9 ++++----- 4 files changed, 16 insertions(+), 12 deletions(-) diff --git a/blocks/DropArea/drop-area.css b/blocks/DropArea/drop-area.css index be847f1b8..4bd876300 100644 --- a/blocks/DropArea/drop-area.css +++ b/blocks/DropArea/drop-area.css @@ -51,7 +51,7 @@ lr-drop-area[drag-state='over'] { lr-drop-area[big-icon] { display: flex; flex-direction: column; - min-height: calc(var(--ui-size) * 5); + min-height: calc(var(--ui-size) * 6); } lr-drop-area[big-icon]::after { diff --git a/blocks/Modal/modal.css b/blocks/Modal/modal.css index 026c1a814..a6a9c0d6f 100644 --- a/blocks/Modal/modal.css +++ b/blocks/Modal/modal.css @@ -2,6 +2,7 @@ lr-modal { --modal-max-content-height: calc(var(--uploadcare-blocks-window-height, 100vh) - 4 * var(--gap-mid) - var(--ui-size)); --modal-content-height-fill: var(--uploadcare-blocks-window-height, 100vh); } + lr-modal[dialog-fallback] { position: fixed; top: 0px; @@ -11,18 +12,22 @@ lr-modal[dialog-fallback] { justify-content: center; width: 100vw; height: 100vh; -} - -lr-modal > :is(.dialog::backdrop), -lr-modal[dialog-fallback] { background-color: var(--clr-curtain); } -lr-modal[strokes] > :is(.dialog::backdrop), lr-modal[dialog-fallback][strokes] { background-image: var(--modal-backdrop-background-image); } +@supports selector(.dialog::backdrop) { + lr-modal > .dialog::backdrop { + background-color: var(--clr-curtain); + } + lr-modal[strokes] > .dialog::backdrop { + background-image: var(--modal-backdrop-background-image); + } +} + lr-modal > .dialog:not([open]) { visibility: hidden; opacity: 0; diff --git a/blocks/UploadList/UploadList.js b/blocks/UploadList/UploadList.js index 755e77037..3727809c0 100644 --- a/blocks/UploadList/UploadList.js +++ b/blocks/UploadList/UploadList.js @@ -161,7 +161,7 @@ export class UploadList extends UploaderBlock { onActivate: () => { this.set$({ '*activityCaption': this.l10n('selected'), - '*activityIcon': 'local', + '*activityIcon': null, }); }, }); diff --git a/blocks/themes/lr-basic/theme.css b/blocks/themes/lr-basic/theme.css index 4af78cb68..5665f3efe 100644 --- a/blocks/themes/lr-basic/theme.css +++ b/blocks/themes/lr-basic/theme.css @@ -10,7 +10,7 @@ --h-background: 208; --s-background: 4%; - --l-background: calc(95% - 87% * var(--darkmode)); + --l-background: calc(97% - 87% * var(--darkmode)); --h-accent: 211; --s-accent: 100%; @@ -51,7 +51,6 @@ --modal-max-w: 800px; --modal-max-h: 600px; - --modal-backdrop-background-image: url('data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEwIiB3aWR0aD0iMTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggc3Ryb2tlPSJyZ2JhKDAsIDAsIDAsIC4xKSIgZD0iTTAgMTAgMTAgMCIvPgo8L3N2Zz4='); /* Derivative values */ @@ -79,7 +78,7 @@ --clr-error-message-bgr: hsl(var(--h-error), var(--s-error), calc(var(--l-error) + 30% * var(--darkmode-minus))); --clr-txt: hsl(var(--h-foreground), var(--s-foreground), var(--l-foreground)); - --clr-txt-mid: hsl(var(--h-foreground), var(--s-foreground), calc(var(--l-foreground) + 15% * var(--darkmode-minus))); + --clr-txt-mid: hsl(var(--h-foreground), var(--s-foreground), calc(var(--l-foreground) + 20% * var(--darkmode-minus))); --clr-txt-light: hsl( var(--h-foreground), var(--s-foreground), @@ -113,7 +112,7 @@ --border-dashed: 1px dashed hsla(var(--h-foreground), var(--s-foreground), var(--l-foreground), calc(0.2 * var(--borders))); - --clr-curtain: hsla(var(--h-background), var(--s-background), calc(var(--l-background) - 10%), 70%); + --clr-curtain: hsla(var(--h-background), var(--s-background), calc(var(--l-background)), 50%); --hsl-shadow: var(--h-shadow), var(--s-shadow), var(--l-shadow); @@ -141,7 +140,7 @@ --clr-btn-bgr-secondary: hsl( var(--h-background), var(--s-background), - calc(var(--l-background) - 5% * var(--darkmode-minus)) + calc(var(--l-background) - 3% * var(--darkmode-minus)) ); --clr-btn-bgr-secondary-hover: hsl( var(--h-background), From e6dcea63e429efa3b67cd162f965e19c9aee6a45 Mon Sep 17 00:00:00 2001 From: Anton Nesterov Date: Tue, 6 Dec 2022 10:43:13 +0100 Subject: [PATCH 022/135] minor tweaks --- blocks/DropArea/drop-area.css | 2 +- blocks/FileItem/file-item.css | 1 + blocks/Modal/modal.css | 7 +++---- blocks/themes/lr-basic/theme.css | 6 +++--- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/blocks/DropArea/drop-area.css b/blocks/DropArea/drop-area.css index 4bd876300..9f7084dfe 100644 --- a/blocks/DropArea/drop-area.css +++ b/blocks/DropArea/drop-area.css @@ -67,7 +67,7 @@ lr-drop-area[big-icon] .icon-container { margin: var(--gap-mid); overflow: hidden; color: var(--clr-txt); - background-color: var(--clr-btn-bgr-secondary); + background-color: var(--clr-background); border-radius: 50%; transition: var(--transition-duration) ease; } diff --git a/blocks/FileItem/file-item.css b/blocks/FileItem/file-item.css index dc0a048da..d1a627e85 100644 --- a/blocks/FileItem/file-item.css +++ b/blocks/FileItem/file-item.css @@ -4,6 +4,7 @@ lr-file-item > .inner { grid-template-columns: min-content auto min-content min-content; margin-bottom: calc(var(--gap-mid) / 2); padding: var(--gap-mid); + overflow: hidden; font-size: 0.95em; background-color: var(--clr-background); border-radius: var(--border-radius-element); diff --git a/blocks/Modal/modal.css b/blocks/Modal/modal.css index a6a9c0d6f..d422fcce6 100644 --- a/blocks/Modal/modal.css +++ b/blocks/Modal/modal.css @@ -44,16 +44,15 @@ lr-modal button.close-btn { background-color: transparent; border: none; cursor: pointer; - opacity: var(--opacity-normal); - transition: opacity var(--transition-duration) ease; + transition: background-color var(--transition-duration) ease; } lr-modal button.close-btn:hover { - opacity: var(--opacity-hover); + background-color: var(--clr-background); } lr-modal button.close-btn:active { - opacity: var(--opacity-active); + background-color: var(--clr-background-dark); } lr-modal > .dialog { diff --git a/blocks/themes/lr-basic/theme.css b/blocks/themes/lr-basic/theme.css index 5665f3efe..0dd749f1e 100644 --- a/blocks/themes/lr-basic/theme.css +++ b/blocks/themes/lr-basic/theme.css @@ -49,7 +49,7 @@ --transition-duration: 0.2s; - --modal-max-w: 800px; + --modal-max-w: 430px; --modal-max-h: 600px; /* Derivative values */ @@ -112,7 +112,7 @@ --border-dashed: 1px dashed hsla(var(--h-foreground), var(--s-foreground), var(--l-foreground), calc(0.2 * var(--borders))); - --clr-curtain: hsla(var(--h-background), var(--s-background), calc(var(--l-background)), 50%); + --clr-curtain: hsla(var(--h-background), var(--s-background), calc(var(--l-background)), 40%); --hsl-shadow: var(--h-shadow), var(--s-shadow), var(--l-shadow); @@ -167,7 +167,7 @@ } } -@media only screen and (max-width: 800px) { +@media only screen and (max-width: 430px) { :where(.lr-wgt-theme, .lr-wgt-common), :host { --modal-max-w: 100%; From 22cf3f70411e94d9de8d923a9a2199dd04b30032 Mon Sep 17 00:00:00 2001 From: Anton Nesterov Date: Tue, 6 Dec 2022 10:48:49 +0100 Subject: [PATCH 023/135] simplify inputs --- blocks/themes/lr-basic/common.css | 3 +-- blocks/themes/lr-basic/theme.css | 6 ++---- 2 files changed, 3 insertions(+), 6 deletions(-) diff --git a/blocks/themes/lr-basic/common.css b/blocks/themes/lr-basic/common.css index ef02e782a..34a11c212 100644 --- a/blocks/themes/lr-basic/common.css +++ b/blocks/themes/lr-basic/common.css @@ -115,9 +115,8 @@ font-size: var(--font-size-ui); font-family: inherit; background-color: var(--clr-background-light); - border: var(--border-mid); + border: var(--border-light); border-radius: var(--border-radius-element); - box-shadow: var(--inset-shadow); transition: var(--transition-duration); } diff --git a/blocks/themes/lr-basic/theme.css b/blocks/themes/lr-basic/theme.css index 0dd749f1e..da7be0333 100644 --- a/blocks/themes/lr-basic/theme.css +++ b/blocks/themes/lr-basic/theme.css @@ -116,10 +116,8 @@ --hsl-shadow: var(--h-shadow), var(--s-shadow), var(--l-shadow); - --modal-shadow: 0px 0px 1px hsla(var(--hsl-shadow), calc((0.35 + 0.65 * var(--darkmode)) * var(--shadows))), - 0px 6px 40px hsla(var(--hsl-shadow), calc((0.2 + 0.4 * var(--darkmode)) * var(--shadows))); - - --inset-shadow: inset 0px 2px 3px hsla(var(--hsl-shadow), calc(0.09 + 0.1 * var(--darkmode))); + --modal-shadow: 0px 0px 1px hsla(var(--hsl-shadow), calc((0.3 + 0.65 * var(--darkmode)) * var(--shadows))), + 0px 6px 20px hsla(var(--hsl-shadow), calc((0.1 + 0.4 * var(--darkmode)) * var(--shadows))); /* Maybe move directly to the styles of the buttons? */ From 7a9f1f4b51e1c7e78a277dc2852a042b2153032a Mon Sep 17 00:00:00 2001 From: Anton Nesterov Date: Tue, 6 Dec 2022 11:15:16 +0100 Subject: [PATCH 024/135] define modalHeaderHidden and activityIcon everywhere --- blocks/CameraSource/CameraSource.js | 1 + blocks/ExternalSource/ExternalSource.js | 1 + blocks/StartFrom/StartFrom.js | 1 + blocks/UploadDetails/UploadDetails.js | 2 ++ blocks/UploadList/UploadList.js | 1 + blocks/UrlSource/UrlSource.js | 1 + 6 files changed, 7 insertions(+) diff --git a/blocks/CameraSource/CameraSource.js b/blocks/CameraSource/CameraSource.js index f9c839d9e..1df00f9cb 100644 --- a/blocks/CameraSource/CameraSource.js +++ b/blocks/CameraSource/CameraSource.js @@ -47,6 +47,7 @@ export class CameraSource extends UploaderBlock { this.set$({ '*activityCaption': this.l10n('caption-camera'), '*activityIcon': 'camera', + '*modalHeaderHidden': false, }); if (canUsePermissionsApi()) { diff --git a/blocks/ExternalSource/ExternalSource.js b/blocks/ExternalSource/ExternalSource.js index f610966dc..ea38e9d50 100644 --- a/blocks/ExternalSource/ExternalSource.js +++ b/blocks/ExternalSource/ExternalSource.js @@ -36,6 +36,7 @@ export class ExternalSource extends UploaderBlock { this.set$({ '*activityCaption': `${externalSourceType?.[0].toUpperCase()}${externalSourceType?.slice(1)}`, '*activityIcon': externalSourceType, + '*modalHeaderHidden': false, }); this.$.counter = 0; diff --git a/blocks/StartFrom/StartFrom.js b/blocks/StartFrom/StartFrom.js index c06de6d22..ada4cbba2 100644 --- a/blocks/StartFrom/StartFrom.js +++ b/blocks/StartFrom/StartFrom.js @@ -11,6 +11,7 @@ export class StartFrom extends ActivityBlock { { '*activityCaption': this.l10n('select-file-source'), '*activityIcon': null, + '*modalHeaderHidden': true, }, true ); diff --git a/blocks/UploadDetails/UploadDetails.js b/blocks/UploadDetails/UploadDetails.js index f132b3ed7..3cc941a66 100644 --- a/blocks/UploadDetails/UploadDetails.js +++ b/blocks/UploadDetails/UploadDetails.js @@ -56,6 +56,8 @@ export class UploadDetails extends UploaderBlock { onActivate: () => { this.set$({ '*activityCaption': this.l10n('caption-edit-file'), + '*activityIcon': null, + '*modalHeaderHidden': false, }); }, onDeactivate: () => { diff --git a/blocks/UploadList/UploadList.js b/blocks/UploadList/UploadList.js index 3727809c0..c64f848c7 100644 --- a/blocks/UploadList/UploadList.js +++ b/blocks/UploadList/UploadList.js @@ -162,6 +162,7 @@ export class UploadList extends UploaderBlock { this.set$({ '*activityCaption': this.l10n('selected'), '*activityIcon': null, + '*modalHeaderHidden': false, }); }, }); diff --git a/blocks/UrlSource/UrlSource.js b/blocks/UrlSource/UrlSource.js index 1c51a14b1..2395e1dc2 100644 --- a/blocks/UrlSource/UrlSource.js +++ b/blocks/UrlSource/UrlSource.js @@ -30,6 +30,7 @@ export class UrlSource extends UploaderBlock { this.set$({ '*activityCaption': this.l10n('caption-from-url'), '*activityIcon': 'url', + '*modalHeaderHidden': false, }); }, onClose: () => this.historyBack(), From ad2f2ee72b350416bb837961c8e4598bea56450e Mon Sep 17 00:00:00 2001 From: Anton Nesterov Date: Tue, 6 Dec 2022 11:15:30 +0100 Subject: [PATCH 025/135] minor tweaks --- blocks/FileItem/file-item.css | 7 ++++++- blocks/themes/lr-basic/config.css | 2 +- blocks/themes/lr-basic/theme.css | 2 +- 3 files changed, 8 insertions(+), 3 deletions(-) diff --git a/blocks/FileItem/file-item.css b/blocks/FileItem/file-item.css index d1a627e85..db1ed4db3 100644 --- a/blocks/FileItem/file-item.css +++ b/blocks/FileItem/file-item.css @@ -16,7 +16,7 @@ lr-file-item:last-of-type > .inner { } lr-file-item:hover > .inner { - background-color: var(--clr-background); + background-color: var(--clr-background-dark); } lr-file-item > .inner[focused] { @@ -51,6 +51,11 @@ lr-file-item .file-name-wrapper { padding-right: var(--gap-mid); padding-left: var(--gap-mid); overflow: hidden; + color: var(--clr-txt-light); + transition: color var(--transition-duration); +} + +lr-file-item:hover .file-name-wrapper { color: var(--clr-txt); } diff --git a/blocks/themes/lr-basic/config.css b/blocks/themes/lr-basic/config.css index 5ff525918..843a127a2 100644 --- a/blocks/themes/lr-basic/config.css +++ b/blocks/themes/lr-basic/config.css @@ -5,7 +5,7 @@ --cfg-multiple-min: 0; --cfg-multiple-max: 0; - --cfg-confirm-upload: 1; + --cfg-confirm-upload: 0; --cfg-img-only: 0; --cfg-accept: ''; --cfg-store: unset; diff --git a/blocks/themes/lr-basic/theme.css b/blocks/themes/lr-basic/theme.css index da7be0333..a809e13ea 100644 --- a/blocks/themes/lr-basic/theme.css +++ b/blocks/themes/lr-basic/theme.css @@ -31,7 +31,7 @@ --l-shadow: 0%; --opacity-normal: 0.6; - --opacity-hover: 0.8; + --opacity-hover: 0.9; --opacity-active: 1; --ui-size: 32px; From 1992398a1ed1e23255c2191e6dd6a8812e03e619 Mon Sep 17 00:00:00 2001 From: Anton Nesterov Date: Tue, 6 Dec 2022 17:55:09 +0100 Subject: [PATCH 026/135] camera ui rework --- blocks/CameraSource/CameraSource.js | 18 ++++------ blocks/CameraSource/camera-source.css | 52 +++++++++++++++++++++++++-- blocks/themes/lr-basic/theme.css | 16 ++++++--- 3 files changed, 67 insertions(+), 19 deletions(-) diff --git a/blocks/CameraSource/CameraSource.js b/blocks/CameraSource/CameraSource.js index 1df00f9cb..7877bb0b4 100644 --- a/blocks/CameraSource/CameraSource.js +++ b/blocks/CameraSource/CameraSource.js @@ -244,17 +244,13 @@ CameraSource.template = /* HTML */ ` l10n="camera-permissions-request" >
-
- -
- - + + -
`; diff --git a/blocks/CameraSource/camera-source.css b/blocks/CameraSource/camera-source.css index 960c8ef9c..f67db9133 100644 --- a/blocks/CameraSource/camera-source.css +++ b/blocks/CameraSource/camera-source.css @@ -3,9 +3,12 @@ lr-camera-source { display: flex; align-items: center; justify-content: center; - height: var(--modal-content-height-fill, 100%); + + /* height: var(--modal-content-height-fill, 100%); */ max-height: var(--modal-max-content-height); - padding-bottom: calc(2 * var(--gap-mid) + var(--ui-size)); + padding: var(--gap-mid); + padding-top: 0; + border-radius: var(--border-radius-element); } lr-camera-source video { @@ -15,6 +18,7 @@ lr-camera-source video { object-fit: contain; object-position: center center; background-color: var(--clr-background); + border-radius: var(--border-radius-element); } lr-camera-source .toolbar { @@ -24,13 +28,14 @@ lr-camera-source .toolbar { justify-content: space-between; width: 100%; padding: var(--gap-mid); - background-color: var(--clr-background); + background-color: var(--clr-background-light); } lr-camera-source .content { display: flex; justify-content: center; height: 100%; + overflow: hidden; } lr-camera-source .message-box { @@ -48,3 +53,44 @@ lr-camera-source .message-box button { color: var(--clr-btn-txt-primary); background-color: var(--clr-btn-bgr-primary); } + +lr-camera-source .shot-btn { + position: absolute; + bottom: var(--gap-max); + width: calc(var(--ui-size) * 1.8); + height: calc(var(--ui-size) * 1.8); + color: var(--clr-txt-mid); + background-color: var(--clr-background-light); + border-radius: 50%; + outline: 0px solid var(--clr-background-light); + opacity: 0.9; + transition: var(--transition-duration) ease; +} + +lr-camera-source .shot-btn:hover { + color: var(--clr-accent); + outline-width: 2px; + opacity: 1; +} + +lr-camera-source .shot-btn:active { + color: var(--clr-accent); + background-color: var(--clr-background-dark); + outline-width: 0px; + outline-color: var(--clr-background-dark); + opacity: 1; +} + +lr-camera-source .shot-btn[disabled] { + bottom: calc(var(--gap-max) * -1 - var(--gap-mid) - var(--ui-size) * 2); +} + +lr-camera-source .shot-btn lr-icon svg { + width: calc(var(--ui-size) / 1.5); + height: calc(var(--ui-size) / 1.5); +} + +lr-camera-source .camera-select { + position: absolute; + top: var(--gap-mid); +} diff --git a/blocks/themes/lr-basic/theme.css b/blocks/themes/lr-basic/theme.css index a809e13ea..b8c68fca9 100644 --- a/blocks/themes/lr-basic/theme.css +++ b/blocks/themes/lr-basic/theme.css @@ -57,8 +57,16 @@ --darkmode-minus: calc(1 + var(--darkmode) * -2); --clr-background: hsl(var(--h-background), var(--s-background), var(--l-background)); - --clr-background-dark: hsl(var(--h-background), var(--s-background), calc(var(--l-background) - 3%)); - --clr-background-light: hsl(var(--h-background), var(--s-background), calc(var(--l-background) + 3%)); + --clr-background-dark: hsl( + var(--h-background), + var(--s-background), + calc(var(--l-background) - 3% * var(--darkmode-minus)) + ); + --clr-background-light: hsl( + var(--h-background), + var(--s-background), + calc(var(--l-background) + 3% * var(--darkmode-minus)) + ); --clr-generic-file-icon: hsl( var(--h-background), @@ -112,15 +120,13 @@ --border-dashed: 1px dashed hsla(var(--h-foreground), var(--s-foreground), var(--l-foreground), calc(0.2 * var(--borders))); - --clr-curtain: hsla(var(--h-background), var(--s-background), calc(var(--l-background)), 40%); + --clr-curtain: hsla(var(--h-background), var(--s-background), calc(var(--l-background)), 60%); --hsl-shadow: var(--h-shadow), var(--s-shadow), var(--l-shadow); --modal-shadow: 0px 0px 1px hsla(var(--hsl-shadow), calc((0.3 + 0.65 * var(--darkmode)) * var(--shadows))), 0px 6px 20px hsla(var(--hsl-shadow), calc((0.1 + 0.4 * var(--darkmode)) * var(--shadows))); - /* Maybe move directly to the styles of the buttons? */ - --clr-btn-bgr-primary: var(--clr-accent); --clr-btn-bgr-primary-hover: hsl( var(--h-accent), From bacb8433d8190603312f5cf148abda01c24039e5 Mon Sep 17 00:00:00 2001 From: Anton Nesterov Date: Wed, 7 Dec 2022 10:04:55 +0100 Subject: [PATCH 027/135] adaptivity --- blocks/CameraSource/camera-source.css | 8 +++++++- blocks/Modal/modal.css | 2 +- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/blocks/CameraSource/camera-source.css b/blocks/CameraSource/camera-source.css index f67db9133..1cd0f5e08 100644 --- a/blocks/CameraSource/camera-source.css +++ b/blocks/CameraSource/camera-source.css @@ -11,13 +11,19 @@ lr-camera-source { border-radius: var(--border-radius-element); } +@media only screen and (max-width: 430px) { + lr-camera-source { + height: var(--modal-content-height-fill, 100%); + } +} + lr-camera-source video { display: block; max-width: 100%; max-height: 100%; object-fit: contain; object-position: center center; - background-color: var(--clr-background); + background-color: var(--clr-background-dark); border-radius: var(--border-radius-element); } diff --git a/blocks/Modal/modal.css b/blocks/Modal/modal.css index d422fcce6..fc4477c01 100644 --- a/blocks/Modal/modal.css +++ b/blocks/Modal/modal.css @@ -72,7 +72,7 @@ lr-modal > .dialog { transition: transform 0.4s; } -@media only screen and (max-width: 600px), only screen and (max-height: 800px) { +@media only screen and (max-width: 430px), only screen and (max-height: 600px) { lr-modal > .dialog > .content { height: var(--modal-max-content-height); } From a12e48d097f01c66ca1635e3a1170f5f62a6ad2a Mon Sep 17 00:00:00 2001 From: Anton Nesterov Date: Wed, 7 Dec 2022 10:21:53 +0100 Subject: [PATCH 028/135] few updates for minimal version --- solutions/file-uploader/minimal/index.css | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/solutions/file-uploader/minimal/index.css b/solutions/file-uploader/minimal/index.css index d01deab96..abf415ada 100644 --- a/solutions/file-uploader/minimal/index.css +++ b/solutions/file-uploader/minimal/index.css @@ -18,18 +18,18 @@ /* ICONS: */ :where(.lr-wgt-icons, .lr-wgt-common), :host { - --icon-close: 'M17.6569 7.75734c.3905-.39053.3905-1.02369 0-1.41421-.3906-.39053-1.0237-.39053-1.4143 0L12 10.5858 7.75736 6.34313c-.39053-.39053-1.02369-.39053-1.41421 0-.39053.39052-.39053 1.02368 0 1.41421L10.5858 12l-4.24266 4.2426c-.39052.3905-.39052 1.0237 0 1.4142.39053.3906 1.02369.3906 1.41422 0L12 13.4142l4.2426 4.2426c.3906.3906 1.0237.3906 1.4143 0 .3905-.3905.3905-1.0237 0-1.4142L13.4142 12l4.2427-4.24266Z'; + --icon-close: 'm4.60395 4.60395c.29289-.2929.76776-.2929 1.06066 0l6.33539 6.33535 6.3354-6.33535c.2929-.2929.7677-.2929 1.0606 0 .2929.29289.2929.76776 0 1.06066l-6.3353 6.33539 6.3353 6.3354c.2929.2929.2929.7677 0 1.0606s-.7677.2929-1.0606 0l-6.3354-6.3353-6.33539 6.3353c-.2929.2929-.76777.2929-1.06066 0-.2929-.2929-.2929-.7677 0-1.0606l6.33535-6.3354-6.33535-6.33539c-.2929-.2929-.2929-.76777 0-1.06066z'; --icon-info: 'M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z'; --icon-error: 'M13,13H11V7H13M13,17H11V15H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z'; --icon-remove: 'm6.35673 9.71429c-.76333 0-1.35856.66121-1.27865 1.42031l1.01504 9.6429c.06888.6543.62067 1.1511 1.27865 1.1511h9.25643c.658 0 1.2098-.4968 1.2787-1.1511l1.015-9.6429c.0799-.7591-.5153-1.42031-1.2786-1.42031zm.50041-4.5v.32142h-2.57143c-.71008 0-1.28571.57564-1.28571 1.28572s.57563 1.28571 1.28571 1.28571h15.42859c.7101 0 1.2857-.57563 1.2857-1.28571s-.5756-1.28572-1.2857-1.28572h-2.5714v-.32142c0-1.77521-1.4391-3.21429-3.2143-3.21429h-3.8572c-1.77517 0-3.21426 1.43908-3.21426 3.21429zm7.07146-.64286c.355 0 .6428.28782.6428.64286v.32142h-5.14283v-.32142c0-.35504.28782-.64286.64283-.64286z'; --icon-check: 'm12 22c5.5228 0 10-4.4772 10-10 0-5.52285-4.4772-10-10-10-5.52285 0-10 4.47715-10 10 0 5.5228 4.47715 10 10 10zm4.7071-11.4929-5.9071 5.9071-3.50711-3.5071c-.39052-.3905-.39052-1.0237 0-1.4142.39053-.3906 1.02369-.3906 1.41422 0l2.09289 2.0929 4.4929-4.49294c.3905-.39052 1.0237-.39052 1.4142 0 .3905.39053.3905 1.02374 0 1.41424z'; - --icon-remove-file: 'm12 22c5.5228 0 10-4.4772 10-10 0-5.52285-4.4772-10-10-10-5.52285 0-10 4.47715-10 10 0 5.5228 4.47715 10 10 10zm3.7071-13.70711c.3905.39053.3905 1.02369 0 1.41422l-2.2929 2.29289 2.2929 2.2929c.3905.3905.3905 1.0237 0 1.4142s-1.0237.3905-1.4142 0l-2.2929-2.2929-2.29289 2.2929c-.39053.3905-1.02369.3905-1.41422 0-.39052-.3905-.39052-1.0237 0-1.4142l2.29291-2.2929-2.2929-2.29289c-.39053-.39053-.39053-1.02369 0-1.41422.39052-.39052 1.02369-.39052 1.41421 0l2.29289 2.29291 2.2929-2.29291c.3905-.39052 1.0237-.39052 1.4142 0z'; + --icon-remove-file: 'm11.9554 3.29999c-.7875 0-1.5427.31281-2.0995.86963-.49303.49303-.79476 1.14159-.85742 1.83037h5.91382c-.0627-.68878-.3644-1.33734-.8575-1.83037-.5568-.55682-1.312-.86963-2.0994-.86963zm4.461 2.7c-.0656-1.08712-.5264-2.11657-1.3009-2.89103-.8381-.83812-1.9749-1.30897-3.1601-1.30897-1.1853 0-2.32204.47085-3.16016 1.30897-.77447.77446-1.23534 1.80391-1.30087 2.89103h-2.31966c-.03797 0-.07529.00282-.11174.00827h-1.98826c-.41422 0-.75.33578-.75.75 0 .41421.33578.75.75.75h1.35v11.84174c0 .7559.30026 1.4808.83474 2.0152.53448.5345 1.25939.8348 2.01526.8348h9.44999c.7559 0 1.4808-.3003 2.0153-.8348.5344-.5344.8347-1.2593.8347-2.0152v-11.84174h1.35c.4142 0 .75-.33579.75-.75 0-.41422-.3358-.75-.75-.75h-1.9883c-.0364-.00545-.0737-.00827-.1117-.00827zm-10.49169 1.50827v11.84174c0 .358.14223.7014.3954.9546.25318.2532.59656.3954.9546.3954h9.44999c.358 0 .7014-.1422.9546-.3954s.3954-.5966.3954-.9546v-11.84174z'; --icon-trash-file: var(--icon-remove); --icon-upload-error: var(--icon-error); --icon-badge-success: 'M10.5 18.2044L18.0992 10.0207C18.6629 9.41362 18.6277 8.46452 18.0207 7.90082C17.4136 7.33711 16.4645 7.37226 15.9008 7.97933L10.5 13.7956L8.0992 11.2101C7.53549 10.603 6.5864 10.5679 5.97933 11.1316C5.37226 11.6953 5.33711 12.6444 5.90082 13.2515L10.5 18.2044Z'; --icon-badge-error: 'm13.6 18.4c0 .8837-.7164 1.6-1.6 1.6-.8837 0-1.6-.7163-1.6-1.6s.7163-1.6 1.6-1.6c.8836 0 1.6.7163 1.6 1.6zm-1.6-13.9c.8284 0 1.5.67157 1.5 1.5v7c0 .8284-.6716 1.5-1.5 1.5s-1.5-.6716-1.5-1.5v-7c0-.82843.6716-1.5 1.5-1.5z'; - --icon-edit-file: 'M3.96371 14.4792c-.15098.151-.25578.3419-.3021.5504L2.52752 20.133c-.17826.8021.53735 1.5177 1.33951 1.3395l5.10341-1.1341c.20844-.0463.39934-.1511.55032-.3021l8.05064-8.0507-5.557-5.55702-8.05069 8.05062ZM13.4286 5.01437l5.557 5.55703 2.0212-2.02111c.6576-.65765.6576-1.72393 0-2.38159l-3.1755-3.17546c-.6577-.65765-1.7239-.65765-2.3816 0l-2.0211 2.02113Z'; - --icon-upload: 'm13 21.9506c5.0533-.5017 9-4.7653 9-9.9506 0-5.52285-4.4772-10-10-10-5.52285 0-10 4.47715-10 10 0 5.1853 3.94668 9.4489 9 9.9506v-11.5364l-2.79289 2.7929c-.39053.3906-1.02369.3906-1.41422 0-.39052-.3905-.39052-1.0237 0-1.4142l5.20711-5.20708 5.2071 5.20708c.3905.3905.3905 1.0237 0 1.4142-.3905.3906-1.0237.3906-1.4142 0l-2.7929-2.7929z'; + --icon-edit-file: 'm12.1109 6c.3469-1.69213 1.8444-2.96484 3.6391-2.96484s3.2922 1.27271 3.6391 2.96484h2.314c.4142 0 .75.33578.75.75 0 .41421-.3358.75-.75.75h-2.314c-.3469 1.69213-1.8444 2.9648-3.6391 2.9648s-3.2922-1.27267-3.6391-2.9648h-9.81402c-.41422 0-.75001-.33579-.75-.75 0-.41422.33578-.75.75-.75zm3.6391-1.46484c-1.2232 0-2.2148.99162-2.2148 2.21484s.9916 2.21484 2.2148 2.21484 2.2148-.99162 2.2148-2.21484-.9916-2.21484-2.2148-2.21484zm-11.1391 11.96484c.34691-1.6921 1.84437-2.9648 3.6391-2.9648 1.7947 0 3.2922 1.2727 3.6391 2.9648h9.814c.4142 0 .75.3358.75.75s-.3358.75-.75.75h-9.814c-.3469 1.6921-1.8444 2.9648-3.6391 2.9648-1.79473 0-3.29219-1.2727-3.6391-2.9648h-2.31402c-.41422 0-.75-.3358-.75-.75s.33578-.75.75-.75zm3.6391-1.4648c-1.22322 0-2.21484.9916-2.21484 2.2148s.99162 2.2148 2.21484 2.2148 2.2148-.9916 2.2148-2.2148-.99158-2.2148-2.2148-2.2148z'; + --icon-upload: 'm11.5014.392135c.2844-.253315.7134-.253315.9978 0l6.7037 5.971925c.3093.27552.3366.74961.0611 1.05889-.2755.30929-.7496.33666-1.0589.06113l-5.4553-4.85982v13.43864c0 .4142-.3358.75-.75.75s-.75-.3358-.75-.75v-13.43771l-5.45427 4.85889c-.30929.27553-.78337.24816-1.0589-.06113-.27553-.30928-.24816-.78337.06113-1.05889zm-10.644466 16.336765c.414216 0 .749996.3358.749996.75v4.9139h20.78567v-4.9139c0-.4142.3358-.75.75-.75.4143 0 .75.3358.75.75v5.6639c0 .4143-.3357.75-.75.75h-22.285666c-.414214 0-.75-.3357-.75-.75v-5.6639c0-.4142.335786-.75.75-.75z'; } /* L10N: */ @@ -84,8 +84,7 @@ lr-drop-area { color: var(--clr-accent); line-height: 140%; text-align: center; - border-color: var(--clr-accent-lightest); - border-style: solid; + border-color: var(--clr-accent-light); border-radius: var(--border-radius-frame); cursor: pointer; } @@ -104,10 +103,13 @@ lr-upload-list { padding: var(--gap-min); background-color: transparent; border: var(--border-dashed); - border-style: solid; border-radius: var(--border-radius-frame); } +lr-upload-list .files { + padding: 0; +} + lr-upload-list .toolbar { display: none; } From aadd1d3354cafa5c258dd3b6c84ad65e6c420239 Mon Sep 17 00:00:00 2001 From: Anton Nesterov Date: Wed, 7 Dec 2022 10:38:43 +0100 Subject: [PATCH 029/135] FileItem badge update --- blocks/FileItem/file-item.css | 15 +++++++++------ blocks/themes/lr-basic/theme.css | 6 +++--- 2 files changed, 12 insertions(+), 9 deletions(-) diff --git a/blocks/FileItem/file-item.css b/blocks/FileItem/file-item.css index db1ed4db3..b2c28bff9 100644 --- a/blocks/FileItem/file-item.css +++ b/blocks/FileItem/file-item.css @@ -87,19 +87,22 @@ lr-file-item button:hover { lr-file-item .badge { position: absolute; - top: calc(var(--ui-size) * -0.15); - right: calc(var(--ui-size) * -0.15); - display: none; - width: calc(var(--ui-size) * 0.42); - height: calc(var(--ui-size) * 0.42); + top: calc(var(--ui-size) * -0.13); + right: calc(var(--ui-size) * -0.13); + width: calc(var(--ui-size) * 0.44); + height: calc(var(--ui-size) * 0.44); color: var(--clr-background-light); background-color: var(--clr-txt); border-radius: 50%; + transform: scale(0.3); + opacity: 0; + transition: var(--transition-duration) ease; } lr-file-item > .inner[failed] .badge, lr-file-item > .inner[finished] .badge { - display: block; + transform: scale(1); + opacity: 1; } lr-file-item > .inner[finished] .badge { diff --git a/blocks/themes/lr-basic/theme.css b/blocks/themes/lr-basic/theme.css index b8c68fca9..d37656b4a 100644 --- a/blocks/themes/lr-basic/theme.css +++ b/blocks/themes/lr-basic/theme.css @@ -16,9 +16,9 @@ --s-accent: 100%; --l-accent: calc(50% - 5% * var(--darkmode)); - --h-confirm: 140; - --s-confirm: 60%; - --l-confirm: 60%; + --h-confirm: 137; + --s-confirm: 85%; + --l-confirm: 53%; --h-error: 358; --s-error: 100%; From 5fed60dc0f0b46d6e9a08fdb4c446ae8a6598a72 Mon Sep 17 00:00:00 2001 From: Anton Nesterov Date: Wed, 7 Dec 2022 11:30:55 +0100 Subject: [PATCH 030/135] generic file icon update --- blocks/svg-backgrounds/svg-backgrounds.js | 40 +++-------------------- blocks/themes/lr-basic/icons.css | 2 +- blocks/themes/lr-basic/theme.css | 8 ++--- 3 files changed, 7 insertions(+), 43 deletions(-) diff --git a/blocks/svg-backgrounds/svg-backgrounds.js b/blocks/svg-backgrounds/svg-backgrounds.js index f0e28ed2c..042fc17c9 100644 --- a/blocks/svg-backgrounds/svg-backgrounds.js +++ b/blocks/svg-backgrounds/svg-backgrounds.js @@ -36,42 +36,10 @@ export function strokesCssBg(color = 'rgba(0, 0, 0, .1)') { * @param {String} [color] * @returns {String} */ -export function fileCssBg(color = 'hsl(0, 0%, 100%)', width = 36, height = 36) { +export function fileCssBg(color = 'hsl(209, 21%, 65%)', width = 32, height = 32) { return createSvgBlobUrl(/*svg*/ ` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + `); } diff --git a/blocks/themes/lr-basic/icons.css b/blocks/themes/lr-basic/icons.css index da3fa14e1..915aa5753 100644 --- a/blocks/themes/lr-basic/icons.css +++ b/blocks/themes/lr-basic/icons.css @@ -1,7 +1,7 @@ :where(.lr-wgt-icons, .lr-wgt-common), :host { --icon-default: 'm11.5014.392135c.2844-.253315.7134-.253315.9978 0l6.7037 5.971925c.3093.27552.3366.74961.0611 1.05889-.2755.30929-.7496.33666-1.0589.06113l-5.4553-4.85982v13.43864c0 .4142-.3358.75-.75.75s-.75-.3358-.75-.75v-13.43771l-5.45427 4.85889c-.30929.27553-.78337.24816-1.0589-.06113-.27553-.30928-.24816-.78337.06113-1.05889zm-10.644466 16.336765c.414216 0 .749996.3358.749996.75v4.9139h20.78567v-4.9139c0-.4142.3358-.75.75-.75.4143 0 .75.3358.75.75v5.6639c0 .4143-.3357.75-.75.75h-22.285666c-.414214 0-.75-.3357-.75-.75v-5.6639c0-.4142.335786-.75.75-.75z'; - --icon-file: 'm13.3333 5.57143 4 3.85714h-4zm-6.66663-2.57143c-1.47266 0-2.66667 1.15121-2.66667 2.57143v12.85717c0 1.4202 1.19401 2.5714 2.66667 2.5714h10.66663c1.4727 0 2.6667-1.1512 2.6667-2.5714v-9.00003l-6.6667-6.42857z'; + --icon-file: 'm2.89453 1.2012c0-.473389.38376-.857145.85714-.857145h8.40003c.2273 0 .4453.090306.6061.251051l8.4 8.400004c.1607.16074.251.37876.251.60609v13.2c0 .4734-.3837.8571-.8571.8571h-16.80003c-.47338 0-.85714-.3837-.85714-.8571zm1.71429.85714v19.88576h15.08568v-11.4858h-7.5428c-.4734 0-.8572-.3837-.8572-.8571v-7.54286zm8.39998 1.21218 5.4736 5.47353-5.4736.00001z'; --icon-close: 'm4.60395 4.60395c.29289-.2929.76776-.2929 1.06066 0l6.33539 6.33535 6.3354-6.33535c.2929-.2929.7677-.2929 1.0606 0 .2929.29289.2929.76776 0 1.06066l-6.3353 6.33539 6.3353 6.3354c.2929.2929.2929.7677 0 1.0606s-.7677.2929-1.0606 0l-6.3354-6.3353-6.33539 6.3353c-.2929.2929-.76777.2929-1.06066 0-.2929-.2929-.2929-.7677 0-1.0606l6.33535-6.3354-6.33535-6.33539c-.2929-.2929-.2929-.76777 0-1.06066z'; --icon-info: 'M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z'; --icon-error: 'M13,13H11V7H13M13,17H11V15H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z'; diff --git a/blocks/themes/lr-basic/theme.css b/blocks/themes/lr-basic/theme.css index d37656b4a..0b017568f 100644 --- a/blocks/themes/lr-basic/theme.css +++ b/blocks/themes/lr-basic/theme.css @@ -68,12 +68,6 @@ calc(var(--l-background) + 3% * var(--darkmode-minus)) ); - --clr-generic-file-icon: hsl( - var(--h-background), - var(--s-background), - calc(var(--l-background) + 4% * var(--darkmode-minus)) - ); - --clr-accent: hsl(var(--h-accent), var(--s-accent), var(--l-accent)); --clr-accent-light: hsla(var(--h-accent), var(--s-accent), var(--l-accent), 30%); --clr-accent-lightest: hsla(var(--h-accent), var(--s-accent), var(--l-accent), 10%); @@ -102,6 +96,8 @@ --clr-shade-lv2: hsla(var(--h-foreground), var(--s-foreground), var(--l-foreground), 8%); --clr-shade-lv3: hsla(var(--h-foreground), var(--s-foreground), var(--l-foreground), 12%); + --clr-generic-file-icon: var(--clr-txt-lightest); + --border-light: 1px solid hsla( var(--h-foreground), From f2cd410f83ca043f7ebf0f9d4036a7756155d4de Mon Sep 17 00:00:00 2001 From: Anton Nesterov Date: Wed, 7 Dec 2022 11:48:49 +0100 Subject: [PATCH 031/135] unify small icon buttons --- blocks/FileItem/FileItem.js | 6 +++--- blocks/FileItem/file-item.css | 17 ++++++----------- blocks/Modal/Modal.js | 2 +- blocks/Modal/modal.css | 7 ------- blocks/themes/lr-basic/common.css | 21 +++++++++++++++++++++ 5 files changed, 31 insertions(+), 22 deletions(-) diff --git a/blocks/FileItem/FileItem.js b/blocks/FileItem/FileItem.js index 4a09197e3..48ae3a476 100644 --- a/blocks/FileItem/FileItem.js +++ b/blocks/FileItem/FileItem.js @@ -435,13 +435,13 @@ FileItem.template = /* HTML */ `
{{itemName}}
- - - .inner { position: relative; display: grid; grid-template-columns: min-content auto min-content min-content; + gap: var(--gap-min); margin-bottom: calc(var(--gap-mid) / 2); padding: var(--gap-mid); overflow: hidden; @@ -66,23 +67,17 @@ lr-file-item .file-name { text-overflow: ellipsis; } -lr-file-item button { - width: var(--ui-size); - height: var(--ui-size); - padding: 0; - color: var(--clr-txt-light); - background-color: transparent; - cursor: pointer; - opacity: var(--opacity-normal); - transition: opacity var(--transition-duration); +lr-file-item button.remove-btn, +lr-file-item button.edit-btn { + color: var(--clr-txt-lightest); } -lr-file-item .upload-btn { +lr-file-item button.upload-btn { display: none; } lr-file-item button:hover { - opacity: var(--opacity-hover); + color: var(--clr-txt-light); } lr-file-item .badge { diff --git a/blocks/Modal/Modal.js b/blocks/Modal/Modal.js index 814228615..a69f55e69 100644 --- a/blocks/Modal/Modal.js +++ b/blocks/Modal/Modal.js @@ -92,7 +92,7 @@ Modal.template = /* HTML */ `
-
diff --git a/blocks/Modal/modal.css b/blocks/Modal/modal.css index fc4477c01..5a13ec0ab 100644 --- a/blocks/Modal/modal.css +++ b/blocks/Modal/modal.css @@ -37,14 +37,7 @@ lr-modal button.close-btn { display: inline-flex; align-items: center; justify-content: center; - width: var(--ui-size); - height: var(--ui-size); - padding: 0; color: var(--clr-txt-mid); - background-color: transparent; - border: none; - cursor: pointer; - transition: background-color var(--transition-duration) ease; } lr-modal button.close-btn:hover { diff --git a/blocks/themes/lr-basic/common.css b/blocks/themes/lr-basic/common.css index 34a11c212..47f9412cc 100644 --- a/blocks/themes/lr-basic/common.css +++ b/blocks/themes/lr-basic/common.css @@ -84,6 +84,27 @@ background-color: var(--clr-btn-bgr-secondary-active); } +:where(.lr-wgt-theme, .lr-wgt-common) button.mini-btn, +:host button.mini-btn { + width: var(--ui-size); + height: var(--ui-size); + padding: 0; + background-color: transparent; + border: none; + cursor: pointer; + transition: var(--transition-duration) ease; +} + +:where(.lr-wgt-theme, .lr-wgt-common) button.mini-btn:hover, +:host button.mini-btn:hover { + background-color: var(--clr-shade-lv1); +} + +:where(.lr-wgt-theme, .lr-wgt-common) button.mini-btn:active, +:host button.mini-btn:active { + background-color: var(--clr-shade-lv2); +} + :where(.lr-wgt-theme, .lr-wgt-common) :is(button[disabled], button.primary-btn[disabled], button.secondary-btn[disabled]), :host :is(button[disabled], button.primary-btn[disabled], button.secondary-btn[disabled]) { From 1186e0b1ee7caac0849429cc49d6ce4947d89841 Mon Sep 17 00:00:00 2001 From: Anton Nesterov Date: Wed, 7 Dec 2022 12:03:39 +0100 Subject: [PATCH 032/135] minor tweaks --- blocks/Modal/modal.css | 2 +- blocks/UploadList/upload-list.css | 2 +- blocks/UrlSource/url-source.css | 3 ++- blocks/themes/lr-basic/theme.css | 1 + 4 files changed, 5 insertions(+), 3 deletions(-) diff --git a/blocks/Modal/modal.css b/blocks/Modal/modal.css index 5a13ec0ab..fb2c766d1 100644 --- a/blocks/Modal/modal.css +++ b/blocks/Modal/modal.css @@ -62,7 +62,7 @@ lr-modal > .dialog { border: 0; border-radius: var(--border-radius-frame); box-shadow: var(--modal-shadow); - transition: transform 0.4s; + transition: transform calc(var(--transition-duration) * 2); } @media only screen and (max-width: 430px), only screen and (max-height: 600px) { diff --git a/blocks/UploadList/upload-list.css b/blocks/UploadList/upload-list.css index dba07c0a9..413076694 100644 --- a/blocks/UploadList/upload-list.css +++ b/blocks/UploadList/upload-list.css @@ -20,7 +20,7 @@ lr-upload-list .files { lr-upload-list .toolbar { display: flex; - gap: var(--gap-mid); + gap: var(--gap-small); justify-content: space-between; padding: var(--gap-mid); background-color: var(--clr-background-light); diff --git a/blocks/UrlSource/url-source.css b/blocks/UrlSource/url-source.css index af562b6c8..6c77b283a 100644 --- a/blocks/UrlSource/url-source.css +++ b/blocks/UrlSource/url-source.css @@ -1,8 +1,9 @@ lr-url-source { display: grid; - grid-gap: var(--gap-mid); + grid-gap: var(--gap-small); grid-template-columns: 1fr min-content min-content; padding: var(--gap-mid); + padding-top: 0; } lr-url-source .url-input { diff --git a/blocks/themes/lr-basic/theme.css b/blocks/themes/lr-basic/theme.css index 0b017568f..84163dce9 100644 --- a/blocks/themes/lr-basic/theme.css +++ b/blocks/themes/lr-basic/theme.css @@ -37,6 +37,7 @@ --ui-size: 32px; --gap-min: 2px; + --gap-small: 4px; --gap-mid: 10px; --gap-max: 20px; --gap-table: 0px; From 8078dc290a1955834f395bd49f2358acd4f3dd6a Mon Sep 17 00:00:00 2001 From: Anton Nesterov Date: Wed, 7 Dec 2022 12:14:38 +0100 Subject: [PATCH 033/135] minor tweaks --- blocks/SimpleBtn/simple-btn.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/blocks/SimpleBtn/simple-btn.css b/blocks/SimpleBtn/simple-btn.css index 02800a9d7..99607f6b6 100644 --- a/blocks/SimpleBtn/simple-btn.css +++ b/blocks/SimpleBtn/simple-btn.css @@ -10,6 +10,11 @@ lr-simple-btn button { box-shadow: var(--shadow-btn-secondary); } +lr-simple-btn button lr-icon svg { + width: calc(var(--ui-size) * 0.4); + height: calc(var(--ui-size) * 0.4); +} + lr-simple-btn button:hover { background-color: var(--clr-btn-bgr-secondary-hover); } From 3376f1b16069ec5653f5c9f88a7f17bbf42272cc Mon Sep 17 00:00:00 2001 From: Anton Nesterov Date: Wed, 7 Dec 2022 12:47:39 +0100 Subject: [PATCH 034/135] unify DropArea styles --- blocks/DropArea/drop-area.css | 26 +++++++++++------------ solutions/file-uploader/minimal/index.css | 11 ++++------ 2 files changed, 17 insertions(+), 20 deletions(-) diff --git a/blocks/DropArea/drop-area.css b/blocks/DropArea/drop-area.css index 9f7084dfe..9b89c9098 100644 --- a/blocks/DropArea/drop-area.css +++ b/blocks/DropArea/drop-area.css @@ -6,8 +6,7 @@ lr-drop-area { overflow: hidden; border: var(--border-dashed); border-radius: var(--border-radius-frame); - transition: border-color var(--transition-duration) ease, background-color var(--transition-duration) ease, - opacity var(--transition-duration) ease; + transition: var(--transition-duration) ease; } lr-drop-area::after { @@ -22,28 +21,29 @@ lr-drop-area[ghost][drag-state='inactive'] { opacity: 0; } -lr-drop-area[drag-state='active'] { - background-color: var(--clr-accent-lightest); - opacity: 1; -} - -lr-drop-area[drag-state='near'] { - opacity: 1; +lr-drop-area[drag-state='active'], +lr-drop-area[drag-state='near'], +lr-drop-area[drag-state='over'], +lr-drop-area:hover, +lr-drop-area:hover::after, +lr-drop-area[big-icon]:hover::after { + color: var(--clr-accent); } +lr-drop-area[drag-state='active'], lr-drop-area[drag-state='near'], +lr-drop-area[drag-state='over'], lr-drop-area:hover { background-color: var(--clr-accent-lightest); border-color: var(--clr-accent-light); } -lr-drop-area:hover::after, -lr-drop-area[big-icon]:hover::after { - color: var(--clr-accent); +lr-drop-area[drag-state='active'], +lr-drop-area[drag-state='near'] { + opacity: 1; } lr-drop-area[drag-state='over'] { - background-color: var(--clr-accent-lightest); border-color: var(--clr-accent); opacity: 1; } diff --git a/solutions/file-uploader/minimal/index.css b/solutions/file-uploader/minimal/index.css index abf415ada..1145d81e3 100644 --- a/solutions/file-uploader/minimal/index.css +++ b/solutions/file-uploader/minimal/index.css @@ -37,6 +37,9 @@ :host { --l10n-drop-files-here: 'Drop file here'; + --l10n-choose-file: 'Choose file...'; + --l10n-choose-files: 'Choose files...'; + --l10n-upload-error: 'Upload error'; --l10n-validation-error: 'Validation error'; --l10n-no-files: 'No files selected'; @@ -79,20 +82,14 @@ lr-start-from { lr-drop-area { width: 100%; - height: calc(var(--ui-size) + var(--gap-mid) * 2 + var(--gap-min) * 4); + min-height: calc(var(--ui-size) + var(--gap-mid) * 2 + var(--gap-min) * 4); padding: 0; - color: var(--clr-accent); line-height: 140%; text-align: center; - border-color: var(--clr-accent-light); border-radius: var(--border-radius-frame); cursor: pointer; } -lr-drop-area[drag-state='inactive'] { - background-color: transparent; -} - lr-drop-area::after { content: ''; } From e3a23c174f971f7e2dd7f489bc2bddf13bac01e2 Mon Sep 17 00:00:00 2001 From: Anton Nesterov Date: Wed, 7 Dec 2022 12:48:02 +0100 Subject: [PATCH 035/135] minimal: l10n --- blocks/themes/lr-basic/l10n.css | 2 ++ solutions/file-uploader/minimal/FileUploaderMinimal.js | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/blocks/themes/lr-basic/l10n.css b/blocks/themes/lr-basic/l10n.css index 5f1f4a81e..3f1284e7c 100644 --- a/blocks/themes/lr-basic/l10n.css +++ b/blocks/themes/lr-basic/l10n.css @@ -2,6 +2,8 @@ :host { --l10n-upload-file: 'Upload file'; --l10n-upload-files: 'Upload files'; + --l10n-choose-file: 'Choose file'; + --l10n-choose-files: 'Choose files'; --l10n-drop-files-here: 'Drop files here'; --l10n-select-file-source: 'Select file source'; --l10n-selected: 'Selected'; diff --git a/solutions/file-uploader/minimal/FileUploaderMinimal.js b/solutions/file-uploader/minimal/FileUploaderMinimal.js index 3a07782d8..756ff5eeb 100644 --- a/solutions/file-uploader/minimal/FileUploaderMinimal.js +++ b/solutions/file-uploader/minimal/FileUploaderMinimal.js @@ -30,7 +30,7 @@ export class FileUploaderMinimal extends SolutionBlock { FileUploaderMinimal.template = /* HTML */ ` - + From c8234d39fe084763cd39971509087828839720ba Mon Sep 17 00:00:00 2001 From: Anton Nesterov Date: Wed, 7 Dec 2022 15:58:41 +0100 Subject: [PATCH 036/135] camera button, more contrast --- blocks/CameraSource/camera-source.css | 14 ++++++-------- blocks/themes/lr-basic/theme.css | 2 +- 2 files changed, 7 insertions(+), 9 deletions(-) diff --git a/blocks/CameraSource/camera-source.css b/blocks/CameraSource/camera-source.css index 1cd0f5e08..e932f2bc2 100644 --- a/blocks/CameraSource/camera-source.css +++ b/blocks/CameraSource/camera-source.css @@ -65,25 +65,23 @@ lr-camera-source .shot-btn { bottom: var(--gap-max); width: calc(var(--ui-size) * 1.8); height: calc(var(--ui-size) * 1.8); - color: var(--clr-txt-mid); - background-color: var(--clr-background-light); + color: var(--clr-background-light); + background-color: var(--clr-txt); border-radius: 50%; - outline: 0px solid var(--clr-background-light); + outline: 0px solid var(--clr-txt); opacity: 0.9; transition: var(--transition-duration) ease; } lr-camera-source .shot-btn:hover { - color: var(--clr-accent); outline-width: 2px; opacity: 1; } lr-camera-source .shot-btn:active { - color: var(--clr-accent); - background-color: var(--clr-background-dark); - outline-width: 0px; - outline-color: var(--clr-background-dark); + color: var(--clr-background-light); + outline-width: 2px; + outline-color: var(--clr-background-light); opacity: 1; } diff --git a/blocks/themes/lr-basic/theme.css b/blocks/themes/lr-basic/theme.css index 84163dce9..23a0c218c 100644 --- a/blocks/themes/lr-basic/theme.css +++ b/blocks/themes/lr-basic/theme.css @@ -6,7 +6,7 @@ --h-foreground: 208; --s-foreground: 4%; - --l-foreground: calc(15% + 70% * var(--darkmode)); + --l-foreground: calc(10% + 70% * var(--darkmode)); --h-background: 208; --s-background: 4%; From c5a22e4bcc611d08e169080e1d2b580f1e156cb7 Mon Sep 17 00:00:00 2001 From: Anton Nesterov Date: Fri, 16 Dec 2022 11:35:29 +0100 Subject: [PATCH 037/135] Local file > From device --- blocks/themes/lr-basic/l10n.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/themes/lr-basic/l10n.css b/blocks/themes/lr-basic/l10n.css index 3f1284e7c..3846017bf 100644 --- a/blocks/themes/lr-basic/l10n.css +++ b/blocks/themes/lr-basic/l10n.css @@ -30,7 +30,7 @@ --l10n-browse: 'Browse'; --l10n-not-uploaded-yet: 'Not uploaded yet...'; - --l10n-src-type-local: 'Local file'; + --l10n-src-type-local: 'From device'; --l10n-src-type-from-url: 'From URL'; --l10n-src-type-camera: 'Camera'; --l10n-src-type-draw: 'Draw'; From 83f52f9ae35efbbe3db8eb3895e543411a41ff0d Mon Sep 17 00:00:00 2001 From: Anton Nesterov Date: Fri, 16 Dec 2022 11:35:53 +0100 Subject: [PATCH 038/135] ActivityHeader init --- blocks/ActivityHeader/ActivityHeader.js | 18 ++++++++++++++++++ blocks/ActivityHeader/activity-header.css | 6 ++++++ 2 files changed, 24 insertions(+) create mode 100644 blocks/ActivityHeader/ActivityHeader.js create mode 100644 blocks/ActivityHeader/activity-header.css diff --git a/blocks/ActivityHeader/ActivityHeader.js b/blocks/ActivityHeader/ActivityHeader.js new file mode 100644 index 000000000..ce13a7dfc --- /dev/null +++ b/blocks/ActivityHeader/ActivityHeader.js @@ -0,0 +1,18 @@ +import { ActivityBlock } from '../../abstract/ActivityBlock.js'; + +export class ActivityHeader extends ActivityBlock {} + +ActivityHeader.template = /* HTML */ ` +
+ +
+ +
{{*activityCaption}}
+
+ +
+`; diff --git a/blocks/ActivityHeader/activity-header.css b/blocks/ActivityHeader/activity-header.css new file mode 100644 index 000000000..80ec8616d --- /dev/null +++ b/blocks/ActivityHeader/activity-header.css @@ -0,0 +1,6 @@ +lr-activity-header { + display: grid; + grid-template-columns: min-content auto min-content; + color: var(--clr-txt); + font-size: 1em; +} From 1827d9cb2a9793bf04e30f34df974887bf8900c1 Mon Sep 17 00:00:00 2001 From: Anton Nesterov Date: Fri, 16 Dec 2022 11:41:26 +0100 Subject: [PATCH 039/135] Revert "ActivityHeader init" This reverts commit 83f52f9ae35efbbe3db8eb3895e543411a41ff0d. --- blocks/ActivityHeader/ActivityHeader.js | 18 ------------------ blocks/ActivityHeader/activity-header.css | 6 ------ 2 files changed, 24 deletions(-) delete mode 100644 blocks/ActivityHeader/ActivityHeader.js delete mode 100644 blocks/ActivityHeader/activity-header.css diff --git a/blocks/ActivityHeader/ActivityHeader.js b/blocks/ActivityHeader/ActivityHeader.js deleted file mode 100644 index ce13a7dfc..000000000 --- a/blocks/ActivityHeader/ActivityHeader.js +++ /dev/null @@ -1,18 +0,0 @@ -import { ActivityBlock } from '../../abstract/ActivityBlock.js'; - -export class ActivityHeader extends ActivityBlock {} - -ActivityHeader.template = /* HTML */ ` -
- -
- -
{{*activityCaption}}
-
- -
-`; diff --git a/blocks/ActivityHeader/activity-header.css b/blocks/ActivityHeader/activity-header.css deleted file mode 100644 index 80ec8616d..000000000 --- a/blocks/ActivityHeader/activity-header.css +++ /dev/null @@ -1,6 +0,0 @@ -lr-activity-header { - display: grid; - grid-template-columns: min-content auto min-content; - color: var(--clr-txt); - font-size: 1em; -} From fb15e1d3ef722f8fadf64081275b3285ff1c0c67 Mon Sep 17 00:00:00 2001 From: Anton Nesterov Date: Fri, 16 Dec 2022 13:20:32 +0100 Subject: [PATCH 040/135] FileItem: add error message --- blocks/FileItem/FileItem.js | 1 + blocks/FileItem/file-item.css | 15 ++++++++++++++- 2 files changed, 15 insertions(+), 1 deletion(-) diff --git a/blocks/FileItem/FileItem.js b/blocks/FileItem/FileItem.js index 48ae3a476..75b3ccb9e 100644 --- a/blocks/FileItem/FileItem.js +++ b/blocks/FileItem/FileItem.js @@ -434,6 +434,7 @@ FileItem.template = /* HTML */ `
{{itemName}} + File is too large. Or some other really very long error text.
+ + `; diff --git a/blocks/UploadList/upload-list.css b/blocks/UploadList/upload-list.css index 413076694..d142b9762 100644 --- a/blocks/UploadList/upload-list.css +++ b/blocks/UploadList/upload-list.css @@ -29,3 +29,13 @@ lr-upload-list .toolbar { lr-upload-list .toolbar-spacer { flex: 1; } + +lr-upload-list lr-drop-area { + position: absolute; + top: 0; + left: 0; + width: calc(100% - var(--gap-mid) * 2); + height: calc(100% - var(--gap-mid) * 2); + margin: var(--gap-mid); + border-radius: var(--border-radius-element); +} diff --git a/blocks/themes/lr-basic/theme.css b/blocks/themes/lr-basic/theme.css index 1ed98fe46..4d61aa2dd 100644 --- a/blocks/themes/lr-basic/theme.css +++ b/blocks/themes/lr-basic/theme.css @@ -73,6 +73,12 @@ --clr-accent: hsl(var(--h-accent), var(--s-accent), var(--l-accent)); --clr-accent-light: hsla(var(--h-accent), var(--s-accent), var(--l-accent), 30%); --clr-accent-lightest: hsla(var(--h-accent), var(--s-accent), var(--l-accent), 10%); + --clr-accent-light-opaque: hsl(var(--h-accent), var(--s-accent), calc(var(--l-accent) + 45% * var(--darkmode-minus))); + --clr-accent-lightest-opaque: hsl( + var(--h-accent), + var(--s-accent), + calc(var(--l-accent) + 47% * var(--darkmode-minus)) + ); --clr-confirm: hsl(var(--h-confirm), var(--s-confirm), var(--l-confirm)); diff --git a/solutions/file-uploader/minimal/index.css b/solutions/file-uploader/minimal/index.css index 1145d81e3..49155d257 100644 --- a/solutions/file-uploader/minimal/index.css +++ b/solutions/file-uploader/minimal/index.css @@ -97,7 +97,7 @@ lr-drop-area::after { lr-upload-list { width: 100%; height: unset; - padding: var(--gap-min); + padding: var(--gap-small); background-color: transparent; border: var(--border-dashed); border-radius: var(--border-radius-frame); @@ -128,3 +128,10 @@ lr-file-item lr-progress-bar .progress { background-color: var(--clr-accent-lightest); border-radius: var(--border-radius-element); } + +lr-upload-list lr-drop-area { + width: 100%; + height: 100%; + margin: 0; + border-radius: var(--border-radius-frame); +} From 46f1371a85b40474752c1a32376d31333af350da Mon Sep 17 00:00:00 2001 From: Anton Nesterov Date: Tue, 20 Dec 2022 12:34:11 +0100 Subject: [PATCH 044/135] minimal mode: multiple files --- solutions/file-uploader/minimal/index.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/solutions/file-uploader/minimal/index.css b/solutions/file-uploader/minimal/index.css index 49155d257..465a75202 100644 --- a/solutions/file-uploader/minimal/index.css +++ b/solutions/file-uploader/minimal/index.css @@ -63,7 +63,7 @@ :where(.lr-wgt-common), :host { - --cfg-multiple: 0; + --cfg-multiple: 1; --cfg-confirm-upload: 0; --cfg-init-activity: 'start-from'; --cfg-done-activity: 'upload-list'; From de3b732c947cff4d12509dea0b56594faa61ed9e Mon Sep 17 00:00:00 2001 From: Anton Nesterov Date: Tue, 20 Dec 2022 13:00:32 +0100 Subject: [PATCH 045/135] minimal: Add more button --- solutions/file-uploader/minimal/index.css | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/solutions/file-uploader/minimal/index.css b/solutions/file-uploader/minimal/index.css index 465a75202..935a19fa8 100644 --- a/solutions/file-uploader/minimal/index.css +++ b/solutions/file-uploader/minimal/index.css @@ -40,6 +40,8 @@ --l10n-choose-file: 'Choose file...'; --l10n-choose-files: 'Choose files...'; + --l10n-add-more: 'Add more'; + --l10n-upload-error: 'Upload error'; --l10n-validation-error: 'Validation error'; --l10n-no-files: 'No files selected'; @@ -67,6 +69,7 @@ --cfg-confirm-upload: 0; --cfg-init-activity: 'start-from'; --cfg-done-activity: 'upload-list'; + --cfg-source-list: 'local'; position: relative; display: block; @@ -108,9 +111,21 @@ lr-upload-list .files { } lr-upload-list .toolbar { + display: block; + margin-top: var(--gap-small); + padding: 0; +} + +lr-upload-list .toolbar .cancel-btn, +lr-upload-list .toolbar .upload-btn, +lr-upload-list .toolbar .done-btn { display: none; } +lr-upload-list .toolbar .add-more-btn { + width: 100%; +} + lr-file-item { border-radius: var(--border-radius-element); } From 11ce983761d46fabcae0638c67567490ad810fd7 Mon Sep 17 00:00:00 2001 From: Anton Nesterov Date: Tue, 20 Dec 2022 17:32:54 +0100 Subject: [PATCH 046/135] add more button height --- solutions/file-uploader/minimal/index.css | 1 + 1 file changed, 1 insertion(+) diff --git a/solutions/file-uploader/minimal/index.css b/solutions/file-uploader/minimal/index.css index 935a19fa8..95653bd56 100644 --- a/solutions/file-uploader/minimal/index.css +++ b/solutions/file-uploader/minimal/index.css @@ -124,6 +124,7 @@ lr-upload-list .toolbar .done-btn { lr-upload-list .toolbar .add-more-btn { width: 100%; + height: calc(var(--ui-size) + var(--gap-mid) * 2); } lr-file-item { From 1a39b48aa6e34dedd8066edf16878c69cc78bba6 Mon Sep 17 00:00:00 2001 From: Anton Nesterov Date: Wed, 21 Dec 2022 11:37:04 +0100 Subject: [PATCH 047/135] icons done --- blocks/themes/lr-basic/icons.css | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/blocks/themes/lr-basic/icons.css b/blocks/themes/lr-basic/icons.css index 915aa5753..50bd82c0f 100644 --- a/blocks/themes/lr-basic/icons.css +++ b/blocks/themes/lr-basic/icons.css @@ -3,6 +3,8 @@ --icon-default: 'm11.5014.392135c.2844-.253315.7134-.253315.9978 0l6.7037 5.971925c.3093.27552.3366.74961.0611 1.05889-.2755.30929-.7496.33666-1.0589.06113l-5.4553-4.85982v13.43864c0 .4142-.3358.75-.75.75s-.75-.3358-.75-.75v-13.43771l-5.45427 4.85889c-.30929.27553-.78337.24816-1.0589-.06113-.27553-.30928-.24816-.78337.06113-1.05889zm-10.644466 16.336765c.414216 0 .749996.3358.749996.75v4.9139h20.78567v-4.9139c0-.4142.3358-.75.75-.75.4143 0 .75.3358.75.75v5.6639c0 .4143-.3357.75-.75.75h-22.285666c-.414214 0-.75-.3357-.75-.75v-5.6639c0-.4142.335786-.75.75-.75z'; --icon-file: 'm2.89453 1.2012c0-.473389.38376-.857145.85714-.857145h8.40003c.2273 0 .4453.090306.6061.251051l8.4 8.400004c.1607.16074.251.37876.251.60609v13.2c0 .4734-.3837.8571-.8571.8571h-16.80003c-.47338 0-.85714-.3837-.85714-.8571zm1.71429.85714v19.88576h15.08568v-11.4858h-7.5428c-.4734 0-.8572-.3837-.8572-.8571v-7.54286zm8.39998 1.21218 5.4736 5.47353-5.4736.00001z'; --icon-close: 'm4.60395 4.60395c.29289-.2929.76776-.2929 1.06066 0l6.33539 6.33535 6.3354-6.33535c.2929-.2929.7677-.2929 1.0606 0 .2929.29289.2929.76776 0 1.06066l-6.3353 6.33539 6.3353 6.3354c.2929.2929.2929.7677 0 1.0606s-.7677.2929-1.0606 0l-6.3354-6.3353-6.33539 6.3353c-.2929.2929-.76777.2929-1.06066 0-.2929-.2929-.2929-.7677 0-1.0606l6.33535-6.3354-6.33535-6.33539c-.2929-.2929-.2929-.76777 0-1.06066z'; + --icon-collapse: 'M3.11572 12C3.11572 11.5858 3.45151 11.25 3.86572 11.25H20.1343C20.5485 11.25 20.8843 11.5858 20.8843 12C20.8843 12.4142 20.5485 12.75 20.1343 12.75H3.86572C3.45151 12.75 3.11572 12.4142 3.11572 12Z'; + --icon-expand: 'M12.0001 8.33716L3.53033 16.8068C3.23743 17.0997 2.76256 17.0997 2.46967 16.8068C2.17678 16.5139 2.17678 16.0391 2.46967 15.7462L11.0753 7.14067C11.1943 7.01825 11.3365 6.92067 11.4936 6.8536C11.6537 6.78524 11.826 6.75 12.0001 6.75C12.1742 6.75 12.3465 6.78524 12.5066 6.8536C12.6637 6.92067 12.8059 7.01826 12.925 7.14068L21.5304 15.7462C21.8233 16.0391 21.8233 16.5139 21.5304 16.8068C21.2375 17.0997 20.7627 17.0997 20.4698 16.8068L12.0001 8.33716Z'; --icon-info: 'M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z'; --icon-error: 'M13,13H11V7H13M13,17H11V15H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z'; --icon-arrow-down: 'm11.5009 23.0302c.2844.2533.7135.2533.9978 0l9.2899-8.2758c.3092-.2756.3366-.7496.0611-1.0589s-.7496-.3367-1.0589-.0612l-8.0417 7.1639v-19.26834c0-.41421-.3358-.749997-.75-.749997s-.75.335787-.75.749997v19.26704l-8.04025-7.1626c-.30928-.2755-.78337-.2481-1.05889.0612-.27553.3093-.24816.7833.06112 1.0589z'; @@ -11,12 +13,13 @@ --icon-url: 'm19.1099 3.67026c-1.7092-1.70917-4.5776-1.68265-6.4076.14738l-2.2212 2.22122c-.2929.29289-.7678.29289-1.0607 0-.29289-.29289-.29289-.76777 0-1.06066l2.2212-2.22122c2.376-2.375966 6.1949-2.481407 8.5289-.14738l1.2202 1.22015c2.334 2.33403 2.2286 6.15294-.1474 8.52895l-2.2212 2.2212c-.2929.2929-.7678.2929-1.0607 0s-.2929-.7678 0-1.0607l2.2212-2.2212c1.8301-1.83003 1.8566-4.69842.1474-6.40759zm-3.3597 4.57991c.2929.29289.2929.76776 0 1.06066l-6.43918 6.43927c-.29289.2928-.76777.2928-1.06066 0-.29289-.2929-.29289-.7678 0-1.0607l6.43924-6.43923c.2929-.2929.7677-.2929 1.0606 0zm-9.71158 1.17048c.29289.29289.29289.76775 0 1.06065l-2.22123 2.2212c-1.83002 1.8301-1.85654 4.6984-.14737 6.4076l1.22015 1.2202c1.70917 1.7091 4.57756 1.6826 6.40763-.1474l2.2212-2.2212c.2929-.2929.7677-.2929 1.0606 0s.2929.7677 0 1.0606l-2.2212 2.2212c-2.37595 2.376-6.19486 2.4815-8.52889.1474l-1.22015-1.2201c-2.334031-2.3341-2.22859-6.153.14737-8.5289l2.22123-2.22125c.29289-.2929.76776-.2929 1.06066 0z'; --icon-camera: 'm7.65 2.55c.14164-.18885.36393-.3.6-.3h7.5c.2361 0 .4584.11115.6.3l2.025 2.7h2.625c1.6569 0 3 1.34315 3 3v10.5c0 1.6569-1.3431 3-3 3h-18c-1.65685 0-3-1.3431-3-3v-10.5c0-1.65685 1.34315-3 3-3h2.625zm.975 1.2-2.025 2.7c-.14164.18885-.36393.3-.6.3h-3c-.82843 0-1.5.67157-1.5 1.5v10.5c0 .8284.67157 1.5 1.5 1.5h18c.8284 0 1.5-.6716 1.5-1.5v-10.5c0-.82843-.6716-1.5-1.5-1.5h-3c-.2361 0-.4584-.11115-.6-.3l-2.025-2.7zm3.375 6c-1.864 0-3.375 1.511-3.375 3.375s1.511 3.375 3.375 3.375 3.375-1.511 3.375-3.375-1.511-3.375-3.375-3.375zm-4.875 3.375c0-2.6924 2.18261-4.875 4.875-4.875 2.6924 0 4.875 2.1826 4.875 4.875s-2.1826 4.875-4.875 4.875c-2.69239 0-4.875-2.1826-4.875-4.875z'; --icon-dots: 'M16,12A2,2 0 0,1 18,10A2,2 0 0,1 20,12A2,2 0 0,1 18,14A2,2 0 0,1 16,12M10,12A2,2 0 0,1 12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12M4,12A2,2 0 0,1 6,10A2,2 0 0,1 8,12A2,2 0 0,1 6,14A2,2 0 0,1 4,12Z'; - --icon-back: 'M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z'; + --icon-back: 'M20.251 12.0001C20.251 12.4143 19.9152 12.7501 19.501 12.7501L6.06696 12.7501L11.7872 18.6007C12.0768 18.8968 12.0715 19.3717 11.7753 19.6613C11.4791 19.9508 11.0043 19.9455 10.7147 19.6493L4.13648 12.9213C4.01578 12.8029 3.91947 12.662 3.85307 12.5065C3.78471 12.3464 3.74947 12.1741 3.74947 12C3.74947 11.8259 3.78471 11.6536 3.85307 11.4935C3.91947 11.338 4.01578 11.1971 4.13648 11.0787L10.7147 4.35068C11.0043 4.0545 11.4791 4.04916 11.7753 4.33873C12.0715 4.62831 12.0768 5.10315 11.7872 5.39932L6.06678 11.2501L19.501 11.2501C19.9152 11.2501 20.251 11.5859 20.251 12.0001Z'; --icon-remove: 'm6.35673 9.71429c-.76333 0-1.35856.66121-1.27865 1.42031l1.01504 9.6429c.06888.6543.62067 1.1511 1.27865 1.1511h9.25643c.658 0 1.2098-.4968 1.2787-1.1511l1.015-9.6429c.0799-.7591-.5153-1.42031-1.2786-1.42031zm.50041-4.5v.32142h-2.57143c-.71008 0-1.28571.57564-1.28571 1.28572s.57563 1.28571 1.28571 1.28571h15.42859c.7101 0 1.2857-.57563 1.2857-1.28571s-.5756-1.28572-1.2857-1.28572h-2.5714v-.32142c0-1.77521-1.4391-3.21429-3.2143-3.21429h-3.8572c-1.77517 0-3.21426 1.43908-3.21426 3.21429zm7.07146-.64286c.355 0 .6428.28782.6428.64286v.32142h-5.14283v-.32142c0-.35504.28782-.64286.64283-.64286z'; --icon-edit: 'M3.96371 14.4792c-.15098.151-.25578.3419-.3021.5504L2.52752 20.133c-.17826.8021.53735 1.5177 1.33951 1.3395l5.10341-1.1341c.20844-.0463.39934-.1511.55032-.3021l8.05064-8.0507-5.557-5.55702-8.05069 8.05062ZM13.4286 5.01437l5.557 5.55703 2.0212-2.02111c.6576-.65765.6576-1.72393 0-2.38159l-3.1755-3.17546c-.6577-.65765-1.7239-.65765-2.3816 0l-2.0211 2.02113Z'; --icon-detail: 'M5,3C3.89,3 3,3.89 3,5V19C3,20.11 3.89,21 5,21H19C20.11,21 21,20.11 21,19V5C21,3.89 20.11,3 19,3H5M5,5H19V19H5V5M7,7V9H17V7H7M7,11V13H17V11H7M7,15V17H14V15H7Z'; --icon-select: 'M7,10L12,15L17,10H7Z'; --icon-check: 'm12 22c5.5228 0 10-4.4772 10-10 0-5.52285-4.4772-10-10-10-5.52285 0-10 4.47715-10 10 0 5.5228 4.47715 10 10 10zm4.7071-11.4929-5.9071 5.9071-3.50711-3.5071c-.39052-.3905-.39052-1.0237 0-1.4142.39053-.3906 1.02369-.3906 1.41422 0l2.09289 2.0929 4.4929-4.49294c.3905-.39052 1.0237-.39052 1.4142 0 .3905.39053.3905 1.02374 0 1.41424z'; + --icon-add: 'M12.75 21C12.75 21.4142 12.4142 21.75 12 21.75C11.5858 21.75 11.25 21.4142 11.25 21V12.7499H3C2.58579 12.7499 2.25 12.4141 2.25 11.9999C2.25 11.5857 2.58579 11.2499 3 11.2499H11.25V3C11.25 2.58579 11.5858 2.25 12 2.25C12.4142 2.25 12.75 2.58579 12.75 3V11.2499H21C21.4142 11.2499 21.75 11.5857 21.75 11.9999C21.75 12.4141 21.4142 12.7499 21 12.7499H12.75V21Z'; --icon-edit-file: 'm12.1109 6c.3469-1.69213 1.8444-2.96484 3.6391-2.96484s3.2922 1.27271 3.6391 2.96484h2.314c.4142 0 .75.33578.75.75 0 .41421-.3358.75-.75.75h-2.314c-.3469 1.69213-1.8444 2.9648-3.6391 2.9648s-3.2922-1.27267-3.6391-2.9648h-9.81402c-.41422 0-.75001-.33579-.75-.75 0-.41422.33578-.75.75-.75zm3.6391-1.46484c-1.2232 0-2.2148.99162-2.2148 2.21484s.9916 2.21484 2.2148 2.21484 2.2148-.99162 2.2148-2.21484-.9916-2.21484-2.2148-2.21484zm-11.1391 11.96484c.34691-1.6921 1.84437-2.9648 3.6391-2.9648 1.7947 0 3.2922 1.2727 3.6391 2.9648h9.814c.4142 0 .75.3358.75.75s-.3358.75-.75.75h-9.814c-.3469 1.6921-1.8444 2.9648-3.6391 2.9648-1.79473 0-3.29219-1.2727-3.6391-2.9648h-2.31402c-.41422 0-.75-.3358-.75-.75s.33578-.75.75-.75zm3.6391-1.4648c-1.22322 0-2.21484.9916-2.21484 2.2148s.99162 2.2148 2.21484 2.2148 2.2148-.9916 2.2148-2.2148-.99158-2.2148-2.2148-2.2148z'; --icon-remove-file: 'm11.9554 3.29999c-.7875 0-1.5427.31281-2.0995.86963-.49303.49303-.79476 1.14159-.85742 1.83037h5.91382c-.0627-.68878-.3644-1.33734-.8575-1.83037-.5568-.55682-1.312-.86963-2.0994-.86963zm4.461 2.7c-.0656-1.08712-.5264-2.11657-1.3009-2.89103-.8381-.83812-1.9749-1.30897-3.1601-1.30897-1.1853 0-2.32204.47085-3.16016 1.30897-.77447.77446-1.23534 1.80391-1.30087 2.89103h-2.31966c-.03797 0-.07529.00282-.11174.00827h-1.98826c-.41422 0-.75.33578-.75.75 0 .41421.33578.75.75.75h1.35v11.84174c0 .7559.30026 1.4808.83474 2.0152.53448.5345 1.25939.8348 2.01526.8348h9.44999c.7559 0 1.4808-.3003 2.0153-.8348.5344-.5344.8347-1.2593.8347-2.0152v-11.84174h1.35c.4142 0 .75-.33579.75-.75 0-.41422-.3358-.75-.75-.75h-1.9883c-.0364-.00545-.0737-.00827-.1117-.00827zm-10.49169 1.50827v11.84174c0 .358.14223.7014.3954.9546.25318.2532.59656.3954.9546.3954h9.44999c.358 0 .7014-.1422.9546-.3954s.3954-.5966.3954-.9546v-11.84174z'; --icon-trash-file: var(--icon-remove); @@ -25,7 +28,9 @@ --icon-fullscreen-exit: 'M14,14H19V16H16V19H14V14M5,14H10V19H8V16H5V14M8,5H10V10H5V8H8V5M19,8V10H14V5H16V8H19Z'; --icon-badge-success: 'M10.5 18.2044L18.0992 10.0207C18.6629 9.41362 18.6277 8.46452 18.0207 7.90082C17.4136 7.33711 16.4645 7.37226 15.9008 7.97933L10.5 13.7956L8.0992 11.2101C7.53549 10.603 6.5864 10.5679 5.97933 11.1316C5.37226 11.6953 5.33711 12.6444 5.90082 13.2515L10.5 18.2044Z'; --icon-badge-error: 'm13.6 18.4c0 .8837-.7164 1.6-1.6 1.6-.8837 0-1.6-.7163-1.6-1.6s.7163-1.6 1.6-1.6c.8836 0 1.6.7163 1.6 1.6zm-1.6-13.9c.8284 0 1.5.67157 1.5 1.5v7c0 .8284-.6716 1.5-1.5 1.5s-1.5-.6716-1.5-1.5v-7c0-.82843.6716-1.5 1.5-1.5z'; + --icon-about: 'M11.152 14.12v.1h1.523v-.1c.007-.409.053-.752.138-1.028.086-.277.22-.517.405-.72.188-.202.434-.397.735-.586.32-.191.593-.412.82-.66.232-.249.41-.531.533-.847.125-.32.187-.678.187-1.076 0-.579-.137-1.085-.41-1.518a2.717 2.717 0 0 0-1.14-1.018c-.49-.245-1.062-.367-1.715-.367-.597 0-1.142.114-1.636.34-.49.228-.884.564-1.182 1.008-.299.44-.46.98-.485 1.619h1.62c.024-.377.118-.684.282-.922.163-.241.369-.419.617-.532.25-.114.51-.17.784-.17.301 0 .575.063.82.191.248.124.447.302.597.533.149.23.223.504.223.82 0 .263-.05.502-.149.72-.1.216-.234.408-.405.574a3.48 3.48 0 0 1-.575.453c-.33.199-.613.42-.847.66-.234.242-.415.558-.543.949-.125.39-.19.916-.197 1.577ZM11.205 17.15c.21.206.46.31.75.31.196 0 .374-.049.534-.144.16-.096.287-.224.383-.384.1-.163.15-.343.15-.538a1 1 0 0 0-.32-.746 1.019 1.019 0 0 0-.746-.314c-.291 0-.542.105-.751.314-.21.206-.314.455-.314.746 0 .295.104.547.314.756ZM24 12c0 6.627-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0s12 5.373 12 12Zm-1.5 0c0 5.799-4.701 10.5-10.5 10.5S1.5 17.799 1.5 12 6.201 1.5 12 1.5 22.5 6.201 22.5 12Z'; + /* editor section is to be removed */ --icon-edit-rotate: 'M16.89,15.5L18.31,16.89C19.21,15.73 19.76,14.39 19.93,13H17.91C17.77,13.87 17.43,14.72 16.89,15.5M13,17.9V19.92C14.39,19.75 15.74,19.21 16.9,18.31L15.46,16.87C14.71,17.41 13.87,17.76 13,17.9M19.93,11C19.76,9.61 19.21,8.27 18.31,7.11L16.89,8.53C17.43,9.28 17.77,10.13 17.91,11M15.55,5.55L11,1V4.07C7.06,4.56 4,7.92 4,12C4,16.08 7.05,19.44 11,19.93V17.91C8.16,17.43 6,14.97 6,12C6,9.03 8.16,6.57 11,6.09V10L15.55,5.55Z'; --icon-edit-flip-v: 'M3 15V17H5V15M15 19V21H17V19M19 3H5C3.9 3 3 3.9 3 5V9H5V5H19V9H21V5C21 3.9 20.1 3 19 3M21 19H19V21C20.1 21 21 20.1 21 19M1 11V13H23V11M7 19V21H9V19M19 15V17H21V15M11 19V21H13V19M3 19C3 20.1 3.9 21 5 21V19Z'; --icon-edit-flip-h: 'M15 21H17V19H15M19 9H21V7H19M3 5V19C3 20.1 3.9 21 5 21H9V19H5V5H9V3H5C3.9 3 3 3.9 3 5M19 3V5H21C21 3.9 20.1 3 19 3M11 23H13V1H11M19 17H21V15H19M15 5H17V3H15M19 13H21V11H19M19 21C20.1 21 21 20.1 21 19H19Z'; @@ -39,11 +44,11 @@ --icon-edit-color: 'M17.5,12A1.5,1.5 0 0,1 16,10.5A1.5,1.5 0 0,1 17.5,9A1.5,1.5 0 0,1 19,10.5A1.5,1.5 0 0,1 17.5,12M14.5,8A1.5,1.5 0 0,1 13,6.5A1.5,1.5 0 0,1 14.5,5A1.5,1.5 0 0,1 16,6.5A1.5,1.5 0 0,1 14.5,8M9.5,8A1.5,1.5 0 0,1 8,6.5A1.5,1.5 0 0,1 9.5,5A1.5,1.5 0 0,1 11,6.5A1.5,1.5 0 0,1 9.5,8M6.5,12A1.5,1.5 0 0,1 5,10.5A1.5,1.5 0 0,1 6.5,9A1.5,1.5 0 0,1 8,10.5A1.5,1.5 0 0,1 6.5,12M12,3A9,9 0 0,0 3,12A9,9 0 0,0 12,21A1.5,1.5 0 0,0 13.5,19.5C13.5,19.11 13.35,18.76 13.11,18.5C12.88,18.23 12.73,17.88 12.73,17.5A1.5,1.5 0 0,1 14.23,16H16A5,5 0 0,0 21,11C21,6.58 16.97,3 12,3Z'; --icon-edit-resize: 'M10.59,12L14.59,8H11V6H18V13H16V9.41L12,13.41V16H20V4H8V12H10.59M22,2V18H12V22H2V12H6V2H22M10,14H4V20H10V14Z'; - --icon-external-source-placeholder: 'M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z'; + --icon-external-source-placeholder: 'M6.341 3.27a10.5 10.5 0 0 1 5.834-1.77.75.75 0 0 0 0-1.5 12 12 0 1 0 12 12 .75.75 0 0 0-1.5 0A10.5 10.5 0 1 1 6.34 3.27Zm14.145 1.48a.75.75 0 1 0-1.06-1.062L9.925 13.19V7.95a.75.75 0 1 0-1.5 0V15c0 .414.336.75.75.75h7.05a.75.75 0 0 0 0-1.5h-5.24l9.501-9.5Z'; --icon-facebook: 'm12 1.5c-5.79901 0-10.5 4.70099-10.5 10.5 0 4.9427 3.41586 9.0888 8.01562 10.2045v-6.1086h-2.13281c-.41421 0-.75-.3358-.75-.75v-3.2812c0-.4142.33579-.75.75-.75h2.13281v-1.92189c0-.95748.22571-2.51089 1.38068-3.6497 1.1934-1.17674 3.1742-1.71859 6.2536-1.05619.3455.07433.5923.3798.5923.73323v2.75395c0 .41422-.3358.75-.75.75-.6917 0-1.2029.02567-1.5844.0819-.3865.05694-.5781.13711-.675.20223-.1087.07303-.2367.20457-.2367 1.02837v1.0781h2.3906c.2193 0 .4275.0959.57.2626.1425.1666.205.3872.1709.6038l-.5156 3.2813c-.0573.3647-.3716.6335-.7409.6335h-1.875v6.1058c4.5939-1.1198 8.0039-5.2631 8.0039-10.2017 0-5.79901-4.701-10.5-10.5-10.5zm-12 10.5c0-6.62744 5.37256-12 12-12 6.6274 0 12 5.37256 12 12 0 5.9946-4.3948 10.9614-10.1384 11.8564-.2165.0337-.4369-.0289-.6033-.1714s-.2622-.3506-.2622-.5697v-7.7694c0-.4142.3358-.75.75-.75h1.9836l.28-1.7812h-2.2636c-.4142 0-.75-.3358-.75-.75v-1.8281c0-.82854.0888-1.72825.9-2.27338.3631-.24396.8072-.36961 1.293-.4412.3081-.0454.6583-.07238 1.0531-.08618v-1.39629c-2.4096-.40504-3.6447.13262-4.2928.77165-.7376.72735-.9338 1.79299-.9338 2.58161v2.67189c0 .4142-.3358.75-.75.75h-2.13279v1.7812h2.13279c.4142 0 .75.3358.75.75v7.7712c0 .219-.0956.427-.2619.5695-.1662.1424-.3864.2052-.6028.1717-5.74968-.8898-10.1509-5.8593-10.1509-11.8583z'; --icon-dropbox: 'm6.01895 1.92072c.24583-.15659.56012-.15658.80593.00003l5.17512 3.29711 5.1761-3.29714c.2458-.15659.5601-.15658.8059.00003l5.5772 3.55326c.2162.13771.347.37625.347.63253 0 .25629-.1308.49483-.347.63254l-4.574 2.91414 4.574 2.91418c.2162.1377.347.3762.347.6325s-.1308.4948-.347.6325l-5.5772 3.5533c-.2458.1566-.5601.1566-.8059 0l-5.1761-3.2971-5.17512 3.2971c-.24581.1566-.5601.1566-.80593 0l-5.578142-3.5532c-.216172-.1377-.347058-.3763-.347058-.6326s.130886-.4949.347058-.6326l4.574772-2.91408-4.574772-2.91411c-.216172-.1377-.347058-.37626-.347058-.63257 0-.2563.130886-.49486.347058-.63256zm.40291 8.61518-4.18213 2.664 4.18213 2.664 4.18144-2.664zm6.97504 2.664 4.1821 2.664 4.1814-2.664-4.1814-2.664zm2.7758-3.54668-4.1727 2.65798-4.17196-2.65798 4.17196-2.658zm1.4063-.88268 4.1814-2.664-4.1814-2.664-4.1821 2.664zm-6.9757-2.664-4.18144-2.664-4.18213 2.664 4.18213 2.664zm-4.81262 12.43736c.22254-.3494.68615-.4522 1.03551-.2297l5.17521 3.2966 5.1742-3.2965c.3493-.2226.813-.1198 1.0355.2295.2226.3494.1198.813-.2295 1.0355l-5.5772 3.5533c-.2458.1566-.5601.1566-.8059 0l-5.57819-3.5532c-.34936-.2226-.45216-.6862-.22963-1.0355z'; --icon-gdrive: 'm7.73633 1.81806c.13459-.22968.38086-.37079.64707-.37079h7.587c.2718 0 .5223.14697.6548.38419l7.2327 12.94554c.1281.2293.1269.5089-.0031.7371l-3.7935 6.6594c-.1334.2342-.3822.3788-.6517.3788l-14.81918.0004c-.26952 0-.51831-.1446-.65171-.3788l-3.793526-6.6598c-.1327095-.233-.130949-.5191.004617-.7504zm.63943 1.87562-6.71271 11.45452 2.93022 5.1443 6.65493-11.58056zm3.73574 6.52652-2.39793 4.1727 4.78633.0001zm4.1168 4.1729 5.6967-.0002-6.3946-11.44563h-5.85354zm5.6844 1.4998h-13.06111l-2.96515 5.1598 13.08726-.0004z'; - --icon-gphotos: 'M21.35,11.1H12.18V13.83H18.69C18.36,17.64 15.19,19.27 12.19,19.27C8.36,19.27 5,16.25 5,12C5,7.9 8.2,4.73 12.2,4.73C15.29,4.73 17.1,6.7 17.1,6.7L19,4.72C19,4.72 16.56,2 12.1,2C6.42,2 2.03,6.8 2.03,12C2.03,17.05 6.16,22 12.25,22C17.6,22 21.5,18.33 21.5,12.91C21.5,11.76 21.35,11.1 21.35,11.1V11.1Z'; + --icon-gphotos: 'M12.51 0c-.702 0-1.272.57-1.272 1.273V7.35A6.381 6.381 0 0 0 0 11.489c0 .703.57 1.273 1.273 1.273H7.35A6.381 6.381 0 0 0 11.488 24c.704 0 1.274-.57 1.274-1.273V16.65A6.381 6.381 0 0 0 24 12.51c0-.703-.57-1.273-1.273-1.273H16.65A6.381 6.381 0 0 0 12.511 0Zm.252 11.232V1.53a4.857 4.857 0 0 1 0 9.702Zm-1.53.006H1.53a4.857 4.857 0 0 1 9.702 0Zm1.536 1.524a4.857 4.857 0 0 0 9.702 0h-9.702Zm-6.136 4.857c0-2.598 2.04-4.72 4.606-4.85v9.7a4.857 4.857 0 0 1-4.606-4.85Z'; --icon-instagram: 'M6.225 12a5.775 5.775 0 1 1 11.55 0 5.775 5.775 0 0 1-11.55 0zM12 7.725a4.275 4.275 0 1 0 0 8.55 4.275 4.275 0 0 0 0-8.55zM18.425 6.975a1.4 1.4 0 1 0 0-2.8 1.4 1.4 0 0 0 0 2.8zM11.958.175h.084c2.152 0 3.823 0 5.152.132 1.35.134 2.427.41 3.362 1.013a7.15 7.15 0 0 1 2.124 2.124c.604.935.88 2.012 1.013 3.362.132 1.329.132 3 .132 5.152v.084c0 2.152 0 3.823-.132 5.152-.134 1.35-.41 2.427-1.013 3.362a7.15 7.15 0 0 1-2.124 2.124c-.935.604-2.012.88-3.362 1.013-1.329.132-3 .132-5.152.132h-.084c-2.152 0-3.824 0-5.153-.132-1.35-.134-2.427-.409-3.36-1.013a7.15 7.15 0 0 1-2.125-2.124C.716 19.62.44 18.544.307 17.194c-.132-1.329-.132-3-.132-5.152v-.084c0-2.152 0-3.823.132-5.152.133-1.35.409-2.427 1.013-3.362A7.15 7.15 0 0 1 3.444 1.32C4.378.716 5.456.44 6.805.307c1.33-.132 3-.132 5.153-.132zM6.953 1.799c-1.234.123-2.043.36-2.695.78A5.65 5.65 0 0 0 2.58 4.26c-.42.65-.657 1.46-.78 2.695C1.676 8.2 1.675 9.797 1.675 12c0 2.203 0 3.8.124 5.046.123 1.235.36 2.044.78 2.696a5.649 5.649 0 0 0 1.68 1.678c.65.421 1.46.658 2.694.78 1.247.124 2.844.125 5.047.125s3.8 0 5.046-.124c1.235-.123 2.044-.36 2.695-.78a5.648 5.648 0 0 0 1.68-1.68c.42-.65.657-1.46.78-2.694.123-1.247.124-2.844.124-5.047s-.001-3.8-.125-5.046c-.122-1.235-.359-2.044-.78-2.695a5.65 5.65 0 0 0-1.679-1.68c-.651-.42-1.46-.657-2.695-.78-1.246-.123-2.843-.124-5.046-.124-2.203 0-3.8 0-5.047.124z'; --icon-flickr: var(--icon-external-source-placeholder); --icon-vk: var(--icon-external-source-placeholder); From 6a9b10e7c47da033d0f2420947d3d85d53d9707b Mon Sep 17 00:00:00 2001 From: Anton Nesterov Date: Wed, 21 Dec 2022 11:48:32 +0100 Subject: [PATCH 048/135] error display fix --- blocks/FileItem/file-item.css | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/blocks/FileItem/file-item.css b/blocks/FileItem/file-item.css index af80dfe4e..7fe7594e5 100644 --- a/blocks/FileItem/file-item.css +++ b/blocks/FileItem/file-item.css @@ -3,7 +3,7 @@ lr-file-item > .inner { display: grid; grid-template-columns: min-content auto min-content min-content; gap: var(--gap-min); - height: calc(var(--gap-mid) * 2 + var(--ui-size)); + align-items: center; margin-bottom: var(--gap-small); padding: var(--gap-mid); overflow: hidden; @@ -61,8 +61,7 @@ lr-file-item:hover .file-name-wrapper { color: var(--clr-txt); } -lr-file-item .file-name, -lr-file-item .file-error { +lr-file-item .file-name { max-width: 100%; overflow: hidden; white-space: nowrap; From d330529ec1c4141f579aea9fc0006fb102417a69 Mon Sep 17 00:00:00 2001 From: Anton Nesterov Date: Wed, 21 Dec 2022 12:41:35 +0100 Subject: [PATCH 049/135] CameraSource width --- blocks/CameraSource/camera-source.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/blocks/CameraSource/camera-source.css b/blocks/CameraSource/camera-source.css index e932f2bc2..fcc276b8f 100644 --- a/blocks/CameraSource/camera-source.css +++ b/blocks/CameraSource/camera-source.css @@ -3,8 +3,7 @@ lr-camera-source { display: flex; align-items: center; justify-content: center; - - /* height: var(--modal-content-height-fill, 100%); */ + width: min(calc(var(--modal-max-w) - var(--gap-mid) * 2), calc(100vw - var(--gap-mid) * 2)); max-height: var(--modal-max-content-height); padding: var(--gap-mid); padding-top: 0; @@ -13,6 +12,7 @@ lr-camera-source { @media only screen and (max-width: 430px) { lr-camera-source { + width: calc(100vw - var(--gap-mid) * 2); height: var(--modal-content-height-fill, 100%); } } @@ -40,6 +40,7 @@ lr-camera-source .toolbar { lr-camera-source .content { display: flex; justify-content: center; + width: 100%; height: 100%; overflow: hidden; } From 2617559551324257727b669812d4c36e72c16e47 Mon Sep 17 00:00:00 2001 From: Anton Nesterov Date: Wed, 21 Dec 2022 14:14:24 +0100 Subject: [PATCH 050/135] Add more button update --- blocks/UploadList/UploadList.js | 5 +++-- blocks/UploadList/upload-list.css | 4 ++++ solutions/file-uploader/minimal/index.css | 14 ++++++++++++++ 3 files changed, 21 insertions(+), 2 deletions(-) diff --git a/blocks/UploadList/UploadList.js b/blocks/UploadList/UploadList.js index b20e7b086..93ec0d6d0 100644 --- a/blocks/UploadList/UploadList.js +++ b/blocks/UploadList/UploadList.js @@ -218,8 +218,9 @@ UploadList.template = /* HTML */ ` type="button" class="add-more-btn secondary-btn" set="onclick: onAdd; @disabled: !addMoreBtnEnabled; @hidden: !addMoreBtnVisible" - l10n="add-more" - > + > + +
diff --git a/blocks/StartFrom/StartFrom.js b/blocks/StartFrom/StartFrom.js index cab06f4c9..de23f8486 100644 --- a/blocks/StartFrom/StartFrom.js +++ b/blocks/StartFrom/StartFrom.js @@ -17,7 +17,6 @@ export class StartFrom extends ActivityBlock { true ); }, - onClose: () => this.historyBack(), }); } } diff --git a/blocks/UploadDetails/UploadDetails.js b/blocks/UploadDetails/UploadDetails.js index 29cc79afa..8a654341b 100644 --- a/blocks/UploadDetails/UploadDetails.js +++ b/blocks/UploadDetails/UploadDetails.js @@ -63,7 +63,6 @@ export class UploadDetails extends UploaderBlock { onDeactivate: () => { this.ref.filePreview.clear(); }, - onClose: () => this.historyBack(), }); /** @type {import('../FilePreview/FilePreview.js').FilePreview} */ this.sub('*focusedEntry', (/** @type {import('../../abstract/TypedData.js').TypedData} */ entry) => { diff --git a/blocks/UrlSource/UrlSource.js b/blocks/UrlSource/UrlSource.js index 2395e1dc2..5299c8f0a 100644 --- a/blocks/UrlSource/UrlSource.js +++ b/blocks/UrlSource/UrlSource.js @@ -33,7 +33,6 @@ export class UrlSource extends UploaderBlock { '*modalHeaderHidden': false, }); }, - onClose: () => this.historyBack(), }); } } From af2b0b6f9ed900191faec54bfbec91d9282b0c6b Mon Sep 17 00:00:00 2001 From: nd0ut Date: Mon, 26 Dec 2022 21:00:34 +0400 Subject: [PATCH 064/135] chore: remove activity icon and caption components from the modal templates --- assets/htm/blocks-demo.htm | 2 -- blocks/README.md | 2 -- blocks/test/raw-build.htm | 2 -- blocks/test/raw.htm | 2 -- blocks/test/wrapped.htm | 2 -- solutions/file-uploader/regular/FileUploaderRegular.js | 2 -- 6 files changed, 12 deletions(-) diff --git a/assets/htm/blocks-demo.htm b/assets/htm/blocks-demo.htm index 51d7de0e4..eb248f51e 100644 --- a/assets/htm/blocks-demo.htm +++ b/assets/htm/blocks-demo.htm @@ -21,8 +21,6 @@

🎬 Live Demo (regular case)

- - diff --git a/blocks/README.md b/blocks/README.md index 471796056..6c7e54c15 100644 --- a/blocks/README.md +++ b/blocks/README.md @@ -126,8 +126,6 @@ Block components can be used separately or in combinations. You can combine them - - diff --git a/blocks/test/raw-build.htm b/blocks/test/raw-build.htm index e51c42f0f..1dee98f1a 100644 --- a/blocks/test/raw-build.htm +++ b/blocks/test/raw-build.htm @@ -13,8 +13,6 @@ - - diff --git a/blocks/test/raw.htm b/blocks/test/raw.htm index c6b241294..fc47dac1b 100644 --- a/blocks/test/raw.htm +++ b/blocks/test/raw.htm @@ -34,8 +34,6 @@ - - diff --git a/blocks/test/wrapped.htm b/blocks/test/wrapped.htm index 1855e32db..2de5b5366 100644 --- a/blocks/test/wrapped.htm +++ b/blocks/test/wrapped.htm @@ -8,8 +8,6 @@ - - diff --git a/solutions/file-uploader/regular/FileUploaderRegular.js b/solutions/file-uploader/regular/FileUploaderRegular.js index 84c8334b0..978d6dbfb 100644 --- a/solutions/file-uploader/regular/FileUploaderRegular.js +++ b/solutions/file-uploader/regular/FileUploaderRegular.js @@ -6,8 +6,6 @@ FileUploaderRegular.template = /* HTML */ ` - - From edc73ddb542993fe289a58c404b0531ca912bbf3 Mon Sep 17 00:00:00 2001 From: nd0ut Date: Mon, 26 Dec 2022 21:16:24 +0400 Subject: [PATCH 065/135] chore: remove `modalHeaderHidden` state property --- blocks/CameraSource/CameraSource.js | 1 - blocks/ConfirmationDialog/ConfirmationDialog.js | 3 --- blocks/ExternalSource/ExternalSource.js | 1 - blocks/Modal/Modal.js | 8 +------- blocks/Modal/modal.css | 16 ---------------- blocks/StartFrom/StartFrom.js | 1 - blocks/UploadDetails/UploadDetails.js | 1 - blocks/UploadList/UploadList.js | 1 - blocks/UrlSource/UrlSource.js | 1 - 9 files changed, 1 insertion(+), 32 deletions(-) diff --git a/blocks/CameraSource/CameraSource.js b/blocks/CameraSource/CameraSource.js index 931ec9d6a..398145642 100644 --- a/blocks/CameraSource/CameraSource.js +++ b/blocks/CameraSource/CameraSource.js @@ -47,7 +47,6 @@ export class CameraSource extends UploaderBlock { this.set$({ '*activityCaption': this.l10n('caption-camera'), '*activityIcon': 'camera', - '*modalHeaderHidden': false, }); if (canUsePermissionsApi()) { diff --git a/blocks/ConfirmationDialog/ConfirmationDialog.js b/blocks/ConfirmationDialog/ConfirmationDialog.js index b84cded47..049d27bd4 100644 --- a/blocks/ConfirmationDialog/ConfirmationDialog.js +++ b/blocks/ConfirmationDialog/ConfirmationDialog.js @@ -41,18 +41,15 @@ export class ConfirmationDialog extends ActivityBlock { return; } this.set$({ - '*modalHeaderHidden': true, '*currentActivity': ActivityBlock.activities.CONFIRMATION, '*activityCaption': this.l10n(cfn.captionL10nStr), messageTxt: this.l10n(cfn.messageL10Str), confirmBtnTxt: this.l10n(cfn.confirmL10nStr), denyBtnTxt: this.l10n(cfn.denyL10nStr), onDeny: () => { - this.$['*modalHeaderHidden'] = false; cfn.denyAction(); }, onConfirm: () => { - this.$['*modalHeaderHidden'] = false; cfn.confirmAction(); }, }); diff --git a/blocks/ExternalSource/ExternalSource.js b/blocks/ExternalSource/ExternalSource.js index efbf7d943..ad5347a36 100644 --- a/blocks/ExternalSource/ExternalSource.js +++ b/blocks/ExternalSource/ExternalSource.js @@ -36,7 +36,6 @@ export class ExternalSource extends UploaderBlock { this.set$({ '*activityCaption': `${externalSourceType?.[0].toUpperCase()}${externalSourceType?.slice(1)}`, '*activityIcon': externalSourceType, - '*modalHeaderHidden': false, }); this.$.counter = 0; diff --git a/blocks/Modal/Modal.js b/blocks/Modal/Modal.js index f32bb00af..de232a99d 100644 --- a/blocks/Modal/Modal.js +++ b/blocks/Modal/Modal.js @@ -18,7 +18,6 @@ export class Modal extends Block { init$ = { ...this.ctxInit, '*modalActive': false, - '*modalHeaderHidden': false, isOpen: false, closeClicked: this._handleClose, }; @@ -87,11 +86,6 @@ export class Modal extends Block { Modal.template = /* HTML */ ` -
- -
-
- -
+ `; diff --git a/blocks/Modal/modal.css b/blocks/Modal/modal.css index 4df0231bf..d334ff812 100644 --- a/blocks/Modal/modal.css +++ b/blocks/Modal/modal.css @@ -76,19 +76,3 @@ lr-modal > .dialog { lr-modal .dialog:not([open]) { transform: translateY(20px); } - -lr-modal > .dialog > .content { - display: contents; -} - -lr-modal .heading { - display: grid; - grid-template-columns: min-content 1fr min-content; - gap: var(--gap-mid); - padding: var(--gap-mid); - color: var(--clr-txt-light); - font-weight: 500; - font-size: 1.1em; - line-height: var(--ui-size); - background-color: var(--clr-background-light); -} diff --git a/blocks/StartFrom/StartFrom.js b/blocks/StartFrom/StartFrom.js index de23f8486..80040df34 100644 --- a/blocks/StartFrom/StartFrom.js +++ b/blocks/StartFrom/StartFrom.js @@ -12,7 +12,6 @@ export class StartFrom extends ActivityBlock { { '*activityCaption': this.l10n('select-file-source'), '*activityIcon': '', - '*modalHeaderHidden': true, }, true ); diff --git a/blocks/UploadDetails/UploadDetails.js b/blocks/UploadDetails/UploadDetails.js index 8a654341b..31091c624 100644 --- a/blocks/UploadDetails/UploadDetails.js +++ b/blocks/UploadDetails/UploadDetails.js @@ -57,7 +57,6 @@ export class UploadDetails extends UploaderBlock { this.set$({ '*activityCaption': this.l10n('caption-edit-file'), '*activityIcon': '', - '*modalHeaderHidden': false, }); }, onDeactivate: () => { diff --git a/blocks/UploadList/UploadList.js b/blocks/UploadList/UploadList.js index fb22401db..15e5920b6 100644 --- a/blocks/UploadList/UploadList.js +++ b/blocks/UploadList/UploadList.js @@ -154,7 +154,6 @@ export class UploadList extends UploaderBlock { this.set$({ '*activityCaption': this.l10n('selected'), '*activityIcon': '', - '*modalHeaderHidden': false, }); }, }); diff --git a/blocks/UrlSource/UrlSource.js b/blocks/UrlSource/UrlSource.js index 5299c8f0a..3470d7d10 100644 --- a/blocks/UrlSource/UrlSource.js +++ b/blocks/UrlSource/UrlSource.js @@ -30,7 +30,6 @@ export class UrlSource extends UploaderBlock { this.set$({ '*activityCaption': this.l10n('caption-from-url'), '*activityIcon': 'url', - '*modalHeaderHidden': false, }); }, }); From 54272e44b03b237f7deac5b466476c8fa67cb520 Mon Sep 17 00:00:00 2001 From: nd0ut Date: Mon, 26 Dec 2022 21:33:33 +0400 Subject: [PATCH 066/135] chore: add `lr-activity-header` component to be used inside activities --- blocks/ActivityHeader/ActivityHeader.js | 3 +++ blocks/ActivityHeader/activity-header.css | 11 +++++++++++ blocks/themes/lr-basic/index.css | 1 + 3 files changed, 15 insertions(+) create mode 100644 blocks/ActivityHeader/ActivityHeader.js create mode 100644 blocks/ActivityHeader/activity-header.css diff --git a/blocks/ActivityHeader/ActivityHeader.js b/blocks/ActivityHeader/ActivityHeader.js new file mode 100644 index 000000000..528e88818 --- /dev/null +++ b/blocks/ActivityHeader/ActivityHeader.js @@ -0,0 +1,3 @@ +import { ActivityBlock } from '../../abstract/ActivityBlock.js'; + +export class ActivityHeader extends ActivityBlock {} diff --git a/blocks/ActivityHeader/activity-header.css b/blocks/ActivityHeader/activity-header.css new file mode 100644 index 000000000..c535ee32c --- /dev/null +++ b/blocks/ActivityHeader/activity-header.css @@ -0,0 +1,11 @@ +lr-activity-header { + display: grid; + grid-template-columns: min-content 1fr min-content; + gap: var(--gap-mid); + padding: var(--gap-mid); + color: var(--clr-txt-light); + font-weight: 500; + font-size: 1.1em; + line-height: var(--ui-size); + background-color: var(--clr-background-light); +} diff --git a/blocks/themes/lr-basic/index.css b/blocks/themes/lr-basic/index.css index 383ec5c70..c5c64a8c6 100644 --- a/blocks/themes/lr-basic/index.css +++ b/blocks/themes/lr-basic/index.css @@ -40,5 +40,6 @@ @import url('../../ProgressBar/progress-bar.css'); @import url('../../ActivityCaption/activity-caption.css'); @import url('../../ActivityIcon/activity-icon.css'); +@import url('../../ActivityHeader/activity-header.css'); @import url('../../CloudImageEditor/index.css'); @import url('../../Select/select.css'); From 64c12b21b39c8060505f929c306f5fa6a6470a97 Mon Sep 17 00:00:00 2001 From: nd0ut Date: Mon, 26 Dec 2022 21:33:57 +0400 Subject: [PATCH 067/135] chore: use lr-activity-header inside activities --- abstract/ActivityBlock.js | 2 +- blocks/CameraSource/CameraSource.js | 4 ++++ blocks/CameraSource/camera-source.css | 8 ++------ blocks/ExternalSource/ExternalSource.js | 22 ++++++++++++++-------- blocks/ExternalSource/external-source.css | 12 +++++++++--- blocks/Modal/modal.css | 2 +- blocks/StartFrom/StartFrom.js | 12 +----------- blocks/UploadList/UploadList.js | 4 ++++ blocks/UrlSource/UrlSource.js | 16 +++++++++++++--- blocks/UrlSource/url-source.css | 2 +- index.js | 1 + 11 files changed, 51 insertions(+), 34 deletions(-) diff --git a/abstract/ActivityBlock.js b/abstract/ActivityBlock.js index 2de3a5574..6ab047e97 100644 --- a/abstract/ActivityBlock.js +++ b/abstract/ActivityBlock.js @@ -80,7 +80,7 @@ export class ActivityBlock extends Block { * @param {() => void} [options.onActivate] * @param {() => void} [options.onDeactivate] */ - registerActivity(name, options) { + registerActivity(name, options = {}) { const { onActivate, onDeactivate } = options; if (!ActivityBlock._activityRegistry) { ActivityBlock._activityRegistry = Object.create(null); diff --git a/blocks/CameraSource/CameraSource.js b/blocks/CameraSource/CameraSource.js index 398145642..dc3368e20 100644 --- a/blocks/CameraSource/CameraSource.js +++ b/blocks/CameraSource/CameraSource.js @@ -226,6 +226,10 @@ export class CameraSource extends UploaderBlock { } CameraSource.template = /* HTML */ ` + + + +
-
- -
-
{{counter}}
- + + + + +
+
+
+ +
+
{{counter}}
+ +
`; diff --git a/blocks/ExternalSource/external-source.css b/blocks/ExternalSource/external-source.css index 5a7082d6c..a97fd7282 100644 --- a/blocks/ExternalSource/external-source.css +++ b/blocks/ExternalSource/external-source.css @@ -1,12 +1,18 @@ lr-external-source { - position: relative; - display: grid; - grid-template-rows: 1fr min-content; + display: flex; + flex-direction: column; width: min(calc(var(--modal-max-w) - var(--gap-mid) * 2), calc(100vw - var(--gap-mid) * 2)); height: var(--modal-content-height-fill, 100%); max-height: var(--modal-max-content-height); } +lr-external-source > .content { + position: relative; + display: grid; + flex: 1; + grid-template-rows: 1fr min-content; +} + @media only screen and (max-width: 430px) { lr-external-source { width: calc(100vw - var(--gap-mid) * 2); diff --git a/blocks/Modal/modal.css b/blocks/Modal/modal.css index d334ff812..1c9a4a787 100644 --- a/blocks/Modal/modal.css +++ b/blocks/Modal/modal.css @@ -53,7 +53,7 @@ lr-modal > .dialog { flex-direction: column; /* there was `fit-content` but it doesn't reduce width after activity change */ - width: min-content; + width: max-content; max-width: min(calc(100% - var(--gap-mid) * 2), calc(var(--modal-max-w) - var(--gap-mid) * 2)); min-height: var(--ui-size); max-height: calc(var(--modal-max-h) - var(--gap-mid) * 2); diff --git a/blocks/StartFrom/StartFrom.js b/blocks/StartFrom/StartFrom.js index 80040df34..f7f6926da 100644 --- a/blocks/StartFrom/StartFrom.js +++ b/blocks/StartFrom/StartFrom.js @@ -6,16 +6,6 @@ export class StartFrom extends ActivityBlock { initCallback() { super.initCallback(); - this.registerActivity(this.activityType, { - onActivate: () => { - this.add$( - { - '*activityCaption': this.l10n('select-file-source'), - '*activityIcon': '', - }, - true - ); - }, - }); + this.registerActivity(this.activityType); } } diff --git a/blocks/UploadList/UploadList.js b/blocks/UploadList/UploadList.js index 15e5920b6..fdf65feaf 100644 --- a/blocks/UploadList/UploadList.js +++ b/blocks/UploadList/UploadList.js @@ -196,6 +196,10 @@ export class UploadList extends UploaderBlock { } UploadList.template = /* HTML */ ` + + + +
diff --git a/blocks/UrlSource/UrlSource.js b/blocks/UrlSource/UrlSource.js index 3470d7d10..8913f6fb1 100644 --- a/blocks/UrlSource/UrlSource.js +++ b/blocks/UrlSource/UrlSource.js @@ -37,7 +37,17 @@ export class UrlSource extends UploaderBlock { } UrlSource.template = /* HTML */ ` - - - + + + + +
+ + + +
`; diff --git a/blocks/UrlSource/url-source.css b/blocks/UrlSource/url-source.css index 6c77b283a..014947db5 100644 --- a/blocks/UrlSource/url-source.css +++ b/blocks/UrlSource/url-source.css @@ -1,4 +1,4 @@ -lr-url-source { +lr-url-source > .content { display: grid; grid-gap: var(--gap-small); grid-template-columns: 1fr min-content min-content; diff --git a/index.js b/index.js index bd4678423..edaaee7ba 100644 --- a/index.js +++ b/index.js @@ -33,6 +33,7 @@ export { Tabs } from './blocks/Tabs/Tabs.js'; export { DataOutput } from './blocks/DataOutput/DataOutput.js'; export { ActivityCaption } from './blocks/ActivityCaption/ActivityCaption.js'; export { ActivityIcon } from './blocks/ActivityIcon/ActivityIcon.js'; +export { ActivityHeader } from './blocks/ActivityHeader/ActivityHeader.js'; export { Select } from './blocks/Select/Select.js'; export { Video } from './blocks/Video/Video.js'; export { ShadowWrapper } from './blocks/ShadowWrapper/ShadowWrapper.js'; From 4658c04f24b5e91c7196bbbdf8c94fd861ace235 Mon Sep 17 00:00:00 2001 From: nd0ut Date: Tue, 27 Dec 2022 14:32:13 +0400 Subject: [PATCH 068/135] chore: remove ActivityIcon and ActivityCaption components --- blocks/ActivityCaption/ActivityCaption.js | 5 ----- blocks/ActivityCaption/activity-caption.css | 4 ---- blocks/ActivityCaption/ref.htm | 6 ------ blocks/ActivityCaption/test.js | 10 ---------- blocks/ActivityIcon/ActivityIcon.js | 5 ----- blocks/ActivityIcon/activity-icon.css | 3 --- blocks/ActivityIcon/ref.htm | 8 -------- blocks/ActivityIcon/test.js | 11 ----------- blocks/README.md | 2 -- index.js | 2 -- types/tags.d.ts | 3 +-- 11 files changed, 1 insertion(+), 58 deletions(-) delete mode 100644 blocks/ActivityCaption/ActivityCaption.js delete mode 100644 blocks/ActivityCaption/activity-caption.css delete mode 100644 blocks/ActivityCaption/ref.htm delete mode 100644 blocks/ActivityCaption/test.js delete mode 100644 blocks/ActivityIcon/ActivityIcon.js delete mode 100644 blocks/ActivityIcon/activity-icon.css delete mode 100644 blocks/ActivityIcon/ref.htm delete mode 100644 blocks/ActivityIcon/test.js diff --git a/blocks/ActivityCaption/ActivityCaption.js b/blocks/ActivityCaption/ActivityCaption.js deleted file mode 100644 index c9e651ff0..000000000 --- a/blocks/ActivityCaption/ActivityCaption.js +++ /dev/null @@ -1,5 +0,0 @@ -import { ActivityBlock } from '../../abstract/ActivityBlock.js'; - -export class ActivityCaption extends ActivityBlock {} - -ActivityCaption.template = /* HTML */ `
{{*activityCaption}}
`; diff --git a/blocks/ActivityCaption/activity-caption.css b/blocks/ActivityCaption/activity-caption.css deleted file mode 100644 index ec58214bb..000000000 --- a/blocks/ActivityCaption/activity-caption.css +++ /dev/null @@ -1,4 +0,0 @@ -lr-activity-caption { - color: var(--clr-txt); - font-size: 1em; -} diff --git a/blocks/ActivityCaption/ref.htm b/blocks/ActivityCaption/ref.htm deleted file mode 100644 index 61c37f631..000000000 --- a/blocks/ActivityCaption/ref.htm +++ /dev/null @@ -1,6 +0,0 @@ -

ActivityCaption

- - - - - \ No newline at end of file diff --git a/blocks/ActivityCaption/test.js b/blocks/ActivityCaption/test.js deleted file mode 100644 index 55684f948..000000000 --- a/blocks/ActivityCaption/test.js +++ /dev/null @@ -1,10 +0,0 @@ -import { ifRef } from '../../utils/ifRef.js'; -import { ActivityCaption } from './ActivityCaption.js'; -import { registerBlocks } from '../../abstract/registerBlocks.js'; - -ifRef(() => { - registerBlocks({ ActivityCaption }); - /** @type {ActivityCaption} */ - let actCap = document.querySelector(ActivityCaption.is); - actCap.$['*activityCaption'] = 'TEST CAPTION'; -}); diff --git a/blocks/ActivityIcon/ActivityIcon.js b/blocks/ActivityIcon/ActivityIcon.js deleted file mode 100644 index c49088c76..000000000 --- a/blocks/ActivityIcon/ActivityIcon.js +++ /dev/null @@ -1,5 +0,0 @@ -import { ActivityBlock } from '../../abstract/ActivityBlock.js'; - -export class ActivityIcon extends ActivityBlock {} - -ActivityIcon.template = /* HTML */ ``; diff --git a/blocks/ActivityIcon/activity-icon.css b/blocks/ActivityIcon/activity-icon.css deleted file mode 100644 index b1e1383e7..000000000 --- a/blocks/ActivityIcon/activity-icon.css +++ /dev/null @@ -1,3 +0,0 @@ -lr-activity-icon { - height: var(--ui-size); -} diff --git a/blocks/ActivityIcon/ref.htm b/blocks/ActivityIcon/ref.htm deleted file mode 100644 index 0a2785b0d..000000000 --- a/blocks/ActivityIcon/ref.htm +++ /dev/null @@ -1,8 +0,0 @@ -

ActivityIcon

- - - - - - - diff --git a/blocks/ActivityIcon/test.js b/blocks/ActivityIcon/test.js deleted file mode 100644 index d97353fdc..000000000 --- a/blocks/ActivityIcon/test.js +++ /dev/null @@ -1,11 +0,0 @@ -import { ifRef } from '../../utils/ifRef.js'; -import { Icon } from '../Icon/Icon.js'; -import { ActivityIcon } from './ActivityIcon.js'; -import { registerBlocks } from '../../abstract/registerBlocks.js'; - -ifRef(() => { - registerBlocks({ Icon, ActivityIcon }); - /** @type {ActivityIcon} */ - let actIcon = document.querySelector(ActivityIcon.is); - actIcon.$['*activityIcon'] = 'file'; -}); diff --git a/blocks/README.md b/blocks/README.md index 6c7e54c15..8a974a054 100644 --- a/blocks/README.md +++ b/blocks/README.md @@ -4,8 +4,6 @@ If our pre-built [uploader solution](/solutions/file-uploader/) isn't enough for ## Blocks list -- [ActivityCaption](/blocks/ActivityCaption/) — shows heading text for the current activity -- [ActivityIcon](/blocks/ActivityIcon/) — shows actual icon for the current activity - [CameraSource](/blocks/CameraSource/) — getting image for upload from the device camera - [CloudImageEditor](/blocks/CloudImageEditor/) — image editing via Uploadcare cloud functions - [Color](/blocks/Color/) — simple wrapper for the native color selector in browser diff --git a/index.js b/index.js index edaaee7ba..3176dfc6a 100644 --- a/index.js +++ b/index.js @@ -31,8 +31,6 @@ export { CloudImageEditor } from './blocks/CloudImageEditor/CloudImageEditor.js' export { ExternalSource } from './blocks/ExternalSource/ExternalSource.js'; export { Tabs } from './blocks/Tabs/Tabs.js'; export { DataOutput } from './blocks/DataOutput/DataOutput.js'; -export { ActivityCaption } from './blocks/ActivityCaption/ActivityCaption.js'; -export { ActivityIcon } from './blocks/ActivityIcon/ActivityIcon.js'; export { ActivityHeader } from './blocks/ActivityHeader/ActivityHeader.js'; export { Select } from './blocks/Select/Select.js'; export { Video } from './blocks/Video/Video.js'; diff --git a/types/tags.d.ts b/types/tags.d.ts index 7f8bbefc9..5d18cf47c 100644 --- a/types/tags.d.ts +++ b/types/tags.d.ts @@ -37,8 +37,7 @@ declare namespace JSX { 'lr-external-source': any; 'lr-tabs': any; 'lr-data-output': any; - 'lr-activity-caption': any; - 'lr-activity-icon': any; + 'lr-activity-heading': any; 'lr-file-uploader-regular': any; 'lr-file-uploader-minimal': any; } From 3c919c22f03412867ce25e3ad92eb0fa0690591c Mon Sep 17 00:00:00 2001 From: nd0ut Date: Tue, 27 Dec 2022 14:33:03 +0400 Subject: [PATCH 069/135] chore: fix readme --- docs/activities/README.md | 14 ++++++++------ solutions/file-uploader/README.md | 14 ++++++++------ 2 files changed, 16 insertions(+), 12 deletions(-) diff --git a/docs/activities/README.md b/docs/activities/README.md index 6fb3045f0..2c27a0e15 100644 --- a/docs/activities/README.md +++ b/docs/activities/README.md @@ -7,14 +7,16 @@ import { LR } from '@uploadcare/blocks'; class MyBlock extends LR.BlockComponent { initCallback() { - this.onActivation = () => { - '*activityCaption': this.l10n('some-caption'), - '*activityIcon': 'my-icon-name', + const onActivate = () => { + console.log('activity-name is activated'); }; - this.onDeactivation = () => { - console.log('activity-name is deactivated'); + const onDeactivate = () => { + console.log('activity-name is deactcivated'); }; - this.registerActivity('my-activity-name', this.onActivation, this.onDeactivation); + this.registerActivity('my-activity-name', { + onActivate, + onDeactivate, + }); } } ``` diff --git a/solutions/file-uploader/README.md b/solutions/file-uploader/README.md index ebb723446..42bb1cb89 100644 --- a/solutions/file-uploader/README.md +++ b/solutions/file-uploader/README.md @@ -409,14 +409,16 @@ import { LR } from '@uploadcare/blocks'; class MyBlock extends LR.BlockComponent { initCallback() { - this.onActivation = () => { - '*activityCaption': this.l10n('some-caption'), - '*activityIcon': 'my-icon-name', + const onActivate = () => { + console.log('activity-name is activated'); }; - this.onDeactivation = () => { - console.log('activity-name is deactivated'); + const onDeactivate = () => { + console.log('activity-name is deactcivated'); }; - this.registerActivity('my-activity-name', this.onActivation, this.onDeactivation); + this.registerActivity('my-activity-name', { + onActivate, + onDeactivate, + }); } } ``` From d41aafa48f81dd47bc884a899d93bde6f94a23d8 Mon Sep 17 00:00:00 2001 From: nd0ut Date: Tue, 27 Dec 2022 14:33:36 +0400 Subject: [PATCH 070/135] chore: use local state for activity icons and captions --- abstract/CTX.js | 2 - blocks/ActivityHeader/activity-header.css | 9 +- blocks/CameraSource/CameraSource.js | 9 +- .../ConfirmationDialog/ConfirmationDialog.js | 7 +- blocks/ExternalSource/ExternalSource.js | 10 ++- blocks/UploadDetails/UploadDetails.js | 83 +++++++++---------- blocks/UploadDetails/upload-details.css | 12 ++- blocks/UploadList/UploadList.js | 9 +- blocks/UrlSource/UrlSource.js | 13 +-- blocks/test/inline-mode.htm | 4 - blocks/test/raw.htm | 1 + blocks/test/split-mode.htm | 4 - blocks/themes/lr-basic/index.css | 2 - 13 files changed, 76 insertions(+), 89 deletions(-) diff --git a/abstract/CTX.js b/abstract/CTX.js index a844fd50a..5c79ea507 100644 --- a/abstract/CTX.js +++ b/abstract/CTX.js @@ -8,8 +8,6 @@ export const activityBlockCtx = () => ({ '*currentActivity': '', '*currentActivityParams': {}, '*history': [], - '*activityCaption': '', - '*activityIcon': '', }); export const uploaderBlockCtx = () => ({ diff --git a/blocks/ActivityHeader/activity-header.css b/blocks/ActivityHeader/activity-header.css index c535ee32c..ed89c51d6 100644 --- a/blocks/ActivityHeader/activity-header.css +++ b/blocks/ActivityHeader/activity-header.css @@ -1,11 +1,16 @@ lr-activity-header { - display: grid; - grid-template-columns: min-content 1fr min-content; + display: flex; gap: var(--gap-mid); padding: var(--gap-mid); color: var(--clr-txt-light); + color: var(--clr-txt); font-weight: 500; font-size: 1.1em; + font-size: 1em; line-height: var(--ui-size); background-color: var(--clr-background-light); } + +lr-activity-header lr-icon { + height: var(--ui-size); +} diff --git a/blocks/CameraSource/CameraSource.js b/blocks/CameraSource/CameraSource.js index dc3368e20..d7f30c180 100644 --- a/blocks/CameraSource/CameraSource.js +++ b/blocks/CameraSource/CameraSource.js @@ -44,11 +44,6 @@ export class CameraSource extends UploaderBlock { /** @private */ _onActivate = () => { - this.set$({ - '*activityCaption': this.l10n('caption-camera'), - '*activityIcon': 'camera', - }); - if (canUsePermissionsApi()) { this._subscribePermissions(); } @@ -227,8 +222,8 @@ export class CameraSource extends UploaderBlock { CameraSource.template = /* HTML */ ` - - + +