refactor: move template settings to vue component

Signed-off-by: Elizabeth Danzberger <[email protected]>
nextcloud · Nov 5, 2024 · fc11c12 · fc11c12
1 parent 938876a
commit fc11c12
Show file tree

Hide file tree

Showing 10 changed files with 392 additions and 350 deletions.
diff --git a/css/admin.scss b/css/admin.scss
@@ -10,37 +10,21 @@
 
 #richdocuments {
 	#use_group_select, #edit_group_select {
-		width: 200px; display: block;
+		width: 200px;
+		display: block;
 	}
+
 	p {
 		margin-bottom: 15px;
 	}
+
 	#s2id_use_group_select,
 	#s2id_edit_group_select {
 		margin-left: 18px;
 		margin-top: -4px;
 		width: 300px !important;
 	}
-}
-
-input#zoteroAPIKeyField {
-	width: 300px;
-}
-
-textarea#documentSigningCertField {
-	width: 600px;
-}
 
-textarea#documentSigningKeyField {
-	width: 600px;
-}
-
-textarea#documentSigningCaField {
-	width: 600px;
-}
-
-#richdocuments,
-#richdocuments-templates {
 	// inline buttons on section headers
 	> h2 {
 		display: inline-flex;
@@ -58,6 +42,7 @@ textarea#documentSigningCaField {
 			line-height: 44px;
 			padding-left: 44px;
 			font-size: 16px;
+
 			&:hover,
 			&:focus,
 			&:active {
@@ -67,77 +52,18 @@ textarea#documentSigningCaField {
 	}
 }
 
-#richdocuments-templates {
-	> input {
-		// feedback for keyboard navigation
-		&:hover,
-		&:focus,
-		&:active {
-			+ h2 .icon-add,
-			+ h2 .icon-loading-small {
-				opacity: 0.7;
-			}
-			+ #emptycontent label {
-				color: var(--color-text-light);
-			}
-		}
-	}
-	ul:not(.hidden) {
-		display: flex;
-		flex-wrap: wrap;
-		li {
-			$size: 150px;
-			$sizeY: math.div($size, 210) * 297;
-			$space: 10px;
-			border-radius: var(--border-radius);
-			border: 1px solid var(--color-border);
-			margin: $space;
-			position: relative;
-			figure {
-				display: flex;
-				flex-direction: column;
-				width: $size;
-				margin: $space;
-				img, .templatePlaceholder {
-					width: $size;
-					height: $sizeY;
-					background-color: var(--color-background-dark);
-				}
-				figcaption {
-					margin-top: $space;
-				}
-			}
-			.delete-cover,
-			.delete-template {
-				width: $size;
-				height: $sizeY;
-				top: 0;
-				left: 0;
-				position: absolute;
-				margin: $space;
-				opacity: 0;
-				transition: opacity 250ms ease-in-out;
-				z-index: 3;
-				line-height: $sizeY;
-				text-align: center;
-				font-size: 20px;
-				background-size: 24px;
-				// text is set as bg
-				color: var(--color-background-darker);
-			}
-			.delete-cover {
-				// bg is set as color
-				background-color: var(--color-text-lighter);
-				z-index: 2;
-			}
-			&:hover .delete-template,
-			.delete-template:focus,
-			.delete-template.icon-loading {
-				opacity: 1;
-				+ .delete-cover {
-					opacity: 0.5;
-				}
-			}
-		}
-	}
+textarea#documentSigningCertField {
+	width: 600px;
+}
+
+textarea#documentSigningKeyField {
+	width: 600px;
+}
+
+textarea#documentSigningCaField {
+	width: 600px;
+}
+
+input#zoteroAPIKeyField {
+	width: 300px;
 }
diff --git a/cypress/e2e/settings.spec.js b/cypress/e2e/settings.spec.js
@@ -72,11 +72,9 @@ describe('Office admin settings', function() {
 			cy.get('.settings-entry.font-list-settings').contains(font)
 		})
 
-		// FIXME: Template settings only get visible after reload
-		cy.reload()
-		cy.get('#richdocuments-templates')
+		cy.get('.settings-section__name')
+			.contains('Global Templates')
 			.scrollIntoView()
 			.should('be.visible')
-
 	})
 })