Merge pull request #5990 from nextcloud/fix/clickable-size

nextcloud · Jul 4, 2024 · 7c3e16a · 7c3e16a
2 parents 835a8b5 + d21108c
commit 7c3e16a
Show file tree

Hide file tree

Showing 11 changed files with 22 additions and 21 deletions.
diff --git a/src/components/Editor.vue b/src/components/Editor.vue
@@ -837,7 +837,7 @@ export default {
 	top: 0;
 	opacity: 0;
 	visibility: hidden;
-	height: 44px; // important for mobile so that the buttons are always inside the container
+	height: var(--default-clickable-area); // important for mobile so that the buttons are always inside the container
 	padding-top:3px;
 	padding-bottom: 3px;
 }

diff --git a/src/components/Editor/SessionList.vue b/src/components/Editor/SessionList.vue
@@ -15,7 +15,7 @@
 					<AvatarWrapper v-for="session in sessionsVisible"
 						:key="session.id"
 						:session="session"
-						:size="40" />
+						:size="30" />
 				</button>
 			</div>
 		</template>
@@ -130,7 +130,7 @@ export default {
 
 <style scoped lang="scss">
 	.session-list {
-		height: 44px;
+		height: var(--default-clickable-area);
 	}
 	.avatar-list {
 		border: none;
@@ -142,18 +142,18 @@ export default {
 		flex-direction: row-reverse;
 
 		.avatar-wrapper {
-			margin: 0 -18px 0 0;
+			margin: 0 -12px 0 0;
 			z-index: 1;
 			border-radius: 50%;
 			overflow: hidden;
 			box-sizing: content-box !important;
-			height: 36px;
-			width: 36px;
+			height: calc(var(--default-clickable-area) - 4px);
+			width: calc(var(--default-clickable-area) - 4px);
 		}
 
 		.icon-more, .icon-group, .icon-settings-dark {
-			width: 44px;
-			height: 44px;
+			width: var(--default-clickable-area);
+			height: var(--default-clickable-area);
 			margin: 0 3px 0 0;
 
 			&:hover {

diff --git a/src/components/Editor/Status.vue b/src/components/Editor/Status.vue
@@ -148,8 +148,8 @@ export default {
 		display: inline-flex;
 		justify-content: center;
 		padding: 0;
-		height: 44px;
-		width: 44px;
+		height: var(--default-clickable-area);
+		width: var(--default-clickable-area);
 
 		&:hover {
 			background-color: var(--color-background-hover);

diff --git a/src/components/Menu/ActionEntry.scss b/src/components/Menu/ActionEntry.scss
@@ -13,7 +13,7 @@
 	}
 
 	button.entry-action__button {
-		height: 44px;
+		height: var(--default-clickable-area);
 		margin: 0;
 		border: 0;
 		// opacity: 0.5;
@@ -32,7 +32,7 @@
 		}
 
 		&:not(li.entry-action-item button) {
-			width: 44px;
+			width: var(--default-clickable-area);
 		}
 
 		&:hover,

diff --git a/src/components/Menu/MenuBar.vue b/src/components/Menu/MenuBar.vue
@@ -222,7 +222,7 @@ export default {
 		z-index: 10021; // above modal-header so menubar is always on top
 		background-color: var(--color-main-background-translucent);
 		backdrop-filter: var(--background-blur);
-		max-height: 44px; // important for mobile so that the buttons are always inside the container
+		max-height: var(--default-clickable-area); // important for mobile so that the buttons are always inside the container
 		padding-top:3px;
 		padding-bottom: 3px;
 

diff --git a/src/components/Suggestion/SuggestionListWrapper.vue b/src/components/Suggestion/SuggestionListWrapper.vue
@@ -151,7 +151,7 @@ export default {
 		font-weight: bold;
 		color: var(--color-primary-element);
 		font-size: var(--default-font-size);
-		line-height: 44px;
+		line-height: var(--default-clickable-area);
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;

diff --git a/src/css/prosemirror.scss b/src/css/prosemirror.scss
@@ -21,8 +21,8 @@ div.ProseMirror {
 	outline: none;
 
 	:target {
-		// Menubar height: 44px + 3px bottom + 3px top padding
-		scroll-margin-top: 50px;
+		// Menubar height: 34 + 3px bottom + 3px top padding
+		scroll-margin-top: 40px;
 	}
 
 	&[contenteditable=true],

diff --git a/src/nodes/ImageView.vue b/src/nodes/ImageView.vue
@@ -414,8 +414,8 @@ export default {
 		padding: 8px;
 
 		img {
-			width: 44px;
-			height: 44px;
+			width: var(--default-clickable-area);
+			height: var(--default-clickable-area);
 		}
 
 		.metadata {

diff --git a/src/nodes/Preview.js b/src/nodes/Preview.js
@@ -94,6 +94,7 @@ export default Node.create({
 			/**
 			 * Insert a preview for given link.
 			 *
+			 * @param link
 			 */
 			insertPreview: (link) => ({ state, chain }) => {
 				return chain()

diff --git a/src/views/DirectEditing.vue b/src/views/DirectEditing.vue
@@ -160,8 +160,8 @@ export default {
 	}
 
 	button {
-		width: 44px;
-		height: 44px;
+		width: var(--default-clickable-area);
+		height: var(--default-clickable-area);
 		margin: 0;
 		background-size: 16px;
 		border: 0;

diff --git a/src/views/RichWorkspace.vue b/src/views/RichWorkspace.vue
@@ -220,7 +220,7 @@ export default {
 	}
 
 	.rich-workspace--preview {
-		margin-top: 44px;
+		margin-top: var(--default-clickable-area);
 
 		&:deep(div[contenteditable='false']) {
 			margin: 0;