fix(file-uploader-inline): show back button (#381)

uploadcare · Feb 6, 2023 · cb83ebe · cb83ebe
1 parent be100a5
commit cb83ebe
Show file tree

Hide file tree

Showing 8 changed files with 26 additions and 24 deletions.
diff --git a/blocks/ActivityHeader/activity-header.css b/blocks/ActivityHeader/activity-header.css
@@ -13,11 +13,22 @@ lr-activity-header lr-icon {
   height: var(--ui-size);
 }
 
-lr-activity-header button {
-  color: var(--clr-txt);
-}
-
 lr-activity-header > * {
   display: flex;
   align-items: center;
 }
+
+lr-modal button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--clr-txt-mid);
+}
+
+lr-modal button:hover {
+  background-color: var(--clr-background);
+}
+
+lr-modal button:active {
+  background-color: var(--clr-background-dark);
+}
diff --git a/blocks/CameraSource/CameraSource.js b/blocks/CameraSource/CameraSource.js
@@ -223,7 +223,7 @@ export class CameraSource extends UploaderBlock {
 
 CameraSource.template = /* HTML */ `
   <lr-activity-header>
-    <button type="button" class="mini-btn close-btn" set="onclick: *historyBack">
+    <button type="button" class="mini-btn" set="onclick: *historyBack">
       <lr-icon name="back"></lr-icon>
     </button>
     <div set="@hidden: !cameraSelectHidden">

diff --git a/blocks/ConfirmationDialog/ConfirmationDialog.js b/blocks/ConfirmationDialog/ConfirmationDialog.js
@@ -60,7 +60,7 @@ export class ConfirmationDialog extends ActivityBlock {
 
 ConfirmationDialog.template = /* HTML */ `
   <lr-activity-header>
-    <button type="button" class="mini-btn close-btn" set="onclick: *historyBack">
+    <button type="button" class="mini-btn" set="onclick: *historyBack">
       <lr-icon name="back"></lr-icon>
     </button>
     <span>{{activityCaption}}</span>

diff --git a/blocks/ExternalSource/ExternalSource.js b/blocks/ExternalSource/ExternalSource.js
@@ -139,7 +139,7 @@ export class ExternalSource extends UploaderBlock {
 
 ExternalSource.template = /* HTML */ `
   <lr-activity-header>
-    <button type="button" class="mini-btn close-btn" set="onclick: *historyBack">
+    <button type="button" class="mini-btn" set="onclick: *historyBack">
       <lr-icon name="back"></lr-icon>
     </button>
     <div>

diff --git a/blocks/Modal/modal.css b/blocks/Modal/modal.css
@@ -62,21 +62,6 @@ lr-modal > dialog:not([open]) {
   opacity: 0;
 }
 
-lr-modal button.close-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--clr-txt-mid);
-}
-
-lr-modal button.close-btn:hover {
-  background-color: var(--clr-background);
-}
-
-lr-modal button.close-btn:active {
-  background-color: var(--clr-background-dark);
-}
-
 lr-modal > dialog {
   display: flex;
   flex-direction: column;

diff --git a/blocks/UploadDetails/UploadDetails.js b/blocks/UploadDetails/UploadDetails.js
@@ -139,7 +139,7 @@ export class UploadDetails extends UploaderBlock {
 
 UploadDetails.template = /* HTML */ `
   <lr-activity-header>
-    <button type="button" class="mini-btn close-btn" set="onclick: *historyBack">
+    <button type="button" class="mini-btn" set="onclick: *historyBack">
       <lr-icon name="back"></lr-icon>
     </button>
     <span l10n="caption-edit-file"></span>

diff --git a/blocks/UrlSource/UrlSource.js b/blocks/UrlSource/UrlSource.js
@@ -31,7 +31,7 @@ export class UrlSource extends UploaderBlock {
 
 UrlSource.template = /* HTML */ `
   <lr-activity-header>
-    <button type="button" class="mini-btn close-btn" set="onclick: *historyBack">
+    <button type="button" class="mini-btn" set="onclick: *historyBack">
       <lr-icon name="back"></lr-icon>
     </button>
     <div>

diff --git a/solutions/file-uploader/inline/index.css b/solutions/file-uploader/inline/index.css
@@ -12,6 +12,12 @@ lr-start-from {
   container-type: inline-size;
 }
 
+lr-activity-header::after {
+  width: var(--ui-size);
+  height: var(--ui-size);
+  content: '';
+}
+
 lr-activity-header .close-btn {
   display: none;
 }