Merge pull request #12261 from nextcloud/fix/settings-button

fix(LeftSidebar): get rid of server styles for settings button

src/components/LeftSidebar/LeftSidebar.spec.js

@@ -18,7 +18,7 @@ import router from '../../__mocks__/router.js'
 import { searchPossibleConversations, searchListedConversations } from '../../services/conversationsService.js'
 import { EventBus } from '../../services/EventBus.js'
 import storeConfig from '../../store/storeConfig.js'
-import { findNcListItems, findNcActionButton } from '../../test-helpers.js'
+import { findNcListItems, findNcActionButton, findNcButton } from '../../test-helpers.js'
 import { requestTabLeadership } from '../../utils/requestTabLeadership.js'
 
 jest.mock('../../services/conversationsService', () => ({
@@ -742,7 +742,7 @@ describe('LeftSidebar.vue', () => {
 		subscribe('show-settings', eventHandler)
 		const wrapper = mountComponent()
 
-		const button = wrapper.find('.settings-button')
+		const button = findNcButton(wrapper, 'Talk settings')
 		expect(button.exists()).toBeTruthy()
 
 		await button.trigger('click')

src/components/LeftSidebar/LeftSidebar.vue

@@ -280,12 +280,13 @@
 		</template>
 
 		<template #footer>
-			<div id="app-settings">
-				<div id="app-settings-header">
-					<NcButton class="settings-button" @click="showSettings">
-						{{ t('spreed', 'Talk settings') }}
-					</NcButton>
-				</div>
+			<div class="left-sidebar__settings-button-container">
+				<NcButton type="tertiary" wide @click="showSettings">
+					<template #icon>
+						<Cog :size="20" />
+					</template>
+					{{ t('spreed', 'Talk settings') }}
+				</NcButton>
 			</div>
 		</template>
 	</NcAppNavigation>
@@ -298,6 +299,7 @@ import { ref } from 'vue'
 import AccountMultiplePlus from 'vue-material-design-icons/AccountMultiplePlus.vue'
 import AtIcon from 'vue-material-design-icons/At.vue'
 import ChatPlus from 'vue-material-design-icons/ChatPlus.vue'
+import Cog from 'vue-material-design-icons/Cog.vue'
 import FilterIcon from 'vue-material-design-icons/Filter.vue'
 import FilterRemoveIcon from 'vue-material-design-icons/FilterRemove.vue'
 import List from 'vue-material-design-icons/FormatListBulleted.vue'
@@ -393,6 +395,7 @@ export default {
 		Phone,
 		Plus,
 		ChatPlus,
+		Cog,
 		List,
 		Note,
 		NcEmptyContent,
@@ -1024,14 +1027,14 @@ export default {
 
 	.filters {
 		position: absolute;
-		top: 8px;
-		right: 56px;
+		top: calc(var(--default-grid-baseline) * 2);
+		right: calc(var(--default-grid-baseline) * 3 + var(--default-clickable-area));
 	}
 
 	.actions {
 		position: absolute;
-		top: 8px;
-		right: 8px;
+		top: calc(var(--default-grid-baseline) * 2);
+		right: calc(var(--default-grid-baseline) * 2);
 	}
 }
 
@@ -1071,15 +1074,12 @@ export default {
 .conversations-search {
 	transition: all 0.15s ease;
 	z-index: 1;
-	// New conversation button width : 52 px
-	// Filters button width : 44 px
-	// Spacing : 3px + 1px
-	// Total : 100 px
-	width: calc(100% - 100px);
+	// TODO replace with NcAppNavigationSearch
+	width: calc(100% - var(--default-grid-baseline) * 2 - var(--default-clickable-area) * 2);
 	display: flex;
 
 	&--expanded {
-		width: calc(100% - 8px);
+		width: 100%;
 	}
 
 	:deep(.input-field) {
@@ -1087,15 +1087,15 @@ export default {
 	}
 }
 
+.left-sidebar__settings-button-container {
+	padding: calc(2 * var(--default-grid-baseline));
+}
+
 :deep(.empty-content) {
 	text-align: center;
 	padding: 20% 10px 0;
 }
 
-.settings-button {
-	justify-content: flex-start !important;
-}
-
 :deep(.app-navigation__list) {
 	padding: 0 !important;
 }
@@ -1112,8 +1112,4 @@ export default {
 	overflow: hidden;
 	outline-offset: -2px;
 }
-
-:deep(#app-settings-header) {
-	padding-top: calc(var(--default-grid-baseline) * 2);
-}
 </style>