nextcloud-libraries · ShGKme · Jun 25, 2024 · May 17, 2024 · May 20, 2024
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
@@ -990,7 +990,7 @@
 			 * @type {Event}
 			 */
 			// eslint-disable-next-line vue/require-explicit-emits
 			this.$emit('figure-click', e)
 		},

 		/**
@@ -1068,7 +1068,7 @@
 			 *
 			 * @type {Event}
 			 */
 			this.$emit('submit-name', event)
 		},
 		onDismissEditing() {
 			// Disable editing
@@ -1078,7 +1078,7 @@
 			 *
 			 * @type {Event}
 			 */
 			this.$emit('dismiss-editing')
 		},
 		onUpdateActive(activeTab) {
 			/**
@@ -1093,11 +1093,21 @@
 </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 @@
 </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 @@
 	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 @@
 	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 @@
 // 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>