Merge pull request #5621 from nextcloud-libraries/backport/5608/next

[next] fix(NcAppSidebar): make closing animation less glitchy
nextcloud-libraries · Jun 25, 2024 · dbe3d1a · dbe3d1a
2 parents 2080d03 + b6f5c28
commit dbe3d1a
Show file tree

Hide file tree

Showing 97 changed files with 20 additions and 13 deletions.
diff --git a/...ull-starred_false-compact_true-header_image-secondary_button-editable_false.png b/...ull-starred_false-compact_true-header_image-secondary_button-editable_false.png
diff --git a/...null-starred_false-compact_true-header_image-secondary_button-editable_true.png b/...null-starred_false-compact_true-header_image-secondary_button-editable_true.png
diff --git a/..._null-starred_false-compact_true-header_image-secondary_none-editable_false.png b/..._null-starred_false-compact_true-header_image-secondary_none-editable_false.png
diff --git a/...e_null-starred_false-compact_true-header_image-secondary_none-editable_true.png b/...e_null-starred_false-compact_true-header_image-secondary_none-editable_true.png
diff --git a/...null-starred_false-compact_true-header_none-secondary_button-editable_false.png b/...null-starred_false-compact_true-header_none-secondary_button-editable_false.png
diff --git a/..._null-starred_false-compact_true-header_none-secondary_button-editable_true.png b/..._null-starred_false-compact_true-header_none-secondary_button-editable_true.png
diff --git a/...e_null-starred_false-compact_true-header_none-secondary_none-editable_false.png b/...e_null-starred_false-compact_true-header_none-secondary_none-editable_false.png
diff --git a/...me_null-starred_false-compact_true-header_none-secondary_none-editable_true.png b/...me_null-starred_false-compact_true-header_none-secondary_none-editable_true.png
diff --git a/...null-starred_null-compact_true-header_image-secondary_button-editable_false.png b/...null-starred_null-compact_true-header_image-secondary_button-editable_false.png
diff --git a/..._null-starred_null-compact_true-header_image-secondary_button-editable_true.png b/..._null-starred_null-compact_true-header_image-secondary_button-editable_true.png
diff --git a/...e_null-starred_null-compact_true-header_image-secondary_none-editable_false.png b/...e_null-starred_null-compact_true-header_image-secondary_none-editable_false.png
diff --git a/...me_null-starred_null-compact_true-header_image-secondary_none-editable_true.png b/...me_null-starred_null-compact_true-header_image-secondary_none-editable_true.png
diff --git a/..._null-starred_null-compact_true-header_none-secondary_button-editable_false.png b/..._null-starred_null-compact_true-header_none-secondary_button-editable_false.png
diff --git a/...e_null-starred_null-compact_true-header_none-secondary_button-editable_true.png b/...e_null-starred_null-compact_true-header_none-secondary_button-editable_true.png
diff --git a/...me_null-starred_null-compact_true-header_none-secondary_none-editable_false.png b/...me_null-starred_null-compact_true-header_none-secondary_none-editable_false.png
diff --git a/...ame_null-starred_null-compact_true-header_none-secondary_none-editable_true.png b/...ame_null-starred_null-compact_true-header_none-secondary_none-editable_true.png
diff --git a/...null-starred_true-compact_true-header_image-secondary_button-editable_false.png b/...null-starred_true-compact_true-header_image-secondary_button-editable_false.png
diff --git a/..._null-starred_true-compact_true-header_image-secondary_button-editable_true.png b/..._null-starred_true-compact_true-header_image-secondary_button-editable_true.png
diff --git a/...e_null-starred_true-compact_true-header_image-secondary_none-editable_false.png b/...e_null-starred_true-compact_true-header_image-secondary_none-editable_false.png
diff --git a/...me_null-starred_true-compact_true-header_image-secondary_none-editable_true.png b/...me_null-starred_true-compact_true-header_image-secondary_none-editable_true.png
diff --git a/..._null-starred_true-compact_true-header_none-secondary_button-editable_false.png b/..._null-starred_true-compact_true-header_none-secondary_button-editable_false.png
diff --git a/...e_null-starred_true-compact_true-header_none-secondary_button-editable_true.png b/...e_null-starred_true-compact_true-header_none-secondary_button-editable_true.png
diff --git a/...me_null-starred_true-compact_true-header_none-secondary_none-editable_false.png b/...me_null-starred_true-compact_true-header_none-secondary_none-editable_false.png
diff --git a/...ame_null-starred_true-compact_true-header_none-secondary_none-editable_true.png b/...ame_null-starred_true-compact_true-header_none-secondary_none-editable_true.png
diff --git a/...rue-starred_false-compact_true-header_image-secondary_button-editable_false.png b/...rue-starred_false-compact_true-header_image-secondary_button-editable_false.png
diff --git a/...true-starred_false-compact_true-header_image-secondary_button-editable_true.png b/...true-starred_false-compact_true-header_image-secondary_button-editable_true.png
diff --git a/..._true-starred_false-compact_true-header_image-secondary_none-editable_false.png b/..._true-starred_false-compact_true-header_image-secondary_none-editable_false.png
diff --git a/...e_true-starred_false-compact_true-header_image-secondary_none-editable_true.png b/...e_true-starred_false-compact_true-header_image-secondary_none-editable_true.png
diff --git a/...true-starred_false-compact_true-header_none-secondary_button-editable_false.png b/...true-starred_false-compact_true-header_none-secondary_button-editable_false.png
diff --git a/..._true-starred_false-compact_true-header_none-secondary_button-editable_true.png b/..._true-starred_false-compact_true-header_none-secondary_button-editable_true.png
diff --git a/...e_true-starred_false-compact_true-header_none-secondary_none-editable_false.png b/...e_true-starred_false-compact_true-header_none-secondary_none-editable_false.png
diff --git a/...me_true-starred_false-compact_true-header_none-secondary_none-editable_true.png b/...me_true-starred_false-compact_true-header_none-secondary_none-editable_true.png
diff --git a/...true-starred_null-compact_true-header_image-secondary_button-editable_false.png b/...true-starred_null-compact_true-header_image-secondary_button-editable_false.png
diff --git a/..._true-starred_null-compact_true-header_image-secondary_button-editable_true.png b/..._true-starred_null-compact_true-header_image-secondary_button-editable_true.png
diff --git a/...e_true-starred_null-compact_true-header_image-secondary_none-editable_false.png b/...e_true-starred_null-compact_true-header_image-secondary_none-editable_false.png
diff --git a/...me_true-starred_null-compact_true-header_image-secondary_none-editable_true.png b/...me_true-starred_null-compact_true-header_image-secondary_none-editable_true.png
diff --git a/..._true-starred_null-compact_true-header_none-secondary_button-editable_false.png b/..._true-starred_null-compact_true-header_none-secondary_button-editable_false.png
diff --git a/...e_true-starred_null-compact_true-header_none-secondary_button-editable_true.png b/...e_true-starred_null-compact_true-header_none-secondary_button-editable_true.png
diff --git a/...me_true-starred_null-compact_true-header_none-secondary_none-editable_false.png b/...me_true-starred_null-compact_true-header_none-secondary_none-editable_false.png
diff --git a/...ame_true-starred_null-compact_true-header_none-secondary_none-editable_true.png b/...ame_true-starred_null-compact_true-header_none-secondary_none-editable_true.png
diff --git a/...true-starred_true-compact_true-header_image-secondary_button-editable_false.png b/...true-starred_true-compact_true-header_image-secondary_button-editable_false.png
diff --git a/..._true-starred_true-compact_true-header_image-secondary_button-editable_true.png b/..._true-starred_true-compact_true-header_image-secondary_button-editable_true.png
diff --git a/...e_true-starred_true-compact_true-header_image-secondary_none-editable_false.png b/...e_true-starred_true-compact_true-header_image-secondary_none-editable_false.png
diff --git a/...me_true-starred_true-compact_true-header_image-secondary_none-editable_true.png b/...me_true-starred_true-compact_true-header_image-secondary_none-editable_true.png
diff --git a/..._true-starred_true-compact_true-header_none-secondary_button-editable_false.png b/..._true-starred_true-compact_true-header_none-secondary_button-editable_false.png
diff --git a/...e_true-starred_true-compact_true-header_none-secondary_button-editable_true.png b/...e_true-starred_true-compact_true-header_none-secondary_button-editable_true.png
diff --git a/...me_true-starred_true-compact_true-header_none-secondary_none-editable_false.png b/...me_true-starred_true-compact_true-header_none-secondary_none-editable_false.png
diff --git a/...ame_true-starred_true-compact_true-header_none-secondary_none-editable_true.png b/...ame_true-starred_true-compact_true-header_none-secondary_none-editable_true.png
diff --git a/...ll-starred_false-compact_false-header_image-secondary_button-editable_false.png b/...ll-starred_false-compact_false-header_image-secondary_button-editable_false.png
diff --git a/...ull-starred_false-compact_false-header_image-secondary_button-editable_true.png b/...ull-starred_false-compact_false-header_image-secondary_button-editable_true.png
diff --git a/...null-starred_false-compact_false-header_image-secondary_none-editable_false.png b/...null-starred_false-compact_false-header_image-secondary_none-editable_false.png
diff --git a/..._null-starred_false-compact_false-header_image-secondary_none-editable_true.png b/..._null-starred_false-compact_false-header_image-secondary_none-editable_true.png
diff --git a/...ull-starred_false-compact_false-header_none-secondary_button-editable_false.png b/...ull-starred_false-compact_false-header_none-secondary_button-editable_false.png
diff --git a/...null-starred_false-compact_false-header_none-secondary_button-editable_true.png b/...null-starred_false-compact_false-header_none-secondary_button-editable_true.png
diff --git a/..._null-starred_false-compact_false-header_none-secondary_none-editable_false.png b/..._null-starred_false-compact_false-header_none-secondary_none-editable_false.png
diff --git a/...e_null-starred_false-compact_false-header_none-secondary_none-editable_true.png b/...e_null-starred_false-compact_false-header_none-secondary_none-editable_true.png
diff --git a/...ull-starred_null-compact_false-header_image-secondary_button-editable_false.png b/...ull-starred_null-compact_false-header_image-secondary_button-editable_false.png
diff --git a/...null-starred_null-compact_false-header_image-secondary_button-editable_true.png b/...null-starred_null-compact_false-header_image-secondary_button-editable_true.png
diff --git a/..._null-starred_null-compact_false-header_image-secondary_none-editable_false.png b/..._null-starred_null-compact_false-header_image-secondary_none-editable_false.png
diff --git a/...e_null-starred_null-compact_false-header_image-secondary_none-editable_true.png b/...e_null-starred_null-compact_false-header_image-secondary_none-editable_true.png
diff --git a/...null-starred_null-compact_false-header_none-secondary_button-editable_false.png b/...null-starred_null-compact_false-header_none-secondary_button-editable_false.png
diff --git a/..._null-starred_null-compact_false-header_none-secondary_button-editable_true.png b/..._null-starred_null-compact_false-header_none-secondary_button-editable_true.png
diff --git a/...e_null-starred_null-compact_false-header_none-secondary_none-editable_false.png b/...e_null-starred_null-compact_false-header_none-secondary_none-editable_false.png
diff --git a/...me_null-starred_null-compact_false-header_none-secondary_none-editable_true.png b/...me_null-starred_null-compact_false-header_none-secondary_none-editable_true.png
diff --git a/...ull-starred_true-compact_false-header_image-secondary_button-editable_false.png b/...ull-starred_true-compact_false-header_image-secondary_button-editable_false.png
diff --git a/...null-starred_true-compact_false-header_image-secondary_button-editable_true.png b/...null-starred_true-compact_false-header_image-secondary_button-editable_true.png
diff --git a/..._null-starred_true-compact_false-header_image-secondary_none-editable_false.png b/..._null-starred_true-compact_false-header_image-secondary_none-editable_false.png
diff --git a/...e_null-starred_true-compact_false-header_image-secondary_none-editable_true.png b/...e_null-starred_true-compact_false-header_image-secondary_none-editable_true.png
diff --git a/...null-starred_true-compact_false-header_none-secondary_button-editable_false.png b/...null-starred_true-compact_false-header_none-secondary_button-editable_false.png
diff --git a/..._null-starred_true-compact_false-header_none-secondary_button-editable_true.png b/..._null-starred_true-compact_false-header_none-secondary_button-editable_true.png
diff --git a/...e_null-starred_true-compact_false-header_none-secondary_none-editable_false.png b/...e_null-starred_true-compact_false-header_none-secondary_none-editable_false.png
diff --git a/...me_null-starred_true-compact_false-header_none-secondary_none-editable_true.png b/...me_null-starred_true-compact_false-header_none-secondary_none-editable_true.png
diff --git a/...ue-starred_false-compact_false-header_image-secondary_button-editable_false.png b/...ue-starred_false-compact_false-header_image-secondary_button-editable_false.png
diff --git a/...rue-starred_false-compact_false-header_image-secondary_button-editable_true.png b/...rue-starred_false-compact_false-header_image-secondary_button-editable_true.png
diff --git a/...true-starred_false-compact_false-header_image-secondary_none-editable_false.png b/...true-starred_false-compact_false-header_image-secondary_none-editable_false.png
diff --git a/..._true-starred_false-compact_false-header_image-secondary_none-editable_true.png b/..._true-starred_false-compact_false-header_image-secondary_none-editable_true.png
diff --git a/...rue-starred_false-compact_false-header_none-secondary_button-editable_false.png b/...rue-starred_false-compact_false-header_none-secondary_button-editable_false.png
diff --git a/...true-starred_false-compact_false-header_none-secondary_button-editable_true.png b/...true-starred_false-compact_false-header_none-secondary_button-editable_true.png
diff --git a/..._true-starred_false-compact_false-header_none-secondary_none-editable_false.png b/..._true-starred_false-compact_false-header_none-secondary_none-editable_false.png
diff --git a/...e_true-starred_false-compact_false-header_none-secondary_none-editable_true.png b/...e_true-starred_false-compact_false-header_none-secondary_none-editable_true.png
diff --git a/...rue-starred_null-compact_false-header_image-secondary_button-editable_false.png b/...rue-starred_null-compact_false-header_image-secondary_button-editable_false.png
diff --git a/...true-starred_null-compact_false-header_image-secondary_button-editable_true.png b/...true-starred_null-compact_false-header_image-secondary_button-editable_true.png
diff --git a/..._true-starred_null-compact_false-header_image-secondary_none-editable_false.png b/..._true-starred_null-compact_false-header_image-secondary_none-editable_false.png
diff --git a/...e_true-starred_null-compact_false-header_image-secondary_none-editable_true.png b/...e_true-starred_null-compact_false-header_image-secondary_none-editable_true.png
diff --git a/...true-starred_null-compact_false-header_none-secondary_button-editable_false.png b/...true-starred_null-compact_false-header_none-secondary_button-editable_false.png
diff --git a/..._true-starred_null-compact_false-header_none-secondary_button-editable_true.png b/..._true-starred_null-compact_false-header_none-secondary_button-editable_true.png
diff --git a/...e_true-starred_null-compact_false-header_none-secondary_none-editable_false.png b/...e_true-starred_null-compact_false-header_none-secondary_none-editable_false.png
diff --git a/...me_true-starred_null-compact_false-header_none-secondary_none-editable_true.png b/...me_true-starred_null-compact_false-header_none-secondary_none-editable_true.png
diff --git a/...rue-starred_true-compact_false-header_image-secondary_button-editable_false.png b/...rue-starred_true-compact_false-header_image-secondary_button-editable_false.png
diff --git a/...true-starred_true-compact_false-header_image-secondary_button-editable_true.png b/...true-starred_true-compact_false-header_image-secondary_button-editable_true.png
diff --git a/..._true-starred_true-compact_false-header_image-secondary_none-editable_false.png b/..._true-starred_true-compact_false-header_image-secondary_none-editable_false.png
diff --git a/...e_true-starred_true-compact_false-header_image-secondary_none-editable_true.png b/...e_true-starred_true-compact_false-header_image-secondary_none-editable_true.png
diff --git a/...true-starred_true-compact_false-header_none-secondary_button-editable_false.png b/...true-starred_true-compact_false-header_none-secondary_button-editable_false.png
diff --git a/..._true-starred_true-compact_false-header_none-secondary_button-editable_true.png b/..._true-starred_true-compact_false-header_none-secondary_button-editable_true.png
diff --git a/...e_true-starred_true-compact_false-header_none-secondary_none-editable_false.png b/...e_true-starred_true-compact_false-header_none-secondary_none-editable_false.png
diff --git a/...me_true-starred_true-compact_false-header_none-secondary_none-editable_true.png b/...me_true-starred_true-compact_false-header_none-secondary_none-editable_true.png
diff --git a/src/components/NcAppSidebar/NcAppSidebar.vue b/src/components/NcAppSidebar/NcAppSidebar.vue
@@ -1093,11 +1093,21 @@ export default {
 </script>
 
 <style lang="scss">
+// Allows to use transition over a custom CSS property (CSS Variable)
+// Ignored on old browsers resulting in slightly noticeable jump
+@property --app-sidebar-offset {
+  syntax: '<length>';
+  initial-value: 0;
+  inherits: true;
+}
+
 .content {
 	// A padding between the toggle button and the page border
 	--app-sidebar-padding: #{$app-navigation-padding};
 	// A padding between the toggle button and the page border
 	--app-sidebar-offset: 0;
+	transition-duration: var(--animation-quick);
+	transition-property: --app-sidebar-offset;
 }
 
 .content:has(.app-sidebar__toggle) {
@@ -1106,9 +1116,6 @@ export default {
 </style>
 
 <style lang="scss" scoped>
-$sidebar-min-width: 300px;
-$sidebar-max-width: 500px;
-
 $desc-vertical-padding: 18px;
 $desc-vertical-padding-compact: 10px;
 $desc-input-padding: 7px;
@@ -1125,6 +1132,9 @@ $top-buttons-spacing: 6px;
 	app-content will be shrinked properly
 */
 .app-sidebar {
+	--app-sidebar-width: clamp(300px, 27vw, 500px);
+	width: var(--app-sidebar-width);
+
 	z-index: 1500;
 	top: 0;
 	right: 0;
@@ -1133,12 +1143,11 @@ $top-buttons-spacing: 6px;
 	overflow-y: auto;
 	flex-direction: column;
 	flex-shrink: 0;
-	width: 27vw;
-	min-width: $sidebar-min-width;
-	max-width: $sidebar-max-width;
 	height: 100%;
 	border-left: 1px solid var(--color-border);
 	background: var(--color-main-background);
+	// Make close button positioned relative to the header
+	position: relative;
 
 	&__toggle {
 		position: absolute !important;
@@ -1368,27 +1377,25 @@ $top-buttons-spacing: 6px;
 // Make the sidebar full-width on small screens
 @media only screen and (max-width: $breakpoint-small-mobile) {
 	.app-sidebar {
-		width: 100vw;
-		max-width: 100vw;
+		position: absolute;
+		--app-sidebar-width: 100vw;
 	}
 }
 
 .slide-right-leave-active,
 .slide-right-enter-active {
 	transition-duration: var(--animation-quick);
-	transition-property: max-width, min-width;
+	transition-property: margin-right;
 }
 
 .slide-right-enter-to,
 .slide-right-leave-from {
-	min-width: $sidebar-min-width;
-	max-width: $sidebar-max-width;
+	margin-right: 0;
 }
 
 .slide-right-enter-from,
 .slide-right-leave-to {
-	min-width: 0 !important;
-	max-width: 0 !important;
+	margin-right: calc(-1 * var(--app-sidebar-width));
 }
 </style>