Merge pull request #582 from nextcloud/fix/toast_rendering

Fix undo toast rendering
nextcloud-libraries · May 12, 2022 · 2ad2e82 · 2ad2e82
2 parents 3ca4519 + 6bc4f7b
commit 2ad2e82
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 6 deletions.
diff --git a/l10n/messages.pot b/l10n/messages.pot
@@ -2,6 +2,6 @@ msgid ""
 msgstr ""
 "Content-Type: text/plain; charset=UTF-8\n"
 
-#: lib/toast.ts:192
+#: lib/toast.ts:193
 msgid "Undo"
 msgstr ""
diff --git a/lib/toast.ts b/lib/toast.ts
@@ -188,6 +188,7 @@ export function showUndo(text: string, onUndo: Function, options?: ToastOptions)
 	// Generate undo layout
 	const undoContent = document.createElement('span')
 	const undoButton = document.createElement('button')
+	undoContent.classList.add('toast-undo-container')
 	undoButton.classList.add('toast-undo-button')
 	undoButton.innerText = t('Undo')
 	undoContent.innerText = text

diff --git a/styles/toast.scss b/styles/toast.scss
@@ -28,18 +28,22 @@
 	background-color: var(--color-main-background);
 	color: var(--color-main-text);
 	box-shadow: 0 0 6px 0 var(--color-box-shadow);
-	padding: 12px;
-	padding-right: 34px;
+	padding: 0px 12px;
 	margin-top: 45px;
 	position: fixed;
 	z-index: 10100;
 	border-radius: var(--border-radius);
+	display: flex;
+	align-items: center;
+
+	.toast-undo-container {
+		display: flex;
+		align-items: center;
+	}
 
 	.toast-undo-button,
 	.toast-close {
-		position: absolute;
-		top: 0;
-		right: 0;
+		position: static;
 		overflow: hidden;
 		box-sizing: border-box;
 		min-width: 44px;
@@ -62,6 +66,7 @@
 			$margin: 3px;
 			margin: $margin;
 			height: calc(100% - 2 * #{$margin});
+			margin-left: 12px;
 		}
 
 		&:hover, &:focus, &:active {